/* Segunda pasada de diseno (15 nov 2026). Se carga despues de app.css.
   La primera version era correcta y anonima: gris sobre gris, todo del mismo
   tamano. Aqui se le da jerarquia: una barra lateral con el color de la
   marca, una portada que dice el resultado en una frase, y renglones
   compactos donde antes habia tarjetas que empujaban todo hacia abajo. */
/* La marca de verdad (RAG-02.png del Drive) es rojo puro y negro. El negro
   lleva la estructura: barra lateral, portada, botones principales. El rojo
   queda solo como acento de marca, y nunca en un boton: en esta aplicacion
   el rojo ya significa 'vencido' o 'error', y un boton rojo de Guardar se
   leeria como peligro. */
:root{ --navy:#111214; --navy2:#2c2d33; --rojo:#ff0000; --radio:14px;
  --marca:#111214; --sobre-marca:#ffffff; --marca-suave:#ececea }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --marca:#f0efec; --sobre-marca:#111214; --marca-suave:#2a2a29;
    --navy:#000000; --navy2:#1c1c1f }
}
:root[data-theme="dark"]{ --marca:#f0efec; --sobre-marca:#111214; --marca-suave:#2a2a29;
  --navy:#000000; --navy2:#1c1c1f }
.chip.activo{background:var(--marca); color:var(--sobre-marca)}
.controles button[aria-pressed="true"]{background:var(--marca); color:var(--sobre-marca)}

h1{font-size:28px; font-weight:700; letter-spacing:-.025em}
.antetitulo{font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta3); margin-bottom:6px}
.contenido{max-width:1200px; padding-top:30px}
.panel.sin-relleno{padding:0; overflow:hidden}
th{background:color-mix(in srgb, var(--sup2) 55%, transparent)}

