/* ============================================================================
 *  styles.css — Estilos compartidos (Parte A ciudadana + Parte B abogados)
 *  Base tomada del prototipo canónico verifica-e14.html, extendida a PWA
 *  responsive (teléfono y computador) y a las dos superficies.
 * ==========================================================================*/
:root{
  --ink:#16203A; --ink-soft:#48536E; --paper:#E9EBEF; --surface:#FFFFFF;
  --line:#D3D7DF; --line-soft:#E6E9EE; --verified:#15724A; --verified-bg:#E5F2EB;
  --review:#9C5A00; --review-bg:#F8EEDD; --tamper:#A8201A; --tamper-bg:#F7E4E2;
  --focus:#2D5BD0;
  /* Bandera de Colombia (colores oficiales) */
  --flag-yellow:#FCD116; --flag-blue:#003893; --flag-red:#CE1126;
  --flag-blue-dk:#00255e; --flag-red-dk:#8f0c18;
  --r:14px; --rs:9px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* ---- Fondo: bandera de Colombia ondulante (filtro SVG de tela) ---- */
/* La ondulación orgánica la produce el filtro #flagWave (inyectado por flag.js):
   feTurbulence + feDisplacementMap deforman los colores como tela real. El
   transform solo aporta un vaivén suave de todo el lienzo; nada se desliza en bloque. */
body::before{
  content:""; position:fixed; inset:-16%; z-index:-3;
  background:linear-gradient(180deg,
    var(--flag-yellow) 0 50%,
    var(--flag-blue) 50% 75%,
    var(--flag-red) 75% 100%);
  filter:url(#flagWave);
  animation:flagSway 13s ease-in-out infinite alternate;
  will-change:transform;
}
/* Destello suave: un brillo diagonal que recorre la tela (luz sobre el lienzo) */
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%,
    rgba(255,255,255,.30) 50%, transparent 58%);
  background-size:300% 300%;
  mix-blend-mode:screen;
  animation:flagShine 10s ease-in-out infinite;
}
@keyframes flagSway{
  0%{transform:translate(-1.3%,-0.6%) skewY(-0.5deg) scale(1.05)}
  100%{transform:translate(1.3%,0.6%) skewY(0.5deg) scale(1.05)}
}
@keyframes flagShine{ 0%{background-position:150% 0} 60%,100%{background-position:-70% 0} }
@media(prefers-reduced-motion:reduce){
  body::before{animation:none;filter:none}
  body::after{animation:none}
}

/* Panel translúcido: deja brillar la bandera detrás y mantiene el texto legible */
.wrap{max-width:720px;margin:16px auto 44px;padding:24px 18px 88px;
  position:relative;z-index:1;
  background:rgba(233,235,239,.84);
  backdrop-filter:blur(5px) saturate(1.1);-webkit-backdrop-filter:blur(5px) saturate(1.1);
  border:1px solid rgba(255,255,255,.6);border-radius:20px;
  box-shadow:0 16px 55px rgba(0,0,0,.26)}
/* Cinta tricolor en el borde superior del panel */
.wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--flag-yellow) 0 50%,var(--flag-blue) 50% 75%,var(--flag-red) 75% 100%);
  border-radius:20px 20px 0 0}
.wrap.wide{max-width:980px}
@media(max-width:480px){.wrap{margin:8px 7px 30px;border-radius:16px;padding:20px 13px 70px}
  .wrap::before{border-radius:16px 16px 0 0}}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-0.01em;margin:0}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--focus)}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:4px}
.hidden{display:none !important}

/* Header */
header.top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.crest{width:40px;height:40px;flex:none;border-radius:8px;background:var(--ink);
  display:grid;place-items:center;color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:15px}
header.top h1{font-size:21px;line-height:1.1}
header.top .sub{font-size:12.5px;color:var(--ink-soft);font-weight:500;letter-spacing:.02em;text-transform:uppercase}

.neutral{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);
  padding:13px 15px;font-size:13.5px;color:var(--ink-soft);margin:14px 0 22px;line-height:1.5}
.neutral b{color:var(--ink)}

/* Bloque de ayuda para descargar el E-14 oficial */
.reg-help{background:#fff;border:1px solid var(--line);border-left:4px solid var(--flag-blue);
  border-radius:var(--rs);padding:14px 15px;margin:4px 0 16px}
.reg-help h3{font-family:'Space Grotesk',sans-serif}
.reg-help summary::-webkit-details-marker{color:var(--flag-blue)}

