/* ==========================================================================================
   El sistema visual de la plataforma.

   Hasta ahora cada pantalla traía su propio <style> con sus tarjetas, sus chips y sus tablas:
   veintidós plantillas definiendo lo mismo de veintidós maneras. Eso no se nota mientras hay
   siete pantallas y se nota muchísimo cuando hay setenta, que es a donde vamos.

   Cómo está montado, y por qué:

   1. TOKENS. Todo lo visual sale de una variable. Cambiar el aire de la aplicación entera es
      cambiar cuatro números aquí, no repasar setenta archivos.
   2. El color de MARCA no está aquí: lo pone cada empresa y lo inyecta la plantilla base
      (`marca.tokens_css`), ya con el contraste calculado en nucleo/color.py.
   3. COMPONENTES con nombre en castellano, como el resto del código: `.tarjeta`, `.chip`,
      `.btn`, `.tabla`, `.vacio`. Una pantalla nueva se escribe combinándolos y no necesita
      CSS propio; si lo necesita, es que falta un componente aquí.
   4. Se lee de día en un taller y de noche en una oficina: hay modo oscuro, y no es un
      invento de la pantalla, es el mismo sistema con otros valores de los mismos tokens.
   ========================================================================================== */

:root {
  /* --- Tinta y superficies ------------------------------------------------------------- */
  /* El papel tiene cuerpo a propósito: con un fondo casi blanco, las tarjetas blancas, la
     franja blanca y el lateral blanco se fundían en una sola sábana y la pantalla se veía
     «demasiado clara», sin relieve. Un papel un punto más tostado y unas líneas que se ven
     devuelven la estructura sin oscurecer nada. Cifras medidas: el texto principal queda en
     13,6 sobre el papel y 16,7 sobre las tarjetas; el secundario, en 5,4 y 6,6. */
  --ink:        #1c1e22;   /* texto principal */
  --ink2:       #5a5d63;   /* texto secundario: 5,4 sobre el papel, se lee de verdad */
  /* Apagado, pero legible: lo llevan el «/» del buscador, la etiqueta «Ver» de los filtros
     y los textos de «no hay nada». Estaba en #70747b, que sobre el rayado de las tablas se
     quedaba en 4,27 —por debajo del 4,5 que este sistema promete—. Ahora: 5,5 sobre las
     tarjetas, 5,0 sobre el rayado y 4,5 sobre el papel. Sigue siendo el gris más flojo. */
  --ink3:       #656970;
  --fondo:      #ebe8e1;   /* el papel */
  --panel:      #ffffff;   /* las tarjetas encima del papel */
  --panel-2:    #f6f4ef;   /* rayado de tabla, cabeceras */
  --linea:      #d9d5cc;
  --linea-2:    #c4bfb4;   /* separaciones que sí tienen que verse */

  /* --- El lateral. Va con el tema: claro de día, oscuro de noche -----------------------
     Fue oscuro también de día, para separar de un golpe «dónde estoy» de «lo que miro».
     Pero era el único trozo de la pantalla que no obedecía al interruptor, y el logo de cada
     empresa —hecho para papel blanco— se veía encima como una pegatina. De día es un gris
     cálido muy claro, distinto del blanco de la franja y de las tarjetas para que se lea
     como columna; de noche, un gris azulado (abajo). El «dónde estoy» lo sigue diciendo el
     bloque del color de la empresa en la sección puesta. */
  --lateral:        #f3f1ec;
  --lateral-2:      #e6e2da;   /* lo que se posa encima: la fila con el ratón */
  --lateral-txt:    #1c1e22;
  --lateral-txt-2:  #5a5d63;   /* lo secundario: 5,8 sobre el lateral, se lee de verdad */
  --lateral-linea:  #d9d5cc;

  /* --- Estado. Cuatro y no más: cada uno significa una cosa y no se reutilizan.
       Los modificadores se llaman `es-ok`, `es-aviso`… y no `ok`, `aviso`: `.aviso` ya es el
       cartel de los mensajes, y un elemento con las dos clases se llevaba los dos aspectos. */
  --ok:         #1f6a45;  --ok-suave:      #e6f2ea;
  --aviso:      #8a5a12;  --aviso-suave:   #fbf1e0;
  --grave:      #a1322c;  --grave-suave:   #f9e6e5;
  --info:       #23557f;  --info-suave:    #e6eef6;

  /* --- Espacio. Escala de 4: dos elementos separados «un poco» lo están siempre igual --- */
  --e1: 4px;  --e2: 6px;  --e3: 8px;  --e4: 12px;
  --e5: 16px; --e6: 24px; --e7: 32px; --e8: 48px;

  /* --- Formas --------------------------------------------------------------------------- */
  --r:    10px;   /* la tarjeta */
  --r-s:  7px;    /* el control */
  --r-xs: 5px;
  --sombra:   0 1px 2px rgba(28, 30, 34, .06);
  --sombra-2: 0 4px 16px rgba(28, 30, 34, .10);

  /* --- Letra ---------------------------------------------------------------------------- */
  --tipo: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --t-xs: .72rem; --t-s: .8rem; --t-m: .88rem; --t-b: 1rem;
  --t-g: 1.15rem; --t-xg: 1.45rem; --t-xxg: 1.9rem;

  --transicion: .14s ease;
  color-scheme: light;
}

/* El mismo sistema, de noche. Se cambian los tokens, no los componentes.

   Va SOLO cuando alguien lo pide (`data-tema="oscuro"`), no cuando lo pide el sistema
   operativo. Un taller que abre la aplicación y se la encuentra en negro sin haber tocado
   nada cree que se ha roto algo, y con un cliente delante eso no se explica. Se enciende
   desde el pie del menú y se recuerda en ese navegador. */
