:root{
  --azul:#0E3A6B; --azul-medio:#1D5FA8; --celeste:#2B8FD9;
  --fondo:#EEF2F6; --borde:#D3DCE6; --texto:#1F2A37; --texto-suave:#5A6878;
  --blanco:#fff; --verde:#1E8E4E;
  --nueva-bg:#FFF1D6; --nueva:#8A4B00;
  --proceso-bg:#DCEBFA; --proceso:#174E8C;
  --cotizada-bg:#E3F4E8; --cotizada:#1D6B36;
  --cerrada-bg:#ECEEF1; --cerrada:#4D5866;
  --error-bg:#FDE4E2; --error:#A3241B;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:'Source Sans 3',system-ui,sans-serif;font-size:16px;line-height:1.45}
h1,h2,h3{margin:0;line-height:1.2;color:var(--azul)}
a{color:var(--azul-medio)}
:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}

/* Barra superior */
.barra{background:#0E3A6B;color:#fff}
.barra-in{max-width:1200px;margin:0 auto;padding:10px max(20px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.marca img{height:44px;width:auto}
.marca span{font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.14);padding:3px 10px;border-radius:999px}
.barra-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.barra-nav a{color:#fff;text-decoration:none;font-weight:600;padding:8px 2px}
.barra-nav a.nav-cot,.barra-nav a.nav-sin{padding:8px 12px;border-radius:6px}
.barra-nav a.nav-cot::before,.barra-nav a.nav-sin::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}
.barra-nav a.nav-cot::before{background:#5DB3F0}
.barra-nav a.nav-sin::before{background:#FF6B62}
.barra-nav a.nav-cot.activa{background:#fff;color:#0E3A6B;text-decoration:none}
.barra-nav a.nav-sin.activa{background:#fff;color:#B3261E;text-decoration:none}
.barra-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.burbuja{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#F5A623;color:#2A1A00;font-size:13px;font-weight:700;margin-left:4px}
.quien{color:#B9D0EA}
.salir{border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:6px 12px!important}

/* Contenedores */
.wrap{max-width:1200px;margin:0 auto;padding:28px max(20px,env(safe-area-inset-left,0px)) 56px;display:flex;flex-direction:column;gap:20px}
.wrap-login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;gap:16px}
.volver{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.card{min-width:0;background:var(--blanco);border-radius:10px;padding:22px;box-shadow:0 1px 3px rgba(14,58,107,.08)}
.fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.muted{color:var(--texto-suave)}

/* Login */
.login{width:100%;max-width:400px;background:#fff;border-radius:12px;box-shadow:0 10px 36px rgba(14,58,107,.12);overflow:hidden}
.login-top{background:#0E3A6B;padding:26px;display:flex;justify-content:center}
.login-top img{height:62px;width:auto}
.login-in{padding:26px 28px 30px;display:flex;flex-direction:column;gap:16px}

/* Formularios */
.form{display:flex;flex-direction:column;gap:14px}
.grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--texto-suave)}
input,select,textarea{font:inherit;font-size:16px;min-height:44px;border:1px solid var(--borde);border-radius:6px;padding:8px 12px;background:#fff;color:var(--texto);width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--celeste);outline-offset:0;border-color:var(--celeste)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:6px;background:var(--azul-medio);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--azul);color:#fff}
.btn-verde{background:var(--verde)}.btn-verde:hover{background:#16703D}
.btn-borde{background:#fff;color:var(--azul);border:1px solid var(--borde)}.btn-borde:hover{background:var(--fondo);color:var(--azul)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Resumen por estado */
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.res{background:#fff;border-radius:10px;padding:16px 18px;text-decoration:none;color:var(--texto);border:2px solid transparent;display:flex;flex-direction:column;gap:2px}
.res:hover{border-color:var(--borde)}
.res.activo{border-color:var(--azul-medio)}
.res b{font-size:30px;line-height:1.1;color:var(--azul);font-variant-numeric:tabular-nums}
.res span{font-size:14px;font-weight:600;color:var(--texto-suave)}

/* Filtros */
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.filtros label{flex:1 1 200px}

/* Tabla */
.tabla-box{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th{text-align:left;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave);padding:10px;border-bottom:1px solid var(--borde)}
td{padding:12px 10px;border-bottom:1px solid #E6ECF2;vertical-align:middle}
tr.es-nueva td{background:#FFFBF2}
tr:hover td{background:#F5F8FB}
td a.fila-link{color:var(--texto);text-decoration:none;font-weight:700}
td a.fila-link:hover{color:var(--azul-medio);text-decoration:underline}
.chico{font-size:14px;color:var(--texto-suave)}

/* Estados */
.estado{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
.st-nueva{background:var(--nueva-bg);color:var(--nueva)}
.st-proceso{background:var(--proceso-bg);color:var(--proceso)}
.st-cotizada{background:var(--cotizada-bg);color:var(--cotizada)}
.st-cerrada{background:var(--cerrada-bg);color:var(--cerrada)}
.st-tramite{background:#EDE7F6;color:#4A2D86}
.burbuja-roja{background:#E5484D;color:#fff}
.plazo{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
.plazo-ok{background:var(--cotizada-bg);color:var(--cotizada)}
.plazo-hoy{background:var(--nueva-bg);color:var(--nueva)}
.plazo-vencido{background:var(--error-bg);color:var(--error)}
tr.es-urgente td{background:#FFF4F3}
.checklist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.checklist li{display:flex;gap:8px;align-items:center;font-size:15px}
.checklist li::before{content:"";width:16px;height:16px;border:2px solid var(--borde);border-radius:4px;flex:none}

/* Detalle */
.detalle{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:16px}
.datos div{display:flex;flex-direction:column;gap:2px}
.datos dt{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave)}
.datos dd{margin:0;font-size:17px;word-break:break-word}
.datos .ancho{grid-column:1 / -1}
.botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.estados-elegir{display:flex;flex-wrap:wrap;gap:8px}
.estados-elegir label{flex-direction:row;align-items:center;gap:8px;border:1px solid var(--borde);border-radius:999px;padding:6px 14px;cursor:pointer;color:var(--texto);font-weight:600}
.estados-elegir input{width:auto;min-height:auto;margin:0}
.estados-elegir label:has(input:checked){border-color:var(--azul-medio);background:var(--proceso-bg)}

.vacio{text-align:center;padding:40px 20px;color:var(--texto-suave)}
.vacio svg{width:44px;height:44px;fill:none;stroke:var(--borde);stroke-width:1.5;margin-bottom:8px}

/* Avisos */
.alerta{padding:12px 16px;border-radius:8px;font-weight:600;width:100%}
.alerta-ok{background:var(--cotizada-bg);color:var(--cotizada)}
.alerta-error{background:var(--error-bg);color:var(--error)}
.alerta-info{background:var(--nueva-bg);color:var(--nueva)}

@media (max-width:820px){
  .detalle{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .res{padding:12px 14px}
  .res b{font-size:24px}
  .datos{grid-template-columns:1fr}
  .marca img{height:36px}
}

/* Banda de sección: deja claro en cuál de las dos pantallas estás */
.banda{border-bottom:1px solid transparent}
.banda-in{max-width:1200px;margin:0 auto;padding:12px max(20px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:14px}
.banda-in svg{width:30px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.banda-in div{display:flex;flex-direction:column;line-height:1.25}
.banda-in strong{font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.banda-in span{font-size:14px}
.banda-cot{background:#DCEBFA;color:#174E8C;border-bottom-color:#B9D4F0}
.banda-sin{background:#B3261E;color:#fff}

/* COTIZACIONES: estilo calmo, azul, tarjetas con borde arriba */
body.sec-cotizaciones .card{border-top:4px solid var(--celeste)}

/* SINIESTROS: estilo de alerta, rojo, fondo cálido, tarjetas con borde a la izquierda */
body.sec-siniestros{
  --azul:#7A1E1A; --azul-medio:#B3261E; --celeste:#E5484D;
  --fondo:#F8F0EE; --borde:#E4D2CF;
}
body.sec-siniestros .card{border-left:6px solid #B3261E;border-top:0}
body.sec-siniestros th{color:#8A3A34;border-bottom:2px solid #E4D2CF}
body.sec-siniestros .btn-verde{background:var(--verde)}
body.sec-siniestros .btn-verde:hover{background:#16703D}
body.sec-siniestros .estados-elegir label:has(input:checked){background:#FBE3E0}
body.sec-siniestros tr:hover td{background:#FBF4F2}
body.sec-siniestros .res{border-radius:4px}
body.sec-siniestros .res b{color:#B3261E}
body.sec-siniestros tr.es-nueva td{background:#FFF6F4}