/* ============================================================================
   Casa de las Flores — sistema de diseño del panel. Móvil-primero, sin build.

   Organización: 1) TOKENS (única fuente de color/espacio/tipo) · 2) BASE ·
   3) COMPONENTES (las MISMAS clases que ya usaban las plantillas, rediseñadas:
   el contrato no cambió, así que ninguna plantilla se rompe) · 4) MÓDULOS ·
   5) RESPONSIVE (móvil: navegación inferior tipo app).

   Decisiones de fondo:
   - El frambuesa de la marca es ACENTO, no fondo de todo: las superficies son
     neutras cálidas. Eso es lo que se ve limpio en vez de "todo rosado".
   - Sombras suaves en capas en lugar de relieves 3D.
   - Todo lo interactivo mide 44px de alto real (dedo, no mouse).
   ========================================================================= */

/* ============================== 1. TOKENS ============================== */
:root {
  /* Marca (frambuesa) en escala, para poder usar tonos suaves */
  --marca-50:#fff1f6; --marca-100:#ffe0ec; --marca-200:#ffc2d9; --marca-300:#f79bbe;
  --marca-400:#ee6b9c; --marca-500:#d81b60; --marca-600:#c2185b; --marca-700:#9d1249;

  /* Neutros CÁLIDOS (no grises puros: acompañan al frambuesa) */
  --n-0:#ffffff; --n-25:#fdfbfc; --n-50:#f8f5f7; --n-100:#f1ecef; --n-200:#e5dde2;
  --n-300:#cfc3cb; --n-400:#a3929e; --n-500:#7c6975; --n-700:#4e3c46; --n-900:#2b1f26;

  /* Semánticos de estado */
  --exito-50:#eaf7ef; --exito-200:#b7e0c6; --exito-600:#2f7d4f; --exito-700:#215c3a;
  --info-50:#eef3fb;  --info-200:#c2d3ee;  --info-600:#3a5f9e;  --info-700:#2c4a7d;
  --aviso-50:#fff4e8; --aviso-200:#ffd8ad; --aviso-600:#b45f0a; --aviso-700:#8a4708;
  --error-50:#fdecec; --error-200:#f6c0c0; --error-600:#c62828; --error-700:#9c1f1f;
  --morado-50:#f4eefb; --morado-200:#d9c4ef; --morado-600:#6c3ca0;
  --cian-50:#e6f5f7;  --cian-200:#b3dfe6;  --cian-600:#0e6d7d;

  /* Roles: lo que usan los componentes */
  --fondo:var(--n-25); --superficie:var(--n-0); --superficie-2:var(--n-50);
  --borde:var(--n-200); --borde-fuerte:var(--n-300);
  --texto:var(--n-900); --texto-2:var(--n-500);
  --acento:var(--marca-600); --acento-claro:var(--marca-500); --acento-osc:var(--marca-700);

  /* Alias heredados: plantillas y estilos inline viejos los siguen usando.
     Apuntan a los roles nuevos para no romper nada. */
  --negro:var(--marca-600); --dorado:var(--marca-300); --dorado-osc:var(--marca-700);
  --verde:var(--marca-600); --verde-osc:var(--marca-700); --rosa:var(--marca-500);
  --crema:var(--marca-50); --tinta:var(--n-900); --gris:var(--n-500);
  --rojo:var(--error-600); --ambar:var(--aviso-600); --azul:var(--info-600); --ok:var(--exito-600);

  /* Espaciado: escala de 4px. Nada de números al azar. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px; --e10:40px;

  /* Radios */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* Elevación: sombras en capas (suaves, no "cajita con relieve") */
  --sombra-1:0 1px 2px rgba(43,31,38,.06), 0 1px 3px rgba(43,31,38,.04);
  --sombra-2:0 2px 4px rgba(43,31,38,.05), 0 4px 12px rgba(43,31,38,.06);
  --sombra-3:0 4px 8px rgba(43,31,38,.06), 0 12px 28px rgba(43,31,38,.10);
  --sombra-acento:0 4px 14px rgba(194,24,91,.28);

  /* Tipografía: Inter para UI, Fraunces para títulos. Escala fluida. */
  --f-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --t-xs:.76rem; --t-sm:.86rem; --t-base:1rem;
  --t-lg:clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-xl:clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
  --t-2xl:clamp(1.5rem, 1.2rem + 1.8vw, 2.1rem);

  --transicion:160ms cubic-bezier(.4, 0, .2, 1);
  --alto-nav-movil:62px;   /* lo usa el padding inferior del <main> en celular */
}

/* Tipografías propias (self-hosted): la tienda debe verse igual sin internet.
   Son variables: un solo archivo cubre todos los pesos. */