:root[data-tema="oscuro"] {
    /* Los valores están medidos, no elegidos a ojo: el texto principal queda en 12,0 sobre
       el panel y el secundario en 7,4 —de día, sobre el papel, son 13,6 y 5,4—, así que de
       noche se lee igual de bien. No es negro: un fondo casi negro con tarjetas casi negras
       se veía «demasiado oscuro» y sin relieve; es un gris antracita con las tarjetas un
       punto más claras y las líneas visibles, que es lo que hace que se distingan. */
    /* --ink3 de noche: estaba en #9d9890, que sobre el rayado de tabla (--panel-2) daba
       4,05. Ahora 4,7 ahí, 5,6 sobre el panel y 6,6 sobre el fondo. */
    --ink: #f2f0ec; --ink2: #c2beb6; --ink3: #aaa59e;
    --fondo: #1f2124; --panel: #2b2e33; --panel-2: #353940;
    --linea: #474c54; --linea-2: #5f656e;
    --ok: #86d6ac;  --ok-suave: #22452f;
    --aviso: #eec27f; --aviso-suave: #45361a;
    --grave: #f0a9a3; --grave-suave: #47282a;
    --info: #9cc4ea;  --info-suave: #1f3650;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 4px 16px rgba(0, 0, 0, .5);
    /* El lateral de noche: 11,7 de contraste el texto principal, 5,5 el secundario. */
    --lateral: #272b31; --lateral-2: #323740;
    --lateral-txt: #e7e9ec; --lateral-txt-2: #9aa1ac; --lateral-linea: #3d434c;
    /* El color de la empresa, aclarado: el rojo o el azul marino corporativos no se leen
       sobre un panel casi negro. Lo calcula nucleo/color.py y lo inyecta la plantilla. */
    --marca-legible: var(--marca-legible-oscuro, #d9d6d0);
    color-scheme: dark;
  }


/* ---------- Base ------------------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--tipo);
  font-size: var(--t-b);
  line-height: 1.5;
  background: var(--fondo);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Foco visible SIEMPRE. Media plantilla usa el teclado con guantes de trabajo puestos, y un
   foco invisible es una pantalla que no se puede usar sin ratón. */
:focus-visible {
  outline: 2px solid var(--marca-accion, var(--ink));
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

a { color: var(--marca-legible, var(--info)); }
h1 { font-size: var(--t-xg); line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: var(--t-g); line-height: 1.3; }
h3 { font-size: var(--t-b); line-height: 1.35; }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }

/* ---------- Estructura de página --------------------------------------------------------- */
.sub { color: var(--ink2); margin-bottom: var(--e6); max-width: 74ch; }
.pie { color: var(--ink2); font-size: var(--t-s); margin-top: var(--e6); max-width: 80ch; }

/* Cabecera de pantalla: título a la izquierda, acciones a la derecha, y en el móvil una
   debajo de otra sin que haya que pensarlo. */
.cabecera { display: flex; align-items: flex-start; gap: var(--e5); flex-wrap: wrap;
            margin-bottom: var(--e2); }
.cabecera .acciones { margin-left: auto; display: flex; gap: var(--e3); flex-wrap: wrap; }

/* ---------- Tarjeta ---------------------------------------------------------------------- */
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: var(--e5) var(--e6);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra);
}
.tarjeta > h3:first-child, .tarjeta > h2:first-child { margin-bottom: var(--e1); }
.tarjeta .sub { margin-bottom: var(--e4); }
.tarjeta.apagada { background: var(--panel-2); }
/* La tarjeta de fichar, teñida entera: verde si estás dentro, rojo si estás fuera. El estado
   se dice con palabras Y con color, que se lea desde lejos sin leer. La comparten «Mi
   jornada» y el perfil de la tablet: es la misma pantalla en dos marcos. */
.tarjeta.jornada-dentro { border-color: var(--ok); background: var(--ok-suave); }
.tarjeta.jornada-fuera { border-color: var(--grave); background: var(--grave-suave); }

/* ---------- Rejilla de métricas ---------------------------------------------------------- */
/* Los números que se miran de un vistazo al entrar. Auto-fit: caben los que quepan y no hay
   que decidir columnas por pantalla. */
/* Las cifras de cabecera, en UNA tarjeta con separadores y no en tres tarjetas sueltas.
   Sueltas se leían como tres cosas distintas; juntas se leen como lo que son: las tres caras
   del mismo número. Además ocupan menos alto, que en una pantalla con tabla debajo importa. */
/* Rejilla con un hueco de 1 px sobre el color de la línea: las separaciones salen solas y
   quedan bien pase lo que pase al reajustarse —tres arriba y dos abajo, o seis en fila—. Con
   bordes por elemento había que adivinar cuál es el último de cada fila, que es una cuenta
   que el navegador ya sabe hacer y nosotros no. */
.metricas { display: grid; gap: 1px; margin-bottom: var(--e5);
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            background: var(--linea); border: 1px solid var(--linea);
            border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.metrica { padding: var(--e4) var(--e5); background: var(--panel); }
.metrica .q { display: block; font-size: var(--t-xs); text-transform: uppercase;
              letter-spacing: .06em; color: var(--ink2); }
/* La cifra se encoge si es larga en vez de partirse: «19.128,89 €» en dos renglones no
   es una cifra, es un jeroglífico. */
.metrica .v { display: block; font-weight: 700; line-height: 1.15; margin-top: var(--e1);
              font-variant-numeric: tabular-nums; white-space: nowrap;
              font-size: clamp(1.25rem, .9rem + 1.1vw, 1.9rem); }
.metrica .q { min-height: 2.2em; }
.metrica .n { display: block; font-size: var(--t-s); color: var(--ink2); }
.metrica.es-ok .v    { color: var(--ok); }
.metrica.es-aviso .v { color: var(--aviso); }
.metrica.es-grave .v { color: var(--grave); }
/* El color va en la CIFRA, no en el fondo del cuadro. Cuatro cuadros teñidos seguidos son un
   muro de color donde ya no destaca nada; con la cifra en su color y el cuadro en blanco, lo
   que está mal se sigue viendo desde la puerta y la pantalla respira.
   El único que conserva el fondo es lo grave, que es donde el bloque de color hace lo que
   promete: que no se pueda pasar por alto. */
.metrica.es-grave { background: var(--grave-suave); }
/* Una métrica sola no se estira a lo ancho de la pantalla: una cifra de dos dígitos en un
   cuadro de 1.100 px parece un error de maquetación, no un dato. */
/* Una métrica sola no se estira a lo ancho de la pantalla: una cifra de dos dígitos en un
   cuadro de 1.100 px parece un error de maquetación, no un dato. */
.metricas:has(> .metrica:only-child) { max-width: 340px; }

/* ---------- Tabla ------------------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: var(--t-xs); color: var(--ink2); text-transform: uppercase;
     letter-spacing: .05em; font-weight: 700; padding: var(--e2) var(--e3); }
td { padding: var(--e3); border-top: 1px solid var(--linea); vertical-align: top; }
tbody tr:hover td { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Una fecha nunca se parte: «29/08/202 / 6» en dos líneas no es una fecha. */
/* Un número de factura, un código de orden, una fecha o un importe son UNA unidad: no se
   parten en dos renglones. «2026-⏎1585» y «25/08/20⏎26» no son texto envuelto, son un dato
   roto, y encima cuesta más leerlo que si la columna fuera un poco más ancha. El texto de
   verdad —conceptos, nombres, notas— sí envuelve, que para eso es texto. */
.fecha, .num, .dato { white-space: nowrap; }
/* Las acciones de una fila van seguidas, no una debajo de otra: cada formulario es un bloque
   y, sin esto, dos botones de la misma fila salían en dos renglones. */
td.acciones { text-align: right; white-space: nowrap; width: 1%; }
td.acciones > form, td.acciones > a, td.acciones > button { display: inline-flex;
                                                            vertical-align: middle;
                                                            margin-left: var(--e1); }
/* El texto envuelve: una tabla no puede obligar a arrastrar la pantalla a los lados. */
/* El texto envuelve, pero por los espacios: `anywhere` partía «Construcciones» en
   «Construccio / nes», que es más difícil de leer que una columna un poco más ancha. Solo se
   parte una palabra cuando de verdad no cabe entera (una referencia larga, un correo). */
td, th { overflow-wrap: break-word; }

/* ---------- Ficha de lista ---------------------------------------------------------------- */
/* Un elemento de una lista que pide una acción: la corrección que hay que aprobar, el
   presupuesto que espera respuesta. No es una fila de tabla porque lleva texto largo dentro
   —el motivo que escribió una persona— y una tabla con párrafos se lee fatal. */
.item { border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--panel);
        padding: var(--e4) var(--e5); margin-bottom: var(--e3);
        display: flex; gap: var(--e5); flex-wrap: wrap; align-items: flex-start; }
