/* ==========================================================================
   Panel de WSC · app.css
   La composición de la app sobre el sistema de marca: los valores son los de valores.css y los
   componentes, los de componentes.css (copiados por traer-sistema.py, sin tocar). Aquí solo hay
   lo que la app añade: el armazón (carril, cabecera, página), las vistas (tabla comercial,
   tablero, ficha) y algunas piezas pequeñas reescritas a partir de las páginas del sistema
   (s-08: desplegable y mensajes; s-34: la página junto al carril; s-21: botón de icono).
   Reglas: solo roles y tokens; radio 4 (2 en piezas de menos de 12); filetes de 1; sin sombras;
   anchos con @container (ventana: la pantalla; pagina: el lienzo junto al carril), cortes 640 y
   1024. Claro y oscuro salen solos de los roles.
   ========================================================================== */

/* ---- 0. Lo que no se ve ---- */
.app-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.saltar-contenido {
  position: absolute;
  z-index: 60;
  inset-block-start: var(--e-8);
  inset-inline-start: var(--e-8);
  padding: var(--e-8) var(--e-16);
  border-radius: var(--r);
  background: var(--accion);
  color: var(--accion-texto);
  text-decoration: none;
  translate: 0 -200%;
}
.saltar-contenido:focus { translate: 0 0; }
.app-sin-js { margin: var(--e-24); }

/* ---- 1. Armazón: cabecera, carril, lienzo y barra de navegación ---- */
html { background: var(--fondo); }
body { display: flex; flex-direction: column; min-block-size: 100dvh; }
.app-marco { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
.app-lienzo { min-inline-size: 0; }
.app-pagina { display: flex; flex-direction: column; min-block-size: calc(100dvh - var(--alto-cabecera) - var(--trazo)); }
.app-pagina:focus { outline: none; }
.app-contenido { min-inline-size: 0; }

/* El carril: desde 640 de pantalla, pegado bajo la cabecera y a su alto; abajo, Novedades y
   Ajustes tras un filete (la composición de s-34). En S, la barra de navegación. */
.app-carril { display: none; }
@container ventana (min-width: 640px) {
  .app-marco { grid-template-columns: auto minmax(0, 1fr); }
  .app-carril {
    display: flex;
    position: sticky;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--alto-cabecera) + var(--trazo));
    block-size: calc(100dvh - env(safe-area-inset-top, 0px) - var(--alto-cabecera) - var(--trazo));
    overflow-y: auto;
  }
}
.app-carril .carril-destinos { flex: none; }
.app-carril .carril-nombre { letter-spacing: -0.01em; }
.app-carril-pie { margin-block-start: auto; border-block-start: var(--trazo) solid var(--linea); }
body[data-sin-sesion] :is(.app-carril, .barra-navegacion, .app-cabecera) { display: none; }
body[data-sin-sesion] .app-marco { grid-template-columns: minmax(0, 1fr); }
body[data-sin-sesion] .app-pagina { min-block-size: 100dvh; }

/* Lo que flota (los avisos) salta lo que ocupa el lado: aquí el carril (80, contrato del
   componente), no el menú de 256 de la herramienta del sistema (--menu-visible desde 1280). */
@container ventana (min-width: 1280px) {
  html:not([data-menu="cerrado"]) body { --menu-visible: 0px; --menu-fijo: 0; }
}
@container ventana (min-width: 640px) {
  .aviso-flotante { --af-lado: calc(80px + env(safe-area-inset-left, 0px)); }
}
/* Dentro de la hoja lateral (que se traslada), el aviso se coloca en su caja */
.hoja-lateral > .aviso-flotante { --af-lado: 0px; }

