/* Kitchy web: mismos colores, formas y tamaños que la app Android (ui/theme/Theme.kt). */

:root {
  --primario: #006495;
  --primario-brillante: #40a2e3;
  --primario-suave: #cbe6ff;
  --azul-oscuro: #1b3b5a;
  --naranja: #e67e22;
  --naranja-texto: #522700;
  --naranja-aviso: #e87f23;
  --naranja-aviso-suave: #ffe5d2;
  --verde: #74e291;
  --verde-texto: #0b3b2b;
  --gris-azul: #436182;
  --fondo: #f7f9fb;
  --superficie: #ffffff;
  --superficie-suave: #f2f4f6;
  --superficie-fuerte: #e0e3e5;
  --texto: #191c1e;
  --texto-tenue: #3f4850;
  --contorno: #6f7881;
  --contorno-suave: #bfc7d1;
  --error: #ba1a1a;
  --error-suave: #ffdad6;
  --ok: #2e7d32;
  --ok-suave: #dcefd9;
  --variante: 224, 227, 229; /* surfaceVariant en RGB para las transparencias */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
  --sombra-2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 2px 6px 2px rgba(0, 0, 0, 0.07);
  --sombra-3: 0 4px 8px 3px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.14);
  --columna: 600px;
  --ancho-pantalla: 600px; /* ancho máximo de las pantallas; crece en tablet y ordenador */
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 14px/20px Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
body.sin-scroll { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; }
hr { border: 0; margin: 0; }
[hidden] { display: none !important; }
.ico { fill: currentColor; flex: none; }
.ico.azul { color: var(--primario); }
.ico.naranja { color: var(--naranja); }
.ico.verde { color: var(--verde); }
.tenue { color: var(--texto-tenue); }
.negrita { font-weight: 700; }
.una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos-lineas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tres-lineas { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:focus-visible { outline: 2px solid var(--primario-brillante); outline-offset: 2px; }

/* ------------------------------------------------------------ Estructura */

.pantalla {
  position: relative;
  max-width: var(--ancho-pantalla);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--fondo);
}
.capa-pantalla.bloqueada { pointer-events: none; }
.capa { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; }
.velo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.36); animation: aparecer 0.15s ease; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }

/* Barra superior de los módulos (TopAppBar) */
.top-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  min-height: 64px; padding: 8px 4px;
  background: var(--fondo);
}
.top-bar-titulo { flex: 1; font-size: 24px; line-height: 32px; font-weight: 800; color: var(--primario); padding-left: 4px; }
.top-bar-titulo.neutro { font-size: 22px; line-height: 28px; color: var(--texto); }
.top-bar-titulo.centrado { text-align: center; font-size: 22px; font-weight: 900; color: var(--primario); }
.top-bar.ajustes { padding: 16px 20px; position: static; }
.top-bar-titulo.grueso { font-weight: 900; padding: 0; }
.top-bar.dialogo { padding: 8px 12px 8px 4px; }

.boton-icono {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-grid; place-items: center; color: var(--texto);
}
.boton-icono.primario { color: var(--primario); }
.boton-icono.tenue { color: var(--texto-tenue); }
.boton-icono:hover { background: rgba(0, 0, 0, 0.06); }

/* ------------------------------------------------------------ Botones */

.boton-relleno, .boton-contorno, .boton-texto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 24px; border-radius: 20px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.1px;
}
.boton-relleno { background: var(--primario); color: #fff; }
.boton-relleno:hover { box-shadow: var(--sombra-1); }
.boton-contorno { border: 1px solid var(--contorno); color: var(--primario); }
.boton-contorno:hover, .boton-texto:hover { background: rgba(0, 100, 149, 0.08); }
.boton-texto { padding: 0 12px; color: var(--primario); }
.boton-texto.negrita { font-weight: 700; }
.boton-relleno.ancho, .boton-contorno.ancho { width: 100%; border-radius: 18px; }
.con-icono { gap: 6px; }
.boton-relleno.con-icono { padding: 0 16px; border-radius: 20px; }
.boton-relleno.inicio { align-self: flex-start; }

.boton-circular {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
}
.boton-circular.pequeno { width: 36px; height: 36px; }
.boton-circular .ico { width: 24px; height: 24px; }
.boton-circular.gris { background: rgba(var(--variante), 0.35); color: var(--primario); }
.boton-circular.azul-suave { background: rgba(64, 162, 227, 0.45); color: var(--primario); }
.boton-circular.naranja { background: rgba(255, 220, 197, 0.85); color: var(--naranja); }
.boton-circular.rojo { background: rgba(255, 218, 214, 0.7); color: var(--error); }
.boton-circular:disabled { opacity: 0.4; }
.boton-circular:not(:disabled):hover { filter: brightness(0.95); }

.fab {
  position: fixed; z-index: 6;
  right: max(16px, calc((100vw - var(--ancho-pantalla)) / 2 + 16px));
  bottom: 16px;
  width: 56px; height: 56px; border-radius: 20px;
  background: var(--primario); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--sombra-3);
}
.fab:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------ Inicio */