.item .cuerpo { flex: 1 1 320px; min-width: 0; }
.item .acciones { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.item .meta { color: var(--ink2); font-size: var(--t-s); margin-top: var(--e1); }
.item.es-aviso { border-left: 3px solid var(--aviso); }
/* Lo que ya no está en marcha: se ve, pero no compite con lo vivo. */
.item.apagada { background: var(--panel-2); border-style: dashed; }
.item.apagada .cuerpo { color: var(--ink2); }

/* Lo que ha escrito una persona, citado tal cual. Se distingue de lo que dice el sistema. */
.cita { border-left: 3px solid var(--linea-2); padding-left: var(--e3); margin-top: var(--e2);
        color: var(--ink); }

/* ---------- Tabla de datos (clave / valor) ------------------------------------------------ */
/* Para una ficha: a la izquierda cómo se llama el dato, a la derecha lo que vale. No es una
   tabla de filas comparables, así que no lleva cabecera ni rayado. */
.datos td { vertical-align: top; }
.datos td:first-child { width: 230px; color: var(--ink2); }
.datos tbody tr:hover td { background: none; }
/* La misma pareja clave/valor sin tabla, para las fichas de cuatro campos: ahí una tabla es
   andamiaje de más. Lo usaban ya dos módulos **sin que existiera la regla**, así que la
   etiqueta y el valor salían pegados: «Anotada por—». Un nombre de clase que se usa y no
   está definido es peor que uno que no existe, porque parece que funciona. */
.datos:not(table) { display: grid; gap: var(--e3); }
.datos:not(table) > div { display: grid; grid-template-columns: 200px minmax(0, 1fr);
                          gap: var(--e4); align-items: baseline; }
.datos:not(table) .et { color: var(--ink2); }
@media (max-width: 620px) {
  .datos:not(table) > div { grid-template-columns: 1fr; gap: 0; }
}
.rompe { word-break: break-all; }

/* ---------- Chips ------------------------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .03em;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  background: var(--panel-2); color: var(--ink2); border: 1px solid var(--linea);
}
.chip.es-ok    { background: var(--ok-suave);    color: var(--ok);    border-color: transparent; }
.chip.es-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: transparent; }
.chip.es-grave { background: var(--grave-suave); color: var(--grave); border-color: transparent; }
.chip.es-info  { background: var(--info-suave);  color: var(--info);  border-color: transparent; }
.chip.es-marca { background: var(--marca-suave); color: var(--marca-legible);
                 border-color: var(--marca-borde); }
.chip.es-plan  { border-style: dashed; }
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------- Botones ---------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: 10px 18px; border-radius: var(--r-s);
  /* El borde es del propio color, un punto más oscuro. No es adorno: si la marca de un
     cliente es casi blanca, sin borde el botón desaparece sobre la tarjeta. */
  border: 1px solid var(--marca-fuerte, var(--ink));
  background: var(--marca-accion, var(--ink)); color: var(--marca-txt, #fff);
  font: inherit; font-size: var(--t-m); font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background var(--transicion), border-color var(--transicion);
  /* 40 px de alto mínimo: se toca con el dedo y con guantes. */
  min-height: 40px;
  /* El texto de una tabla envuelve; el de un botón, no. «Ver» partido en «Ve / r» en la
     última columna de una tabla estrecha no es una línea más: es una palabra rota. Un
     rótulo de botón es corto por definición, así que cabe entero o la columna se ensancha. */
  white-space: nowrap;
}
.btn:hover { background: var(--marca-fuerte, var(--ink)); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn.segundo { background: var(--panel); color: var(--ink); border-color: var(--linea-2); }
.btn.segundo:hover { background: var(--panel-2); border-color: var(--ink3); }
.btn.peligro { background: var(--grave); color: #fff; }
.btn.peligro:hover { background: var(--grave); filter: brightness(.9); }
/* De noche --grave es un rosa claro y el blanco encima no se lee (1,9 de contraste): tinta oscura. */
:root[data-tema="oscuro"] .btn.peligro { color: #1c1e22; }
.btn.suelto { background: transparent; color: var(--marca-legible, var(--info));
              border-color: transparent; padding-left: var(--e3); padding-right: var(--e3); }
.btn.suelto:hover { background: var(--panel-2); }
.btn.chico { padding: 6px 12px; font-size: var(--t-s); min-height: 32px; }
.btn.grande { padding: 14px 26px; font-size: var(--t-g); min-height: 52px; }
.btn.ancho { width: 100%; }

/* ---------- Formularios ------------------------------------------------------------------ */
label { display: block; font-size: var(--t-s); color: var(--ink2); margin-bottom: var(--e1); }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: var(--t-m);
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--linea-2); border-radius: var(--r-s);
  min-height: 40px;
}
input:disabled, select:disabled, textarea:disabled { background: var(--panel-2); color: var(--ink3); }
textarea { min-height: 72px; resize: vertical; }
/* Rejilla de campos. `align-items: start` y una altura mínima para la etiqueta: con
   etiquetas de una y de dos líneas mezcladas, los cuadros de texto quedaban a alturas
   distintas dentro de la misma fila y el formulario parecía roto. */
.campos { display: grid; gap: var(--e4);
          grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }
.campos > div > label { min-height: 2.4em; display: flex; align-items: flex-end; }
.campos > div > .btn { margin-top: 2.4em; }
/* Una casilla no es un cuadro de texto: ni ocupa todo el ancho ni mide 40 px de alto. */
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0;
                                          accent-color: var(--marca-accion); }
.campos input[type=checkbox] { margin-top: var(--e2); }
.ayuda { font-size: var(--t-s); color: var(--ink2); margin-top: var(--e1); }
.error { font-size: var(--t-s); color: var(--grave); margin-top: var(--e1); }

/* ---------- Avisos ----------------------------------------------------------------------- */
.aviso {
  background: var(--panel); border: 1px solid var(--linea);
  border-left: 4px solid var(--ink3); border-radius: var(--r);
  padding: var(--e4) var(--e5); margin-bottom: var(--e5);
}
.aviso.success { border-left-color: var(--ok); background: var(--ok-suave); }
.aviso.error   { border-left-color: var(--grave); background: var(--grave-suave); }
.aviso.warning { border-left-color: var(--aviso); background: var(--aviso-suave); }
.aviso.info    { border-left-color: var(--info); background: var(--info-suave); }

/* ---------- Estado vacío ------------------------------------------------------------------ */
/* Una lista vacía no puede decir solo «no hay nada»: tiene que decir qué es esto y qué se
   hace ahora. Es la primera pantalla que ve un cliente el día que empieza. */
.vacio { text-align: center; padding: var(--e7) var(--e5); color: var(--ink2); }
.vacio .q { display: block; font-size: var(--t-g); font-weight: 600; color: var(--ink);
            margin-bottom: var(--e2); }
.vacio .v { display: block; max-width: 52ch; margin: 0 auto var(--e5); }

/* Un código que hay que teclear o leer en voz alta: separado y grande. */
.codigo { font-size: var(--t-g); font-weight: 700; letter-spacing: .12em;
          background: var(--panel-2); border: 1px solid var(--linea);
          padding: var(--e2) var(--e4); border-radius: var(--r-s); }

/* Un formulario de una sola columna: cambiar la contraseña, un dato suelto. Ancho corto a
   propósito: un campo de 900 px de ancho para escribir seis letras se ve mal y se usa peor. */
.tarjeta.estrecha { max-width: 460px; }
.pila { display: flex; flex-direction: column; gap: var(--e4); }

/* ---------- Secciones plegables ----------------------------------------------------------- */
/* Una tarjeta que se abre bajo demanda. La línea de arriba —título, cuenta y, si la hay, la
   suma— es la primera lectura; la tabla, la lista o el formulario viven dentro y se abren con
   un clic. Van CERRADAS por defecto, siempre: es la regla de la casa (lectura simple, detalle
   bajo demanda). Lo que pide una acción —un borrador sin emitir, una factura sin cobrar— no
   se pliega: se pliega lo que ya está hecho, lo que se cambia una vez al año y lo que se
   consulta de tarde en tarde. Un `open` puesto a mano es una excepción, y se explica al lado.
   Uso: <details class="seccion"><summary>Cobradas <span class="chip">30</span>
        <span class="cifra">250.000 €</span></summary><div class="cuerpo">...</div></details> */
details.seccion { background: var(--panel); border: 1px solid var(--linea);
                  border-radius: var(--r); margin-bottom: var(--e5); box-shadow: var(--sombra); }
details.seccion > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                            gap: var(--e3); flex-wrap: wrap; padding: var(--e4) var(--e6);
                            font-weight: 600; font-size: var(--t-b); border-radius: var(--r); }
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary::after { content: "▾"; margin-left: auto; color: var(--ink3);
                                   font-weight: 400; }
