:root{
  --blue:#0b3d6e; --blue2:#145a9e; --amber:#f5a623; --ink:#16212b; --muted:#5d6b78;
  --paper:#f3f6f9; --card:#fff; --line:#d9e1e8; --ok:#1b7f4b; --warn:#b36b00; --bad:#b3261e;
  --r:14px; --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:var(--safe-b)}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:.65rem 1rem;background:var(--line);color:var(--ink)}
button:disabled{opacity:.5;cursor:not-allowed}
button.primary{background:var(--blue);color:#fff;font-weight:600}
button.primary.sm{padding:.5rem .9rem}
button.ghost{background:transparent;color:inherit}
button.danger{color:var(--bad)}
select,textarea,input[type=password]{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:.25rem}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;background:var(--blue);color:#fff;padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top,0px))}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.2px}
.top nav{display:flex;gap:.25rem}
.top .ghost{color:#fff;padding:.4rem .6rem}

main{max-width:900px;margin:0 auto;padding:1rem}
.hero{font-size:1.7rem;line-height:1.15;margin:.8rem 0 .4rem;color:var(--blue)}
.hero span{color:var(--ink);font-weight:500;font-size:1.25rem}
.sub{color:var(--muted);margin:.2rem 0 1rem}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.big{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:1.1rem .5rem;background:var(--card);border:2px dashed var(--blue2);color:var(--blue);font-weight:700;border-radius:var(--r)}
.big span{font-size:1.8rem}
.big small{font-weight:400;color:var(--muted)}

.thumbs{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.thumb{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .pdf{font-weight:700;color:var(--bad)}
.thumb button{position:absolute;top:3px;right:3px;width:24px;height:24px;padding:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;line-height:24px}

.opts{display:grid;gap:.8rem;margin:.5rem 0 1rem}
.opts label{font-size:.9rem;color:var(--muted);display:block}
#btnAnalyze{width:100%;padding:.9rem;font-size:1.05rem}
.status{margin-top:.8rem;padding:.8rem 1rem;border-radius:10px;background:#e8f1fb;color:var(--blue)}
.status.err{background:#fdeceb;color:var(--bad)}
.hint{color:var(--muted);font-size:.85rem;margin-top:1rem}

.toolbar{display:flex;align-items:center;gap:.4rem;margin-bottom:.8rem;flex-wrap:wrap}
.spacer{flex:1}

.h2{font-size:1.1rem;margin:.5rem 0}
.hist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.hist li{display:flex;gap:.6rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.7rem .9rem}
.hist .t{flex:1;min-width:0}
.hist .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist .t small{color:var(--muted)}

/* ===== Informe ===== */
.report{background:transparent}
.rhead{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;background:var(--blue);color:#fff;padding:1.1rem 1.2rem;border-radius:var(--r)}
.rhead h1{margin:.1rem 0 .3rem;font-size:1.5rem;line-height:1.2}
.rhead .eyebrow{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;opacity:.8}
.rhead .lead{margin:0;opacity:.95}
.conf{white-space:nowrap;font-size:.75rem;font-weight:700;padding:.25rem .55rem;border-radius:99px;background:#fff;color:var(--ink)}
.conf-alta{background:#d7f3e3;color:var(--ok)}
.conf-media{background:#fff1cf;color:var(--warn)}
.conf-baja{background:#fbdad7;color:var(--bad)}
.rthumbs{display:flex;gap:.5rem;margin:.7rem 0;overflow:auto}
.rthumbs img{height:110px;border-radius:8px;border:1px solid var(--line);background:#fff}
.meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem;margin:.8rem 0}
.meta div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem}
.meta dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.meta dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.vistas{color:var(--muted);font-size:.9rem}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;margin:.8rem 0}
.card h2{margin:0 0 .6rem;font-size:1.05rem;color:var(--blue);display:flex;gap:.45rem;align-items:center}
.card.warn{border-color:#f0c36b;background:#fffaf0}
.card.warn h2{color:var(--warn)}
.card.doubt{border-color:#e7b5b1;background:#fff6f5}
.card.doubt h2{color:var(--bad)}
.card ul,.card ol{margin:.2rem 0;padding-left:1.2rem}
.card li{margin:.3rem 0}
.steps li{margin:.55rem 0}
.muted{color:var(--muted)} .small{font-size:.8rem}
code{background:#eef3f8;border-radius:6px;padding:.1rem .35rem;font:600 .88em ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{background:#eaf1f8;color:var(--blue);text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
th,td{padding:.5rem .55rem;border-bottom:1px solid var(--line);vertical-align:top}
tr{break-inside:avoid}

.tag{display:inline-block;font-size:.65rem;font-weight:700;padding:.05rem .4rem;border-radius:99px;vertical-align:middle}
.tag.calc{background:#e6e0fa;color:#4b36a6}

.glos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.5rem}
.glos div{background:#f7f9fb;border-radius:8px;padding:.5rem .7rem}
.glos dt{font-weight:700}
.glos dd{margin:0;color:var(--muted);font-size:.9rem}
.rfoot{font-size:.8rem;color:var(--muted);margin:1rem 0 2rem}

/* Tablas como tarjetas en pantallas angostas (no en el PDF) */
@media (max-width:640px){
  .hero{font-size:1.45rem}
  .report:not(.pdf) table,.report:not(.pdf) thead,.report:not(.pdf) tbody,.report:not(.pdf) tr,.report:not(.pdf) td{display:block;width:100%}
  .report:not(.pdf) thead{display:none}
  .report:not(.pdf) tr{border:1px solid var(--line);border-radius:10px;margin:.5rem 0;padding:.3rem .2rem;background:#fcfdfe}
  .report:not(.pdf) td{border:0;padding:.25rem .6rem}
  .report:not(.pdf) td::before{content:attr(data-label);display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  .rhead{flex-direction:column}
}

/* Contenedor fuera de pantalla para generar el PDF (ancho A4) */
.report.pdf{position:fixed;left:-10000px;top:0;width:794px;background:#fff;padding:0;font-size:14px}
.report.pdf .rhead{border-radius:0}
.report.pdf .card{break-inside:avoid;margin:.5rem 0}

/* ===== Cámara ===== */
.cam{border:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#000}
.cam::backdrop{background:#000}
.cam video{width:100%;height:100%;object-fit:contain;background:#000}
.camBar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;padding-bottom:calc(1rem + var(--safe-b));background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff}
.chk{font-size:.8rem;display:flex;gap:.35rem;align-items:center}
.camCount{font-size:.8rem;min-width:60px;text-align:center}
.shutter{width:68px;height:68px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.45);background-clip:padding-box}

.modal{border:0;border-radius:var(--r);padding:1.2rem;width:min(92vw,420px)}
.modal h2{margin-top:0}
.modal .row{display:flex;justify-content:flex-end;margin-top:1rem}

/* ===== Impresión ===== */
@page{size:A4;margin:12mm}
@media print{
  body{background:#fff}
  .top,.toolbar,#viewHome,#viewHistory,.cam,.modal{display:none!important}
  main{padding:0;max-width:none}
  #viewReport{display:block!important}
  .rhead{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card{break-inside:avoid;box-shadow:none}
  .report:not(.pdf) .tbl{overflow:visible}
  .report:not(.pdf) table{display:table!important}
  .report:not(.pdf) thead{display:table-header-group!important}
  .report:not(.pdf) tbody{display:table-row-group!important}
  .report:not(.pdf) tr{display:table-row!important;border:0;margin:0;padding:0;background:transparent}
  .report:not(.pdf) td{display:table-cell!important;padding:.5rem .55rem;border-bottom:1px solid var(--line)}
  .report:not(.pdf) td::before{display:none}
}