/* Trajes de /app/, trozo 03 — van tras la hoja base, en el orden en que los enlaza su index. */
/* ==================================================================================================
   EL PIE DE LA BARRA — cuatro maneras de contar lo mismo
   ==================================================================================================
   Es la pieza que el operador mira más veces al día y la que más se separaba de las maquetas: en
   app.css es una TIRA de cifras y las cuatro direcciones la componen de otra forma. 1a, 1b y 1c la
   ponen en rejilla de dos columnas con el saldo aparte; «la callada» la baja a una columna de
   frases, sin cajas, con el motivo del hueco escrito debajo en vez de escondido en un `title`.

   DOS COSAS DE LA MAQUETA QUE NO SE COPIAN, Y CONSTA POR QUÉ:

     · el glifo de estado en cada fila de conversación (cuadro, triángulo, círculo punteado). Una
       conversación de este panel trae título, correo y fecha — NO trae estado. Pintarle uno sería
       inventárselo, que es lo único que este producto no hace.
     · la barra de progreso del saldo. Una barra implica un total, y aquí nadie ha declarado
       presupuesto mensual: el porcentaje de la maqueta es de la maqueta. Se enseña la cifra
       medida y ya.
   ================================================================================================== */

/* 1a · 1c — BALDOSAS en rejilla de dos columnas, que es lo que sus maquetas dibujan de verdad:
   cada estado en su celda con fondo tintado por su color, riel al canto y la CIFRA grande en mono.
   El tinte sale de `color-mix` sobre `--marca` —el token que la clase de estado ya fija— para no
   duplicar la paleta: si un color de estado se corrige, la baldosa lo sigue sola. */