details.seccion[open] > summary::after { content: "▴"; }
details.seccion > summary:hover { background: var(--panel-2); }
details.seccion[open] > summary { border-bottom: 1px solid var(--linea);
                                  border-radius: var(--r) var(--r) 0 0; }
details.seccion > summary .cifra { font-weight: 700; }
details.seccion > summary .pista { font-weight: 400; color: var(--ink2); font-size: var(--t-m); }
details.seccion > .cuerpo { padding: var(--e4) var(--e6) var(--e5); }
details.seccion > .cuerpo > .sub { margin-bottom: var(--e4); }

/* El membrete de la empresa tal como sale impreso. */
.membrete { font-size: var(--t-m); line-height: 1.6; color: var(--ink2);
            border-left: 3px solid var(--linea-2); padding-left: var(--e4); }

/* ---------- Tarjeta de «crear algo» -------------------------------------------------------- */
/* El formulario de dar de alta va plegado. Se usa una vez al día y estaba empujando hacia
   abajo lo que se mira veinte veces: la lista. Abierto ocupa lo mismo que antes; cerrado,
   una línea. */
/* Crear algo: cerrado es un BOTÓN a la derecha; abierto, una tarjeta con el formulario.
   Antes era una franja de lado a lado que ocupaba una fila entera de la pantalla para decir
   «puedes crear una factura». La acción principal va donde se espera —arriba y a la
   derecha— y el formulario aparece cuando se pide. */
details.crear { margin-bottom: var(--e5); }
details.crear > summary { cursor: pointer; list-style: none; display: inline-flex;
                          align-items: center; gap: var(--e2);
                          padding: 9px var(--e5); border-radius: var(--r-s);
                          border: 1px solid var(--marca-fuerte, var(--ink));
                          background: var(--marca-accion, var(--ink));
                          color: var(--marca-txt, #fff);
                          font-weight: 600; font-size: var(--t-m); min-height: 38px;
                          transition: background var(--transicion); }
details.crear > summary::-webkit-details-marker { display: none; }
details.crear > summary::before { content: "＋"; font-weight: 700; }
details.crear > summary:hover { background: var(--marca-fuerte, var(--ink)); }
/* La pista solo cuando está abierto: en el botón sobra, y ahí dentro es donde hace falta. */
details.crear > summary .pista { display: none; }
details.crear:not([open]) { display: flex; justify-content: flex-end;
                            margin-bottom: var(--e4); }
/* Y el cuerpo se esconde a mano cuando está cerrado. Suena redundante —un `<details>` ya
   esconde lo suyo— pero el `display: flex` de la línea de arriba convierte ese cuerpo en un
   elemento de la fila: el navegador lo aplasta contra el borde derecho y sus campos, que
   tienen un ancho mínimo, se salen de la pantalla. En un móvil eso arrastraba la página
   entera de lado por un formulario que ni siquiera se veía. */
details.crear:not([open]) > .cuerpo-crear { display: none; }

/* Dos acciones seguidas van en la misma fila, no una debajo de otra. Cuando una se abre,
   ocupa el ancho entero y la otra se queda a su lado hasta que haya sitio. */
.acciones-pantalla { display: flex; flex-wrap: wrap; justify-content: flex-end;
                     gap: var(--e3); margin-bottom: var(--e4); }
.acciones-pantalla > details.crear { margin-bottom: 0; }
.acciones-pantalla > details.crear[open] { flex: 1 1 100%; }

details.crear[open] { display: block; background: var(--panel);
                      border: 1px solid var(--linea); border-radius: var(--r);
                      box-shadow: var(--sombra); }
details.crear[open] > summary { display: flex; width: 100%; border-radius: var(--r) var(--r) 0 0;
                                border: 0; border-bottom: 1px solid var(--linea);
                                background: var(--panel-2); color: var(--ink);
                                padding: var(--e4) var(--e6); }
details.crear[open] > summary::before { content: "−"; color: var(--marca-legible); }
details.crear[open] > summary:hover { background: var(--panel-2); }
details.crear[open] > summary .pista { display: inline; font-weight: 400; color: var(--ink2);
                                       font-size: var(--t-m); }
details.crear .cuerpo-crear { padding: var(--e5) var(--e6); }

/* ---------- Desplegable de opciones -------------------------------------------------------- */
/* Una sola cosa a la vista por fila; lo demás, al abrirlo. Diez filas con dos formularios
   cada una son un muro de botones, no una pantalla. */
summary.abrir { cursor: pointer; color: var(--marca-legible); font-size: var(--t-m);
                font-weight: 600; list-style: none; display: inline-block; }
summary.abrir::marker, summary.abrir::-webkit-details-marker { display: none; }
summary.abrir::after { content: " ▾"; color: var(--ink2); }
details[open] > summary.abrir::after { content: " ▴"; }
.opciones { display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e3);
            padding: var(--e3) var(--e4); border: 1px solid var(--linea);
            border-radius: var(--r-s); background: var(--panel-2); }
