/* ============================================================
   Registro de Asistencia EOM México — Design System
   Paleta, tipografía, espaciado y componentes accesibles.
   ============================================================ */
/* Tipografía de marca (auto-hospedada, funciona sin internet) */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/poppins-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/poppins-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/poppins-latin-700-normal.woff2") format("woff2")}
:root{
  /* color */
  --pri:#0f6e7a; --pri2:#0b5a64; --pri-soft:#e8f3f4;   /* EOM teal */
  --dan:#dc2626; --dan2:#b91c1c;
  --ok:#16a34a; --ok-bg:#dcfce7; --ok-ink:#166534;
  --ink:#12333d; --ink-2:#2b4a53; --muted:#6b7a80;     /* EOM navy + grises */
  --bg:#eef4f5; --bg-2:#e2eded;
  --card:#ffffff; --line:#e2e7f2; --line-2:#d4dbec;
  --navy:#12333d;   /* EOM navy */
  /* forma */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(20,30,70,.08);
  --sh:0 8px 28px rgba(20,30,70,.10);
  --sh-lg:0 18px 48px rgba(20,30,70,.16);
  --ring:0 0 0 3px rgba(15,110,122,.35);   /* EOM teal focus */
  /* ritmo */
  --sp:16px; --tap:52px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* layout ------------------------------------------------------ */
.wrap{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.hdr{display:flex;justify-content:space-between;align-items:center;gap:12px;
     padding:12px 16px;margin:12px 16px 0;background:#fff;border:1px solid var(--line);
     border-radius:var(--r);box-shadow:var(--sh-sm)}
.brand{font-weight:700;font-size:15px;color:var(--ink-2);letter-spacing:-.01em}
.logout{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;
        padding:8px 12px;border-radius:var(--r-pill);transition:background .15s}
.logout:hover{background:var(--bg-2)}
.card{background:var(--card);margin:10px 16px;padding:24px;border-radius:var(--r-lg);
      box-shadow:var(--sh);flex:1;animation:rise .3s ease}
.card.wide{max-width:100%}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ftr{color:var(--muted);text-align:center;font-size:12px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ftr-logo{height:16px;width:auto;opacity:.55}

/* tipografía -------------------------------------------------- */
h1{font-size:24px;line-height:1.2;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:18px;margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:13px}
p{margin:8px 0}

/* formularios ------------------------------------------------- */
.stack{display:block;margin:18px 0}
label{font-weight:600;font-size:14px;color:var(--ink-2)}
input,select{
  width:100%;margin-top:8px;min-height:var(--tap);padding:14px 16px;
  border:1.5px solid var(--line-2);border-radius:var(--r);
  font-size:16px;color:var(--ink);background:#fbfcff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder{color:#9aa4c0}
input:hover,select:hover{border-color:#c0cae4}
input:focus,select:focus{outline:none;border-color:var(--pri);background:#fff;box-shadow:var(--ring)}

/* botones ----------------------------------------------------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:var(--tap);padding:14px 18px;border:0;border-radius:var(--r);
  font-size:16px;font-weight:700;cursor:pointer;
  transition:transform .06s ease, box-shadow .15s, background .15s, opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary{background:var(--pri);color:#fff;box-shadow:0 6px 16px rgba(37,99,216,.28)}
.btn.primary:hover{background:var(--pri2)}
.btn.danger{background:var(--dan);color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.24)}
.btn.danger:hover{background:var(--dan2)}
.btn.ghost{background:var(--pri-soft);color:var(--pri2)}
.btn.ghost:hover{background:#e2ebff}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}

/* estado ------------------------------------------------------ */
.estado{display:flex;align-items:center;justify-content:center;gap:8px;
        padding:14px;border-radius:var(--r);text-align:center;font-weight:700;
        margin:14px 0;background:#eef1f8;color:var(--ink-2)}
.estado.dentro{background:var(--ok-bg);color:var(--ok-ink)}

/* alertas ----------------------------------------------------- */
.alert{margin-top:14px;padding:13px 15px;border-radius:var(--r);font-size:14px;font-weight:500;
       display:flex;gap:8px;align-items:flex-start}
.alert.err,.alert.error{background:#fee2e2;color:#991b1b}
.alert.ok{background:var(--ok-bg);color:var(--ok-ink)}

/* cámara / selfie -------------------------------------------- */
.selfie-box{margin-top:16px;text-align:center}
video,#preview{width:100%;max-height:240px;border-radius:var(--r);background:#000;object-fit:cover}

/* tabla admin ------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
        text-align:left;padding:10px 8px;border-bottom:2px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line);padding:10px 8px;vertical-align:top}
.tbl tr:hover td{background:#f7f9ff}
.tbl code{white-space:pre-wrap;word-break:break-word;font-size:12px;color:var(--ink-2)}

/* links ------------------------------------------------------- */
a{color:var(--pri2)}
a:hover{color:var(--pri)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}