html[data-tema="1a"] .franja,
html[data-tema="1c"] .franja {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px;
}
html[data-tema="1a"] .dato:first-child,
html[data-tema="1c"] .dato:first-child { grid-column: 1 / -1; }
html[data-tema="1a"] .dato,
html[data-tema="1c"] .dato {
  display: flex; justify-content: space-between;
  /* `min-width: 0` no es opcional: un ítem de rejilla tiene `min-width: auto`, así que un valor
     con nowrap («sin cubrir») ensanchaba la baldosa más allá de su columna y el texto salía del
     pie hacia la zona de lectura. Se vio en producción; la rejilla parecía completa. */
  min-width: 0;
  padding: var(--e2);
  background: color-mix(in srgb, var(--marca) 9%, transparent);
  border-left: var(--carril-fino) solid var(--marca);
}
html[data-tema="1c"] .dato { border-radius: var(--r-menudo); }
html[data-tema="1a"] .dato .val,
html[data-tema="1c"] .dato .val {
  font-family: var(--mono); font-size: var(--t-lg); font-weight: 700;
  /* La cifra de una baldosa no parte en dos líneas: «1 mal» a medias se lee como dos datos. Y si
     aun así no cabe («sin cubrir»), se recorta CON puntos suspensivos en vez de salirse de la
     baldosa — el texto completo sigue en el title del dato, que estado.js pone siempre. */
  white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* El saldo no es un estado: baldosa neutra, sin tinte ni riel de color. */
html[data-tema="1a"] .dato:first-child,
html[data-tema="1c"] .dato:first-child { background: none; border-left-color: transparent; padding-left: 0; }

/* 1b — libro mayor: filas con la cifra alineada a la derecha y raya entre ellas, sin baldosas.
   Es lo que su maqueta dibuja; una rejilla de celdas tintadas sería la sala de control en papel. */
html[data-tema="1b"] .franja { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
html[data-tema="1b"] .dato {
  display: flex; justify-content: space-between;
  padding: var(--e2) 0;
  border-bottom: var(--filete) solid var(--linea);
}
html[data-tema="1b"] .dato:last-child { border-bottom: 0; }

/* 1d · LA CALLADA — una columna de frases. Sin rejilla, sin chips, y con el motivo del hueco
   ESCRITO: sangrado bajo su regla punteada, igual que el hueco en el hilo. Es lo que la maqueta
   enseña y, de paso, la única forma de que ese motivo se lea en un teléfono. */
html[data-tema="1d"] .franja {
  display: flex; flex-direction: column; align-items: stretch;
  /* `nowrap` es obligatorio y cuesta verlo: app.css declara `flex-wrap: wrap` sobre `.franja`, y en
     una caja de COLUMNA envolver no crea filas — crea una SEGUNDA COLUMNA a la derecha. Los datos
     que no cabían a lo alto se salían de la barra y aterrizaban sobre la zona de lectura, a 133px
     de distancia. Se cazó midiendo los rectángulos, porque a simple vista parecía un desbordamiento
     de texto y no un cambio de eje. */
  flex-wrap: nowrap;
  gap: var(--e3);
}
/* `display: flex` en vez del `inline-flex` de app.css, y NO es cosmético. Un `inline-flex` se
   dimensiona por su contenido, así que el `flex-basis: 100%` del motivo se resuelve contra un ancho
   que depende del propio motivo: la referencia se vuelve circular, degenera a `max-content` y la
   frase sale de la barra hasta invadir la zona de lectura. Con la caja de bloque, el 100 % se
   resuelve contra la columna y el motivo cae en su propia línea.
   Medido ejecutando: el borde derecho de la nota estaba en 401px con la barra terminando en 268. */
html[data-tema="1d"] .dato { display: flex; justify-content: space-between; flex-wrap: wrap; }
html[data-tema="1d"] .dato::before { display: none; }   /* sin plomo: aquí no hay marcas de color */
html[data-tema="1d"] .dato-nota {
  display: block;
  flex-basis: 100%;
  margin-top: var(--e1);
  padding-left: var(--e3);
  border-left: var(--trazo-punto) dotted currentColor;
  font: 400 var(--t-xs)/var(--lh-md) var(--prosa);
  color: var(--tinta-suave);
}
/* La búsqueda deja de ser una caja rellena y pasa a ser una línea, como en la maqueta: en un traje
   que no tiene cajas, el campo de búsqueda era la última que quedaba. */
html[data-tema="1d"] .buscar-envoltura {
  background: none;
  border: 0; border-bottom: var(--filete) solid var(--linea);
  border-radius: 0;
}


/* ==================================================================================================
   EL CROMO DE LA BARRA — lo que la comparación lado a lado dejó en evidencia
   ==================================================================================================
   El operador puso las capturas juntas y tenía razón: el esqueleto era el mismo y el cromo no
   estaba. La marca, la búsqueda, el botón de nueva y la fila activa son lo que hace que cada
   dirección se reconozca ANTES de leer una sola palabra. */

/* -- la marca. 1a la escribe en mono con tracking de máquina; 1c la engorda; 1b la deja en serif
      (le llega por --prosa). Texto y letra: cero disposición. */
html[data-tema="1a"] .marca {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .22em; font-size: var(--t-md);
}
html[data-tema="1c"] .marca { letter-spacing: var(--track-titulo); font-weight: 700; }

/* -- la búsqueda. 1a y 1c la meten en caja propia sobre fondo hundido con filete; 1b es una línea
      de cuaderno (ya puesta arriba); 1d también línea. Aquí solo piel: fondo, borde, radio. */
html[data-tema="1a"] .buscar-envoltura {
  background: var(--fondo);
  border: var(--filete) solid var(--espina);
  border-radius: var(--r-menudo);
}
html[data-tema="1c"] .buscar-envoltura {
  background: var(--hundida);
  border: var(--filete) solid var(--borde-flotante);
  border-radius: var(--r-chip);
}

/* -- el botón de nueva conversación. En 1a es un control con filete que se enciende de acento al
      pasar; en 1c una pieza llena. En 1b y 1d se queda quieto: sus maquetas lo dejan como texto. */
html[data-tema="1a"] .nueva {
  border: var(--filete) solid var(--espina);
  color: var(--acento);
}
html[data-tema="1a"] .nueva:hover { border-color: var(--acento); background: var(--acento-tenue); }
html[data-tema="1c"] .nueva { background: var(--acento-tenue); color: var(--tinta); }

/* -- la fila activa lleva el acento AL CANTO, como en las cuatro maquetas. `box-shadow` interior y
      no `border-left`: un borde movería el texto 2px al activarse y la lista bailaría. */
html[data-tema="1a"] .conv.activa,
html[data-tema="1b"] .conv.activa,
html[data-tema="1c"] .conv.activa,
html[data-tema="1d"] .conv.activa { box-shadow: inset var(--carril-fino) 0 0 var(--acento); }
html[data-tema="1a"] .conv.activa { border-radius: 2px; }
html[data-tema="1b"] .conv.activa { border-radius: 0; }
/* La hora de la fila, en mono donde el traje mide con mono. */
html[data-tema="1a"] .cuando,
html[data-tema="1c"] .cuando { font-family: var(--mono); }

/* -- el panel de Acciones, la pieza que las cuatro maquetas destacan igual. La base ya lo hace
      panel; aquí cada traje le pone su voz. */
html[data-tema="1a"] .acciones-titulo { border-radius: var(--r-menudo); }
html[data-tema="1a"] .acciones-tit {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--acento);
}
html[data-tema="1b"] .acciones-titulo { border-radius: 0; border-left-width: var(--carril); }
html[data-tema="1c"] .acciones-titulo { border-radius: var(--r-control); }


/* ==================================================================================================
   1e · GUARDIA — LOS COMPONENTES. Aquí es donde la dirección deja de ser una paleta.

   La primera versión de este traje solo recoloreaba y ponía la espina, y el operador lo dijo con
   todas las letras: la maqueta era mejor que lo aplicado. Tenía razón — lo que hace que aquella
   pantalla funcione no es el tono, es la ANATOMÍA de cada pieza: el panel de acciones con su
   borde de sello, el compositor como una sola píldora, las filas con blanco de 44, el bloque de
   confirmar con su escalera. Eso es lo que se porta aquí.

   Todo cuelga de html[data-tema="1e"] a propósito: los otros cuatro trajes están medidos y
   funcionando, y una dirección nueva no puede cobrarse las anteriores.
   ================================================================================================== */

/* -- LA BARRA. Respira más y separa con AIRE antes que con líneas. */
html[data-tema="1e"] .lateral {
  background: var(--superficie);
  border-right: var(--filete) solid var(--linea);
  padding: var(--e3);
  gap: var(--e1);
}
html[data-tema="1e"] .lateral-cab { padding: var(--e2) var(--e2) var(--e4); }
html[data-tema="1e"] .marca { font: 700 var(--t-xl)/1.2 var(--prosa); letter-spacing: -.014em; gap: var(--e2); }
html[data-tema="1e"] .ic-marca { width: 22px; height: 22px; }

/* -- «Conversación nueva»: la ÚNICA acción con caja de toda la barra. Lo demás son destinos, no
      actos, y darles a todos un borde igualaría lo que no es igual. */
html[data-tema="1e"] .nav-item {
  min-height: var(--alto-tactil);
  padding: 0 var(--e3);
  border-radius: var(--r-control);
  font: 400 var(--t-md)/1 var(--prosa);
  gap: var(--e3);
}
html[data-tema="1e"] .nav-item.nueva {
  border: var(--filete) solid var(--borde-flotante);
  font-weight: 600;
  margin-bottom: var(--e1);
}
html[data-tema="1e"] .nav-item:hover { background: var(--hundida); }

/* -- El buscador: un campo con su marco, no un input suelto sobre el fondo. */
html[data-tema="1e"] .buscar-envoltura {
  min-height: var(--alto-tactil);
  padding: 0 var(--e3);
  gap: var(--e2);
  border: var(--filete) solid var(--linea);
  border-radius: var(--r-control);
  background: var(--fondo);
  margin: var(--e1) 0 var(--e2);
}
html[data-tema="1e"] .buscar-envoltura:focus-within { border-color: var(--borde); }
/* 16 px, no --t-md: por debajo de 16, iOS amplía la página al enfocar. El atajo `font:` de
   este traje reescribía el tamaño y le ganaba por especificidad a la regla de app.css, así
   que la corrección tiene que vivir aquí o no vive en ninguna parte. */
html[data-tema="1e"] .buscar-conv { font: 400 16px/1 var(--prosa); }

/* -- ACCIONES: la pieza firmada del traje, y el único sello de toda la barra. Dos líneas —cuántas
      esperan y qué significa— porque un número solo no dice si hay que hacer algo. */
html[data-tema="1e"] .sec-acciones { margin: var(--e2) 0; }
html[data-tema="1e"] .acciones-titulo {
  align-items: flex-start;
  min-height: 0;
  padding: var(--e3);
  border: var(--filete) solid var(--acento);
  border-left-width: var(--carril);
  border-radius: var(--r-control);
  background: var(--acento-tenue);
}
html[data-tema="1e"] .acciones-titulo .ic { color: var(--acento); margin-top: 1px; }
html[data-tema="1e"] .acciones-cuerpo { gap: 2px; }
html[data-tema="1e"] .acciones-tit { font: 700 var(--t-md)/1.35 var(--prosa); color: var(--acento); }
html[data-tema="1e"] .acciones-sub { font: 400 var(--t-2xs)/1.4 var(--prosa); color: var(--tinta-apagada); }
html[data-tema="1e"] .badge-pendientes {
  background: var(--acento); color: var(--acento-tinta);
  font: 700 var(--t-2xs)/1 var(--prosa);
  min-width: 18px; height: 18px; border-radius: 9px;
}

/* -- 1e · ACCIONES EN REPOSO. app.css baja el volumen del panel cuando no hay nada pendiente
      —«cero de verdad no pide atención»— con una regla de :has() que pesa (0,3,0) y le gana a la
      de este traje. No se pisa: se viste. Y en esta dirección encaja mejor que en ninguna, porque
      es literalmente la tesis — el sello aparece SOLO cuando hay algo irreversible esperando, y
      con la bandeja vacía el panel es un destino más. Lo medí creyendo que mi regla no aplicaba;
      aplicaba, y el estado que estaba mirando era el correcto. */
html[data-tema="1e"] .acciones-titulo:has(.acciones-sub[hidden]) {
  border-color: var(--borde-flotante);
  background: transparent;
}
html[data-tema="1e"] .acciones-titulo:has(.acciones-sub[hidden]) .acciones-tit { color: var(--tinta); }
html[data-tema="1e"] .acciones-titulo:has(.acciones-sub[hidden]) .ic { color: var(--tinta-apagada); }

/* -- Filas de conversación: 44 de alto, y la abierta se marca con un filete, no con relleno de
      color — el color aquí significaría algo que no es. */
html[data-tema="1e"] .conv {
  min-height: var(--alto-tactil);
  padding: 0 var(--e3);
  border-radius: var(--r-control);
  font: 400 var(--t-sm)/1 var(--prosa);
}
html[data-tema="1e"] .conv:hover { background: var(--hundida); }
html[data-tema="1e"] .conv.activa {
  background: var(--hundida);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--tinta);
}