@font-face {
  font-family:"Inter"; src:url("/static/fuentes/inter-var-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Fraunces"; src:url("/static/fuentes/fraunces-var-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* =============================== 2. BASE =============================== */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  margin:0; font-family:var(--f-ui); font-size:var(--t-base); line-height:1.5;
  color:var(--texto); background:var(--fondo);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main { max-width:1060px; margin:0 auto; padding:var(--e5) var(--e4) var(--e10); }

h1, h2, h3 { font-family:var(--f-display); font-weight:600; letter-spacing:-.01em; color:var(--texto); }
h1 { font-size:var(--t-2xl); margin:0 0 var(--e4); line-height:1.15; }
h2 { font-size:var(--t-xl); margin:var(--e6) 0 var(--e3); line-height:1.2; }
h3 { font-size:var(--t-lg); margin:var(--e4) 0 var(--e2); }
p { margin:0 0 var(--e3); }
a { color:var(--acento-osc); text-underline-offset:2px; }
a:hover { color:var(--acento); }

/* Foco visible: se navega mucho con teclado desde el mostrador */
:focus-visible { outline:2px solid var(--acento-claro); outline-offset:2px; border-radius:var(--r-sm); }
::selection { background:var(--marca-200); color:var(--n-900); }

/* Anti-desborde: un token largo (URL de Maps, dedicatoria sin espacios) no
   puede empujar el ancho de toda la página. */
.card, .tarjeta, .alerta, .ramo-detalle, blockquote, table.tabla td,
.pedido-confirmacion, .pedido-referencia, .dedicatoria-editor p { overflow-wrap:anywhere; }
.fila > * { min-width:0; }
.carrito-linea > span:first-child { min-width:0; overflow-wrap:anywhere; }
.pedido-bienvenida .badge { white-space:normal; }
img { max-width:100%; }

/* =========================== 3. COMPONENTES =========================== */

/* ---- Barra superior: degradado de marca + sombra (profundidad sin recargar) ---- */
.topbar {
  background:linear-gradient(135deg, var(--marca-600) 0%, var(--marca-700) 100%);
  color:#fff; padding:var(--e2) var(--e4);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e2);
  box-shadow:var(--sombra-2); position:relative; z-index:60;
}
.topbar .marca {
  display:flex; align-items:center; gap:var(--e2);
  font-family:var(--f-display); font-weight:600; font-size:1.08rem;
  color:#fff; text-decoration:none; letter-spacing:-.01em;
}
/* Marca de la topbar: SOLO LA FLOR del logo (la barra es angosta; el logo
   completo quedaba ilegible), en versión BLANCA porque el fondo es el
   frambuesa de la marca. width/height van también en el HTML para que no
   salte el layout mientras carga. */
.marca-logo { height:38px; width:auto; display:block; }
.topbar .usuario { font-size:var(--t-sm); opacity:.92; }
.topbar a { color:#fff; }
.topbar-derecha { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--e3); }
.btn-pantalla {
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:var(--r-sm); font-size:1rem; padding:6px 10px; cursor:pointer; line-height:1;
  transition:background var(--transicion);
}
.btn-pantalla:hover { background:rgba(255,255,255,.26); }
/* Selector de módulo (floristería / vivero) dentro de la barra */
.topbar select {
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:var(--r-full); padding:6px 10px; font-family:inherit; font-size:var(--t-sm);
}
.topbar select option { color:var(--texto); background:#fff; }

/* ---- Navegación principal (escritorio: píldoras bajo la barra) ---- */
nav.menu {
  display:flex; flex-wrap:wrap; gap:var(--e2); padding:var(--e3) var(--e4);
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--borde); position:sticky; top:0; z-index:50;
}
nav.menu a {
  white-space:nowrap; text-decoration:none; padding:9px 14px; border-radius:var(--r-full);
  font-size:var(--t-sm); font-weight:500; color:var(--texto-2);
  background:transparent; border:1px solid transparent;
  transition:background var(--transicion), color var(--transicion);
}
nav.menu a:hover { background:var(--n-100); color:var(--texto); }
nav.menu a.activo { background:var(--marca-600); color:#fff; font-weight:600; box-shadow:var(--sombra-acento); }

/* Desplegable "⋯ Más" */
.menu-mas { position:relative; }
.menu-mas > summary {
  list-style:none; cursor:pointer; color:#fff; padding:6px 12px; border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.35); font-size:var(--t-sm); white-space:nowrap;
  transition:background var(--transicion);
}
.menu-mas > summary::-webkit-details-marker { display:none; }
.menu-mas > summary:hover, .menu-mas[open] > summary { background:rgba(255,255,255,.24); }
.menu-mas-panel {
  position:absolute; right:0; top:calc(100% + var(--e2));
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-lg);
  box-shadow:var(--sombra-3); min-width:230px; padding:var(--e2); z-index:100;
  display:flex; flex-direction:column; gap:2px; animation:aparecer 160ms ease-out;
}
.menu-mas-panel a { color:var(--texto); text-decoration:none; padding:10px 12px; border-radius:var(--r-sm); font-size:var(--t-sm); }
.menu-mas-panel a:hover { background:var(--marca-50); color:var(--acento-osc); }

@keyframes aparecer { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes subir { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ---- Tarjetas ---- */
.card, .tarjeta {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-lg);
  padding:var(--e5); margin-bottom:var(--e4); box-shadow:var(--sombra-1);
  transition:box-shadow var(--transicion);
}
.card h2, .tarjeta h2 { margin-top:0; }
.fila { display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; }
.espaciado { justify-content:space-between; }
.mudo { color:var(--texto-2); font-size:var(--t-sm); }
.grande { font-size:var(--t-lg); font-weight:700; font-variant-numeric:tabular-nums; }
.nowrap { white-space:nowrap; }

/* ---- Botones: planos con elevación suave. El "lift" al pasar da respuesta
   sin relieves falsos. ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px;                      /* objetivo táctil real */
  padding:10px var(--e4); border-radius:var(--r-md);
  border:1px solid var(--borde-fuerte); background:var(--superficie); color:var(--texto);
  font-family:inherit; font-size:var(--t-sm); font-weight:500;
  text-decoration:none; cursor:pointer; text-align:center; box-shadow:var(--sombra-1);
  transition:transform var(--transicion), box-shadow var(--transicion),
             background var(--transicion), border-color var(--transicion);
}
.btn:hover { background:var(--n-50); border-color:var(--n-400); transform:translateY(-1px); box-shadow:var(--sombra-2); }
.btn:active { transform:translateY(0); box-shadow:var(--sombra-1); }
.btn-primario {
  background:linear-gradient(135deg, var(--marca-500), var(--marca-600));
  border-color:transparent; color:#fff; font-weight:600; box-shadow:var(--sombra-acento);
}
.btn-primario:hover {
  background:linear-gradient(135deg, var(--marca-500), var(--marca-700));
  border-color:transparent; color:#fff; box-shadow:0 6px 20px rgba(194,24,91,.34);
}
.btn-peligro { background:var(--superficie); border-color:var(--error-200); color:var(--error-600); }
.btn-peligro:hover { background:var(--error-50); border-color:var(--error-600); }
.btn-chico { min-height:36px; padding:6px 12px; font-size:var(--t-xs); border-radius:var(--r-sm); }
.btn-bloque { display:flex; width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---- Badges de estado "soft": fondo en tinte + texto oscuro del mismo tono.
   Se leen mucho mejor que los sólidos saturados y no compiten con los botones. */
.badge {
  display:inline-flex; align-items:center; gap:4px; padding:4px 10px;
  border-radius:var(--r-full); font-size:var(--t-xs); font-weight:600; line-height:1.3;
  white-space:nowrap; border:1px solid transparent;
}
.estado-cotizado      { background:var(--n-100);     color:var(--n-700);      border-color:var(--n-200); }
.estado-confirmado    { background:var(--info-50);   color:var(--info-700);   border-color:var(--info-200); }
.estado-en_produccion { background:var(--aviso-50);  color:var(--aviso-700);  border-color:var(--aviso-200); }
.estado-listo         { background:var(--morado-50); color:var(--morado-600); border-color:var(--morado-200); }
.estado-despachado    { background:var(--cian-50);   color:var(--cian-600);   border-color:var(--cian-200); }
.estado-entregado     { background:var(--exito-50);  color:var(--exito-700);  border-color:var(--exito-200); }
.estado-cerrado       { background:var(--n-100);     color:var(--n-500);      border-color:var(--n-200); }
.estado-cancelado     { background:var(--n-50);      color:var(--n-400);      border-color:var(--n-200); }
.cot-abierta    { background:var(--aviso-50); color:var(--aviso-700); border-color:var(--aviso-200); }
.cot-confirmada { background:var(--exito-50); color:var(--exito-700); border-color:var(--exito-200); }
.cot-vencida    { background:var(--n-100);    color:var(--n-500);     border-color:var(--n-200); }
.cot-perdida    { background:var(--error-50); color:var(--error-700); border-color:var(--error-200); }
.nivel-hay    { background:var(--exito-50); color:var(--exito-700); border-color:var(--exito-200); }
.nivel-poco   { background:var(--aviso-50); color:var(--aviso-700); border-color:var(--aviso-200); }
.nivel-no_hay { background:var(--error-50); color:var(--error-700); border-color:var(--error-200); }

/* ---- Alertas ---- */
.alerta {
  padding:var(--e3) var(--e4); border-radius:var(--r-md); margin-bottom:var(--e4);
  font-size:var(--t-sm); background:var(--exito-50); border:1px solid var(--exito-200);
  color:var(--exito-700); display:flex; gap:var(--e2); align-items:flex-start;
  animation:subir 200ms ease-out;
}
.alerta-error { background:var(--error-50); border-color:var(--error-200); color:var(--error-700); }
.faltantes {
  background:var(--aviso-50); border:1px solid var(--aviso-200); color:var(--aviso-700);
  border-radius:var(--r-md); padding:var(--e3) var(--e4); font-size:var(--t-sm); margin:var(--e3) 0;
}
.faltantes ul { margin:var(--e1) 0 0 var(--e5); padding:0; }
.aviso-colision {
  background:var(--aviso-50); border:1px solid var(--aviso-200); color:var(--aviso-700);
  border-radius:var(--r-md); padding:var(--e3) var(--e4); margin:var(--e2) 0; font-size:var(--t-sm);
}

/* ---- Formularios ---- */
form.form label { display:block; font-size:var(--t-sm); font-weight:500; color:var(--texto-2); margin:var(--e3) 0 var(--e1); }
form.form input, form.form select, form.form textarea,
.filtros-inventario input, .filtros-inventario select,
.revision-datos input, .revision-datos textarea,
.pedido-datos-publicos input, .pedido-datos-publicos select, .pedido-datos-publicos textarea,
.consulta-pedido input, .filtros-fila input, .armador-buscador {
  width:100%; min-height:44px; padding:10px var(--e3);
  border:1px solid var(--borde-fuerte); border-radius:var(--r-md);
  font-family:inherit; font-size:var(--t-base);
  background:var(--superficie); color:var(--texto);
  transition:border-color var(--transicion), box-shadow var(--transicion);
}
form.form input:focus, form.form select:focus, form.form textarea:focus,
.filtros-fila input:focus, .armador-buscador:focus,
.revision-datos input:focus, .revision-datos textarea:focus,
.pedido-datos-publicos input:focus, .pedido-datos-publicos textarea:focus {
  outline:none; border-color:var(--acento-claro); box-shadow:0 0 0 3px var(--marca-100);
}
form.form input::placeholder, form.form textarea::placeholder { color:var(--n-400); }
form.form textarea { min-height:92px; resize:vertical; line-height:1.5; }
form.form .acciones { margin-top:var(--e4); display:flex; gap:var(--e2); flex-wrap:wrap; }
.form-inline { display:inline; }
.campo-error input, .campo-error select, .campo-error textarea { border-color:var(--error-600) !important; background:var(--error-50); }
.campo-error .msg-error { color:var(--error-600); font-size:var(--t-xs); margin-top:var(--e1); font-weight:500; }
.campo-obligatorio { color:var(--error-600); font-size:var(--t-xs); font-weight:600; }
/* Señal EN el campo: todo control required lleva un filo a la izquierda */
input:required, select:required, textarea:required { border-left:3px solid var(--marca-300); }

/* ---- Tablas: sin rejilla. Encabezado tenue, separadores mínimos, realce al pasar. */
.tabla-scroll { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--borde); background:var(--superficie); }
table.tabla { width:100%; border-collapse:collapse; background:transparent; font-size:var(--t-sm); }
table.tabla th, table.tabla td { padding:var(--e3) var(--e4); text-align:left; }
table.tabla thead th {
  color:var(--texto-2); font-size:var(--t-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--superficie-2); border-bottom:1px solid var(--borde);
}
table.tabla tbody tr { border-bottom:1px solid var(--n-100); transition:background var(--transicion); }
table.tabla tbody tr:hover { background:var(--marca-50); }
table.tabla tbody tr:last-child { border-bottom:none; }
table.tabla td { vertical-align:middle; }

/* ---- Grilla de catálogo ---- */
.grilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:var(--e4); }
.producto-card {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-lg);
  overflow:hidden; text-decoration:none; color:var(--texto); display:block;
  box-shadow:var(--sombra-1); transition:transform var(--transicion), box-shadow var(--transicion);
}
.producto-card:hover { transform:translateY(-3px); box-shadow:var(--sombra-3); }
.producto-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--n-100); }
.producto-card .info { padding:var(--e3); }
.producto-card .codigo { color:var(--texto-2); font-size:var(--t-xs); font-weight:500; letter-spacing:.03em; }
.producto-card .pnombre { font-weight:600; font-size:var(--t-sm); margin:2px 0 var(--e1); line-height:1.35; }
.producto-card .precio { font-weight:700; color:var(--acento-osc); font-variant-numeric:tabular-nums; }
.producto-sinfoto {
  width:100%; aspect-ratio:1; display:grid; place-items:center; font-size:2.4rem;
  background:linear-gradient(135deg, var(--marca-50), var(--n-100));
}
.producto-card .btn-agregar-carrito, .producto-card .btn-usar-producto { margin-top:var(--e2); width:100%; }

