/* Plataforma Naiprotec — estilos base (DRAPPS-662).
   Sin framework: la plataforma tiene que poder desplegarse sin build ni CDN,
   y una hoja de estilos propia es mas facil de mantener que sobreescribir uno.

   Identidad NAIPROTEC (docs/identidad/NAIPROTEC_STYLE_MEMORY_FINAL.md, 21/08/2026):
   rosa + negro + blanco, geometria recta, lineas en vez de sombras, cifras
   grandes y tipografia contundente. Los nombres de clase son los de siempre:
   el JS de las pantallas pinta el mismo HTML y no se ha tocado. */

/* Nohemi es la corporativa y solo tenemos Regular y Medium. El @font-face
   declara el rango de pesos completo a proposito: asi el navegador usa el
   corte real en un titular de peso 700 en vez de fabricar una negrita falsa,
   que en una geometrica se ve deformada. */
@font-face {
  font-family: "Nohemi";
  src: url("/static/Nohemi-Regular.ttf") format("truetype");
  font-weight: 100 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("/static/Nohemi-Medium.ttf") format("truetype");
  font-weight: 451 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* El tema NO sigue al sistema: lo elige la usuaria con el interruptor de la
     cabecera y se guarda en localStorage (tema.js). El claro es el defecto
     porque es la identidad de la marca. color-scheme hace que los controles
     nativos -desplegables, campos de fecha, barra de scroll- acompanen. */
  color-scheme: light;

  /* Sobre el logo, que es negro: en claro se deja tal cual, en oscuro se
     invierte a blanco. Ver .marca. */
  --filtro-logo: none;

  --rosa:       #F3A9DD;
  --rosa-flojo: #FDF0F9;

  --tinta:      #000000;
  --tinta-flojo:#626262;
  --papel:      #FFFFFF;
  --fondo:      #FFFFFF;
  --linea:      #D5D5D5;
  --linea-dura: #1A1A1A;

  --alerta:     #B3261E;
  --ok:         #1B7F4B;

  --radio:      0px;

  --display: "Nohemi", "Archivo", Arial, sans-serif;
  --cuerpo:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Inter no esta instalada en todas las maquinas de la oficina y no hay CDN:
     la pila de reserva es la del sistema, que en Windows cae en Segoe UI. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.6 var(--cuerpo);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinta); }
a:hover { color: var(--tinta); }

/* --- Cabecera y navegacion ------------------------------------------------ */

/* La franja negra de arriba la escribe app.js; el header queda debajo,
   firme y con una linea negra que lo separa del contenido. */
.utilidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 36px;
  padding: 0 40px;
  background: #000000;
  color: #FFFFFF;
  font-family: var(--cuerpo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.utilidad .dato { color: var(--rosa); }

.barra {
  background: var(--papel);
  border-bottom: 1px solid var(--tinta);
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 56px;
  min-height: 88px;
  flex-wrap: wrap;
}

/* La marca es el logo corporativo: un PNG negro puro sobre transparente.
   Como es negro puro, el tema oscuro lo INVIERTE a blanco por CSS en vez de
   mantener un segundo fichero, que habria que acordarse de actualizar dos
   veces el dia que el logo cambie. El filtro va por variable para que el
   discurso del login pueda imponer el suyo: su fondo es negro fijo en los dos
   temas, asi que alli el logo va siempre en blanco. */
.marca {
  display: inline-flex;
  align-items: center;
  height: 34px;
  text-decoration: none;
}
.marca img {
  height: 100%;
  width: auto;
  display: block;
}
/* El filtro va en el LOGOTIPO y no en el contenedor porque desde la columna
   reducida cuelga tambien el isotipo (icono-192), que es rosa y negro: si
   heredara la inversion del tema oscuro saldria verde. */
.marca .marca-logo { filter: var(--filtro-logo); }
/* El isotipo solo sale en la columna reducida; ver el bloque de mas abajo. */
.marca .marca-icono { display: none; }

.menu { display: flex; gap: 32px; flex: 1; align-self: stretch; }
.menu .grupo { display: flex; align-items: stretch; }
.menu .fila { display: flex; align-items: stretch; gap: 2px; }

.menu .fila > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--tinta-flojo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.menu .fila > a:hover { color: var(--tinta); }
/* El activo se marca con una barra rosa bajo el enlace, no con un fondo:
   la marca usa lineas, no pastillas. */
.menu .fila > a.activo { color: var(--tinta); box-shadow: inset 0 -4px 0 0 var(--rosa); }

/* El acordeon de apartados (DRAPPS-1071) es cosa de la COLUMNA. En la cabecera
   horizontal —movil, o una pantalla estrecha— no hay donde desplegarlo, asi
   que ahi el menu se queda como estaba: cinco secciones y nada mas. Los iconos
   tampoco: al lado del texto solo serian adorno; su sitio es la tira reducida,
   donde sustituyen al texto. */
.menu .icono-seccion,
.menu .desplegar,
.menu .apartados { display: none; }

.quien { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.quien .rol {
  background: transparent;
  border: 1px solid var(--linea-dura);
  border-radius: var(--radio);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Quien eres ES el boton de cambiar la contrasena: no hay una accion aparte
   para algo que se hace una vez cada muchos meses. Se pinta como texto, no
   como boton, y solo el subrayado punteado avisa de que se puede pulsar. */
.quien .yo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.quien .yo:hover { background: transparent; color: var(--tinta); }
.quien .yo-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.quien .yo:hover .yo-nombre { text-decoration-style: solid; }
.quien .yo:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }

/* Un icono cuadrado del mismo tamano que los del tema, para que la fila de la
   cabecera quede alineada. */
button.icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--linea-dura);
}
button.icono:hover { background: var(--rosa-flojo); color: var(--tinta); border-color: var(--tinta); }