/* -- El pie se separa con línea porque cambia de tema: deja de hablar de conversaciones y empieza
      a hablar de ti y del sistema. */
html[data-tema="1e"] .lateral-pie {
  border-top: var(--filete) solid var(--linea);
  padding-top: var(--e2);
  gap: 2px;
}

/* -- EL COMPOSITOR: una sola píldora, no una caja con cosas dentro. */
html[data-tema="1e"] .cajon { padding: var(--e2) var(--e4) var(--e3); }
html[data-tema="1e"] .cajon-linea {
  align-items: flex-end;
  gap: var(--e1);
  padding: var(--e1);
  border: 1.5px solid var(--borde-flotante);
  border-radius: 26px;
  background: var(--superficie);
  transition: border-color var(--dur-entrada) var(--curva-salida);
}
html[data-tema="1e"] .cajon-linea:focus-within { border-color: var(--tinta-apagada); }
html[data-tema="1e"] #entrada-texto {
  padding: 10px var(--e2);
  min-height: var(--alto-tactil);
  /* 16 px por lo mismo que el buscador: menos, y Safari amplía al enfocar. Es el campo donde
     más se teclea, así que era el que peor efecto tenía. */
  font: 400 16px/1.5 var(--prosa);
}
/* Los dos redondos, del mismo tamaño: el «+» callado y el de enviar en tinta plena. Es la ÚNICA
   pieza de la pantalla rellena de color sólido, y por eso se ve sin gritar. */