/* Miniaturas de adjuntos */
.miniaturas { display:flex; flex-wrap:wrap; gap:var(--e2); }
.miniaturas a img {
  width:88px; height:88px; object-fit:cover; border-radius:var(--r-md);
  border:1px solid var(--borde); transition:transform var(--transicion);
}
.miniaturas a:hover img { transform:scale(1.04); }

/* ---- Checklist ---- */
.check-lista { list-style:none; margin:var(--e2) 0; padding:0; }
.check-lista li { padding:var(--e1) 0; font-size:var(--t-sm); }
.check-ok::before { content:"✅ "; }
.check-falta::before { content:"🔴 "; }

/* ---- Chips y categorías ---- */
.cats { display:flex; flex-wrap:wrap; gap:var(--e2); margin:var(--e3) 0 var(--e4); }
.cats a, .cats button, .cat-chip {
  padding:8px 14px; border-radius:var(--r-full); border:1px solid var(--borde);
  background:var(--superficie); color:var(--texto-2); font-family:inherit; font-size:var(--t-sm);
  text-decoration:none; cursor:pointer; transition:all var(--transicion);
}
.cats a:hover, .cats button:hover, .cat-chip:hover { border-color:var(--marca-300); color:var(--acento-osc); background:var(--marca-50); }
.cats a.activo, .cats button.activo, .cat-chip.activo { background:var(--marca-600); color:#fff; border-color:var(--marca-600); font-weight:600; }
.cat-separador {
  margin:var(--e6) 0 var(--e3); font-family:var(--f-display); font-size:var(--t-lg);
  color:var(--texto); border-bottom:1px solid var(--borde); padding-bottom:var(--e2);
}

/* ---- Filtros ---- */
.filtros-catalogo { margin:var(--e2) 0 var(--e4); }
.filtros-fila { display:flex; gap:var(--e2); flex-wrap:wrap; }
.filtros-fila input { flex:1 1 140px; }
.tipos-flor { margin-top:var(--e2); }
.tipos-flor .limpiar { color:var(--error-600); border-color:var(--error-200); }
.filtros-inventario label { display:block; margin-bottom:var(--e1); font-size:var(--t-sm); color:var(--texto-2); }
.filtros-inventario .filtros-fila > div { flex:1 1 210px; }
.filtros-resumen { align-items:center; flex-wrap:wrap; gap:var(--e2); margin-bottom:var(--e2); }

/* ---- Colapsables (acordeón): + que se vuelve − en un círculo de marca ---- */
.inventario-grupo, .armador-detalle {
  margin:var(--e3) 0; border:1px solid var(--borde); border-radius:var(--r-lg);
  background:var(--superficie); overflow:hidden; box-shadow:var(--sombra-1);
}
.inventario-grupo > summary, .armador-detalle > summary {
  cursor:pointer; padding:var(--e4); font-weight:600; color:var(--texto);
  background:var(--superficie); list-style:none;
  display:flex; align-items:center; gap:var(--e2); transition:background var(--transicion);
}
.inventario-grupo > summary:hover, .armador-detalle > summary:hover { background:var(--marca-50); }
.inventario-grupo > summary::-webkit-details-marker,
.armador-detalle > summary::-webkit-details-marker { display:none; }
.inventario-grupo > summary::before, .armador-detalle > summary::before {
  content:'+'; display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px;
  border-radius:var(--r-full); background:var(--marca-100); color:var(--acento-osc);
  font-weight:700; font-size:1rem; transition:background var(--transicion);
}
.inventario-grupo[open] > summary::before, .armador-detalle[open] > summary::before {
  content:'−'; background:var(--marca-600); color:#fff;
}
.inventario-grupo > summary span { color:var(--texto-2); font-size:var(--t-xs); font-weight:500; margin-left:auto; }
.inventario-grupo > .card { margin:0; border:0; border-radius:0; box-shadow:none; }
.inventario-grupo[hidden] { display:none; }
.armador-detalle .armador-cuerpo { padding:0 var(--e4) var(--e4); }
.armador-grupo-cuerpo { padding:var(--e1) var(--e4) var(--e3); }
.ref-colapsables summary { cursor:pointer; font-weight:600; padding:var(--e2) 0; color:var(--texto); }
.ref-colapsables summary:hover { color:var(--acento); }

/* ============================== 4. MÓDULOS ============================== */

/* ---- Armador de arreglos ---- */
.armador-buscador { margin:var(--e1) 0 var(--e3); }
.armador-grupo { font-size:var(--t-sm); font-weight:600; margin:var(--e4) 0 var(--e2); color:var(--texto-2); text-transform:uppercase; letter-spacing:.04em; }
.armador-item { display:flex; align-items:center; justify-content:space-between; gap:var(--e3); padding:var(--e3) 0; border-bottom:1px solid var(--n-100); }
.armador-item:last-child { border-bottom:none; }
.armador-item-info { display:flex; flex-direction:column; gap:2px; }
.armador-item-nombre { font-weight:500; }
.armador-agotado { color:var(--error-600); font-size:var(--t-xs); font-weight:500; }
.armador-stepper { display:flex; align-items:center; gap:var(--e2); }
.armador-stepper .btn-chico { min-width:40px; min-height:40px; font-size:1.15rem; line-height:1; padding:0; }
.armador-cant { min-width:28px; text-align:center; font-weight:700; font-size:var(--t-lg); font-variant-numeric:tabular-nums; }
.armador-totales { margin-top:var(--e4); padding-top:var(--e3); border-top:2px solid var(--marca-200); }
.armador-totales .grande { color:var(--acento-osc); }

/* ---- Carrito ---- */
.carrito-fab {
  position:fixed; left:var(--e4); bottom:calc(var(--e4) + env(safe-area-inset-bottom)); z-index:70;
  background:linear-gradient(135deg, var(--marca-500), var(--marca-600)); color:#fff;
  border:none; border-radius:var(--r-full); padding:13px 20px;
  font-family:inherit; font-size:var(--t-sm); font-weight:600; cursor:pointer;
  box-shadow:var(--sombra-3); transition:transform var(--transicion);
}
.carrito-fab:hover { transform:translateY(-2px); }
.carrito-badge {
  background:rgba(255,255,255,.26); border-radius:var(--r-full); padding:2px 9px;
  font-size:var(--t-xs); margin-left:var(--e1); min-width:22px; display:inline-block; text-align:center;
}
.carrito-cajon {
  position:fixed; right:0; bottom:0; top:0; width:min(420px, 92vw); z-index:80;
  background:var(--superficie); box-shadow:-8px 0 32px rgba(43,31,38,.22);
  transform:translateX(100%); transition:transform 280ms cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.carrito-cajon.abierto { transform:translateX(0); }
.carrito-cab { display:flex; justify-content:space-between; align-items:center; padding:var(--e4); border-bottom:1px solid var(--borde); }
.carrito-lineas { flex:0 1 auto; max-height:42vh; overflow-y:auto; padding:var(--e3) var(--e4); }
.carrito-linea { display:flex; justify-content:space-between; gap:var(--e2); align-items:center; padding:var(--e2) 0; border-bottom:1px solid var(--n-100); font-size:var(--t-sm); }
.carrito-linea .nowrap { white-space:nowrap; display:flex; align-items:center; gap:var(--e1); }
.carrito-pie { flex:1; min-height:0; display:flex; flex-direction:column; gap:var(--e3); padding:var(--e4); border-top:2px solid var(--marca-200); }
.carrito-aclaraciones { flex:1; min-height:120px; display:flex; flex-direction:column; gap:var(--e1); margin:var(--e1) 0; font-size:var(--t-sm); font-weight:600; }
.carrito-aclaraciones textarea { flex:1; min-height:120px; resize:vertical; padding:var(--e2); border:1px solid var(--borde-fuerte); border-radius:var(--r-md); font:inherit; font-weight:400; }
.carrito-acciones { display:grid; gap:var(--e3); }
.carrito-accion { display:grid; gap:var(--e1); }
.carrito-accion span { color:var(--texto-2); font-size:var(--t-xs); line-height:1.35; }
.carrito-accion .btn { min-height:46px; }
.carrito-panel { margin-top:var(--e3); }
.carrito-panel .carrito-linea { border-bottom:1px dashed var(--borde); }
.carrito-nota {
  width:100%; padding:var(--e2) var(--e3); border:1px solid var(--borde);
  border-radius:var(--r-sm); font:inherit; font-size:var(--t-sm); background:var(--superficie-2);
}

/* ---- Agenda de entregas ---- */
.agenda-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--e2); margin-bottom:var(--e4); }
.agenda-hora-vacia { color:var(--n-400); font-size:var(--t-xs); padding:var(--e2) 0; border-bottom:1px dashed var(--borde); }
.agenda-fila { display:flex; gap:var(--e3); padding:var(--e3) 0; border-bottom:1px solid var(--n-100); align-items:flex-start; }
.agenda-hora { min-width:72px; font-weight:700; color:var(--acento-osc); font-variant-numeric:tabular-nums; }
.agenda-pedido { flex:1; }
.agenda-choque { background:var(--aviso-50); border-left:3px solid var(--aviso-600); padding-left:var(--e2); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.agenda-choque-aviso { color:var(--aviso-700); font-size:var(--t-xs); font-weight:600; }

/* Tarea de producción con alarma */
.tarea-alarma { border-left:4px solid var(--error-600); background:var(--error-50); }

/* ---- Asistente de nuevo pedido ---- */
.wizard-steps { display:flex; gap:var(--e2); margin-bottom:var(--e4); }
.wizard-paso {
  flex:1; text-align:center; font-size:var(--t-xs); font-weight:500;
  padding:var(--e3) var(--e1); border-radius:var(--r-md);
  background:var(--superficie); border:1px solid var(--borde); color:var(--texto-2);
  transition:all var(--transicion);
}
.wizard-paso.actual { background:var(--marca-600); color:#fff; border-color:var(--marca-600); font-weight:700; box-shadow:var(--sombra-acento); }
.wizard-paso.hecho { background:var(--exito-50); color:var(--exito-700); border-color:var(--exito-200); }
.wizard-acciones { display:flex; gap:var(--e2); justify-content:space-between; margin-top:var(--e4); }
.msg-error-paso { color:var(--error-600); font-size:var(--t-sm); margin-top:var(--e2); font-weight:600; }

/* ---- Grilla de horas ---- */
.grilla-horas { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:var(--e2); margin:var(--e2) 0; }
.hora-slot {
  padding:var(--e3) var(--e1); border:1px solid var(--borde); border-radius:var(--r-md);
  background:var(--superficie); cursor:pointer; font-size:var(--t-sm); text-align:center;
  min-height:44px; display:grid; place-items:center; align-content:center; transition:all var(--transicion);
}
.hora-slot:hover { border-color:var(--marca-300); background:var(--marca-50); }
.hora-slot.elegida { background:var(--marca-600); color:#fff; border-color:var(--marca-600); font-weight:700; box-shadow:var(--sombra-acento); }
.hora-slot.ocupada { background:var(--aviso-50); border-color:var(--aviso-200); color:var(--aviso-700); font-size:var(--t-xs); }
.hora-slot.ocupada small { display:block; opacity:.85; }

/* ---- Stepper de etapas del pedido ---- */
.stepper { display:flex; gap:var(--e1); margin:var(--e1) 0 var(--e5); }
.stepper .paso { flex:1; text-align:center; font-size:var(--t-xs); color:var(--texto-2); padding-top:26px; position:relative; }
.stepper .paso::before {
  content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%;
  background:var(--superficie); border:2px solid var(--borde-fuerte); z-index:1;
}
.stepper .paso::after { content:""; position:absolute; top:11px; left:50%; width:100%; height:2px; background:var(--borde); }
.stepper .paso:last-child::after { display:none; }
.stepper .paso.hecho::before { background:var(--exito-600); border-color:var(--exito-600); }
.stepper .paso.hecho::after { background:var(--exito-200); }
.stepper .paso.actual::before { background:var(--marca-600); border-color:var(--marca-600); box-shadow:0 0 0 4px var(--marca-100); }
.stepper .paso.actual { color:var(--acento-osc); font-weight:700; }
.stepper .paso.hecho { color:var(--exito-700); }

/* Tarjeta de la etapa actual: anillo de marca en vez de borde grueso */
.etapa-card { border:1px solid var(--marca-200); box-shadow:0 0 0 3px var(--marca-50), var(--sombra-2); }
.etapa-card h2 { margin-top:0; color:var(--acento-osc); }
.ramo-detalle {
  background:var(--superficie-2); border:1px solid var(--n-100); border-radius:var(--r-md);
  padding:var(--e2) var(--e3); font-size:var(--t-sm); margin-top:var(--e1);
}

/* ---- Botón flotante "nuevo pedido" ---- */
.fab {
  position:fixed; right:var(--e4); bottom:calc(var(--e4) + env(safe-area-inset-bottom));
  background:linear-gradient(135deg, var(--marca-500), var(--marca-600)); color:#fff;
  border-radius:var(--r-full); padding:14px 22px;
  font-size:var(--t-sm); font-weight:600; text-decoration:none;
  box-shadow:var(--sombra-3); z-index:65; display:inline-flex; align-items:center; gap:6px;
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.fab:hover { transform:translateY(-2px) scale(1.02); color:#fff; box-shadow:0 8px 26px rgba(194,24,91,.38); }

/* ---- Guía del flujo de pedidos ---- */
.flujo-pedidos {
  margin:0 0 var(--e4); padding:var(--e4); border:1px solid var(--borde);
  border-radius:var(--r-lg); background:linear-gradient(135deg, var(--superficie), var(--marca-50));
}
.flujo-pedidos > strong { color:var(--acento-osc); font-family:var(--f-display); }
.flujo-pedidos ol { display:grid; grid-template-columns:repeat(6, minmax(125px, 1fr)); gap:var(--e2); list-style:none; padding:0; margin:var(--e3) 0 0; overflow-x:auto; }
.flujo-pedidos li { min-width:125px; position:relative; padding:var(--e3); border:1px solid var(--borde); border-radius:var(--r-md); background:var(--superficie); }
.flujo-pedidos li:not(:last-child)::after { content:'→'; position:absolute; right:-13px; top:12px; color:var(--marca-300); font-weight:700; z-index:1; }
.flujo-pedidos span, .flujo-pedidos small { display:block; }
.flujo-pedidos span { color:var(--texto); font-weight:600; font-size:var(--t-sm); }
.flujo-pedidos small { color:var(--texto-2); font-size:var(--t-xs); margin-top:2px; }

/* ---- Revisión de inventario ---- */
.revision-inventario-cabecera { display:flex; justify-content:space-between; gap:var(--e5); align-items:center; margin-bottom:var(--e5); }
.revision-inventario-cabecera h1 { margin:var(--e1) 0; }
.revision-inventario-cabecera p { margin:0; color:var(--texto-2); }
.revision-navegacion, .revision-acciones { display:flex; gap:var(--e2); flex-wrap:wrap; }
.revision-inventario-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.85fr); gap:var(--e5); align-items:start; }
.revision-datos { display:grid; gap:var(--e3); }
.revision-datos label { display:grid; gap:var(--e1); font-weight:600; font-size:var(--t-sm); }
.revision-datos textarea { min-height:110px; resize:vertical; }
.revision-campos-cortos { display:grid; grid-template-columns:1fr 1fr; gap:var(--e3); }
.revision-foto { display:grid; gap:var(--e3); }
.revision-foto-marco { min-height:300px; border:2px dashed var(--borde-fuerte); border-radius:var(--r-lg); background:var(--superficie-2); display:grid; place-items:center; overflow:hidden; }
.revision-foto-marco img { width:100%; max-height:420px; object-fit:contain; display:block; }
.revision-sin-foto { display:grid; place-items:center; gap:var(--e2); color:var(--texto-2); text-align:center; padding:var(--e8); }
.revision-sin-foto:first-letter { font-size:2rem; }
.revision-selector-foto { display:inline-flex; width:max-content; cursor:pointer; padding:10px var(--e3); border:1px solid var(--borde-fuerte); border-radius:var(--r-md); font-weight:600; font-size:var(--t-sm); }
.revision-selector-foto:hover { background:var(--marca-50); border-color:var(--marca-300); }
.revision-selector-foto input { position:absolute; width:1px; height:1px; opacity:0; }
.revision-acciones { grid-column:1 / -1; justify-content:flex-end; padding-top:var(--e1); }

/* ---- Marca, dedicatoria e impresión ---- */
.logo-catalogo { width:min(180px, 55vw); max-height:100px; object-fit:contain; border-radius:var(--r-sm); }
.logo-portada { display:block; width:min(300px, 72vw); height:auto; margin:0 auto var(--e2); }
.marca-publica { width:62px; height:62px; margin:0 auto var(--e1); display:grid; place-items:center; border-radius:50%; color:var(--marca-500); background:#fff; border:2px solid var(--marca-200); font-size:2rem; box-shadow:var(--sombra-2); }
.tarjeta-flor { font-size:2rem; line-height:1; }
.dedicatoria-editor { margin:var(--e2) 0 var(--e3); padding:var(--e3) var(--e4); border:1px solid var(--borde); border-left:3px solid var(--marca-300); border-radius:var(--r-md); background:var(--marca-50); }
.dedicatoria-editor-cab { display:flex; justify-content:space-between; gap:var(--e3); color:var(--acento-osc); font-size:var(--t-sm); font-weight:500; }
.dedicatoria-editor p { margin:var(--e2) 0 var(--e1); white-space:pre-wrap; font-family:var(--f-display); line-height:1.5; }
.dedicatoria-editor p.dedicatoria-larga { font-size:var(--t-sm); }
.dedicatoria-imagen-preview { margin:var(--e2) 0; padding:var(--e2); text-align:center; background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-md); }
.dedicatoria-imagen-preview img { display:block; max-width:180px; max-height:120px; margin:0 auto; object-fit:contain; border-radius:var(--r-sm); }
.tarjeta-impresion { max-width:500px; min-height:310px; margin:var(--e5) auto; padding:30px 32px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; background:#fffafd; color:var(--texto); border:1px solid var(--marca-200); border-radius:var(--r-sm); box-shadow:var(--sombra-3); }
.tarjeta-marca { display:flex; flex-direction:column; align-items:center; gap:var(--e1); margin-bottom:var(--e5); color:var(--acento-osc); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; }
.tarjeta-logo { width:128px; max-height:82px; object-fit:contain; border-radius:var(--r-sm); }
.tarjeta-imagen-dedicatoria { width:min(260px, 100%); max-height:220px; object-fit:contain; border:1px solid var(--borde); border-radius:var(--r-sm); margin:0 0 var(--e5); }
.tarjeta-texto { width:100%; font-family:var(--f-display); font-size:1.35rem; line-height:1.62; white-space:pre-line; }
.tarjeta-texto-largo .tarjeta-texto { font-size:1.08rem; line-height:1.45; }
.tarjeta-texto-muy-largo .tarjeta-texto { font-size:.9rem; line-height:1.32; }
.tarjeta-pie { width:100%; display:flex; justify-content:space-between; gap:var(--e3); margin-top:var(--e6); padding-top:var(--e2); border-top:1px solid var(--borde); color:var(--texto-2); font-size:var(--t-xs); }

/* ---- Login ---- */
/* ---- Ingreso ----
   La pantalla que la floristería ve todas las mañanas. El fondo es un par de
   halos en los tonos de la marca hechos con gradientes (nada de imágenes: la
   tienda a veces trabaja sin internet y el panel debe verse igual). */
body.pantalla-ingreso {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e4);
  background:
    radial-gradient(60% 50% at 15% 0%, var(--marca-50) 0%, transparent 60%),
    radial-gradient(50% 45% at 100% 100%, var(--marca-100) 0%, transparent 65%),
    var(--fondo);
}
body.pantalla-ingreso main { padding: 0; width: 100%; }
.login-caja {
  max-width: 400px; margin: 0 auto; padding: var(--e8) var(--e6);
  box-shadow: var(--sombra-3); border-radius: var(--r-xl);
  animation: entrar-ingreso .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes entrar-ingreso { from { opacity: 0; transform: translateY(12px); } }
.login-caja .logo-marca { display:block; width:min(240px, 72%); height:auto; margin:0 auto var(--e3); }
.login-caja h1 { text-align:center; }
.login-lema {
  text-align: center; color: var(--texto-2); font-size: var(--t-sm);
  margin: 0 0 var(--e5);
}
.login-pie {
  text-align: center; color: var(--texto-2); font-size: var(--t-xs);
  margin: var(--e5) 0 0;
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Página pública ---- */
.contacto-topbar { display:flex; gap:var(--e2); align-items:center; font-size:var(--t-xs); white-space:nowrap; }
.contacto-topbar a { color:#fff; text-decoration:none; }
.contacto-topbar a:hover { text-decoration:underline; }
.pedido-bienvenida { max-width:720px; margin:var(--e4) auto var(--e6); text-align:center; }
.pedido-bienvenida h1 { margin:var(--e1) 0 var(--e2); color:var(--acento-osc); }
.pedido-bienvenida p { margin:0 auto var(--e3); max-width:650px; color:var(--texto-2); line-height:1.6; }
.pedido-eyebrow { color:var(--acento-claro); text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-xs); font-weight:700; }
.pedido-pasos { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e4); max-width:880px; margin:0 auto var(--e6); }
.pedido-opcion { position:relative; padding:var(--e5) var(--e5) var(--e5) 54px; background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-lg); box-shadow:var(--sombra-1); }
.pedido-opcion h2 { margin:0 0 var(--e2); font-size:var(--t-lg); color:var(--acento-osc); }
.pedido-opcion p { min-height:44px; margin:0 0 var(--e4); color:var(--texto-2); line-height:1.45; font-size:var(--t-sm); }
.pedido-numero { position:absolute; top:var(--e5); left:var(--e4); width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--marca-500); color:#fff; font-weight:700; font-size:var(--t-sm); }
.pedido-zona { margin:var(--e6) 0; padding:var(--e5); border:1px solid var(--borde); border-radius:var(--r-xl); background:var(--superficie); }
.pedido-zona[hidden] { display:none; }
.pedido-zona-cabecera { display:flex; justify-content:space-between; align-items:center; gap:var(--e3); margin-bottom:var(--e3); }
.pedido-zona-cabecera h2 { margin:0; color:var(--acento-osc); }
.pedido-siguiente { display:flex; justify-content:space-between; gap:var(--e4); align-items:center; margin-top:var(--e6); padding:var(--e4); border-radius:var(--r-lg); background:var(--marca-50); border:1px solid var(--marca-100); }
.pedido-siguiente div { display:grid; gap:2px; }
.pedido-siguiente span, .pedido-referencia span { color:var(--texto-2); font-size:var(--t-sm); }
.pedido-confirmacion, .pedido-referencia { display:grid; gap:var(--e1); margin:0 0 var(--e4); padding:var(--e3) var(--e4); border-left:3px solid var(--marca-300); border-radius:var(--r-md); background:var(--marca-50); font-size:var(--t-sm); }
.pedido-referencia { margin-top:var(--e4); }
.contacto-publico { margin:var(--e8) 0 var(--e2); text-align:center; color:var(--texto-2); font-size:var(--t-xs); }
.contacto-publico a { color:var(--acento-osc); font-weight:600; }
.pedido-datos-publicos { max-width:760px; margin:0 auto; display:grid; gap:var(--e4); }
.pedido-datos-publicos .tarjeta { display:grid; gap:var(--e3); }
.pedido-datos-publicos label { display:grid; gap:var(--e1); font-weight:600; font-size:var(--t-sm); }
.pedido-datos-publicos textarea { min-height:84px; resize:vertical; }
.aviso-domicilio-publico { margin:2px 0 0; padding:var(--e3); border-left:3px solid var(--marca-300); border-radius:var(--r-md); background:var(--marca-50); color:var(--texto-2); font-size:var(--t-sm); line-height:1.45; }
.pedido-enviado-acciones { display:grid; gap:var(--e3); max-width:430px; margin:var(--e5) auto 0; }
.consulta-pedido { max-width:640px; margin:var(--e6) auto 0; padding:var(--e4); border:1px solid var(--borde); border-radius:var(--r-lg); background:var(--superficie); }
.consulta-pedido form { display:grid; gap:var(--e2); margin-top:var(--e2); }
.consulta-pedido form > div { display:flex; gap:var(--e2); }
.consulta-pedido input { flex:1; min-width:0; }
.seguimiento-publico { margin:var(--e5) auto; max-width:600px; }

/* ============================= 5. RESPONSIVE ============================= */
@media (min-width: 700px) { main { padding-top:var(--e6); } }

@media (max-width: 760px) {
  .contacto-topbar { display:none; }
  .pedido-pasos { grid-template-columns:1fr; }
  .pedido-opcion p { min-height:0; }
  .pedido-zona { padding:var(--e4); }
  .pedido-siguiente { align-items:stretch; flex-direction:column; }
  .pedido-siguiente .btn { width:100%; }
  .revision-inventario-cabecera, .revision-inventario-grid { display:grid; grid-template-columns:1fr; }
  .revision-campos-cortos { grid-template-columns:1fr; }
  .revision-acciones .btn { flex:1 1 180px; }
  .flujo-pedidos ol { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .flujo-pedidos li:not(:last-child)::after { display:none; }
}

/* ---- Celular: header compacto + navegación INFERIOR tipo app ----
   El sistema se usa casi todo desde el celular. La fila de píldoras deslizable
   obligaba a "buscar" el módulo; abajo quedan siempre a la vista y al alcance
   del pulgar, que es el patrón de cualquier app nativa. */
@media (max-width: 640px) {
  .topbar { padding:var(--e2) var(--e3); }
  .topbar .marca span:last-child { display:none; } /* solo la flor: ahorra media fila */
  .marca-logo { height:32px; }
  .topbar .usuario { font-size:var(--t-xs); }
  main { padding:var(--e3) var(--e3) calc(var(--alto-nav-movil) + var(--e6)); }

  nav.menu {
    position:fixed; left:0; right:0; bottom:0; top:auto;
    padding:var(--e1) var(--e1) calc(var(--e1) + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); backdrop-filter:saturate(1.6) blur(12px);
    border-top:1px solid var(--borde); border-bottom:none;
    box-shadow:0 -2px 16px rgba(43,31,38,.10);
    flex-wrap:nowrap; overflow-x:auto; gap:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; z-index:60;
  }
  nav.menu::-webkit-scrollbar { display:none; }
  nav.menu a {
    flex:1 0 auto; min-width:62px; padding:var(--e2) var(--e1) 6px;
    border-radius:var(--r-md); font-size:10px; font-weight:500;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    line-height:1.1; text-align:center;
  }
  nav.menu a.activo { background:var(--marca-50); color:var(--acento-osc); box-shadow:none; }

  /* Los flotantes suben para no taparse con la barra inferior */
  .fab { bottom:calc(var(--alto-nav-movil) + var(--e3) + env(safe-area-inset-bottom)); padding:12px 18px; }
  .carrito-fab { bottom:calc(var(--alto-nav-movil) + var(--e3) + env(safe-area-inset-bottom)); }

  .card, .tarjeta { padding:var(--e4); border-radius:var(--r-md); }
  table.tabla th, table.tabla td { padding:var(--e2) var(--e3); }
  .wizard-paso { font-size:10px; padding:var(--e2) 2px; }
  .grilla { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--e3); }
}

/* ---- Impresión (tarjeta y nota del domiciliario) ---- */
@media print {
  .topbar, nav.menu, .fab, .carrito-fab, .no-print { display:none !important; }
  body { background:#fff; }
  main { padding:0; max-width:none; }
  .card, .tarjeta { border:none; box-shadow:none; }
  .tarjeta-impresion { margin:0 auto; box-shadow:none; border:1px solid var(--marca-300); break-inside:avoid; }
}

/* ===================== 6. TABLERO DEL DÍA (inicio) =====================
   Es la pantalla que más se mira, así que tiene dos piezas propias:
   - .kpis: el pulso del día de un vistazo (atrasados, hoy, por cobrar).
   - .pedido-fila: la tarjeta de pedido con la HORA como bloque a la izquierda,
     igual que una agenda. La hora es el dato por el que se busca un pedido. */

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3); margin: 0 0 var(--e5);
}
.kpi {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: var(--e4); box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: inherit;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--marca-200); }
.kpi-valor { font-family: var(--f-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-etiqueta { font-size: var(--t-xs); color: var(--texto-2); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
/* Acentos por tipo de indicador: una franja de color arriba, sin gritar */
.kpi-alerta { border-top: 3px solid var(--error-600); }
.kpi-alerta .kpi-valor { color: var(--error-600); }
.kpi-hoy { border-top: 3px solid var(--marca-500); }
.kpi-hoy .kpi-valor { color: var(--acento-osc); }
.kpi-produccion { border-top: 3px solid var(--aviso-600); }
.kpi-produccion .kpi-valor { color: var(--aviso-700); }
.kpi-dinero { border-top: 3px solid var(--exito-600); }
.kpi-dinero .kpi-valor { color: var(--exito-700); font-size: 1.4rem; }

/* Encabezado de sección con contador */
.seccion-cab { display: flex; align-items: center; gap: var(--e2); margin: var(--e6) 0 var(--e3); }
.seccion-cab h2 { margin: 0; }
.seccion-conteo {
  background: var(--n-100); color: var(--texto-2); border-radius: var(--r-full);
  padding: 2px 9px; font-size: var(--t-xs); font-weight: 600;
}

/* Tarjeta de pedido del tablero */
.pedido-fila {
  display: grid; grid-template-columns: 58px 1fr auto; gap: var(--e3);
  align-items: start;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: var(--e4); margin-bottom: var(--e3); box-shadow: var(--sombra-1);
  text-decoration: none; color: inherit;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.pedido-fila:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--marca-200); color: inherit; }
.pedido-fila.urgente { border-left: 3px solid var(--error-600); }
.pf-hora {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--marca-50); border-radius: var(--r-md); padding: var(--e2) var(--e1);
  color: var(--acento-osc); line-height: 1.15; min-height: 46px;
}
.pf-hora strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.pf-hora small { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.pedido-fila.urgente .pf-hora { background: var(--error-50); color: var(--error-700); }
.pf-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-numero { font-weight: 600; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.pf-cliente { font-size: var(--t-sm); color: var(--texto); }
.pf-meta { font-size: var(--t-xs); color: var(--texto-2); display: flex; flex-wrap: wrap; gap: var(--e2); }
.pf-lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e1); text-align: right; }
.pf-monto { font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-debe { color: var(--error-600); font-weight: 600; font-size: var(--t-xs); }
.pf-faltantes { grid-column: 1 / -1; margin: 0; }

@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
  .kpi { padding: var(--e3); }
  .kpi-valor { font-size: 1.5rem; }
  .kpi-dinero .kpi-valor { font-size: 1.15rem; }
  .pedido-fila { grid-template-columns: 48px 1fr; padding: var(--e3); gap: var(--e2); }
  .pf-lado { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; gap: var(--e2); }
}

/* Icono + texto de la navegación. En escritorio van en línea; en celular el
   icono manda y el texto queda debajo, pequeño (patrón de app nativa). */
.nav-ico { font-size: 1rem; line-height: 1; }
.nav-txt { font-size: inherit; }
@media (max-width: 640px) {
  .nav-ico { font-size: 20px; }
  .nav-txt { font-size: 10px; }
}

/* ---- Barra superior en celular: UNA sola fila ----
   Con todo envolviendo, la barra se partía en dos y se comía ~40% del alto
   útil de la pantalla. Se esconde lo que se puede deducir del contexto (la
   palabra "Módulo", el nombre de la usuaria, el botón de pantalla completa:
   para eso está instalar la app) y nada envuelve. */
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; gap: var(--e2); }
  .topbar-derecha { flex-wrap: nowrap; gap: var(--e2); }
  .etiqueta-modulo, .usuario-nombre { display: none; }
  .btn-pantalla { display: none; }
  /* Sin max-width fijo: 108px cortaba «🌼 Floristería» justo en la última
     letra. El select se dimensiona a su opción más larga y solo cede
     espacio si de verdad no cabe. */
  .topbar select { padding: 5px 6px; font-size: var(--t-xs); flex: 0 1 auto; min-width: 0; }
  .menu-mas > summary { padding: 5px 9px; font-size: var(--t-xs); }
  .topbar .marca { flex: 0 0 auto; }
  /* El aviso de recobros: compacto, que no empuje el contenido del día */
  .alerta { padding: var(--e2) var(--e3); font-size: var(--t-xs); }
}

