/* Panel de Peaje: interfaz de producto, sobria. Piazzolla para títulos y cifras, mono para ids y montos,
   el rojo sólo como acento (402, alertas, pestaña activa). Todo en rem: ?proyector agranda la raíz. */
@font-face{font-family:"Piazzolla";src:url("fonts/Piazzolla-VF.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Piazzolla";src:url("fonts/Piazzolla-Italic-VF.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-VF.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --fondo:#faf8f4;--superficie:#ffffff;--tinta:#16171a;--tinta-2:#55565c;--tinta-3:#7a7b80;
  --linea:#e6e1d8;--linea-fuerte:#cfc8bb;--rojo:#c8230c;--rojo-fondo:#fbeae6;
  --serif:"Piazzolla",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ancho:72rem;
}
html.proyector{font-size:150%}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 0.9375rem/1.5 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
[hidden]{display:none!important}

/* barra superior y pestañas */
.barra{background:var(--superficie);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:5}
.barra-in{max-width:var(--ancho);margin:0 auto;padding:0.875rem 1.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:0.625rem;min-width:0}
.marca-logo{width:1.75rem;height:1.75rem;flex:none;color:var(--tinta)}
.marca-nombre{font:700 1.375rem/1 var(--serif);letter-spacing:-0.01em}
.marca-medio{color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-acciones{display:flex;align-items:center;gap:1rem}
.vivo{font-size:0.8125rem;color:var(--tinta-3);white-space:nowrap}
.vivo::before{content:"";display:inline-block;width:0.5rem;height:0.5rem;border-radius:50%;background:var(--tinta-3);margin-right:0.375rem;vertical-align:0.05rem}
.vivo.ok::before{background:var(--tinta)}
.vivo.caido{color:var(--rojo)}
.vivo.caido::before{background:var(--rojo)}
.enlace{background:none;border:0;padding:0;color:var(--tinta-2);text-decoration:underline;text-decoration-color:var(--linea-fuerte);text-underline-offset:0.2em;font-size:0.875rem}
.enlace:hover{color:var(--tinta);text-decoration-color:currentColor}
.boton{background:var(--tinta);color:#fff;border:1px solid var(--tinta);border-radius:0.375rem;padding:0.4375rem 0.875rem;font-weight:600;font-size:0.875rem}
.boton:hover{background:#000}
.boton:disabled,.boton[aria-busy="true"]{background:transparent;color:var(--tinta-3);border-color:var(--linea-fuerte);cursor:default}
.boton-sutil{background:transparent;color:var(--tinta-2);border-color:var(--linea-fuerte)}
.boton-sutil:hover{background:var(--fondo);color:var(--tinta)}

.pestanas{max-width:var(--ancho);margin:0 auto;padding:0 1.5rem;display:flex;gap:1.75rem;overflow-x:auto}
.pestanas button{background:none;border:0;border-bottom:2px solid transparent;padding:0.875rem 0 0.625rem;color:var(--tinta-2);font-weight:500;white-space:nowrap}
.pestanas button:hover{color:var(--tinta)}
.pestanas button[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--rojo)}
.nuevos{font:600 0.6875rem/1 var(--mono);color:#fff;background:var(--rojo);border-radius:0.625rem;padding:0.1875rem 0.375rem;margin-left:0.375rem;vertical-align:0.1rem}
.nuevos:empty{display:none}

/* contenido */
.contenido{max-width:var(--ancho);margin:0 auto;padding:1.75rem 1.5rem 4rem}
.panel{display:none}
.panel.on{display:block}
.panel:focus-visible{outline:none}
.aviso{margin-bottom:1.25rem;padding:0.625rem 0.875rem;border:1px solid var(--linea);border-radius:0.375rem;background:var(--superficie);color:var(--tinta-2);font-size:0.875rem}
.aviso.error{border-color:var(--rojo);color:var(--rojo);background:var(--rojo-fondo)}
.bloque-cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 0.75rem}
.bloque-cab h2{font:600 1.375rem/1.2 var(--serif)}
.meta{color:var(--tinta-2);font-size:0.875rem}
.meta b{color:var(--tinta);font-weight:600}
.meta .rota{color:var(--rojo)}
.ayuda{color:var(--tinta-3);font-size:0.8125rem;margin:-0.25rem 0 0.75rem}

/* cifras del resumen */
.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--linea);border-radius:0.5rem;background:var(--superficie);margin-bottom:2rem}
.cifra{padding:1rem 1.25rem}
.cifra+.cifra{border-left:1px solid var(--linea)}
.cifra-nombre{font-size:0.8125rem;color:var(--tinta-2)}
.cifra-valor{font:600 2rem/1.2 var(--serif);margin:0.25rem 0 0.125rem;font-variant-numeric:lining-nums tabular-nums}
.cifra-nota{font-size:0.8125rem;color:var(--tinta-3)}

/* estado vacío: cómo probarlo */
.inicio{border:1px dashed var(--linea-fuerte);border-radius:0.5rem;padding:1.5rem 1.75rem;margin-bottom:2rem;background:var(--superficie)}
.inicio h2{font:600 1.25rem/1.25 var(--serif);margin-bottom:0.375rem}
.inicio-pasos{margin:1rem 0 0;padding-left:1.25rem;display:grid;gap:0.625rem;color:var(--tinta-2)}
.inicio-pasos strong{color:var(--tinta);font-weight:600}
.inicio-pasos li::marker{font-family:var(--serif);font-weight:700;color:var(--rojo)}

/* recorrido de los agentes: embudo */
.embudo{margin-bottom:2rem}
.embudo-pasos{list-style:none;margin:0;padding:1.25rem 1.5rem;border:1px solid var(--linea);border-radius:0.5rem;background:var(--superficie);display:grid;gap:1rem}
.paso{display:grid;grid-template-columns:13rem minmax(0,1fr) 4rem 8.5rem;align-items:center;gap:1rem}
.paso-nombre{font-weight:500}
.paso-nombre .chip{margin-right:0.5rem}
.paso-barra{height:0.625rem;background:var(--fondo);border-radius:0.3125rem;overflow:hidden}
.paso-barra i{display:block;height:100%;background:var(--tinta);border-radius:0.3125rem;transition:width 0.6s cubic-bezier(.2,.7,.2,1)}
.paso.precio .paso-barra i{background:var(--rojo)}
.paso-cuenta{font:600 1.125rem/1 var(--serif);text-align:right;font-variant-numeric:tabular-nums}
.paso-tasa{font-size:0.8125rem;color:var(--tinta-3);white-space:nowrap}
@media (max-width:52rem){.paso{grid-template-columns:minmax(0,1fr) auto}.paso-barra{grid-column:1/-1;order:3}.paso-tasa{display:none}}
@media (prefers-reduced-motion:reduce){.paso-barra i{transition:none}}

/* subir una nota */
.nueva-nota{border:1px solid var(--linea);border-radius:0.5rem;background:var(--superficie);padding:1.25rem 1.5rem;margin-bottom:1.5rem;display:grid;gap:0.875rem}
.nueva-nota h3{font:600 1.125rem/1.2 var(--serif);margin:0}
.nueva-nota label{display:grid;gap:0.3125rem;font-size:0.8125rem;font-weight:500;color:var(--tinta-2)}
.nueva-nota input,.nueva-nota textarea,.nueva-nota select{font:inherit;font-size:0.9375rem;color:var(--tinta);padding:0.5rem 0.625rem;border:1px solid var(--linea-fuerte);border-radius:0.375rem;background:var(--superficie)}
.nueva-nota textarea{resize:vertical;line-height:1.5}
.nueva-nota-fila{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.875rem}
.nueva-nota-acciones{display:flex;gap:0.5rem}
.nueva-nota .ayuda{margin:0}
.aviso a{color:var(--tinta)}
@media (max-width:52rem){.nueva-nota-fila{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* tablas */
.tabla-marco{border:1px solid var(--linea);border-radius:0.5rem;background:var(--superficie);overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:0.875rem}
.tabla th{text-align:left;font-weight:500;color:var(--tinta-3);font-size:0.75rem;padding:0.625rem 0.875rem;border-bottom:1px solid var(--linea);white-space:nowrap;background:var(--superficie)}
.tabla td{padding:0.6875rem 0.875rem;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla td.num{font-family:var(--mono);font-size:0.8125rem}
.tabla .vacio td{color:var(--tinta-3);text-align:center;padding:2rem}
.fuerte{font-weight:600}
.sub{display:block;color:var(--tinta-3);font-size:0.8125rem}
.sub.mono{white-space:nowrap}
#t4 .tabla th,#t4 .tabla td{padding-left:0.625rem;padding-right:0.625rem}
.mono{font-family:var(--mono);font-size:0.8125rem}
.tenue{color:var(--tinta-3)}
.corta{display:block;max-width:18rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowrap{white-space:nowrap}
.mostrar{margin-top:0.75rem}
.sub .etiqueta{margin-top:0.25rem}
#t5 .corta{max-width:14rem}

/* chips de código y etiquetas de estado */
.chip{display:inline-block;font:600 0.75rem/1 var(--mono);padding:0.25rem 0.375rem;border:1px solid var(--tinta);border-radius:0.25rem;margin-right:0.5rem;vertical-align:0.05rem;white-space:nowrap}
.chip.c402{color:var(--rojo);border-color:var(--rojo)}
.chip.c201{border-style:double;border-width:3px;padding:0.125rem 0.25rem}
.chip.c200{background:var(--tinta);color:#fff}
.chip.c403{color:var(--tinta-2);border-style:dashed}
.etiqueta{display:inline-block;font-size:0.75rem;font-weight:600;padding:0.125rem 0.5rem;border-radius:1rem;background:var(--fondo);border:1px solid var(--linea-fuerte);color:var(--tinta-2);white-space:nowrap}
.etiqueta.alerta{color:var(--rojo);border-color:var(--rojo);background:var(--rojo-fondo)}
.etiqueta.fuerte{color:var(--tinta);border-color:var(--tinta)}

/* fila nueva o que cambió */
.nuevo td{background:var(--rojo-fondo);transition:background-color 4s ease-out}
.nuevo.visto td{background:transparent}
@media (prefers-reduced-motion:reduce){.nuevo td{transition:none}}

/* login */
.acceso{max-width:26rem;margin:3rem auto;display:flex;flex-direction:column;gap:0.5rem}
.acceso h1{font:600 1.5rem/1.2 var(--serif);margin-bottom:0.75rem}
.acceso label{font-weight:500}
.acceso-fila{display:flex;gap:0.5rem}
.acceso input{flex:1;min-width:0;font:inherit;padding:0.5rem 0.75rem;border:1px solid var(--linea-fuerte);border-radius:0.375rem;background:var(--superficie)}
.error{color:var(--rojo);font-size:0.875rem;min-height:1.25rem}

@media (max-width:52rem){
  .cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifra:nth-child(3){border-left:0}
  .cifra:nth-child(n+3){border-top:1px solid var(--linea)}
  .vivo{display:none}
}