/* La cabecera de producto: el buscador abre la paleta (es un botón con cara de campo) */
.app-cabecera .barra-superior-fin { min-inline-size: 0; }
.app-buscar-campo {
  inline-size: 100%;
  margin: 0;
  font: inherit;
  text-align: start;
  cursor: pointer;
  border-color: var(--linea-2);
}
.app-buscar-texto {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  font-size: var(--t-menor);
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-buscar-campo:focus-visible { outline: var(--trazo-foco) solid var(--foco); outline-offset: calc(-1 * var(--trazo)); border-color: var(--foco); }
.app-avatar { font-family: var(--f-haas); }
.app-avatar-iniciales {
  font-size: var(--t-nota);
  line-height: 16px;
  font-weight: var(--p-medio);
  letter-spacing: 0.02em;
  color: var(--texto);
}
.app-boveda-mando { display: contents; }
.app-boveda-boton[data-estado="abierta"] { color: var(--accion); border-color: var(--accion); }

/* La entrada (sin sesión) y el arranque */
.app-arranque { padding: var(--e-24) var(--margen); }
.app-entrada { flex: 1 1 auto; display: grid; place-items: center; padding: var(--e-48) var(--margen); }
.app-entrada-caja {
  display: grid;
  justify-items: start;
  gap: var(--e-16);
  inline-size: min(100%, 440px);
  padding: var(--e-32);
  border: var(--trazo) solid var(--linea);
  border-radius: var(--r);
}
.app-entrada-logo { inline-size: 93px; aspect-ratio: 554.61 / 192; margin-block-end: var(--e-8); }
.app-entrada-titulo { font-size: var(--t-titulo-2); line-height: 1.12; letter-spacing: -0.025em; }
.app-entrada-titulo:focus { outline: none; }
.app-entrada-texto { color: var(--texto-2); }

/* ---- 2. La página de una vista ---- */
/* Las rejillas de la app no crecen con lo que llevan dentro: una tabla ancha o una fila de
   pestañas se deslizan en su caja, nunca la página. */
:is(.app-vista, .app-resultados, .app-seccion, .app-panel, .app-ficha-seccion, .app-form, .app-tablero-marco, .app-ficha .hoja-lateral-cuerpo, .dialogo-cuerpo) {
  grid-template-columns: minmax(0, 1fr);
}
.app-vista {
  display: grid;
  gap: var(--e-16);
  align-content: start;
  padding: var(--e-24) var(--margen) var(--e-48);
  min-inline-size: 0;
}
.app-vista-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-12) var(--e-24); }
.app-vista-titulos { display: grid; gap: var(--e-4); min-inline-size: 0; }
.app-vista-titulo {
  margin: 0;
  font-size: var(--t-titulo-2);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: var(--p-normal);
}
.app-vista-titulo:focus { outline: none; }
.app-vista-sub { color: var(--texto-2); font-size: var(--t-menor); line-height: 20px; }
.app-vista-acciones { display: flex; flex-wrap: wrap; gap: var(--e-8); }
.app-pestanas { margin-block-start: calc(-1 * var(--e-4)); }
.app-resultados { display: grid; gap: var(--e-16); min-inline-size: 0; }

