/* Panel Redbinaria. Un acento azul petróleo; neutros con un leve tinte del acento. Claro y oscuro. */
:root {
	--fondo: #f5f7f8;
	--panel: #ffffff;
	--texto: #1b2428;
	--suave: #5d6b72;
	--linea: #dde4e7;
	--acento: #0f6e7a;
	--acento-suave: #e3f1f2;
	--sube: #16794a;
	--baja: #b3261e;
	--aviso: #fff4d6;
	--caliente: #c2410c;
	--templada: #a16207;
	--fria: #2563a8;
	--radio: 10px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fondo: #0f1517; --panel: #172024; --texto: #e6eef0; --suave: #9db0b6; --linea: #2a373c;
		--acento: #4fb3bf; --acento-suave: #1b3338; --sube: #4ade80; --baja: #f87171; --aviso: #3a3216;
		--caliente: #fb923c; --templada: #facc15; --fria: #60a5fa; color-scheme: dark;
	}
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); }
.marco { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

.cabecera { background: var(--panel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5; }
.cab { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.marca { font-weight: 700; text-decoration: none; color: var(--texto); letter-spacing: -.01em; }
.marca span { color: var(--acento); font-weight: 500; margin-left: 6px; }
.cliente, .cliente-sel { font-weight: 600; }
.cliente-sel { font: inherit; padding: 4px 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); color: var(--texto); }
.salir { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--suave); }
.salir button { font: inherit; background: none; border: 1px solid var(--linea); border-radius: 8px; padding: 4px 10px; color: var(--texto); cursor: pointer; }
.quien { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secciones { display: flex; gap: 4px; overflow-x: auto; }
.pestana { padding: 10px 12px; text-decoration: none; color: var(--suave); border-bottom: 2px solid transparent; white-space: nowrap; }
.pestana.activa { color: var(--texto); border-color: var(--acento); font-weight: 600; }
.pestana.prox { opacity: .5; cursor: default; }
.pestana.prox::after { content: " · pronto"; font-size: 12px; }

main { padding-block: 20px 40px; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.filtros label { display: flex; flex-direction: column; font-size: 12px; color: var(--suave); gap: 4px; }
.filtros select { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); color: var(--texto); min-width: 170px; }
.rango { color: var(--suave); font-size: 13px; margin: 8px 0 0; }
.titulo { font-size: 26px; margin: 18px 0 14px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 12px; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.t-etq { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.t-valor { font-size: 32px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-extra, .t-nota { font-size: 13px; color: var(--suave); }
.cambio { font-weight: 600; font-variant-numeric: tabular-nums; }
.cambio.sube { color: var(--sube); } .cambio.baja { color: var(--baja); } .cambio.neutro { color: var(--suave); font-weight: 400; }
.frente { color: var(--suave); }

.bloque { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; margin-top: 12px; min-width: 0; }
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 12px; }
.cab-bloque { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.boton { font-size: 13px; padding: 6px 12px; border: 1px solid var(--acento); border-radius: 8px; text-decoration: none; }

.grafico svg { width: 100%; height: auto; display: block; }
.grafico .rejilla { stroke: var(--linea); stroke-width: 1; }
.grafico .eje { fill: var(--suave); font-size: 14px; }
.grafico .barra { fill: var(--acento); }
.grafico .barra:hover { opacity: .75; }

.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ranking li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 3.2em 3.2em; gap: 10px; align-items: center; font-size: 14px; }
.r-etq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-barra { background: var(--acento-suave); border-radius: 4px; height: 10px; overflow: hidden; }
.r-barra span { display: block; height: 100%; background: var(--acento); border-radius: 4px; }
.r-n, .r-pct { text-align: right; font-variant-numeric: tabular-nums; }
.r-pct { color: var(--suave); font-size: 13px; }

.desliza { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla th { color: var(--suave); font-weight: 600; font-size: 12px; }
.prio { font-weight: 600; font-size: 12px; padding: 2px 8px; border-radius: 99px; border: 1px solid currentColor; }
.p-caliente { color: var(--caliente); } .p-templada { color: var(--templada); } .p-fria { color: var(--fria); }

.vacio { color: var(--suave); font-size: 14px; margin: 4px 0; }
.nota { color: var(--suave); font-size: 13px; margin: 10px 0 0; }
.aviso { background: var(--aviso); border-radius: var(--radio); padding: 10px 14px; margin-top: 12px; font-size: 14px; }
.pie { color: var(--suave); font-size: 12px; padding-block: 0 24px; }

.entrar { max-width: 380px; margin: 8vh auto; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; }
.entrar h1 { font-size: 22px; margin: 0 0 18px; }
.entrar form { display: flex; flex-direction: column; gap: 14px; }
.entrar label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
.entrar input { font: inherit; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); color: var(--texto); }
.entrar button { font: inherit; font-weight: 600; padding: 11px; border: 0; border-radius: 8px; background: var(--acento); color: #fff; cursor: pointer; }
.error { color: var(--baja); margin: 0; font-size: 14px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.tip { position: fixed; z-index: 20; background: var(--texto); color: var(--panel); font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.tip[hidden] { display: none; }

@media (max-width: 560px) {
	.titulo { font-size: 22px; }
	.t-valor { font-size: 26px; }
	.filtros select { min-width: 0; }
	.quien { display: none; }
	.ranking li { grid-template-columns: minmax(0, 1.6fr) minmax(40px, .8fr) 2.8em 2.8em; }
	.grafico { overflow-x: auto; }
	.grafico svg { min-width: 520px; }
}

.grafico .barra-comp { fill: var(--suave); opacity: .4; }
.grafico .barra-comp:hover { opacity: .6; }
.leyenda { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 13px; color: var(--suave); margin: 0 0 8px; }
.leyenda span { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.leyenda span + span, .leyenda .l-comp { margin-left: 10px; }
.l-actual { background: var(--acento); } .l-comp { background: var(--suave); opacity: .4; }
.anios { display: flex; gap: 6px; flex-wrap: wrap; }
.anios a { padding: 6px 12px; border: 1px solid var(--linea); border-radius: 99px; text-decoration: none; color: var(--texto); background: var(--panel); font-variant-numeric: tabular-nums; }
.anios a.activa { border-color: var(--acento); color: var(--acento); font-weight: 600; }
.tabla td.n, .tabla th.n { text-align: right; }