/* Base y layout */
:root{
    --bg-gradient-1: linear-gradient(135deg,#0f172a 0%, #1e293b 100%);
    --card-bg: #ffffff;
    --muted: #6b7280;
    --primary: #2563eb;
    --accent: #06b6d4;
    --success: #16a34a;
}

*{box-sizing:border-box}
body{
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin:0;
    min-height:100vh;
    color:#0f172a;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(37,99,235,0.08), transparent), radial-gradient(900px 400px at 90% 90%, rgba(6,182,212,0.06), transparent), #0f172a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding: 24px;
}

/* Login centering */
#login-container{
    min-height: calc(100vh - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card{
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    border: 1px solid rgba(15,23,42,0.06);
}

.login-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}
.logo{
    width:48px;height:48px;border-radius:10px;
    background: linear-gradient(135deg,var(--primary),var(--accent));
    color:white;display:flex;align-items:center;justify-content:center;font-weight:700;
}
.login-title{font-size:1.25rem;margin:0;color:#0b1220}

.login-form{display:flex;flex-direction:column;gap:12px}

input[type="text"], input[type="password"], input[type="number"]{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(2,6,23,0.08);
    background:#fcfdff;
    transition:box-shadow .15s ease,transform .05s ease,border-color .15s ease;
    font-size:0.98rem;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus{
    outline:none;
    border-color: rgba(37,99,235,0.9);
    box-shadow: 0 6px 20px rgba(37,99,235,0.12);
}

.primary-btn{
    display:inline-block;
    padding:12px 14px;
    border-radius:10px;
    background: linear-gradient(90deg,var(--primary),#1d4ed8);
    color:white;border:0;font-weight:600;cursor:pointer;font-size:1rem;
    box-shadow: 0 8px 20px rgba(37,99,235,0.18);
    transition:transform .08s ease,box-shadow .12s ease,opacity .12s ease;
}
.primary-btn:active{transform:translateY(1px)}
.primary-btn:hover{opacity:0.98}

.nota-login{font-size:0.86rem;color:var(--muted);margin:6px 0 0}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* App container separate from login */
#app-container{
    background: var(--card-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(2,6,23,0.12);
    max-width: 1100px;
    margin: 40px auto;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(2,6,23,0.06);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.hidden {display:none !important}

/* Tablas */
table {width:100%;border-collapse:collapse;margin-top:20px}
th, td {border:1px solid #e6e9ef;padding:10px;text-align:left}
th {background-color:var(--primary);color:#fff}
tr:nth-child(even){background:#fbfdff}

/* Botones auxiliares */
button{font-family:inherit}
.edit-btn{background:#f59e0b;color:#111;padding:6px 10px;border-radius:8px;border:0}
.save-btn{background:var(--primary);color:#fff;padding:6px 10px;border-radius:8px;border:0}
.delete-btn{background:#dc2626;color:#fff;padding:6px 10px;border-radius:8px;border:0}

/* Controles */
#controls-section{padding:15px;background:linear-gradient(180deg,#f8fafc,#fff);border-radius:8px;margin-bottom:20px}
#admin-controls{margin-top:15px;padding:10px;border:1px dashed rgba(15,23,42,0.06);border-radius:6px}

/* Small screens */
@media (max-width:520px){
    .login-card{padding:20px;border-radius:12px}
    .login-title{font-size:1.1rem}
}