html[data-tema="1e"] .adjuntar,
html[data-tema="1e"] #enviar.redondo {
  width: var(--alto-tactil); height: var(--alto-tactil);
  border-radius: 50%;
}
html[data-tema="1e"] .adjuntar { background: transparent; color: var(--tinta-apagada); border: 0; }
html[data-tema="1e"] .adjuntar:hover { background: var(--hundida); color: var(--tinta); }
html[data-tema="1e"] #enviar.redondo { background: var(--tinta); color: var(--fondo); border: 0; }
html[data-tema="1e"] .cajon-pie {
  margin-top: var(--e1);
  padding: 0 var(--e2);
  font: 400 var(--t-2xs)/1.4 var(--prosa);
  color: var(--tinta-apagada);
  gap: var(--e3);
}

/* -- LA TARJETA DE ACCIÓN, la pieza más seria de la app. */
html[data-tema="1e"] .tarjeta {
  border: var(--filete) solid var(--borde-flotante);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  overflow: hidden;
}
html[data-tema="1e"] .cadena { gap: var(--e2); padding: var(--e3) var(--e4); }
html[data-tema="1e"] .peldano { font: 400 var(--t-2xs)/1 var(--prosa); color: var(--tinta-apagada); }
html[data-tema="1e"] .peldano.hecho { color: var(--bien); }
html[data-tema="1e"] .peldano.aqui { color: var(--acento); font-weight: 700; }
html[data-tema="1e"] .frase-esperada { font: 400 var(--t-sm)/1.5 var(--prosa); color: var(--tinta-apagada); }
html[data-tema="1e"] .frase-esperada code {
  font-family: var(--mono);
  background: var(--fondo);
  border: var(--filete) solid var(--linea);
  color: var(--tinta);
  padding: 2px 6px; border-radius: var(--r-menudo);
}
html[data-tema="1e"] .confirmar input[type="text"] {
  /* Y aquí más que en ningún sitio: es donde se teclea una frase que ejecuta algo irreversible,
     y una página que salta de zoom a mitad de esa frase es lo último que se quiere. */
  font: 400 16px/1 var(--mono);
  min-height: var(--alto-tactil);
  border: 1.5px solid var(--borde-flotante);
  border-radius: var(--r-control);
  background: var(--fondo);
}


