/* RAG Transportes — estilos de toda la aplicacion.
   Los colores de los graficos son la paleta validada (contraste y daltonismo)
   en claro y en oscuro; ver la nota en tablero.js. */

:root{
  color-scheme: light;
  --plano:#f6f6f3; --sup:#fcfcfb; --sup2:#f0efec;
  --tinta:#0b0b0b; --tinta2:#52514e; --tinta3:#898781;
  --linea:#e1e0d9; --eje:#c3c2b7; --borde:rgba(11,11,11,.11);
  --s1:#2a78d6; --s2:#eb6834;
  --bien:#0ca30c; --aviso:#fab219; --serio:#ec835a; --grave:#d03b3b;
  --verde-texto:#006300; --rojo-texto:#b42323;
  --marca:#1a3a6b; --marca-suave:#e7eef8;
  --foco:#2a78d6;
  --radio:10px;
  --sombra:0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --plano:#0d0d0d; --sup:#1a1a19; --sup2:#232322;
    --tinta:#f0efec; --tinta2:#c3c2b7; --tinta3:#898781;
    --linea:#2c2c2a; --eje:#383835; --borde:rgba(255,255,255,.10);
    --s1:#3987e5; --s2:#d95926;
    --verde-texto:#0ca30c; --rojo-texto:#ec6a6a;
    --marca:#8db4ee; --marca-suave:#1b2738;
    --sombra:none;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --plano:#0d0d0d; --sup:#1a1a19; --sup2:#232322;
  --tinta:#f0efec; --tinta2:#c3c2b7; --tinta3:#898781;
  --linea:#2c2c2a; --eje:#383835; --borde:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926;
  --verde-texto:#0ca30c; --rojo-texto:#ec6a6a;
  --marca:#8db4ee; --marca-suave:#1b2738;
  --sombra:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--plano); color:var(--tinta);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--s1); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--foco); outline-offset:2px; border-radius:4px}
code{font-size:.92em; background:var(--sup2); padding:1px 5px; border-radius:4px}
h1{font-size:24px; margin:0; letter-spacing:-.02em; line-height:1.2}
h2{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--tinta3);
  margin:0 0 12px; font-weight:600}
h3{font-size:15px; margin:0 0 4px; font-weight:600}
.sub{color:var(--tinta2); font-size:13px}
.nota{color:var(--tinta2); font-size:13px; margin:10px 0 0; max-width:72ch}
.muted{color:var(--tinta3)}
.pos{color:var(--verde-texto)} .neg{color:var(--rojo-texto)}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.oculto{display:none !important}

/* ------------------------------------------------------------ estructura */
.marco{display:grid; grid-template-columns:232px 1fr; min-height:100vh}
.lateral{background:var(--sup); border-right:1px solid var(--borde); padding:18px 12px;
  position:sticky; top:0; height:100vh; overflow-y:auto}
.marca{display:flex; align-items:center; gap:10px; padding:4px 8px 18px; color:var(--tinta)}
.marca:hover{text-decoration:none}
.marca b{font-size:15px; letter-spacing:-.01em; line-height:1.15}
.marca small{display:block; font-size:11px; color:var(--tinta3); font-weight:400}
.logo{width:34px; height:34px; border-radius:9px; background:var(--marca); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:none}
:root[data-theme="dark"] .logo{color:#0d0d0d}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo{color:#0d0d0d} }
.menu-grupo{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--tinta3); padding:14px 10px 5px; font-weight:600}
.lateral a.item{display:flex; align-items:center; gap:9px; padding:7px 10px;
  border-radius:8px; color:var(--tinta2); font-size:14px}
.lateral a.item:hover{background:var(--sup2); color:var(--tinta); text-decoration:none}
.lateral a.item.activo{background:var(--marca-suave); color:var(--marca); font-weight:600}
.lateral a.item svg{width:17px; height:17px; flex:none; opacity:.85}

.cuerpo{min-width:0; display:flex; flex-direction:column}
.barra-sup{display:flex; justify-content:flex-end; align-items:center; gap:10px;
  padding:10px 28px; border-bottom:1px solid var(--borde); background:var(--sup);
  position:sticky; top:0; z-index:20}