.opciones form { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.opciones select { width: auto; }

/* ---------- Formulario por pasos ----------------------------------------------------------- */
/* Un formulario largo que rellena alguien que no lo hace todos los días: numerado, con cada
   paso en su bloque. Se usa para pedir una corrección del registro. */
.paso { border: 1px solid var(--linea); border-radius: var(--r); background: var(--panel);
        padding: var(--e5) var(--e6); margin-bottom: var(--e4); }
.paso > h3 { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.paso .n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; flex: none;
           background: var(--marca-accion); color: var(--marca-txt);
           align-items: center; justify-content: center; font-size: var(--t-s); font-weight: 700; }

/* ---------- El rastro de algo ----------------------------------------------------------- */
/* Por dónde ha pasado una cosa y quién firmó cada paso: una factura recibida, una remisión a
   la AEAT, un presupuesto con sus versiones. Se lee de arriba abajo, y de un vistazo se ve
   dónde está parado. No es el `.paso` de un formulario: aquí no se rellena nada, se cuenta
   lo que ya ha ocurrido. El punto lleno dice «hecho», el hueco «todavía no».
   El estado NUNCA va solo por el color: cada línea lleva su texto. */
ol.rastro, ul.rastro { list-style: none; margin: 0; padding: 0; }
.rastro li { position: relative; padding: 0 0 var(--e5) var(--e5);
             border-left: 2px solid var(--linea); }
.rastro li:last-child { border-left-color: transparent; padding-bottom: 0; }
.rastro li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px;
                     height: 12px; border-radius: 50%; background: var(--panel);
                     border: 2px solid var(--linea-2); }
.rastro li.hecho::before { background: var(--ok); border-color: var(--ok); }
.rastro li.falla::before { background: var(--grave); border-color: var(--grave); }
.rastro .q { display: block; font-weight: 700; }
.rastro .m { display: block; color: var(--ink2); font-size: var(--t-s); }

/* Elegir una opción entre varias, con el área de toque entera: se rellena de pie y con prisa. */
ul.elige { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column;
           gap: var(--e2); }
ul.elige label { display: flex; align-items: center; gap: var(--e3); padding: var(--e4);
                 border: 1px solid var(--linea); border-radius: var(--r-s); cursor: pointer;
                 font-size: var(--t-b); color: var(--ink); }
ul.elige label:hover { border-color: var(--marca-borde); background: var(--panel-2); }
ul.elige input { transform: scale(1.25); }

/* Un rango de fechas a mano, dentro de una fila de filtros. Va plegado porque la pregunta
   de verdad son los atajos —«este año», «el año pasado»—: dos campos de fecha ocupando la
   cabecera de la pantalla son dos campos que casi nadie rellena. */
details.otras-fechas > summary { cursor: pointer; list-style: none; padding: 6px 12px;
                                 border-radius: 999px; border: 1px solid var(--linea-2);
                                 font-size: var(--t-m); color: var(--ink2); }
details.otras-fechas > summary::-webkit-details-marker { display: none; }
details.otras-fechas > summary:hover { border-color: var(--ink3); color: var(--ink); }
details.otras-fechas[open] > summary { margin-bottom: var(--e3); }
details.otras-fechas input[type="date"] { width: auto; }

/* Tarjetitas de un vistazo: los últimos días fichados, una obra, un día suelto. */
.minis { display: flex; gap: var(--e3); flex-wrap: wrap; }
.mini { border: 1px solid var(--linea); border-radius: var(--r-s); padding: var(--e3) var(--e4);
        font-size: var(--t-m); min-width: 132px; background: var(--panel); }
.mini .f { font-weight: 700; }
.mini .m { color: var(--ink2); }
/* La misma terna que en las métricas y en los vacíos —rótulo, cifra, aclaración—, para que
   una tarjetita y una métrica no se escriban de dos maneras distintas. */
.mini .q { display: block; font-size: var(--t-xs); text-transform: uppercase;
           letter-spacing: .05em; color: var(--ink2); }