/* --- Contenido ------------------------------------------------------------ */

main { max-width: 1440px; margin: 0 auto; padding: 56px 40px 96px; }

h1 {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: .94;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 0 20px;
  text-wrap: balance;
}
h2 {
  /* Al llegar desde el menú de apartados, el título no se queda pegado al
     borde de arriba: se le deja aire por delante, y si vive dentro de una
     tarjeta, que se vea que la tarjeta empieza ahí. */
  scroll-margin-top: 28px;
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 72px 0 24px;
}
.entradilla { color: var(--tinta-flojo); margin: 0 0 32px; max-width: 68ch; font-size: 16px; }

/* Nada de tarjetas flotantes: un bloque es una linea superior y aire. */
.tarjeta {
  /* Igual que en h2: al llegar desde el menú de apartados se para un poco antes
     de la línea de arriba, para que se vea dónde empieza el bloque. */
  scroll-margin-top: 28px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--tinta);
  border-radius: var(--radio);
  padding: 24px 0 0;
  margin-bottom: 40px;
}

.pendiente {
  border-top-style: dashed;
  color: var(--tinta-flojo);
}
.pendiente h2 { margin-top: 0; color: var(--tinta); }

/* --- Formulario de acceso ------------------------------------------------- */

/* Media pantalla negra con el statement de marca, media en blanco con el
   formulario. En movil se apilan y la mitad negra se queda arriba. */
.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.acceso .discurso {
  background: #000000;
  color: #FFFFFF;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
/* El fondo del discurso es negro fijo en los dos temas, asi que aqui el logo va
   siempre en blanco: la inversion se impone sobre --filtro-logo, en el mismo
   elemento en el que ahora vive. */
.acceso .discurso .marca { color: #FFFFFF; height: 44px; }
.acceso .discurso .marca .marca-logo { filter: invert(1); }
.acceso .discurso h1 { margin: 0; color: #FFFFFF; }
.acceso .discurso h1 .rosa { color: var(--rosa); }
.acceso .discurso p { color: #D5D5D5; max-width: 46ch; font-size: 17px; margin: 30px 0 0; }
.acceso .discurso .pie { color: #9A9A9A; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.acceso form {
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  padding: 56px 64px;
  width: 100%;
  max-width: 520px;
  align-self: center;
  justify-self: center;
}
.acceso h1 { font-size: clamp(36px, 4vw, 46px); }

label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-flojo);
  margin: 0 0 4px;
}

/* Los campos son un subrayado, no una caja: es lo que pide el sistema y
   ademas aguanta mejor un formulario largo.
   Se listan los tipos que NO llevan este estilo en vez de los que si (27/08/2026):
   la lista positiva se dejo fuera `type=text`, asi que el «Nombre» del alta de
   cuentas y los buscadores de los filtros salian como una cajita gris del
   navegador, distinta de todo lo demas. Con `:not` cualquier tipo nuevo entra
   solo y no vuelve a pasar. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=hidden]),
textarea,
select {
  width: 100%;
  min-height: 52px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--linea-dura);
  border-radius: var(--radio);
  font: inherit;
  background: transparent;
  color: var(--tinta);
  margin-bottom: 26px;
}
/* El `textarea` estaba fuera de esta lista, así que al enfocarlo Chrome pintaba
   SU propio anillo negro en vez del rosa de la marca — y pegado al texto,
   porque el padding común es `10px 0`. Era la caja que aparecía al escribir una
   nota. */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--rosa);
  outline-offset: 2px;
  border-color: var(--tinta);
}

button {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--papel);
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(.2,.7,.2,1), color 180ms cubic-bezier(.2,.7,.2,1);
}
button:hover { background: transparent; color: var(--tinta); }
button[disabled] { opacity: .5; cursor: default; }
button[disabled]:hover { background: var(--tinta); color: var(--papel); }
button.discreto { background: transparent; color: var(--tinta); border-color: var(--linea); }
button.discreto:hover { background: transparent; color: var(--tinta); border-color: var(--tinta); }

.acceso button[type=submit] { width: 100%; min-height: 56px; }

.aviso {
  color: var(--alerta);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 20px;
  min-height: 20px;
}

/* --- Tablas --------------------------------------------------------------- */

.tabla-scroll { overflow-x: auto; }
/* Cuando las cifras van justo encima de una tabla (peticiones web), aire entre
   ambas: sin esto el borde inferior de las cifras y la cabecera se pegan. */
.cifras + .tabla-scroll { margin-top: 28px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 15px 14px; border-bottom: 1px solid var(--linea); }
th {
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--tinta);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinta-flojo);
  white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--rosa-flojo); }

/* --- Pantalla de datos: filtros, cifras y estados ------------------------- */

.titulo-fila { display: flex; align-items: flex-end; gap: 40px; justify-content: space-between; flex-wrap: wrap; }
.titulo-fila h2 { margin-top: 0; }

.filtros {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
  /* Alineados por ARRIBA, no por abajo. Con `end` mandaba la altura del campo,
     y como los `input[type=date]` no miden lo mismo que los `select`, las
     etiquetas DESDE y HASTA quedaban a distinta altura que FASE DE OBRA,
     APERTURA y CLIC. Lo que tiene que estar a la misma altura es la fila de
     etiquetas, que es lo que se lee de un vistazo. */
  align-items: start;
}
.filtros input, .filtros select { margin-bottom: 0; min-width: 0; }
/* Los botones son la excepción: no llevan etiqueta encima, así que con `start`
   subirían hasta la altura de las etiquetas y quedarían flotando por encima de
   los campos. Se quedan abajo, en línea con los campos que aplican. */