.barra-sup .quien{font-size:13px; color:var(--tinta2)}
.barra-sup .quien b{color:var(--tinta); font-weight:600}
.rol{font-size:11px; border:1px solid var(--borde); border-radius:999px; padding:1px 8px;
  color:var(--tinta3)}
.btn.abrir-menu{display:none}
.contenido{padding:26px 28px 70px; max-width:1240px; width:100%}

.cabeza-pag{display:flex; justify-content:space-between; align-items:flex-end; gap:14px;
  flex-wrap:wrap; margin-bottom:22px}
.cabeza-pag .acciones{display:flex; gap:8px; flex-wrap:wrap}
.miga{font-size:13px; color:var(--tinta3); margin-bottom:6px}
.miga a{color:var(--tinta3)}

section{margin:0 0 30px}
.panel{background:var(--sup); border:1px solid var(--borde); border-radius:var(--radio);
  padding:18px; box-shadow:var(--sombra)}
.panel + .panel{margin-top:14px}
.panel-cabeza{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  flex-wrap:wrap; margin-bottom:14px}
.rejilla{display:grid; gap:14px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ------------------------------------------------------------- tarjetas */
.tarjetas{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tarjeta{background:var(--sup); border:1px solid var(--borde); border-radius:var(--radio);
  padding:15px 17px; box-shadow:var(--sombra)}
.tarjeta .rotulo{font-size:12px; color:var(--tinta2); margin-bottom:6px}
.tarjeta .cifra{font-size:27px; font-weight:650; letter-spacing:-.025em; line-height:1.1}
.tarjeta .pie{font-size:12px; color:var(--tinta3); margin-top:6px}

/* -------------------------------------------------------------- botones */
.btn{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:14px;
  font-weight:500; padding:8px 15px; border-radius:8px; cursor:pointer;
  border:1px solid var(--borde); background:var(--sup); color:var(--tinta);
  text-decoration:none; line-height:1.3; white-space:nowrap}
.btn:hover{background:var(--sup2); text-decoration:none}
.btn.primario{background:var(--marca); border-color:transparent; color:#fff}
.btn.primario:hover{filter:brightness(1.1)}
:root[data-theme="dark"] .btn.primario{color:#0d0d0d}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.primario{color:#0d0d0d} }
.btn.peligro{color:var(--rojo-texto)}
.btn.peligro:hover{background:color-mix(in srgb, var(--grave) 10%, transparent)}
.btn.chico{font-size:13px; padding:5px 11px}
.btn.fantasma{border-color:transparent; background:none; color:var(--tinta2)}
.btn.fantasma:hover{background:var(--sup2); color:var(--tinta)}
form.en-linea{display:inline}

/* -------------------------------------------------------- formularios */
.form{display:grid; gap:16px 18px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.form .ancho{grid-column:1 / -1}
.campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.campo label{font-size:13px; font-weight:500; color:var(--tinta2)}
.campo label .req{color:var(--rojo-texto); margin-left:2px}
.campo .ayuda{font-size:12px; color:var(--tinta3)}
input, select, textarea{font:inherit; font-size:14.5px; color:var(--tinta);
  background:var(--sup); border:1px solid var(--eje); border-radius:8px;
  padding:8px 10px; width:100%; min-height:38px}
textarea{min-height:76px; resize:vertical}
input[type="checkbox"]{width:auto; min-height:0; accent-color:var(--s1)}
input:focus, select:focus, textarea:focus{outline:2px solid var(--foco);
  outline-offset:0; border-color:transparent}
.campo.con-error input, .campo.con-error select, .campo.con-error textarea{
  border-color:var(--grave); background:color-mix(in srgb, var(--grave) 5%, var(--sup))}
.campo .error{font-size:12.5px; color:var(--rojo-texto)}
.casilla{display:flex; align-items:center; gap:8px; font-size:14px}
.pie-form{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--linea)}
.pie-form .derecha{margin-left:auto}
.confirmacion{background:color-mix(in srgb, var(--aviso) 14%, var(--sup));
  border:1px solid color-mix(in srgb, var(--aviso) 50%, transparent);
  border-radius:8px; padding:10px 12px; font-size:13.5px}

/* --------------------------------------------------------------- filtros */
.filtros{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px}
.filtros .campo{min-width:140px; flex:0 1 180px}
.filtros .campo label{font-size:12px}
.filtros input, .filtros select{min-height:34px; padding:6px 9px; font-size:13.5px}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.chip{font-size:13px; padding:5px 12px; border-radius:999px; border:1px solid var(--borde);
  color:var(--tinta2); background:var(--sup)}
.chip:hover{text-decoration:none; background:var(--sup2)}
.chip.activo{background:var(--s1); color:#fff; border-color:transparent}

/* ---------------------------------------------------------------- tablas */
.tabla-envuelve{overflow-x:auto; margin:0 -18px; padding:0 18px}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th, td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--linea);
  vertical-align:top}
th{color:var(--tinta3); font-weight:600; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.05em; white-space:nowrap}
td.d, th.d{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr:hover{background:color-mix(in srgb, var(--sup2) 60%, transparent)}
tbody tr.clic{cursor:pointer}
tfoot td{font-weight:650; border-top:2px solid var(--eje); border-bottom:none}
tr.dup td{color:var(--tinta3); text-decoration:line-through}
.vacio{text-align:center; color:var(--tinta3); padding:34px 10px}

.paginas{display:flex; gap:8px; align-items:center; justify-content:flex-end;
  margin-top:14px; font-size:13px; color:var(--tinta2)}

/* --------------------------------------------------------------- planilla */
table.planilla td{padding:4px 5px; vertical-align:middle}
table.planilla input, table.planilla select{min-height:34px; padding:5px 8px; font-size:14px}
table.planilla td:nth-child(5), table.planilla td:nth-child(6){width:92px}
table.planilla td:nth-child(7){width:150px}
table.planilla tbody tr:hover{background:none}
table.planilla tr.con-error td{background:color-mix(in srgb, var(--grave) 7%, transparent)}
table.planilla [aria-invalid="true"]{border-color:var(--grave)}
table.planilla tr.detalle-error td{padding:0 5px 8px; border-bottom:1px solid var(--linea)}
table.planilla tr.con-error td{border-bottom:none}
table.planilla .error{font-size:12.5px; color:var(--rojo-texto)}

/* --------------------------------------------------------------- insignias */
.ins{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:2px 8px;
  border-radius:999px; background:var(--sup2); color:var(--tinta2); white-space:nowrap;
  font-weight:500}
.ins::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
  opacity:.9}
.ins.sin-punto::before{display:none}
.ins.bien{color:var(--verde-texto); background:color-mix(in srgb, var(--bien) 12%, transparent)}
.ins.aviso{color:#8a5d00; background:color-mix(in srgb, var(--aviso) 20%, transparent)}
.ins.serio{color:#a3461f; background:color-mix(in srgb, var(--serio) 18%, transparent)}
.ins.grave{color:var(--rojo-texto); background:color-mix(in srgb, var(--grave) 13%, transparent)}
:root[data-theme="dark"] .ins.aviso{color:var(--aviso)}
:root[data-theme="dark"] .ins.serio{color:var(--serio)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ins.aviso{color:var(--aviso)}
  :root:not([data-theme="light"]) .ins.serio{color:var(--serio)}
}

/* ---------------------------------------------------------------- mensajes */
.mensajes{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.mensaje{padding:10px 14px; border-radius:9px; font-size:14px; border:1px solid var(--borde);
  background:var(--sup); border-left:4px solid var(--bien)}
.mensaje.error{border-left-color:var(--grave)}
.mensaje.aviso{border-left-color:var(--aviso)}

.alerta{display:flex; gap:12px; padding:12px 14px; border-radius:10px; background:var(--sup);
  border:1px solid var(--borde); margin-bottom:8px; align-items:flex-start;
  color:var(--tinta)}
.alerta:hover{text-decoration:none; background:var(--sup2)}
.alerta .ico{font-size:14px; line-height:1.4; flex:none; width:18px; text-align:center}
.alerta .t{font-weight:600; font-size:14px}
.alerta .d{color:var(--tinta2); font-size:13px; margin-top:2px}
.alerta.critical{border-left:4px solid var(--grave)} .alerta.critical .ico{color:var(--grave)}
.alerta.serious{border-left:4px solid var(--serio)} .alerta.serious .ico{color:var(--serio)}
.alerta.warning{border-left:4px solid var(--aviso)} .alerta.warning .ico{color:var(--aviso)}
details.plegable{margin-top:6px}
details.plegable > summary{cursor:pointer; font-size:13px; color:var(--tinta2); padding:6px 0}

/* ------------------------------------------------------------- ficha */
.datos{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px 20px;
  margin:0}
.datos div{min-width:0}
.datos dt{font-size:12px; color:var(--tinta3); margin-bottom:2px}
.datos dd{margin:0; font-size:14.5px; overflow-wrap:anywhere}
.lista-docs{list-style:none; margin:0; padding:0}
.lista-docs li{display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--linea); font-size:14px}
.lista-docs li:last-child{border-bottom:none}
.lista-docs .tipo{font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--tinta3);
  min-width:118px}
.lista-docs .nom{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------------------------------------------------------- graficos */
.leyenda{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--tinta2)}
.leyenda span{display:inline-flex; align-items:center; gap:6px}
.punto{width:10px; height:10px; border-radius:3px; flex:none; display:inline-block}
svg.graf{display:block; width:100%; height:auto; overflow:visible}
.rejilla-l{stroke:var(--linea); stroke-width:1}
.base-l{stroke:var(--eje); stroke-width:1}
.tick{fill:var(--tinta3); font-size:11px; font-variant-numeric:tabular-nums}
.vlr{fill:var(--tinta2); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums}
.tip{position:fixed; pointer-events:none; z-index:60; opacity:0; transition:opacity .1s;
  background:var(--sup); color:var(--tinta); border:1px solid var(--borde); border-radius:9px;
  padding:9px 12px; font-size:12.5px; line-height:1.45;
  box-shadow:0 6px 22px rgba(0,0,0,.16); max-width:270px}
.tip b{font-size:13px}
.tip .fila{display:flex; justify-content:space-between; gap:16px;
  font-variant-numeric:tabular-nums}
.tip .fila span:last-child{font-weight:600}
.duo{display:grid; gap:14px; grid-template-columns:1fr 1fr}
.caja{background:var(--plano); border:1px solid var(--borde); border-radius:10px; padding:14px}
.caja .f{font-size:13px; color:var(--tinta2); margin-bottom:8px}
.caja .n{font-size:24px; font-weight:650; letter-spacing:-.02em}
.caja .m{font-size:12px; color:var(--tinta3); margin-top:3px}

/* -------------------------------------------------------------- entrar */
.entrar{min-height:100vh; display:grid; place-items:center; padding:20px 16px}
.entrar .panel{width:100%; max-width:380px; padding:28px}
.entrar .marca{padding:0 0 20px}

/* --------------------------------------------------------------- moviles */
@media (max-width:900px){
  .marco{grid-template-columns:1fr}
  .lateral{position:fixed; inset:0 auto 0 0; width:258px; z-index:50; transform:translateX(-100%);
    transition:transform .18s; box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.menu-abierto .lateral{transform:none}
  body.menu-abierto::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,.35);
    z-index:40}
  .btn.abrir-menu{display:inline-flex; margin-right:auto}
  .barra-sup{padding:8px 16px}
  .contenido{padding:18px 16px 60px}
  .r2, .r3, .duo{grid-template-columns:1fr}
  .tabla-envuelve{margin:0 -18px}
  /* Una tabla aplastada a 340 px parte cada placa en tres renglones:
     mejor que conserve su ancho y se deslice de lado. */
  .tabla-envuelve table{min-width:720px}
  .tabla-envuelve td:first-child, .tabla-envuelve td:nth-child(2),
  .tabla-envuelve td:first-child .sub{white-space:nowrap}
}
@media (max-width:520px){
  .barra-sup .quien span.nombre{display:none}
  .tarjeta .cifra{font-size:23px}
  .form{grid-template-columns:1fr}
}
@media print{
  .lateral, .barra-sup, .acciones, .filtros, .chips, .pie-form{display:none !important}
  .marco{display:block} body{background:#fff}
}