/* ---- Tabla que se vuelve tarjetas en celular ----
   Una tabla de 7 columnas no cabe en 390px: obligaba a desplazar en horizontal
   y la columna de estado quedaba cortada. Con .tabla-tarjetas cada fila se
   apila y cada celda muestra su nombre de columna (viene del data-label del
   <td>, así el encabezado no se repite y no hace falta HTML duplicado). */
@media (max-width: 640px) {
  .tabla-tarjetas { border: 0; }
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas tbody tr {
    border: 1px solid var(--borde); border-radius: var(--r-md);
    padding: var(--e3); margin-bottom: var(--e3); background: var(--superficie);
    box-shadow: var(--sombra-1); position: relative;
  }
  .tabla-tarjetas tbody tr:hover { background: var(--superficie); }
  .tabla-tarjetas td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--e3);
    padding: var(--e1) 0; border: 0; text-align: right;
  }
  .tabla-tarjetas td::before {
    content: attr(data-label);
    /* El rótulo no se encoge (si no, "Contraseña" se partía a la mitad);
       lo que cede espacio es el valor. */
    flex: 0 0 auto;
    color: var(--texto-2); font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; text-align: left;
  }
  /* La primera celda hace de título de la tarjeta: sin rótulo, alineada a la
     izquierda y con una línea que la separa del resto de los datos. Se marca
     con .td-titulo (y se mantiene [data-label="Número"] por compatibilidad). */
  .tabla-tarjetas td.td-titulo,
  .tabla-tarjetas td[data-label="Número"] {
    /* display:block y no flex: si la celda trae un <br> (nombre + correo,
       zona + municipio) en flex cada trozo se volvía una columna estrujada. */
    display: block; text-align: left; font-size: var(--t-base);
    border-bottom: 1px solid var(--n-100); padding-bottom: var(--e2); margin-bottom: var(--e1);
  }
  .tabla-tarjetas td.td-titulo::before,
  .tabla-tarjetas td[data-label="Número"]::before { display: none; }
  /* Celdas con colspan (un formulario, un detalle): ocupan el ancho completo,
     sin rótulo y en columna. */
  .tabla-tarjetas td.td-ancho {
    display: block; text-align: left; padding-top: var(--e2);
  }
  .tabla-tarjetas td.td-ancho::before { display: none; }
  .tabla-tarjetas td.td-ancho:empty { display: none; }
  /* Una fila que es continuación de la anterior (el típico <tr> con colspan que
     cuelga de su fila): se pega a la tarjeta de arriba en vez de parecer otra. */
  .tabla-tarjetas tbody tr:has(+ tr.fila-continua) {
    margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .tabla-tarjetas tbody tr.fila-continua {
    border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
    padding-top: 0; box-shadow: var(--sombra-1);
  }
  /* Los formularios en línea dentro de una tarjeta no deben desbordarla */
  .tabla-tarjetas td > form.fila { flex-wrap: wrap; justify-content: flex-end; }
  /* La casilla de selección, arriba a la derecha de la tarjeta */
  .tabla-tarjetas .td-check { position: absolute; top: var(--e3); right: var(--e3); padding: 0; width: auto; }
  .tabla-tarjetas .td-check::before { display: none; }
}

