/* SUELMEC CERT — hoja de estilos única, sin dependencias externas */
:root{
  --rojo:#BA282E; --rojo-osc:#8E1A20; --rojo-suave:#FCECEE;
  --tinta:#14161B; --tinta-2:#1E2128; --gris:#5C6069; --linea:#D9DCE1; --fondo:#F2F3F5; --papel:#fff;
  --verde:#0F7B45; --verde-suave:#E8F5EE;
  --ambar:#9A6100; --ambar-suave:#FDF3E2;
  --r:6px; --sombra:0 1px 2px rgba(20,22,27,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.55}
a{color:var(--rojo-osc)}
h1,h2,h3{margin:0 0 .4em;line-height:1.2;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 1em}
small{font-size:.82rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.silencio{color:var(--gris)}
.centro{text-align:center}
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Cabecera viva (fondo oscuro obligatorio para el logo) ---------- */
.cabecera{position:relative;background:var(--tinta);overflow:hidden;border-bottom:3px solid var(--rojo)}
.cabecera::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(186,40,46,.16), transparent 62%)}
.lienzo{position:absolute;inset:0}
.lienzo canvas{display:block;width:100%;height:100%}
.cabecera-cuerpo{position:relative;z-index:2;padding:26px 16px 30px;text-align:center}
.cabecera.completa .cabecera-cuerpo{padding:54px 16px 72px}
.marca{width:auto;height:40px;display:inline-block}
.cabecera.completa .marca{height:62px}
.titular{color:#fff;margin:22px 0 6px;font-size:1.75rem;letter-spacing:-.02em}
.bajada{color:#AEB3BC;margin:0 auto;max-width:34em;font-size:.98rem}
.rotulo{color:#8A8F99;font-size:.78rem;letter-spacing:.08em;margin:10px 0 0}
.sobresale{margin-top:-44px;position:relative;z-index:3}

/* ---------- Estructura pública ---------- */
.marco{max-width:640px;margin:0 auto;padding:0 16px 56px}
.pie{color:var(--gris);text-align:center;font-size:.8rem;margin-top:40px}

/* Veredicto: el elemento memorable de la página */
.veredicto{margin:24px 0 0;padding:26px 20px;border-radius:var(--r) var(--r) 0 0;color:#fff}
.veredicto b{display:block;font-size:1.5rem;letter-spacing:.03em;text-transform:uppercase}
.veredicto p{margin:.35em 0 0;font-size:.92rem;opacity:.92}
.veredicto.ok{background:var(--verde)}
.veredicto.error{background:var(--rojo)}
.veredicto.aviso{background:var(--ambar)}

/* La hoja: evoca el documento impreso */
.hoja{background:var(--papel);border:1px solid var(--linea);border-top:none;
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--sombra);padding:22px}
.hoja+.hoja{margin-top:18px;border-top:1px solid var(--linea);border-radius:var(--r)}
.hoja.suelta{border-top:1px solid var(--linea);border-radius:var(--r);margin-top:24px}
.hoja.suelta.sobresale{border-top:4px solid var(--rojo);box-shadow:0 10px 30px rgba(20,22,27,.18)}
.dato{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dotted var(--linea)}
.dato:last-child{border-bottom:none}
.dato dt{color:var(--gris);font-size:.85rem;flex:0 0 40%}
.dato dd{margin:0;text-align:right;font-weight:600;flex:1}
dl{margin:0}
.codigo-grande{font-size:1.3rem;letter-spacing:.08em;font-weight:700}

/* ---------- Componentes ---------- */
.btn{display:inline-block;border:1px solid transparent;border-radius:var(--r);padding:11px 18px;
  font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;font-family:inherit}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-osc)}
.btn-neutro{background:var(--papel);color:var(--tinta);border-color:var(--linea)}
.btn-neutro:hover{border-color:var(--gris)}
.btn-oscuro{background:var(--tinta);color:#fff}
.btn-bloque{display:block;width:100%}
.btn-mini{padding:6px 12px;font-size:.85rem}

label{display:block;font-size:.85rem;color:var(--gris);margin:0 0 5px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=file],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--r);
  font-size:1rem;font-family:inherit;background:var(--papel);color:var(--tinta)}
textarea{min-height:88px;resize:vertical}
.campo{margin-bottom:14px}
.fila{display:flex;gap:14px;flex-wrap:wrap}
.fila>.campo{flex:1 1 220px}
.check{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--tinta)}
.check input{width:auto}

