/* ==========================================================================
   COMPONENTES · Precios Tienda
   Apartado 2 de docs/guia-pantallas-precios-tienda.md.

   Reglas de oro que manda la guía cuando haya duda:
     · Botones y campos de 52-56 px. Objetivo táctil mínimo, 44 px.
     · Amarillo SOLO para precios y porcentajes.
     · Rojo SOLO para errores y acciones destructivas.
     · Superficies planas: sin degradados ni sombras decorativas.

   Antes de crear una variante nueva, comprobar si ya existe la pieza aquí.
   ========================================================================== */


/* =========================================================================
   2.1 · CABECERA
   ========================================================================= */

.cabecera{
  display:flex;
  align-items:center;
  gap:12px;
  padding:var(--margen);
  background:var(--verde-oscuro);
  color:var(--tinta-clara);
}

.cabecera h1{
  flex:1;
  min-width:0;
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* Flecha atrás (24 px) e icono opcional a la derecha. Ambos con área
   táctil de 44 px aunque el dibujo sea menor. */
.btn-atras,
.btn-icono{
  display:grid;
  place-items:center;
  width:var(--tactil-min);
  height:var(--tactil-min);
  margin:calc((var(--tactil-min) - 24px) / -2);
  border-radius:10px;
  color:inherit;
}

.btn-atras:hover,
.btn-icono:hover{ background:rgba(255,255,255,.10); }

/* El lápiz de «esto se puede corregir»: la ganancia de una categoría (A6), el
 * nombre de un producto (A8 y B5).
 *
 * Nunca había tenido regla propia: heredaba del reset de base.css y salía del
 * color del texto que tuviera al lado. Ahora es verde, como el resto de lo que
 * se puede tocar, y conserva sus 44 px de objetivo táctil con un margen
 * negativo que los compensa —el hueco tocable no ocupa sitio—. */
.btn-lapiz{
  display:inline-grid;
  place-items:center;
  width:var(--tactil-min);
  height:var(--tactil-min);
  margin:calc((var(--tactil-min) - 24px) / -2);
  border-radius:10px;
  color:var(--verde);
}
.btn-lapiz:hover{ background:var(--verde-claro); }
.btn-lapiz:active{ opacity:.55; }

/* Pegado al nombre, dentro del renglón del texto. Sin el ajuste vertical se
   apoya en la línea base y parece que se cae del título. */
.btn-lapiz--nombre{ margin-left:4px; vertical-align:-7px; }

/* B1 · Lo que el servidor está leyendo ahora mismo.
 *
 * ─── AMARILLO, Y ES UNA EXCEPCIÓN DECLARADA (01-09-2026) ─────────────────
 * La regla de oro dice que el amarillo es dinero y nada más (§1.3). Esta es
 * la segunda excepción autorizada, después del botón del micrófono: aquí el
 * amarillo dice «atención, hay algo en marcha», y se pidió así.
 *
 * Para no confundirlo con un precio no se usa el amarillo del cartel: va en
 * un tono apagado de fondo con el borde sí en `--amarillo-borde`. Un cartel
 * amarillo lleno de texto no se parece a un cartel de precio, que es siempre
 * una cifra grande y corta.
 * ─────────────────────────────────────────────────────────────────────────
 */
.aviso-procesando{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  background:#FDF6DC;
  border:1.5px solid var(--amarillo-borde);
  border-radius:var(--radio-tarjeta);
  color:var(--tinta);
}

.aviso-procesando .icono{ flex:none; color:#8A6A05; }

.aviso-procesando-titulo{ font-size:15px; font-weight:600; }

/* Las horas en monoespaciada, como el resto de los datos: con tres facturas
   en marcha se leen en columna. */
.aviso-procesando-lista{
  margin-top:6px;
  padding-left:0;
  list-style:none;
  font-family:var(--dato);
  font-size:13px;
}

.aviso-procesando-nota{
  margin-top:6px;
  font-size:12px;
  color:#8A6A05;
}

/* B4 (Procesando) no lleva flecha: el título va centrado. */
.cabecera--centrada h1{ text-align:center; }

/* Cabecera de marca del login (A1/A2): dos líneas centradas. */
.cabecera--marca{
  flex-direction:column;
  gap:4px;
  padding-block:28px;
  text-align:center;
}
.cabecera--marca h1{ font-size:24px; }
.cabecera-subtitulo{
  font-family:var(--display);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.6;
}


/* =========================================================================
   2.2 · BOTONES
   Primario verde · Secundario blanco · Peligro rojo.
   La acción principal de cada pantalla va siempre a ancho completo.
   ========================================================================= */

.boton{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:var(--alto-control);
  padding:10px 18px;
  border-radius:var(--radio);
  font-size:17px;
  font-weight:500;
  text-align:center;
  text-decoration:none;
}

.boton--primario{
  background:var(--verde);
  color:#FFFFFF;
}
.boton--primario:hover{ background:#28603D; }

.boton--secundario{
  background:var(--papel-alto);
  border:1px solid var(--linea);
  color:var(--tinta);
}
.boton--secundario:hover{ background:var(--papel-hundido); }

.boton--peligro{
  background:transparent;
  border:1.5px solid var(--rojo);
  color:var(--rojo);
}
.boton--peligro:hover{ background:var(--rojo-claro); }

.boton:disabled{ opacity:.45; cursor:not-allowed; }

/* Icono a la izquierda del texto, con el hueco de 8 px que da .boton. */
.boton .icono{ width:22px; height:22px; }

/* A3 · Botón gigante de la pantalla principal: icono de 52 px sobre el
   texto y mucho aire vertical. Público poco diestro con el móvil. */
.boton--gigante{
  flex-direction:column;
  gap:12px;
  /* Bajó de 36 a 22 el 01-09-2026 para hacerle sitio a «Consultar facturas»,
     que pasó a medir el doble. La pantalla principal tiene que entrar entera
     sin desplazar: es lo primero que se ve al abrir. */
  padding-block:22px;
  font-size:20px;
  font-weight:600;
}
.boton--gigante .icono{ width:52px; height:52px; stroke-width:1.4; }

/* A3 · «Consultar facturas»: el doble de alto que un botón normal.
 *
 * ─── ESTO ERA A PROPÓSITO MÁS PEQUEÑO, Y SE CAMBIÓ (01-09-2026) ──────────
 * La guía decía que el archivo de facturas se consulta de vez en cuando, no
 * las cien veces al día que se consulta un precio, así que iba como un botón
 * secundario normal. En la 2ª prueba de campo resultó que se busca bastante
 * más de lo previsto, y con el móvil en una mano cuesta acertarle.
 *
 * El doble de alto —56 → 112 px— y el sitio se lo quitan los dos gigantes,
 * que bajan de 36 a 22 px de relleno vertical. Así la pantalla principal
 * sigue entrando entera sin desplazar, que es su única regla dura: es lo
 * primero que se ve al abrir y no puede pedir un gesto para verse.
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Es solo tamaño, como `gigante`: necesita una variante de color al lado o
 * el botón sale transparente. Lo impide `boton.js`.
 */
.boton--medio{
  min-height:calc(var(--alto-control) * 2);
  font-size:18px;
}
.boton--medio .icono{ width:26px; height:26px; }

/* A3 · segundo botón gigante: blanco con borde grueso verde oscuro. */
.boton--contorno{
  background:var(--papel-alto);
  border:2px solid var(--verde-oscuro);
  color:var(--verde-oscuro);
}
.boton--contorno:hover{ background:var(--verde-claro); }

/* A7 · pareja de botones de 72 px con el icono encima del texto. */
.boton--vertical{
  flex-direction:column;
  gap:6px;
  min-height:72px;
  font-size:15px;
}
.boton--vertical .icono{ width:26px; height:26px; color:var(--verde); }


/* =========================================================================
   2.3 · CARTEL DE PRECIO  ·  el componente estrella
   Amarillo reservado a precios y porcentajes. Cifra en monoespaciada negrita.
   ========================================================================= */

.cartel{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  flex:none;
  padding:5px 11px;
  background:var(--amarillo);
  border:1.5px solid var(--amarillo-borde);
  border-radius:10px;
  color:var(--tinta);
  line-height:1.15;
}

.cartel-precio{
  font-family:var(--dato);
  font-weight:700;
  font-size:18px;
}

.cartel-unidad{
  font-size:11px;
  opacity:.72;
  white-space:nowrap;
}

/* Grande: fichas (A8/A9) y formulario de crear producto (A7). */
.cartel--grande{
  display:flex;
  width:100%;
  gap:4px;
  padding:16px;
  border-width:2px;
  border-radius:var(--radio-tarjeta);
}
.cartel--grande .cartel-precio{ font-size:32px; }
.cartel--grande .cartel-unidad{ font-size:14px; }

/* A9 · en la ficha del rol consulta el cartel es aún mayor. */
.cartel--consulta .cartel-precio{ font-size:38px; }

/* Etiqueta "Precio de venta" encima de la cifra, dentro del cartel. */
.cartel-etiqueta{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.72;
}

/* En el cartel pequeño de las filas del listado, el rótulo dice «VENTA» y
   comparte sitio con la unidad: a 11 px las tres líneas harían la fila más
   alta que la foto del producto. */
.cartel:not(.cartel--grande) .cartel-etiqueta{ font-size:9px; letter-spacing:.05em; }

/* Mini: porcentaje de categoría (A6), contador de productos (B5) e
   importe de cuota en los paneles (C1/C2). */
.cartel--mini{ padding:3px 9px; border-radius:8px; }
.cartel--mini .cartel-precio{ font-size:15px; }
.cartel--mini .cartel-unidad{ font-size:10px; }

/* Nota de redondeo bajo el cartel grande (A7). No es amarilla: es texto. */
.nota-redondeo{
  font-size:12px;
  color:#8A6A05;
  text-align:center;
}


/* =========================================================================
   2.4 · CAMPO DE FORMULARIO
   ========================================================================= */

.campo{ display:block; }

.campo-etiqueta{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  color:var(--tinta-suave);
}

.campo-control{
  width:100%;
  height:var(--alto-control-min);
  padding:0 14px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  font-size:16px;   /* 16 px evita que iOS haga zoom al enfocar */
  color:var(--tinta);
}

.campo-control::placeholder{ color:var(--tinta-suave); opacity:.7; }

.campo-control:focus{
  border-color:var(--verde);
  outline:none;
  box-shadow:0 0 0 3px var(--verde-claro);
}

/* Dinero y porcentajes en monoespaciada (§1.2). */
.campo-control--dato{
  font-family:var(--dato);
  font-weight:700;
}

/* Selector: se le quita la flecha del sistema y se dibuja la nuestra. */
select.campo-control{
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7269' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:20px;
}

/* Sufijo dentro del campo (€, %). */
.campo-con-sufijo{ position:relative; }
.campo-con-sufijo .campo-control{ padding-right:38px; }
.campo-sufijo{
  position:absolute;
  right:14px;
  bottom:0;
  height:var(--alto-control-min);
  display:grid;
  place-items:center;
  font-family:var(--dato);
  font-weight:700;
  color:var(--tinta-suave);
  pointer-events:none;
}

/* Elección entre dos opciones (Por kilo / Por unidad). */
.opciones{ display:flex; gap:8px; }
.opciones .opcion{ flex:1; position:relative; }
.opciones input{ position:absolute; opacity:0; pointer-events:none; }
.opcion span{
  display:grid;
  place-items:center;
  min-height:var(--alto-control-min);
  padding:0 12px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  font-size:16px;
  cursor:pointer;
}
.opciones input:checked + span{
  border-color:var(--verde);
  background:var(--verde-claro);
  color:var(--verde);
  font-weight:600;
}
.opciones input:focus-visible + span{ outline:3px solid var(--verde); outline-offset:2px; }


/* =========================================================================
   2.5 · BADGES Y CHIPS
   ========================================================================= */

.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}

/* "Nuevo esta semana": verde, nunca rojo. */
.badge--nuevo{ background:var(--verde); color:#FFFFFF; }

/* El día de la compra, en un círculo pegado a la etiqueta (31-08-2026).
 *
 * Con setenta facturas por semana, el viernes media tienda lleva etiqueta:
 * saber QUE ha entrado esta semana no basta, hace falta QUÉ DÍA. Lo del lunes
 * ya no es fresco el sábado.
 *
 * La letra sola se leería como parte del texto —«Nuevo M»—; el círculo la
 * separa y le da el peso de un dato. Va en blanco sobre verde más oscuro, no
 * al revés: un círculo blanco relleno dentro de la píldora verde pesaría más
 * que el propio texto. */
.badge--con-dia{ display:inline-flex; align-items:center; gap:6px; padding-right:4px; }

.badge-dia{
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--verde-oscuro);
  font-family:var(--dato);
  font-size:10px;
  font-weight:700;
  line-height:1;
  /* La letra queda mejor centrada sin el interletrado de la píldora. */
  letter-spacing:0;
}

/* Estado positivo: Activa, Admin. */
.badge--positivo{ background:var(--verde-claro); color:var(--verde); }

/* Estado negativo: Suspendida. */
.badge--negativo{ background:var(--rojo-claro); color:var(--rojo); }

/* Neutro: Consulta. */
.badge--neutro{
  background:var(--papel);
  border:1px solid var(--linea);
  color:var(--tinta-suave);
}

/* Chip de categoría editable (B5): abre el selector al tocarlo. */
.chip-categoria{
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:relative;
  min-height:34px;
  padding:0 10px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:999px;
  font-size:13px;
  color:var(--tinta);
}
/* El dibujo mide 34 px pero se toca en 44 (§1.3). */
.chip-categoria::after{
  content:"";
  position:absolute;
  inset:calc((var(--tactil-min) - 34px) / -2) 0;
}
.chip-categoria:hover{ background:var(--papel-hundido); }
.chip-categoria .chevron{ color:var(--tinta-suave); font-size:11px; }


/* =========================================================================
   2.6 · FILA DE PRODUCTO
   ========================================================================= */

/* ─── UNA BARRA GRUESA ENTRE PRODUCTOS (01-09-2026) ───────────────────────
 * La raya de 1 px que separa las filas de cualquier tarjeta-lista servía
 * cuando una fila era nombre y precio. Hoy son cinco renglones —nombre,
 * categoría y proveedor, el recuadro de compra, la ganancia y el desglose—, y
 * con veinte productos seguidos la raya se pierde: se acaba leyendo el precio
 * de uno con el nombre del de abajo.
 *
 * Ocho píxeles del gris de los huecos, a sangre. No es un borde más grueso:
 * es una franja, y por eso se ve sin buscarla. Solo en las filas de producto;
 * los demás listados siguen con su raya fina, que ahí basta.
 * ─────────────────────────────────────────────────────────────────────── */
.tarjeta-lista .fila-producto + .fila-producto{
  border-top:8px solid var(--papel-hundido);
}

.fila-producto{
  display:flex;
  /* Con salto: foto, datos y cartel caben en el primer renglón, y la cuenta
     del coste se va al segundo ella sola con su `flex-basis:100%`.
     Así, en vez de partir la fila en dos contenedores —que habría cambiado
     el HTML de todo lo que reutiliza esta clase, como las filas de usuario
     del panel—, la pieza nueva se coloca sola y lo demás no se entera. */
  flex-wrap:wrap;
  align-items:center;
  row-gap:6px;
  column-gap:12px;
  width:100%;
  padding:12px;
  background:var(--papel-alto);
  text-align:left;
}

.fila-producto-foto{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  flex:none;
  background:var(--papel-hundido);
  border-radius:10px;
  overflow:hidden;
  color:var(--tinta-suave);
}
.fila-producto-foto img{ width:100%; height:100%; object-fit:cover; }

.fila-producto-datos{ flex:1; min-width:0; }

/* El nombre se lleva el primer renglón entero de la tarjeta (01-09-2026).
 *
 * Antes iba en la columna del medio, con la foto a un lado y el cartel al
 * otro: le quedaban unos 165 px y «Aceite Coosur virgen extra picual 1 L»
 * salía como «Aceite Coosur virge…». Con tres aceites distintos en el
 * catálogo, eso no identifica ninguno.
 *
 * Cabe en dos líneas y ya no se corta con puntos suspensivos: es el dato por
 * el que se busca, y media palabra no sirve para elegir. */
.fila-producto-nombre{
  flex:0 0 100%;
  font-size:16px;
  font-weight:500;
  line-height:1.25;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* Segunda línea: categoría O badge de nuevo, nunca las dos. */
/* Categoría (o el badge de nuevo) y, desde la 0020, el proveedor. Con salto:
   con el badge de «Nuevo esta semana» delante, un proveedor largo no cabe en
   el mismo renglón en un móvil estrecho, y prefiero que baje a que se corte. */
.fila-producto-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:3px;
  font-size:13px;
  color:var(--tinta-suave);
}

/* El proveedor, con su punto delante para separarlo de la categoría sin meter
   un carácter en el texto —que se leería en voz alta—. Se recorta antes que
   empujar el cartel del precio: el nombre del producto manda. */
/* El proveedor, al pie de la tarjeta y en cursiva (01-09-2026).
 *
 * Iba en la segunda línea, pegado a la categoría, donde compartía los 165 px
 * con la foto y el cartel: «EUROPAMUR ALIMENTACIÓN, S.A.» salía como
 * «EUROPAMUR ALIMENTACIÓ…». Abajo se lleva el renglón entero y cabe.
 *
 * En cursiva porque no es un dato del producto sino de dónde viene: así se
 * distingue sin gastar otro rótulo en una tarjeta que ya tiene dos. */
/* El pie de la tarjeta: de quién viene, y si es de esta semana.
 *
 * Un renglón para los dos. El badge se empuja a la esquina de la derecha con
 * `margin-left:auto`, así que queda ahí haya proveedor o no —un producto hecho
 * a mano no tiene— sin posicionarlo por encima de la tarjeta. */
.fila-producto-pie{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:2px;
  min-height:20px;
}

.fila-producto-pie .badge{ margin-left:auto; flex:none; }

.fila-producto-proveedor{
  min-width:0;
  font-size:13px;
  font-style:italic;
  color:var(--tinta-suave);
}


/* =========================================================================
   2.7 · INTERRUPTOR  (paneles web)
   ========================================================================= */

.interruptor{
  display:inline-flex;
  align-items:center;
  position:relative;
  min-height:var(--tactil-min);
  cursor:pointer;
}

.interruptor input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.interruptor-pista{
  display:block;
  width:40px;
  height:22px;
  padding:2px;
  background:var(--linea);
  border-radius:999px;
  transition:background .15s ease;
}

.interruptor-bola{
  display:block;
  width:18px;
  height:18px;
  background:#FFFFFF;
  border-radius:50%;
  transition:transform .15s ease;
}

.interruptor input:checked + .interruptor-pista{ background:var(--verde); }
.interruptor input:checked + .interruptor-pista .interruptor-bola{ transform:translateX(18px); }
.interruptor input:focus-visible + .interruptor-pista{ outline:3px solid var(--verde); outline-offset:2px; }

/* Fila de usuario desactivado: atenuada, con la nota "no se factura". */
.desactivado{ opacity:.55; }


/* =========================================================================
   2.8 · POP-UP MODAL
   ========================================================================= */

.modal-fondo{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--velo);
}
.modal-fondo[hidden]{ display:none; }

.modal{
  width:100%;
  max-width:340px;
  padding:24px;
  background:var(--papel);
  border-radius:var(--radio-modal);
  text-align:center;
}

.modal-icono{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin:0 auto 14px;
  border-radius:50%;
  color:var(--tinta);
}
/* Aviso (A4, sin conexión): círculo amarillo con el icono en tinta. Aquí el
   amarillo es advertencia, no dinero; es el único uso que la guía autoriza. */
.modal-icono--aviso{ background:var(--amarillo); border:1.5px solid var(--amarillo-borde); }
/* Error (B6) o confirmación de borrado (A8). */
.modal-icono--error{ background:var(--rojo-claro); border:1.5px solid var(--rojo); color:var(--rojo); }
.modal-icono--exito{ background:var(--verde-claro); border:1.5px solid var(--verde); color:var(--verde); }

.modal-titulo{ font-size:18px; font-weight:600; }

.modal-texto{
  margin-top:8px;
  font-size:14.5px;
  color:var(--tinta-suave);
  /* Respeta los saltos de línea del texto. Hace falta desde que algún modal
   * separa en párrafos lo que se hace de lo que conviene saber antes de
   * hacerlo: en un solo bloque, el aviso se lee sin enterarse. */
  white-space:pre-line;
}

.modal .boton,
.modal .fila{ margin-top:20px; }


/* =========================================================================
   2.9 · ESTADO VACÍO
   ========================================================================= */

.estado-vacio{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:44px 24px;
  text-align:center;
}

.estado-vacio .icono{ width:52px; height:52px; color:var(--tinta-suave); stroke-width:1.3; }

.estado-vacio-titulo{ font-size:17px; font-weight:600; }

.estado-vacio-texto{
  font-size:14px;
  color:var(--tinta-suave);
  max-width:32ch;
}

.estado-vacio .boton{ margin-top:8px; max-width:320px; }


/* =========================================================================
   PIEZAS QUE LA GUÍA DESCRIBE DENTRO DE UNA PANTALLA CONCRETA

   No son componentes del §2, pero se repiten y merecen nombre propio. Si
   alguna acaba usándose en tres sitios, sube al §2 y entra en el escaparate.
   ========================================================================= */

/* Enlace de texto en verde: el "Cambiar" de A2. */
.enlace{
  background:none;
  border:none;
  padding:8px;
  margin:-8px;
  color:var(--verde);
  font-size:14px;
  font-weight:500;
  text-decoration:underline;
}

/* Aviso de error bajo un formulario. Rojo, que aquí sí toca. */
.aviso-error{
  padding:12px 14px;
  background:var(--rojo-claro);
  border:1px solid var(--rojo);
  border-radius:var(--radio);
  color:var(--rojo);
  font-size:14px;
}

/* Nota con icono, centrada. El pie del login (A1). */
.nota-centrada{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  font-size:12px;
}
.nota-centrada .icono{ flex:none; color:var(--tinta-suave); }

/* A2 · Tarjeta de la empresa recordada. */
.tarjeta-empresa{ display:flex; align-items:center; gap:12px; }
.tarjeta-empresa-icono{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  flex:none;
  background:var(--verde-claro);
  border-radius:10px;
  color:var(--verde);
}
.tarjeta-empresa-datos{ flex:1; min-width:0; }
.tarjeta-empresa-nombre{ font-size:16px; font-weight:600; }

/* A1 · El ojo que enseña la contraseña, dentro del campo. */
.campo-con-ojo{ position:relative; }
.campo-con-ojo .campo-control{ padding-right:52px; }
.campo-ojo{
  position:absolute;
  right:0;
  bottom:0;
  width:52px;
  height:var(--alto-control-min);
  display:grid;
  place-items:center;
  color:var(--tinta-suave);
  border-radius:var(--radio);
}
.campo-ojo:hover{ color:var(--tinta); }

/* A3 · Cabecera de la pantalla principal, con avatar a la derecha. */
.cabecera--inicio{ align-items:center; }
.cabecera-inicio-datos{ flex:1; min-width:0; }
.cabecera-marca{ font-size:19px; }

/* La marca y, si toca, el aviso de que los datos son de mentira. */
.cabecera-marca-linea{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.cabecera-inicio-linea{
  margin-top:2px;
  font-size:13px;
  opacity:.75;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Cuadrado con la inicial. Cuadrado y no redondo: la marca no usa círculos. */
.avatar{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  flex:none;
  background:rgba(255,255,255,.14);
  border-radius:10px;
  color:var(--tinta-clara);
  font-family:var(--display);
  font-size:19px;
  font-weight:700;
}
.avatar:hover{ background:rgba(255,255,255,.24); }

/* El login y la pantalla principal reparten el aire de otra manera: sus
   pocos elementos se centran en vertical en lugar de apelotonarse arriba. */
.contenido--login{ justify-content:center; gap:16px; padding-top:24px; }
/* ─── A3 · LOS BOTONES SE REPARTEN LA PANTALLA ────────────────────────────
 * Antes iban centrados con su alto natural, y en un móvil de hoy sobraba
 * media pantalla de aire entre la cabecera y el primer botón: la app parecía
 * a medio cargar.
 *
 * Ahora los dos gigantes crecen hasta llenar lo que haya. En un iPhone normal
 * pasan de unos 120 px a cerca de 200 cada uno, y fallar el toque se vuelve
 * casi imposible, que es de lo que se trata con este público.
 * ──────────────────────────────────────────────────────────────────────── */
.contenido--inicio{ gap:16px; }

.contenido--inicio .boton--gigante{
  /* Crecen a partes iguales con lo que sobre, pero nunca por debajo de su
   * tamaño de siempre: en una pantalla baja —o con el teclado abierto— el
   * botón no puede encogerse hasta dejar de ser tocable. */
  flex:1 1 auto;
  min-height:132px;
  /* Y con tope, porque en una tableta dos botones de media pantalla cada uno
   * dejan de parecer botones. */
  max-height:260px;
}

/* A5 · Cabecera con el buscador dentro del verde. */
.cabecera--precios{ flex-direction:column; align-items:stretch; gap:12px; }
.cabecera-linea{ display:flex; align-items:center; gap:12px; }

.buscador{
  display:flex;
  align-items:center;
  gap:8px;
  height:50px;
  padding:0 8px 0 12px;
  background:rgba(255,255,255,.14);
  border-radius:var(--radio);
  color:var(--tinta-clara);
}
/* El mismo buscador, pero fuera de la cabecera verde: en el detalle de una
 * factura va en el cuerpo de la pantalla, sobre papel. Ahí el hueco
 * translúcido y el texto claro serían casi blanco sobre casi blanco.
 *
 * Se le da la pinta de un campo de formulario, que es lo que parece estando
 * donde está: blanco con borde de línea y texto de tinta. */
.buscador--papel{
  background:var(--papel-alto);
  border:1px solid var(--linea);
  color:var(--tinta);
}
.buscador--papel .buscador-campo::placeholder{ color:var(--tinta-suave); opacity:1; }

.buscador-lupa{ display:grid; place-items:center; opacity:.7; flex:none; }

.buscador-campo{
  flex:1;
  min-width:0;
  height:100%;
  background:none;
  border:none;
  color:inherit;
  font-size:16px;
}
.buscador-campo::placeholder{ color:var(--tinta-clara); opacity:.55; }
.buscador-campo:focus{ outline:none; }
/* La equis que Safari y Chrome meten en los input de búsqueda desentona. */
.buscador-campo::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* El micrófono es amarillo. Es la única vez que el amarillo no dice dinero:
   aquí dice "esto se toca", y así lo pide la guía en A5. */
.btn-microfono{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  flex:none;
  background:var(--amarillo);
  border:1.5px solid var(--amarillo-borde);
  border-radius:9px;
  color:var(--tinta);
}
.btn-microfono.escuchando{
  animation:latido 1s ease-in-out infinite;
}
@keyframes latido{
  50%{ transform:scale(1.12); }
}

/* §6 · Banner discreto bajo la cabecera cuando no hay red. */
.banner-offline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px var(--margen);
  background:var(--papel-hundido);
  border-bottom:1px solid var(--linea);
  color:var(--tinta-suave);
  font-size:12px;
}

/* Escáner a pantalla completa. Fondo oscuro para que mande la imagen. */
.escaner-pantalla{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  background:var(--tinta);
  color:var(--tinta-clara);
}

.escaner-barra{
  display:flex;
  align-items:center;
  gap:12px;
  padding:var(--margen);
}
.escaner-barra .btn-icono{ color:var(--tinta-clara); }
/* La equis se hace girando el icono de la cruz: un dibujo menos que mantener. */
.escaner-barra .btn-icono .icono{ transform:rotate(45deg); }
.escaner-titulo{
  font-family:var(--display);
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.escaner-visor{
  position:relative;
  flex:1;
  overflow:hidden;
  background:#000;
}
.escaner-video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Marco guía punteado en amarillo, como el de la cámara de facturas. */
.escaner-marco{
  position:absolute;
  left:8%; right:8%;
  top:50%;
  height:34%;
  transform:translateY(-50%);
  border:2px dashed rgba(243,198,35,.8);
  border-radius:var(--radio);
}

.escaner-pie{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px var(--margen) 28px;
  text-align:center;
}
.escaner-instruccion{ font-size:15px; opacity:.85; }
.escaner-aviso{
  padding:12px 14px;
  background:var(--rojo-claro);
  border-radius:var(--radio);
  color:var(--rojo);
  font-size:14px;
}

/* A8 y A9 · Ficha de producto. */
.ficha-foto{
  display:grid;
  place-items:center;
  height:130px;
  background:var(--papel-hundido);
  border-radius:var(--radio-tarjeta);
  overflow:hidden;
  color:var(--tinta-suave);
}
.ficha-foto img{ width:100%; height:100%; object-fit:cover; }

.ficha-titulo{ display:flex; align-items:flex-start; gap:12px; }
.ficha-titulo-texto{ flex:1; min-width:0; }
.ficha-nombre{ font-size:21px; font-weight:600; line-height:1.2; }

/* Tarjeta de datos: etiqueta a la izquierda, valor a la derecha. */
.ficha-fila{
  display:flex;
  flex-direction:column;
  padding:12px var(--margen);
}
.ficha-etiqueta{ font-size:14px; color:var(--tinta-suave); }
.ficha-valor{ font-size:15px; text-align:right; }
.ficha-valor--verde{ color:var(--verde); font-weight:700; }
.ficha-valor--aviso{ color:#8A6A05; }

/* A7 · La foto elegida y el código escaneado, antes de guardar. */
.foto-elegida{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio-tarjeta);
}
.foto-elegida img{
  width:72px; height:72px;
  flex:none;
  object-fit:cover;
  border-radius:10px;
}

.codigo-elegido{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  font-size:14px;
}
.codigo-elegido .icono{ color:var(--tinta-suave); }
.codigo-elegido span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* =========================================================================
   FLUJO DE FACTURA · B1 a B6
   ========================================================================= */

/* B1 · La pregunta y los botones-tarjeta de categoría. */
.pregunta{ font-size:18px; font-weight:600; }

.tarjeta-categoria{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:20px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio-tarjeta);
  text-align:left;
  color:var(--tinta);
}
.tarjeta-categoria:hover{ border-color:var(--verde); background:var(--verde-claro); }
.tarjeta-categoria .icono{ color:var(--verde); flex:none; }
.tarjeta-categoria-nombre{ font-size:18px; font-weight:500; }

/* B2 · Cámara a pantalla completa. Oscura y a sangre: manda la imagen. */
.camara-pantalla{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  background:var(--tinta);
  color:var(--tinta-clara);
}

.camara-barra{
  display:flex;
  align-items:center;
  gap:12px;
  padding:var(--margen);
  flex:none;
}
.camara-barra .btn-icono{ color:var(--tinta-clara); }
.camara-barra .btn-icono .icono{ transform:rotate(45deg); }   /* la cruz, girada */
.camara-titulo{
  font-family:var(--display);
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.camara-visor{
  position:relative;
  flex:1;
  overflow:hidden;
  background:#000;
}
.camara-video{ width:100%; height:100%; object-fit:cover; }

/* Marco guía punteado, amarillo al 80 %. Proporción de folio en vertical. */
.camara-marco{
  position:absolute;
  left:7%; right:7%;
  top:6%; bottom:16%;
  border:2px dashed rgba(243,198,35,.8);
  border-radius:var(--radio);
}

.camara-instruccion{
  position:absolute;
  left:0; right:0;
  bottom:5%;
  padding:0 32px;
  text-align:center;
  font-size:15px;
  color:#EFF3EA;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}

.camara-aviso{
  position:absolute;
  inset:auto 20px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  background:var(--papel);
  border-radius:var(--radio-tarjeta);
  color:var(--tinta);
  font-size:14.5px;
}

.camara-pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px var(--margen) 30px;
  flex:none;
}

.boton-galeria,
.camara-hueco{
  width:52px; height:52px;
  flex:none;
}
.boton-galeria{
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  border-radius:12px;
  color:var(--tinta-clara);
}
.boton-galeria:hover{ background:rgba(255,255,255,.26); }

/* Disparador: anillo y relleno blancos, 76 px. */
.disparador{
  display:grid;
  place-items:center;
  width:76px; height:76px;
  flex:none;
  background:none;
  border:4px solid #FFFFFF;
  border-radius:50%;
}
.disparador-relleno{
  display:block;
  width:58px; height:58px;
  background:#FFFFFF;
  border-radius:50%;
  transition:transform .12s ease;
}
.disparador:active .disparador-relleno{ transform:scale(.88); }
.disparador:disabled{ opacity:.4; }

/* B3 · La foto, con zoom de dos dedos.
 *
 * ─── EL DEDO TIENE QUE PODER DESLIZAR ENCIMA DE LA FOTO ──────────────────
 * Esto tenía `touch-action:pinch-zoom`, que permite el pellizco y ANULA el
 * arrastre de un dedo. Con dos hojas la pantalla no cabe, y el dedo se
 * quedaba muerto justo encima de lo único que ocupa la pantalla: había que
 * buscar un hueco fuera de las fotos para poder bajar.
 *
 * Y llevaba de propina que la foto estaba recortada a su alto máximo con
 * `overflow:auto`: como el arrastre estaba anulado, la parte de abajo de cada
 * hoja NO SE PODÍA VER de ninguna manera. En la pantalla que existe para
 * comprobar si la factura se lee bien.
 *
 * Ahora `pan-y` devuelve el arrastre vertical —que sube a la página, porque
 * aquí dentro ya no hay nada que desplazar— y `pinch-zoom` conserva la lupa
 * de dos dedos, que es la que sirve para mirar los números.
 * (30-08-2026, primera prueba de campo.)
 * ─────────────────────────────────────────────────────────────────────────
 */
.previsualizacion{
  background:var(--papel-hundido);
  border:1px solid var(--linea);
  border-radius:var(--radio-tarjeta);
  overflow:hidden;
  touch-action:pan-y pinch-zoom;
}
/* La hoja ENTERA, encajada. Antes se recortaba, y en esta pantalla ver el
   final de la factura es media razón de estar aquí: si el papel sigue más
   allá del borde de la foto, falta encuadre. */
.previsualizacion img{
  width:100%;
  max-height:62vh;
  object-fit:contain;
  display:block;
}

/* B4 · Procesando. */
.contenido--procesando{ justify-content:center; gap:20px; text-align:center; }

.procesando-icono{
  display:grid;
  place-items:center;
  width:84px; height:84px;
  margin:0 auto;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:50%;
  color:var(--verde);
}
.procesando-titulo{ font-size:20px; font-weight:600; }

.pasos-factura{ text-align:left; }
.paso-factura{ display:flex; align-items:center; gap:12px; padding:14px var(--margen); }

.paso-marca{
  display:grid;
  place-items:center;
  width:24px; height:24px;
  flex:none;
  border-radius:50%;
}
.paso-marca--hecho{ background:var(--verde); color:#FFFFFF; }
.paso-marca--hecho .icono{ width:15px; height:15px; stroke-width:2.6; }
.paso-marca--espera{ border:2px solid var(--linea); }

/* El que está en marcha: anillo ámbar girando. */
.paso-marca--ahora{
  border:2.5px solid var(--amarillo-borde);
  border-top-color:transparent;
  animation:girar .8s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

.paso-texto{ font-size:15.5px; color:var(--tinta-suave); }
.paso-texto--ahora{ color:var(--tinta); font-weight:500; }

/* B5 · Resumen. */
.tarjeta-proveedor{ display:flex; align-items:center; gap:16px; }
.tarjeta-proveedor-datos{ flex:1; min-width:0; }
.tarjeta-proveedor-nombre{ font-size:17px; font-weight:600; }

.fila-resumen{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px var(--margen);
  background:var(--papel-alto);
}
/* Las dos columnas de siempre. Antes eran la fila entera; ahora son su mitad
 * de arriba, porque debajo va la cuenta del coste a ancho completo. */
.fila-resumen-alto{ display:flex; align-items:flex-start; gap:12px; }
.fila-resumen-datos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.fila-resumen-nombre{ font-size:16px; font-weight:500; }
.fila-resumen-precio{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; }
.fila-resumen-detalle{ font-size:11px; color:var(--tinta-suave); white-space:nowrap; }

/* B5 · Quitar una línea que la IA ha leído mal.
 *
 * Roja, como todo lo que destruye. Con la palabra al lado y no solo el icono:
 * una papelera suelta en una fila llena de cifras no se lee como un botón, y
 * quien usa esto no tiene soltura con el móvil.
 *
 * Dibuja poco —va debajo del chip de categoría, en una fila ya apretada— pero
 * conserva sus 44 px de objetivo táctil con relleno vertical y un margen
 * negativo que lo compensa: el hueco tocable no ocupa sitio. Es el mismo
 * apaño que el lápiz del cartel pequeño. */
.fila-resumen-borrar{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:11px 6px;
  margin:-11px -6px;
  background:none;
  border:none;
  font:inherit;
  font-size:12px;
  color:var(--rojo);
  cursor:pointer;
}
.fila-resumen-borrar:active{ opacity:.6; }

.fila-mas{
  display:block;
  width:100%;
  padding:14px var(--margen);
  background:var(--papel-alto);
  color:var(--verde);
  font-size:15px;
  font-weight:500;
  text-align:center;
}
.fila-mas:hover{ background:var(--verde-claro); }

/* B6 · Error. */
.contenido--error{ justify-content:center; gap:16px; text-align:center; }
.error-circulo{ width:64px; height:64px; margin-bottom:4px; }
.error-titulo{ font-size:21px; font-weight:600; }
.error-motivo{ font-size:15px; text-align:left; }
.contenido--error .tarjeta{ text-align:left; }

/* B5 · Las líneas que la IA no ha leído con seguridad.
   El aviso es ámbar y no rojo: no es un error, es "míralo tú". El rojo está
   reservado a lo que ha salido mal de verdad. */
.aviso-revisar{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  background:var(--papel-alto);
  border:1px solid var(--amarillo-borde);
  border-left-width:4px;
  border-radius:var(--radio);
  font-size:14px;
}
.aviso-revisar .icono{ color:#8A6A05; flex:none; margin-top:1px; }

.fila-resumen--dudosa{ background:#FFFBEC; }

/* La marca junto al nombre. Un signo, no un icono: se lee a la primera y no
   compite con el cartel del precio, que es lo que hay que mirar. */
.marca-revisar{
  display:inline-grid;
  place-items:center;
  width:18px; height:18px;
  margin-right:7px;
  background:var(--amarillo);
  border:1.5px solid var(--amarillo-borde);
  border-radius:50%;
  color:var(--tinta);
  font-family:var(--dato);
  font-size:12px;
  font-weight:700;
  vertical-align:-2px;
}

/* B3 · Las hojas de una factura de varias páginas. */
.hoja-factura{
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio-tarjeta);
  overflow:hidden;
}
.hoja-factura-barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--linea);
}
.hoja-factura-numero{
  font-family:var(--display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}
/* Con varias hojas, cada una más baja: si no, dos fotos a 62vh son dos
   pantallas y media de bajar antes de llegar a los botones. */
.hoja-factura .previsualizacion{ border:none; border-radius:0; }
.hoja-factura .previsualizacion img{ max-height:44vh; }

/* El descuadre es más serio que una línea dudosa: puede faltar media
   factura. Rojo, porque aquí sí ha salido algo mal. */
.aviso-revisar--serio{
  border-color:var(--rojo);
  background:var(--rojo-claro);
}
.aviso-revisar--serio .icono{ color:var(--rojo); }
.aviso-revisar-titulo{ font-weight:600; margin-bottom:2px; }

/* --- Visor de la factura (desde la ficha de producto) --------------------- */

.visor{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--verde-oscuro);
  color:var(--tinta-clara);
  z-index:60;
}

.visor-barra{
  display:flex;
  align-items:center;
  gap:12px;
  padding:var(--margen);
  flex:none;
}
.visor-barra .btn-icono{ color:var(--tinta-clara); }
.visor-barra .btn-icono .icono{ transform:rotate(45deg); }   /* la cruz, girada */

.visor-titulo{
  font-family:var(--display);
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:.05em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Una hoja por pantalla, con imán al soltar. Lo hace el navegador: no hay ni
   un gesto programado a mano, que es donde esto se rompe en iPhone. */
.visor-hojas{
  flex:1;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.visor-hoja{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:grid;
  place-items:center;
  padding:0 4px;
  /* El pellizco del navegador es la lupa: hace mejor zoom que cualquier cosa
     que programáramos, y es el gesto que la gente ya conoce.

     `pan-x` va delante y no es un adorno: sin él se anula el arrastre de un
     dedo, y como cada hoja ocupa el ancho entero y no hay flechas, pasar de
     página era imposible —la hoja 2 de una factura no se podía llegar a ver—.
     El mismo fallo que en la previsualización de B3, y de la misma línea. */
  touch-action:pan-x pinch-zoom;
  overflow:hidden;
}

.visor-imagen{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  background:var(--papel-alto);
  border-radius:var(--radio);
}

.visor-pie{
  flex:none;
  padding:12px var(--margen) calc(12px + env(safe-area-inset-bottom));
  text-align:center;
  font-size:13px;
  opacity:.75;
  min-height:20px;
}

.visor-cargando,
.visor-aviso{
  margin:auto;
  display:grid;
  gap:var(--hueco);
  justify-items:center;
  text-align:center;
  padding:var(--margen);
}

/* Botonera de la ficha de admin: «Ver factura» a ancho completo encima de
   la pareja editar/eliminar. */
.acciones-ficha{
  display:grid;
  gap:var(--hueco);
}

/* --- Archivo de facturas: proveedores (A10) y sus facturas (A11) ---------- */

.fila-proveedor,
.fila-factura{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:var(--alto-control-min);
  padding:14px var(--margen);
  background:transparent;
  border-bottom:1px solid var(--linea);
  text-align:left;
  color:inherit;
}
.tarjeta-lista .fila-proveedor:last-child,
.tarjeta-lista .fila-factura:last-child{ border-bottom:0; }

.fila-proveedor:hover,
.fila-factura:hover{ background:var(--papel-hundido); }

.fila-proveedor-datos,
.fila-factura-datos{
  flex:1;
  min-width:0;
}

/* El proveedor, que es lo que identifica cada factura de la lista.
 *
 * Cabe en DOS renglones y no se corta con puntos suspensivos: «FRUTAS RELA…»
 * y «FRUTAS RELAMPAGO, S.L.» son lo mismo para quien busca, pero «Hortalizas
 * y Verd…» no distingue nada. Desde que la lista va por fecha y mezcla
 * proveedores, el nombre es el dato que se lee. */
.fila-factura-proveedor{
  font-size:16px;
  font-weight:500;
  line-height:1.25;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.fila-proveedor-nombre,
.fila-factura-fecha{
  font-size:16px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* La flecha de «entrar», que es la de atrás girada. */
.icono-flecha-derecha{
  width:20px;
  height:20px;
  flex:none;
  transform:rotate(180deg);
  color:var(--tinta-suave);
}

/* --- A10 · Las facturas que se quedaron a medias ---------------------------
 *
 * Va arriba del archivo de facturas y es lo único de esa pantalla que pide
 * hacer algo, así que se separa con su título en vez de mezclarse con la
 * lista de proveedores.
 *
 * Sin rojo a propósito, aunque sean facturas falladas: el rojo es peligro
 * —errores, borrados, cerrar sesión— y esto no se ha perdido, se recupera con
 * un botón. Pintarlo de alarma asustaría sin motivo. */
.bloque-sin-terminar{
  margin-bottom:24px;
}

.bloque-sin-terminar .titulo-seccion{
  margin-bottom:4px;
}

.bloque-sin-terminar > .texto-secundario{
  margin-bottom:12px;
}

/* No es un botón entero como la fila de proveedor: el botón va dentro, así
 * que la fila no se ilumina al pasar por encima. */
.fila-sin-terminar{
  gap:12px;
  cursor:default;
}

.fila-sin-terminar:hover{ background:transparent; }

/* Que el botón no se estire ni se estreche: el nombre de la factura es lo que
 * cede, y para eso ya lleva puntos suspensivos. */
.fila-sin-terminar .boton{
  flex:none;
  width:auto;
  padding-inline:16px;
}

/* --- A10 y A11 · Borrar una factura ----------------------------------------
 *
 * La fila deja de ser un botón entero y pasa a tener dos: abrir y borrar. Un
 * botón dentro de otro no es HTML válido, y en un móvil sería además una
 * trampa —tocar para borrar y abrir la foto sin querer, o al revés—. */
.fila-factura-abrir{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
  padding:0;
  background:transparent;
  border:0;
  text-align:left;
  color:inherit;
}

/* La papelera. Rojo porque es un borrado, que es de las tres cosas para las
 * que el rojo existe en este proyecto.
 *
 * El dibujo son 20 px pero el objetivo táctil son 44: en la lista de facturas
 * las filas van pegadas, y un objetivo pequeño entre dos filas es una
 * equivocación esperando a pasar. */
.boton-borrar-fila{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:44px;
  height:44px;
  margin-left:4px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:var(--radio);
  color:var(--rojo);
  cursor:pointer;
}

.boton-borrar-fila:hover{ background:var(--rojo-claro); }

.boton-borrar-fila:active{ transform:scale(0.94); }

/* La versión al pie de Ajustes. Centrada y apagada: está para consultarla
 * cuando se publica una corrección, no para leerla todos los días. */
.nota-version{
  margin-top:8px;
  text-align:center;
  color:var(--tinta-suave);
  font-size:12px;
}

/* --- A5 · Filtrar por categoría con un toque -------------------------------
 *
 * Fila de chips que se desliza si no caben. Es la alternativa a teclear y a
 * hablar, para quien tiene el cliente delante y poca soltura con el móvil.
 *
 * En verde y nunca en amarillo, aunque sea lo más llamativo de la fila: el
 * amarillo de esta app es dinero y solo dinero. */
.filtros-categoria{
  display:flex;
  gap:8px;
  /* Se sale de los márgenes del contenido para que el primer chip empiece
   * pegado al borde, como la lista de abajo, y se vea que hay más a la
   * derecha cuando se cortan. */
  margin-inline:calc(var(--margen) * -1);
  padding-inline:var(--margen);
  overflow-x:auto;
  /* Sin barra visible: en el móvil estorba y no la usa nadie. */
  scrollbar-width:none;
}

.filtros-categoria::-webkit-scrollbar{ display:none; }

.chip-filtro{
  flex:none;
  min-height:var(--tactil-min);
  padding:0 16px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:999px;
  font-size:15px;
  color:var(--tinta);
  white-space:nowrap;
  cursor:pointer;
}

.chip-filtro:hover{ background:var(--papel-hundido); }

/* El elegido. aria-pressed no es decoración: es lo que un lector de pantalla
 * anuncia, así que el color y el estado salen del mismo sitio y no pueden
 * decir cosas distintas. */
.chip-filtro[aria-pressed="true"]{
  background:var(--verde);
  border-color:var(--verde);
  color:#FFFFFF;
  font-weight:500;
}

.chip-filtro[aria-pressed="true"]:hover{ background:#28603D; }

/* --- A1 · «¿No te acuerdas de la contraseña?» -------------------------------
 *
 * Va DEBAJO del botón de entrar, no encima: es la salida para quien no puede
 * entrar, no una opción que compita con entrar. Puesta antes, la lee todo el
 * mundo cada día para no usarla nunca.
 *
 * Centrada y en verde, no en rojo: no ha pasado nada malo. */
.enlace-suelto{
  align-self:center;
  min-height:var(--tactil-min);
  padding:0 12px;
  background:transparent;
  border:0;
  font-size:14px;
  cursor:pointer;
}

/* --- A5b · El código que se va a pegar --------------------------------------
 *
 * Se enseña grande y en monoespaciada porque quien está en esta pantalla tiene
 * el envase en la mano: es lo único que le permite comprobar que el escáner no
 * ha leído otra cosa antes de pegárselo a un producto.
 *
 * En gris y no en amarillo: es un número de referencia, no dinero. */
.aviso-codigo{
  padding:12px var(--margen);
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio-tarjeta);
  text-align:center;
}

.codigo-leido{
  margin-top:2px;
  font-family:var(--dato);
  font-weight:700;
  font-size:20px;
  letter-spacing:.06em;
  color:var(--tinta);
}

/* --- A6b · Borrar varios productos ------------------------------------------
 *
 * Fila con casilla. Es un <label> entero para que valga tocar en cualquier
 * sitio: en el móvil, apuntar a una casilla de 20 px con el dedo es pedir que
 * se marque la de al lado. */
.fila-elegible{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:var(--alto-control-min);
  padding:12px var(--margen);
  border-bottom:1px solid var(--linea);
  cursor:pointer;
}

.tarjeta-lista .fila-elegible:last-child{ border-bottom:0; }

.fila-elegible-datos{ flex:1; min-width:0; }

/* Lo elegido se ve de un vistazo aunque la casilla quede fuera de la mirada,
 * que con veinte filas en pantalla pasa constantemente. */
.fila-elegible.elegida{ background:var(--verde-claro); }

.casilla{
  flex:none;
  width:24px;
  height:24px;
  accent-color:var(--verde);
}

/* La barra de abajo va fija: con cien productos, el botón de borrar quedaría
 * a diez pantallas de scroll y no se sabría cuántos hay elegidos. */
.barra-seleccion{
  position:sticky;
  bottom:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px var(--margen);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--papel);
  border-top:1px solid var(--linea);
}

/* A7 · Lo que de verdad se paga, debajo del cartel de venta.
 *
 * Sin esta línea la cuenta no le sale a quien mira: 0,88 con un 30 % no da
 * 1,20 € por ninguna parte hasta que se ve el 0,92 de en medio. */
.nota-pagado{
  margin-top:-4px;
  text-align:center;
}

/* --- A3 · Aviso de que el lector de facturas está fallando ------------------
 *
 * En rojo, que es una de las tres cosas para las que el rojo existe aquí: un
 * error. No es un aviso de cortesía —significa que la herramienta no está
 * haciendo su trabajo—.
 *
 * Debajo de la cabecera y encima de los botones: es lo primero que hay que
 * saber al abrir, antes de intentar meter una factura que va a fallar. */
.banner-fallo{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px var(--margen);
  background:var(--rojo-claro);
  border-bottom:1px solid var(--rojo);
  color:var(--rojo);
}

.banner-fallo .icono{ flex:none; margin-top:2px; }

.banner-fallo-texto{ flex:1; min-width:0; }

.banner-fallo-texto p{ font-size:14px; font-weight:500; }

/* El motivo, más apagado: importa, pero lo primero es el titular. */
.banner-fallo-texto .texto-secundario{
  margin-top:2px;
  font-weight:400;
  color:var(--rojo);
  opacity:.85;
}

/* ─── EL MISMO BANNER, EN GRIS, PARA AVISAR SIN ALARMAR (0031) ──────────────
 * «Al crédito de la IA le quedan 1,40 €» no es un error: hay tiempo. El rojo
 * se guarda para cuando está a cero y la herramienta ya no hace su trabajo.
 * Es un <button> porque lleva a Ajustes, donde se apunta la recarga; hereda
 * el aspecto del banner y solo hay que quitarle lo que el navegador le pone
 * a un botón. */
.banner-fallo--aviso{
  background:var(--papel-hundido);
  border-bottom-color:var(--linea);
  color:var(--tinta);
}

.banner-fallo--aviso .texto-secundario{ color:var(--tinta-suave); opacity:1; }

button.banner-fallo{
  width:100%;
  border-top:0;
  border-left:0;
  border-right:0;
  font:inherit;
  text-align:left;
  cursor:pointer;
  min-height:var(--tactil-min);
}

/* A11 · Lo que costó que la IA leyera la factura (0031). Un renglón más bajo
 * la fecha, en el mismo gris: es un dato de cuentas, no de la factura. */
.tarjeta-proveedor-coste-ia{ margin-top:4px; font-family:var(--dato); font-size:12px; }

/* --- A8 · La fila con su desglose debajo -----------------------------------
 *
 * La fila pasa a apilar: la línea de siempre arriba y, si la hay, la cuenta
 * debajo. Agrupa en una sola fila lo que antes eran cuatro —base, IVA,
 * recargo y total— y se lee como la operación que es. */
.ficha-fila-linea{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.ficha-desglose{
  margin-top:4px;
  font-family:var(--dato);
  font-size:12px;
  color:var(--tinta-suave);
  /* En una pantalla estrecha parte por los espacios que rodean los signos,
   * nunca por dentro de una cifra: «0,0» y «56» en renglones distintos sería
   * peor que no enseñar la cuenta. */
  overflow-wrap:break-word;
}

/* --- A3 · La rueda de ajustes junto al avatar -------------------------------
 *
 * .btn-icono lleva un margen negativo para que el dibujo de 24 px quede
 * alineado con el borde aunque su objetivo táctil sea de 44. En A5 funciona
 * porque es el último elemento; aquí tiene el avatar al lado, y ese −10 px se
 * come el hueco entre los dos y los deja pegados.
 *
 * Se le quita solo por la derecha: por arriba y por abajo sigue haciendo su
 * trabajo, y el objetivo táctil no cambia. */
.cabecera--inicio .btn-icono{ margin-right:0; }

/* A6 · El redondeo, debajo del nombre de la categoría.
 *
 * Se toca mucho menos que la ganancia —se elige una vez al montar la tienda—
 * así que va pequeño y no compite con el cartel amarillo. Pero está ahí
 * porque es la otra mitad de cómo sale el precio. */
.enlace-redondeo{
  align-self:flex-start;
  margin-top:2px;
  padding:4px 0;
  font-size:13px;
}

/* --- A5 · Coste y ganancia en la fila del listado (solo admin) --------------
 *
 * Tercera línea de la fila, debajo del nombre y de la categoría. La tarjeta
 * gana altura a propósito: quien lleva la tienda quiere ver de un vistazo qué
 * le costó y cuánto gana, sin entrar en la ficha de cada producto.
 *
 * Monoespaciadas para que las cifras queden en columna al recorrer la lista, y
 * a 15 px: más pequeñas que el precio de venta —18 px— pero lejos del tamaño
 * de una nota al pie. Este público mira estas cifras de lejos.
 *
 * NUNCA en amarillo. El amarillo de esta app es el precio de venta y solo eso;
 * un coste en amarillo se confundiría con lo que se cobra, que es el peor
 * error posible en un mostrador. */
.fila-producto-cuentas{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:5px;
  font-family:var(--dato);
  font-size:15px;
  font-weight:700;
}

/* ─── EL PRECIO DE COMPRA, EN SU RECUADRO (01-09-2026) ────────────────────
 * Iba suelto, a 15 px y en gris de texto secundario, como un dato de apoyo.
 * Lo es todo menos eso: quien lleva la tienda lo mira tanto como el de venta
 * —es la mitad de la cuenta— y a la luz de un mostrador no se leía de lejos.
 *
 * Ahora es un recuadro con el rótulo encima y la cifra debajo, con la misma
 * forma que el cartel de venta que tiene al lado. Las dos cifras de dinero de
 * la fila se encuentran de un vistazo y se distinguen sin pensar.
 *
 * ─── PERO NO ES AMARILLO, Y NO PUEDE SERLO ───────────────────────────────
 * Es la regla de oro del proyecto (§3): el amarillo es el precio al que se
 * vende y nada más. Un coste en amarillo se confundiría con lo que se cobra,
 * que es justo el error que este recuadro viene a evitar. Va en papel con
 * borde de línea, y la cifra y el rótulo en negro.
 * ─────────────────────────────────────────────────────────────────────── */
.fila-producto-compra{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  padding:4px 10px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:10px;
  line-height:1.15;
}

.fila-producto-compra-rotulo{
  font-family:var(--cuerpo);
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--tinta);
}

.fila-producto-coste{
  font-size:19px;
  font-weight:700;
  color:var(--tinta);
}

/* La ganancia en verde, como en la ficha del producto: es lo que se gana. */
.fila-producto-ganancia{ color:var(--verde); }

/* A5 · La cuenta de ese coste: base + IVA + recargo.
 *
 * A ancho completo y no en la columna del nombre, donde quedan unos 165 px en
 * un móvil normal y se partiría en tres renglones. Separada por una línea: es
 * la trastienda de la cifra de arriba, no un dato más de la fila.
 *
 * ─── A LA IZQUIERDA (01-09-2026) ─────────────────────────────────────────
 * Iba a la derecha, para quedar bajo el cartel de venta del que salía. Pero
 * desde que el coste está en su recuadro a la izquierda, la cuenta que lo
 * explica quedaba en la punta contraria de la tarjeta: había que cruzarla
 * entera para comprobar de dónde salían esos 5,475 €.
 *
 * A la izquierda arranca donde arrancan el nombre y el recuadro de compra, y
 * las tres cosas se leen en una sola bajada de ojos.
 * ─────────────────────────────────────────────────────────────────────── */
.fila-producto-desglose{
  flex:0 0 100%;
  padding-top:6px;
  border-top:1px solid var(--linea);
  font-family:var(--dato);
  font-size:11px;
  line-height:1.5;
  color:var(--tinta-suave);
  text-align:left;
}

/* --- A8 · El lápiz dentro del cartel de precio ------------------------------
 *
 * Va DENTRO del amarillo y no al lado: lo que se edita es ese precio, y un
 * lápiz fuera parecería que edita el producto entero.
 *
 * Es lo único que se ha dejado entrar en el cartel, que hasta ahora solo
 * llevaba cifras. Por eso va en una esquina y en el color de la tinta, sin
 * fondo ni borde: acompaña al precio, no compite con él. */
.cartel--editable{
  position:relative;
  /* Hueco a la derecha para que el lápiz no se cruce con la cifra en un
   * precio largo como «1.234,56 €». */
  padding-right:52px;
}

.cartel-lapiz{
  position:absolute;
  top:8px;
  right:8px;
  display:grid;
  place-items:center;
  width:var(--tactil-min);
  height:var(--tactil-min);
  background:transparent;
  border:0;
  border-radius:10px;
  color:var(--tinta);
  opacity:.62;
  cursor:pointer;
}

.cartel-lapiz:hover{ background:rgba(24,33,28,.10); opacity:1; }
.cartel-lapiz:active{ transform:scale(0.94); }

/* B5 · El precio de compra en la fila del resumen.
 *
 * Debajo de la unidad y la ganancia. Sin saber qué costó, «1,85 €» no dice si
 * está bien o mal puesto, y esta es la pantalla donde se decide.
 *
 * En monoespaciada como el resto de las cifras, y más apagado que la
 * ganancia: es el dato de apoyo, no la conclusión. */
.fila-resumen-coste{
  margin-top:1px;
  font-family:var(--dato);
  font-size:12px;
  color:var(--tinta-suave);
  text-align:right;
  white-space:nowrap;
}

/* B5 · La cuenta de ese coste: base + IVA + recargo.
 *
 * A ancho completo y debajo de las dos columnas, porque entera no cabe en la
 * de la derecha sin partirse en cuatro renglones. Alineada a la derecha, así
 * cae justo bajo el total del que sale.
 *
 * Se le deja partir el renglón —nada de nowrap— y se separa con una línea
 * arriba: es la trastienda del número de arriba, no un dato más de la fila.
 * Un punto más pequeña que el coste por lo mismo. */
.fila-resumen-cuenta{
  padding-top:6px;
  border-top:1px solid var(--linea);
  font-family:var(--dato);
  font-size:11px;
  line-height:1.5;
  color:var(--tinta-suave);
  text-align:right;
}

/* En el resumen el cartel es pequeño, así que el lápiz también: dentro no
 * cabe uno de 44 px sin empujar la cifra a otra línea. Se le da el objetivo
 * táctil con un margen negativo, que no ocupa. */
.cartel--pequeño.cartel--editable,
.cartel:not(.cartel--grande).cartel--editable{
  padding-right:34px;
}

.cartel:not(.cartel--grande) .cartel-lapiz{
  top:50%;
  right:2px;
  width:30px;
  height:30px;
  margin-top:-15px;
}

.cartel:not(.cartel--grande) .cartel-lapiz .icono{ width:16px; height:16px; }

/* El lápiz de la fecha, en la línea secundaria de la tarjeta de factura.
   Más pequeño que el del nombre y algo menos alto: ahí el renglón es de 13 px
   y el ajuste del otro lo dejaba flotando por encima del texto. */
.btn-lapiz--fecha{ margin-left:2px; vertical-align:-6px; }

/* A10 · Un bloque por día en el archivo de facturas.
 *
 * El rótulo pegado a su tarjeta y aire por arriba: lo que separa un día del
 * siguiente es ese hueco, no una línea. Con dieciséis facturas en dos días,
 * una raya más sería una raya más que leer. */
.dia-de-facturas + .dia-de-facturas{ margin-top:10px; }
.dia-de-facturas .titulo-seccion{ margin-bottom:6px; }

/* A10 · Los dos botones de una factura sin terminar, en columna.
 *
 * En fila no caben: el motivo del fallo ocupa cinco renglones al lado. Y el
 * ancho lo manda el más largo, para que no queden escalonados. */
.sin-terminar-acciones{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:none;
}

/* Más específica que `.fila-sin-terminar .boton`, que pone `width:auto`. Con
   la misma especificidad ganaría la última del archivo, y eso es depender del
   orden en que estén escritas. */
.fila-sin-terminar .sin-terminar-acciones .boton{ width:100%; }

/* ─── EL CONTADOR DE AVISOS DE UN BOTÓN ───────────────────────────────────
 *
 * ROJO, Y ES UNA EXCEPCIÓN DECLARADA (06-09-2026)
 * La regla de oro dice que el rojo es peligro: errores, borrados y cerrar
 * sesión (§1.3). Esta es la tercera excepción autorizada, y se pidió así:
 * un contador de avisos en rojo es lo que todo el mundo ya sabe leer sin que
 * nadie se lo explique.
 *
 * No se confunde con un botón de peligro porque nunca es el fondo: es un
 * círculo pequeño encima de un botón que conserva su color. Y el número que
 * lleva dentro no es dinero, así que tampoco pisa al amarillo.
 * ───────────────────────────────────────────────────────────────────────── */
.boton{ position:relative; }

.boton-aviso{
  position:absolute;
  top:8px;
  right:8px;
  display:grid;
  place-items:center;
  min-width:26px;
  height:26px;
  padding:0 6px;
  background:var(--rojo);
  border-radius:999px;
  color:#FFFFFF;
  font-family:var(--dato);
  font-size:14px;
  font-weight:700;
  line-height:1;
}

/* A5 · Lo que el proveedor ha subido de precio (0029).
 *
 * A ancho completo y debajo de todo, como la cuenta del coste: es una
 * comparación entre dos días y no cabe en la columna de nada.
 *
 * Fondo rojo claro, no texto rojo. `--rojo-claro` ya es el fondo de lo que
 * avisa en esta app, y así la cifra no compite con el cartel amarillo, que es
 * el precio de venta y lo único que se lee en amarillo. */
.fila-producto-subida{
  flex-basis:100%;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:8px 10px;
  background:var(--rojo-claro);
  border-radius:var(--radio);
  color:var(--tinta);
  font-family:var(--dato);
  font-size:13px;
  text-align:left;
}

.fila-producto-subida .icono{ flex:none; color:var(--rojo); }

/* La frase se queda en una columna aparte para que, cuando el nombre del
 * producto la parta en dos renglones, el segundo no se meta debajo del
 * icono. */
.fila-producto-subida-texto{
  display:inline;
  line-height:1.9;
}

/* ─── CUÁNTO SUBE, ENMARCADO (14-09-2026) ──────────────────────
 * Es el dato por el que se mira este renglón. Suelto entre comas se leía
 * igual que las otras dos cifras de la frase —lo que se pagaba y lo que se
 * paga— y no había forma de encontrarlo sin leerla entera.
 *
 * Blanco con borde fino, NO amarillo: el amarillo es el precio de venta y
 * solo eso (§3). Es el mismo recuadro que lleva el coste en la fila, que se
 * inventó exactamente por este motivo. Y el borde no es rojo aunque la tira
 * lo sea: el rojo es peligro, y aquí ya lo dice el icono.
 * ───────────────────────────────────────────────────────── */
.fila-producto-subida-cifra{
  display:inline-block;
  padding:2px 8px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:8px;
  font-size:15px;
  font-weight:700;
  color:var(--tinta);
  white-space:nowrap;
}

/* A5 · Un producto que ha subido, con su botón de darlo por visto (0029).
 *
 * El botón fuera de la fila y no dentro: la fila es un <button> y anidar otro
 * es HTML inválido. Aquí van los dos como hermanos, separados por una línea
 * fina para que se lea que el botón es de ESE producto y no del siguiente. */
.producto-con-subida{
  display:flex;
  flex-direction:column;
}

.producto-con-subida .boton{
  margin:0 12px 12px;
  width:auto;
  /* Más bajo que un botón principal: es una acción de repaso, no la acción
     de la pantalla. Conserva sus 44 px de objetivo táctil. */
  min-height:44px;
  font-size:15px;
}

/* --- A12 y A13 · Plantillas de compra (0032, 16-09-2026) --------------------
 *
 * Una plantilla es una lista de productos para imprimir y rellenar a mano. El
 * editor es la pantalla con más cosas tocables del proyecto —subir, bajar,
 * quitar, cambiar el formato— así que todas cumplen los 44 px de objetivo
 * táctil aunque el dibujo sea más pequeño (§3). */

/* Se guarda solo, y este renglón es lo único que lo dice. */
.plantilla-guardado{
  margin:0 0 4px;
  text-align:right;
  font-size:12px;
  color:var(--tinta-suave);
}

/* En rojo cuando falla: perder media lista sin enterarse es lo peor que puede
   pasar en esta pantalla, y ahí el rojo es lo que corresponde (§3). */
.plantilla-guardado--mal{ color:var(--rojo); font-weight:600; }

.plantilla-titulo{ margin-bottom:4px; }

.plantilla-seccion{ margin-bottom:var(--hueco); }

.plantilla-seccion-cabecera{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.plantilla-seccion-cabecera .titulo-seccion{ margin:0; }

.plantilla-asas{ display:flex; flex:none; gap:2px; }

/* La flecha de «atrás», girada: no hace falta un icono nuevo para una flecha
   que ya existe. */
.plantilla-asa .icono{ transition:none; }
.plantilla-asa--arriba{ transform:rotate(90deg); }
.plantilla-asa--abajo{ transform:rotate(-90deg); }

.plantilla-asa:disabled{ opacity:.25; }

.plantilla-fila{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px var(--margen);
  min-height:var(--alto-control-min);
  border-bottom:1px solid var(--linea);
}

.plantilla-fila:last-child{ border-bottom:0; }

/* El nombre es un botón: se toca y se cambia. El lápiz al lado dice que se
   puede, que si no nadie lo descubre. */
.plantilla-fila-nombre{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
  margin:0;
  padding:4px 0;
  min-height:var(--tactil-min);
  background:none;
  border:0;
  font:inherit;
  font-size:16px;
  line-height:1.25;
  text-align:left;
  color:var(--tinta);
  cursor:pointer;
}

.plantilla-fila-nombre span{ flex:1; min-width:0; }

.plantilla-fila-nombre .icono{ flex:none; color:var(--verde); opacity:.55; }

/* La casilla de formato: se toca y va cambiando, sin teclado. Es un recuadro
   claro con borde fino, como el del coste en la fila de producto: no lleva
   amarillo porque no es dinero. */
.plantilla-formato{
  flex:none;
  min-width:64px;
  min-height:var(--tactil-min);
  padding:6px 10px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:10px;
  font-family:var(--dato);
  font-size:13px;
  color:var(--tinta);
  cursor:pointer;
}

/* Vacío es un estado al que se llega a propósito y significa «míralo allí».
   Se ve apagado, pero se ve: un hueco invisible parecería un fallo. */
.plantilla-formato--vacio{
  color:var(--tinta-suave);
  border-style:dashed;
}

/* Un producto del catálogo que se puede meter en la plantilla. */
.plantilla-candidato{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px var(--margen);
  min-height:var(--alto-control-min);
  background:none;
  border:0;
  border-bottom:1px solid var(--linea);
  font:inherit;
  text-align:left;
  color:var(--tinta);
  cursor:pointer;
}

.plantilla-candidato:last-child{ border-bottom:0; }

.plantilla-candidato-datos{ flex:1; min-width:0; }

.plantilla-candidato-nombre{ display:block; font-size:16px; line-height:1.25; }

/* De quién viene. Hay «Acelgas» de dos proveedores y «Mango» de tres: sin
   esto son dos renglones idénticos y no se sabe cuál marcar. */
.plantilla-candidato-proveedor{
  display:block;
  margin-top:1px;
  font-size:12px;
  color:var(--tinta-suave);
}

/* El hueco de la marca se reserva siempre, esté o no: si no, la lista entera
   se desplaza al marcar uno y se pierde el sitio donde estaba el dedo. */
.plantilla-candidato-marca{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:24px;
  height:24px;
  border:1px solid var(--linea);
  border-radius:6px;
  color:var(--verde);
}

.plantilla-candidato--puesto .plantilla-candidato-marca{
  border-color:var(--verde);
  background:var(--verde-claro);
}

.plantilla-candidato--puesto .plantilla-candidato-nombre{ color:var(--tinta-suave); }

/* La fila de A12 que abre una plantilla: ocupa todo el ancho que sobra, que
   es lo que hace que se acierte con el dedo. */
.fila-proveedor-abrir{
  background:none;
  border:0;
  font:inherit;
  text-align:left;
  color:inherit;
  cursor:pointer;
  min-height:var(--tactil-min);
}

/* --- A13 · «Lo comprado»: traer en bloque la compra de un día (16-09-2026) --- */

.plantilla-dia-cabecera{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:8px 0 4px;
}

.plantilla-dia-cabecera p{ margin:0; }

/* «Marcar todos» / «Quitar todos». Un enlace y no un botón con fondo: al lado
   del de añadir, dos botones sólidos competirían y no está claro cuál es el
   que hace la faena. */
.plantilla-todos{
  flex:none;
  min-height:var(--tactil-min);
  padding:0 4px;
  background:none;
  border:0;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--verde);
  text-decoration:underline;
  cursor:pointer;
}

/* Marcado para traer. Verde claro, que es lo mismo que dice «esto entra»
   en el resto de la app. */
.plantilla-candidato--marcado .plantilla-candidato-marca{
  border-color:var(--verde);
  background:var(--verde-claro);
}

/* Y lo que ya está en la plantilla: no se puede volver a marcar, así que se
   dice con palabras en vez de dejar un botón que no hace nada. */
.plantilla-candidato:disabled{ cursor:default; }

.plantilla-candidato-ya{
  flex:none;
  font-size:12px;
  color:var(--tinta-suave);
}

/* --- 2.9 · Lista que se reordena arrastrando (16-09-2026) -------------------
 *
 * El asa es lo ÚNICO que se queda con el dedo: `touch-action:none` en 44 px y
 * ni uno más. Quitarle el arrastre a una zona grande deja la pantalla muerta,
 * que es la lección que costó dos pantallas con `pinch-zoom`. */
.plantilla-asa-arrastre{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:var(--tactil-min);
  height:var(--tactil-min);
  margin-left:-8px;
  color:var(--tinta-suave);
  touch-action:none;
  cursor:grab;
}

.plantilla-asa-arrastre:active{ cursor:grabbing; }

/* La fila que se lleva el dedo: levantada del papel con una sombra, que es la
 * única de la app y está justificada —tiene que verse por encima de las otras
 * mientras se mueve—. Las demás se apartan con una transición corta. */
.ordenable-llevando{
  position:relative;
  z-index:2;
  background:var(--papel-alto);
  box-shadow:0 6px 16px rgba(24,33,28,.18);
  border-radius:10px;
}

.ordenable-en-marcha [data-fila]{ transition:transform .14s ease; }

/* Y la que se lleva, sin transición: tiene que ir pegada al dedo, no
 * persiguiéndolo. */
.ordenable-en-marcha .ordenable-llevando{ transition:none; }

/* Mientras se arrastra no se selecciona texto por error. */
.ordenable-en-marcha{ user-select:none; -webkit-user-select:none; }

/* --- A13 · Subgrupos dentro de una categoría (0033, 16-09-2026) -------------
 *
 * Un corte dentro de la sección, no otra sección: por eso va DENTRO de la
 * misma tarjeta que las filas, con fondo hundido para que se lea como una
 * banda y no como un producto más. */
.plantilla-subgrupo{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px var(--margen);
  min-height:var(--tactil-min);
  background:var(--papel-hundido);
  border-bottom:1px solid var(--linea);
}

.plantilla-subgrupo-nombre{
  flex:1;
  min-width:0;
  margin:0;
  font-family:var(--cuerpo);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--tinta-suave);
}

/* Una cabecera no se arrastra —se mueve con sus flechas, porque arrastrar un
   bloque de veinte productos es más alto que la pantalla— así que no lleva
   asa. El hueco se rellena para que sus botones queden en la misma columna
   que los de las filas. */
.plantilla-subgrupo::before{
  content:'';
  flex:none;
  width:var(--tactil-min);
  margin-left:-8px;
}

/* --- A12 · Copiar y borrar, separadas (16-09-2026) --------------------------
 *
 * Una es inocente y la otra se lleva la plantilla por delante. Pegadas, con el
 * pulgar en un móvil, dos objetivos de 44 px se confunden. Van a los dos
 * extremos con una raya fina en medio, que es lo que dice «esto es otra
 * cosa». */
.plantilla-acciones{
  display:flex;
  align-items:center;
  flex:none;
  gap:var(--margen);
}

.plantilla-acciones::before{
  content:'';
  align-self:stretch;
  width:1px;
  margin-left:4px;
  background:var(--linea);
}

/* --- A13 · La papelera de una fila, apartada del resto ----------------------
 *
 * Mismo motivo: al lado va la casilla del formato, que se toca a menudo. */
.plantilla-quitar{ margin-left:6px; }