/* 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:#3a444e; --raya:#d9d3c6;
    --acento:#101a24; --sobre-acento:#f2f0ea; --ambar:#835e2a; --ambar-vivo:#c08a3e; --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;
    /* Cuatro tamaños y nada más (paso 6 del diseño): 1rem son 17 px con el tamaño por defecto del
       navegador, y todo crece con el que elija la persona. */
    --t-pequeno:calc(14rem / 17); --t-cuerpo:1rem; --t-titulo:calc(22rem / 17); --t-grande:calc(28rem / 17);
    --a-pequeno:1.43; --a-cuerpo:1.41; --a-titulo:1.27; --a-grande:1.21;
    /* Las barras fijas crecen hasta 1,6 veces y no más: con la letra al máximo, una barra que
       crece sin tope se come la pantalla y la primera línea de trabajo deja de verse (principio 13). */
    --tf-pequeno:min(var(--t-pequeno), 22.4px); --tf-cuerpo:min(var(--t-cuerpo), 27.2px); --tf-titulo:min(var(--t-titulo), 35.2px);
  }
  @media (prefers-color-scheme: dark){
    :root{ --fondo:#0e1520; --tarjeta:#16202c; --tinta:#e7eaee; --tinta2:#a9b2bd; --raya:#2a3543;
           --acento:#e7eaee; --sobre-acento:#0e1520; --ambar:#c08a3e; --ambar-vivo:#c08a3e; --ambar-suave:#2b2008;
           --rojo:#ef6b5e; --rojo-suave:#331613; --verde:#5fd08a; }
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  html{font-size:106.25%}
  /* Safari en iPhone no hace crecer rem con el tamaño de texto del sistema sin esto (WebKit 260880).
     Solo en iOS: en el Mac, -apple-system-body son 13 px. */
  @supports (font:-apple-system-body) and (-webkit-touch-callout:none){
    html{font:-apple-system-body}
  }
  body{
    background:var(--fondo); color:var(--tinta); font-family:var(--tipo);
    font-size:var(--t-cuerpo); line-height:1.5; -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(min(9.4rem, 256px) + env(safe-area-inset-bottom)) }
  /* Con la barra fija, lo enfocado no puede quedar debajo de ella. */
  html:has(body.con-barra){ scroll-padding-bottom:calc(min(9.4rem, 256px) + 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}
  .marca{display:flex; align-items:center; gap:10px; min-width:0}
  .marca .signo{flex:0 0 auto; width:28px; height:28px; color:var(--tinta)}
  h1{font-size:var(--t-titulo); line-height:var(--a-titulo); margin:0; letter-spacing:0}
  .quien{font-size:var(--t-pequeno); 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:var(--t-titulo); line-height:var(--a-titulo); font-weight:700; color:var(--tinta); margin:24px 0 12px}
  .titulo-seccion{display:block; font-size:var(--t-pequeno); line-height:var(--a-pequeno); 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:12px;
    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. */
  /* Desactivado a 7:1 también (principio 9, sin la exención de WCAG): tinta2 sobre tarjeta, y el
     borde discontinuo en tinta2, que en raya se perdía contra el fondo. */
  button:disabled{opacity:1; cursor:not-allowed; background:var(--tarjeta); border:1px dashed 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:var(--sobre-acento)}
  .grande{width:100%; min-height:56px; font-size:var(--t-cuerpo); line-height:var(--a-cuerpo); font-weight:700}
  /* Grabando: sin texto sobre el rojo, que en oscuro no llega a 7:1 con ningún color. */
  #dictar.grabando{background:var(--rojo-suave); border-color:var(--rojo); box-shadow:inset 0 0 0 1px var(--rojo); color:var(--tinta)}

  select,input,textarea{width:100%; font:inherit; padding:12px; border-radius:12px;
    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:12px; 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:var(--t-pequeno); line-height:var(--a-pequeno); font-weight:700; border-radius:4px;
    padding:4px 8px; margin-bottom:6px; color:var(--tinta)}
  .rotulo.elegir{background:var(--ambar-suave); border:1px solid var(--ambar); color:var(--tinta)}
  .rotulo.fuera{background:var(--rojo-suave); border:1px solid var(--rojo); color:var(--tinta)}
  .dictado{color:var(--tinta2); font-size:var(--t-pequeno); line-height:var(--a-pequeno); margin-bottom:6px}
  .titulo{font-size:var(--t-cuerpo); line-height:var(--a-cuerpo); font-weight:600; overflow-wrap:anywhere}
  .codigo{font-family:var(--mono); font-size:var(--t-pequeno); line-height:var(--a-pequeno); color:var(--tinta2); overflow-wrap:anywhere}
  .dinero{font-family:var(--mono); font-size:var(--t-cuerpo); line-height:var(--a-cuerpo); font-weight:600; white-space:nowrap}
  .codigo,.dinero,.cantidad input,.barra .cifra,.cifra-dato b{font-variant-numeric:tabular-nums}
  .motivo{color:var(--tinta); font-size:var(--t-cuerpo); margin:6px 0}
  .cantidad{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
  .cantidad button{min-width:54px; min-height:54px; font-size:var(--t-titulo); padding:0}
  .cantidad input{width:5.2rem; max-width:40vw; text-align:center; font-family:var(--mono); font-size:var(--t-titulo)}
  .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:var(--t-cuerpo); 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:var(--t-cuerpo); 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:var(--t-pequeno);
    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; flex-wrap:wrap; gap:12px; align-items:center; z-index:5}
  /* Si el importe y Confirmar no caben en una fila (letra grande), Confirmar baja a la suya. */
  .barra .total{flex:999 1 150px; min-width:0}
  .barra .cifra{font-family:var(--mono); font-size:var(--tf-titulo); line-height:var(--a-titulo); font-weight:700; display:block; overflow-wrap:anywhere}
  .barra small{display:block; color:var(--tinta2); font-size:var(--tf-pequeno); line-height:var(--a-pequeno)}
  .barra .cifra.sin-cifra{font-family:var(--tipo); font-size:var(--tf-titulo); line-height:var(--a-titulo)}
  #confirmar{font-size:var(--tf-cuerpo); line-height:var(--a-cuerpo); font-weight:700; flex:1 0 auto; min-height:60px}
  #resolver{min-height:60px}

  .etiqueta{display:inline-block; font-size:var(--t-pequeno); text-transform:uppercase; letter-spacing:.07em;
    background:var(--tarjeta); color:var(--tinta); border:1px solid var(--verde); 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 12px 12px 0; font-size:var(--t-cuerpo); 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 («Preparando el pedido») no es una advertencia: sin ámbar. */
  .aviso.curso{border-left-color:var(--tinta2); background:var(--tarjeta)}
  .recibo{display:flex; flex-direction:column; gap:6px; padding:14px 16px; font-size:var(--t-cuerpo); color:var(--tinta)}
  .recibo-titulo{font-size:var(--t-titulo)}
  .recibo-ref{font-size:var(--t-pequeno); color:var(--tinta2)}
  .recibo-cliente{font-weight:700}
  .recibo-lineas{margin:4px 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
  .recibo-importe{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; border-top:1px solid var(--raya); padding-top:10px}
  .recibo-importe b{font-size:var(--t-grande)}
  .recibo-avisos{margin:0; padding-left:18px; font-size:var(--t-cuerpo); color:var(--tinta2)}
  .recibo-enlaces{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:var(--t-cuerpo)}
  .parcial{color:var(--tinta2); font-style:italic; min-height:1.4em; margin-top:6px; font-size:var(--t-cuerpo)}
  .parcial:empty{display:none}
  .oculto{display:none !important}
  .solo-lector{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0 !important; border:0 !important; margin:0 !important}
  .caja-pedido:not(.plegada) #cambiarTexto{display:none}
  .caja-pedido.plegada #texto, .caja-pedido.plegada .fila:has(> #resolver){display:none}
  .metricas{font-family:var(--mono); font-size:var(--t-pequeno); 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:var(--t-pequeno); 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:var(--t-cuerpo); margin:16px 0 8px}
.entradilla{margin:0 0 4px}
.nota{color:var(--tinta2); font-size:var(--t-pequeno); margin:8px 0}
.pasos{padding-left:22px; margin:0}
.pasos li{margin-bottom:8px}
.tarjeta.ejemplo .ensena{font-size:var(--t-pequeno); 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:12px; padding:12px}
.cifra-dato b{display:block; font-family:var(--mono); font-size:var(--t-titulo); line-height:var(--a-titulo)}
.cifra-dato span{font-size:var(--t-pequeno); 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:var(--t-pequeno)}
.pestanas button[aria-selected="true"]{background:var(--tinta); color:var(--fondo)}
.cuenta{font-size:var(--t-pequeno); 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:var(--t-cuerpo); line-height:var(--a-cuerpo); font-weight:600}
button.enlace{border:0; background:none; color:var(--acento); padding:0; min-height:0; font-size:var(--t-pequeno); 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-suave); border-color:var(--rojo); box-shadow:inset 0 0 0 1px var(--rojo); color:var(--tinta)}

/* ── 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:var(--t-cuerpo); line-height:var(--a-cuerpo); 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:var(--t-cuerpo); 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(--tinta); font-size:var(--tf-pequeno); font-weight:600; margin-top:2px}
.barra small.estado-pedido.listo{color:var(--tinta)}
/* 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:var(--t-pequeno); 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:var(--t-cuerpo)}
}
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"]{cursor:progress}
/* ── 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:12px;
  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:12px; cursor:pointer}
.lista-combo [role="option"] b{font-size:var(--t-cuerpo); font-weight:700; line-height:1.2}
.lista-combo [role="option"] small{display:block; font-family:var(--mono); font-size:var(--t-pequeno);
  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:var(--sobre-acento)}
.lista-combo [role="option"].activa small{color:var(--sobre-acento)}
/* 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:var(--t-pequeno); 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}
/* 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:var(--t-pequeno); color:var(--tinta2)}
.consentimiento .fila{flex-wrap:wrap}
.consentimiento a{display:inline-flex; align-items:center; min-height:48px; min-width:48px;
  font-size:var(--t-pequeno); 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 12px 12px 0; margin:10px 0 18px}
.medicion-control p{margin:0; flex:1 1 220px; font-size:var(--t-pequeno)}

/* ── 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 h1{font-size:var(--t-grande); line-height:var(--a-grande); margin:0 0 8px; letter-spacing:0}
.lema{color:var(--tinta2); margin:0 0 24px; font-size:var(--t-cuerpo); line-height:var(--a-cuerpo)}
.tarjeta-entrada label{display:block; font-size:var(--t-pequeno); line-height:var(--a-pequeno);
  color:var(--tinta2); font-weight:600; margin-bottom:8px}
.tarjeta-entrada input{font-family:var(--mono); font-size:var(--t-titulo); letter-spacing:.06em; margin-bottom:12px}
.tarjeta-entrada .aviso{margin-bottom:14px}
.nota-entrada{font-size:var(--t-pequeno); line-height:var(--a-pequeno); 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 .signo-entrada{grid-column:1; grid-row:1; margin-bottom:8px; width:56px; height:56px; color:var(--tinta)}
.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:var(--ambar-vivo)}
.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)}
}

/* La misma onda en la cabecera del pedido, más pequeña y quieta con las alturas escalonadas: solo
   se mueve con `.activa`, que pone `pintaEstadoVoz` mientras Matilde escucha o habla. Va después del
   bloque de la entrada para ganarle en la cascada sin subir la especificidad. */
.onda.onda-cabecera{grid-column:auto; grid-row:auto; margin:0; height:24px; gap:3px; flex:0 0 auto}
.onda-cabecera i{width:3px; height:24px; border-radius:1.5px; animation:none}
.onda-cabecera i:nth-child(1),.onda-cabecera i:nth-child(9){transform:scaleY(.25)}
.onda-cabecera i:nth-child(2),.onda-cabecera i:nth-child(8){transform:scaleY(.4)}
.onda-cabecera i:nth-child(3),.onda-cabecera i:nth-child(7){transform:scaleY(.7)}
.onda-cabecera i:nth-child(4),.onda-cabecera i:nth-child(6){transform:scaleY(.85)}
.onda-cabecera i:nth-child(5){transform:scaleY(1)}
.onda-cabecera.activa i{animation-name:onda; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; animation-direction:alternate}
@media (prefers-reduced-motion: reduce){
  .onda-cabecera.activa i{animation:none}
}

/* 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:var(--t-titulo); line-height:var(--a-titulo); 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:var(--t-pequeno);
  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:var(--t-titulo); line-height:var(--a-titulo); 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:var(--t-pequeno); line-height:var(--a-pequeno); 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:var(--t-cuerpo); line-height:var(--a-cuerpo);
  border:1px solid var(--raya); border-left:4px solid var(--raya); border-radius:12px;
  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:var(--a-cuerpo); overflow-wrap:anywhere}
.cliente-fila-accion{flex:0 0 auto; font-size:var(--t-cuerpo); line-height:var(--a-cuerpo); 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="aclarar"]{color:var(--tinta);
  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:12px 12px 0 0}
.cliente-elegir{border:1px solid var(--raya); border-top:0; border-radius:0 0 12px 12px;
  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:var(--t-titulo); line-height:var(--a-titulo); color:var(--tinta); font-weight:700; margin:0 0 12px}
.caja-pedido textarea{display:block; min-height:112px; margin-top:12px; font-size:var(--t-cuerpo); line-height:var(--a-cuerpo); 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:var(--t-pequeno); color:var(--tinta); 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:var(--t-cuerpo)}
@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}
}

/* El móvil (diseño de la interfaz, principios 1 y 13): arriba solo «Matilde» y el menú, en una
   franja; la navegación entre pantallas, abajo, en la zona del pulgar, como la app; y la acción
   principal, encima de ella. Con un pedido en pantalla manda la barra del total y la navegación se
   aparta, igual que la app no enseña pestañas mientras se revisa un pedido. */
@media (max-width:599px){
  :root{--alto-pestanas:calc(min(3.3rem, 90px) + env(safe-area-inset-bottom)); scroll-padding-bottom:calc(var(--alto-pestanas) + min(5.4rem, 147px))}
  body, body.guia{padding-top:6px; padding-bottom:calc(var(--alto-pestanas) + 14px)}
  header{flex-wrap:nowrap; border-bottom:1px solid var(--raya); padding-bottom:4px; margin-bottom:12px}
  header h1{font-size:var(--t-cuerpo)}
  .fila-navegacion{display:contents}
  .fila-navegacion .quien{display:none}
  .onda-cabecera:not(.activa){display:none}
  .cabecera-extra{gap:4px}
  .cabecera-extra button.enlace{padding:0 8px}
  .navegacion{position:fixed; left:0; right:0; bottom:0; z-index:4; display:grid; grid-template-columns:repeat(4,1fr);
    background:var(--tarjeta); border-top:1px solid var(--raya); padding-bottom:env(safe-area-inset-bottom)}
  .navegacion .separa{display:none}
  .navegacion a, .navegacion a:first-child{min-height:min(3.3rem, 90px); padding:4px; font-size:var(--tf-pequeno); line-height:1.2; text-align:center; white-space:normal; overflow-wrap:anywhere; text-decoration:none; color:var(--tinta2)}
  .navegacion a[aria-current="page"]{color:var(--tinta); font-weight:700; text-decoration:none; box-shadow:inset 0 3px 0 var(--tinta)}

  /* Pedido sin empezar: «Dictar pedido» fijo encima de las pestañas, donde llega el pulgar. */
  body:has(#dictar):not(.con-barra){padding-bottom:calc(var(--alto-pestanas) + min(5.4rem, 147px))}
  body:not(.con-barra) #dictar{position:fixed; left:16px; right:16px; width:auto; bottom:calc(var(--alto-pestanas) + 12px); font-size:var(--tf-cuerpo);
    z-index:4; min-height:64px; max-width:688px; margin:0 auto}
  .caja-pedido h2{margin-top:0}

  /* Con pedido: la barra del total y Confirmar abajo, y las pestañas fuera. */
  body.con-barra .navegacion{display:none}
  body.con-barra{padding-bottom:calc(min(9.4rem, 256px) + env(safe-area-inset-bottom))}
}
/* Pantalla corta o teclado abierto en el móvil: nada fijo, todo en el flujo. */
@media (max-width:599px) and (max-height:420px){
  .navegacion{position:static; margin-top:16px}
  body:not(.con-barra) #dictar{position:static; width:100%}
  body, body.guia, body.con-barra, body:has(#dictar):not(.con-barra){padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
/* Escribiendo en el móvil: iOS y Chrome de Android no encogen el viewport de maquetación con el
   teclado, así que el respaldo por altura no salta. Con un campo enfocado se apartan las pestañas
   y «Dictar pedido», para que nada fijo tape lo que se escribe. */
@media (max-width:599px){
  body:has(:is(input:not([type="hidden"]),textarea,select):focus) .navegacion{display:none}
  /* Oculto y no en el flujo: si entrara en el flujo, al tocar «Preparar pedido» el campo pierde el
     foco, el botón vuelve a ser fijo, todo sube 64 px y el toque cae en otro sitio. */
  body:has(:is(input:not([type="hidden"]),textarea,select):focus):not(.con-barra) #dictar{display:none}
}
/* Con un pedido en pantalla, en el móvil la caja de dictar se encoge: lo que hay que ver son las líneas. */
@media (max-width:599px){
  body.con-barra .caja-pedido{padding:12px}
  body.con-barra .caja-pedido h2{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  body.con-barra #dictar{min-height:48px; font-size:var(--tf-cuerpo)}
}
/* Catálogo, Clientes y Guía en el móvil: el título de la página es la cabecera, sin la franja de
   «Matilde» encima, y sin el párrafo de explicación ni las cifras grandes delante de la lista (la
   cuenta ya va justo encima de ella). */
@media (max-width:599px){
  body:has(.titulo-pagina) header{border-bottom:0; padding-bottom:0; margin-bottom:0}
  body:has(.titulo-pagina) header .marca{display:none}
  .titulo-pagina{margin-top:4px}
  body:has(#cuentas) .nota, #cuentas{display:none}
}

/* Revisión por excepciones (paso 3): la resuelta es una fila compacta que se abre con un toque. */
.tarjeta.fila-linea{padding:0; border-left-width:1px}
.tarjeta.fila-linea.abierta{border-color:var(--tinta2); padding-bottom:12px}
.tarjeta.fila-linea > :not(.cabecera-fila){margin-left:14px; margin-right:14px}
.cabecera-fila{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:2px; width:100%; min-height:52px;
  border:0; border-radius:inherit; background:transparent; text-align:left; padding:12px 14px; font-weight:400}
.cabecera-fila .cuanto{white-space:nowrap}
.num-linea{display:inline-flex; align-items:center; justify-content:center; min-width:1.7em; height:1.7em; padding:0 .45em; margin-right:.45em; border-radius:999px;
  background:var(--tinta); color:var(--tarjeta); font-size:var(--t-pequeno); font-weight:700; font-variant-numeric:tabular-nums; vertical-align:.1em}
.cabecera-fila .titulo{flex:1 1 160px; font-weight:700; overflow-wrap:anywhere}
.cabecera-fila .dinero{margin-left:auto; font-weight:600; white-space:nowrap}
.en-espera .cabecera-fila{color:var(--tinta2)}
.en-espera .titulo{font-weight:400}
.en-espera .buscando{margin-left:auto; font-size:var(--t-pequeno); white-space:nowrap}
.nota-linea{font-size:var(--t-pequeno); line-height:var(--a-pequeno); color:var(--tinta2); margin-bottom:10px}
.comun{margin:6px 0}
.comun span{color:var(--tinta2)}
.franja-quitada{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--tinta2);
  border-radius:12px; padding:4px 4px 4px 14px; margin-bottom:10px; background:var(--tarjeta)}

/* Catálogo (paso 5): una entrada con micrófono, variantes bajo su nombre común y «Preguntar a
   Matilde» fijo abajo, como la barra de Confirmar en la pantalla del pedido (principio 1). */
.entrada-catalogo input{flex:1 1 auto; min-width:0}
.filtros select{margin-top:8px}
.grupo-cabecera{font-size:var(--t-cuerpo); line-height:var(--a-cuerpo); margin:18px 0 6px}
.dato.variante .variante-texto{font-weight:700}
.pregunta-hecha{color:var(--tinta2); font-style:italic; margin-bottom:6px}
.respuesta.fallo{border-left-color:var(--rojo)}
.barra-preguntar{position:fixed; left:0; right:0; bottom:0; z-index:5; max-width:720px; margin:0 auto; background:var(--fondo);
  border-top:1px solid var(--raya); padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.barra-preguntar button{width:100%; min-height:60px; font-size:var(--tf-cuerpo); display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; overflow:hidden}
/* La cita en un renglón cortado con puntos: la barra fija no crece con el texto ni con la letra. */
.barra-preguntar .cita-pregunta{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#respuestaCatalogo .respuesta{scroll-margin-top:150px}
#dictarCatalogo.grabando{background:var(--rojo-suave); border-color:var(--rojo); box-shadow:inset 0 0 0 1px var(--rojo); color:var(--tinta)}
body.con-preguntar{padding-bottom:calc(min(5.9rem, 160px) + env(safe-area-inset-bottom))}
html:has(body.con-preguntar){scroll-padding-bottom:calc(min(5.9rem, 160px) + env(safe-area-inset-bottom))}
@media (max-width:599px){
  /* Encima de las pestañas, en la zona del pulgar. */
  .barra-preguntar{bottom:var(--alto-pestanas); padding-bottom:10px}
  body.con-preguntar, body.guia.con-preguntar{padding-bottom:calc(var(--alto-pestanas) + min(5.9rem, 160px))}
  html:has(body.con-preguntar){scroll-padding-bottom:calc(var(--alto-pestanas) + min(5.9rem, 160px))}
  /* Escribiendo, las pestañas se apartan pero la barra NO se mueve: si bajara, al tocarla el campo
     perdería el foco, la barra volvería a subir y el toque caería en otro sitio. */
}
@media (max-width:599px) and (max-height:420px){
  .barra-preguntar{position:static; margin-top:16px}
  body.con-preguntar, body.guia.con-preguntar{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}