/* Barra de herramientas de una lista: vista guardada, filtros, búsqueda y cuenta */
.app-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8) var(--e-12); }
.app-herramientas[hidden] { display: none; }
.app-herramientas-grupo { display: flex; flex-wrap: wrap; gap: var(--e-8); }
.app-buscar-vista { flex: 1 1 220px; max-inline-size: 360px; }
.app-cuenta { margin-inline-start: auto; color: var(--texto-2); font-size: var(--t-nota); line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-boton-filtro[data-activo] { --b-borde: var(--accion); color: var(--accion); }
.app-boton-vista { --b-borde: var(--linea-2); }
.app-menu-chevron { margin-inline-start: calc(-1 * var(--e-4)); }
.app-filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8) var(--e-12); }
/* En S, la vista y los filtros en una sola fila que se desliza (como los chips que deslizan) */
@container pagina (max-width: 639px) {
  .app-herramientas-grupo {
    flex-wrap: nowrap;
    max-inline-size: calc(100% + 2 * var(--margen));
    margin-inline: calc(-1 * var(--margen));
    padding: var(--e-4) var(--margen);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .app-herramientas-grupo::-webkit-scrollbar { display: none; }
  .app-herramientas-grupo .menu-emergente { flex: none; }
  .app-buscar-vista { flex-basis: 100%; max-inline-size: none; }
  .app-cuenta { display: none; }
}
.app-filtros-activos[hidden] { display: none; }

/* Las cifras de arriba: densas, en una fila (dos por fila en S) */
.app-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: var(--trazo) solid var(--linea); }
.app-cifras[hidden] { display: none; }
.app-cifra-bloque { display: grid; gap: var(--e-4); align-content: start; padding: var(--e-12) var(--e-16) var(--e-12) 0; min-inline-size: 0; }
.app-cifra-bloque + .app-cifra-bloque { padding-inline-start: var(--e-16); border-inline-start: var(--trazo) solid var(--linea); }
.app-cifra-bloque:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
.app-cifra-bloque:nth-child(n + 3) { border-block-start: var(--trazo) solid var(--linea); }
.app-cifra-bloque .t-rotulo { color: var(--texto-2); }
.app-cifra-valor { font-size: var(--t-titulo-3); line-height: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-cifra-pie { color: var(--texto-2); font-size: var(--t-nota); line-height: 16px; }
.app-cifra-bloque[data-aviso] .app-cifra-valor { color: var(--aviso-texto); }
@container pagina (min-width: 640px) {
  .app-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-cifra-bloque:nth-child(3) { padding-inline-start: var(--e-16); border-inline-start: var(--trazo) solid var(--linea); }
  .app-cifra-bloque:nth-child(n + 3) { border-block-start: 0; }
}

/* ---- 3. Tablas de trabajo ---- */
/* Lo que se desliza es el bloque de sus posicionados: un texto para el lector (.solo-lector, en
   absolute) de la última columna no puede ensanchar la página. */
.tabla-desborde, .desborde, .app-tablero { position: relative; }
.app-resultados .tabla-desborde { min-inline-size: 0; }
.tabla--datos tbody tr[data-id] { cursor: pointer; }
.tabla--datos tbody tr[data-activa] { --ta-bg: var(--capa); }
.tabla--datos tbody tr[data-activa] > :first-child::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--trazo);
  background: var(--accion);
}
.tabla--datos tbody tr > :first-child { position: relative; }
.app-fila-enlace { color: var(--texto); text-decoration: none; }
.app-fila-enlace:focus-visible { outline-offset: 2px; }
.app-enlace-celda { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.app-celda-dos { display: inline-grid; gap: 0; min-inline-size: 0; max-inline-size: 100%; line-height: 20px; }
.app-celda-dos > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-celda-principal { color: var(--texto); }
.app-celda-apoyo { color: var(--texto-2); font-size: var(--t-nota); line-height: 16px; }
.app-celda-num { justify-items: end; }
.app-celda-vacia { color: var(--texto-3); }
.app-cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-fila-acciones { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--e-4); }
.app-col-acciones { inline-size: 1%; white-space: nowrap; text-align: end; }
.app-tabla-comercial .app-col-cliente { min-inline-size: 220px; max-inline-size: 360px; }
.app-tabla-comercial .app-col-cliente .app-celda-dos { max-inline-size: 360px; }
.app-fila-apagada > :not(.app-col-acciones) { color: var(--texto-3); }
.tabla--datos tbody.app-grupo + tbody.app-grupo .app-grupo-cab > th { padding-block-start: var(--e-24); }
.app-grupo-cab > th {
  position: static;
  padding-block: var(--e-12) var(--e-8);
  border-block-end-color: var(--linea-2);
  background: none;
  cursor: default;
}
.app-grupo-nombre { color: var(--texto); font-size: var(--t-menor); font-weight: var(--p-medio); letter-spacing: -0.01em; text-transform: none; }
.app-grupo-cuenta { margin-inline-start: var(--e-8); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.app-fila-detalle > td { padding-block: 0 var(--e-12); white-space: normal; }
.app-lista-docs { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; color: var(--texto-2); font-size: var(--t-nota); line-height: 20px; }
.app-desplegar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.app-desplegar .i { color: var(--texto-2); rotate: -90deg; transition: rotate var(--m-t3) var(--m-ui); }
.app-desplegar[aria-expanded="true"] .i { rotate: 0deg; }

/* La lista es su propio contenedor: con la ficha acoplada se estrecha y deja columnas, que
   siguen en la ficha. Por debajo de 640, lo esencial. */
.app-resultados { container: lista / inline-size; }
@container lista (max-width: 1039px) {
  .app-tabla-comercial .app-col-negocio { display: none; }
}
@container lista (max-width: 799px) {
  .app-tabla-comercial .app-col-validez { display: none; }
  .app-tabla-entregables .app-col-formato { display: none; }
}
/* En el teléfono (lista de menos de 640), cada fila es una tarjeta: número e importe,
   cliente y título, y debajo estado, lectura y validez con las acciones. Sin deslizar en
   horizontal ni columnas cortadas. La cabecera queda para los lectores de pantalla. */
@container lista (max-width: 639px) {
  :is(.app-tabla-comercial, .app-tabla-entregables) :is(table, tbody) { display: block; inline-size: 100%; }
  :is(.app-tabla-comercial, .app-tabla-entregables) thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :is(.app-tabla-comercial, .app-tabla-entregables) tbody tr[data-id] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-4) var(--e-8);
    padding: var(--e-12) var(--ta-lado);
    border-block-end: var(--trazo) solid var(--linea);
    background: var(--ta-bg, transparent);
  }
  :is(.app-tabla-comercial, .app-tabla-entregables) tbody tr[data-id] > :is(th, td) {
    display: block;
    block-size: auto;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .app-tabla-comercial tbody tr[data-id] > .app-col-importe { order: 1; margin-inline-start: auto; }
  .app-tabla-comercial tbody tr[data-id] > .app-col-cliente { order: 2; flex: 1 1 100%; min-inline-size: 0; }
  .app-tabla-comercial tbody tr[data-id] > .app-col-estado { order: 3; }
  .app-tabla-comercial tbody tr[data-id] > :is(.app-col-lectura, .app-col-validez) { order: 4; }
  .app-tabla-comercial tbody tr[data-id] > .app-col-negocio { display: none; }
  .app-tabla-comercial tbody tr[data-id] > .app-col-acciones { order: 5; inline-size: auto; margin-inline-start: auto; }
  .app-tabla-entregables tbody tr[data-id] > td:nth-child(2) { order: 1; flex: 1 1 100%; min-inline-size: 0; }
  .app-tabla-entregables tbody tr[data-id] > .app-col-formato { display: none; }
  .app-tabla-entregables tbody tr[data-id] > td:nth-child(4) { order: 2; }
  .app-tabla-entregables tbody tr[data-id] > :is(.app-col-lectura, .app-col-fecha) { order: 3; }
  .app-tabla-entregables tbody tr[data-id] > .app-col-acciones { order: 4; inline-size: auto; margin-inline-start: auto; }
  .app-tabla-entregables tbody .app-grupo-cab { display: block; }
  .app-tabla-entregables tbody .app-grupo-cab > th { display: flex; align-items: center; gap: var(--e-8); block-size: auto; padding-block: var(--e-12) var(--e-8); }
  :is(.app-tabla-comercial, .app-tabla-entregables) tbody .app-celda-dos { min-inline-size: 0; }
  :is(.app-tabla-comercial, .app-tabla-entregables) tbody :is(.app-celda-principal, .app-celda-apoyo) { white-space: normal; overflow-wrap: anywhere; }
}
}

