/* Estilo de la pantalla de pedido. Va en su propio fichero, y no en un <style>, para que
   la Content-Security-Policy de `app/_headers` pueda prohibir el estilo en linea. */
  /* Paleta de Fast & Value (la de fastandvalue.com): papel, tinta y ámbar. El acento de las
     acciones es la tinta en los dos modos: oscura en claro, como el bloque del logotipo, y clara en
     oscuro. El ámbar queda SOLO para lo que hay que aclarar: si pinta también botones y enlaces,
     una acción normal parece una advertencia. En claro va en su tono de texto (#835e2a) porque el
     vivo del logotipo (#c08a3e) no llega a 4,5:1 sobre papel; en oscuro el vivo sí llega. */
  :root{
    --fondo:#f2f0ea; --tarjeta:#fffdf8; --tinta:#101a24; --tinta2:#47525d; --raya:#d9d3c6;
    --acento:#101a24; --ambar:#835e2a; --ambar-suave:#f7ecd8; --rojo:#a52218; --rojo-suave:#fae3e1;
    --verde:#1c6b3f;
    --tipo:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root{ --fondo:#0e1520; --tarjeta:#16202c; --tinta:#e7eaee; --tinta2:#9aa4b0; --raya:#2a3543;
           --acento:#e7eaee; --ambar:#c08a3e; --ambar-suave:#2b2008; --rojo:#ef6b5e; --rojo-suave:#331613;
           --verde:#5fd08a; }
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--fondo); color:var(--tinta); font-family:var(--tipo);
    font-size:17px; line-height:26px; -webkit-text-size-adjust:100%;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    max-width:720px; margin:0 auto;
  }
  /* El hueco de la barra fija se reserva SOLO cuando la barra está puesta, y lo pone el guion
     con esta clase. Antes eran 148px constantes: con el teclado del móvil abierto y la barra
     escondida, ese hueco se comía la pantalla que quedaba para leer. */
  body.con-barra{ padding-bottom:calc(148px + env(safe-area-inset-bottom)) }
  header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    border-bottom:1px solid var(--tinta); padding-bottom:8px; margin-bottom:16px}
  /* El logotipo de Fast & Value delante del nombre del producto. Va como imagen y no en línea
     para que sirva el mismo SVG que en la web, y hay uno por esquema de color: el claro lleva el
     bloque en tinta y el oscuro lo lleva en blanco. */
  .marca{display:flex; align-items:center; gap:10px; min-width:0}
  .marca .logo{height:20px; width:auto; display:block}
  h1{font-size:21px; line-height:26px; margin:0; letter-spacing:0}
  .quien{font-size:13px; color:var(--tinta2); font-family:var(--mono); text-align:right}
  /* Los títulos en frase y en tinta, no en versales pequeñas: «Líneas del pedido» es una sección,
     no un metadato. El rótulo de sección que queda es el de dentro de un panel, en tinta secundaria. */
  h2{display:block; font-size:18px; line-height:24px; font-weight:700; color:var(--tinta); margin:24px 0 12px}
  .titulo-seccion{display:block; font-size:14px; line-height:20px; font-weight:600; color:var(--tinta2); margin:22px 0 8px}
  /* Foco visible en TODO lo que se puede tocar, no solo en los botones: teclado y lectores. */
  :where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--acento); outline-offset:3px}

  /* Bordes de 1 px en tinta secundaria: con 2 px en tinta cada botón pesaba más que el pedido.
     48 px de lado en todo lo que se toca, que es el requisito de la casa (WCAG 2.2 AA pide 24). */
  button{font:inherit; font-weight:600; border:1px solid var(--tinta2); border-radius:10px;
    background:var(--tarjeta); color:var(--tinta); padding:12px 16px; cursor:pointer;
    min-height:48px; min-width:48px; touch-action:manipulation}
  button:active{transform:translateY(1px)}
  /* Deshabilitado sin transparencia: WCAG lo exime del contraste, pero borrado no se ve que existe. */
  button:disabled{opacity:1; cursor:not-allowed; background:var(--raya); border-color:var(--tinta2); color:var(--tinta2)}
  button:focus-visible{outline:3px solid var(--acento); outline-offset:2px}
  .principal{background:var(--acento); border-color:var(--acento); color:#f2f0ea}
  .grande{width:100%; min-height:56px; font-size:18px; line-height:24px; font-weight:700}
  #dictar.grabando{background:var(--rojo); border-color:var(--rojo); color:#fff}

  select,input,textarea{width:100%; font:inherit; padding:12px; border-radius:10px;
    border:1px solid var(--tinta2); background:var(--tarjeta); color:var(--tinta)}
  select,input:not([type="hidden"]),textarea{min-height:48px}
  input::placeholder,textarea::placeholder{color:var(--tinta2); opacity:1}
  textarea{min-height:120px; resize:vertical}
  .fila{display:flex; gap:8px; align-items:center; margin-top:8px}
  .fila > button{flex:1 1 auto}
  .fila > button.estrecho{flex:0 0 auto}

  .tarjeta{background:var(--tarjeta); border:1px solid var(--raya); border-left:4px solid var(--acento);
    border-radius:10px; padding:12px; margin-bottom:12px}
  .tarjeta.ambigua,.tarjeta.revisar{border-left-color:var(--ambar); background:var(--ambar-suave)}
  /* La pregunta del cliente dicho va pegada al desplegable al que contesta. */
  #clienteDictado.tarjeta{margin-top:10px}
  .tarjeta.no_encontrada{border-left-color:var(--rojo); background:var(--rojo-suave)}
  /* El color solo no basta para distinguir ámbar de rojo: cada tarjeta sin resolver
     lleva además un rótulo con palabras, que es lo que se lee de un vistazo y lo que
     funciona para quien no distingue esos dos colores. Rectangular: ovalado parecía una insignia. */
  .rotulo{display:inline-block; font-size:14px; line-height:20px; font-weight:700; border-radius:4px;
    padding:4px 8px; margin-bottom:6px; color:#fff}
  .rotulo.elegir{background:var(--ambar)}
  .rotulo.fuera{background:var(--rojo)}
  .dictado{color:var(--tinta2); font-size:15px; line-height:22px; margin-bottom:6px}
  .titulo{font-size:17px; line-height:24px; font-weight:600; overflow-wrap:anywhere}
  .codigo{font-family:var(--mono); font-size:13px; line-height:20px; color:var(--tinta2); overflow-wrap:anywhere}
  .dinero{font-family:var(--mono); font-size:17px; line-height:24px; font-weight:600; white-space:nowrap}
  .codigo,.dinero,.cantidad input,.barra .cifra,.cifra-dato b{font-variant-numeric:tabular-nums}
  .motivo{color:var(--ambar); font-size:15px; margin:6px 0}
  .tarjeta.no_encontrada .motivo{color:var(--rojo)}
  .cantidad{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
  .cantidad button{min-width:54px; min-height:54px; font-size:22px; padding:0}
  .cantidad input{width:88px; text-align:center; font-family:var(--mono); font-size:19px}
  .cantidad .dinero{margin-left:auto}
  .opciones{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
  .opciones button{flex:1 1 44%; min-height:62px; text-align:left; font-size:15px; font-weight:500; line-height:1.25}
  /* Lo que separa a los candidatos va lo primero y en grande. El código no separa nada para
     quien está hablando con el cliente, así que se va al pie con el precio. */
  .opciones button b{display:block; font-size:16px; font-weight:700; line-height:1.2}
  .opciones button .nombre-candidato{display:block; margin-top:2px}
  .opciones button .pie-candidato{display:block; font-family:var(--mono); font-size:12px;
    color:var(--tinta2); margin-top:3px}

  .barra{position:fixed; left:0; right:0; bottom:0; max-width:720px; margin:0 auto; background:var(--fondo);
    border-top:1px solid var(--tinta); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    display:flex; gap:12px; align-items:center; z-index:5}
  .barra .total{flex:1 1 auto; min-width:0}
  .barra .cifra{font-family:var(--mono); font-size:22px; line-height:28px; font-weight:700; display:block; overflow-wrap:anywhere}
  .barra small{display:block; color:var(--tinta2); font-size:13px; line-height:18px}
  #confirmar{font-size:17px; line-height:24px; font-weight:700; flex-shrink:0}

  .etiqueta{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    background:var(--verde); color:#fff; border-radius:999px; padding:2px 8px; font-weight:700; margin-left:6px}
  .aviso{border-left:3px solid var(--ambar); padding:9px 12px; background:var(--ambar-suave);
    border-radius:0 8px 8px 0; font-size:15px; margin:10px 0}
  .aviso.error{border-left-color:var(--rojo); background:var(--rojo-suave)}
  .aviso.hecho{border-left-color:var(--verde); background:var(--tarjeta)}
  /* Un estado en curso («Resolviendo el pedido») no es una advertencia: sin ámbar. */
  .aviso.curso{border-left-color:var(--tinta2); background:var(--tarjeta)}
  .parcial{color:var(--tinta2); font-style:italic; min-height:1.4em; margin-top:6px; font-size:15px}
  .parcial:empty{display:none}
  .oculto{display:none !important}
  .metricas{font-family:var(--mono); font-size:12px; color:var(--tinta2); margin-top:10px}
  /* La respuesta a una pregunta aparece como tarjeta justo debajo de la pregunta, dentro del
     desplegable del catálogo, y no se acumula: la anterior desaparece al hacer la siguiente.
     No es un chat. /docs/decisions/2026-09-19-consultar-el-catalogo-va-plegado-bajo-el-pedido.md */
  .respuesta{border:1px solid var(--raya); border-left:5px solid var(--acento); border-radius:12px;
    padding:12px 14px; background:var(--tarjeta); margin-top:10px}
  .respuesta.abstencion{border-left-color:var(--tinta2)}
  .fuente{font-size:13px; color:var(--tinta2); margin-top:8px; font-family:var(--mono)}
  #pregunta{flex:1 1 auto}
  #preguntar{flex:0 0 auto}

/* Estas dos existen porque la Content-Security-Policy prohibe el estilo en linea, y eso
   incluye el atributo `style=` del HTML y el `elemento.style.x = ...` del guion. Lo cazo
   el navegador, no un test: la consola dijo «Applying inline style violates the following
   Content Security Policy directive». */
.fila.pegada{margin-top:0}
.cerrar-respuesta{margin-top:10px}
/* Deshacer vive dentro del aviso de «pedido vaciado», al lado de su texto y no como un botón más
   de la pantalla: es la salida de un error, no una acción del pedido. */
.deshacer{margin-top:4px}

/* ── Página de guía y datos cargados ── */
.filtros{position:sticky; top:0; background:var(--fondo); padding:8px 0; gap:8px; z-index:2}
body.guia{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
h3{font-size:16px; margin:16px 0 8px}
.entradilla{margin:0 0 4px}
.nota{color:var(--tinta2); font-size:15px; margin:8px 0}
.pasos{padding-left:22px; margin:0}
.pasos li{margin-bottom:8px}
.tarjeta.ejemplo .ensena{font-size:15px; margin:6px 0}
.tarjeta.ejemplo button{margin-top:10px}
.cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:12px}
.cifra-dato{background:var(--tarjeta); border:1px solid var(--raya); border-radius:10px; padding:12px}
.cifra-dato b{display:block; font-family:var(--mono); font-size:22px; line-height:28px}
.cifra-dato span{font-size:13px; color:var(--tinta2)}
.pestanas{display:flex; gap:6px; margin-bottom:10px}
.pestanas button{flex:1 1 0; min-height:48px; padding:8px 6px; font-size:15px}
.pestanas button[aria-selected="true"]{background:var(--tinta); color:var(--fondo)}
.filtros{flex-wrap:wrap}
.filtros > *{flex:1 1 220px}
.cuenta{font-size:13px; color:var(--tinta2); font-family:var(--mono); margin:8px 0}
.dato{border-bottom:1px solid var(--raya); padding:12px 0}
.dato-cabeza{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; align-items:baseline}
.dato .titulo{font-size:17px; line-height:24px; font-weight:600}
button.enlace{border:0; background:none; color:var(--acento); padding:0; min-height:0; font-size:14px; font-weight:600; text-decoration:underline}
#masArticulos{width:100%; min-height:48px; margin-top:12px}
/* El micrófono de «Preguntar»: mismo gesto que el del pedido, en pequeño. */
#dictarPregunta{flex:1 1 auto}
#dictarPregunta.grabando{background:var(--rojo); border-color:var(--rojo); color:#fff}

/* Va después de la base a propósito: `.principal` tiene la misma especificidad y, puesta esta
   regla antes, perdía por orden. En oscuro el acento es la tinta clara, así que el texto del
   botón principal va en el color del fondo. El botón grabando también va con tinta oscura en
   este modo (6,10 a 1 frente a los 3,03 del blanco): su regla está más abajo, con los rótulos. */
@media (prefers-color-scheme: dark){
  .principal{color:#0e1520}
}

/* ── Revisión de interfaz del 19-sep (MAT-13) ── */
/* El catálogo es ayuda, no el camino: plegado debajo de las líneas del pedido. */
.catalogo{margin-top:22px; border-top:1px solid var(--raya); padding-top:6px}
.catalogo summary{cursor:pointer; font-size:16px; line-height:24px; color:var(--tinta2);
  font-weight:600; padding:10px 0; min-height:48px; display:flex; align-items:center; list-style:none}
.catalogo summary h2{margin:0; font:inherit; letter-spacing:inherit; color:inherit}
/* El signo va en un span con aria-hidden: como pseudoelemento del summary entraba en su nombre
   accesible («+ Consultar el catálogo»), y el rol ya dice si está plegado. */
.catalogo .signo::before{content:"+"; font-family:var(--mono); font-size:18px; margin-right:10px}
.catalogo[open] .signo::before{content:"\2212"}
.catalogo summary::-webkit-details-marker{display:none}
.catalogo .titulo-seccion{margin-top:8px}
/* El estado del pedido junto a Confirmar: qué falta y cuál es el siguiente toque. */
/* Con `.barra small` delante: esa regla es (0,1,1) y a `.estado-pedido` a secas le ganaba, así
   que el estado que pide acción salía en el gris de una nota al pie y solo el resuelto en color. */
.barra small.estado-pedido{display:block; color:var(--ambar); font-size:13px; font-weight:600; margin-top:2px}
.barra small.estado-pedido.listo{color:var(--verde)}
/* Las acciones de una línea (buscar, dejar suelta, borrar) van aparte de los candidatos y no
   crecen con ellos: borrar no puede pesar lo mismo que elegir. */
.acciones-linea{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.acciones-linea button{flex:1 1 auto; min-height:48px; font-size:14px; font-weight:500; padding:8px 12px}
/* Borrar es lo único destructivo de la tarjeta: no crece y va en tinta secundaria. */
.acciones-linea .borrar{flex:0 0 auto; border-color:var(--tinta2); color:var(--tinta2)}
h2 label{font:inherit; color:inherit; letter-spacing:inherit}
h2:focus-visible{outline:3px solid var(--acento); outline-offset:3px}
/* Pantalla corta (el teclado del móvil abierto, el texto ampliado, el móvil en horizontal): la
   barra deja de ser fija y se va al flujo, al final del documento. Fija a esa altura se come la
   mitad de lo que queda, y en flujo ningún control enfocado puede quedar debajo de ella. */
@media (max-height:420px){
  .barra{position:static; margin-top:16px}
  body.con-barra{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
/* Una alternativa por fila en el móvil: se comparan leyendo, no adivinando en dos columnas. */
@media (max-width:480px){
  .opciones{flex-direction:column}
  .opciones button{flex:none; width:100%; min-height:64px; font-size:17px}
}
header{flex-wrap:wrap}
button.enlace{display:inline-flex; align-items:center; min-height:48px}
/* Mientras se resuelve, las líneas viejas se atenúan apenas y el contenedor se marca ocupado: se
   nota que está en curso, pero lo que ya hay sigue leyéndose. */
#lineas[aria-busy="true"]{opacity:.85}
@media (prefers-color-scheme: dark){
  /* Blanco sobre ámbar, verde o rojo claros no llega a 4,5:1: tinta del fondo. */
  .rotulo,.etiqueta,#dictar.grabando,#dictarPregunta.grabando{color:#0e1520}
}

/* ── El cliente se elige buscando, no en un desplegable con el directorio (MAT-28) ── */
/* La lista flota sobre lo que hay debajo y se desplaza por dentro: en un móvil, en flujo empujaría
   el pedido pantalla abajo cada vez que se escribe una letra. */
.combo{position:relative}
.panel-combo{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:6;
  background:var(--tarjeta); border:1px solid var(--tinta2); border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.18); overflow:hidden}
.lista-combo{margin:0; padding:4px; list-style:none; max-height:min(52vh,340px); overflow-y:auto}
.lista-combo:empty{display:none}
/* 48px de alto como los botones: esto se toca con el pulgar, no se pulsa con un ratón. */
.lista-combo [role="option"]{display:flex; flex-direction:column; justify-content:center;
  min-height:48px; padding:9px 12px; border-radius:9px; cursor:pointer}
.lista-combo [role="option"] b{font-size:16px; font-weight:700; line-height:1.2}
.lista-combo [role="option"] small{display:block; font-family:var(--mono); font-size:12px;
  color:var(--tinta2); margin-top:3px}
/* La opción activa del teclado se ve con fondo, no solo con el foco: el foco se queda en el campo. */
.lista-combo [role="option"].activa{background:var(--acento); color:#f2f0ea}
.lista-combo [role="option"].activa small{color:#f2f0ea}
/* La nota va dentro del panel, debajo de la lista: es donde se lee «hay más de 20» sin que la
   tape la propia lista, y donde sale «ningún cliente con ese texto» con el panel sin opciones. */
.nota-combo{font-size:14px; color:var(--tinta2); padding:0 12px 10px}
.nota-combo:empty{display:none}
.lista-combo:not(:empty) + .nota-combo{border-top:1px solid var(--raya); padding-top:8px}
@media (prefers-color-scheme: dark){
  /* Sobre el acento claro, tinta del fondo, igual que en `.principal`. */
  .lista-combo [role="option"].activa,.lista-combo [role="option"].activa small{color:#0e1520}
}

/* Aviso de consentimiento de la analítica. Una línea de texto y dos botones, en el flujo normal
   de la página: nada fijo y nada flotante, porque la barra del total vive pegada abajo y taparla
   sería tapar el precio que el comercial está leyendo delante del cliente. */
.consentimiento{border:1px solid var(--raya); border-left:5px solid var(--tinta2); border-radius:0 12px 12px 0;
  background:var(--tarjeta); padding:10px 14px; margin:0 0 12px}
.consentimiento p{margin:0 0 8px; font-size:15px; color:var(--tinta2)}
.consentimiento .fila{flex-wrap:wrap}
.consentimiento a{display:inline-flex; align-items:center; min-height:48px; min-width:48px;
  font-size:14px; color:var(--acento); font-weight:600; align-self:center}

/* El control de medición de la página de guía: estado y un botón que cambia en los dos sentidos. */
.medicion-control{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  border-left:3px solid var(--acento); background:var(--tarjeta); padding:10px 14px;
  border-radius:0 8px 8px 0; margin:10px 0 18px}
.medicion-control p{margin:0; flex:1 1 220px; font-size:15px}

/* ── Página de entrada (MAT-80) ── */
/* Una tarjeta centrada en la pantalla, con el logotipo grande y el nombre del producto: es lo
   primero que ve quien recibe el enlace, y en la demo se enseña antes que el pedido. Sin sombra
   y con el mismo radio que la caja del pedido: es la misma aplicación, no una portada aparte. La
   contraseña va en monoespaciada y con letra grande porque se teclea leyendo de otro sitio; sirve
   todas las veces hasta que se revoca. */
body.entrar{min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:24px 16px}
.tarjeta-entrada{width:100%; max-width:420px; margin:auto; background:var(--tarjeta); border:1px solid var(--raya);
  border-radius:12px; padding:24px; box-shadow:none}
.tarjeta-entrada .logo-grande{height:28px; width:auto; display:block; margin-bottom:24px}
.tarjeta-entrada h1{font-size:32px; line-height:38px; margin:0 0 8px; letter-spacing:0}
.lema{color:var(--tinta2); margin:0 0 24px; font-size:16px; line-height:24px}
.tarjeta-entrada label{display:block; font-size:14px; line-height:20px;
  color:var(--tinta2); font-weight:600; margin-bottom:8px}
.tarjeta-entrada input{font-family:var(--mono); font-size:20px; letter-spacing:.06em; margin-bottom:12px}
.tarjeta-entrada .aviso{margin-bottom:14px}
.nota-entrada{font-size:14px; line-height:20px; color:var(--tinta2); margin:16px 0 0}

/* La cabecera de la entrada en rejilla: logotipo, nombre y lema a la izquierda, y a la derecha un
   ecualizador centrado con el bloque logotipo + nombre, para que se entienda que esto va de voz.
   Cabe junto al logotipo de 184 px desde unos 350 px de ancho; por debajo baja bajo el lema. */
.cabecera-entrada{display:grid; grid-template-columns:auto auto; justify-content:space-between;
  column-gap:16px; align-items:center; margin-bottom:24px}
.cabecera-entrada picture{grid-column:1; grid-row:1}
.cabecera-entrada h1{grid-column:1; grid-row:2}
.cabecera-entrada .lema{grid-column:1 / -1; grid-row:3; margin:0}
.onda{grid-column:2; grid-row:1 / 3; display:flex; align-items:center; gap:4px; height:40px}
@media (max-width:349px){
  .onda{grid-column:1; grid-row:4; margin-top:16px}
}
/* Solo apariencia: las barras crecen desde el centro con scaleY, que no recoloca nada. Cada una con
   su duración y su retardo para que no se lea como un patrón que se repite. */
.onda i{display:block; width:4px; height:40px; border-radius:2px; background:var(--tinta);
  transform-origin:center; transform:scaleY(.25); animation:onda 1200ms ease-in-out infinite alternate}
.onda i:nth-child(4),.onda i:nth-child(5),.onda i:nth-child(6){background:#c08a3e}
.onda i:nth-child(1){animation-duration:1100ms; animation-delay:-300ms}
.onda i:nth-child(2){animation-duration:1400ms; animation-delay:-900ms}
.onda i:nth-child(3){animation-duration:950ms; animation-delay:-150ms}
.onda i:nth-child(4){animation-duration:1300ms; animation-delay:-600ms}
.onda i:nth-child(5){animation-duration:1000ms; animation-delay:-1100ms}
.onda i:nth-child(6){animation-duration:1450ms; animation-delay:-450ms}
.onda i:nth-child(7){animation-duration:900ms; animation-delay:-700ms}
.onda i:nth-child(8){animation-duration:1250ms; animation-delay:-50ms}
.onda i:nth-child(9){animation-duration:1500ms; animation-delay:-1000ms}
@keyframes onda{from{transform:scaleY(.25)} to{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){
  .onda i{animation:none}
  .onda i:nth-child(1),.onda i:nth-child(9){transform:scaleY(.25)}
  .onda i:nth-child(2),.onda i:nth-child(8){transform:scaleY(.4)}
  .onda i:nth-child(3),.onda i:nth-child(7){transform:scaleY(.7)}
  .onda i:nth-child(4),.onda i:nth-child(6){transform:scaleY(.85)}
  .onda i:nth-child(5){transform:scaleY(1)}
}

/* El interruptor de la voz: subrayado y en el color del acento cuando lee, tachado y apagado cuando no. */
button.voz[aria-pressed="false"]{color:var(--tinta2); text-decoration:line-through}

/* ── Navegación entre pantallas: Pedido · Catálogo · Clientes · Guía (MAT-79) ── */
/* La marca va arriba y la fila de enlaces debajo, a todo el ancho y en una fila de 48 px. En la
   pantalla del pedido el «quién está dentro» comparte esa fila, a la derecha. */
header{row-gap:0}
/* Los enlaces dentro del texto en el acento de la paleta: el azul del navegador no se lee en oscuro. */
a{color:var(--acento)}
/* El nombre del producto en las páginas de consulta: se ve como el `h1` del pedido, pero el `h1`
   de esas páginas es su título (Catálogo, Clientes, Guía). */
.marca .nombre-producto{font-size:21px; line-height:26px; font-weight:700; margin:0; letter-spacing:0; white-space:nowrap}
/* Si la fila de enlaces no cabe junto a lo de la derecha, lo de la derecha baja entero a su propia
   línea. Los enlaces solo se parten entre sí con el texto ampliado, que es mejor que desbordar. */
.fila-navegacion{flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:10px; min-height:48px}
.navegacion{display:flex; align-items:center; gap:0; flex-wrap:wrap; flex:0 1 auto}
.navegacion a{display:inline-flex; align-items:center; justify-content:center; min-height:48px; min-width:48px; padding:0 5px; font-size:15px;
  font-weight:600; color:var(--acento); text-decoration:none; white-space:nowrap}
.navegacion a:first-child{padding-left:0}
.navegacion a:hover{text-decoration:underline}
/* La pantalla en la que se está va en tinta y subrayada: no es un enlace que haya que tocar. */
.navegacion a[aria-current="page"]{color:var(--tinta); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.navegacion .separa{color:var(--tinta2)}
.fila-navegacion .quien{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.titulo-pagina{font-size:24px; line-height:30px; font-weight:700; margin:16px 0 8px; letter-spacing:0}
/* Los alias de un artículo: los nombres por los que también se le busca. */
.dato .alias{font-size:14px; line-height:20px; color:var(--tinta2); margin-top:2px}
/* El histórico de un cliente cuelga de su fila, sangrado y con la raya del acento a la izquierda. */
.dato.abierto{background:var(--tarjeta); border-left:4px solid var(--acento); padding-left:10px}
.historico-cliente{margin:8px 0 4px; padding-left:10px; border-left:1px solid var(--raya)}
.historico-cliente .dato:last-child{border-bottom:0}
/* En el pedido, quién está dentro y el interruptor de la voz van juntos a la derecha de la fila. */
.cabecera-extra{display:flex; align-items:center; gap:10px; min-width:0; margin-left:auto}

/* ── Una sola caja y el cliente en una fila (MAT-78) ── */
/* Diseño: docs/design/2026-09-24-pantalla-una-caja.md. El cliente ocupa una fila de 48 px, un
   solo botón de ancho completo, y la caja del pedido es la protagonista. */
/* El borde lateral en raya mientras no hay nada que atender: en gris parecía otra alerta fija. */
.cliente-fila{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  min-height:48px; padding:12px; margin:4px 0 0; text-align:left; font-weight:500; font-size:16px; line-height:22px;
  border:1px solid var(--raya); border-left:4px solid var(--raya); border-radius:10px;
  background:var(--tarjeta); color:var(--tinta2)}
/* El nombre entero, en dos renglones si hace falta: cortado con puntos suspensivos no se ve el
   código, que es lo que distingue a dos clientes con nombre parecido (visto a 390 px). */
.cliente-fila-texto{flex:1 1 auto; min-width:0; line-height:22px; overflow-wrap:anywhere}
.cliente-fila-accion{flex:0 0 auto; font-size:15px; line-height:20px; font-weight:700; color:var(--acento); text-decoration:underline;
  text-underline-offset:3px}
.cliente-fila[data-estado="elegido"]{color:var(--tinta); border-left-color:var(--tinta)}
.cliente-fila[data-estado="propuesto"],.cliente-fila[data-estado="aclarar"]{color:var(--ambar);
  border-left-color:var(--ambar); background:var(--ambar-suave); font-weight:600}
/* El panel de elegir va en el flujo, debajo de la fila, y con ella abierta forman una sola pieza:
   no flota ni es un diálogo. */
.cliente-fila[aria-expanded="true"]{border-radius:10px 10px 0 0}
.cliente-elegir{border:1px solid var(--raya); border-top:0; border-radius:0 0 10px 10px;
  background:var(--tarjeta); padding:4px 12px 12px; margin-top:0}
.cliente-elegir .titulo-seccion{margin:12px 0 6px}
.cliente-elegir .fila:has(> button:not(.oculto)){margin-top:10px}
.cliente-elegir .fila:not(:has(> button:not(.oculto))){display:none}
.cliente-elegir .fila > button{flex:1 1 0}

/* La caja del pedido: título en frase, no en rótulo de sección. */
.caja-pedido{background:var(--tarjeta); border:1px solid var(--raya); border-radius:12px;
  padding:16px; margin-top:16px}
.caja-pedido h2{font-size:20px; line-height:26px; color:var(--tinta); font-weight:700; margin:0 0 12px}
.caja-pedido textarea{display:block; min-height:112px; margin-top:12px; font-size:17px; line-height:24px; background:var(--fondo)}
.caja-pedido > .fila{margin-top:12px}

/* La línea de estado de la voz. El punto late mientras hay actividad, en tinta secundaria y no en
   ámbar: la voz trabajando no es una duda. Nada que finja nivel de micrófono. */
.estado-voz{display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:44px; margin-top:6px}
/* En reposo no ocupa sitio: un renglón vacío al pie de la caja parecía un hueco roto. */
.estado-voz:has(> #estadoVoz:empty){min-height:0; margin-top:0}
#estadoVoz{flex:1 1 auto; margin:0; font-size:15px; color:var(--tinta2); display:flex; align-items:center; gap:8px}
#estadoVoz:not(:empty)::before{content:""; flex:0 0 auto; width:10px; height:10px; border-radius:50%;
  background:var(--tinta2); animation:late 1200ms ease-in-out infinite}
#pararLectura{min-height:48px; padding:8px 14px; font-size:15px}
@keyframes late{0%,100%{opacity:1} 50%{opacity:.35}}

/* Las líneas que llegan de una resolución: solo apariencia, todas insertadas a la vez. */
#lineas > .es-nueva{animation:llega 180ms cubic-bezier(.2,.8,.2,1) both}
#lineas > .es-nueva:nth-child(2){animation-delay:40ms}
#lineas > .es-nueva:nth-child(3){animation-delay:80ms}
#lineas > .es-nueva:nth-child(n+4){animation-delay:120ms}
@keyframes llega{from{opacity:.6; transform:translateY(6px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  #lineas > .es-nueva{animation:none}
  #estadoVoz:not(:empty)::before{animation:none}
}