:root {
  --fondo: #f7f2ee;
  --superficie: #ffffff;
  --tinta: #261a1f;
  --tinta-suave: #5b4850;
  --linea: #d9cbc3;
  --acento: #7a1f3d;
  --acento-tinta: #ffffff;
  --error: #a3162a;
  --ok: #1f6b45;
  --radio: 10px;
  --paso: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #160f10;
    --superficie: #221819;
    --tinta: #f5ece8;
    --tinta-suave: #c3b0aa;
    --linea: #44332f;
    --acento: #e08aa6;
    --acento-tinta: #261014;
    --error: #ff8a96;
    --ok: #7fd1a1;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: var(--paso);
  line-height: 1.5;
}
#app { min-height: 100vh; min-height: 100dvh; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 .6rem; font-weight: 700; }
p { margin: 0 0 1rem; color: var(--tinta-suave); }
.marca { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); font-weight: 700; margin-bottom: .75rem; }

/* ---- Pantallas de acceso ---- */
.acceso { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.lado {
  position: relative; overflow: hidden; color: #fbeff3; isolation: isolate;
  background: radial-gradient(circle at 30% 25%, #8a2549 0%, #5b1530 55%, #2e0a18 100%);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(1.5rem, 5vh, 3rem);
  min-height: 11rem;
}
.lado .pie { margin-top: auto; }
.lado .sello { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; letter-spacing: .04em; }
.lado .sello svg { width: 2.75rem; height: 2.75rem; flex: none; }
.lado .lema { font-size: clamp(1.4rem, 1rem + 2.2vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin: 0; max-width: 18ch; color: #fff; }
.lado > * { position: relative; z-index: 1; }
.lado > .fondo-anim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
.fondo-anim .giro-a, .fondo-anim .giro-b { transform-box: view-box; transform-origin: 400px 400px; }
.fondo-anim .giro-a { animation: giro 160s linear infinite; }
.fondo-anim .giro-b { animation: giro 110s linear infinite reverse; }
@keyframes giro { to { transform: rotate(360deg); } }
.lado .pie { margin: auto 0 0; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #e9c3cf; }
.zona-form { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 3rem) 16px; }
.tarjeta { width: 100%; max-width: 24rem; }
.tarjeta form { margin-top: 1.5rem; }
label { display: block; font-weight: 600; margin: 1.1rem 0 .35rem; font-size: .95rem; }
.campo { position: relative; }
input {
  width: 100%; min-height: 50px; padding: .6rem .85rem; font: inherit; color: inherit;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 8px;
}
.campo input { padding-right: 5.5rem; }
.ver {
  position: absolute; right: 4px; top: 4px; bottom: 4px; min-height: 0; margin: 0; padding: 0 .8rem;
  background: transparent; color: var(--acento); border: 0; font-size: .85rem; font-weight: 700;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
button {
  min-height: 50px; padding: .6rem 1.25rem; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--acento); color: var(--acento-tinta); border: 0; border-radius: 8px;
}
form > button[type="submit"] { width: 100%; margin-top: 1.5rem; }
button.secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--linea); }
button[disabled] { opacity: .6; cursor: progress; }
.msg { margin: .9rem 0 0; font-weight: 600; font-size: .95rem; }
.msg:empty { display: none; }
.msg.error { color: var(--error); }
.msg.ok { color: var(--ok); }
.aviso { margin-top: 2rem; font-size: .8rem; color: var(--tinta-suave); }

@media (min-width: 860px) {
  .acceso { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .lado { min-height: 100vh; min-height: 100dvh; }
}

/* ---- Panel interno ---- */
.interno { max-width: 64rem; margin: 0 auto; padding: 1.5rem 16px 3rem; min-height: 0; }
.barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.barra p { margin: 0; }
.modulos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); padding: 0; margin: 0; list-style: none; }
.modulos li { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; }
.modulos strong { display: block; }
.modulos span { color: var(--tinta-suave); font-size: .9rem; }
.pendiente { color: var(--tinta-suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .5rem; }
/* ---- Navegacion y modulos ---- */
.interno { max-width: 72rem; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; margin: -1rem 0 1.5rem; }
.nav a { padding: .55rem .9rem; border-radius: 999px; border: 1.5px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .95rem; min-height: 44px; display: inline-flex; align-items: center; }
.nav a[aria-current] { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); }
#vista:focus { outline: none; }
.enlace-tarjeta { display: block; color: inherit; text-decoration: none; }
.modulos li:has(.enlace-tarjeta):hover { border-color: var(--acento); }
.listo { color: var(--acento); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .5rem; font-weight: 700; }
.cab-modulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cab-modulo h1 { margin-bottom: 1rem; }
.cab-modulo button { margin-top: 0; }
.filtros { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
.filtros input[type="search"] { grid-column: 1 / -1; }
.filtros button { min-height: 50px; margin: 0; }
@media (min-width: 720px) {
  .filtros { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; }
  .filtros input[type="search"] { grid-column: auto; }
}
.cab-modulo h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); margin-bottom: .75rem; }
.cab-modulo button { min-height: 46px; }
.barra .secundario { min-height: 44px; padding: .4rem 1rem; }
select {
  width: 100%; min-height: 50px; padding: .6rem .85rem; font: inherit; color: inherit;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 8px;
}
select:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.estado-lista { min-height: 1.5rem; margin: 0 0 1rem; }