/* ---- 4. Etiquetas de estado, señales y botón de icono ---- */
.app-etiqueta[data-tono="verde"] { background: var(--etq-verde-fondo); color: var(--etq-verde-texto); }
.app-etiqueta[data-tono="indigo"] { background: var(--etq-indigo-fondo); color: var(--etq-indigo-texto); }
.app-etiqueta[data-tono="azul"] { background: var(--etq-azul-fondo); color: var(--etq-azul-texto); }
.app-etiqueta[data-tono="ciruela"] { background: var(--etq-ciruela-fondo); color: var(--etq-ciruela-texto); }
.app-etiqueta[data-tono="bronce"] { background: var(--etq-bronce-fondo); color: var(--etq-bronce-texto); }
.app-etiqueta[data-tono="neutro"] { background: var(--etq-neutro-fondo); color: var(--etq-neutro-texto); }
/* «Enlace retirado»: no es un estado, es una marca junto a él (el cliente ya no puede abrirlo) */
.app-etiqueta[data-tono="rojo"] { background: var(--error-fondo); color: var(--error-texto); }
.app-estado-y-marca { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.app-etiquetas { display: inline-flex; flex-wrap: wrap; gap: var(--e-4); }

/* El estado en la fila: una etiqueta que se pulsa (abre el menú de estados) */
.app-etiqueta-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  block-size: 24px;
  padding: 0 var(--e-8);
  border: var(--trazo) solid transparent;
  border-radius: var(--r);
  font: inherit;
  font-size: var(--t-nota);
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--m-t2) var(--m-ui);
}
.app-etiqueta-boton[data-tono="verde"] { background: var(--etq-verde-fondo); color: var(--etq-verde-texto); }
.app-etiqueta-boton[data-tono="indigo"] { background: var(--etq-indigo-fondo); color: var(--etq-indigo-texto); }
.app-etiqueta-boton[data-tono="azul"] { background: var(--etq-azul-fondo); color: var(--etq-azul-texto); }
.app-etiqueta-boton[data-tono="ciruela"] { background: var(--etq-ciruela-fondo); color: var(--etq-ciruela-texto); }
.app-etiqueta-boton[data-tono="bronce"] { background: var(--etq-bronce-fondo); color: var(--etq-bronce-texto); }
.app-etiqueta-boton[data-tono="neutro"] { background: var(--etq-neutro-fondo); color: var(--etq-neutro-texto); }
@media (hover: hover) { .app-etiqueta-boton:hover { border-color: currentColor; } }
.app-etiqueta-boton[aria-expanded="true"] { border-color: currentColor; }

/* El estado en la ficha: el botón secundario con un cuadro del color de su estado delante */
.app-menu-estado::before {
  content: "";
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--r-s);
  background: var(--etq-neutro-texto);
}
.app-menu-estado[data-tono="verde"]::before { background: var(--etq-verde-texto); }
.app-menu-estado[data-tono="indigo"]::before { background: var(--etq-indigo-texto); }
.app-menu-estado[data-tono="azul"]::before { background: var(--etq-azul-texto); }
.app-menu-estado[data-tono="ciruela"]::before { background: var(--etq-ciruela-texto); }
.app-menu-estado[data-tono="bronce"]::before { background: var(--etq-bronce-texto); }