.filtros-botones { display: flex; gap: 10px; align-self: end; }
.filtros-botones button { flex: 1; padding: 0 18px; }

.atajos { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; color: var(--tinta-flojo); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
button.enlace {
  background: none;
  border: 1px solid var(--linea);
  color: var(--tinta-flojo);
  min-height: 0;
  padding: 4px 9px;
  font-size: 11px;
  letter-spacing: .07em;
  text-decoration: none;
  cursor: pointer;
}
button.enlace:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* La franja de cifras: celdas separadas por lineas, numeros enormes. */
/* Las separaciones son el fondo de la rejilla asomando por un hueco de 1px:
   asi las lineas siguen cuadrando cuando las cifras pasan a dos filas, cosa
   que un border-right por celda no aguanta (marketing pinta siete). */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 1px;
  background: var(--linea);
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  margin-bottom: 40px;
}
div.cifra, .cifras > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  padding: 32px 22px;
  min-width: 0;
}

.cifra .valor, span.cifra {
  display: block;
  color: var(--tinta);
  padding: 0;
  border: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 52px;
  font-weight: 700;
  line-height: .85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.cifra .etiqueta, .cifras .etiq {
  display: block;
  border: 0;
  padding: 0;
  margin-top: 14px;
  max-width: 16ch;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tinta-flojo);
  white-space: normal;
}

/* El clic es la senal que de verdad importa: se ve mas que la apertura.
   Aqui eso significa fondo rosa pleno, no un borde de color. */
.cifra.destacada { background: var(--rosa); }
.cifra.destacada .valor { color: var(--tinta); }
.cifra.destacada .etiqueta { color: var(--tinta); }
.cifra.alerta .valor { color: var(--alerta); }

.cargando { color: var(--tinta-flojo); padding: 20px 0; }
/* Las pantallas de muestras y comercial dejan la clase .cargando puesta al
   pintar los datos dentro (el JS solo cambia el innerHTML). Sin esto, el gris
   de "Cargando..." se heredaba a las cifras y a las tablas ya cargadas. */
.cargando table, .cargando .cifras, .cargando > .cifras > div { color: var(--tinta); }

th.destacada, td.destacada { background: var(--rosa-flojo); }
td.destacada { font-weight: 700; }
tbody tr:hover td.destacada { background: var(--rosa); }
td.aviso-celda { color: var(--alerta); font-weight: 600; }

.nota {
  color: var(--tinta-flojo);
  font-size: 13px;
  line-height: 1.5;
  margin: 16px 0 0;
}
/* Dentro de una tabla la nota es una acotacion al lado del dato. */
td .nota { margin: 0; font-size: 12px; }

#nota-proxy:not(:empty) {
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.6;
  margin: 24px 0 0;
  background: var(--rosa-flojo);
  border-left: 4px solid var(--tinta);
  padding: 22px 26px;
  max-width: 92ch;
}

.etiq {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radio);
  border: 1px solid var(--linea-dura);
  color: var(--tinta);
  white-space: nowrap;
}
/* El estado bueno se lee por relleno rosa; los otros, por borde. Ninguno
   depende solo del color: todos llevan su palabra. */
.etiq.buena { background: var(--rosa); border-color: var(--rosa); color: var(--tinta); }
.etiq.tibia { border-color: var(--linea-dura); color: var(--tinta); }
.etiq.mala  { border-color: var(--alerta); color: var(--alerta); }

.paginacion { display: flex; gap: 10px; margin-top: 28px; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .utilidad { padding: 8px 20px; flex-wrap: wrap; gap: 6px; letter-spacing: .1em; }
  .barra { padding: 0 20px; gap: 20px; min-height: 72px; }
  .menu { gap: 20px; order: 3; flex-basis: 100%; align-self: auto; padding-bottom: 12px; }
  .menu .fila > a { box-shadow: none; }
  .menu .fila > a.activo { box-shadow: inset 0 -3px 0 0 var(--rosa); }
  /* Contraer no tiene sentido donde no hay columna que contraer. */
  .pie-barra [data-contraer-sidebar] { display: none; }
  main { padding: 32px 20px 64px; }
  h2 { margin-top: 56px; }
  .filtros { grid-template-columns: 1fr; gap: 20px; }
  .acceso { grid-template-columns: 1fr; min-height: 0; }
  .acceso .discurso { padding: 32px 20px; }
  .acceso form { padding: 40px 20px; max-width: none; }
  .cifra .valor, span.cifra { font-size: 44px; }
}

/* --- Impresion / PDF ------------------------------------------------------
   El cliente pidio exportar a PDF. Con esto, "Imprimir > Guardar como PDF" da
   un documento limpio sin necesidad de generar el PDF en el servidor. */

