/* Portal Escuadrón — portada de escuelaescuadron.cl para el portal (login estilo Asistencia) */
@font-face { font-family:'Sora'; src:url('/fonts/sora.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }

:root {
  --titulo:'Sora',system-ui,sans-serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --crema:#FFFDF9; --crema-hondo:#FAF4EB; --tinta:#4A2E1C; --gris:#7C6553;
  --gris-claro:#9C8574; --borde:#EEE3D5;

  --lectura:#7D8F4E; --simce:#6B7F99; --reservas:#B85C2A; --asistencia:#C39544;
  --acceso:#244f20; --portal:#B85C2A;

  /* verdes del login (como Asistencia) */
  --verde-900:#17360f; --verde-800:#244f20; --verde-700:#2f6629; --verde-600:#3a7d34;
  --verde-500:#4c9a44; --verde-100:#e6f0e4; --verde-50:#f3f8f2;
  --gl-900:#1f2933; --gl-700:#48545f; --gl-500:#7b8794; --gl-200:#e4e7eb; --gl-100:#f5f7fa;
  --rojo:#c62828; --rojo-100:#fdecea;

  --radio:22px; --radio-sm:15px;
  --sombra:0 1px 2px rgba(74,46,28,.05), 0 10px 24px -12px rgba(74,46,28,.18);
  --sombra-alta:0 2px 6px rgba(74,46,28,.07), 0 16px 34px -14px rgba(74,46,28,.24);
  --transicion:.38s cubic-bezier(.22,.61,.36,1);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }

/* ── Páginas con sesión: foto del colegio de fondo ────────────────────── */
body {
  font-family:var(--texto); color:var(--tinta); min-height:100vh; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    linear-gradient(180deg, rgba(15,18,24,.30) 0%, rgba(15,18,24,.42) 42%, rgba(15,18,24,.74) 78%, rgba(15,18,24,.88) 100%),
    url('/img/colegio-fondo.jpg?v=202610141724') center 38% / cover no-repeat fixed,
    #1b1f26;
}
@media (max-width:860px) {
  body {
    background:
      linear-gradient(180deg, rgba(15,18,24,.34) 0%, rgba(15,18,24,.48) 40%, rgba(15,18,24,.80) 78%, rgba(15,18,24,.92) 100%),
      url('/img/colegio-fondo-movil.jpg?v=202610141724') center 46% / cover no-repeat,
      #1b1f26;
  }
}
@supports (-webkit-touch-callout:none) { body { background-attachment:scroll; } }

/* ── Login (estilo Asistencia) ───────────────────────────────────────── */
.login-fondo { display:flex; justify-content:center; align-items:center; min-height:100vh;
               padding:20px; background:linear-gradient(160deg,var(--verde-50) 0%,var(--gl-100) 55%); }
.login-caja { background:#fff; border-radius:20px; padding:44px 40px; width:100%; max-width:430px;
              border:1px solid var(--gl-200); box-shadow:0 10px 18px -4px rgba(23,54,15,.16); }
.login-caja .escudo { display:block; margin:0 auto 16px; width:108px; height:108px; }
.login-caja h1 { text-align:center; font-size:23px; font-weight:800; color:var(--verde-900); margin-bottom:6px; }
.login-caja .subtitulo { text-align:center; color:var(--gl-500); margin-bottom:26px; font-size:14px; }
.login-caja .btn { width:100%; padding:14px; font-size:16px; }
.login-pie { text-align:center; margin-top:18px; font-size:13px; color:var(--gl-500); line-height:1.9; }
.login-pie a { color:var(--verde-700); font-weight:600; text-decoration:none; }
.login-pie a:hover { text-decoration:underline; }

.form-group { margin-bottom:18px; }
.form-group label { display:block; margin-bottom:7px; font-weight:600; font-size:14px; color:var(--gl-700); }
.form-control { width:100%; padding:13px; border:2px solid var(--gl-200); border-radius:9px;
                font-size:15px; font-family:inherit; background:#fff; color:var(--gl-900); }
.form-control:focus { outline:none; border-color:var(--verde-500); box-shadow:0 0 0 3px var(--verde-100); }
.btn { padding:10px 18px; border:1px solid transparent; border-radius:9px; font-size:14px; font-weight:600;
       cursor:pointer; text-decoration:none; display:inline-block; font-family:inherit; text-align:center; }
.btn-primary { background:var(--verde-700); color:#fff; }
.btn-primary:hover { background:var(--verde-800); }
.btn-secondary { background:var(--gl-200); color:var(--gl-900); }
.btn-secondary:hover { background:#cbd2d9; }
.btn-danger { background:var(--rojo); color:#fff; }
.btn-mini { padding:6px 11px; font-size:12px; }

.alerta { padding:12px 15px; border-radius:9px; font-size:14px; margin-bottom:16px; border:1px solid; }
.alerta-error { background:var(--rojo-100); color:var(--rojo); border-color:#f3c3c0; }
.alerta-exito { background:#edf3e1; color:#4f6127; border-color:#d6debe; }

/* ── Barra superior con el nombre y la cuenta del profesor ───────────── */
.barra { background:rgba(255,251,246,.10); border-bottom:1px solid rgba(255,255,255,.18);
         backdrop-filter:blur(8px); }
.barra__ancho { max-width:1240px; margin:0 auto; padding:12px clamp(16px,4vw,40px);
                display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.marca { display:flex; align-items:center; gap:12px; text-decoration:none; }
.marca .escudo-mini { width:44px; height:44px; border-radius:50%; background:var(--crema);
                      display:grid; place-items:center; box-shadow:0 0 0 4px rgba(255,255,255,.18); }
.marca .escudo-mini img { width:100%; height:100%; object-fit:contain; padding:3px; }
.marca__texto { display:flex; flex-direction:column; line-height:1.2; }
.marca__texto strong { font-family:var(--titulo); font-size:16px; color:#fff; letter-spacing:-.01em; }
.marca__texto span { font-size:11.5px; color:rgba(255,255,255,.72); letter-spacing:.06em; text-transform:uppercase; }
.barra__derecha { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.usuario-chip { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25;
                padding:6px 14px; border-radius:14px; background:rgba(255,251,246,.12);
                border:1px solid rgba(255,255,255,.22); }
.usuario-chip strong { font-family:var(--titulo); font-size:13.5px; color:#fff; font-weight:600; }
.usuario-chip span { font-size:11.5px; color:rgba(255,255,255,.72); }
.nav-mini { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.nav-mini a, .nav-mini button { font-family:var(--titulo); font-size:13px; font-weight:600; color:#fff;
                                text-decoration:none; padding:7px 13px; border-radius:999px;
                                border:1px solid rgba(255,255,255,.3); background:transparent; cursor:pointer; }
.nav-mini a:hover, .nav-mini button:hover { background:rgba(255,255,255,.16); }
.nav-mini form { margin:0; }

/* ── Contenido ───────────────────────────────────────────────────────── */
.marco { max-width:1240px; margin:0 auto; padding:clamp(26px,4vw,48px) clamp(16px,4vw,40px) 36px;
         min-height:calc(100vh - 70px); display:flex; flex-direction:column; }
.contenido { flex:1; }

.hero-menu { text-align:center; margin-bottom:clamp(24px,3.5vw,38px); }
.hero-menu .institucion { font-family:var(--titulo); font-size:11px; font-weight:600; letter-spacing:.22em;
                          text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:8px; }
.hero-menu h1 { font-family:var(--titulo); font-size:clamp(26px,4.4vw,42px); font-weight:700; line-height:1.1;
                letter-spacing:-.028em; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.42); text-wrap:balance; }
.hero-menu .lema { margin-top:12px; font-size:clamp(14px,1.7vw,16px); color:rgba(255,255,255,.82);
                   max-width:52ch; margin-inline:auto; }
.filete { width:68px; height:3px; border-radius:3px; margin:20px auto 0;
          background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); }

/* ── Rejilla de plataformas (mismo formato y destello de la portada) ──── */
.rejilla { display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
           gap:clamp(12px,1.4vw,18px); align-items:stretch; }
@media (max-width:1180px) { .rejilla { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:780px)  { .rejilla { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px)  { .rejilla { grid-template-columns:1fr; } }
a.tarjeta-app { position:relative; display:flex; flex-direction:column; padding:28px 24px 22px;
                border-radius:var(--radio); background:linear-gradient(180deg,#FFFFFF 0%,var(--crema) 55%,var(--crema-hondo) 100%);
                border:1px solid var(--borde); box-shadow:var(--sombra); text-decoration:none; color:inherit;
                overflow:hidden; transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
                animation:aparecer .75s cubic-bezier(.22,.61,.36,1) backwards; }
a.tarjeta-app:nth-child(1){animation-delay:.08s} a.tarjeta-app:nth-child(2){animation-delay:.18s}
a.tarjeta-app:nth-child(3){animation-delay:.28s} a.tarjeta-app:nth-child(4){animation-delay:.38s}
a.tarjeta-app:nth-child(5){animation-delay:.48s}
@keyframes aparecer { from { opacity:0; transform:translateY(24px) scale(.97); } to { opacity:1; transform:none; } }
a.tarjeta-app::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--acento); z-index:2; }
a.tarjeta-app::after { content:""; position:absolute; top:-25%; left:-75%; width:45%; height:150%; pointer-events:none;
                       background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
                       transform:skewX(-18deg); transition:left .95s cubic-bezier(.4,0,.2,1); }
a.tarjeta-app:hover::after { left:145%; }
a.tarjeta-app:hover { transform:translateY(-9px) scale(1.015); box-shadow:var(--sombra-alta); border-color:var(--acento-borde); }
.icono { width:56px; height:56px; border-radius:var(--radio-sm); display:grid; place-items:center;
         margin-bottom:18px; color:var(--acento); background:var(--acento-suave);
         box-shadow:inset 0 0 0 1.5px var(--acento-borde); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
a.tarjeta-app:hover .icono { transform:scale(1.13) rotate(-5deg); }
.icono svg { width:27px; height:27px; }
a.tarjeta-app h2 { font-family:var(--titulo); font-size:18.5px; font-weight:600; letter-spacing:-.015em;
                   color:var(--tinta); margin-bottom:9px; }
a.tarjeta-app p { font-size:14px; line-height:1.65; color:var(--gris); flex:1; text-wrap:pretty; }
a.tarjeta-app .boton { display:flex; align-items:center; justify-content:space-between; gap:10px;
                       margin-top:20px; padding:12px 17px; border-radius:var(--radio-sm);
                       background:var(--acento); color:#fff; font-family:var(--titulo); font-size:14px;
                       font-weight:600; box-shadow:0 4px 12px -4px var(--acento); }
a.tarjeta-app:hover .boton { filter:brightness(1.09); }
.flecha { transition:transform var(--transicion); }
a.tarjeta-app:hover .flecha { transform:translateX(6px); }

.lectura    { --acento:var(--lectura);    --acento-suave:#F0F1E6; --acento-borde:#D9DDC5; }
.simce      { --acento:var(--simce);      --acento-suave:#EAEDF1; --acento-borde:#CDD3DB; }
.reservas   { --acento:var(--reservas);   --acento-suave:#F8ECE4; --acento-borde:#E9D3C3; }
.asistencia { --acento:var(--asistencia); --acento-suave:#F8F1E1; --acento-borde:#E8DCBF; }
.sitio      { --acento:#7C6553;           --acento-suave:#F3EBE2; --acento-borde:#E5D6C6; }


/* Las 5 tarjetas en una sola fila (pantallas de escritorio) */
@media (min-width:1181px) {
  a.tarjeta-app { padding:24px 18px 20px; }
  a.tarjeta-app h2 { font-size:16px; line-height:1.25; }
  a.tarjeta-app p { font-size:13px; line-height:1.55; }
  a.tarjeta-app .icono { width:48px; height:48px; margin-bottom:14px; }
  a.tarjeta-app .icono svg { width:23px; height:23px; }
  a.tarjeta-app .boton { padding:10px 14px; font-size:13px; margin-top:16px; }
}

/* ── Paneles crema (cuentas, mi clave) ───────────────────────────────── */
.panel { position:relative; background:linear-gradient(180deg,var(--crema) 0%,var(--crema-hondo) 100%);
         border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra);
         padding:clamp(22px,3vw,32px); margin-bottom:18px; overflow:hidden; }
.panel::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--portal); }
.panel.angosto { max-width:520px; margin-inline:auto; }
.panel h1, .panel h2 { font-family:var(--titulo); color:var(--tinta); letter-spacing:-.015em; }
.panel h1 { font-size:clamp(22px,3vw,28px); margin-bottom:6px; }
.panel h2 { font-size:19px; margin-bottom:16px; }
.panel .ayuda { color:var(--gris); font-size:14.5px; margin-bottom:18px; }
.panel label { display:block; font-size:13.5px; font-weight:600; color:var(--tinta); margin-bottom:14px; }
.panel input, .panel select { width:100%; margin-top:6px; padding:12px 14px; border:1px solid var(--borde);
                              border-radius:var(--radio-sm); font-family:var(--texto); font-size:15px;
                              color:var(--tinta); background:#fff; }
.panel input:focus, .panel select:focus { outline:none; border-color:var(--portal); box-shadow:0 0 0 3px rgba(184,92,42,.14); }
.panel button, .panel .btn-accion { font-family:var(--titulo); font-size:14px; font-weight:600; color:#fff;
                                    background:var(--portal); border:0; border-radius:var(--radio-sm);
                                    padding:11px 18px; cursor:pointer; }
.panel .btn-accion:hover { filter:brightness(1.08); }
.panel .secundario { background:transparent; color:var(--portal); border:1.5px solid var(--portal); }
.panel .peligro { background:#a33a2a; }
.panel .nota { color:var(--gris-claro); font-size:13px; margin-top:14px; }
.panel .fila { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.panel .fila label { flex:1 1 150px; margin-bottom:0; }
.panel .linea { display:flex; gap:6px; margin-bottom:6px; }
.panel .linea input { margin-top:0; padding:8px 10px; font-size:13px; }
.panel .linea button { padding:8px 12px; font-size:12.5px; }
.panel .acciones { min-width:250px; }

table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--borde); vertical-align:top; }
th { font-family:var(--titulo); font-size:12px; font-weight:600; letter-spacing:.04em;
     text-transform:uppercase; color:var(--gris); }

/* ── Pie ─────────────────────────────────────────────────────────────── */
footer.pie { margin-top:auto; padding-top:clamp(24px,3.5vw,36px); text-align:center;
             font-size:12.5px; color:rgba(255,255,255,.55); line-height:2; }
footer.pie a { color:rgba(255,255,255,.8); text-decoration:none; }
footer.pie a:hover { text-decoration:underline; }
footer.pie .punto { display:inline-block; width:3px; height:3px; border-radius:50%;
                    background:currentColor; vertical-align:middle; margin:0 9px; }
.nota-fuera { text-align:center; color:rgba(255,255,255,.75); font-size:13.5px; margin-top:16px; }
.nota-fuera a { color:#FFE2C4; font-weight:600; text-decoration:none; }

@media (max-width:640px) {
  a.tarjeta-app { padding:22px 18px 18px; }
  .barra__ancho { padding:10px 14px; }
  .usuario-chip { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  a.tarjeta-app:hover { transform:none; }
  a.tarjeta-app::after { display:none; }
}