/* La lectura: icono de 16 y palabra; el detalle, debajo */
.app-senal { display: inline-grid; gap: 0; line-height: 20px; min-inline-size: 0; }
.app-senal-linea { display: inline-flex; align-items: center; gap: var(--e-4); white-space: nowrap; }
.app-senal-icono { color: var(--texto-3); }
.app-senal[data-nivel="abierta"] .app-senal-icono { color: var(--exito-icono); }
.app-senal[data-nivel="tocada"] .app-senal-icono { color: var(--aviso-icono); }
.app-senal[data-nivel="nada"] { color: var(--texto-2); }
.app-senal-detalle { color: var(--texto-2); font-size: var(--t-nota); line-height: 16px; white-space: nowrap; }
.app-texto-aviso { color: var(--aviso-texto); }
.app-texto-error { color: var(--error-texto); }

/* Botón de solo icono (el de la barra de herramientas, s-21): 40 × 40 sin contorno; --s, 32 */
.app-icono-boton {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--alto-s);
  block-size: var(--alto-s);
  margin: 0;
  padding: 0;
  border: var(--trazo) solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--m-t2) var(--m-ui), color var(--m-t2) var(--m-ui);
}
.app-icono-boton--s { inline-size: 32px; block-size: 32px; }
@media (hover: hover) { .app-icono-boton:hover { background: var(--capa); color: var(--texto); } }
.app-icono-boton:active { background: var(--linea); color: var(--texto); }
.app-icono-boton:active > .i { translate: 0 1px; }
.app-icono-boton[aria-expanded="true"] { background: var(--capa); color: var(--texto); border-color: var(--texto); }
@media (any-pointer: coarse) {
  .app-icono-boton::after { content: ""; position: absolute; inset: -2px; }
  .app-icono-boton--s::after { inset: -6px; }
}

/* ---- 5. El tablero por estado ---- */
.app-tablero-marco { display: grid; gap: var(--e-12); min-inline-size: 0; }
.app-tablero {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(216px, 1fr);
  gap: var(--e-12);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block-end: var(--e-8);
  scroll-snap-type: x proximity;
}
.app-columna {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--e-8);
  min-inline-size: 0;
  padding: var(--e-8);
  border: var(--trazo) solid var(--linea);
  border-radius: var(--r);
  background: var(--hundido);
  scroll-snap-align: start;
  transition: border-color var(--m-t2) var(--m-ui), background-color var(--m-t2) var(--m-ui);
}
.app-columna[data-encima] { border-color: var(--accion); background: var(--capa); }
.app-columna-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-8); padding: var(--e-4) var(--e-4) 0; }
.app-columna-titulo { display: inline-flex; align-items: center; gap: var(--e-8); margin: 0; font-size: inherit; font-weight: inherit; }
.app-columna-suma { color: var(--texto-2); font-size: var(--t-nota); line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-columna-lista { display: grid; gap: var(--e-8); margin: 0; padding: 0; list-style: none; align-content: start; }
.app-columna-vacia {
  display: grid;
  place-items: center;
  min-block-size: 96px;
  border: var(--trazo) dashed var(--linea-2);
  border-radius: var(--r);
  color: var(--texto-3);
  font-size: var(--t-nota);
}
.app-tarjeta {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-12);
  border: var(--trazo) solid var(--linea);
  border-radius: var(--r);
  background: var(--fondo);
  color: var(--texto);
  cursor: pointer;
  transition: border-color var(--m-t2) var(--m-ui);
}
@media (hover: hover) { .app-tarjeta:hover { border-color: var(--linea-control); } }
.app-tarjeta[data-activa] { border-color: var(--accion); }
.app-tarjeta[data-arrastrando] { opacity: .5; }
.app-tarjeta:focus-visible { outline: var(--trazo-foco) solid var(--foco); outline-offset: var(--trazo); }
.app-tarjeta-cab { display: flex; align-items: center; gap: var(--e-8); min-block-size: 32px; }
.app-tarjeta-cab .t-mono { color: var(--texto-2); }
.app-tarjeta-cab .app-cifra { margin-inline-start: auto; font-size: var(--t-menor); }
.app-tarjeta-cab .menu-emergente { margin-inline-end: calc(-1 * var(--e-8)); }
.app-tarjeta-cliente { font-size: var(--t-menor); line-height: 20px; font-weight: var(--p-medio); overflow-wrap: anywhere; }
.app-tarjeta-titulo {
  display: -webkit-box;
  overflow: hidden;
  color: var(--texto-2);
  font-size: var(--t-nota);
  line-height: 16px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.app-tarjeta-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-8); margin-block-start: var(--e-4); font-size: var(--t-nota); line-height: 16px; }