.mini .v { display: block; font-weight: 700; font-size: var(--t-g); line-height: 1.2;
           font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini .n { display: block; font-size: var(--t-s); color: var(--ink2); }
.mini.es-aviso { border-color: var(--aviso); background: var(--aviso-suave); }
.mini.es-aviso .v { color: var(--aviso); }
.mini.es-grave { border-color: var(--grave); background: var(--grave-suave); }
.mini.es-grave .v { color: var(--grave); }
.mini.es-ok { border-color: var(--ok); background: var(--ok-suave); }
.mini.es-ok .v { color: var(--ok); }

/* Los accesos del inicio, agrupados como en el menú. */
.grupo-accesos { margin-bottom: var(--e4); }
.grupo-accesos .et { font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
                     text-transform: uppercase; color: var(--ink2); margin-bottom: var(--e2); }
/* Una métrica que lleva a algún sitio: se nota que se puede tocar. */
a.metrica:hover, a.item:hover { border-color: var(--marca-borde); box-shadow: var(--sombra-2); }

/* ---------- Utilidades justas ------------------------------------------------------------- */
.fila { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fila.pegada { gap: var(--e2); }
.derecha { margin-left: auto; }
.apagado { color: var(--ink2); }
.num { font-variant-numeric: tabular-nums; }
.nada { color: var(--ink3); }
.oculto { display: none !important; }

/* ---------- Filtros ------------------------------------------------------------------------ */
/* Los mismos en todas las pantallas que filtran: un año, un estado, un periodo. */
/* ---------- Resumen de una línea ---------------------------------------------------------- */
/* Las cifras de contexto de una pantalla que es una LISTA. Antes iban en cuadros como los de
   un tablero, y ahí no pintaban nada: en una pantalla con treinta y cinco facturas debajo,
   tres cajas de cien píxeles para decir «hay 35 facturas» empujan la lista fuera de la vista
   para contar lo que la lista ya cuenta.
   Los cuadros se quedan donde la cifra ES la pantalla —cobros, el análisis, las nóminas—; en
   una lista, el dato va en una línea y la lista empieza arriba. */
.resumen { display: flex; flex-wrap: wrap; gap: var(--e6); margin-bottom: var(--e5);
           font-size: var(--t-m); color: var(--ink2); }
.resumen strong { font-weight: 700; color: var(--ink); font-size: var(--t-b);
                  font-variant-numeric: tabular-nums; margin-right: var(--e2); }
.resumen .es-aviso strong { color: var(--aviso); }
.resumen .es-grave strong { color: var(--grave); }
.resumen .es-ok strong    { color: var(--ok); }

/* ---------- Filtros: las pestañas de dentro de una pantalla ------------------------------ */
/* Un mando de segmentos: el grupo entero es una pieza y solo una opción está puesta. Antes
   eran píldoras sueltas y la puesta iba del color de la empresa —el mismo del botón de
   «Crear»—, así que un filtro parecía una acción y competía en peso con las pestañas de
   arriba. Un filtro no hace nada: cambia lo que se está mirando, y su sitio en la jerarquía
   está por debajo de las dos cosas.
   La pieza se ajusta a su contenido (`inline-flex`): una barra gris de lado a lado para tres
   palabras sería otra franja compitiendo por la atención. */
.filtros { display: inline-flex; gap: 2px; align-items: center; flex-wrap: wrap;
           background: var(--panel-2); border: 1px solid var(--linea);
           border-radius: var(--r-s); padding: 3px 3px 3px var(--e4);
           margin-bottom: var(--e5); }
.filtros .et { font-size: var(--t-s); color: var(--ink3); margin-right: var(--e2); }
.filtros a { font-size: var(--t-s); padding: 6px var(--e4); border-radius: var(--r-xs);
             text-decoration: none; color: var(--ink2); white-space: nowrap; }
.filtros a:hover { color: var(--ink); }
.filtros a.puesto { background: var(--panel); color: var(--ink); font-weight: 600;
                    box-shadow: var(--sombra); }
/* Los que además llevan un desplegable o una caja de buscar (documentos, nóminas). */
.filtros select, .filtros input { margin: 0 var(--e2); }
.filtros .btn { margin-left: var(--e2); }

/* ---------- Paginación --------------------------------------------------------------------- */
.paginas { display: flex; gap: var(--e5); align-items: center; justify-content: center;
           margin-top: var(--e5); font-size: var(--t-m); color: var(--ink2); }

/* ---------- Impresión ---------------------------------------------------------------------- */
@media print {
  aside, .no-imprimir, .btn { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .tarjeta { border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================================
   El armazón: menú lateral y cuerpo de la página.

   Estaba en la plantilla base, con el resto. Aquí sirve además para las pantallas que no
   heredan de ella (el kiosco de la tablet, los documentos imprimibles): usan los mismos
   tokens y no vuelven a inventarse el aire de la aplicación.
   ========================================================================================== */

/* El fondo del lateral se pinta también en el cuerpo: el `aside` se queda fijo y mide una
   pantalla de alto, así que en una página larga se veía el papel claro por debajo de él.
   Con esto la columna oscura llega hasta abajo sin que el menú tenga que estirarse. */
body.con-menu { display: flex; min-height: 100vh;
                background: linear-gradient(to right, var(--lateral) 232px,
                                            var(--fondo) 232px); }

aside {
  width: 232px; flex: none;
  background: var(--lateral); color: var(--lateral-txt);
  border-right: 1px solid var(--lateral-linea);
  padding: var(--e5) var(--e4);
  display: flex; flex-direction: column;
  /* Se queda quieto y se desplaza por dentro: el pie —quién eres, el modo oscuro, salir— no
     puede desaparecer en cuanto la pantalla tiene contenido. */
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
}
aside nav { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column;
            gap: 2px; }

/* Ojo con el alcance: `marca` y `quien` son palabras que también usan la pantalla de entrada
   y la de la tablet para otra cosa. Estas reglas son las del menú lateral y solo suyas. */

/* La marca, arriba del todo. Con logo va el logo SOLO y a lo ancho de la columna: es la firma
   de la casa y ya dice el nombre; encajado en 32 px con el rótulo al lado no se reconocía.
   Sin logo, el cuadrado del color de la empresa y su nombre. Pinchar lleva a la ficha de la
   empresa (a quien puede editarla) o al inicio, y por eso se ilumina al pasar: es un sitio. */
aside .marca { display: flex; align-items: center; gap: var(--e3);
               margin-bottom: var(--e5); padding: var(--e3); border-radius: var(--r-s);
               text-decoration: none; color: inherit;
               transition: background var(--transicion); }
aside .marca:hover { background: var(--lateral-2); }
aside .marca .punto { width: 32px; height: 32px; border-radius: 8px; background: var(--marca);
                      flex: none; }
/* El logo llega como llega: casi siempre un PNG con su fondo blanco. De día ese blanco se
   funde con el lateral (`multiply` deja ver el fondo a través del blanco). De noche se
   invierte y se gira el tono: los trazos oscuros pasan a claros conservando su color —el
   rojo sigue siendo rojo, más claro—, el blanco del archivo pasa a negro y `screen` lo hace
   desaparecer contra el lateral. Un solo archivo sirve para los dos modos, sin pedirle a
   ningún cliente una versión oscura de su logo. */
aside .marca img.punto { width: 100%; height: auto; max-height: 112px; object-fit: contain;
                         border-radius: 0; background: none; padding: 0;
                         mix-blend-mode: multiply; }
:root[data-tema="oscuro"] aside .marca img.punto { filter: contrast(1.12) invert(1) hue-rotate(180deg);
                                                     mix-blend-mode: screen; }
header img.punto { background: none; object-fit: contain; }
aside .marca strong { font-size: var(--t-b); line-height: 1.2; display: block;
                      color: var(--lateral-txt); }
aside .marca small { display: block; color: var(--lateral-txt-2); font-size: var(--t-xs); }

/* Una sección: icono y nombre. El icono NUNCA va solo —un menú de dibujos obliga a adivinar—
   y el nombre nunca va sin icono: a media distancia se reconoce antes la forma que la
   palabra, y a los dos días se pincha sin leer. */
aside nav a.seccion { display: flex; align-items: center; gap: var(--e3);
                      padding: 9px var(--e3); border-radius: var(--r-s);
                      color: var(--lateral-txt-2); text-decoration: none;
                      font-size: var(--t-m); font-weight: 500;
                      transition: background var(--transicion), color var(--transicion); }
aside nav a.seccion svg { width: 19px; height: 19px; flex: none; fill: none;
                          stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
                          stroke-linejoin: round; }
aside nav a.seccion:hover { background: var(--lateral-2); color: var(--lateral-txt); }
aside nav a.seccion.activa { background: var(--marca); color: var(--marca-txt);
                             font-weight: 600; }

.tema { background: none; border: 0; padding: 0; font: inherit; color: inherit;
        text-decoration: underline; cursor: pointer; }

/* ---------- La franja de arriba ------------------------------------------------------------ */
/* De lado a lado y con su línea: se lee como el marco de la aplicación —dónde buscas, quién
   eres— y no compite con el contenido. Va pegada arriba: buscar es lo que más se hace y no
   puede quedarse atrás al bajar por una tabla de cuarenta filas. */
/* Va de lado a lado de lo que se ve —fuera del ancho de lectura, que es cosa de `.pantalla`—
   y el buscador queda en el centro exacto de la franja. Lo único que la acompaña, el nombre
   de quien está dentro, va posado a la izquierda y no en la fila: así no la descentra. */
.barra { display: flex; align-items: center; justify-content: center; gap: var(--e5);
         background: var(--panel); border-bottom: 1px solid var(--linea);
         padding: var(--e4) var(--e7);
         position: sticky; top: 0; z-index: 20; }
/* Quién está dentro y con qué papel, siempre a la vista. El nombre lleva a la ficha de la
   persona cuando algún módulo encendido la aporta (gancho «nucleo.ficha_personal»). El papel
   va debajo, más pequeño: dice qué puede tocar quien está mirando, y antes vivía abajo a la
   izquierda, lejos de la persona a la que se refiere. */
.barra .yo { position: absolute; left: var(--e7); max-width: 24%; color: var(--ink);
             line-height: 1.2; }
.barra .yo a, .barra .yo > span { color: inherit; text-decoration: none; display: block; }
.barra .yo a:hover .yo-nombre { color: var(--marca-legible); text-decoration: underline; }
.barra .yo .yo-nombre { display: block; font-size: var(--t-m); font-weight: 600;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .yo .yo-rol { display: block; font-size: var(--t-xs); font-weight: 400;
                     color: var(--ink2); white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; }
/* Las tres acciones que no son de ninguna pantalla —tema, ayuda y salir—, agrupadas a la
   derecha y simétricas al nombre de la izquierda, con el buscador centrado entre las dos.
   Antes el tema y salir estaban plegados abajo a la izquierda: había que desplegar un bloque
   para apagar la luz. */
.barra .acciones { position: absolute; right: var(--e6); top: 50%; transform: translateY(-50%);
                   display: flex; align-items: center; gap: var(--e2); }
.barra .acciones .ayuda-boton,
.barra .acciones .boton-barra,
.barra .acciones .tema { width: 34px; height: 34px; padding: 0; border-radius: 50%;
                         display: inline-flex; align-items: center; justify-content: center;
                         color: var(--ink2); border: 1px solid var(--linea-2);
                         background: var(--panel); cursor: pointer; flex: none; }
.barra .acciones svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
                       stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.barra .acciones .ayuda-boton:hover,
.barra .acciones .boton-barra:hover,
.barra .acciones .tema:hover { color: var(--marca-legible); border-color: var(--marca-borde); }
/* En la barra el conmutador es solo icono: el rótulo lo sigue llevando donde haga falta. */
.barra .acciones .tema .tema-texto { position: absolute; width: 1px; height: 1px;
                                     overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.barra .acciones .tema .tema-icono { width: 18px; height: 18px; display: block; }

/* ---------- Las pestañas de la sección ------------------------------------------------------ */
/* Lo primero del contenido, y a propósito: dicen dónde estás y qué más hay al lado sin abrir
   nada. La línea gris recorre el ancho entero —así son una barra y no cinco enlaces sueltos—
   y la activa se marca con un trazo del color de la empresa.
   Subrayado y no pastilla: una pestaña con forma de botón invita a pulsarla esperando que
   haga algo, y esto solo cambia de pantalla. */
/* Las pestañas continúan el blanco de la franja de arriba: buscar y moverse son la misma
   cosa —el marco— y se leen mejor como un solo bloque que como dos rayas sueltas. Debajo
   empieza el papel, y ahí ya está el contenido. */
.pestanas { display: flex; gap: var(--e2); background: var(--panel);
            border-bottom: 1px solid var(--linea);
            padding: var(--e3) calc(var(--e7) - var(--e4));
            overflow-x: auto; }

/* El título a la izquierda y la acción principal a su derecha, como se espera y sin tocar
   ni una plantilla. Se hace con `float`, que es justo para esto —saca el botón del flujo y
   deja que el título ocupe su sitio a la izquierda—; con rejilla había que adivinar en qué
   fila cae cada cosa, y bastaba una pantalla sin subtítulo para que el botón se subiera
   encima del título. Todo lo que viene después baja del todo (`clear`). */
/* Ancho de lectura, no de pantalla: una tabla de siete columnas necesita sitio, y un texto
   de 1.600 px de ancho no se lee. 1.360 es el punto en que caben las tablas del sistema sin
   que los párrafos se conviertan en renglones interminables. El tope va aquí, en el
   contenido, y no en `main`: las dos franjas de arriba (buscador y pestañas) tienen que ir
   de lado a lado de lo que se ve, si no el buscador queda centrado en una columna y no en la
   pantalla, y en un monitor ancho se nota. */
.pantalla { max-width: 1360px; padding: var(--e6) var(--e7) var(--e8); }
.pantalla > details.crear:not([open]) { float: right; margin: 0 0 var(--e4) var(--e5); }
.pantalla > *:not(h1):not(.sub):not(details.crear) { clear: both; }
/* Con cabecera propia (título + acciones a la derecha) el botón no flota: allí ya hay un
   sitio hecho para las acciones y se pisarían. */
.pantalla:has(> .cabecera) > details.crear:not([open]) { float: none; margin-left: 0; }
/* Con la misma forma que el lateral: icono + rótulo, y el que estás mirando en su bloque
   de color. Antes eran palabras sueltas con una rayita debajo, y los dos pisos de la
   navegación —la sección a la izquierda, la pantalla arriba— se leían como dos sistemas
   distintos que hay que aprender por separado. Es uno solo, en dos alturas.
   El icono NUNCA va solo, igual que en el lateral: acompaña al nombre, no lo sustituye. */
.pestanas a { display: inline-flex; align-items: center; gap: var(--e3);
              padding: 7px var(--e4); border-radius: var(--r-s);
              color: var(--ink2); text-decoration: none; font-size: var(--t-m);
              font-weight: 500; white-space: nowrap; letter-spacing: -.005em;
              transition: background var(--transicion), color var(--transicion); }
.pestanas a svg { width: 17px; height: 17px; flex: none; fill: none;
                  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
                  stroke-linejoin: round; }
.pestanas a:hover { background: var(--panel-2); color: var(--ink); }
.pestanas a.activa { background: var(--marca); color: var(--marca-txt); font-weight: 600; }
.pestanas a.activa:hover { background: var(--marca-fuerte); color: var(--marca-txt); }
/* Pestañas DE una pantalla (VeriFactu dentro de Facturas, el registro dentro del control
   horario): la misma forma que las de la sección —que no haya dos maneras de lo mismo—,
   pero dentro del contenido, sin comerse los márgenes ni el fondo de la franja de arriba. */
.pestanas.dentro { margin: 0 0 var(--e5); padding: 0 0 var(--e3); background: none; }

/* ---------- El buscador ------------------------------------------------------------------ */
/* Va arriba del contenido y ocupa lo que puede: una caja estrecha invita a escribir dos
   letras y rendirse. Aquí caben un nombre entero, un número de factura y una dirección. */
.buscador { position: relative; flex: 1 1 auto; max-width: 560px; }
.buscador input { width: 100%; padding: 10px 38px 10px 38px; border-radius: var(--r-s);
                  border: 1px solid var(--linea-2); background: var(--panel);
                  font-size: var(--t-b); color: var(--ink); box-shadow: var(--sombra); }
.buscador input::placeholder { color: var(--ink3); }
.buscador input:focus { outline: 2px solid var(--marca-borde); outline-offset: -1px; }
.buscador input::-webkit-search-cancel-button { cursor: pointer; }
/* La lupa, dibujada con dos formas: no hace falta una fuente de iconos para un círculo y una
   raya. */
.buscador .lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
                  width: 16px; height: 16px; pointer-events: none; fill: none;
                  stroke: var(--ink3); stroke-width: 2; stroke-linecap: round; }
.buscador kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
                font: inherit; font-size: var(--t-xs); color: var(--ink3);
                border: 1px solid var(--linea-2); border-radius: 4px; padding: 0 5px;
                pointer-events: none; background: var(--panel-2); }
.buscador input:focus ~ kbd { display: none; }
.buscador .resultados { position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
                        margin-top: 6px; background: var(--panel);
                        border: 1px solid var(--linea-2); border-radius: var(--r);
                        box-shadow: var(--sombra-2); max-height: 66vh; overflow-y: auto;
                        padding: var(--e3); }
.buscador .resultados .rotulo { font-size: var(--t-xs); text-transform: uppercase;
                                letter-spacing: .06em; color: var(--ink3); font-weight: 700;
                                padding: var(--e3) var(--e3) var(--e1); }
.buscador .resultados a { display: flex; align-items: baseline; gap: var(--e3);
                          padding: 8px var(--e3); border-radius: var(--r-xs);
                          text-decoration: none; color: var(--ink); }
.buscador .resultados a strong { font-size: var(--t-b); font-weight: 600; flex: none;
                                 max-width: 46%; overflow: hidden; text-overflow: ellipsis;
                                 white-space: nowrap; }
.buscador .resultados a span { font-size: var(--t-s); color: var(--ink2); overflow: hidden;
                               text-overflow: ellipsis; white-space: nowrap; }
.buscador .resultados a:hover, .buscador .resultados a.puesto { background: var(--marca-suave);
                                                                color: var(--marca-legible); }
.buscador .resultados a.puesto span { color: var(--marca-legible); }
.buscador .resultados .nada { padding: var(--e4); color: var(--ink2); font-size: var(--t-m); }
.buscador .resultados .pie-ayuda { border-top: 1px solid var(--linea); margin-top: var(--e2);
                                   padding: var(--e3); font-size: var(--t-xs);
                                   color: var(--ink3); display: flex; gap: var(--e4); }

main { flex: 1; min-width: 0; }

/* --- En el móvil -------------------------------------------------------------------------
   Media plataforma se usa de pie y con una mano: fichar en obra, mirar tus horas, pedir una
   corrección. Con el menú lateral fijo, el contenido se quedaba en un palmo de ancho. */
@media (max-width: 780px) {
  body.con-menu { flex-direction: column; background: var(--fondo); }
  /* El lateral pasa a ser una tira horizontal arriba: en el móvil una columna de 232 px se
     come media pantalla. Las secciones se deslizan a lo ancho y el icono ayuda a
     reconocerlas de un vistazo, que es justo para lo que está. */
  aside { width: 100%; border-right: 0; padding: var(--e3) var(--e4);
          position: static; height: auto;
          flex-direction: row; flex-wrap: wrap; align-items: center; }
  aside .marca { flex: 1 1 auto; margin-bottom: 0; padding: 0; }
  aside .marca img.punto { width: auto; max-height: 40px; }
  aside nav { order: 2; flex: 1 1 100%; flex-direction: row; gap: var(--e2);
              overflow-x: auto; padding: var(--e3) 0 var(--e1); }
  aside nav a.seccion { white-space: nowrap; padding: 7px var(--e4);
                        background: var(--lateral-2); }
  .barra { position: static; padding: var(--e3) var(--e5); gap: var(--e3); flex-wrap: wrap; }
  .barra .yo { position: static; flex: 1 1 100%; max-width: none; }
  .barra .acciones { position: static; transform: none; flex: none; }
  .pantalla { padding: var(--e5) var(--e5) var(--e7); max-width: none; }
  .pestanas { gap: var(--e2); padding: var(--e3) var(--e3); }
  h1 { font-size: var(--t-g); }
  /* La tabla se lleva su propio desplazamiento dentro, para que la página no se mueva. */
  .tarjeta > table, .tabla-ancha { display: block; overflow-x: auto; }
}