.aviso{padding:12px 14px;border-radius:var(--r);margin-bottom:16px;font-size:.92rem;border:1px solid}
.aviso-ok{background:var(--verde-suave);border-color:#B7DFC8;color:#0B5B33}
.aviso-error{background:var(--rojo-suave);border-color:#F3C2CC;color:#8E1A20}
.aviso-info{background:var(--ambar-suave);border-color:#EBD5A8;color:#7A4E00}

.sello{display:inline-block;padding:3px 10px;border-radius:100px;font-size:.75rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.sello-ok{background:var(--verde-suave);color:#0B5B33}
.sello-error{background:var(--rojo-suave);color:#8E1A20}
.sello-aviso{background:var(--ambar-suave);color:#7A4E00}

/* ---------- Pantalla de acceso ---------- */
.escena{position:relative;min-height:100vh;min-height:100dvh;background:var(--tinta);display:flex;align-items:center;justify-content:center;padding:32px 16px;overflow:hidden}
.escena::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 30%, rgba(186,40,46,.18), transparent 60%)}
.acceso{position:relative;z-index:2;width:100%;max-width:400px}
.acceso .marca{height:46px;margin-bottom:6px}
.acceso-intro{text-align:center;margin-bottom:22px}
.acceso-intro p{color:#8A8F99;font-size:.82rem;letter-spacing:.06em;margin:0}

/* ---------- Panel administrativo ---------- */
.panel{display:flex;min-height:100vh}
.lateral{width:232px;flex:0 0 232px;background:var(--tinta);color:#C9CCD3;padding:18px 0;position:sticky;top:0;height:100vh;overflow:auto}
.lateral .logo{padding:0 18px 16px;border-bottom:1px solid #2A2D34;margin-bottom:12px}
.lateral .logo img{width:100%;max-width:170px;height:auto;display:block;margin-bottom:8px}
.lateral .logo span{font-size:.72rem;color:#7E838D;letter-spacing:.04em}
.lateral a{display:block;padding:9px 18px;color:#C9CCD3;text-decoration:none;font-size:.93rem;border-left:3px solid transparent}
.lateral a:hover{background:var(--tinta-2);color:#fff}
.lateral a.on{background:var(--tinta-2);color:#fff;border-left-color:var(--rojo)}
.lateral .grupo{padding:16px 18px 6px;font-size:.72rem;color:#6C7178;letter-spacing:.06em}
.contenido{flex:1;min-width:0;padding:24px 28px 64px}
.encabezado{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:18px;box-shadow:var(--sombra)}
.tarjeta+.tarjeta{margin-top:18px}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.metrica{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:14px 16px;border-top:3px solid var(--gris)}
.metrica b{display:block;font-size:1.9rem;line-height:1.1}
.metrica span{font-size:.82rem;color:var(--gris)}
.metrica.m-ok{border-top-color:var(--verde)}
.metrica.m-aviso{border-top-color:var(--ambar)}
.metrica.m-error{border-top-color:var(--rojo)}
.dos{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(max-width:900px){.dos{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.76rem;color:var(--gris);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--linea)}
td{padding:11px 10px;border-bottom:1px solid #EDEFF2;vertical-align:middle}
tr:last-child td{border-bottom:none}
.tabla-envoltura{overflow-x:auto}
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.paginacion{margin-top:16px;font-size:.9rem}
.barra-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.barra-filtros .campo{margin:0;min-width:150px}
.vacio{padding:36px 18px;text-align:center;color:var(--gris)}
.error-campo{color:var(--rojo-osc);font-size:.82rem;margin-top:4px}
.qr-caja{text-align:center;border:1px solid var(--linea);border-radius:var(--r);padding:16px;background:var(--papel)}
.qr-caja img{width:100%;max-width:240px;height:auto}

@media(max-width:760px){
  .panel{display:block}
  .lateral{width:auto;height:auto;position:static;display:flex;flex-wrap:wrap;gap:2px;padding:10px}
  .lateral .logo{width:100%;border-bottom:none;padding-bottom:8px;margin-bottom:4px}
  .lateral .logo img{max-width:140px}
  .lateral .grupo{display:none}
  .lateral a{border-left:none;border-bottom:3px solid transparent;padding:7px 11px;font-size:.86rem}
  .lateral a.on{border-left:none;border-bottom-color:var(--rojo)}
  .contenido{padding:16px 14px 48px}
  .dato{flex-direction:column;gap:2px}
  .dato dd{text-align:left}
  .cabecera.completa .cabecera-cuerpo{padding:38px 16px 60px}
  .titular{font-size:1.4rem}
  .cabecera.completa .marca{height:46px}
}

/* ---------- Ajustes finos para teléfono ---------- */
@media(max-width:520px){
  .escena{padding:22px 14px}
  .acceso .marca{height:38px}
  .acceso-intro{margin-bottom:18px}
  .acceso-intro p{font-size:.74rem}
  .tarjeta{padding:16px}
  .cabecera .cabecera-cuerpo{padding:20px 14px 22px}
  .cabecera.completa .cabecera-cuerpo{padding:32px 14px 56px}
  .cabecera .marca{height:34px}
  .cabecera.completa .marca{height:42px}
  .titular{font-size:1.28rem;margin-top:18px}
  .bajada{font-size:.92rem}
  .marco{padding:0 14px 40px}
  .veredicto{padding:22px 16px}
  .veredicto b{font-size:1.25rem}
  .hoja{padding:18px 16px}
  .codigo-grande{font-size:1.15rem}
  .btn{padding:12px 16px}
}