/* ---- 6. La ficha (hoja lateral) ---- */
.app-marco-ficha { flex: 1 1 auto; }
.app-marco-ficha { --hl-ancho: 480px; }
.app-ficha .hoja-lateral-titulo:focus { outline: none; }
.app-ficha .hoja-lateral-contexto { overflow-wrap: anywhere; }
.app-ficha .hoja-lateral-cuerpo { display: grid; align-content: start; gap: var(--e-16); }
.app-ficha-acciones { display: grid; gap: var(--e-8); }
.app-ficha-acciones-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8); }
.app-ficha-acciones-fila > .app-ficha-mas { margin-inline-start: auto; }
.app-ficha-avisos { display: grid; gap: var(--e-8); }
.app-ficha .app-pestanas { margin-block-start: 0; }
/* En la hoja (480) caben las seis pestañas sin deslizar: menos aire entre ellas (el sistema
   pone 32 para filas de página). Si aun así no caben (texto grande), la fila se desliza. */
.app-ficha .fila-pestanas { --fp-separacion: var(--e-8); }
.app-panel { display: grid; gap: var(--e-24); align-content: start; min-inline-size: 0; }
.app-panel:focus { outline: none; }
.app-panel:focus-visible { outline: var(--trazo-foco) solid var(--foco); outline-offset: var(--foco-sep); }
.app-ficha-enlinea { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-16); align-items: start; }
.app-campo-compacto input { min-block-size: var(--alto-s); }
.app-campo-compacto > .ayuda { order: 1; line-height: 16px; }
.app-campo-compacto > :is(.campo-error, .app-campo-accion) { order: 2; }
.app-campo-compacto[data-estado="error"] .ayuda { color: var(--error-texto); }
.app-campo-accion { justify-self: start; font-size: var(--t-nota); }
.app-ficha-seccion { display: grid; gap: var(--e-12); min-inline-size: 0; }
/* Acceso: el enlace y la contraseña, arriba y juntos. Cada dato, su valor y sus botones en una
   fila que baja de línea si no cabe (el enlace largo se queda arriba y los botones, debajo). */
.app-acceso { display: grid; gap: var(--e-8); min-inline-size: 0; }
.app-acceso-titulo { margin: 0; color: var(--texto-2); }
.app-acceso-datos .app-dato { align-items: baseline; }
.app-acceso-datos .app-dato > dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-8); }
.app-acceso-valor { flex: 1 1 auto; min-inline-size: 0; }
.app-acceso-valor[hidden] { display: none; }
.app-acceso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8); }
.app-acceso-datos .app-dato > dd > .app-nota { flex: 1 0 100%; margin: 0; }
.app-acceso-ver { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-4) var(--e-8); }
.app-clave-valor { font-size: var(--t-menor); line-height: 20px; color: var(--texto); user-select: all; overflow-wrap: anywhere; }
.app-clave-cuenta { color: var(--texto-2); font-size: var(--t-nota); font-variant-numeric: tabular-nums; }
.app-tabla-visitas td { white-space: nowrap; }
/* «Desde» (país, navegador, dispositivo, IP) puede bajar de línea: en la hoja lateral no cabe entera */
.app-tabla-visitas td:nth-child(3) { white-space: normal; min-inline-size: 12ch; }
.app-celda-acciones { inline-size: 1%; text-align: end; }
.app-cita { color: var(--texto-2); font-size: var(--t-menor); line-height: 20px; }
.app-cita q { color: var(--texto); }
.app-romper { overflow-wrap: anywhere; }
.app-lineas { display: grid; gap: var(--e-4); }
.app-prosa { white-space: pre-line; overflow-wrap: anywhere; }

/* Historial */
.app-historial { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: var(--trazo) solid var(--linea); }
.app-historial > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4) var(--e-12);
  padding-block: var(--e-8);
  border-block-end: var(--trazo) solid var(--linea);
  font-size: var(--t-nota);
  line-height: 20px;
}
.app-historial-cuando { color: var(--texto-2); line-height: 20px; }
.app-historial-que { overflow-wrap: anywhere; }
.app-historial-quien { grid-column: 2; color: var(--texto-2); }

/* ---- 7. Datos, formularios y diálogos ---- */
.app-datos { display: grid; gap: 0; margin: 0; border-block-start: var(--trazo) solid var(--linea); }
.app-dato {
  display: grid;
  grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
  gap: var(--e-12);
  padding-block: var(--e-8);
  border-block-end: var(--trazo) solid var(--linea);
  font-size: var(--t-menor);
  line-height: 20px;
}
.app-dato > dt { color: var(--texto-2); }
.app-dato > dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
@container pagina (min-width: 640px) {
  .app-datos--columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-32); }
}

.app-form { display: grid; gap: var(--e-16); min-inline-size: 0; }
.app-form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-16); }
.app-form-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-12); }
.app-form-estado { color: var(--texto-2); font-size: var(--t-nota); }
.app-form .campo-error[hidden], .dialogo .campo-error[hidden] { display: none; }
.campo :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--error-borde); }