.pantalla.principal { padding-bottom: 96px; overflow: hidden; }
.fondo-inicio, .splash-fondo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fondo-inicio i, .splash-fondo i { position: absolute; border-radius: 50%; }
.fondo-inicio i:nth-child(1) { left: -96px; top: -110px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(0, 100, 149, 0.12), transparent 70%); }
.fondo-inicio i:nth-child(2) { right: -80px; top: -56px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(230, 126, 34, 0.08), transparent 70%); }
.fondo-inicio i:nth-child(3) { left: -96px; bottom: -160px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(0, 100, 149, 0.06), transparent 70%); }
.contenido-inicio { position: relative; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.inicio-cabecera { display: flex; align-items: center; padding: 4px 0; }
.inicio-logo {
  width: 54px; height: 54px; border-radius: 18px; flex: none;
  background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(191, 199, 209, 0.24); padding: 4px;
}
.inicio-logo img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; }
.inicio-cabecera h1 { margin-left: 14px; font-size: 20px; line-height: 32px; font-weight: 800; color: var(--primario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inicio-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: rgba(0, 100, 149, 0.8); padding: 4px 0 2px 4px; }

.card { background: var(--superficie); border-radius: 28px; box-shadow: var(--sombra-1); }
.modulo-inicio {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: 24px; border: 1px solid rgba(191, 199, 209, 0.24);
  background: rgba(255, 255, 255, 0.98); box-shadow: var(--sombra-2);
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.6, 1);
}
.modulo-inicio.animada:active { transform: scale(0.988); }
.modulo-icono { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.modulo-icono.azul { background: rgba(64, 162, 227, 0.2); color: var(--primario); }
.modulo-icono.naranja { background: rgba(255, 220, 197, 0.35); color: var(--naranja); }
.modulo-icono.verde { background: rgba(116, 226, 145, 0.2); color: var(--verde); }
.modulo-textos { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.modulo-textos strong { font-size: 19px; line-height: 26px; font-weight: 800; color: var(--texto); }
.modulo-textos span { font-size: 13px; line-height: 17px; color: var(--texto-tenue); }
.modulo-flecha { width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--variante), 0.4); display: grid; place-items: center; flex: none; }
.modulo-flecha.azul { color: var(--primario); }
.modulo-flecha.naranja { color: var(--naranja); }
.modulo-flecha.verde { color: var(--verde); }

/* Barra inferior flotante */
.barra-inferior {
  position: fixed; z-index: 6; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--columna), 100%);
  padding: 4px 20px calc(8px + env(safe-area-inset-bottom));
}
.barra-inferior-caja {
  display: flex; justify-content: space-evenly; align-items: center; padding: 6px;
  background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(191, 199, 209, 0.28);
  border-radius: 22px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.pestana {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 14px;
  font-size: 12px; font-weight: 500; color: var(--texto-tenue); text-decoration: none;
}
.pestana.sel { background: rgba(64, 162, 227, 0.35); color: var(--primario); font-weight: 700; }

/* Splash */
.splash {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(#f8fbfe, #fff, #f6f9fd);
  display: grid; place-items: center;
}
.splash-fondo i:nth-child(1) { left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; background: radial-gradient(circle, rgba(0, 100, 149, 0.08), transparent 70%); }
.splash-fondo i:nth-child(2) { left: -140px; top: -90px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0, 100, 149, 0.1), transparent 70%); }
.splash-fondo i:nth-child(3) { right: -120px; bottom: -140px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(230, 126, 34, 0.08), transparent 70%); }
.splash-centro {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px;
  opacity: 0; transform: translateY(24px) scale(0.92); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.splash.visible .splash-centro { opacity: 1; transform: none; }
.splash.saliendo { opacity: 0; transition: opacity 0.25s; }
.splash-lema { display: flex; align-items: center; gap: 14px; }
.splash-lema span { width: 56px; height: 1px; background: rgba(191, 199, 209, 0.55); }
.splash-lema p { font-size: 12px; font-weight: 500; letter-spacing: 4.2px; color: rgba(63, 72, 80, 0.88); white-space: nowrap; }
.splash-carga {
  position: absolute; bottom: 72px; left: 50%; margin-left: -17px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(191, 199, 209, 0.2); border-top-color: var(--primario);
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ Módulos (listados) */

.contenido-modulo { padding: 12px 20px 112px; display: flex; flex-direction: column; gap: 18px; }
.panel-busqueda { display: flex; flex-direction: column; gap: 14px; }
.campo-busqueda {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  border-radius: 24px; background: rgba(var(--variante), 0.4); color: var(--texto-tenue);
}
.campo-busqueda:focus-within { background: var(--superficie); color: var(--primario); box-shadow: var(--sombra-1); }
.campo-busqueda input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 16px; color: var(--texto); }
.campo-busqueda input::placeholder { color: var(--contorno); }
.campo-busqueda.claro { flex: 1; border-radius: 22px; background: rgba(255, 255, 255, 0.72); }
.campo-busqueda.redonda { border-radius: 999px; background: var(--superficie-fuerte); }
input[type="search"]::-webkit-search-cancel-button { display: none; }

.fila-chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fila-chips::-webkit-scrollbar { display: none; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 32px; padding: 0 16px; border-radius: 18px;
  border: 1px solid rgba(191, 199, 209, 0.45); background: var(--superficie);
  font-size: 14px; font-weight: 500; color: var(--texto-tenue); white-space: nowrap;
}
.chip-filtro .ico { margin-left: -8px; }
.chip-filtro.sel { background: var(--primario-brillante); border-color: transparent; color: var(--azul-oscuro); }
.chips-envolver { display: flex; flex-wrap: wrap; gap: 8px; }

.result-header h2 { font-size: 17px; line-height: 22px; font-weight: 700; }
.result-header p { font-size: 12px; line-height: 16px; color: var(--texto-tenue); margin-top: 2px; }

.card.vacio { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 24px; text-align: center; border-radius: 30px; }
.vacio-icono { width: 64px; height: 64px; border-radius: 22px; background: rgba(var(--variante), 0.45); color: var(--primario); display: grid; place-items: center; }
.card.vacio h2 { font-size: 20px; line-height: 26px; font-weight: 800; }
.card.vacio p { color: var(--texto-tenue); }

/* Tarjetas */
.tarjeta { padding: 18px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra-2); }
.fila-arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fila-arriba.centrada { align-items: center; }
.columna-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fila-titulo { display: flex; gap: 14px; align-items: flex-start; }
.fila-titulo .columna-info { gap: 8px; }
.insignias { display: flex; gap: 8px; flex-wrap: wrap; }
.insignia {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 10px; border-radius: 16px; font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 0.4px;
}
.insignia.almacen-almacen { background: rgba(var(--variante), 0.55); color: var(--texto-tenue); }
.insignia.almacen-camara { background: rgba(255, 220, 197, 0.7); color: var(--naranja-texto); }
.insignia.almacen-congelador { background: rgba(64, 162, 227, 0.7); color: var(--azul-oscuro); }
.insignia.tipo { background: rgba(232, 127, 35, 0.58); color: var(--verde-texto); }
.insignia.categoria { background: rgba(64, 162, 227, 0.55); color: var(--azul-oscuro); }
.insignia.paso { background: rgba(64, 162, 227, 0.55); color: var(--azul-oscuro); font-size: 14px; padding: 8px 12px; font-weight: 700; }
.tarjeta-titulo { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--texto); overflow-wrap: anywhere; }
.tarjeta-desc { color: var(--texto-tenue); }
.proveedor { font-size: 14px; font-weight: 600; color: var(--primario); }
.acciones-tarjeta { display: flex; gap: 6px; flex: none; }
.miniatura { width: 76px; height: 76px; border-radius: 22px; overflow: hidden; flex: none; background: rgba(var(--variante), 0.4); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }

