/* CrediReady central — identidad del logo (2026-08-08): cabecera negra con
   el lima como acento y color de accion (siempre con tinta negra encima);
   los colores de decision/semaforo conservan su semantica. */
:root { --lima:#76D913; --lima-osc:#5FBE0A; --lima-tinte:#F1FBE4;
        --tinta:#0D120A; --borde:#D9E0D3;
        --verde:#1e7e34; --amarillo:#b8860b; --naranja:#d2691e; --rojo:#b22222;
        --gris:#555; --azul:#3E7A00; /* compat: acento sobre claro */ }
* { box-sizing:border-box; }
body { font-family:"Segoe UI",system-ui,sans-serif; margin:0;
       background:#F5F7F3; color:#1a1f17; }
header { background:var(--tinta); color:#fff; padding:12px 24px;
         display:flex; justify-content:space-between; align-items:center;
         flex-wrap:wrap; border-bottom:3px solid var(--lima); }
header h1 { margin:0; font-size:18px; font-weight:900; font-style:italic;
            display:flex; align-items:center; gap:8px; }
header h1 .cr-ready { color:var(--lima); }
.cr-logo { width:24px; height:24px; flex:none; }
nav { display:flex; gap:14px; align-items:center; }
nav a { color:#fff; text-decoration:none; font-size:14px; }
nav a:hover { color:var(--lima); }
nav form { margin:0; }
button.enlace { background:none; border:0; color:#cbd5c6; cursor:pointer; font-size:14px; }
main { max-width:1200px; margin:0 auto; padding:18px 24px; }
h2 { font-size:19px; color:var(--tinta); font-weight:800; font-style:italic; }
h3 { color:var(--tinta); }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--borde);
        border-radius:8px; overflow:hidden; font-size:13.5px; }
th { background:var(--lima-tinte); text-align:left; padding:8px 10px; font-size:12.5px; }
td { padding:8px 10px; border-top:1px solid #ECEFE8; vertical-align:top; }
tr.sla-roja td { background:#fdecea; }
tr.sla-amarilla td { background:#fff8e1; }
.dec-verde { color:var(--verde); font-weight:700; }
.dec-amarilla { color:var(--amarillo); font-weight:700; }
.dec-naranja { color:var(--naranja); font-weight:700; }
.dec-roja { color:var(--rojo); font-weight:700; }
.dec-gris { color:var(--gris); font-weight:700; }
.bandera { display:inline-block; background:#fdecea; color:var(--rojo); border:1px solid #f5c6cb;
           border-radius:6px; font-size:11.5px; padding:1px 6px; margin-top:3px; }
.tarjeta { background:#fff; border:1px solid var(--borde); border-radius:10px;
           padding:16px; margin-bottom:14px; }
.tarjeta.angosta { max-width:380px; margin:40px auto; }
.filtros { display:flex; gap:8px; margin-bottom:12px; }
.filtros input, .filtros select { padding:6px 8px; border:1px solid #c3ccbc; border-radius:6px; }
fieldset { border:1px solid var(--borde); border-radius:8px; background:#fff;
           margin:0 0 14px; padding:12px 14px; }
legend { font-weight:700; font-size:13.5px; color:var(--azul); padding:0 6px; }
label { display:block; font-size:12px; color:#444; margin:6px 0 2px; }
input, select, textarea { width:100%; max-width:420px; padding:6px 8px; border:1px solid #c3ccbc;
                          border-radius:6px; font-size:13.5px; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline:3px solid rgba(118,217,19,.45); outline-offset:1px; }
form.inline, form.inline input, form.inline select { display:inline; width:auto; }
button[type=submit] { background:var(--lima); color:var(--tinta); border:0;
                      border-radius:8px; padding:9px 18px; font-size:14px;
                      font-weight:800; cursor:pointer; margin-top:8px; }
button[type=submit]:hover { background:var(--lima-osc); }
button.peligro { background:var(--rojo); color:#fff; }
button[disabled] { background:#b9c4b0; color:#5c665a; cursor:not-allowed; }
.decision-grande { font-size:20px; font-weight:800; font-style:italic;
                   padding:10px 14px; border-radius:8px;
                   color:#fff; text-align:center; margin-bottom:10px; }
.fondo-verde { background:var(--verde); } .fondo-amarillo { background:var(--amarillo); }
.fondo-naranja { background:var(--naranja); } .fondo-rojo { background:var(--rojo); }
.fondo-gris { background:var(--gris); }
/* pares dato·dato en linea: sin min-width (rompia el flujo con huecos) */
.kv { font-size:13px; margin:6px 0; line-height:1.7; }
.kv b { color:#555; font-weight:700; margin-right:3px; }
ul { margin:6px 0; padding-left:18px; font-size:13px; }
.mensaje { border-radius:6px; padding:8px 12px; margin-bottom:10px; font-size:13px;
           background:var(--lima-tinte); border:1px solid #C9E9A4; }
.mensaje.error, .mensaje.errorlist { background:#fdecea; border:1px solid #f5c6cb; color:var(--rojo); }
.advertencia { background:#fff8e1; border:1px solid #eadf9e; border-radius:6px;
               padding:8px 12px; margin:8px 0; font-size:13px; color:#7a5c00; }
.diff { font-size:12.5px; } .diff .antes { color:var(--rojo); text-decoration:line-through; }
.diff .despues { color:var(--verde); font-weight:600; }
small { color:#6b7566; }
.tarjeta.angosta.login { margin-top:9vh; border-top:4px solid var(--lima);
                         box-shadow:0 8px 30px rgba(13,18,10,.10); }

/* --- checklist estructurado: chips tactiles y filas escaneables --- */
.checklist { min-width: 300px; max-width: 560px; }
.check-item { padding: 8px 0; border-bottom: 1px dotted rgba(0,0,0,.14); }
.check-pregunta { font-size: 13.5px; margin-bottom: 6px; }
.check-req { color: #b00; }
.check-opciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.radio-chip { display: inline-flex; }
.radio-chip input { position: absolute; opacity: 0; width: 1px; }
.radio-chip span { display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--borde);
  border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: #fff; transition: all .12s ease; }
.radio-chip input:checked + span { background: var(--tinta); color: var(--lima);
  border-color: var(--tinta); }
.radio-chip input:focus-visible + span { outline: 3px solid rgba(118,217,19,.5); }
.radio-chip input[value="NO"]:checked + span { background: var(--rojo);
  color: #fff; border-color: var(--rojo); }
.check-dato { font-size: 12.5px; color: var(--azul); font-weight: 600;
  margin: -2px 0 6px; }
.check-nota { flex: 1; min-width: 130px; font-size: 12.5px; }
.check-nota.corr { border-color: var(--lima-osc); }
.check-acciones { display: flex; gap: 8px; align-items: center; margin-top: 10px;
  flex-wrap: wrap; }
.check-acciones input { flex: 1; min-width: 160px; }
.check-pie { font-size: 11px; color: #777; margin-top: 6px; }

/* --- bandeja en telefono (el gestor usa /campo en la calle) --- */
@media (max-width: 640px) {
  header { padding: 10px 14px; }
  main { padding: 12px 12px 40px; }
  .kv b { min-width: 0; margin-right: 4px; }
  table { font-size: 12.5px; display: block; overflow-x: auto; }
  button[type=submit] { min-height: 44px; }
  .filtros { flex-wrap: wrap; }
}

/* --- critica de diseno 2026-08-09 --- */
/* radios y checks nunca deben estirarse al 100% (rompia la captura) */
input[type=radio], input[type=checkbox] { width:auto; }
/* el Salir del nav es un enlace, no un boton lima */
nav button.enlace[type=submit] { background:none; color:#cbd5c6; border:0;
  border-radius:0; padding:0; margin:0; font-weight:400; font-size:14px; }
nav button.enlace[type=submit]:hover { background:none; color:var(--lima); }
/* botones dentro de tablas: compactos y sin empujar la fila */
td button[type=submit] { margin-top:0; padding:7px 12px; font-size:12.5px; }
/* columnas numericas alineadas a la derecha con digitos tabulares */
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; }
/* KPI del tablero: numero grande + rotulo, rojo solo cuando duele */
.kpis { display:flex; gap:30px; flex-wrap:wrap; font-size:13px; margin:6px 0; }
.kpi b { display:block; font-size:24px; font-variant-numeric:tabular-nums;
  color:var(--tinta); line-height:1.2; }
.kpi small { color:#667061; }
.kpi.mal b { color:var(--rojo); }
/* chips de semaforo con su color real (antes todos parecian banderas rojas) */
.chip { display:inline-block; border-radius:999px; padding:1px 8px;
  font-size:11.5px; font-weight:700; border:1px solid var(--borde);
  background:#fff; color:var(--gris); margin:1px 2px 1px 0; }
.chip-VERDE { color:var(--verde); border-color:#bfe3c8; background:#effaf1; }
.chip-AMARILLO { color:var(--amarillo); border-color:#eadf9e; background:#fff8e1; }
.chip-NARANJA { color:var(--naranja); border-color:#f3cdb2; background:#fdf1e7; }
.chip-ROJO { color:var(--rojo); border-color:#f5c6cb; background:#fdecea; }
/* el vencimiento del SLA habla con el color de la fila */
tr.sla-roja .vence { color:var(--rojo); font-weight:700; }
tr.sla-amarilla .vence { color:var(--amarillo); font-weight:700; }
/* texto que explica una tabla o un numero */
.explica { font-size:12.5px; color:#667061; }