/* Desplegable: el select nativo con la forma del sistema (de s-08, sin su ámbito) */
.desplegable { position: relative; min-inline-size: 0; }
.desplegable select {
  display: block;
  inline-size: 100%;
  min-block-size: var(--alto-m);
  margin: 0;
  padding: 0 var(--e-48) 0 var(--e-16);
  border: var(--trazo) solid var(--linea-control);
  border-radius: var(--r);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--m-t2) var(--m-ui);
}
.desplegable select:has(> option[value=""]:checked) { color: var(--texto-2); }
.desplegable option { color: var(--texto); background-color: var(--fondo); }
.desplegable-icono { position: absolute; inset-inline-end: var(--e-16); inset-block: 0; margin-block: auto; color: var(--texto-2); pointer-events: none; }
@media (hover: hover) { .desplegable select:hover { border-color: var(--texto); } }
.desplegable select:focus-visible { outline: var(--trazo-foco) solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.tabla .desplegable select { min-block-size: 32px; padding-inline-start: var(--e-8); font-size: var(--t-menor); }

.app-dialogo-error[hidden] { display: none; }
.app-dialogo-descripcion { display: grid; gap: var(--e-8); }
.app-boton--destructivo { --b-fondo: var(--error-borde); --b-borde: var(--error-borde); --b-texto: var(--error-fondo); }
@media (hover: hover) { .app-boton--destructivo:hover { --b-fondo: var(--error-texto); --b-borde: var(--error-texto); } }

/* La paleta (buscador global): arriba, como las de los SaaS */
.app-paleta.dialogo { margin-block-start: var(--e-48); max-block-size: calc(100% - 2 * var(--e-48)); }
.app-paleta .dialogo-cuerpo { padding-block-end: var(--e-16); }
.app-paleta-busqueda .busqueda-campo { border-color: var(--linea-2); }
.app-paleta-lista { display: grid; align-content: start; min-block-size: 120px; margin-inline: calc(-1 * var(--e-24)); }
.app-paleta-op { grid-template-columns: 20px minmax(0, 1fr); padding-inline: var(--e-24); }
.app-paleta-op > .i { grid-row: 1 / span 2; align-self: center; color: var(--texto-2); }
.app-paleta-op > :not(.i) { grid-column: 2; }
.app-paleta-lista .busqueda-grupo-t { padding-inline: var(--e-24); }
.app-paleta-nada { padding: var(--e-16) var(--e-24); color: var(--texto-2); font-size: var(--t-menor); }
.app-paleta-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); color: var(--texto-2); font-size: var(--t-nota); }
@container pagina (max-width: 639px) {
  .app-paleta.dialogo { margin-block-start: var(--e-16); }
  .app-paleta-pie { display: none; }
}

/* ---- 8. Piezas pequeñas ---- */
.app-nota { color: var(--texto-2); font-size: var(--t-nota); line-height: 20px; }
.app-nota--arriba { margin-block-end: calc(-1 * var(--e-8)); }
.app-entradilla { max-inline-size: var(--medida); color: var(--texto-2); }
.app-subtitulo { margin: 0; font-size: var(--t-destacado); line-height: 24px; letter-spacing: -0.015em; font-weight: var(--p-medio); }
.app-seccion { display: grid; gap: var(--e-12); min-inline-size: 0; }
.app-seccion + .app-seccion { margin-block-start: var(--e-16); }
.app-seccion-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-8) var(--e-16); }
.app-fila-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8) var(--e-16); }
.app-fila-botones--fin { justify-content: space-between; }
.app-fila-botones--fin .app-nota { flex: 1 1 280px; }

/* Vacío útil: qué pasa y qué hacer */
.app-vacio {
  display: grid;
  justify-items: start;
  gap: var(--e-8);
  padding: var(--e-32) var(--e-24);
  border: var(--trazo) dashed var(--linea-2);
  border-radius: var(--r);
}
.app-vacio-icono { color: var(--texto-2); }
.app-vacio-titulo { font-size: var(--t-destacado); line-height: 24px; font-weight: var(--p-medio); letter-spacing: -0.015em; }
.app-vacio-texto { max-inline-size: var(--medida); color: var(--texto-2); font-size: var(--t-menor); line-height: 20px; overflow-wrap: anywhere; }
.app-vacio-acciones { display: flex; flex-wrap: wrap; gap: var(--e-8); margin-block-start: var(--e-8); }

/* Carga: los esqueletos del sistema, en una tabla de trabajo o en bloques */
/* El esqueleto de una tabla no puede ensanchar la página (en el teléfono, la página entera se
   alejaría para que cupiera): columnas fijas y recortado a su caja. */
.app-carga .carga-zona { min-inline-size: 0; overflow: hidden; }
.app-carga .tabla { table-layout: fixed; }
.app-carga .tabla--datos td { padding-block: var(--e-12); }
.app-esqueleto-bloques { display: grid; gap: var(--e-16); }
.app-esqueleto-bloque { display: grid; gap: var(--e-8); padding-block: var(--e-12); border-block-start: var(--trazo) solid var(--linea); }