/* Asistente OCR de cifras */
.ocr-assist{background:#fbfbfc;border:1px solid var(--line-soft);border-radius:var(--rs);padding:13px 14px;margin:0 0 14px}
.ocr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ocr-chips .chip{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;
  background:#fff;border:1.5px solid var(--flag-blue);color:var(--flag-blue);
  border-radius:999px;padding:6px 14px;cursor:pointer;transition:transform .08s,background .15s}
.ocr-chips .chip:hover{background:#eef3ff}
.ocr-chips .chip:active{transform:translateY(1px)}
.ocr-chips .chip.used{opacity:.4;text-decoration:line-through}
/* Casilla activa para recibir un número del asistente */
input.num-target{outline:3px solid var(--flag-yellow);outline-offset:1px}
input.from-ocr{border-color:var(--review);background:#fffdf5}

/* Mapa */
.map{height:58vh;min-height:320px;border-radius:var(--rs);border:1px solid var(--line);z-index:0}
.map-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px;font-size:12.5px;color:var(--ink-soft)}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-legend .dot{width:11px;height:11px;border-radius:50%}
.leaflet-popup-content{font-family:'Inter',sans-serif;font-size:13px}

/* Consentimiento de ubicación */
.consent{display:flex;align-items:flex-start;gap:9px;background:#eef3ff;border:1px solid #cdd9f5;
  border-radius:var(--rs);padding:11px 13px;margin-top:12px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.consent input{margin-top:2px;flex:none;width:auto}

/* Top navigation between surfaces */
nav.tabs{display:flex;gap:8px;margin:16px 0 22px;flex-wrap:wrap}
nav.tabs a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:'Space Grotesk';font-weight:600;font-size:13.5px;color:var(--ink-soft);
  border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;background:#fff}
nav.tabs a.active{background:var(--flag-blue);color:#fff;border-color:var(--flag-blue)}
nav.tabs a:hover{border-color:var(--ink-soft)}

/* Step cards */
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;margin-bottom:16px;position:relative}
.step.locked{opacity:.5;pointer-events:none}
.step-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.step-no{font-family:'Space Grotesk';font-weight:700;font-size:13px;color:#fff;background:var(--ink);
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex:none;align-self:center}
.step h2{font-size:17px}
.step .hint{font-size:13.5px;color:var(--ink-soft);margin:6px 0 16px}

label.field{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin:0 0 5px}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],textarea,select{
  width:100%;font-family:'JetBrains Mono',monospace;font-size:15px;padding:10px 12px;
  border:1.5px solid var(--line);border-radius:var(--rs);background:#fff;color:var(--ink)}
textarea{font-family:'Inter',sans-serif;min-height:80px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--focus)}

.filebtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border:1.5px dashed var(--line);background:#fbfbfc;border-radius:var(--rs);
  padding:18px;cursor:pointer;font-weight:600;color:var(--ink);transition:border-color .15s,background .15s}
.filebtn:hover{border-color:var(--ink-soft);background:#f6f7f9}
.filebtn svg{width:20px;height:20px}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.readout{background:#fbfbfc;border:1px solid var(--line-soft);border-radius:var(--rs);
  padding:13px 14px;margin-top:14px;display:none}
.readout.show{display:block}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:4px 0;border-bottom:1px solid var(--line-soft)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-soft);font-weight:500}
.kv .v{font-family:'JetBrains Mono',monospace;text-align:right;word-break:break-all}
.hashline{font-family:'JetBrains Mono',monospace;font-size:11.5px;word-break:break-all;
  background:var(--ink);color:#dfe6f5;padding:9px 11px;border-radius:7px;margin-top:6px;line-height:1.6}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .full{grid-column:1/-1}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:560px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}}

.check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;padding:9px 12px;border-radius:8px;margin-top:9px;font-weight:500}
.check .ic{flex:none;font-weight:700}
.check.ok{background:var(--verified-bg);color:var(--verified)}
.check.warn{background:var(--review-bg);color:var(--review)}
.check.bad{background:var(--tamper-bg);color:var(--tamper)}
.check.neu{background:#eef1f5;color:var(--ink-soft)}

.btn{font-family:'Space Grotesk';font-weight:600;font-size:15px;border:0;border-radius:var(--rs);
  padding:13px 18px;cursor:pointer;width:100%;transition:transform .08s,filter .15s}
.btn:active{transform:translateY(2px)}
/* Botones en colores de bandera, contrastantes y con relieve para resaltar */
.btn.primary{background:var(--flag-blue);color:#fff;box-shadow:0 3px 0 var(--flag-blue-dk)}
.btn.primary:hover{filter:brightness(1.14)}
.btn.primary:active{box-shadow:0 1px 0 var(--flag-blue-dk)}
.btn.ghost{background:#fff;color:var(--flag-blue);border:2px solid var(--flag-blue)}
.btn.ghost:hover{background:#eef3ff}
.btn.accent{background:var(--flag-yellow);color:var(--ink);box-shadow:0 3px 0 #c9a40f}
.btn.danger{background:var(--flag-red);color:#fff;box-shadow:0 3px 0 var(--flag-red-dk)}
.btn.danger:active{box-shadow:0 1px 0 var(--flag-red-dk)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.btn-row .btn{width:auto;flex:1}

.photo-thumb{margin-top:12px;border:1px solid var(--line);border-radius:9px;overflow:hidden;max-height:220px;display:none}
.photo-thumb.show{display:block}
.photo-thumb img{width:100%;display:block;object-fit:contain;max-height:220px;background:#f3f4f6}

video.scanner{width:100%;border-radius:9px;background:#000;max-height:300px;margin-top:12px;display:none}
video.scanner.show{display:block}

/* Classification badges VERDE / AMARILLO / ROJO */
.badge{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk';font-weight:700;
  font-size:12px;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.badge .dot{width:9px;height:9px;border-radius:50%}
.badge.verde{background:var(--verified-bg);color:var(--verified)} .badge.verde .dot{background:var(--verified)}
.badge.amarillo{background:var(--review-bg);color:var(--review)} .badge.amarillo .dot{background:var(--review)}
.badge.rojo{background:var(--tamper-bg);color:var(--tamper)} .badge.rojo .dot{background:var(--tamper)}

/* Seal / ledger */
.ledger-title{display:flex;align-items:center;gap:9px;margin:34px 0 14px}
.ledger-title h2{font-size:18px}
.ledger-title .count{font-family:'JetBrains Mono';font-size:12px;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:30px 20px;text-align:center;
  color:var(--ink-soft);font-size:14px;background:#fbfbfc}

.seal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:13px;display:flex;gap:15px;align-items:center}
.seal{width:74px;height:74px;flex:none;position:relative}
.seal svg{width:100%;height:100%}
.seal .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.seal .ctr .st{font-family:'Space Grotesk';font-weight:700;font-size:9px;letter-spacing:.04em}
.seal .ctr .hx{font-family:'JetBrains Mono';font-size:9px;margin-top:1px}
.seal-info{flex:1;min-width:0}
.seal-info .mesa{font-family:'Space Grotesk';font-weight:600;font-size:15px}
.seal-info .meta{font-size:12px;color:var(--ink-soft);margin-top:2px}
.seal-info .status{font-size:12.5px;font-weight:600;margin-top:7px;display:inline-flex;align-items:center;gap:6px}
.seal-info .seal-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.seal-info .seal-actions .btn{font-size:13px;padding:8px 13px;width:auto}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

/* Cards & tables (Part B) */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.card h2{font-size:17px;margin-bottom:6px}
.card .hint{font-size:13.5px;color:var(--ink-soft);margin:6px 0 16px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
table.data th,table.data td{border:1px solid var(--line);padding:8px 9px;text-align:left}
table.data th{background:#f3f5f8;font-family:'Space Grotesk';font-weight:600;font-size:12px}
table.data td.num,table.data th.num{font-family:'JetBrains Mono';text-align:right}
table.data tr.dif td{background:var(--tamper-bg)}
table.data tr.just td{background:var(--verified-bg)}

.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.pill.in{background:var(--tamper-bg);color:var(--tamper)}
.pill.out{background:var(--verified-bg);color:var(--verified)}

.foot{margin-top:34px;font-size:12px;color:var(--ink-soft);text-align:center;line-height:1.6}

/* Install / offline banners */
.banner{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--ink);color:#fff;border-radius:var(--rs);padding:11px 14px;margin-bottom:16px;font-size:13.5px}
.banner .btn{width:auto;padding:8px 14px;font-size:13px}
.banner.warn{background:var(--review);}

/* Landing hero */
.hero{text-align:center;padding:20px 8px 8px}
.hero h1{font-size:27px;margin-bottom:8px}
.hero p{color:var(--ink-soft);font-size:15px;max-width:520px;margin:0 auto 22px}
.surface-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.surface-cards{grid-template-columns:1fr}}
.surface-card{display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:border-color .15s,transform .08s}
.surface-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.surface-card h3{font-size:18px;margin-bottom:6px}
.surface-card p{font-size:13.5px;color:var(--ink-soft)}
.surface-card .tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--focus)}

@media(prefers-reduced-motion:no-preference){
  .stampin{animation:stamp .4s cubic-bezier(.2,1.3,.4,1)}
  @keyframes stamp{0%{transform:scale(1.5);opacity:0}60%{transform:scale(.94)}100%{transform:scale(1);opacity:1}}
}

/* Desktop refinements */
@media(min-width:760px){
  body{font-size:16px}
  .wrap{padding-top:28px}
}