/* ==================================================================================================
   LA COMPOSICIÓN EN PANTALLA GRANDE
   ==================================================================================================
   Aquí va SOLO lo que app.css también declara arriba y que los trajes pisan abajo. Sin esta parte,
   la regla del traje —que pesa más— se aplicaría también en escritorio y dejaría la burbuja con las
   medidas del teléfono en una pantalla de 1280. Es el fallo que la prohibición evitaba a lo bruto y
   que ahora se evita escribiendo las dos mitades.
   ================================================================================================== */
@media (min-width: 48em) {

  /* -- 1e · LA DEUDA DE LA CAPA GRANDE, pagada. Todo lo que este traje fija abajo y app.css
        vuelve a fijar en @media 48em tiene que volver a decirse aquí, o el escritorio recupera
        el valor del armazón y la dirección se deshace solo en pantalla ancha. Es el fallo más
        silencioso que puede tener un traje —se ve bien en el teléfono y mal en el portátil— y por
        eso la suite lo persigue propiedad por propiedad. Los valores son los mismos: esta
        dirección quiere la misma anatomía en los dos tamaños, y lo que cambia es el aire. */
  html[data-tema="1e"] .ic-marca { width: 22px; height: 22px; }
  html[data-tema="1e"] .nav-item { padding: 0 var(--e3); gap: var(--e3); }
  html[data-tema="1e"] .buscar-envoltura { padding: 0 var(--e3); margin: var(--e1) 0 var(--e2); }
  html[data-tema="1e"] .badge-pendientes { min-width: 18px; height: 18px; }
  html[data-tema="1e"] .lateral-pie { gap: 2px; }
  html[data-tema="1e"] .cajon { padding: var(--e2) var(--e5) var(--e3); }
  html[data-tema="1e"] .cajon-linea { padding: var(--e1); }
  /* La burbuja se estrecha con el ancho: 48ch en el teléfono es casi toda la columna, y arriba
     sería una línea larguísima. app.css la fija aquí en 72%, así que hay que volver a decirlo. */
  html[data-tema="1e"] .turno.humano .cuerpo { max-width: 42ch; }
  /* El hilo respira más arriba: con la barra superior ocupando 56, el aire de móvil deja el
     primer turno pegado al filete. */
  html[data-tema="1e"] .tiempo { padding: var(--e6) var(--e5) var(--e5); }
  /* 1e — la burbuja, también arriba. Esta línea decía `padding: 0` de cuando la dirección no
     tenía burbuja; al devolverla, se quedó comiéndose el relleno en escritorio y la caja
     colapsaba a un filete pegado al texto. Se veía en el portátil y no en el teléfono, que es
     exactamente el fallo que la deuda de esta capa provoca cuando se paga mal. */
  html[data-tema="1e"] .turno.humano .cuerpo { padding: var(--e3) var(--e4); }

  html[data-tema="1a"] .turno.humano .cuerpo { max-width: 72%; padding: 11px var(--e4); }
  html[data-tema="1b"] .turno.humano .cuerpo { max-width: 72%; padding: 11px var(--e4); }
  html[data-tema="1c"] .turno.humano .cuerpo { max-width: 72%; padding: 13px var(--e4); }
  /* 1d no tiene burbuja que estrechar: su mensaje es prosa y ocupa la columna entera en las dos
     pantallas. Se repite el valor a propósito, para que el par (selector, propiedad) exista en las
     dos mitades y la suite pueda comprobarlo en vez de tener que confiar. */
  html[data-tema="1d"] .turno.humano .cuerpo { max-width: 100%; padding: 0; }

  /* La franja de la sala de control. app.css la ENCOGE aquí arriba —de 12.5px a 11.5px— porque en
     pantalla grande caben más datos y la barra es estrecha. La regla de traje que agranda la cifra
     pesa más y se quedaba con la del teléfono en las dos pantallas: la cifra salía igual de grande
     a 375 que a 1280, y la escala, que es toda la idea de esta dirección, no existía arriba.
     Lo cazó la suite en cuanto la prohibición se sustituyó por esta comprobación. */
  html[data-tema="1c"] .dato .val { font-size: var(--t-lg); }
  /* La baldosa de 1a mide con la misma cifra grande, y le aplica la misma obligación: app.css
     encoge `.dato .val` aquí arriba, así que el traje lo reescribe en las dos mitades. */
  html[data-tema="1a"] .dato .val { font-size: var(--t-lg); }
  /* Y la marca igual: app.css la redimensiona en pantalla grande. La mono con tracking ancho pide
     un punto menos que la sans para ocupar lo mismo. */
  html[data-tema="1a"] .marca { font-size: var(--t-sm); }
}