.vestidos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .vestidos { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } }
.tarjeta-vestido {
  display: block; width: 100%; text-align: left; padding: 0; margin: 0; min-height: 0; font-weight: 400;
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
}
.tarjeta-vestido:hover { border-color: var(--acento); }
.foto { aspect-ratio: 3 / 4; background: var(--fondo); display: grid; place-items: center; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.vacia { color: var(--tinta-suave); gap: .25rem; align-content: center; font-size: .85rem; }
.foto .sin-foto { width: 3.5rem; height: 4.5rem; }
.datos { padding: .7rem .75rem .9rem; display: grid; gap: .3rem; overflow-wrap: anywhere; }
.datos strong { line-height: 1.25; }
.meta { color: var(--tinta-suave); font-size: .875rem; }
.precio { font-weight: 700; }

.insignia { justify-self: start; font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; border: 1.5px solid currentColor; letter-spacing: .02em; }
.est-disponible { color: var(--ok); }
.est-reservado, .est-proximo_a_entrega, .est-alquilado, .est-pendiente_devolucion { color: var(--acento); }
.est-en_revision, .est-en_lavado, .est-en_reparacion { color: #9a5b00; }
.est-fuera_de_servicio { color: var(--error); }
@media (prefers-color-scheme: dark) { .est-en_revision, .est-en_lavado, .est-en_reparacion { color: #f0b45a; } }

/* ---- Ficha (dialogo) ---- */
dialog.ficha {
  width: min(56rem, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 1.25rem;
  background: var(--fondo); color: var(--tinta); border: 1px solid var(--linea); border-radius: 14px;
}
dialog.ficha::backdrop { background: rgb(20 8 12 / .6); }
.ficha-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ficha-grid:not(.una) { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.ficha-foto .foto { border-radius: var(--radio); border: 1px solid var(--linea); max-width: 22rem; }
.ficha-foto .boton { margin-top: .75rem; }
.ficha-cuerpo h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); line-height: 1.15; margin: 0 0 .5rem; }
.ficha-cuerpo h2:focus { outline: none; }
.ficha-pie { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.fila-estado { margin-bottom: 1rem; }
fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: .5rem 1rem 1rem; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 700; padding: 0 .4rem; }
.f { margin-bottom: .25rem; }
.ayuda { display: block; color: var(--tinta-suave); font-size: .8rem; margin-top: .25rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .6rem 1.25rem; font-weight: 700; border-radius: 8px; cursor: pointer; background: var(--acento); color: var(--acento-tinta); }
.boton.secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--linea); }
.oculto-visual { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.oculto-visual:focus-visible + .boton { outline: 3px solid var(--acento); outline-offset: 2px; }
.detalle { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.detalle dt { font-weight: 700; }
.detalle dd { margin: 0; color: var(--tinta-suave); }
dialog.ficha button { margin-top: 1rem; }
dialog.ficha .ficha-pie button { margin-top: 0; }
[hidden] { display: none !important; }

/* ---- Tablero de inicio ---- */
:root {
  --c-disp: #1f6b45; --c-res: #7a1f3d; --c-mant: #b26a00; --c-fuera: #a3162a;
  --suave: #efe6e0;
}
@media (prefers-color-scheme: dark) {
  :root { --c-disp: #7fd1a1; --c-res: #e08aa6; --c-mant: #f0b45a; --c-fuera: #ff8a96; --suave: #2b1f20; }
}
.saludo { margin-bottom: 1.5rem; }
.saludo h1 { margin: 0; }
.fecha { margin: 0 0 .25rem; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); font-weight: 700; }
.bloque { margin: 0 0 2rem; }
.bloque-t { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linea); }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 2rem; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); overflow: hidden; }
.kpi { padding: 1.1rem 1.25rem; display: grid; gap: .15rem; align-content: start; border-bottom: 1px solid var(--linea); }
.kpi:nth-child(odd) { border-right: 1px solid var(--linea); }
.kpi:nth-last-child(-n+2) { border-bottom: 0; }
.kpi-num { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi-et { font-weight: 700; margin-top: .35rem; }
.kpi-nota { color: var(--tinta-suave); font-size: .85rem; }
.kpi.ok .kpi-num { color: var(--c-disp); }
.kpi.atencion .kpi-num { color: var(--c-mant); }
@media (min-width: 860px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi { border-bottom: 0; border-right: 1px solid var(--linea); }
  .kpi:last-child { border-right: 0; }
  .kpi:nth-child(odd) { border-right: 1px solid var(--linea); }
}

.barra-estados { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--suave); }
.seg { display: block; min-width: 6px; }
.seg-disponibles { background: var(--c-disp); }
.seg-en-reserva { background: var(--c-res); }
.seg-mantenimiento { background: var(--c-mant); }
.seg-fuera { background: var(--c-fuera); }
.leyenda { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.leyenda li { display: flex; align-items: center; gap: .6rem; }
.leyenda-t { flex: 1; color: var(--tinta-suave); }
.punto { width: 12px; height: 12px; border-radius: 3px; flex: none; }

.dos-col { display: grid; gap: 0 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .dos-col { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.mant { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.mant li { display: flex; gap: .85rem; align-items: center; }
.mini { width: 44px; height: 58px; border-radius: 6px; overflow: hidden; background: var(--suave); flex: none; border: 1px solid var(--linea); }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-vacia { display: block; width: 100%; height: 100%; }
.mant-d { display: grid; min-width: 0; }
.mant-d strong { overflow-wrap: anywhere; }
.nota-atencion { margin: 1rem 0 0; }
.nota-atencion a { color: var(--acento); font-weight: 700; }
.vacio { margin: 0; color: var(--tinta-suave); }

.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fila-barra { display: grid; grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.fb-et { overflow-wrap: anywhere; }
.pista { height: 10px; border-radius: 999px; background: var(--suave); overflow: hidden; display: block; }
.relleno { display: block; height: 100%; width: calc(var(--p, 0) * 1%); min-width: 4px; background: var(--acento); border-radius: 999px; }
.fb-n { color: var(--tinta-suave); font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }

.cifras { margin: 0 0 .75rem; display: grid; gap: .9rem; }
.cifras dt { color: var(--tinta-suave); font-size: .9rem; }
.cifras dd { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.actividad { list-style: none; margin: 0; padding: 0; display: grid; }
.actividad li { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.actividad li:last-child { border-bottom: 0; }
.act-t { overflow-wrap: anywhere; }

.pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pendientes li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem 1rem; border: 1.5px dashed var(--linea); border-radius: 10px; color: var(--tinta-suave); }
.chip-mod { font-size: .78rem; font-weight: 700; color: var(--acento); letter-spacing: .02em; }

.bienvenida { border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); padding: clamp(1.25rem, 4vw, 2.25rem); margin-bottom: 2rem; max-width: 40rem; }
.bienvenida h2 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.bienvenida .boton { text-decoration: none; margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Modulos de gestion ---- */
textarea { width: 100%; min-height: 5.5rem; padding: .6rem .85rem; font: inherit; color: inherit; background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 8px; resize: vertical; }
textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }
.cab-modulo .acciones { margin: 0 0 .75rem; }
.acciones button, .acciones .boton { margin: 0; min-height: 46px; }
button.chico { min-height: 44px; padding: .35rem .85rem; font-size: .9rem; margin: 0; }
button.enlace { min-height: 44px; padding: .25rem 0; background: transparent; color: var(--acento); border: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.filtros-1 { grid-template-columns: minmax(0, 1fr) !important; max-width: 18rem; }
.filtros-2 { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 720px) { .filtros-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; } }
.rango { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 1rem; }
.rango .f { flex: 1 1 10rem; }
.rango button { margin: 0 0 .25rem; min-height: 50px; }
.f { margin-bottom: .25rem; }
.casilla { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .25rem; }
.casilla input { width: 1.4rem; height: 1.4rem; min-height: 0; flex: none; accent-color: var(--acento); }
.casilla label { margin: 0; font-weight: 600; }
dialog.ficha .dlg-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
dialog.ficha .dlg-cab h2 { margin: 0; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); line-height: 1.15; }
dialog.ficha .dlg-cab h2:focus { outline: none; }
dialog.ficha .dlg-cab button { margin: 0; min-height: 44px; flex: none; }
dialog.ficha .acciones button { margin-top: 0; }
dialog.ficha form > button[type="submit"] { margin-top: 1.25rem; }
.dlg-cuerpo > .bloque:last-child { margin-bottom: 0; }

.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th { text-align: left; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); padding: .75rem .9rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: .7rem .9rem; border-bottom: 1px solid var(--linea); vertical-align: middle; overflow-wrap: anywhere; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 719px) {
  .tabla-caja { border: 0; background: transparent; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: .4rem .9rem; margin-bottom: 10px; }
  .tabla td { display: grid; grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr); gap: .75rem; border: 0; padding: .35rem 0; text-align: left !important; }
  .tabla td::before { content: attr(data-et); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); padding-top: .2rem; }
  .tabla td .acciones { margin: 0; }
}
.lista-simple { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; }
.lista-simple li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple li > div { display: grid; min-width: 0; }
.lista-simple .f { margin: 0; min-width: 11rem; }
.lista-simple label { display: none; }
.tmp-caliente { color: var(--error); }
.tmp-tibio { color: #9a5b00; }
.tmp-frio { color: var(--tinta-suave); }
@media (prefers-color-scheme: dark) { .tmp-tibio { color: #f0b45a; } }

.caja-aviso { border: 1.5px solid #9a5b00; border-radius: 10px; padding: .75rem 1rem; margin: 1rem 0; background: var(--superficie); }
.caja-aviso.error { border-color: var(--error); }
.caja-aviso ul { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--tinta-suave); }
.clave-temporal { display: block; font-size: 1.4rem; letter-spacing: .08em; padding: 1rem; margin: 0 0 1rem; background: var(--suave); border-radius: 10px; user-select: all; overflow-wrap: anywhere; }

.kpis-4 .kpi-num { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); overflow-wrap: anywhere; }
.cifras-fila { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.cifras-fila dd { font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem); }
.dia { margin: 0 0 1.25rem; }
.dia h3 { font-size: 1rem; margin: 0 0 .25rem; text-transform: capitalize; }
.dia.hoy h3 { color: var(--acento); }
.est-tarea { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.est-tarea select { min-height: 44px; }
.nav { margin-top: 0; }
.rango > button[type="submit"] { width: auto; margin-top: 0; }
.nota-atencion { margin: 1rem 0; }
@media (max-width: 719px) {
  .nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; scrollbar-width: thin; }
  .nav a { white-space: nowrap; flex: none; }
}
/* ---- Tablero rediseñado ---- */
:root { --sombra: 0 1px 0 rgb(0 0 0 / .03), 0 8px 24px -12px rgb(60 20 35 / .18); --acento-suave: color-mix(in srgb, var(--acento) 10%, var(--superficie)); }
@media (prefers-color-scheme: dark) { :root { --sombra: none; } }
.portada { display: grid; gap: 1.25rem; margin: 0 0 1.75rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 20px; background: linear-gradient(135deg, #7a1f3d 0%, #4d1226 100%); color: #fff; }
.portada .fecha { color: #f3c6d3; margin: 0 0 .35rem; }
.portada h1 { margin: 0; color: #fff; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); }
.portada-a { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); border-radius: 14px; padding: 1rem 1.15rem; }
.portada-a h2 { margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #f3c6d3; }
.portada-a p { color: #fbeff3; margin: 0; }
.portada-a ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.portada-a a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .95rem; border-radius: 999px; background: #fff; color: #5b1530; font-weight: 700; font-size: .92rem; text-decoration: none; }
.portada-a a:hover { background: #f3c6d3; }
.portada-a a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 900px) { .portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } }

.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; padding: 1.15rem 1.25rem 1.3rem; box-shadow: var(--sombra); min-width: 0; margin: 0 0 1.25rem; }
.panel > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.panel > header h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; }
.panel > header a { color: var(--acento); font-weight: 700; font-size: .9rem; }
.dos-paneles { display: grid; gap: 0 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .dos-paneles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dinero { display: grid; gap: 1.25rem; margin: 0 0 1.25rem; grid-template-columns: minmax(0, 1fr); }
.dinero .panel { margin: 0; }
.gran { margin: 0; font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.principal .meta { margin: .25rem 0 .5rem; }
.dinero-lado { display: grid; gap: 1rem; align-content: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .dinero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
@media (min-width: 560px) and (max-width: 959px) { .dinero-lado { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cifra { position: relative; display: grid; gap: .15rem; align-content: start; padding: 1rem 1.1rem 1rem 1.1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; color: inherit; text-decoration: none; box-shadow: var(--sombra); min-width: 0; }
a.cifra:hover { border-color: var(--acento); }
.cifra-ic { width: 2.25rem; height: 2.25rem; border-radius: 10px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); margin-bottom: .45rem; }
.ico { width: 1.25rem; height: 1.25rem; }
.cifra-v { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifra-e { font-weight: 700; font-size: .95rem; }
.cifra-n { color: var(--tinta-suave); font-size: .85rem; }
.cifra.atencion .cifra-ic { background: color-mix(in srgb, var(--c-mant) 16%, var(--superficie)); color: var(--c-mant); }
.cifra.atencion .cifra-v { color: var(--c-mant); }
.cifras-fila-d { display: grid; gap: 1rem; margin: 0 0 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cifras-fila-d { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.graf-caja { position: relative; margin-top: .5rem; }
.graf { width: 100%; height: auto; display: block; overflow: visible; }
.guia { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 2 4; }
.eje { stroke: var(--linea); stroke-width: 1.5; }
.guia-t, .eje-t { fill: var(--tinta-suave); font-size: 12px; }
.eje-t.actual { fill: var(--tinta); font-weight: 700; }
.valor-t { fill: var(--tinta); font-size: 12px; font-weight: 700; }
.barra-m { fill: color-mix(in srgb, var(--acento) 38%, var(--superficie)); }
.barra-m.actual { fill: var(--acento); }
.zona { fill: transparent; cursor: default; }
.zona:hover ~ .x, .zona:focus-visible { fill: color-mix(in srgb, var(--acento) 8%, transparent); outline: none; }
.tip { position: absolute; top: 0; transform: translateX(-50%); display: grid; gap: .1rem; padding: .5rem .75rem; background: var(--tinta); color: var(--fondo); border-radius: 10px; font-size: .82rem; pointer-events: none; white-space: nowrap; z-index: 2; }
.tip strong { font-size: .85rem; }

.dona-caja { display: grid; gap: 1.25rem; align-items: center; justify-items: center; }
@media (min-width: 560px) { .dona-caja { grid-template-columns: 11rem minmax(0, 1fr); justify-items: stretch; } }
.dona { width: 11rem; max-width: 100%; height: auto; }
.dona circle { fill: none; stroke-width: 16; }
.dona-fondo { stroke: var(--suave); }
.dona-n { font-size: 30px; font-weight: 700; fill: var(--tinta); }
.dona-e { font-size: 12px; fill: var(--tinta-suave); }
.dona-seg.seg-c-disp { stroke: var(--c-disp); } .dona-seg.seg-c-res { stroke: var(--c-res); } .dona-seg.seg-c-mant { stroke: var(--c-mant); } .dona-seg.seg-c-fuera { stroke: var(--c-fuera); }
.punto.seg-c-disp { background: var(--c-disp); } .punto.seg-c-res { background: var(--c-res); } .punto.seg-c-mant { background: var(--c-mant); } .punto.seg-c-fuera { background: var(--c-fuera); }
.leyenda-d { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; width: 100%; }
.leyenda-d li { display: flex; align-items: center; gap: .6rem; }

.lista-res { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fila-res { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 0; margin: 0; padding: .55rem .65rem; text-align: left; font-weight: 400; background: var(--fondo); color: var(--tinta); border: 1px solid transparent; border-radius: 12px; }
button.fila-res:hover { border-color: var(--acento); }
.fr-t { display: grid; min-width: 0; }
.fr-t strong { overflow-wrap: anywhere; }
.chip-dia { flex: none; width: 3.1rem; display: grid; justify-items: center; padding: .3rem 0; border-radius: 10px; background: var(--acento-suave); color: var(--acento); line-height: 1.05; }
.chip-dia b { font-size: 1.3rem; } .chip-dia i { font-style: normal; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.chip-dia.vencida { background: color-mix(in srgb, var(--error) 14%, var(--superficie)); color: var(--error); }
.panel .mant, .panel .barras, .panel .actividad { margin: 0; }
.panel .cifras-fila { margin-top: 1.25rem; }
.pasos { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .9rem; }
.pasos li { padding: .8rem 1rem; background: var(--fondo); border-radius: 12px; color: var(--tinta-suave); }
.pasos strong { color: var(--tinta); }

/* ---- Marco con menu lateral y zona de accesos ---- */
.interno { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: 17rem minmax(0, 1fr); align-items: start; min-height: 100vh; min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1rem; background: linear-gradient(180deg, #4d1226 0%, #2e0b17 100%); color: #fbeff3; }
.lateral-marca { display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: #fff; padding: 0 .35rem; }
.lateral-marca svg { width: 36px; height: 36px; flex: none; }
.lateral .nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; overflow: visible; padding: 0; flex: 1; }
.lateral .nav-grupo { margin: 1rem .6rem .3rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #e9b4c5; font-weight: 700; }
.lateral .nav a { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .5rem .7rem; border: 0; border-radius: 10px; color: #fbeff3; font-weight: 600; font-size: .95rem; text-decoration: none; white-space: normal; flex: none; }
.lateral .nav a:hover { background: rgb(255 255 255 / .1); }
.lateral .nav a[aria-current] { background: #fff; color: #5b1530; }
.lateral .nav a:focus-visible, .lateral .secundario:focus-visible, .btn-menu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ico { width: 20px; height: 20px; flex: none; }
.lateral-usuario { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: center; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .18); }
.lateral-usuario div { min-width: 0; }
.lateral-usuario strong, .lateral-usuario span { display: block; overflow-wrap: anywhere; }
.lateral-usuario div span { font-size: .82rem; color: #e9b4c5; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid !important; place-items: center; background: #f3c6d3; color: #4d1226; font-weight: 700; }
.lateral-usuario .secundario { grid-column: 1 / -1; width: 100%; background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / .45); min-height: 44px; }
.lateral-usuario .secundario:hover { background: rgb(255 255 255 / .12); }
#vista { padding: clamp(1rem, 2.5vw, 2rem) clamp(16px, 3vw, 2.5rem) 3rem; max-width: 76rem; width: 100%; min-width: 0; }
.barra-movil, .velo { display: none; }

.accesos { margin: 0 0 1.75rem; }
.titulo-zona { font-size: 1.05rem; margin: 0 0 .8rem; letter-spacing: -0.01em; }
.accesos-cols { display: grid; gap: 1.1rem; }
.accesos-grupo h3 { margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.accesos-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
a.acceso { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; height: 100%; gap: .75rem; min-height: 64px; padding: .7rem .9rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; color: var(--tinta); text-decoration: none; box-shadow: var(--sombra); }
a.acceso:hover { border-color: var(--acento); transform: translateY(-1px); }
a.acceso:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.acceso-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); }
.acceso-ic .ico { width: 22px; height: 22px; }
.acceso-t strong, .acceso-t span { display: block; }
.acceso-t span { font-size: .82rem; color: var(--tinta-suave); line-height: 1.3; }
.acceso-av { grid-column: 2; justify-self: start; font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--acento-suave); color: var(--acento); white-space: nowrap; margin-top: -.3rem; }
a.acceso.urgente .acceso-av { background: var(--acento); color: var(--acento-tinta); }
@media (prefers-reduced-motion: no-preference) { a.acceso { transition: border-color .15s, transform .15s; } .lateral { transition: transform .22s ease; } }

@media (max-width: 899px) {
  .interno { display: block; }
  .barra-movil { display: flex; align-items: center; gap: .9rem; position: sticky; top: 0; z-index: 20; padding: .5rem 16px; background: #4d1226; color: #fff; }
  .barra-movil .marca { color: #fff; font-weight: 700; }
  .btn-menu { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .3rem .9rem; border-radius: 10px; border: 1.5px solid rgb(255 255 255 / .5); background: transparent; color: #fff; font-weight: 600; width: auto; margin: 0; }
  .rayas, .rayas::before, .rayas::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
  .rayas::before, .rayas::after { content: ""; position: absolute; left: 0; }
  .rayas::before { top: -6px; } .rayas::after { top: 6px; }
  .lateral { position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: min(18rem, 86vw); height: auto; transform: translateX(-105%); visibility: hidden; }
  .lateral.abierto { transform: none; visibility: visible; }
  .velo { position: fixed; inset: 0; z-index: 30; background: rgb(20 5 10 / .55); }
  body.menu-abierto .velo { display: block; }
  body.menu-abierto { overflow: hidden; }
}


/* ---- Movimiento (se apaga con "reducir movimiento") ---- */
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes crece { from { transform: scaleY(0); opacity: .2; } }
@keyframes dibuja { from { stroke-dasharray: 0 400; } }
@keyframes aparece { from { opacity: 0; } }
@keyframes deriva { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 6%) scale(1.12); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.portada { position: relative; overflow: hidden; isolation: isolate; }
.portada::before, .portada::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.portada::before { width: 26rem; height: 26rem; right: -8rem; top: -12rem; background: radial-gradient(circle, rgb(243 198 211 / .28), transparent 65%); }
.portada::after { width: 20rem; height: 20rem; left: -6rem; bottom: -12rem; background: radial-gradient(circle, rgb(230 177 122 / .22), transparent 65%); }
.barra-m { transform-box: fill-box; transform-origin: 50% 100%; }
a.acceso.urgente .acceso-av::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: currentColor; vertical-align: middle; }
.cifra, .panel { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.cifra:hover, .panel:hover { transform: translateY(-2px); }
a.cifra:hover { border-color: var(--acento); }
a.acceso:hover .acceso-ic { background: var(--acento); color: var(--acento-tinta); }
.acceso-ic { transition: background-color .2s ease, color .2s ease; }
.lateral .nav a { transition: background-color .15s ease, padding-left .15s ease; }
.lateral .nav a:hover { padding-left: .95rem; }
@media (prefers-reduced-motion: no-preference) {
  #vista > * { animation: entra .55s cubic-bezier(.2, .8, .2, 1) backwards; }
  #vista > :nth-child(2) { animation-delay: .06s; } #vista > :nth-child(3) { animation-delay: .12s; }
  #vista > :nth-child(4) { animation-delay: .18s; } #vista > :nth-child(5) { animation-delay: .24s; }
  #vista > :nth-child(6) { animation-delay: .3s; } #vista > :nth-child(n+7) { animation-delay: .36s; }
  .portada::before { animation: deriva 14s ease-in-out infinite; }
  .portada::after { animation: deriva 18s ease-in-out -6s infinite reverse; }
  .barra-m { animation: crece .8s cubic-bezier(.2, .8, .2, 1) backwards; }
  .dona-seg { animation: dibuja 1s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
  .dona-n, .valor-t { animation: aparece .6s ease .7s backwards; }
  .portada-a li { animation: entra .5s cubic-bezier(.2, .8, .2, 1) backwards; }
  .portada-a li:nth-child(2) { animation-delay: .1s; } .portada-a li:nth-child(3) { animation-delay: .2s; } .portada-a li:nth-child(n+4) { animation-delay: .3s; }
  a.acceso.urgente .acceso-av { animation: pulso 2.2s ease-out infinite; }
  .accesos-grupo li { animation: entra .5s cubic-bezier(.2, .8, .2, 1) backwards; }
  .accesos-grupo li:nth-child(2) { animation-delay: .07s; } .accesos-grupo li:nth-child(3) { animation-delay: .14s; } .accesos-grupo li:nth-child(n+4) { animation-delay: .21s; }
}
@media (prefers-reduced-motion: reduce) { .cifra, .panel, a.acceso { transition: none; } a.cifra:hover, .panel:hover, a.acceso:hover { transform: none; } }

/* ---- Tablero v4: contexto en las cifras, semana, cartera y accesos compactos ---- */
.accesos-cols { gap: .9rem 1.5rem; }
.accesos-grupo ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 8px; }
a.acceso { min-height: 52px; padding: .45rem .7rem; gap: .6rem; border-radius: 12px; box-shadow: none; grid-template-columns: auto minmax(0, 1fr) auto; }
.acceso-ic { width: 34px; height: 34px; border-radius: 10px; }
.acceso-ic .ico { width: 18px; height: 18px; }
.acceso-av { grid-column: 3; margin-top: 0; justify-self: end; font-size: .75rem; padding: .15rem .5rem; }
@media (min-width: 900px) { .accesos-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.principal { display: flex; flex-direction: column; }
.delta { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.delta.sube { color: var(--ok); } .delta.baja { color: var(--error); }
.delta-f { font-size: .7rem; }
.cartera { margin: .4rem 0 .6rem; }
.cartera-b { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--linea); }
.cartera-c { background: var(--acento); border-radius: 999px 0 0 999px; }
.cartera-p { background: color-mix(in srgb, var(--acento) 30%, var(--superficie)); border-radius: 0 999px 999px 0; }
.cartera-t { margin: .35rem 0 0; font-size: .85rem; }
.cartera-t strong { color: var(--tinta); }

.graf-caja { margin-top: .2rem; }
.leyenda-g { list-style: none; display: flex; gap: 1.1rem; margin: .6rem 0 0; padding: 0; font-size: .85rem; color: var(--tinta-suave); }
.leyenda-g li { display: flex; align-items: center; gap: .4rem; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-ing { background: var(--acento); } .sw-eg { background: var(--c-mant); border-radius: 50%; }
.linea-eg { stroke: var(--c-mant); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.punto-eg { fill: var(--superficie); stroke: var(--c-mant); stroke-width: 2; }
.spark { width: 100%; height: 28px; margin-top: .4rem; overflow: visible; }
.spark-l { stroke: var(--c-mant); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-p { fill: var(--c-mant); }

.semana-t { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia { display: grid; justify-items: center; gap: .1rem; padding: .5rem .2rem .55rem; border-radius: 12px; background: var(--fondo); text-align: center; min-width: 0; }
.dia-n { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.dia b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.dia-m { display: grid; gap: 2px; min-height: 2.6rem; align-content: start; }
.dia-m i { font-style: normal; font-size: .75rem; font-weight: 700; padding: 0 .4rem; border-radius: 999px; white-space: nowrap; }
.m-ent { background: var(--acento); color: var(--acento-tinta); }
.m-dev { background: color-mix(in srgb, var(--c-mant) 18%, var(--superficie)); color: var(--tinta); }
.m-nada { color: var(--tinta-suave); }
.dia.hoy { background: var(--acento-suave); box-shadow: inset 0 0 0 2px var(--acento); }
.dia.hoy .dia-n { color: var(--acento); font-weight: 700; }
@media (max-width: 560px) { .semana-t { gap: 3px; } .dia-m i { padding: 0 .2rem; } }

.vacio.con-ico { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-radius: 12px; background: var(--fondo); color: var(--tinta-suave); }
.vacio.con-ico .ico { width: 28px; height: 28px; flex: none; color: var(--acento); }
.semana + .dos-paneles, .semana { margin-top: 0; }
.graf-envoltura { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
@media (min-width: 900px) {
  .accesos-cols { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .accesos-grupo { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .75rem; }
  .accesos-grupo h3 { margin: 0; }
}
.graf-envoltura { justify-content: flex-start; }
.accesos-grupo ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
@media (min-width: 560px) {
  .dinero-lado .cifra { grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-items: center; padding: .8rem 1rem; }
  .dinero-lado .cifra-ic { grid-row: 1 / span 3; margin: 0; }
  .dinero-lado .cifra > :nth-child(n+2) { grid-column: 2; }
  .dinero-lado .spark { grid-column: 1 / -1 !important; }
}
@media (min-width: 560px) and (max-width: 959px) { .dinero-lado .cifra { grid-template-columns: minmax(0, 1fr); } .dinero-lado .cifra-ic { grid-row: auto; margin-bottom: .45rem; } .dinero-lado .cifra > :nth-child(n+2) { grid-column: auto; } }
@media (max-width: 560px) { .guia-t, .eje-t { font-size: 19px; } .valor-t { font-size: 20px; } }
.accesos-grupo ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

/* ---- Caja: graficas de pastel interactivas ---- */
:root { --pc-0: #b8325f; --pc-1: #2f6fb8; --pc-2: #c96a00; --pc-3: #008a99; --pc-4: #2c8a55; --pc-5: #8a6d1d; }
@media (prefers-color-scheme: dark) { :root { --pc-0: #e0709a; --pc-1: #6aa6ea; --pc-2: #f0a040; --pc-3: #4cc3cb; --pc-4: #58c487; --pc-5: #d6bb4a; } }
.pasteles { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin: 0 0 1.25rem; }
@media (min-width: 1100px) { .pasteles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pasteles .panel { margin: 0; }
.pastel-caja { display: grid; gap: 1rem; justify-items: center; }
.pastel-svg { width: 11.5rem; max-width: 100%; height: auto; }
.pastel-svg circle { fill: none; stroke-width: 18; }
.pastel-fondo { stroke: var(--suave); }
.pastel-seg { cursor: pointer; transition: opacity .2s ease, stroke-width .2s ease; outline: none; }
.pastel-seg.activa { stroke-width: 22; }
.pastel-seg.apagada { opacity: .35; }
.pastel-seg:focus-visible { stroke-width: 22; }
.pastel-nom { font-size: 12px; fill: var(--tinta-suave); }
.pastel-val { font-size: 19px; font-weight: 700; fill: var(--tinta); }
.pastel-pct { font-size: 12px; fill: var(--tinta-suave); }
.pc-0 { stroke: var(--pc-0); } .pc-1 { stroke: var(--pc-1); } .pc-2 { stroke: var(--pc-2); } .pc-3 { stroke: var(--pc-3); } .pc-4 { stroke: var(--pc-4); } .pc-5 { stroke: var(--pc-5); }
.pastel-pt.pc-0 { background: var(--pc-0); } .pastel-pt.pc-1 { background: var(--pc-1); } .pastel-pt.pc-2 { background: var(--pc-2); } .pastel-pt.pc-3 { background: var(--pc-3); } .pastel-pt.pc-4 { background: var(--pc-4); } .pastel-pt.pc-5 { background: var(--pc-5); }
.pastel-ley { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 2px; }
.pastel-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; width: 100%; min-height: 44px; margin: 0; padding: .3rem .6rem; text-align: left; font-weight: 400; background: transparent; color: var(--tinta); border: 1px solid transparent; border-radius: 10px; }
.pastel-fila:hover, .pastel-fila.activa { background: var(--acento-suave); border-color: transparent; }
.pastel-fila:focus-visible { outline: 3px solid var(--acento); outline-offset: 1px; }
.pastel-pt { width: 12px; height: 12px; border-radius: 3px; stroke: none; }
.pastel-n { overflow-wrap: anywhere; font-size: .92rem; }
.pastel-fila strong { font-variant-numeric: tabular-nums; font-size: .92rem; }
.pastel-p { min-width: 3rem; text-align: right; color: var(--tinta-suave); font-size: .85rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .pastel-seg { animation: dibuja 1s cubic-bezier(.2, .8, .2, 1) .1s backwards; } }
@media (prefers-reduced-motion: reduce) { .pastel-seg { transition: none; } }
.pastel-fila { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pt n v" "pt p v"; column-gap: .7rem; row-gap: 0; padding: .45rem .6rem; }
.pastel-fila .pastel-pt { grid-area: pt; align-self: start; margin-top: .35rem; }
.pastel-fila .pastel-n { grid-area: n; }
.pastel-fila strong { grid-area: v; align-self: center; }
.pastel-fila .pastel-p { grid-area: p; text-align: left; min-width: 0; }
.kpis-4 .kpi-num { font-size: clamp(1.2rem, .8rem + 1.2vw, 1.9rem); white-space: nowrap; overflow-wrap: normal; }