@media print {
  body { background: #fff; color: #000; }
  .utilidad, .barra, .no-imprimir, .paginacion, .atajos, .tema { display: none !important; }
  main { max-width: none; padding: 0; }
  .tarjeta { border-top: 1px solid #000; padding-top: 12px; margin-bottom: 24px; break-inside: avoid; }
  table { font-size: 11px; }
  th, td { padding: 6px 8px; }
  a { color: inherit; text-decoration: none; }
  h1 { font-size: 32px; }
  h2 { font-size: 20px; margin: 24px 0 12px; break-after: avoid; }
  tr { break-inside: avoid; }
  tbody tr:hover td { background: none; }
  thead { display: table-header-group; }   /* cabecera repetida en cada pagina */
  .cifras { border-color: #000; background: #ccc; }
  div.cifra, .cifras > div { padding: 10px 12px; background: #fff; }
  .cifra .valor, span.cifra { font-size: 22px; }
  /* En papel el color de fondo no se imprime por defecto: el resalte del clic
     se hace con negrita para que no se pierda. */
  .cifra.destacada, th.destacada, td.destacada, .etiq.buena { background: none; font-weight: 700; }
  #nota-proxy:not(:empty) { background: none; border-left: 2px solid #000; padding: 8px 12px; }
}

/* En muestras y comercial la franja de cifras vive dentro de una .tarjeta,
   que ya trae su propia linea superior: sin esto salen dos lineas pegadas. */
.tarjeta .cifras { border-top: 0; margin-bottom: 0; }

/* --- Interruptor de tema ---------------------------------------------------
   Dos botones cuadrados, no una pastilla. Lo monta tema.js. */

.cabecera-acceso { display: flex; justify-content: flex-end; margin-bottom: 32px; }

.tema { display: flex; border: 1px solid var(--linea-dura); }
.tema button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
}
.tema button + button { border-left: 1px solid var(--linea-dura); }
.tema button:hover { background: var(--rosa-flojo); color: var(--tinta); }
.tema button[aria-pressed="true"] { background: var(--rosa); color: #000000; }
.tema button:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }

/* Para lectores de pantalla: el icono solo no dice que hace el boton. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Tema oscuro ----------------------------------------------------------
   No es una paleta nueva: el negro tambien es color de marca, asi que se
   invierten papel y tinta y el rosa se queda como esta. Se activa solo si
   la usuaria lo pide; el atributo lo pone tema.js antes de pintar. */

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --tinta: #FFFFFF;
  --tinta-flojo: #9A9A9A;
  --papel: #000000;
  --fondo: #000000;
  --linea: #333333;
  --linea-dura: #E0E0E0;
  --rosa-flojo: #241820;
  --alerta: #FF8A80;

  --filtro-logo: invert(1);
}
:root[data-tema="oscuro"] .utilidad { background: #151515; }
:root[data-tema="oscuro"] .cifra.destacada .valor,
:root[data-tema="oscuro"] .cifra.destacada .etiqueta { color: #000000; }
:root[data-tema="oscuro"] .etiq.buena { color: #000000; }
:root[data-tema="oscuro"] tbody tr:hover td.destacada { color: #000000; }
:root[data-tema="oscuro"] .acceso .discurso { border-right: 1px solid #333333; }

/* ---------------------------------------------------------------------------
   Transicion entre pantallas (View Transitions).

   Antes, cambiar de seccion era un parpadeo: se recargaba el documento entero
   y ademas la cabecera llegaba tarde. Lo segundo ya esta resuelto (la cabecera
   va en el HTML, no se inyecta); esto se ocupa de lo primero.

   La cabecera y la franja llevan nombre propio a proposito: al tener el mismo
   nombre en las dos paginas, el navegador las trata como el MISMO elemento y
   se quedan quietas mientras cruza lo de debajo. Sin eso parpadearian tambien
   ellas, que es justo lo que se quiere evitar: son identicas en las cuatro
   pantallas y deben comportarse como algo fijo.

   Solo lo aplican los navegadores que lo soportan (Chromium hoy). En los demas
   no pasa nada: se navega como siempre, sin errores ni saltos. Y no sustituye
   al arreglo del layout, que es el que de verdad quitaba el tiron.
--------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

.utilidad { view-transition-name: franja; }
.barra    { view-transition-name: cabecera; }

/* Corto a proposito: esto es una herramienta de trabajo, no una web de
   presentacion. Debe notarse suave, no lento. */
::view-transition-group(root) { animation-duration: .2s; }

/* Quien pide menos movimiento en su sistema no lo recibe. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* --- Dialogos ------------------------------------------------------------- */
/* Se usa <dialog> nativo: trae el foco atrapado, el cierre con Escape y el
   fondo inerte sin una linea de JS. DRAPPS-985. */

dialog {
  border: 1px solid var(--linea-dura);
  background: var(--papel);
  color: var(--tinta);
  padding: 0;
  max-width: 460px;
  width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog .dialogo { padding: 28px 30px 30px; }
dialog h2 { margin: 0 0 20px; }
dialog .botones {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 26px;
}
dialog .botones button { width: auto; padding: 0 20px; }

/* El mismo hueco de .aviso, pero cuando lo que se cuenta ha salido bien. */
.aviso.ok { color: var(--ok); }

/* Una cuenta dada de baja sigue en la lista, pero apagada: se ve que existe y
   que no entra, sin tener que leer la columna. */
tr.inactiva td { opacity: .45; }

/* --- Notas de seguimiento y campanita (DRAPPS-981) ------------------------- */

.notas-lista { max-height: 42vh; overflow-y: auto; margin: 0 0 24px; }
.nota-item { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.nota-item:first-child { padding-top: 0; }
.nota-meta {
  font-size: 12px;
  color: var(--tinta-flojo);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Respeta los saltos de línea de lo que se escribió, que es texto de una
   llamada y suele llevar guiones y párrafos. */
.nota-texto { font-size: 14px; margin-top: 6px; white-space: pre-wrap; }

/* El textarea coge el estilo común de los campos, pero es el único MULTILÍNEA y
   ahí la línea inferior sola no basta: el texto crece hacia abajo y hace falta
   saber dónde acaba el campo. Se le da caja propia y aire por dentro — con el
   padding común (`10px 0`) la letra quedaba pegada al borde en cuanto el campo
   se dibujaba.

   El texto queda 12 px a la derecha de su etiqueta, que es lo normal en un
   campo con caja y lo que hace que se lea como una zona de escritura y no como
   una línea más del formulario. */
dialog textarea {
  font-size: 15px;
  min-height: 0;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  line-height: 1.5;
}
dialog textarea:focus { border-color: var(--tinta); }

/* El botón de la fila: discreto cuando no hay nada, marcado cuando sí. */
.notas-btn.con-notas { border-color: var(--linea-dura); font-weight: 600; }
.notas-btn.pendiente { border-color: var(--alerta); color: var(--alerta); font-weight: 700; }

.campanita {
  position: relative;
  width: auto;
  padding: 0 10px;
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--linea);
  line-height: 1;
}
.campanita:hover { border-color: var(--tinta); background: transparent; color: var(--tinta); }
.campanita.con-avisos { border-color: var(--alerta); }
.campanita .cuenta {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--alerta);
  font-variant-numeric: tabular-nums;
}

/* --- Barras de reparto (DRAPPS-762) --------------------------------------- */
/* Un div, no un grafico: esta pantalla se imprime a PDF y tiene que salir
   igual en papel.
   OJO con el nombre: `.barra` ya es la cabecera del sitio (<header class="barra">),
   asi que estas NO pueden llamarse asi o heredan su alto y su relleno. */

.reparto {
  height: 10px;
  background: var(--linea);
  min-width: 80px;
}
.reparto span {
  display: block;
  height: 100%;
  background: var(--rosa);
}
tfoot th { border-top: 1px solid var(--linea-dura); border-bottom: 0; }

/* --- Ficha de contacto (DRAPPS-984) --------------------------------------- */
/* Una linea de tiempo, no una tabla: los hechos son de tipos distintos y no
   comparten columnas. El borde de la izquierda dice de que tipo es cada uno. */

.hito {
  border-left: 3px solid var(--linea);
  padding: 0 0 22px 18px;
  margin-left: 4px;
  position: relative;
}
.hito:last-child { padding-bottom: 0; }
.hito-meta { font-size: 12px; color: var(--tinta-flojo); }
.hito-titulo { font-size: 15px; font-weight: 600; margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hito-texto { font-size: 14px; margin-top: 6px; white-space: pre-wrap; }
.hito-eventos { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--tinta-flojo); }
.hito-eventos li { margin: 2px 0; }

.hito-doc     { border-left-color: var(--tinta); }
.hito-nota    { border-left-color: var(--rosa); }
.hito-no      { border-left-color: var(--alerta); }
.hito-muestra { border-left-color: var(--tinta-flojo); }
.hito-peticion { border-left-color: var(--rosa); }
.hito-peldanos { border-left-color: var(--tinta); }

.etiq.alerta { border-color: var(--alerta); color: var(--alerta); }

/* El email de cualquier listado lleva a la ficha. Discreto: no es una llamada
   a la accion, es una puerta que esta ahi cuando hace falta. */
a.ficha { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
a.ficha:hover { text-decoration-style: solid; }

/* En la cabecera horizontal el pie no es un pie: es un hueco más de la fila.
   Sin `order`, cae justo detrás de `.quien`, que es donde estaba el
   interruptor de tema antes de mudarse al fondo de la columna. */
.pie-barra { display: flex; align-items: center; }

/* --- Menú lateral izquierdo (DRAPPS-980) ---------------------------------- */
/*
   Decidido en la reunión del 26/08: «me gustan más las opciones a la izquierda,
   porque de esa manera puede haber muchas más opciones. Y contenido a la
   derecha, a lo Hilbana». Ignacio: «el menú de arriba se va a quedar enseguida
   corto».

   Se hace SOLO con CSS: `body:has(.barra)` convierte la cabecera que ya existe
   en una columna, sin tocar el HTML de las siete páginas ni el JS que rellena
   .menu y .quien. Menos superficie que cambiar, y el día que haya que volver
   atrás se borra este bloque.

   Las pantallas sin sesión (entrar, olvide, restablecer) no tienen .barra, así
   que el selector no las alcanza y siguen a pantalla completa.

   Si un navegador no entendiera :has(), la regla entera se ignora y queda el
   menú superior de siempre. Degrada a lo que había, no a algo roto.
*/

@media (min-width: 861px) {
  body:has(.barra) {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas:
      "utilidad utilidad"
      "lateral  contenido";
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }
  body:has(.barra) > .utilidad { grid-area: utilidad; }
  body:has(.barra) > main      { grid-area: contenido; margin: 0; max-width: none; padding: 48px 48px 96px; }

  body:has(.barra) > .barra {
    grid-area: lateral;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* NO se hereda el `wrap` del menú horizontal. En columna y con la altura
       fija de la ventana, envolver no baja el contenido: lo manda a una SEGUNDA
       COLUMNA a la derecha. Con varias secciones desplegadas en una pantalla
       baja, el pie se iba de viaje y aparecía una barra de desplazamiento
       horizontal al fondo. Aquí lo que sobra se desplaza en vertical. */
    flex-wrap: nowrap;
    gap: 40px;
    padding: 34px 24px 28px;
    min-height: 0;
    border-bottom: 0;
    border-right: 1px solid var(--tinta);
    /* Se queda fija: en un listado largo, perder la navegación al bajar
       obliga a subir del todo para cambiar de sección. */
    position: sticky;
    top: 0;
    align-self: start;
    height: calc(100vh - 36px);
    /* En horizontal NUNCA hay barra de desplazamiento: `overflow-y: auto` por sí
       solo arrastra el eje x a `auto` también, y basta con que un título no
       quepa —le pasó a PRESENTACIONES al ganar el icono y el chevron— para que
       aparezca una barra horizontal al pie de la columna. Si algo no cabe, se
       recorta con puntos suspensivos, que es lo que se ve venir. */
    overflow-y: auto;
    overflow-x: hidden;
    /* Barra fina: la normal se come 15px de ancho y con ella PRESENTACIONES,
       que es el título más largo, se quedaba a un pelo de no caber. */
    scrollbar-width: thin;
  }

  body:has(.barra) .menu {
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
  }
  body:has(.barra) .menu .grupo { display: block; }
  /* Sin hueco entre el enlace y su chevron: son 2px que en 191 de ancho útil
     decidían si PRESENTACIONES cabía entera o salía con puntos suspensivos. */
  body:has(.barra) .menu .fila { gap: 0; }
  body:has(.barra) .menu .fila > a {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    padding: 11px 6px;
    /* La marca usa líneas, no pastillas: el activo se marca con una barra rosa
       a la izquierda, que es la traducción vertical de la que había debajo. */
    box-shadow: none;
    border-left: 4px solid transparent;
  }
  body:has(.barra) .menu .fila > a:hover { background: var(--rosa-flojo); }
  body:has(.barra) .menu .fila > a.activo {
    box-shadow: none;
    border-left-color: var(--rosa);
    background: var(--rosa-flojo);
  }
  body:has(.barra) .menu .etiqueta {
    /* Sin min-width:0 el texto impone su ancho entero al flex y el
       text-overflow no llega a entrar en juego: empuja la columna en vez de
       recortarse. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* El icono de la sección acompaña al texto en la columna ancha y lo
     SUSTITUYE en la reducida. Estando ya aquí, la tira encogida no cambia de
     sitio nada: solo desaparece la etiqueta. */
  body:has(.barra) .menu .icono-seccion {
    display: block;
    flex: 0 0 20px;
    color: var(--tinta-flojo);
  }
  body:has(.barra) .menu .inicial {
    width: 20px;
    text-align: center;
    font-family: var(--display);
    font-size: 15px;
    line-height: 20px;
  }
  body:has(.barra) .menu .fila > a.activo .icono-seccion { color: var(--tinta); }

  /* El chevron es un botón aparte del enlace, y no el enlace entero, porque
     hacen dos cosas distintas: uno lleva a la pantalla y el otro enseña lo que
     hay dentro sin salir de donde estás. Fundirlos obligaría a elegir cuál de
     las dos pierde. */
  body:has(.barra) .menu .desplegar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tinta-flojo);
  }
  body:has(.barra) .menu .desplegar:hover { background: var(--rosa-flojo); color: var(--tinta); }
  body:has(.barra) .menu .desplegar svg { transition: transform .18s ease; }
  body:has(.barra) .menu .desplegar[aria-expanded="false"] svg { transform: rotate(-90deg); }

  body:has(.barra) .menu .apartados {
    display: block;
    list-style: none;
    margin: 2px 0 8px;
    padding: 0;
  }
  body:has(.barra) .menu .apartados[hidden] { display: none; }
  /* En la columna ancha el nombre de la sección ya está justo encima, en su
     fila: repetirlo sobraría. Solo aparece en el panel flotante de la columna
     reducida, donde no hay nada que diga de quién son estos apartados. */
  body:has(.barra) .menu .apartados .cabeza { display: none; }
  /* Los apartados NO van en versalitas como las secciones: son el título tal y
     como está escrito en la pantalla, y tienen que poder reconocerse al llegar
     abajo. Por eso también se les deja partir en dos líneas en vez de
     recortarlos con puntos suspensivos. */
  body:has(.barra) .menu .apartados a {
    display: block;
    padding: 6px 12px 6px 30px;
    text-decoration: none;
    color: var(--tinta-flojo);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.35;
    border-left: 4px solid transparent;
  }
  body:has(.barra) .menu .apartados a:hover { background: var(--rosa-flojo); color: var(--tinta); }
  body:has(.barra) .menu .apartados a.activo {
    color: var(--tinta);
    border-left-color: var(--rosa);
  }

  /* Quién eres, entre el logo y las secciones, y en UNA sola línea (ajuste del
     27/08). Antes ocupaba cinco filas al fondo de la columna: dos botones a
     ancho completo para acciones que casi no se usan. Ahora el nombre es el
     botón de la contraseña y salir es un icono, así que cabe todo arriba y la
     columna queda entera para las secciones, que es lo que se mira.

     El orden se cambia con `order` y no moviendo el HTML: en el menú
     horizontal de móvil el sitio natural de `.quien` sigue siendo el final. */
  body:has(.barra) .barra > .marca { order: 1; }
  body:has(.barra) .barra > .quien { order: 2; }
  body:has(.barra) .barra > .menu  { order: 3; }

  body:has(.barra) .quien {
    margin-top: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--linea);
  }
  /* La campanita abre la línea, a la izquierda del nombre: es lo que se mira
     al entrar, y en el borde izquierdo cae en la misma vertical que el logo y
     que las secciones. Salir queda al otro extremo, lejos de ella.

     El nombre es lo único elástico: si no cabe, se recorta con puntos
     suspensivos antes que empujar los iconos fuera de la columna. */
  body:has(.barra) .quien .yo {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    /* Centrado, no pegado a la izquierda: el nombre y el rol son una sola cosa
       y quedan bajo el eje de la columna, entre la campanita y el botón de
       salir. Con flex-start el bloque se descolgaba a la izquierda. */
    align-items: center;
    gap: 1px;
  }
  body:has(.barra) .quien .yo-nombre { font-size: 14px; max-width: 100%; }
  /* El rol deja de ser una pastilla con borde: aquí es solo una etiqueta
     debajo del nombre, y el marco solo añadía ruido en una fila apretada. */
  body:has(.barra) .quien .rol {
    border: 0;
    padding: 0;
    font-size: 10px;
    color: var(--tinta-flojo);
  }
  body:has(.barra) .quien > [data-campanita],
  body:has(.barra) .quien > #salir { flex: 0 0 auto; }
  /* Los tres controles, al mismo tamaño reducido: en 250px de columna los 44px
     de la cabecera horizontal no caben en una línea. */
  body:has(.barra) .quien .campanita,
  body:has(.barra) .quien #salir { width: auto; height: 32px; padding: 0 8px; }
  /* Mismo borde que el interruptor de tema: en una fila de tres controles, dos
     grises distintos se ven como un descuadre. */
  body:has(.barra) .quien .campanita { border-color: var(--linea-dura); }
  body:has(.barra) .quien .campanita.con-avisos { border-color: var(--alerta); }
  body:has(.barra) .quien #salir { width: 32px; padding: 0; }

  /* El interruptor de tema, al fondo de la columna (ajuste del 27/08): se
     elige una vez y no se vuelve a tocar, así que no tiene por qué robarle
     ancho a la línea del usuario, donde el nombre iba justo. Aquí recupera su
     tamaño normal. */
  body:has(.barra) .barra > .pie-barra {
    order: 4;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--linea);
  }

  /* Con el bloque de usuario arriba, la separación la ponen ya los bordes: el
     hueco de 40px que había entre logo y menú sobra. */
  body:has(.barra) > .barra { gap: 22px; }

  /* El tema a la izquierda y contraer a la derecha, en la misma línea. */
  body:has(.barra) .pie-barra { justify-content: space-between; gap: 10px; }

  /* --- Columna reducida (DRAPPS-1071) --------------------------------------
     Una tira de iconos, para devolverle 174px al contenido: en las tablas de
     Comercial, con ocho columnas, se nota. Lo que desaparece es el TEXTO, no
     las opciones: todas siguen ahí, y los apartados salen al pasar por encima
     de su sección. */
  [data-sidebar="reducido"] body:has(.barra) { grid-template-columns: 76px minmax(0, 1fr); }

  [data-sidebar="reducido"] body:has(.barra) > .barra {
    padding: 34px 12px 20px;
    gap: 18px;
    /* Sin recorte: el desplegable de apartados se sale de la columna por la
       derecha, y con overflow-y quedaría cortado. Cinco iconos no necesitan
       barra de desplazamiento. */
    overflow: visible;
  }

  [data-sidebar="reducido"] .marca { justify-content: center; height: 40px; }
  [data-sidebar="reducido"] .marca .marca-logo { display: none; }
  [data-sidebar="reducido"] .marca .marca-icono { display: block; height: 40px; width: 40px; }

  /* Quién eres se queda en la campanita y en salir, uno debajo del otro. El
     nombre no cabe, y cambiar la contraseña —una vez cada muchos meses— se
     hace desplegando la columna. */
  [data-sidebar="reducido"] body:has(.barra) .quien {
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
  }
  [data-sidebar="reducido"] body:has(.barra) .quien .yo { display: none; }

  [data-sidebar="reducido"] body:has(.barra) .menu .grupo { position: relative; }
  [data-sidebar="reducido"] body:has(.barra) .menu .etiqueta,
  [data-sidebar="reducido"] body:has(.barra) .menu .desplegar { display: none; }
  [data-sidebar="reducido"] body:has(.barra) .menu .fila > a {
    justify-content: center;
    padding: 12px 0;
    border-left-width: 3px;
  }
  [data-sidebar="reducido"] body:has(.barra) .menu .icono-seccion { flex: 0 0 auto; }

  /* Aquí el acordeón deja de abrirse hacia abajo —no hay ancho— y sale como un
     panel a la derecha, al pasar por encima o al llegar con el tabulador. Se
     enseña esté la sección abierta o cerrada: el estado del acordeón es de la
     columna ancha, y arrastrarlo hasta aquí solo escondería la mitad de los
     apartados sin que se viera por qué. */
  [data-sidebar="reducido"] body:has(.barra) .menu .apartados {
    position: absolute;
    left: 100%;
    top: -6px;
    z-index: 30;
    display: none;
    min-width: 240px;
    margin: 0 0 0 1px;
    padding: 8px 0;
    background: var(--papel);
    border: 1px solid var(--tinta);
  }
  [data-sidebar="reducido"] body:has(.barra) .menu .grupo:hover > .apartados,
  [data-sidebar="reducido"] body:has(.barra) .menu .grupo:focus-within > .apartados {
    display: block;
  }
  [data-sidebar="reducido"] body:has(.barra) .menu .apartados a { padding-left: 14px; white-space: normal; }
  [data-sidebar="reducido"] body:has(.barra) .menu .apartados .cabeza {
    display: block;
    margin: 0 0 6px;
    padding: 0 14px 8px;
    border-bottom: 1px solid var(--linea);
    color: var(--tinta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  /* El interruptor de tema desaparece de la tira: dos botones de 44px no caben
     en 52px de ancho útil, y apilados dejaban un pie de tres cuadrados que
     pesaba más que el menú entero. Se elige una vez cada muchos meses, así que
     vive en la columna desplegada. Al pie reducido le queda una sola cosa,
     centrada: volver a desplegar. */
  [data-sidebar="reducido"] body:has(.barra) .pie-barra { justify-content: center; }
  [data-sidebar="reducido"] body:has(.barra) .pie-barra .tema { display: none; }
  /* La flecha apunta al otro lado cuando la columna ya está encogida. */
  [data-sidebar="reducido"] [data-contraer] svg { transform: scaleX(-1); }
}

/* Por debajo de 861px no hay sitio para una columna fija: se queda el menú
   horizontal de siempre, que en un móvil es lo que funciona. No se monta un
   cajón desplegable para cuatro entradas. */

/* Detalle visto en la demo: el botón de la fila de título quedaba pegado a la
   línea de debajo. */
.titulo-fila { padding-bottom: 4px; }

/* Ficha de oferta (DRAPPS-667). Tres piezas que no existían todavía.

   Los pares etiqueta/valor van en <dl> y no en una tabla: no son filas
   comparables entre sí, son los datos de una sola cosa. En pantalla ancha caben
   en columnas; en móvil se apilan solos, sin media query. */
.pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
         gap: 14px 24px; margin: 0; }
.pares dt { font-size: 12px; color: var(--tinta-flojo); text-transform: uppercase;
            letter-spacing: .04em; }
.pares dd { margin: 2px 0 0; font-size: 15px; }

/* Subtítulo dentro de una tarjeta, para separar «lo que dice FileMaker» de «lo
   que sabe la plataforma» sin abrir otra tarjeta. */
.sub { font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
       color: var(--tinta-flojo); margin: 22px 0 10px; }

/* La fila de la suma. Línea dura arriba y sin el hover del resto: no es una
   fila más de la tabla, es su cierre. */
tr.total td { border-top: 2px solid var(--linea-dura); border-bottom: none; }
tbody tr.total:hover td { background: transparent; }

/* Buscador de la tabla de detalle (Marketing). Vive pegado a SU tabla, no en el
   formulario de filtros de arriba: solo afecta a ese listado. */
.buscador { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.buscador input { margin-bottom: 0; flex: 1 1 320px; max-width: 460px; }
.buscador .nota { margin: 0; white-space: nowrap; }

/* Miga de pan (DRAPPS-667). Debajo del bloque de título.

   Existe sobre todo por las fichas de contacto y de oferta: no son secciones
   del menú, se llega a ellas pulsando dentro de un listado, así que ningún
   enlace queda marcado y se pierde el sitio en el que estás.

   Discreta: es una referencia, no una navegación principal. Quien ya sabe
   dónde está no debería tropezarse con ella. */
.miga { margin: -8px 0 28px; }
.miga ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-flojo);
}
.miga li { display: flex; align-items: center; gap: 8px; }
/* El separador se pinta con ::before del elemento siguiente, no como un <li>
   suelto: así no se lee en voz alta ni se puede seleccionar con el texto. */
.miga li + li::before { content: "/"; color: var(--linea); font-weight: 400; }
.miga a { color: var(--tinta-flojo); text-decoration: none; }
.miga a:hover { color: var(--tinta); box-shadow: inset 0 -2px 0 0 var(--rosa); }
.miga [aria-current="page"] { color: var(--tinta); }

/* --- Analítica web (DRAPPS-1202) ------------------------------------------- */

.selector-mes { display: flex; align-items: center; gap: 12px; }
.selector-mes label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-flojo); }
.selector-mes select { margin: 0; min-width: 200px; }

.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.dos-columnas .tarjeta { min-width: 0; }

/* Barras horizontales, como en el informe del cliente. Sin librería: es una
   lista con un relleno cuyo ancho es el porcentaje sobre el máximo. */
.barras { display: grid; gap: 10px; }
.barra-fila { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 64px; align-items: center; gap: 12px; font-size: 14px; }
.barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { display: block; height: 18px; background: var(--rosa-flojo); border-radius: var(--radio); overflow: hidden; }
.barra-relleno { display: block; height: 100%; background: var(--rosa); }
.barra-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
/* En peldaños las opciones de ancho son largas («Hasta 95 cm de ancho (NAI 300,
   950 mm)») y cortadas no se distinguen: se dejan partir en dos líneas. */
#peldanos .barra-nombre { white-space: normal; overflow: visible; }

/* Variación respecto al mes anterior, dentro de la etiqueta de la cifra. */
.variacion { display: inline-block; margin-left: 6px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.variacion.sube { color: var(--tinta); }
.variacion.baja { color: var(--alerta); }

/* Columnas diarias: una por día, altura proporcional al máximo del periodo. */
.columnas { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--linea-dura); }
.columna { flex: 1 1 0; min-width: 2px; background: var(--rosa); border-radius: 2px 2px 0 0; }
.columna:hover { background: var(--tinta); }
.columnas-eje { display: flex; justify-content: space-between; font-size: 12px; color: var(--tinta-flojo); margin-top: 6px; }

@media (max-width: 860px) {
  .barra-fila { grid-template-columns: minmax(90px, 130px) 1fr 56px; font-size: 13px; }
}