/* ============================================================
   Aula Bel · Alfaro Alba Consultores
   Paleta: azul marino #1C3557, dorado #C8972B, blanco, gris claro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --azul:      #1C3557;
    --azul-med:  #2A4E7A;
    --azul-claro:#3D6FA3;
    --dorado:    #C8972B;
    --dorado-cl: #E8B94A;
    --blanco:    #FFFFFF;
    --gris-bg:   #F5F6F8;
    --gris-borde:#DDE2EA;
    --gris-text: #6B7280;
    --texto:     #1A2535;
    --exito:     #0F6E56;
    --error:     #A32D2D;
    --advertencia:#854F0B;
    --r-md: 8px;
    --r-lg: 14px;
    --r-xl: 20px;
    --sombra: 0 2px 12px rgba(28,53,87,.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--texto);
    background: var(--gris-bg);
}

/* ── Tipografía ── */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; color: var(--azul); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
p  { color: var(--gris-text); }

a { color: var(--dorado); text-decoration: none; transition: opacity .15s; }
a:hover { opacity: .75; }

/* ── Navbar ── */
.navbar {
    background: var(--azul);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: var(--blanco);
    display: flex;
    align-items: center;
    gap: 10px;
}
.navbar-brand span { color: var(--dorado); }
.navbar-links { display: flex; gap: 1.5rem; }
.navbar-links a { color: rgba(255,255,255,.82); font-size: 13px; font-weight: 500; letter-spacing: .03em; }
.navbar-links a:hover { color: var(--dorado); opacity: 1; }

/* ── Hero ── */
.hero {
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-med) 60%, #1a4a6e 100%);
    color: var(--blanco);
    padding: 5rem 2rem 4rem;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: rgba(200,151,43,.12);
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -40px; left: 10%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(200,151,43,.07);
    pointer-events: none;
}
.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
}
.hero h1 { color: var(--blanco); margin-bottom: .5rem; }
.hero-subtitle { font-size: 1rem; color: var(--dorado-cl); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.hero p { color: rgba(255,255,255,.82); font-size: .95rem; max-width: 520px; }
.hero-foto {
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 4px solid var(--dorado);
    object-fit: cover;
    flex-shrink: 0;
}
.hero-foto-placeholder {
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 4px solid var(--dorado);
    background: rgba(200,151,43,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; flex-shrink: 0;
}

/* ── Secciones ── */
.seccion { padding: 3.5rem 2rem; }
.seccion-inner { max-width: 1100px; margin: 0 auto; }
.seccion-titulo {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--dorado);
    margin-bottom: .5rem;
}
.seccion-fondo { background: var(--blanco); }

/* ── Tarjetas ── */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.25rem;
    transition: box-shadow .2s, transform .2s;
}
.tarjeta:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.tarjeta-icono { font-size: 1.8rem; margin-bottom: .75rem; }
.tarjeta h3 { color: var(--azul); margin-bottom: .4rem; font-size: 1rem; }
.tarjeta p  { font-size: .875rem; }

/* ── Chips de universidad ── */
.uni-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: rgba(28,53,87,.1);
    color: var(--azul);
    border: 1px solid rgba(28,53,87,.2);
}

/* ── Botones ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all .15s;
    text-decoration: none;
}
.btn-primario  { background: var(--dorado); color: var(--blanco); }
.btn-primario:hover  { background: var(--dorado-cl); color: var(--azul); opacity: 1; }
.btn-secundario { background: transparent; border: 1.5px solid var(--azul); color: var(--azul); }
.btn-secundario:hover { background: var(--azul); color: var(--blanco); opacity: 1; }
.btn-peligro { background: var(--error); color: var(--blanco); }
.btn-sm { padding: 6px 14px; font-size: 12px; }

/* ── Formularios ── */
.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--azul); margin-bottom: 5px; }
.form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--r-md);
    font-size: 14px;
    font-family: inherit;
    color: var(--texto);
    background: var(--blanco);
    transition: border-color .15s;
}
.form-control:focus { outline: none; border-color: var(--azul-claro); }

/* ── Tabla admin ── */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-text); border-bottom: 2px solid var(--gris-borde); }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--gris-borde); color: var(--texto); vertical-align: middle; }
.tabla tr:hover td { background: var(--gris-bg); }