.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-radius: 22px; background: rgba(var(--variante), 0.3); }
.metrica { background: var(--superficie); border-radius: 18px; padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.metrica small { font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--texto-tenue); }
.metrica strong { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.metrica .azul, .dato .azul { color: var(--primario); }
.metrica .naranja { color: var(--naranja); }
.metrica .verde { color: var(--verde); }
.divisor { height: 1px; background: rgba(191, 199, 209, 0.45); }
.fila-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.estado-merma {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px; background: rgba(var(--variante), 0.35); color: var(--texto-tenue);
}
.estado-merma.activa { background: rgba(255, 220, 197, 0.6); color: var(--naranja-texto); }
.resumen-compra { font-size: 14px; font-weight: 600; color: var(--texto-tenue); }
.pildoras { display: flex; gap: 10px; }
.pildora {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px; background: rgba(var(--variante), 0.35); color: var(--texto-tenue);
}
.pildora.sel { background: rgba(64, 162, 227, 0.6); color: var(--azul-oscuro); }
.detalle { padding: 12px 14px; border-radius: 22px; background: rgba(var(--variante), 0.24); display: flex; flex-direction: column; gap: 8px; animation: subir 0.2s ease; }
.detalle strong { font-size: 14px; }
.detalle p { color: var(--texto-tenue); }
.detalle-lineas, .detalle-scroll { display: flex; flex-direction: column; gap: 8px; }
.detalle-scroll { max-height: 156px; overflow-y: auto; }
.alergenos-detectados {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 22px;
  background: rgba(255, 220, 197, 0.32); color: var(--naranja-texto);
}
.alergenos-detectados > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.alergenos-detectados strong { font-size: 14px; }
.fila-alergenos { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.alergeno-mini { min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.alergeno-mini > span { background: rgba(255, 255, 255, 0.88); border-radius: 18px; padding: 4px; }
.alergeno-mini small { font-size: 10px; font-weight: 600; text-align: center; }

/* Menú desplegable (DropdownMenu) */
.ancla-menu, .desplegable { position: relative; }
.velo-menu { position: fixed; inset: 0; z-index: 9; }
.menu {
  position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; min-width: 240px;
  padding: 8px 0; border-radius: 4px; background: #fff; box-shadow: var(--sombra-3);
  animation: aparecer 0.12s ease;
}
.ancla-menu .menu { left: auto; right: -140px; }
.menu.ancho { width: 85%; min-width: 0; max-height: 60vh; overflow-y: auto; }
.menu-titulo { padding: 8px 16px; font-size: 14px; font-weight: 700; color: var(--texto-tenue); }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; text-align: left; font-size: 14px; }
.menu-item:hover { background: rgba(0, 0, 0, 0.05); }
.menu-item.doble { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 8px 16px; }
.menu-item.doble small { font-size: 12px; color: var(--texto-tenue); }
.menu hr { height: 1px; background: var(--contorno-suave); margin: 4px 0; }

/* ------------------------------------------------------------ Diálogos */

.alert-dialog {
  position: relative; align-self: center; width: min(560px, calc(100% - 48px)); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 24px; border-radius: 28px; background: #f3f5f8; box-shadow: var(--sombra-3);
  animation: aparecer 0.15s ease;
}
.alert-titulo { font-size: 22px; line-height: 28px; font-weight: 700; margin-bottom: 16px; }
.alert-cuerpo { color: var(--texto-tenue); display: flex; flex-direction: column; gap: 14px; }
.alert-cuerpo .uso { display: flex; flex-direction: column; gap: 6px; }
.alert-cuerpo .uso strong { color: var(--texto); font-size: 14px; }
.alert-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

.hoja-inferior {
  position: absolute; bottom: 0; width: min(var(--columna), 100%); height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--superficie); border-radius: 30px 30px 0 0; box-shadow: var(--sombra-3);
  animation: subir 0.22s ease;
}
.asa { width: 52px; height: 5px; border-radius: 3px; background: var(--contorno-suave); margin: 12px auto 6px; flex: none; }
.hoja-cabecera { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 20px; }
.hoja-cabecera > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hoja-titulo { font-size: 28px; line-height: 36px; font-weight: 800; }
.hoja-cuerpo { flex: 1; overflow-y: auto; padding: 0 20px 16px; display: flex; flex-direction: column; gap: 20px; }

.dialogo-completo {
  position: relative; width: min(var(--columna), 100%); height: 100dvh;
  display: flex; flex-direction: column; background: var(--fondo);
  animation: aparecer 0.18s ease;
}
.dialogo-cuerpo { flex: 1; overflow-y: auto; padding: 12px 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.dialogo-cuerpo.plato { padding: 18px 20px 48px; gap: 22px; }

.seccion-editor { padding: 18px; border-radius: 26px; background: rgba(var(--variante), 0.22); display: flex; flex-direction: column; gap: 14px; }
.seccion-editor h3, .seccion-plato h3 { font-size: 26px; line-height: 32px; font-weight: 800; color: var(--primario); }
.seccion-editor .subtitulo { font-size: 12px; color: var(--texto-tenue); margin-top: -10px; }
.seccion-plato { padding: 22px; border-radius: 30px; background: var(--superficie-suave); display: flex; flex-direction: column; gap: 16px; }
.titulo-seccion-plato { font-size: 24px; line-height: 30px; font-weight: 800; color: var(--primario); }
.ayuda { font-size: 12px; color: var(--texto-tenue); }
.ayuda.grande { font-size: 14px; line-height: 20px; }

.campo { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.campo-etiqueta { font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 0.4px; color: var(--texto-tenue); }
.seccion-plato .campo-etiqueta { font-size: 13px; letter-spacing: 0; }
.campo.con-error .campo-etiqueta { color: var(--error); }
.campo-texto {
  width: 100%; min-height: 56px; padding: 16px; border: 0; border-radius: 22px; outline: none;
  background: rgba(var(--variante), 0.4); font-size: 16px; line-height: 24px; resize: vertical;
}
.campo-texto:focus { background: var(--superficie); box-shadow: inset 0 0 0 2px rgba(0, 100, 149, 0.25); }
.seccion-editor .campo-texto { background: rgba(255, 255, 255, 0.72); }
.seccion-editor .campo-texto:focus { background: #fff; }
.hoja-inferior .seccion-editor .campo-texto { background: rgba(var(--variante), 0.4); }
.hoja-inferior .seccion-editor .campo-texto:focus { background: #fff; }
.seccion-plato .campo-texto { background: var(--superficie-fuerte); }
.campo-texto::placeholder { color: var(--contorno); }
.campo-error { font-size: 12px; color: var(--error); }
.campo-texto.selector { display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }
.fila-campos { display: flex; gap: 12px; }
.fila-campos.alineada { align-items: flex-end; }
.fila-campos > * { flex: 1; min-width: 0; }

/* Foto */
.foto-seccion { padding: 18px; border-radius: 24px; background: rgba(var(--variante), 0.2); display: flex; flex-direction: column; gap: 16px; }
.foto-titulo { font-size: 15px; font-weight: 700; color: var(--primario); }
.foto-fila { display: flex; gap: 16px; align-items: flex-start; }
.foto-marco { width: 112px; height: 112px; flex: none; border-radius: 28px; overflow: hidden; border: 1px solid rgba(191, 199, 209, 0.65); background: #fff; }
.foto-marco img { width: 100%; height: 100%; object-fit: cover; }
.foto-vacia { width: 100%; height: 100%; display: grid; place-items: center; color: var(--primario); background: linear-gradient(135deg, rgba(64, 162, 227, 0.45), rgba(255, 220, 197, 0.35)); }
.foto-botones { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.foto-par { display: flex; gap: 8px; }
.foto-par > * { flex: 1; }
.boton-foto {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 12px;
  border: 1px solid rgba(191, 199, 209, 0.75); border-radius: 16px; color: var(--texto); font-weight: 500; white-space: nowrap;
}
.boton-foto .ico { color: var(--primario); }
.boton-foto.peligro { border-color: rgba(186, 26, 26, 0.38); color: var(--error); align-self: flex-start; width: calc(50% - 4px); }
.boton-foto.peligro .ico { color: var(--error); }
@media (max-width: 420px) {
  .foto-par { flex-direction: column; }
  .boton-foto.peligro { width: 100%; }
}

/* Almacenamiento y alérgenos */
.selector-almacen { display: flex; gap: 6px; padding: 6px; border-radius: 22px; background: rgba(var(--variante), 0.35); }
.opcion-almacen { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 18px; color: var(--texto-tenue); font-size: 12px; font-weight: 600; }
.opcion-almacen.sel { background: var(--superficie); color: var(--primario); box-shadow: var(--sombra-1); }
.rejilla-alergenos { display: grid; grid-template-columns: repeat(3, 96px); justify-content: center; gap: 10px 4px; }
.opcion-alergeno { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 24px; border: 1px solid transparent; }
.opcion-alergeno img { width: 68px; height: 68px; filter: grayscale(1); opacity: 0.42; }
.opcion-alergeno span { font-size: 12px; line-height: 14px; font-weight: 700; text-align: center; color: rgba(63, 72, 80, 0.82); }
.opcion-alergeno.sel { background: rgba(0, 100, 149, 0.06); border-color: rgba(0, 100, 149, 0.24); }
.opcion-alergeno.sel img { filter: none; opacity: 1; }
.opcion-alergeno.sel span { color: var(--primario); }
.opcion-alergeno.fijo { background: none; border-color: transparent; cursor: default; }
.pildora-alergeno { align-self: center; padding: 8px 12px; border-radius: 999px; background: var(--naranja-aviso-suave); color: var(--naranja-aviso); font-size: 12px; font-weight: 600; }

/* Ingredientes dentro de elaboraciones */
.fila-busqueda { display: flex; gap: 10px; align-items: center; }
.fila-busqueda .boton-relleno { min-height: 48px; }
.sugerencias { background: #fff; border-radius: 22px; box-shadow: var(--sombra-1); overflow: hidden; }
.sugerencia { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; }
.sugerencias .sugerencia + .sugerencia { border-top: 1px solid rgba(191, 199, 209, 0.35); }
.sugerencia:hover { background: rgba(0, 0, 0, 0.03); }
.sugerencia > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sugerencia strong { font-size: 15px; }
.sugerencia small { font-size: 12px; color: var(--texto-tenue); }
.sugerencia em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--primario); }
.pildora-resumen { background: #fff; border-radius: 20px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-height: 56px; justify-content: center; }
.pildora-resumen small { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--texto-tenue); }
.pildora-resumen strong { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.tarjeta-linea { background: #fff; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.linea-nombre { font-size: 17px; line-height: 22px; }
.tarjeta-linea .columna-info { gap: 4px; }
.tarjeta-linea .campo-texto { background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(191, 199, 209, 0.5); }
.pista-vacia { background: #fff; border-radius: 22px; padding: 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--texto-tenue); text-align: center; }
.caja-total { padding: 18px; border-radius: 22px; background: rgba(64, 162, 227, 0.2); display: flex; flex-direction: column; gap: 12px; }
.caja-total small { font-size: 12px; font-weight: 600; color: var(--texto-tenue); }
.caja-total strong { font-size: 28px; line-height: 36px; font-weight: 800; }
.chips-unidad { display: flex; flex-wrap: wrap; gap: 8px; }
.caja-coste-unidad { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 20px; background: #fff; color: var(--primario); }
.caja-coste-unidad div { display: flex; flex-direction: column; gap: 4px; }
.caja-coste-unidad small { font-size: 12px; font-weight: 600; color: var(--texto-tenue); }
.caja-coste-unidad strong { font-size: 20px; line-height: 26px; }

/* Editor de platos */
.chip-plato {
  flex: none; height: 32px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--contorno-suave);
  background: var(--superficie-fuerte); color: var(--texto-tenue); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.chip-plato.sel { background: var(--primario-suave); border-color: transparent; color: var(--primario); }
.boton-texto.con-icono { align-self: flex-start; padding: 0 12px 0 8px; gap: 4px; }
.bloque-sugerencias { padding: 12px; border-radius: 28px; background: var(--superficie-suave); display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 0 0 1px rgba(191, 199, 209, 0.4); }
.bloque-sugerencias > p { padding: 4px 8px; font-size: 12px; font-weight: 700; color: var(--texto-tenue); }
.sugerencia.blanca { background: #fff; border-radius: 22px; padding: 14px 16px; }
.sugerencia.blanca strong { font-size: 16px; }
.fila-componente { background: #fff; border-radius: 26px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sombra-1); }
.fila-componente .columna-info { gap: 4px; }
.insignia-plato { padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.insignia-plato.azul { background: var(--primario-suave); color: var(--primario); }
.insignia-plato.naranja { background: var(--naranja-aviso-suave); color: var(--naranja-aviso); }
.componente-nombre { font-size: 20px; line-height: 26px; }
.capsula { flex: 1; display: flex; align-items: center; padding: 4px 16px 4px 12px; border-radius: 999px; background: var(--superficie-fuerte); }
.capsula input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; outline: none; text-align: right; font-size: 16px; font-weight: 600; }
.capsula span { margin-left: 8px; font-size: 13px; color: var(--texto-tenue); }
.coste-componente { display: flex; flex-direction: column; align-items: flex-end; margin-left: 16px; }
.coste-componente small { font-size: 11px; font-weight: 600; color: var(--contorno); }
.coste-componente strong { font-size: 19px; font-weight: 800; color: var(--primario); }
.seccion-plato .tarjeta-linea { border-radius: 24px; padding: 16px; box-shadow: var(--sombra-1); }
.seccion-plato .tarjeta-linea .insignia.paso { background: var(--primario-suave); color: var(--primario); font-size: 11px; padding: 6px 10px; border-radius: 999px; }
.seccion-plato .tarjeta-linea .campo-texto { background: var(--superficie-fuerte); box-shadow: none; }
.rejilla-alergenos.detectados .opcion-alergeno img { filter: none; opacity: 1; }
.rejilla-alergenos.detectados .opcion-alergeno span { color: var(--primario); }

.resumen-costes-plato {
  padding: 22px; border-radius: 32px; color: #fff; display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(135deg, var(--primario), var(--primario-brillante));
}
.resumen-costes-plato h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
.resumen-costes-plato > hr { height: 1px; background: rgba(255, 255, 255, 0.22); }
.fila-resumen { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.fila-resumen > span { color: rgba(255, 255, 255, 0.92); }
.fila-resumen > span.negrita { font-size: 15px; font-weight: 600; color: #fff; }
.fila-resumen strong { font-size: 17px; font-weight: 700; }
.fila-resumen.grande strong { font-size: 24px; font-weight: 900; }
.contador { display: flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.contador button { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 50%; }
.contador input { width: 56px; height: 48px; border: 0; background: transparent; outline: none; text-align: center; color: #fff; font-size: 17px; font-weight: 700; }
.contador input.ancho { width: 40px; }
.contador span { font-size: 15px; font-weight: 700; margin-right: 4px; }
.caja-blanca { background: #fff; border-radius: 24px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.caja-blanca hr { height: 1px; background: var(--primario-suave); }
.caja-blanca .fila-resumen > span { font-size: 13px; }
.caja-blanca .fila-resumen > span.azul { color: var(--primario); }
.caja-blanca .fila-resumen > span.tenue { color: var(--texto-tenue); }
.caja-blanca .total-iva { font-size: 28px; font-weight: 900; color: var(--primario); }
.caja-blanca .oscuro { font-size: 18px; color: var(--texto); }
.caja-blanca .azul.medio { font-size: 20px; font-weight: 800; color: var(--primario); }

/* Etiquetas */
.vista-etiqueta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.marco-etiqueta { width: 100%; max-width: 360px; border-radius: 10px; border: 1px solid var(--contorno-suave); background: #fff; box-shadow: var(--sombra-2); overflow: hidden; }
.marco-etiqueta img { width: 100%; height: 100%; }
.vista-etiqueta small { font-size: 12px; font-weight: 600; color: var(--texto-tenue); }
.caja-alergenos { padding: 10px 14px; border-radius: 18px; background: rgba(232, 127, 35, 0.6); color: var(--naranja-texto); font-weight: 600; }
.caja-caducidad { padding: 10px 14px; border-radius: 18px; background: rgba(255, 220, 197, 0.6); color: var(--naranja-texto); font-weight: 600; }
.selector-fecha { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 22px; background: #fff; font-size: 16px; cursor: pointer; }
.selector-fecha input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.lista-formatos { display: flex; flex-direction: column; gap: 8px; }
.fila-formato { display: flex; align-items: center; gap: 4px; padding: 4px 16px 4px 4px; border-radius: 20px; background: #fff; text-align: left; }
.fila-formato.sel { background: rgba(64, 162, 227, 0.6); }
.fila-formato > span:last-child { display: flex; flex-direction: column; }
.fila-formato strong { font-size: 16px; font-weight: 600; }
.fila-formato small { font-size: 12px; color: var(--texto-tenue); }
.radio { width: 48px; height: 48px; display: grid; place-items: center; flex: none; }
.radio::before { content: ''; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--texto-tenue); box-sizing: border-box; }
.radio.on::before { border-color: var(--primario); background: radial-gradient(circle, var(--primario) 0 5px, transparent 5.5px); }
.contador-etiqueta { display: flex; align-items: center; gap: 6px; flex: none; }
.contador-etiqueta strong { min-width: 36px; text-align: center; font-size: 17px; }
.contador-etiqueta .boton-circular.azul-suave { background: rgba(64, 162, 227, 0.7); }
.contador-etiqueta .boton-circular:disabled { background: rgba(64, 162, 227, 0.25); }
.barra-etiquetas { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 8px; }
.barra-etiquetas .boton-relleno { font-weight: 700; }
.barra-etiquetas .boton-contorno { border-radius: 18px; padding: 0 12px; }
.marco-impresion { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; right: 0; bottom: 0; }

/* ------------------------------------------------------------ Calculadora */

.contenido-calculadora { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.calc-cabecera { display: flex; flex-direction: column; gap: 4px; }
.calc-titulo { display: flex; align-items: center; gap: 10px; }
.calc-icono { width: 38px; height: 38px; border-radius: 12px; background: var(--primario-suave); color: var(--primario); display: grid; place-items: center; }
.calc-titulo h1 { font-size: 22px; line-height: 28px; font-weight: 900; color: var(--primario); }
.calc-cabecera p { font-size: 13px; line-height: 17px; color: var(--texto-tenue); padding: 2px 0 0 2px; }
.modos { display: flex; gap: 8px; }
.chip-modo {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 8px; min-width: 0;
  border-radius: 8px; border: 1px solid var(--contorno); font-size: 13px; font-weight: 700; color: var(--texto-tenue);
}
.chip-modo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-modo.sel { border-color: transparent; color: #fff; }
.chip-modo.sel.azul { background: var(--primario); }
.chip-modo.sel.gris-azul { background: var(--gris-azul); }
.chip-modo.sel.naranja { background: var(--naranja-aviso); }
.calc-card { background: #fff; border: 1px solid rgba(191, 199, 209, 0.4); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.calc-card.elevada { border-radius: 22px; border-color: rgba(191, 199, 209, 0.35); padding: 18px; gap: 14px; box-shadow: var(--sombra-1); }
.calc-etiqueta { font-size: 12px; font-weight: 700; color: var(--texto-tenue); }
.selector-calc {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 14px; background: var(--superficie-suave); border: 1px solid rgba(191, 199, 209, 0.5);
}
.selector-calc strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-textos { display: flex; flex-direction: column; min-width: 0; }
.selector-textos small { font-size: 12px; color: var(--texto-tenue); }
.selector-calc .azul { color: var(--primario); }
.selector-calc .gris-azul { color: var(--gris-azul); }
.selector-calc > span:last-child { display: flex; }
.calc-seccion { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; }
.calc-seccion.azul { color: var(--primario); }
.calc-seccion.gris-azul { color: var(--gris-azul); }
.calc-seccion.naranja { color: var(--naranja-aviso); }
.calc-texto { font-size: 12px; line-height: 16px; color: var(--texto-tenue); }
.calc-texto.grande { font-size: 13px; line-height: 17px; }
.calc-negrita { font-size: 13px; font-weight: 700; }
.calc-vacio-titulo { font-size: 16px; font-weight: 700; }
.fila-factor { display: flex; gap: 12px; align-items: center; }
.fila-datos { display: flex; gap: 10px; }
.fila-datos > * { flex: 1; min-width: 0; }
.campo-contorno {
  position: relative; display: flex; align-items: center; height: 56px; padding: 0 14px 0 16px;
  border: 1px solid var(--contorno-suave); border-radius: 14px; background: #fff; margin-top: 4px;
}
.campo-contorno:focus-within { border-width: 2px; padding: 0 13px 0 15px; }
.campo-contorno.azul:focus-within { border-color: var(--primario); }
.campo-contorno.gris-azul:focus-within { border-color: var(--gris-azul); }
.campo-contorno.naranja:focus-within { border-color: var(--naranja-aviso); }
.campo-contorno-etiqueta {
  position: absolute; top: -9px; left: 12px; padding: 0 4px; background: #fff;
  font-size: 12px; line-height: 16px; color: var(--texto-tenue); max-width: calc(100% - 24px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.campo-contorno input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 16px; }
.campo-contorno-sufijo { font-size: 12px; font-weight: 700; color: var(--texto-tenue); }
.factor { height: 56px; padding: 0 14px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.factor small { font-size: 10px; color: var(--texto-tenue); line-height: 12px; }
.factor strong { font-size: 16px; font-weight: 800; }
.factor.azul { background: var(--primario-suave); color: var(--primario); }
.factor.gris-azul { background: var(--naranja-aviso-suave); color: var(--gris-azul); }
.dato { padding: 10px 12px; border-radius: 14px; background: var(--superficie-suave); border: 1px solid rgba(191, 199, 209, 0.4); display: flex; flex-direction: column; gap: 2px; }
.dato small { font-size: 11px; color: var(--texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dato strong { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dato .gris-azul { color: var(--gris-azul); }
.dato .oscuro { color: var(--texto); }
.dato .ok { color: var(--ok); }
.dato .rojo { color: var(--error); }
.dato .naranja { color: var(--naranja-aviso); }
.banner { padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 17px; font-weight: 700; }
.banner.neutro { background: var(--superficie-suave); color: var(--texto-tenue); font-weight: 400; }
.banner.correcto { background: var(--ok-suave); color: var(--ok); }
.banner.ajustado { background: var(--naranja-aviso-suave); color: var(--naranja-aviso); }
.banner.alto { background: var(--error-suave); color: var(--error); }
.pvp-sugerido { padding: 14px; border-radius: 16px; background: rgba(203, 230, 255, 0.5); display: flex; flex-direction: column; gap: 6px; }
.pvp-sugerido small { font-size: 11px; color: var(--texto-tenue); }
.pvp-sugerido strong { font-size: 26px; line-height: 32px; font-weight: 900; color: var(--primario); }
.pvp-sugerido span { font-size: 12px; color: var(--texto-tenue); }
.lista-produccion { display: flex; flex-direction: column; gap: 10px; }
.fila-produccion { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--superficie-suave); }
.fila-produccion.elab { background: rgba(203, 230, 255, 0.3); }
.fila-produccion div { display: flex; flex-direction: column; min-width: 0; }
.fila-produccion strong { font-size: 14px; }
.fila-produccion small { font-size: 12px; font-weight: 500; color: var(--primario); }
.fila-produccion > span { font-size: 13px; font-weight: 700; color: var(--texto-tenue); white-space: nowrap; }

/* ------------------------------------------------------------ Ajustes */

.contenido-ajustes { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.seccion-ajustes { background: #fff; border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.seccion-ajustes h2 { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--primario); }
.fila-ajuste { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ajuste-textos { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ajuste-textos strong { font-size: 16px; font-weight: 700; }
.ajuste-textos strong.normal { font-weight: 600; }
.ajuste-textos p { font-size: 13px; line-height: 19px; color: var(--texto-tenue); }
.seccion-editor .ajuste-textos p { font-size: 12px; line-height: 16px; }
.ajuste-entrada { display: flex; flex-direction: column; gap: 10px; }
.fila-entrada { display: flex; align-items: center; gap: 10px; }
.campo-ajuste { flex: 1; height: 56px; padding: 0 16px; border: 0; outline: none; border-radius: 20px; background: var(--superficie-fuerte); font-size: 16px; }
.campo-ajuste:focus { box-shadow: inset 0 -2px 0 var(--primario); }
.sufijo-ajuste { font-size: 18px; font-weight: 800; color: var(--primario); }
.divisor-ajustes { height: 1px; background: rgba(191, 199, 209, 0.6); border-radius: 999px; }
.fila-info { display: flex; justify-content: space-between; align-items: center; }
.fila-info span { font-size: 14px; font-weight: 600; color: var(--texto-tenue); }
.fila-info strong { font-size: 15px; }
.switch {
  position: relative; width: 52px; height: 32px; flex: none; border-radius: 16px;
  background: var(--superficie-fuerte); border: 2px solid var(--contorno); transition: background 0.15s;
}
.switch span { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--contorno); transition: all 0.15s; }
.switch.on { background: var(--primario); border-color: var(--primario); }
.switch.on span { left: 22px; top: 2px; width: 24px; height: 24px; background: #fff; }

/* ------------------------------------------------------------ Snackbar */

.snackbar {
  position: fixed; z-index: 200; left: 50%; bottom: 100px; transform: translate(-50%, 20px);
  width: max-content; max-width: min(calc(var(--columna) - 32px), calc(100% - 32px));
  padding: 14px 16px; border-radius: 4px; background: #2d3133; color: #eff1f3; font-size: 14px;
  box-shadow: var(--sombra-3); opacity: 0; pointer-events: none; transition: all 0.2s ease;
}
.snackbar.visible { opacity: 1; transform: translate(-50%, 0); }
.error-inicio { max-width: 480px; margin: 80px auto; padding: 0 20px; text-align: center; color: var(--texto-tenue); }

/* Botones redondos del editor de platos (más claros que en el resto) */
.seccion-plato .boton-circular.azul-suave { background: var(--primario-suave); }
.seccion-plato .boton-circular.rojo { background: var(--error-suave); }
.tarjeta-linea .boton-circular.azul-suave { background: rgba(64, 162, 227, 0.65); }
.tarjeta-linea .boton-circular.rojo { background: rgba(255, 218, 214, 0.65); }


/* ============================================================ Pantallas grandes
   Móvil (menos de 600 px): igual que la app.
   Tablet (600 px o más): pantallas a todo el ancho y listados en varias columnas.
   Ordenador o tablet apaisada (900 px o más): formularios como ventanas centradas
   con su contenido en dos columnas, y calculadora y ajustes repartidos. */

@media (min-width: 600px) {
  :root { --ancho-pantalla: 100%; }
  .contenido-modulo, .contenido-calculadora, .contenido-ajustes, .contenido-inicio { padding-left: 32px; padding-right: 32px; }
  .top-bar { padding-left: 16px; padding-right: 16px; }
  .top-bar.ajustes { padding-left: 32px; padding-right: 32px; }

  /* Listados: tarjetas en rejilla */
  .contenido-modulo {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px; align-items: start;
  }
  .contenido-modulo > :not(.tarjeta) { grid-column: 1 / -1; }
  .contenido-modulo > .card.vacio { max-width: 560px; justify-self: center; width: 100%; }
  .panel-busqueda { max-width: 760px; }

  /* Inicio: módulos uno al lado de otro */
  .contenido-inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-content: start; }
  .contenido-inicio > :not(.modulo-inicio) { grid-column: 1 / -1; }
  .inicio-cabecera { padding: 12px 0 8px; }
  .inicio-cabecera h1 { font-size: 24px; }
  .modulo-inicio { height: 100%; }

  /* Barra inferior: flotante y centrada, sin estirarse */
  .barra-inferior { width: min(520px, 100%); }

  .snackbar { bottom: 100px; }

  /* Formularios: algo más anchos que en el móvil y con la pantalla de atrás oscurecida */
  .capa:has(> .dialogo-completo) { background: rgba(0, 0, 0, 0.36); }
  .dialogo-completo { width: min(720px, 100%); }
  .hoja-inferior { width: min(720px, 100%); }
}

@media (min-width: 900px) {
  .contenido-modulo, .contenido-calculadora, .contenido-ajustes, .contenido-inicio {
    max-width: 1280px; margin-left: auto; margin-right: auto; width: 100%;
  }
  .top-bar:not(.dialogo) { max-width: 1312px; margin: 0 auto; }
  .contenido-modulo { padding-top: 16px; gap: 24px; }

  /* Inicio: tarjetas de módulo más grandes, con el icono arriba */
  .contenido-inicio { grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 32px; }
  .inicio-cabecera { margin-bottom: 8px; }
  .inicio-cabecera h1 { font-size: 28px; }
  .inicio-logo { width: 64px; height: 64px; }
  .modulo-inicio { flex-direction: column; align-items: flex-start; padding: 24px; gap: 18px; position: relative; }
  .modulo-icono { width: 60px; height: 60px; border-radius: 18px; }
  .modulo-textos strong { font-size: 22px; line-height: 28px; }
  .modulo-textos span { font-size: 14px; line-height: 20px; }
  .modulo-flecha { position: absolute; top: 24px; right: 24px; }
  .modulo-inicio.animada:hover { box-shadow: var(--sombra-3); }

  /* Calculadora: todo el ancho y el mismo sitio en los tres apartados (no se mueve al cambiar).
     En Platos, escalado y rentabilidad van lado a lado; las listas de producción, en varias columnas. */
  .contenido-calculadora { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .contenido-calculadora > * { grid-column: 1 / -1; }
  .contenido-calculadora.doble > .elevada { grid-column: auto; }
  .contenido-calculadora .modos { max-width: 640px; }
  .lista-produccion { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .calc-card.elevada .fila-datos, .calc-card.elevada .fila-factor, .calc-card.elevada > .campo-contorno, .calc-card.elevada > .desplegable, .calc-card.elevada > .banner, .calc-card.elevada > .pvp-sugerido { max-width: 900px; }

  /* Ajustes: secciones en dos columnas */
  .contenido-ajustes { display: block; columns: 2; column-gap: 24px; }
  .seccion-ajustes { break-inside: avoid; margin-bottom: 24px; }

  /* Formularios: ventana centrada con velo detrás */
  .capa:has(> .dialogo-completo) { align-items: center; background: rgba(0, 0, 0, 0.36); }
  .dialogo-completo {
    width: min(1120px, calc(100vw - 64px)); height: min(92dvh, 1100px);
    border-radius: 28px; overflow: hidden; box-shadow: var(--sombra-3);
  }
  .top-bar.dialogo { padding: 12px 20px 12px 12px; border-bottom: 1px solid rgba(191, 199, 209, 0.45); }
  .hoja-inferior {
    top: 50%; bottom: auto; transform: translateY(-50%);
    width: min(1040px, calc(100vw - 64px)); height: min(90dvh, 1000px);
    border-radius: 28px; animation: aparecer 0.18s ease;
  }
  .asa { display: none; }
  .hoja-cabecera { padding: 20px 24px 12px; }

  /* Contenido de los formularios en dos columnas (se lee hacia abajo y luego a la derecha) */
  .dos-columnas { display: block; columns: 2; column-gap: 24px; padding: 20px 24px 32px; }
  .dos-columnas > * { break-inside: avoid; margin-bottom: 20px; }
  /* Las columnas necesitan altura libre: el que desplaza es la ventana entera, no el cuerpo */
  .dialogo-completo, .hoja-inferior { overflow-y: auto; }
  .dialogo-completo > .dos-columnas, .hoja-inferior > .dos-columnas { flex: none; overflow: visible; }
  .hoja-cabecera { position: sticky; top: 0; z-index: 3; background: var(--superficie); }
  .barra-etiquetas { position: sticky; bottom: 0; z-index: 3; margin-top: auto; }
  .dialogo-cuerpo.plato.dos-columnas > * { margin-bottom: 22px; }
  .dos-columnas .vista-etiqueta { margin-bottom: 24px; }
  .barra-etiquetas { flex-direction: row; align-items: center; padding: 14px 24px; }
  .barra-etiquetas .boton-relleno.ancho { width: auto; flex: 1; }
  .barra-etiquetas .fila-campos { flex: 1; }

  /* Diálogos de aviso un poco más estrechos */
  .alert-dialog { width: min(480px, calc(100% - 48px)); }
}

@media (min-width: 1400px) {
  .contenido-modulo { grid-template-columns: repeat(3, 1fr); }
}