/* ==================================================================================================
   EL SELECTOR — vive en el pie de la barra, junto al saldo
   ==================================================================================================
   Es un `<select>` nativo a propósito: en un teléfono abre la rueda del sistema, se alcanza con
   teclado sin que nadie escriba una sola tecla de gestión de foco, y funciona con el script muerto
   —al recargar, tema.js lee lo guardado antes de pintar y el traje ya está puesto—. Un menú propio
   habría sido más bonito y peor.
   ================================================================================================== */
.tema-sel {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--alto-tactil);
  padding: 0 var(--e2);
  color: var(--tinta-apagada);
  font: 500 var(--t-2xs)/var(--lh-2xs) var(--prosa);
  text-transform: uppercase; letter-spacing: var(--track-micro);
}
.tema-etq { flex: none; cursor: pointer; }
.tema-sel select {
  flex: 1; min-width: 0;
  height: var(--alto-control);
  padding: 0 var(--e2);
  border: var(--filete) solid var(--linea);
  border-radius: var(--r-menudo);
  background: var(--hundida);
  color: var(--tinta);
  /* 16px reales: por debajo, iOS hace zoom al enfocar un control y descoloca la página entera. */
  font: 500 max(16px, var(--t-sm))/1.2 var(--prosa);
  cursor: pointer;
}
.tema-sel select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; box-shadow: var(--halo); }

@media (min-width: 48em) {
  /* En pantalla grande el control puede encogerse: hay cursor, y el zoom de iOS no existe. */
  .tema-sel select { height: 28px; font: 500 var(--t-sm)/1.2 var(--prosa); }
  .tema-sel { min-height: 0; }
}

/* -- 1e · el desconocido: FILETE DISCONTINUO alrededor. Las otras cuatro direcciones ya usan la
      trama diagonal (1a), el tachado del sello (1b), el anillo hueco (1c) y el sangrado al margen
      (1d); ésta usa el trazo cortado, que es como se dibuja en un plano lo que todavía no está
      confirmado. Se ve en una captura en gris, que es la condición: en un traje que reserva el
      color para lo irreversible, la señal del «no se pudo comprobar» no puede ser un tono. */
html[data-tema="1e"] .insignia.desconocido,
html[data-tema="1e"] .insignia.est-desconocido {
  border: var(--filete) dashed var(--desconocido);
  border-style: dashed;
  background: transparent;
  color: var(--desconocido);
}
html[data-tema="1e"] .dato.desconocido .val {
  border-bottom: var(--trazo-punto) dashed var(--desconocido);
  border-style: none none dashed none;
}

/* -- 1e · el bloque de confirmar. Es el control más serio de la app y en esta dirección es el
      ÚNICO sitio con sello: el filete se tiñe de rojo mientras la acción está pendiente, y el
      resto de la pantalla se queda en tinta. Que el rojo aparezca aquí y en ningún otro lado es
      toda la tesis del traje en una pieza. El botón NO cambia: quien valida la frase es el
      servidor, y un candado del lado del cliente parecería autorización sin serlo. */
html[data-tema="1e"] .confirmar {
  border-left: var(--carril) solid var(--acento);
  padding-left: var(--e4);
  background: transparent;
}
html[data-tema="1e"] .confirmar .conf-barra > span { background: var(--acento); }