/* El botón flotante: con rótulo en escritorio, redondo de solo "+" en celular
   (el rótulo tapaba datos de las tarjetas de abajo). */
.fab-mas { font-size: 1.1rem; line-height: 1; }
@media (max-width: 640px) {
  .fab { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
  .fab-txt { display: none; }
  .fab-mas { font-size: 1.5rem; }
}

/* ==================== 7. TABLERO DE PRODUCCIÓN ==================== */
/* Aviso del ramo que la operaria tiene en curso: pegado arriba para volver a
   él desde cualquier punto de la lista. */
.mi-ramo {
  position: sticky; top: var(--e2); z-index: 40;
  display: flex; align-items: center; gap: var(--e3);
  background: linear-gradient(135deg, var(--marca-500), var(--marca-600)); color: #fff;
  border-radius: var(--r-lg); padding: var(--e3) var(--e4); margin-bottom: var(--e4);
  text-decoration: none; box-shadow: var(--sombra-acento);
}
.mi-ramo:hover { color: #fff; }
.mi-ramo small { opacity: .85; }
.mi-ramo-ico { font-size: 1.5rem; }

/* Cabecera del pedido dentro del tablero del taller */
.grupo-cab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e3);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--n-100); margin-bottom: var(--e2);
}
.grupo-numero { font-weight: 700; font-size: var(--t-base); text-decoration: none; font-variant-numeric: tabular-nums; }
.grupo-meta { display: flex; flex-wrap: wrap; gap: var(--e3); color: var(--texto-2); font-size: var(--t-xs); }