/* --- barra lateral: siempre del color de la marca, en claro y en oscuro --- */
.lateral{background:var(--navy); border-right:none; padding:20px 12px}
.lateral .marca{color:#fff; padding-bottom:22px}
.lateral .marca small{color:#9fb3d1}
.lateral .logo-img{width:34px; height:34px; flex:none; display:block}
.lateral .menu-grupo{color:#7f97bb}
.lateral a.item{color:#c9d6ea; padding:8px 11px}
.lateral a.item:hover{background:rgba(255,255,255,.08); color:#fff}
.lateral a.item.activo{background:rgba(255,255,255,.13); color:#fff;
  box-shadow:inset 3px 0 0 var(--rojo)}
.barra-sup{background:color-mix(in srgb, var(--plano) 86%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}

/* --- portada del tablero --- */
.portada{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%); color:#fff;
  border-radius:20px; padding:32px 34px; margin-bottom:14px; align-items:end}
.portada{position:relative; overflow:hidden}
.portada::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--rojo)}
:root[data-theme="dark"] .portada{border:1px solid var(--borde)}
.portada .antetitulo{color:rgba(255,255,255,.66)}
.portada .frase{font-size:22px; font-weight:500; letter-spacing:-.01em; line-height:1.25;
  color:rgba(255,255,255,.9)}
.portada .cifra-grande{display:block; font-size:clamp(38px, 6.2vw, 62px); font-weight:750;
  letter-spacing:-.035em; line-height:1.05; color:#fff; margin-top:2px;
  font-variant-numeric:tabular-nums}
.portada .explica{margin:14px 0 16px; font-size:15.5px; color:rgba(255,255,255,.82);
  max-width:46ch}
.portada .explica b{color:#fff; font-weight:600}
.pastilla{display:inline-block; font-size:12px; font-weight:500; padding:4px 11px;
  border-radius:999px; background:rgba(255,255,255,.14); color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.18)}
.barritas{display:flex; gap:6px; align-items:stretch; margin-top:8px}
.barrita{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center}
.barrita .arriba{height:84px; width:100%; display:flex; align-items:flex-end;
  border-bottom:1px solid rgba(255,255,255,.28)}
.barrita .abajo{height:40px; width:100%; display:flex; align-items:flex-start}
.barrita i{display:block; width:100%; border-radius:4px 4px 0 0; background:#8fe3ad}
.barrita.neg i{background:#ff9c9c; border-radius:0 0 4px 4px}
.barrita.ultima.pos i{background:#fff}
.barrita span{font-size:10.5px; color:rgba(255,255,255,.62); margin-top:4px}
.barrita.ultima span{color:#fff; font-weight:600}

.hechos{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
  margin-bottom:30px}
.hecho{background:var(--sup); border:1px solid var(--borde); border-radius:var(--radio);
  padding:16px 18px; box-shadow:var(--sombra)}
.hecho .rotulo{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tinta3); margin-bottom:8px}
.hecho .cifra{font-size:23px; font-weight:680; letter-spacing:-.02em; line-height:1.15}
.hecho .pie{font-size:12.5px; color:var(--tinta2); margin-top:5px}
.hecho.viejo{border-color:color-mix(in srgb, var(--aviso) 70%, transparent);
  background:color-mix(in srgb, var(--aviso) 9%, var(--sup))}

/* --- avisos en renglones --- */
.avisos{margin-bottom:34px}
.renglon{display:flex; align-items:center; gap:14px; padding:12px 18px; color:var(--tinta);
  border-bottom:1px solid var(--linea)}
.renglon:last-child{border-bottom:none}
.renglon:hover{background:var(--sup2); text-decoration:none}
.renglon .marca-aviso{flex:none; width:86px; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 0; text-align:center; border-radius:6px}
.renglon.critical .marca-aviso{background:var(--grave); color:#fff}
.renglon.serious .marca-aviso{background:color-mix(in srgb, var(--serio) 22%, transparent); color:#a3461f}
.renglon.warning .marca-aviso{background:color-mix(in srgb, var(--aviso) 26%, transparent); color:#8a5d00}
:root[data-theme="dark"] .renglon.serious .marca-aviso{color:var(--serio)}
:root[data-theme="dark"] .renglon.warning .marca-aviso{color:var(--aviso)}
.renglon .que{flex:1; min-width:0; display:flex; flex-direction:column}
.renglon .que b{font-size:14px; font-weight:600}
.renglon .que small{font-size:12.5px; color:var(--tinta2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.renglon .ir, .dia-fila .ir{color:var(--tinta3); font-size:20px; flex:none}
.avisos details > summary{cursor:pointer; padding:11px 18px; font-size:13px; color:var(--tinta2);
  border-bottom:1px solid var(--linea)}
.avisos details:not([open]) > summary{border-bottom:none}

/* --- pantalla de quien captura --- */
.acciones-grandes{display:grid; gap:12px; grid-template-columns:repeat(6, minmax(0, 1fr))}
.accion{display:flex; flex-direction:column; gap:3px; padding:20px; border-radius:16px;
  background:var(--sup); border:1px solid var(--borde); color:var(--tinta);
  box-shadow:var(--sombra); transition:transform .12s, box-shadow .12s}
.accion:hover{text-decoration:none; transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(0,0,0,.10)}
.accion svg{width:26px; height:26px; margin-bottom:12px; color:var(--s1)}
.accion b{font-size:16px; letter-spacing:-.01em}
.accion span{font-size:13px; color:var(--tinta2)}
.accion.principal{background:linear-gradient(135deg, var(--navy), var(--navy2)); color:#fff;
  border-color:transparent; grid-column:span 2}
.accion.principal svg{color:#fff}
.accion.principal span{color:rgba(255,255,255,.78)}
.dia-fila{display:flex; align-items:center; gap:18px; padding:13px 18px; color:var(--tinta);
  border-bottom:1px solid var(--linea)}
.dia-fila:last-child{border-bottom:none}
.dia-fila:hover{background:var(--sup2); text-decoration:none}
.dia-fila .cuando{width:128px; flex:none; display:flex; flex-direction:column}
.dia-fila .cuando small{font-size:12px; color:var(--tinta3)}
.dia-fila .dato{flex:1; min-width:0; font-size:14px; color:var(--tinta2)}
.dia-fila .dato b{color:var(--tinta); font-size:16px}
.dia-fila.falta{background:color-mix(in srgb, var(--aviso) 7%, transparent)}

@media (max-width:900px){
  .portada{grid-template-columns:1fr; padding:24px 20px; border-radius:16px; gap:20px}
  .portada .frase{font-size:19px}
  .barrita .arriba{height:60px}
  .barrita .abajo{height:26px}
  .accion.principal{grid-column:span 2}
  .acciones-grandes{grid-template-columns:1fr 1fr}
  .dia-fila{flex-wrap:wrap; gap:6px 14px}
  .dia-fila .cuando{width:100%; flex-direction:row; gap:8px; align-items:baseline}
  .dia-fila .dato{flex:none}
  .renglon .marca-aviso{width:74px}
  .renglon .que small{white-space:normal}
  h1{font-size:24px}
}
@media (prefers-reduced-motion: reduce){
  .accion{transition:none}
  .accion:hover{transform:none}
}

/* --- entrada --- */
.entrar .logo-caja{background:#fff; border-radius:12px; padding:18px 20px; margin-bottom:22px;
  display:flex; justify-content:center}
.entrar .logo-caja img{width:100%; max-width:250px; height:auto; display:block}
.entrar .panel{max-width:400px; padding:30px; border-top:5px solid var(--rojo)}
.entrar .btn.primario{justify-content:center; padding:11px 15px; font-size:15px}

/* --- en los formularios largos, Guardar siempre a la vista --- */
.pie-form.fijo{position:sticky; bottom:0; z-index:5; background:var(--sup);
  margin:22px -18px -18px; padding:14px 18px;
  border-radius:0 0 var(--radio) var(--radio); box-shadow:0 -6px 14px -10px rgba(0,0,0,.25)}
input[data-buscador]{background-image:none}
input[aria-invalid="true"]{border-color:var(--grave)}