/* ── Código de acceso ── */
.codigo-box {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .18em;
    background: var(--azul);
    color: var(--dorado-cl);
    padding: 10px 20px;
    border-radius: var(--r-md);
    display: inline-block;
    user-select: all;
}

/* ── Badges ── */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-activo   { background: #E1F5EE; color: #085041; }
.badge-inactivo { background: #FCEBEB; color: #A32D2D; }

/* ── Panel de acceso (alumnos) ── */
.acceso-card {
    background: var(--blanco);
    border-radius: var(--r-xl);
    padding: 2.5rem;
    max-width: 460px;
    margin: 3rem auto;
    box-shadow: var(--sombra);
    border: 1px solid var(--gris-borde);
}
.acceso-card h2 { margin-bottom: .25rem; }
.acceso-card .sub { font-size: .85rem; color: var(--gris-text); margin-bottom: 1.5rem; }

/* ── Alertas ── */
.alerta { padding: .75rem 1rem; border-radius: var(--r-md); font-size: 13px; margin-bottom: 1rem; }
.alerta-ok    { background: #E1F5EE; color: #085041; border: 1px solid #9FE1CB; }
.alerta-error { background: #FCEBEB; color: #A32D2D; border: 1px solid #F7C1C1; }
.alerta-info  { background: #E6F1FB; color: #0C447C; border: 1px solid #B5D4F4; }

/* ── Simulador ── */
.sim-wrap { max-width: 780px; margin: 0 auto; padding: 2rem 1rem; }
.sim-header { background: var(--azul); color: var(--blanco); border-radius: var(--r-lg); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.sim-header h2 { color: var(--blanco); font-size: 1.1rem; margin: 0; font-family: 'Inter', sans-serif; font-weight: 600; }
.sim-header p  { color: rgba(255,255,255,.7); font-size: .8rem; margin: 0; }
.nivel-pill { font-size: 11px; font-weight: 600; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.np1 { background: #E1F5EE; color: #085041; }
.np2 { background: #E6F1FB; color: #0C447C; }
.np3 { background: #FAEEDA; color: #633806; }
.np4 { background: #FAECE7; color: #712B13; }

.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 1.25rem; }
.stat-card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--r-md); padding: .75rem; text-align: center; }
.stat-num  { font-size: 22px; font-weight: 600; color: var(--azul); }
.stat-lbl  { font-size: 11px; color: var(--gris-text); margin-top: 2px; }

.prog-wrap  { margin-bottom: 1.25rem; }
.prog-meta  { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris-text); margin-bottom: 5px; }
.prog-bar   { height: 6px; background: var(--gris-borde); border-radius: 999px; overflow: hidden; }
.prog-fill  { height: 100%; border-radius: 999px; transition: width .4s ease; }
.pf1 { background: #1D9E75; } .pf2 { background: #378ADD; }
.pf3 { background: #BA7517; } .pf4 { background: #D85A30; }

.caso-card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--r-lg); padding: 1.35rem; margin-bottom: .85rem; }
.caso-tag  { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--gris-text); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.dif-dot   { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.d1{background:#1D9E75;} .d2{background:#378ADD;} .d3{background:#BA7517;} .d4{background:#D85A30;}
.caso-txt  { font-size: 14px; line-height: 1.65; color: var(--texto); margin-bottom: .85rem; }
.fp-row    { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .85rem; }
.fpc       { font-size: 11px; padding: 2px 10px; border-radius: 999px; font-weight: 500; }
.fp-b  { background: #E1F5EE; color: #085041; }
.fp-p  { background: #E6F1FB; color: #0C447C; }
.fp-e  { background: #FAEEDA; color: #633806; }
.fp-c  { background: #FAECE7; color: #712B13; }
.fp-a  { background: #F1EFE8; color: #444441; }

.ptbl { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.ptbl th { text-align: left; font-size: 10px; font-weight: 600; color: var(--gris-text); padding: 0 7px 8px; border-bottom: 2px solid var(--gris-borde); }
.ptbl th.r { text-align: right; }
.ptbl td   { padding: 5px 7px; vertical-align: middle; }
.ptbl td.r { text-align: right; }

.ci { width: 100%; font-size: 12px; border: 1.5px solid var(--gris-borde); border-radius: var(--r-md); padding: 5px 9px; color: var(--texto); background: var(--blanco); font-family: inherit; }
.ci:focus { outline: none; border-color: var(--azul-claro); }
.lbg { display: flex; gap: 4px; }
.lb  { font-size: 11px; padding: 4px 10px; border: 1.5px solid var(--gris-borde); border-radius: var(--r-md); cursor: pointer; background: var(--blanco); color: var(--gris-text); transition: all .12s; font-family: inherit; }
.lb.ld { background: #E1F5EE; color: #085041; border-color: #9FE1CB; }
.lb.lh { background: #FAECE7; color: #712B13; border-color: #F5C4B3; }
.mi { width: 100%; font-size: 12px; text-align: right; border: 1.5px solid var(--gris-borde); border-radius: var(--r-md); padding: 5px 8px; color: var(--texto); background: var(--blanco); font-family: inherit; }
.mi:focus { outline: none; border-color: var(--azul-claro); }
.add-btn { margin-top: 8px; font-size: 12px; color: var(--dorado); background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 3px 0; font-family: inherit; }
.add-btn:hover { color: var(--azul); }

.act-row { display: flex; gap: 10px; margin-top: 1.1rem; flex-wrap: wrap; }

.fb { border-radius: var(--r-md); padding: 1rem 1.15rem; margin-top: .85rem; font-size: 13px; line-height: 1.6; }
.fw { background: #E1F5EE; color: #085041; border: 1px solid #9FE1CB; }
.f1 { background: #FAEEDA; color: #633806; border: 1px solid #FAC775; }
.f2 { background: #E6F1FB; color: #0C447C; border: 1px solid #B5D4F4; }
.f3 { background: #FCEBEB; color: #A32D2D; border: 1px solid #F7C1C1; }
.fb-t { font-weight: 600; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.resp-blk { margin-top: 10px; border-top: 1px solid currentColor; padding-top: 10px; }
.resp-ln { font-size: 12px; font-family: 'Courier New', monospace; padding: 2px 0; }

.hist-wrap { margin-top: 1.25rem; }
.hist-titulo { font-size: 12px; font-weight: 600; color: var(--gris-text); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .05em; }
.hi { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gris-text); padding: 5px 0; border-bottom: 1px solid var(--gris-borde); }
.hi-ok   { color: #1D9E75; } .hi-err { color: #A32D2D; }

.nub { margin-top: 10px; padding: 12px; background: var(--gris-bg); border-radius: var(--r-md); text-align: center; border: 1px solid var(--gris-borde); }
.nub-t { font-size: 15px; font-weight: 600; color: var(--azul); }
.nub-s { font-size: 12px; color: var(--gris-text); margin-top: 3px; }

/* ── Footer ── */
.footer { background: var(--azul); color: rgba(255,255,255,.65); text-align: center; padding: 1.5rem; font-size: 12px; margin-top: 3rem; }
.footer a { color: var(--dorado-cl); }
.footer strong { color: var(--blanco); }

/* ── Admin layout ── */
.admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--azul); color: var(--blanco); padding: 1.5rem 1rem; }
.admin-sidebar h3 { font-family: 'Playfair Display', serif; color: var(--blanco); font-size: 1rem; margin-bottom: .25rem; }
.admin-sidebar p  { font-size: 11px; color: rgba(255,255,255,.55); margin-bottom: 1.5rem; }
.admin-nav a { display: block; padding: 9px 12px; border-radius: var(--r-md); font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 3px; transition: all .15s; }
.admin-nav a:hover, .admin-nav a.activo { background: rgba(255,255,255,.12); color: var(--blanco); opacity: 1; }
.admin-nav a.activo { border-left: 3px solid var(--dorado); }
.admin-main { padding: 2rem; }
.admin-main h1 { font-size: 1.4rem; margin-bottom: 1.5rem; }

/* ── Card básica ── */
.card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.25rem; }
.card h3 { font-size: 1rem; margin-bottom: 1rem; font-family: 'Inter', sans-serif; color: var(--azul); }

/* ── Responsive ── */
@media (max-width: 700px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-foto, .hero-foto-placeholder { display: none; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { padding: 1rem; }
    .navbar-links { display: none; }
}