@media (max-width: 640px) { .mi-ramo { top: 0; } }

/* ==================== 8. DETALLES DE INTERACCIÓN ==================== */

/* Girador del botón mientras guarda (ver el JS de base.html) */
.hilando {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .7s linear infinite; vertical-align: -2px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Los enlaces a un ancla (#tarea-12, #atrasados) quedaban TAPADOS por la barra
   de navegación fija. scroll-margin los baja lo justo. */
[id] { scroll-margin-top: 84px; }
@media (max-width: 640px) { [id] { scroll-margin-top: var(--e4); } }

/* Entrada suave del contenido: da sensación de fluidez sin marear. Se anula
   solo con prefers-reduced-motion (ver la regla del bloque BASE). */
main > .card, main > .pedido-fila, main > .kpis, main > .tabla-scroll { animation: subir 240ms ease-out both; }

/* Barras de desplazamiento discretas (escritorio) */
@media (min-width: 641px) {
  * { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--r-full); border: 3px solid var(--fondo); }
  *::-webkit-scrollbar-thumb:hover { background: var(--n-400); }
  *::-webkit-scrollbar-track { background: transparent; }
}

/* Controles dentro de una .fila: NO toman el 100%.
   Los campos de un formulario ocupan todo el ancho (es lo correcto cuando van
   uno debajo del otro), pero cuando la plantilla los pone en una fila —monto +
   tipo + método + Guardar de la caja de pago, por ejemplo— ese 100% los
   empujaba a una línea cada uno y la fila se veía apilada y desalineada. */
form.form .fila > input, form.form .fila > select,
form.form .fila > label > select, form.form .fila > label > input {
  width: auto; flex: 0 1 auto; min-width: 0;
}
/* En celular sí conviene que llenen el ancho: hay poco espacio horizontal */
@media (max-width: 520px) {
  form.form .fila > select { flex: 1 1 140px; }
}

/* Chips de categoría en celular: una sola tira que se desliza con el dedo.
   Con flex-wrap el catálogo gastaba cinco renglones (once categorías) antes
   de mostrar el primer producto. La barra de scroll se oculta porque en el
   celular se arrastra, y cada chip se engancha al borde al soltar. */
@media (max-width: 640px) {
  .cats {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px;
  }
  .cats::-webkit-scrollbar { display: none; }
  .cats > * { flex: 0 0 auto; scroll-snap-align: start; scroll-margin-left: var(--e3); }
}

/* Los filtros del catálogo: dos por renglón no caben en 390px y el
   placeholder quedaba cortado («¿Cuánto quieres ga…»). */
@media (max-width: 520px) {
  .filtros-fila input, .filtros-fila select { flex: 1 1 100%; }
}

/* Tira de secciones de Configuración: en celular se desliza en horizontal,
   igual que los chips del catálogo, para no gastar dos renglones. */
.tabs-config { gap: var(--e2); margin-bottom: var(--e4); }
@media (max-width: 640px) {
  .tabs-config {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px;
  }
  .tabs-config::-webkit-scrollbar { display: none; }
  .tabs-config > .btn { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Estado vacío (partials/vacio.html). El borde punteado dice «acá va algo
   que todavía no existe», a diferencia de una tarjeta con contenido real. */
.vacio {
  text-align: center; padding: var(--e8) var(--e4);
  background: var(--superficie); border: 1px dashed var(--borde);
  border-radius: var(--r-lg); color: var(--texto-2);
  margin: var(--e3) 0 var(--e5);
}
.vacio-ico { display: block; font-size: 2.4rem; line-height: 1; margin-bottom: var(--e3); }
.vacio strong {
  display: block; color: var(--texto); font-family: var(--f-display);
  font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--e1);
}
.vacio p { margin: 0 auto; max-width: 44ch; font-size: var(--t-sm); }
.vacio .acciones { justify-content: center; margin-top: var(--e4); }

/* Franja de aviso sobre <main> (la alarma de recobros sale en TODAS las
   pantallas): mismo ancho y mismo margen lateral que el contenido, para que
   no quede 16px más ancha que las tarjetas ni pegada al borde en celular. */
.franja-aviso { max-width: 1060px; margin: 0 auto; padding: var(--e3) var(--e4) 0; }
@media (max-width: 640px) {
  .franja-aviso { padding: var(--e3) var(--e3) 0; }
  /* Texto que solo cabe con ancho: en celular el enlace ya dice lo esencial */
  .solo-ancho { display: none; }
}

/* Botón de cerrar de los avisos de la URL */
.alerta-cerrar {
  margin-left: auto; flex: 0 0 auto; align-self: flex-start;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  font-size: var(--t-sm); line-height: 1; padding: var(--e1);
  border-radius: var(--r-sm); opacity: .6; transition: opacity var(--transicion);
}
.alerta-cerrar:hover { opacity: 1; background: rgba(0, 0, 0, .05); }

/* Modalidad de entrega, en tinte suave como el resto de los badges (antes
   iban con un color sólido escrito a mano en la plantilla). */
.badge-domicilio { background: var(--cian-50); color: var(--cian-600); border-color: var(--cian-200); }
.badge-recogida  { background: var(--n-100);   color: var(--texto-2);  border-color: var(--n-200); }

/* Transición entre páginas (Chromium). El panel es multipágina: cada toque
   recarga y el salto en blanco se siente lento aunque no lo sea. Con esto el
   navegador hace un cruce corto entre la página que sale y la que entra.
   Donde no está implementado simplemente no pasa nada, y si la usuaria pidió
   menos animación se desactiva. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: salir-pagina 120ms ease-in both; }
  ::view-transition-new(root) { animation: entrar-pagina 180ms ease-out both; }
}
@keyframes salir-pagina  { to   { opacity: 0; } }
@keyframes entrar-pagina { from { opacity: 0; transform: translateY(6px); } }

/* La barra superior y el menú no deben "viajar" en la transición: son el
   marco de la app, no contenido. Se les da nombre propio para que el
   navegador los trate como el mismo elemento en las dos páginas. */
.topbar { view-transition-name: marco-topbar; }
nav.menu { view-transition-name: marco-menu; }

/* Respuesta al toque: en celular no hay hover, así que el único aviso de que
   el dedo llegó al botón es que se hunda. */
@media (hover: none) {
  .btn:active, .kpi:active, .pedido-fila:active, .cats > *:active { transform: scale(.985); }
}