:root{
  --carbon:#111827;--cobalto:#1E40AF;--tinte:#DDE4F7;--resaltador:#F2C230;
  --texto:#374151;--suave:#6B7280;--linea:#E5E7EB;--fondo:#FFFFFF;--gris:#F9FAFB;--error:#B91C1C;--ok:#047857;
  --serif:"Fraunces",Georgia,serif;--sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--fondo);color:var(--carbon);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--cobalto);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(30px,4.5vw,42px);line-height:1.1}
h2{font-size:24px;line-height:1.2}
h3{font-size:19px}
p{margin:0 0 12px}
.suave{color:var(--suave)}
.etiqueta{font-size:12px;letter-spacing:.14em;color:var(--suave);font-weight:600;margin:0 0 12px;text-transform:uppercase}

.demo{background:var(--resaltador);color:var(--carbon);font-size:13px;text-align:center;padding:8px 16px;font-weight:500}
.cab{border-bottom:1px solid var(--linea)}
.cab .dentro{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.3em;color:var(--carbon)}
.logo:hover{text-decoration:none}
.logo span{color:var(--cobalto)}
.cab .empresa{font-size:13px;color:var(--suave);text-align:right}
.contenedor{max-width:1180px;margin:0 auto;padding:0 24px}
.angosto{max-width:760px;margin:0 auto;padding:0 24px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;background:var(--carbon);color:#FFFFFF;font:inherit;font-weight:600;font-size:15px;padding:12px 20px;border-radius:6px;text-decoration:none}
.btn:hover{background:#1F2937;text-decoration:none}
.btn:disabled{opacity:.6;cursor:wait}
.btn.sec{background:#FFFFFF;color:var(--carbon);border:1px solid #D1D5DB}
.btn.sec:hover{background:var(--gris)}
.btn.chico{font-size:13px;padding:8px 12px}
.btn.ancho{width:100%}

label.titulo{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.opcional{font-weight:400;color:var(--suave);font-size:13px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{width:100%;font:inherit;font-size:15px;color:var(--carbon);background:#FFFFFF;border:1px solid #D1D5DB;border-radius:6px;padding:10px 12px}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cobalto);box-shadow:0 0 0 3px var(--tinte)}
.campo{margin-bottom:18px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--texto)}
.check input,.opcion input{margin-top:4px;accent-color:var(--cobalto)}
.opciones{display:grid;gap:10px;margin-bottom:18px}
.opcion{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--linea);border-radius:8px;padding:12px 14px;cursor:pointer}
.opcion:has(input:checked){border-color:var(--cobalto);background:#F5F7FD}
.opcion b{display:block;font-size:15px}
.opcion small{color:var(--suave);font-size:13px}
.alerta{border-radius:6px;padding:10px 12px;font-size:14px;margin:12px 0}
.alerta.error{background:#FEF2F2;color:var(--error);border:1px solid #FECACA}
.alerta.ok{background:#ECFDF5;color:var(--ok);border:1px solid #A7F3D0}
.codigo{font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em}

/* ---- Barra superior del portal ---- */
.marca{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.marca .empresa{font-size:13px;color:var(--suave);text-align:left;border-left:1px solid var(--linea);padding-left:18px}
.marca .empresa b{color:var(--carbon);font-weight:600}
.cab-nav{display:flex;align-items:center;gap:22px;font-size:14px;margin-left:auto}
.cab-nav a{white-space:nowrap}
.admin-btn{white-space:nowrap}
.cab-nav a:not(.btn){color:var(--texto);font-weight:500}
.cab-nav a:not(.btn):hover,.cab-nav a[aria-current=page]{color:var(--cobalto)}

/* ---- Portal ---- */
.portal{padding:36px 24px 72px}
.portal .intro{max-width:680px}
.portal .intro p{color:var(--texto);font-size:16px;margin-top:10px}
.acciones-portal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.accion{display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:12px;padding:26px 28px;color:var(--carbon);font-weight:400;min-height:190px}
.accion:hover{border-color:var(--carbon);text-decoration:none}
.accion .numero{font-size:13px;font-weight:600;color:var(--cobalto);margin-bottom:14px}
.accion h2{font-size:27px;margin-bottom:10px}
.accion p{margin:0 0 20px;color:var(--suave);font-size:15px}
.accion .ir{margin-top:auto;font-weight:600;color:var(--cobalto)}
.accion.principal{background:var(--carbon);border-color:var(--carbon);color:#FFFFFF}
.accion.principal .numero,.accion.principal .ir{color:#FFFFFF}
.accion.principal p{color:#D1D5DB}
.accion.principal:hover{background:#1F2937}
.garantias{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:13px;color:var(--suave)}
.garantias span::before{content:"✓ ";color:var(--cobalto);font-weight:700}

/* ---- Login de administrador ---- */
.login-pagina{min-height:calc(100vh - 140px);display:flex;align-items:flex-start;justify-content:center;padding:64px 24px}
.admin{width:100%;max-width:420px;border:1px solid var(--linea);border-radius:12px;padding:32px;background:var(--gris)}
.admin h1{font-size:32px;margin-bottom:4px}
.admin .suave{font-size:14px;margin-bottom:22px}
.qr{background:#FFFFFF;border:1px solid var(--linea);border-radius:8px;padding:10px;display:flex;justify-content:center;margin:12px 0}
.qr svg{width:180px;height:180px}
.secreto{font-size:12px;word-break:break-all;background:#FFFFFF;border:1px dashed #D1D5DB;border-radius:6px;padding:8px;margin-bottom:12px}

/* ---- Formularios de denuncia y folio ---- */
.pagina{padding-top:48px;padding-bottom:80px}
fieldset{border:0;border-top:1px solid var(--linea);margin:0;padding:28px 0 4px}
legend{font-family:var(--serif);font-size:21px;padding:0;margin-bottom:12px}
legend span{font-family:var(--sans);font-size:13px;color:var(--cobalto);font-weight:600;margin-right:10px}
.folio-caja{border:1px solid var(--carbon);border-radius:10px;padding:8px 22px;margin:22px 0}
.folio-caja .dato{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px dashed var(--linea)}
.folio-caja .dato:last-child{border-bottom:0}
.folio-caja .v{font-family:ui-monospace,Consolas,monospace;font-size:20px;font-weight:600;letter-spacing:.06em}
.aviso-clave{background:#FEF9E7;border-left:3px solid var(--resaltador);padding:12px 14px;font-size:14px}
.hilo{display:grid;gap:10px;margin:16px 0}
.msg{border-radius:10px;padding:10px 14px;font-size:14px;max-width:85%;white-space:pre-wrap;word-break:break-word}
.msg small{display:block;font-size:11px;color:var(--suave);margin-bottom:2px}
.msg.comite{background:var(--gris);border:1px solid var(--linea);justify-self:start}
.msg.denunciante{background:var(--tinte);justify-self:end}

/* ---- Denuncia paso a paso ---- */
.progreso{height:4px;background:var(--linea);border-radius:4px;overflow:hidden;margin:6px 0 10px}
.progreso-barra{height:100%;width:0;background:var(--cobalto);transition:width .25s}
.paso-n{font-size:13px;color:var(--suave);margin-bottom:28px}
.paso h1{margin-bottom:10px;outline:none}
.paso > .suave{margin-bottom:24px}
.opcion.grande{padding:18px 20px}
.opcion.grande b{font-size:17px}
.rejilla-opciones{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla-opciones .opcion{align-items:center}
.contador{font-size:12px;color:var(--suave);text-align:right;margin-top:4px}
.check.chico{font-size:13px;margin-top:8px}
input:disabled{background:var(--gris);color:var(--suave);cursor:not-allowed}
.navegacion{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--linea);margin-top:28px;padding-top:22px}
.navegacion #siguiente{margin-left:auto}
@media (max-width:620px){.rejilla-opciones{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.progreso-barra{transition:none}}

/* ---- Código de ética ---- */
.documento h2{margin:32px 0 10px}
.documento p,.documento li{color:var(--texto)}

/* ---- Panel ---- */
.panel-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:28px 0 18px}
.usuario{font-size:13px;color:var(--suave);display:flex;gap:12px;align-items:center}
.metricas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.metrica{background:var(--gris);border-radius:8px;padding:14px 16px}
.metrica b{display:block;font-size:26px;font-weight:600;font-family:var(--serif)}
.metrica span{font-size:13px;color:var(--suave)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filtro{border:1px solid var(--linea);background:#FFFFFF;border-radius:20px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--texto)}
.filtro.activo{background:var(--carbon);color:#FFFFFF;border-color:var(--carbon)}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:12px;color:var(--suave);font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:10px 8px;border-bottom:1px solid var(--linea)}
.tabla td{padding:12px 8px;border-bottom:1px solid var(--linea)}
.tabla tbody tr{cursor:pointer}
.tabla tbody tr:hover{background:var(--gris)}
.estado{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:4px;background:var(--tinte);color:var(--cobalto);white-space:nowrap}
.estado.nuevo{background:#FEF3C7;color:#92400E}
.estado.en_investigacion{background:#EDE9FE;color:#5B21B6}
.estado.cerrado_fundado,.estado.cerrado_no_fundado,.estado.descartado{background:#F3F4F6;color:#4B5563}
.punto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cobalto);margin-left:6px}
.vacio{padding:40px;text-align:center;color:var(--suave)}
.detalle{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;padding-bottom:60px}
.ficha dl{display:grid;grid-template-columns:170px 1fr;margin:0}
.ficha dt,.ficha dd{padding:9px 0;border-bottom:1px solid #F3F4F6;margin:0;font-size:14px}
.ficha dt{color:var(--suave)}
.ficha dd{white-space:pre-wrap;word-break:break-word}
.bloque{border:1px solid var(--linea);border-radius:10px;padding:18px;margin-bottom:16px}
.bloque h3{margin-bottom:12px}
.nota{border-left:3px solid var(--linea);padding:4px 0 4px 12px;margin-bottom:12px;font-size:14px;white-space:pre-wrap}
.nota small,.evento small{display:block;color:var(--suave);font-size:12px}
.evento{font-size:13px;padding:6px 0;border-bottom:1px dashed var(--linea)}

@media (max-width:900px){
  .portal,.detalle{grid-template-columns:1fr}
  .admin{position:static}
  .metricas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cab .dentro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:start}
  .cab-nav{grid-column:1 / -1;margin-left:0;gap:20px;font-size:13px}
  .admin-btn{grid-column:2;grid-row:1}
  .marca .empresa{border-left:0;padding-left:0}
  .acciones-portal{grid-template-columns:1fr}
  .accion{min-height:0}
}
@media (max-width:620px){
  .fila{grid-template-columns:1fr}
  .ficha dl{grid-template-columns:1fr}
  .ficha dt{border-bottom:0;padding-bottom:0}
  .tabla .ocultar-movil{display:none}
  .portal{padding-top:36px}
}