/* Novedades */
.app-novedad[data-leida] .lista-filas-titulo { color: var(--texto-2); }
.app-novedad:not([data-leida]) .lista-filas-titulo { font-weight: var(--p-medio); }
.lista-filas > li:has(> .app-novedad-leer) { position: relative; }
.lista-filas > li:has(> .app-novedad-leer) > .lista-filas-fila { padding-inline-end: var(--e-48); }
.app-novedad-leer { position: absolute; inset-inline-end: var(--e-4); inset-block: 0; margin-block: auto; }

/* La matriz de condiciones */
.app-matriz th, .app-matriz td { white-space: nowrap; }
.app-clausula { min-inline-size: 180px; }
.app-celda-letra { inline-size: 40px; text-align: center; }
.app-letra {
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 16px;
}
.app-letra[data-tipo="base"] { background: var(--etq-verde-fondo); color: var(--etq-verde-texto); }
.app-letra[data-tipo="otra"] { background: var(--etq-bronce-fondo); color: var(--etq-bronce-texto); }
.app-letra[data-tipo="falta"] { color: var(--texto-3); }
.app-leyenda-matriz { display: flex; flex-wrap: wrap; gap: var(--e-8) var(--e-24); color: var(--texto-2); font-size: var(--t-nota); line-height: 24px; }
.app-leyenda-matriz > span { display: inline-flex; align-items: center; gap: var(--e-8); }

/* Medición: los niveles de una visita */
.app-niveles { display: grid; gap: 0; margin: 0; border-block-start: var(--trazo) solid var(--linea); }
.app-niveles > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--e-12); align-items: start; padding-block: var(--e-8); border-block-end: var(--trazo) solid var(--linea); }
.app-niveles dd { margin: 0; font-size: var(--t-menor); line-height: 24px; color: var(--texto-2); }

/* Atajos y teclas */
.app-atajos { display: grid; gap: 0; margin: 0; }
.app-atajos > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--e-12); align-items: center; padding-block: var(--e-8); border-block-end: var(--trazo) solid var(--linea); }
.app-atajos dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.app-atajos dd { margin: 0; font-size: var(--t-menor); line-height: 20px; }
.app-tecla {
  display: inline-block;
  min-inline-size: 24px;
  padding: 0 var(--e-4);
  border: var(--trazo) solid var(--linea-2);
  border-radius: var(--r-s);
  color: var(--texto-2);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
.app-atajo-luego { color: var(--texto-3); font-size: var(--t-nota); }

/* Órdenes para copiar (Ajustes, sin API) y el token que se ve una vez */
.app-comandos { display: grid; gap: var(--e-8); margin: 0; padding: 0; list-style: none; }
.app-comandos > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-4) var(--e-8); align-items: center; padding: var(--e-8) var(--e-12); border: var(--trazo) solid var(--linea); border-radius: var(--r); background: var(--hundido); }
.app-comando-texto { grid-column: 1 / -1; color: var(--texto-2); font-size: var(--t-nota); line-height: 16px; }
.app-comando, .app-token { overflow-wrap: anywhere; user-select: all; }
.app-token { display: block; padding: var(--e-12); border: var(--trazo) solid var(--linea-2); border-radius: var(--r); background: var(--hundido); font-size: var(--t-nota); line-height: 20px; }

/* Preferencias: el tema, con su palabra. «.seg button» (del sistema: cuadrado de 44 con el
   icono centrado) pesa más que una clase sola: aquí, con .seg delante, icono y palabra en
   línea y el alto mínimo de 44. El grupo no se estira a todo el ancho de la sección. */
.app-seg-boton { display: inline-flex; align-items: center; gap: var(--e-8); padding-inline: var(--e-12); font: inherit; font-size: var(--t-nota); }
.seg .app-seg-boton { display: inline-flex; inline-size: auto; block-size: auto; min-block-size: 44px; }
.seg .app-seg-boton[aria-pressed="true"] { background: var(--accion); color: var(--accion-texto); }
.app-seccion > .seg { justify-self: start; }

/* Una tabla dentro de un diálogo (la vista previa del presupuesto de Holded): se desplaza el
   cuerpo entero; la tabla no se encoge a una línea con su total escondido debajo. */
.dialogo-cuerpo > .tabla-desborde { min-block-size: max-content; }

/* Pestañas de contenido (tablist) con el foco por dentro */
.fila-pestanas-panel[hidden] { display: none; }

/* Sin iconos (si no carga el sprite): los botones de solo icono siguen teniendo su nombre */
html[data-sin-iconos] .i { display: none; }

@media print {
  .app-carril, .barra-navegacion, .app-cabecera, .app-herramientas, .app-fila-acciones { display: none !important; }
}