/* ======================================================
   SUYAY • styles.css (v5)
   ====================================================== */
:root{
  --bg: #ffffff;
  --fg: #101827;
  --muted: #5b667a;
  --panel: #f5f7fb;
  --border: #e6e9f0;
  --brand: #12284a;      /* navy más profundo */
  --brand-2: #2b6cb0;    /* azul */
  --accent: #f59e0b;     /* ámbar */
  --ok: #16a34a;
  --err: #ef4444;
  --warn:#f59e0b;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(2,12,31,.08);
}
:root[data-theme="dark"]{
  --bg: #0b1220;
  --fg: #e5e8ef;
  --muted: #98a2b3;
  --panel: #121a2c;
  --border: #1e293b;
  --shadow: 0 10px 34px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--fg);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica, Arial}

.wrap{max-width:1200px; margin:0 auto; padding:18px}

/* Header mejorado */
.header{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto auto; gap:16px;
  align-items:center; margin-bottom:16px;
  padding:16px; border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow:hidden;
}
.header::before{
  content:''; position:absolute; inset:-40px -40px auto -40px; height:160px;
  background: radial-gradient(1200px 200px at 20% -20%, rgba(18,40,74,.2), transparent),
              linear-gradient(90deg, rgba(18,40,74,.18), rgba(43,108,176,.18));
  pointer-events:none;
}
.brand{height:44px; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.08));}
.title{
  margin:0; line-height:1.05;
  font-weight:900; font-size:24px; letter-spacing:.3px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2) 60%, var(--accent));
  -webkit-background-clip:text; color:transparent;
}
.subtitle{margin:2px 0 0; color:var(--muted); font-weight:700}
.clock{font-weight:800}
.theme-toggle{appearance:none; border:1px solid rgba(31,58,95,.35);
  background:transparent; color:var(--fg); border-radius:999px; padding:8px 12px;
  display:flex; align-items:center; gap:8px; cursor:pointer}
.theme-toggle svg{width:18px;height:18px}

/* Perm bar */
.permbar{display:none; align-items:center; gap:10px; border:1px dashed rgba(31,58,95,.25); padding:10px 12px; border-radius:12px; margin:12px 0; background:rgba(43,108,176,.06)}
.permbar.show{display:flex}
.hint{font-weight:800}
.help{color:var(--muted)}

/* Card + Grid */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow); padding:16px}
.grid{display:grid; gap:14px}
.cols-2{grid-template-columns: minmax(0,1fr) 320px}
@media (max-width:980px){.cols-2{grid-template-columns:1fr}}

/* Inputs */
.row{display:flex; gap:8px; align-items:center}
.field{position:relative}
.input{width:100%; padding:10px 12px 10px 36px; border-radius:10px; border:1px solid var(--border); background:#fff; color:#0b1220}
:root[data-theme="dark"] .input{background:#0f172a; color:#e7ebf4}
.icon{position:absolute; left:10px; top:50%; transform:translateY(-50%)}
textarea.input{padding-left:12px; min-height:84px}

/* Buttons */
.btn{appearance:none; border-radius:12px; padding:10px 14px; border:1px solid var(--border); background:#fff; color:#0b1220; cursor:pointer; font-weight:800; transition:transform .02s}
.btn:active{transform:translateY(1px)}
:root[data-theme="dark"] .btn{background:#0f172a; color:#e5e8ef}
.btn.g{border-color:rgba(22,163,74,.6); background:linear-gradient(180deg, rgba(22,163,74,.18), transparent)}
.btn.b{border-color:rgba(43,108,176,.6); background:linear-gradient(180deg, rgba(43,108,176,.18), transparent)}
.btn.o{border-color:rgba(245,158,11,.6); background:linear-gradient(180deg, rgba(245,158,11,.16), transparent)}
.btn.ghost{background:transparent}

/* Radio segment */
.seg{display:flex; gap:8px; flex-wrap:wrap}
.seg input{position:absolute; left:-9999px}
.seg label{border:1px solid var(--border); padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:800; background:#fff}
:root[data-theme="dark"] .seg label{background:#0f172a}
.seg input:checked + label{border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(43,108,176,.18)}

/* Media / Cámara */
.media{position:relative; aspect-ratio: 4/3; background:#000; border-radius:12px; overflow:hidden; border:1px solid var(--border)}
.media video,.media canvas,.media img.preview{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.preview{border:2px solid rgba(31,58,95,.35)}
.frame-guide{position:absolute; inset:10% 18%; border:3px dashed var(--brand); border-radius:16px; box-shadow:0 0 0 9999px rgba(0,0,0,.08) inset, 0 10px 30px rgba(0,0,0,.12); pointer-events:none}
:root[data-theme="dark"] .frame-guide{box-shadow:0 0 0 9999px rgba(255,255,255,.04) inset, 0 12px 36px rgba(0,0,0,.35)}

/* Badges */
.badge{display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--muted); font-weight:800}
:root[data-theme="dark"] .badge{background:#0f172a}
.b-info{color:var(--brand-2); border-color:rgba(43,108,176,.5)}
.b-ok{color:var(--ok); border-color:rgba(22,163,74,.6)}
.b-err{color:var(--err); border-color:rgba(239,68,68,.6)}

/* Timeline */
.timeline{display:grid; gap:10px}
.hitem{display:grid; grid-template-columns: 10px 1fr auto; gap:10px; align-items:center}
.dot{width:10px; height:10px; border-radius:50%}
.dot.ENTRADA{background:var(--ok)} .dot.SALIDA{background:var(--err)}
.when{color:var(--muted)}

/* Footer */
.footer{margin:18px 0 8px; color:var(--muted); text-align:center}

/* Toast */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); min-width:280px; max-width:80vw; text-align:center; z-index:100; background:rgba(13,20,34,.92); color:#fff; padding:14px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.12); box-shadow:0 16px 48px rgba(0,0,0,.35); font-weight:800; letter-spacing:.2px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease}
:root[data-theme="light"] .toast{background:rgba(255,255,255,.96); color:#0b1220; border-color:rgba(15,23,42,.14)}
.toast.show{opacity:1; pointer-events:auto}
.toast.ok{background:linear-gradient(180deg, rgba(22,163,74,.92), rgba(13,20,34,.92))}
.toast.err{background:linear-gradient(180deg, rgba(239,68,68,.92), rgba(13,20,34,.92))}
.toast.warn{background:linear-gradient(180deg, rgba(245,158,11,.92), rgba(13,20,34,.92))}

/* Blocker */
.blocker{position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:200}
.blocker.show{display:flex}
.blocker .box{width:min(560px, 92vw); background:var(--bg); color:var(--fg); border-radius:14px; padding:18px; border:1px solid var(--border); box-shadow: var(--shadow)}