/* =========================================================================
   Rediseño "cálido tipo recetario" (2026-08-30)
   Tipos: Newsreader (titulares) + Karla (cuerpo), cargados en base.html.
   Paleta: crema / verde oliva / terracota / miel. Acentos en oklch con
   croma ~0.11, variando el tono (verde 140°, terracota 40°, miel 75°).
   ========================================================================= */
:root {
    --bg: #faf6ee;            /* crema, fondo de página */
    --card-bg: #fffdf8;       /* crema muy claro, tarjetas */
    --text: #2c2722;          /* tinta cálida */
    --text-muted: #7c7267;
    --primary: #4a7c3f;       /* verde oliva */
    --primary-dark: #3d6b33;
    --danger: #c0674c;        /* terracota (prioridad alta, quitar) */
    --warning: #d9a05c;       /* miel (prioridad media) */
    --border: #e9e1d2;        /* línea cálida */
    --radius: 16px;

    --green-soft: #edf1e4;
    --green-ink: #3d6b33;
    --terra-soft: #f6e7df;
    --terra-ink: #a24f37;
    --honey-soft: #f8efdd;
    --ink-bar: #2c2722;

    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Curvas compartidas para transiciones -- las de por defecto del navegador
       son demasiado débiles. Reutilizar estas en vez de inventar otras. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

html {
    /* Base grande a propósito -- todo en rem escala con esto, para que se
       lea de un vistazo sin hacer zoom. */
    font-size: 18px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

html, body {
    overscroll-behavior-y: contain;
}

body {
    font-family: var(--sans);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 1rem;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.16;
}

/* --- Barra superior + menú --- */
.topbar {
    background-color: var(--ink-bar);
    color: #f7f2e7;
    position: sticky;
    top: 0;
    z-index: 10;
    /* En PWA a pantalla completa la barra queda bajo la barra de estado del
       sistema; este relleno la baja para que "Compra" no se corte. */
    padding-top: env(safe-area-inset-top, 0px);
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.1rem;
    min-height: 3.25rem;
}

.brand {
    color: #f7f2e7;
    text-decoration: none;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Área táctil cómoda + que el tap cuente aunque caiga sobre el icono. */
    margin: -0.4rem -0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
}

.brand:active { background-color: rgba(255, 255, 255, 0.12); }

/* El icono no intercepta el toque: siempre navega el enlace. */
.brand svg { width: 1.25rem; height: 1.25rem; color: #d3b78c; pointer-events: none; }

.menu-toggle {
    background: none;
    border: none;
    color: #d3b78c;
    font-size: 1.6rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
}

.navmenu {
    display: none;
    flex-direction: column;
    background-color: #241f1b;
    padding: 0.4rem 0;
}

.navmenu.open { display: flex; }

.navmenu a {
    color: #e7dcc9;
    text-decoration: none;
    padding: 1rem 1.3rem;
    border-bottom: 1px solid #332c26;
    font-size: 1.05rem;
    font-weight: 500;
}

.navmenu a:active { background-color: #332c26; }

/* El truco de superponer el nav a la fila del logo (margin-top negativo)
   solo cabe en una línea con pocos enlaces; con "Comparar precios"/"Mi
   cuenta" ya son 8 y en tablets (768-1024px) se parte en dos líneas que
   se solapan con "Compra". Portátiles reales miden 1280px+, así que el
   corte sube a 1100px: toda tablet (portrait o landscape) sigue usando
   el menú hamburguesa, que no tiene este problema. */
@media (min-width: 1100px) {
    .menu-toggle { display: none; }
    .navmenu {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        background: none;
        gap: 0.35rem;
        padding: 0;
        margin-top: -2.7rem;
        margin-right: 1rem;
        justify-content: flex-end;
    }
    .navmenu a {
        border: none;
        padding: 0.4rem 0.75rem;
        border-radius: 8px;
        font-size: 0.98rem;
    }
    .navmenu a:hover { background-color: rgba(255,255,255,0.12); }
}

/* --- Layout general --- */
.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.1rem 1rem 2rem;
}

h2 { margin-bottom: 0.9rem; font-size: 1.62rem; }
h3 { font-size: 1.18rem; margin-bottom: 0.3rem; font-weight: 600; }

.card,
.history-section,
.recipes-section {
    background: var(--card-bg);
    padding: 1.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(44, 39, 34, 0.05);
    margin-bottom: 1rem;
}

.section-description {
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: 0.98rem;
}

.section-description code {
    background-color: var(--bg);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.82rem;
}

/* --- Flash messages --- */
.flash-messages { margin-bottom: 1rem; }

.flash-message {
    background-color: var(--green-soft);
    border: 1px solid #cfdcc0;
    color: var(--green-ink);
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* --- Botones --- */
.btn {
    padding: 0.9rem 1.3rem;
    min-height: 48px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 1.06rem;
    font-weight: 600;
    transition: opacity 0.15s, background-color 0.15s;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-decoration: none;
}

.btn:active { opacity: 0.78; }
a.btn:hover { text-decoration: none; }

.btn-primary { background-color: var(--primary); color: #f7f2e7; }
.btn-primary:hover { background-color: var(--primary-dark); }

.btn-secondary {
    background-color: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background-color: var(--bg); }

.btn-small { padding: 0.55rem 1rem; min-height: 40px; font-size: 0.95rem; }

.btn-block { width: 100%; display: flex; margin-top: 1rem; }

/* --- Banner "tienes N productos en tu lista" --- */
.active-list-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--primary);
    color: #f7f2e7;
    text-decoration: none;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    margin-bottom: 1rem;
    font-size: 1.03rem;
    font-weight: 600;
}

/* --- Ilustración de producto (macro product_icon) --- */
.pic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--green-soft);
    border: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.15s, border-color 0.15s;
}
.pic svg { width: 66%; height: 66%; display: block; }

/* --- Botón quitar item de la lista --- */
.remove-btn {
    background: none;
    border: none;
    color: #b7ab99;
    padding: 0;
    width: 34px;
    height: 34px;
    min-width: 34px;
    margin: 0 -0.35rem 0 auto;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.remove-btn:active { color: var(--danger); }

/* --- Lista de sugerencias / lista activa ---
   Filas a sangre dentro de la tarjeta contenedora (sin tarjeta-dentro-de-
   tarjeta): separador fino entre filas y una franja de color a la
   izquierda para la prioridad. */
.suggestions-list {
    display: flex;
    flex-direction: column;
    margin: 0.6rem -1.3rem 1.1rem;
}
/* La lista va a sangre: la tarjeta recorta las esquinas redondeadas. */
.card:has(.suggestions-list) { overflow: hidden; }

.suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.72rem 1.3rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    background-color: transparent;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s, background-color 0.15s;
}
.suggestion-item > .pri-dot { margin-top: 0.7rem; }
.suggestion-item > .dismiss-btn,
.suggestion-item > .remove-btn { margin-top: 0.25rem; }
.suggestions-list .suggestion-item:last-child { border-bottom: none; }

.suggestion-item.priority-high,
.list-item[data-priority="rojo"] { border-left-color: var(--danger); }
.suggestion-item.priority-medium,
.list-item[data-priority="naranja"] { border-left-color: var(--warning); }
.list-item[data-priority="verde"] { border-left-color: var(--primary); }

.sug-source-badge {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    vertical-align: middle;
    background: var(--border);
    color: var(--text-muted);
}

.btn-link-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0 1.1rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-link-inline:disabled { opacity: 0.55; cursor: default; }

.pri-dot {
    position: relative;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    background: var(--warning);
    transition: background-color 0.15s;
}
/* zona táctil de 40px sin agrandar el punto */
.pri-dot::before { content: ""; position: absolute; inset: -11px; }
.pri-dot.pri-rojo { background: var(--danger); }
.pri-dot.pri-naranja { background: var(--warning); }
.pri-dot.pri-verde { background: var(--primary); }
.list-item.checked .pri-dot { opacity: 0.5; }

/* El significado del semáforo de prioridad vivía solo en un `title`,
   invisible al tacto -- esta leyenda se ve una vez y se recuerda cerrada
   (localStorage) para no repetirse en cada visita. */
.priority-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    margin: 0 0 0.7rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    font-size: 0.82rem;
    color: var(--text-muted);
}
.priority-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.priority-legend-hint { flex-basis: 100%; }
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.legend-dot.legend-rojo { background: var(--danger); }
.legend-dot.legend-naranja { background: var(--warning); }
.legend-dot.legend-verde { background: var(--primary); }
#priorityLegendClose {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 0.2rem;
    cursor: pointer;
    display: flex;
}

/* Único control que marca "comprado" — antes tocar cualquier parte de la
   fila tachaba, y se confundía con quitar/comparar (feedback real). */
.check-dot {
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-top: 0.55rem;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
/* zona táctil de 44px sin agrandar el círculo visible */
.check-dot::before { content: ""; position: absolute; inset: -10px; }
.check-dot.checked {
    background: var(--primary);
    border-color: var(--primary);
}
.check-dot.checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 10px;
    height: 5px;
    border: 2.5px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.list-category-header {
    margin: 0.85rem 1.3rem 0.15rem;
    padding-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}
/* Historial: hasta ~300 productos hacían de esta lista un scroll infinito.
   Cada categoría arranca colegida; se despliega tocándola en vez de
   obligar a bajar por todo el catálogo para encontrar algo. */
.history-cat-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.history-cat-count {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 500;
}
.history-cat-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid var(--text-muted);
    border-bottom: 1.6px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 200ms ease-out;
    flex-shrink: 0;
}
.history-cat-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }

.history-cat-list {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms ease-out;
}
.history-cat-list > * { overflow: hidden; }
.history-cat-list[hidden] { display: grid; }
.history-cat-list.is-open { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) {
    .history-cat-list { transition: none; }
}

.suggestions-list > .list-category-header:first-child,
.sug-block > .list-category-header:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.list-category-checked { opacity: 0.7; }

.suggestion-item.checked {
    opacity: 0.5;
    background-color: #f5f1e9;
}

.suggestion-item.checked .item-content h3 { text-decoration: line-through; }

/* Seleccionado (sugerencias) / comprado (mi lista): el propio icono del
   producto se convierte en una marca de verificación — un solo elemento a
   la izquierda del nombre, no un icono + una casilla. */
.suggestion-item.checked .pic { background: var(--primary); border-color: var(--primary); }
.suggestion-item.checked .pic svg { opacity: 0; }
.suggestion-item.checked .pic::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 47%;
    width: 12px;
    height: 6px;
    border: 2.5px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.dismiss-btn {
    margin-left: auto;
    margin-right: -0.35rem;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #b7ab99;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
}
.dismiss-btn:hover { background-color: #efe7d8; color: var(--danger); }

/* Línea de precio: la pastilla verde (siempre solo "X,XX €", nunca se
   parte ni se sale del fondo) + datos extra (€/kg, "antes …") que
   envuelven a la línea siguiente si no caben. */
.price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.28rem 0.45rem;
    margin-top: 0.35rem;
}

.price-badge {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0.1rem 0.45rem;
    border-radius: 7px;
    background-color: var(--green-soft);
    color: var(--green-ink);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.price-badge svg { flex: none; }
.price-badge.offer { background-color: var(--terra-soft); color: var(--terra-ink); }

.price-ref {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.price-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.2rem 0.3rem;
    margin-top: 0.4rem;
    border-top: 1px dashed #d9cfbb;
}
.price-total span { font-size: 0.9rem; color: var(--text); min-width: 0; line-height: 1.3; }
.price-total span small { font-size: 0.76rem; color: var(--text-muted); }
.price-total strong { white-space: nowrap; flex-shrink: 0; }
.price-total-note {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-muted);
    margin: 0 0.2rem 0.6rem;
}
.price-total strong {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--green-ink);
}

/* --- Comparar precios entre supermercados (/supermercados) --- */
.sm-search {
    display: flex;
    gap: 0.5rem;
    margin: 0.2rem 0 0.6rem;
}
.sm-search input {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    min-height: 46px;
}
.sm-search button {
    flex: none;
    padding: 0 1.2rem;
    min-height: 46px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #f7f2e7;
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.sm-synced { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.4rem; }
.sm-status { font-size: 0.85rem; color: var(--text-muted); margin: 0.6rem 0 0.8rem; min-height: 1.2em; }
.sm-status:empty { margin: 0; }

.sm-results { display: flex; flex-direction: column; gap: 0.6rem; }

/* Comparativa "de base" de las sugeridas, antes de buscar nada. */
.sm-sug { margin-top: 1.1rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.sm-sug-title { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 0.15rem; }
.sm-sug .section-description { margin: 0 0 0.7rem; }
.sm-sug-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.2rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font: inherit;
}
.sm-sug-row:last-child { border-bottom: none; }
.sm-sug-row:hover .sm-sug-name { color: var(--primary-dark); }
.sm-sug-name { font-weight: 600; color: var(--text); }

.sm-result {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    background: var(--card-bg);
}
.sm-result.best {
    border-color: var(--primary);
    background: var(--green-soft);
}
.sm-result.sm-miss {
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: transparent;
    border-style: dashed;
}
.sm-result.sm-approx { border-style: dashed; }
.sm-approx-note {
    font-size: 0.72rem;
    color: #b23b00;
    font-style: italic;
    margin: 0.2rem 0 0.4rem;
}

/* "Usar este para «X»": corregir el emparejamiento del genérico desde aquí
   (solo si se llegó con ?q=<genérico>). */
.sm-fix-row { margin-top: 0.5rem; }
.sm-fix {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--primary-dark);
    cursor: pointer;
}
.sm-fix:disabled { color: var(--text-muted); cursor: default; }

.sm-result-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}
.sm-chain {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.sm-result.best .sm-chain { color: var(--primary-dark); }
.sm-cmp {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    flex: none;
}
.sm-result.best .sm-cmp { color: var(--green-ink); }
.sm-cmp .sm-unit { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }

.sm-result-name {
    font-size: 0.92rem;
    margin: 0.25rem 0 0.4rem;
    overflow-wrap: anywhere;
}

.sm-result-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.sm-result-foot a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.sm-pack { flex: none; }

.sm-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #b23b00;
}
.sm-tag.real { color: #1a7f37; }

.sm-trend-out {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sm-note {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.3rem;
}

/* Miniatura de foto real (recetas). Productos usan .pic (ilustración). */
.product-thumb {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 11px;
    object-fit: cover;
    background: var(--card-bg);
    border: 1px solid var(--border);
}

.item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.22rem; }

/* El nombre del producto es contenido, no un titular: sans, no serif, y
   como mucho 2 líneas con elipsis para que nunca desborde la tarjeta. */
.item-content h3 {
    font-family: var(--sans);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category {
    display: inline-block;
    background-color: #efe7d8;
    color: #6b5d48;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Línea de metadatos bajo el nombre: chip de categoría / pastilla de
   precio / frecuencia. Envuelve si no cabe, nunca desborda. */
.item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.item-meta .category { flex-shrink: 0; }
.item-meta .frequency {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.frequency,
.confidence {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Comparativa multi-cadena por producto en /suggestions: precio por
   litro/kg en cada súper en una línea, el más barato resaltado. */
.chain-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.35rem;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.chain-price { white-space: nowrap; color: var(--text); }
.chain-price b { font-weight: 700; color: var(--text-muted); }
.chain-price.best { color: var(--green-ink); font-weight: 700; }
.chain-price.best b { color: var(--primary); }
.chain-unit { color: var(--text-muted); }

/* Antes la comparativa de cadenas estaba siempre visible en cada fila de
   "Mi lista" (hasta 8-9 elementos por producto); ahora vive tras un toggle
   y solo se despliega si el usuario quiere mirar precios. */
.chain-toggle {
    display: inline-flex;
    align-items: center;
    margin-top: 0.15rem;
    padding: 0.1rem 0;
    border: none;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

/* --- "Sugeridas para ti": bloque plegable arriba de Mi Lista --- */
.sug-block { overflow: hidden; }
.sug-block > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
}
.sug-block > summary::-webkit-details-marker { display: none; }
.sug-block > summary::before {
    content: "▸";
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: transform 0.15s;
}
.sug-block[open] > summary::before { transform: rotate(90deg); }
.sug-count {
    margin-left: auto;
    background: var(--green-soft);
    color: var(--green-ink);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
}
.sug-block .section-description { margin: 0 1.3rem 0.4rem; }

/* --- Mi Lista: barra de accesos rápidos + hoja inferior (2026-09-14).
   Las 4 formas de añadir un producto (a mano, foto/captura, sugeridas,
   historial) caben en una barra fina arriba del todo; cada una abre una
   hoja que sube desde abajo en vez de ocupar sitio en el flujo de la
   página -- así "Mi lista" queda siempre pegada a la barra, sin importar
   cuántas sugerencias o historial haya. Validado con un canvas de diseño
   antes de implementarlo (feedback del usuario: las dos disposiciones
   anteriores -- todo apilado arriba, o solo "a mano" arriba -- no
   encajaban). --- */
/* "Foto" o "Sugeridas" solos no bastaban -- gente probando la app no
   entendía que los 4 botones eran formas de añadir un producto (feedback
   real). Este rótulo da el contexto que faltaba sin repetirlo en cada
   botón. */
.quick-add-label {
    margin: 0 0 0.4rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.quick-add-bar {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.quick-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.3rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    min-height: 44px;
    transition: transform 150ms ease-out, background-color 150ms ease;
}
.quick-btn:active { background: var(--bg); transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
    .quick-btn { transition: background-color 120ms ease; }
    .quick-btn:active { transform: none; }
}
.quick-btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--green-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.quick-btn-label { font-size: 0.72rem; font-weight: 600; }

/* El scale(0.94) de .quick-btn:active no llega a pintarse en un tap corto
   (el navegador nunca renderiza el frame "presionado"). Esta animación la
   dispara JS en pointerdown y se reproduce entera pase lo que pase con el
   dedo, así que un toque rápido se nota igual que uno largo. */
@keyframes quickBtnTap {
    0% { transform: scale(1); }
    35% { transform: scale(0.8); }
    100% { transform: scale(1); }
}
.quick-btn.tapped .quick-btn-icon {
    animation: quickBtnTap 220ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .quick-btn.tapped .quick-btn-icon { animation: none; }
}
.quick-badge {
    position: absolute;
    top: -6px;
    right: 6px;
    background: var(--green-soft);
    color: var(--green-ink);
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    border: 1px solid var(--card-bg);
}
/* Historial es un catálogo pasivo, no algo pendiente de resolver como
   Sugeridas -- el mismo círculo en verde/alerta insinuaba lo contrario. */
.quick-badge--muted {
    background: var(--card-bg);
    color: var(--text-muted);
    border-color: var(--border);
}

/* Resalta el botón "Sugeridas" cuando la lista está vacía, en vez de abrir
   el sheet solo encima de una pantalla que el usuario aún no ha visto. */
.quick-btn-pulse .quick-btn-icon {
    animation: quickBtnPulse 1.8s ease-in-out infinite;
}
@keyframes quickBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 124, 63, 0.35); }
    50% { box-shadow: 0 0 0 7px rgba(74, 124, 63, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .quick-btn-pulse .quick-btn-icon { animation: none; }
}

.add-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(44, 39, 34, 0.45);
    z-index: 20;
    opacity: 0;
    transition: opacity 200ms ease-out;
}
.add-sheet-backdrop.is-open { opacity: 1; }

/* Antes el sheet aparecía de golpe con hidden=true/false; ahora sube desde
   donde vive el botón que lo abrió (coherencia espacial de un bottom sheet).
   El JS retrasa hidden=true en el cierre hasta que la transición termina. */
.add-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    background: var(--card-bg);
    border-radius: 20px 20px 0 0;
    padding: 0.9rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(44, 39, 34, 0.18);
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 280ms var(--ease-drawer);
}
.add-sheet.is-open { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .add-sheet-backdrop { transition: opacity 150ms ease; }
    .add-sheet {
        transform: none;
        opacity: 0;
        transition: opacity 150ms ease;
    }
    .add-sheet.is-open { opacity: 1; }
}
.add-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 0.7rem;
    flex-shrink: 0;
}
.add-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
    flex-shrink: 0;
}
.add-sheet-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
}
.add-sheet-close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: none;
    background: var(--green-soft);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.add-sheet-panel .sug-list { margin: 0 -1.3rem; }
.add-sheet-panel .section-description { margin-bottom: 0.8rem; }

/* "¿Dónde compro?" — Fase F Nivel 0 del pivote: total estimado de la lista
   pendiente por cadena, la más barata primero. */
.basket-chains { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
.basket-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    row-gap: 0.15rem;
    column-gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
}
.basket-row.best { border-color: var(--primary); background: var(--green-soft); }
.basket-chain { font-weight: 700; text-transform: capitalize; flex: 1; min-width: 0; }
.basket-row.best .basket-chain { color: var(--primary-dark); }
.basket-total { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
/* En letra grande (accesibilidad) "9/9 encontrados" no cabe en la misma
   línea que el total y desbordaba la tarjeta -> pasa a su propia línea. */
.basket-found { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; flex-basis: 100%; text-align: right; }
.basket-note { font-size: 0.76rem; color: var(--text-muted); font-style: italic; margin: 0.5rem 0 0; }
.sug-list { display: flex; flex-direction: column; margin-bottom: 0.3rem; }

.sug-item {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.65rem 0.7rem 0.65rem 1.15rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
}
/* En la columna estrecha de sugeridas el nombre no es titular: algo más
   pequeño y con más aire para que "aceite de oliva virgen extra" quepa. */
.sug-item .item-content h3 { font-size: 0.92rem; line-height: 1.25; }
.sug-list .sug-item:last-child { border-bottom: none; }
.sug-item > .pic { margin-top: 0.05rem; }

.sug-add {
    flex: none;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-top: 0.1rem;
    border-radius: 50%;
    border: 1.5px solid var(--primary);
    background: var(--green-soft);
    color: var(--primary-dark);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.sug-add:disabled { opacity: 0.5; }

/* Marca visual de "ya lo he añadido" sin recargar la página (ver
   closeAddSheet en script.js) -- se queda así hasta cerrar el sheet. */
.sug-item.sug-added {
    opacity: 0.55;
    transition: opacity 200ms ease-out;
}
.sug-item.sug-added .sug-add {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.sug-dismiss {
    flex: none;
    width: 20px;
    min-width: 20px;
    height: 32px;
    margin-top: 0.1rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #c3b8a6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Enlace "comparar precios" desde una fila (lista / histórico). */
.row-compare {
    font-size: 0.78rem;
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.hg-price-detail + .row-compare,
.hg-fix + .row-compare { display: inline-block; margin: 0.4rem 1rem 0.2rem; }

/* Nombre original del ticket cuando difiere del genérico ("TOMAT.NAT" -> "tomate"). */
.raw-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 1.03rem;
}

/* --- Nutrición --- */
.nutrition-alert-section { border-color: #ecdcbd; background-color: var(--honey-soft); }

.nutrition-gaps-list { display: flex; flex-direction: column; gap: 0.55rem; }
.nutrition-gaps-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.6rem; }

.nutrition-gap-item {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    background-color: #fdf7ec;
}

.nutrition-gap-item.status-never_bought {
    border-left-color: var(--danger);
    background-color: #fdf4f0;
}

/* --- Formularios --- */
.add-item-section {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
}

#addItemForm { display: flex; flex-direction: column; gap: 0.6rem; }

#addItemForm input,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="url"],
textarea {
    padding: 0.9rem;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1.03rem;
    width: 100%;
    -webkit-appearance: none;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 63, 0.14);
}

/* --- Recetas --- */
.recipe-card.recipe-gap {
    border: 2px solid var(--primary);
    background-color: #f2f5ec;
}

.recipe-time {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.recipe-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0; }

.recipe-instructions {
    font-size: 0.93rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    white-space: pre-wrap;
}

.recipe-video-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 0.5rem;
    font-size: 0.93rem;
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 700;
}
.recipe-video-link:hover { text-decoration: underline; }

details summary {
    cursor: pointer;
    font-size: 0.93rem;
    color: var(--primary-dark);
    margin-top: 0.4rem;
    padding: 0.3rem 0;
    font-weight: 600;
}

a { color: var(--primary-dark); }
a:hover { color: var(--primary); }

/* --- Micrófono (añadir por voz) --- */
.input-with-mic { position: relative; margin-bottom: 0.6rem; }

.input-with-mic input {
    padding-right: 3rem !important;
    margin-bottom: 0 !important;
}

.mic-btn {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mic-btn.listening {
    background: var(--danger);
    color: #fff;
    animation: mic-pulse 1.1s ease-in-out infinite;
}

@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 103, 76, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(192, 103, 76, 0); }
}

/* Antes la pista de "dicta varios productos" vivía solo en un `title`,
   invisible al tacto -- ahora es texto visible bajo el campo. */
.mic-hint {
    margin: -0.15rem 0 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Aviso flotante de la entrada por voz ("Añadido: leche, huevos, pan") */
.voice-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 1rem);
    max-width: min(92vw, 30rem);
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

.voice-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.voice-toast.error {
    background: var(--danger);
}

/* Deshacer al quitar un producto -- antes se borraba al primer toque sin
   red de seguridad, fácil de tocar por error junto al check-dot. */
.snackbar {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 1rem);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    max-width: min(92vw, 28rem);
    padding: 0.65rem 0.6rem 0.65rem 1rem;
    border-radius: 0.6rem;
    background: var(--text);
    color: #fff;
    font-size: 0.88rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}
.snackbar.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.snackbar-undo {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--warning);
    font: inherit;
    font-weight: 700;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}

/* --- Tablas (histórico, patrones, precios) --- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.history-table,
.patterns-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}

.history-table th,
.patterns-table th {
    background-color: var(--ink-bar);
    color: #f7f2e7;
    padding: 0.75rem 0.7rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.history-table td,
.patterns-table td {
    padding: 0.75rem 0.7rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.94rem;
}

.history-table tr:nth-child(even) td,
.patterns-table tr:nth-child(even) td { background-color: #fbf7ef; }

/* --- Histórico agrupado por genérico --- */
.history-hint { color: var(--text-muted); font-size: 0.9rem; margin: 0.2rem 0 0.8rem; }

.add-purchase {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 0.4rem 0 1rem;
    background: var(--card-bg);
}
.add-purchase > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    font-weight: 600;
    color: var(--primary-dark);
}
.add-purchase > summary::-webkit-details-marker { display: none; }
.add-purchase[open] > summary { border-bottom: 1px solid var(--border); }
.add-purchase form { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.add-purchase .section-description { margin: 0.7rem 0.9rem 0; }

.history-groups { display: flex; flex-direction: column; gap: 0.5rem; }

.history-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    /* impide que una tabla ancha empuje el grupo (flex item) más allá del
       ancho de la columna y desborde la página en móvil */
    min-width: 0;
}

.history-group > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.02rem;
}

.history-group > summary::-webkit-details-marker { display: none; }

.history-group > summary::before {
    content: "▸";
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: transform 0.15s;
}

.history-group[open] > summary::before { transform: rotate(90deg); }

.history-group > summary { flex-wrap: wrap; }

/* Fila 1: marcador ▸ + nombre (elipsis) + contador/fecha. El precio, si lo
   hay, baja a la fila 2 (regla .hg-price). "sin precio" se queda en la 1. */
.hg-name {
    font-weight: 600; text-transform: none;
    flex: 0 1 auto; min-width: 3rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hg-name::first-letter { text-transform: uppercase; }

.hg-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.hg-count { font-weight: 600; color: var(--primary-dark); }
.hg-last { color: var(--text-muted); font-size: 0.85rem; }

/* El precio va en su propia línea dentro del summary (flex-wrap), así nunca
   empuja al nombre ni se sale de la tarjeta por muchos badges que lleve. */
.hg-price {
    flex: 1 0 100%; margin-top: 0.35rem;
    font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.4rem;
}
/* "sin precio" no merece una línea propia: se pega a la derecha de la fila
   de contador/fecha. */
.hg-price.none {
    color: var(--text-muted); font-weight: 400; font-style: italic;
    flex: 0 0 auto; margin-top: 0; margin-left: 0; font-size: 0.85rem;
}
.hg-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.hg-approx { font-weight: 400; font-size: 0.7rem; font-style: italic; color: var(--text-muted); }
.chain-approx { color: var(--text-muted); font-weight: 700; }
.hg-chain { font-weight: 400; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
            color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 0.3rem; }
.hg-offer { font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #b23b00; }
.hg-offer.real { color: #1a7f37; }
.hg-price-detail { margin: 0.5rem 1rem 0; font-size: 0.85rem; color: var(--text-muted); }
.hg-fix { display: flex; gap: 0.4rem; align-items: center; margin: 0.4rem 1rem 0.2rem; flex-wrap: wrap; }
.hg-fix-q { flex: 1; min-width: 10rem; padding: 0.35rem 0.5rem; font-size: 0.85rem;
            border: 1px solid var(--border); border-radius: 6px; }
.hg-fix button { padding: 0.35rem 0.7rem; font-size: 0.82rem; border-radius: 6px;
                 border: 1px solid var(--border); background: #fff; cursor: pointer; }
.hg-fix-msg { font-size: 0.8rem; color: var(--text-muted); }

.history-group[open] > summary { border-bottom: 1px solid var(--border); background: #fbf7ef; }

.history-group .table-scroll { margin: 0.5rem 1rem 0.8rem; }
.history-group .history-table { min-width: 0; }
.history-group .history-table th { background: #efe7d6; color: var(--text); font-size: 0.82rem;
                                   padding: 0.5rem 0.6rem; white-space: normal; }
.history-group .history-table td { padding: 0.55rem 0.6rem; font-size: 0.9rem; }
/* la fecha en una sola línea; el resto de columnas pueden partir */
.history-group .history-table th:first-child,
.history-group .history-table td:first-child { white-space: nowrap; }

/* --- Importar ticket --- */
.upload-form { display: flex; flex-direction: column; }

.file-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed #dcd0ba;
    border-radius: var(--radius);
    padding: 2rem 1rem;
    cursor: pointer;
    color: var(--text-muted);
    background: #fdfbf5;
}

.file-drop input[type="file"] { display: none; }

/* Indicador de "analizando": el POST de /import y /photo es síncrono y
   Gemini tarda 10-30 s. Sin esto parece un cuelgue. Compartido por los
   formularios de escaneo de Histórico (ticket), Mi Lista (papel/captura)
   y Recetas (foto de plato) -- antes vivía en la extinta pantalla
   /escanear. */
.upload-form.is-submitting button { opacity: 0.6; }
.analyzing-overlay {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border, #d8cdb8);
    border-radius: 8px;
    background: var(--card-bg, #fbf7ee);
    text-align: center;
}
.analyzing-overlay.is-visible { display: block; }
.analyzing-overlay .spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto 0.6rem;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--primary, #7a5c3e);
    border-radius: 50%;
    animation: analyzing-spin 0.9s linear infinite;
}
@keyframes analyzing-spin { to { transform: rotate(360deg); } }
.analyzing-overlay small { color: var(--text-muted, #8a7d66); }

.review-form { display: flex; flex-direction: column; gap: 1rem; }

.field-row label {
    display: block;
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.meal-slot-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.meal-slot-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.meal-slot-chip:has(input:checked) {
    background: var(--green-soft);
    border-color: var(--primary);
    color: var(--green-ink);
    font-weight: 600;
}

.review-list { display: flex; flex-direction: column; gap: 0.5rem; }

/* Fase 2: una tarjeta por ticket cuando se suben varios a la vez. */
.review-group {
    margin-bottom: 1rem;
    border: 1px solid var(--border, #d8cdb8);
}
.review-group h3 { margin-top: 0; }
.review-group h3 small { color: var(--text-muted); font-weight: 400; }

.review-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
}

.review-checkbox input { width: 26px; height: 26px; accent-color: var(--primary); }

.review-fields { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.review-name { font-size: 1rem; padding: 0.5rem !important; }

.review-category {
    font-size: 0.9rem !important;
    padding: 0.4rem !important;
    color: var(--text-muted);
}

.review-generico {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.review-price {
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 600;
}

/* --- Recetas: filtros y grid --- */
.notice-box {
    background-color: var(--honey-soft);
    border: 1px solid #ecdcbd;
    padding: 1.1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.notice-box pre {
    background-color: var(--ink-bar);
    color: #e7dcc9;
    padding: 0.7rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    overflow-x: auto;
    font-size: 0.8rem;
}

.filter-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.45rem;
    margin: 0 -1rem 1rem;
    padding: 0 1rem;
}
.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.5rem 1.05rem;
    min-height: 40px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #f7f2e7;
}

.recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.recipe-detail-grid {
    grid-template-columns: minmax(0, 32rem);
    justify-content: center;
}

.back-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.back-arrow:active { opacity: 0.6; }

.recipe-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scroll-margin-top: 1rem;
}

/* Llegar desde "Receta de hoy" (Inicio) salta directo a esta tarjeta vía
   #recipe-<id> -- :target la señala un momento para que quede claro que es
   esa, sin JS: el navegador ya hace el scroll solo por el fragmento. */
.recipe-card:target {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    animation: recipeCardHighlight 1.6s ease-out;
}
@keyframes recipeCardHighlight {
    0% { background-color: var(--green-soft); }
    100% { background-color: var(--card-bg); }
}
@media (prefers-reduced-motion: reduce) {
    .recipe-card:target { animation: none; background-color: var(--green-soft); }
}

.recipe-card h3 { font-size: 1.12rem; }

.recipe-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bg);
}

.suggestions-highlight {
    background: linear-gradient(135deg, rgba(74, 124, 63, 0.09), rgba(74, 124, 63, 0.02));
    border: 1px solid rgba(74, 124, 63, 0.25);
    border-radius: var(--radius);
    padding: 1.3rem;
    margin-bottom: 1.6rem;
}
.suggestions-highlight h2 { color: var(--primary-dark); }
.suggestions-highlight .recipes-grid { margin-top: 0.8rem; }

.recipes-section-title {
    margin-top: 0.4rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--border);
}

/* --- Menú semanal --- */
.menu-week {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.menu-day { padding: 0.9rem 1.1rem; gap: 0.4rem; position: relative; }
.menu-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;
    padding-right: 2.4rem; /* sitio para el botón de regenerar, ver .menu-day-regenerate-form */
    cursor: pointer;
    list-style: none;
}
.menu-day-header::-webkit-details-marker { display: none; }
.menu-day-header::after {
    content: '▾';
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.16s var(--ease-out);
}
.menu-day[open] > .menu-day-header::after { transform: rotate(180deg); }
/* .menu-day-header y .menu-cell-details son <summary>, así que sin esto
   heredan `details summary { color: var(--primary-dark) }` (pensada para
   enlaces tipo "Ver preparación") -- el nombre del día y el de la receta
   salían en verde en vez del tinta oscuro del resto de la app (hallazgo
   real visto con Playwright, no en el código a simple vista). */
.menu-day-header h3 { font-size: 1.05rem; color: var(--text); }
.menu-day-regenerate-form { position: absolute; top: 0.85rem; right: 1.05rem; }
.menu-day-regenerate {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.menu-cell {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
}
.menu-day > .menu-cell:first-of-type { border-top: none; }
.menu-slot-label {
    flex: 0 0 5.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.menu-cell-name { font-weight: 600; }
/* Antes solo un subrayado punteado sutil -- las celdas sugerida/de
   catálogo ganaron en ronda 1 una pista explícita "Ver ingredientes" y la
   propia se quedó pareciendo MENOS tocable que las que ni siquiera son
   tuyas (hallazgo real de /design-cool ronda 2). Ahora usa la misma pista
   .menu-cell-toggle-hint ("Ver receta") que las demás, mismo peso visual. */
.menu-cell-name-link {
    color: var(--text);
    text-decoration: none;
}
.menu-cell-name-link:active { opacity: 0.6; }
.menu-cell-details { flex-basis: 100%; }
.menu-cell-details summary {
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}
.menu-cell-details summary::-webkit-details-marker { display: none; }
/* El desplegable de celda (ingredientes) no usa el mismo triángulo ▾ que
   el de día (colapsar/expandir el día entero) -- eran visualmente
   idénticos en dos profundidades distintas, ver crítica de diseño. Aquí
   la pista es un texto pequeño en vez de un glifo genérico. */
.menu-cell-toggle-hint {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: none;
    letter-spacing: normal;
}
.menu-cell-details[open] .menu-cell-toggle-hint { display: none; }
.menu-cell-ingredients {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.menu-source-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    vertical-align: middle;
}
.menu-source-generated {
    background: var(--green-soft);
    color: var(--green-ink);
}
/* Antes usaba --text-muted sobre --border (~3.6:1, por debajo del mínimo
   AA de 4.5:1) -- justo el badge que más conviene poder leer bien, ya que
   señala "esto no es tuyo, revísalo". Terra ya se usa en la app para
   acentos cálidos con buen contraste (price-badge.offer, missed-ing-label). */
.menu-source-base {
    background: var(--terra-soft);
    color: var(--terra-ink);
}
.menu-cell-time {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.menu-cell-empty { color: var(--text-muted); font-style: italic; }
.menu-cell-add-link { font-size: 0.85rem; }
.menu-add-missing {
    flex-basis: 100%;
    margin-top: 0.15rem;
    align-self: flex-start;
    border: none;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}
.menu-add-missing:disabled { color: var(--text-muted); cursor: default; }

.recipe-card-img-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bg), var(--card-bg, #fbf7ee));
    color: var(--border, #d8cdb8);
}
.recipe-card-img-placeholder[hidden] { display: none; }

.used-ing { color: var(--primary-dark); font-size: 0.9rem; }
.missed-ing-label { color: var(--terra-ink); font-size: 0.9rem; margin-bottom: 0.3rem; }
.missed-ing-list { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.missed-ing-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    font-size: 0.9rem; color: var(--terra-ink);
}
.pantry-check {
    flex-shrink: 0; border: 1px solid var(--border, #d8cdb8); background: var(--card-bg, #fbf7ee);
    color: var(--text, #3a2f22); border-radius: 999px; padding: 0.2rem 0.7rem;
    font-size: 0.8rem; cursor: pointer;
}
.pantry-check:hover { background: var(--bg); }
.pantry-check:disabled { opacity: 0.6; cursor: default; }

/* =========================================================================
   Inicio (home.html) -- estilos movidos aquí desde el <style> inline
   ========================================================================= */
.home-food-strip {
    /* Decoración pura: sin marco de tarjeta, atenuada y NO interactiva, para
       que no se lea como una fila de botones. */
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 2px 0 4px;
    margin-bottom: 16px;
    opacity: 0.38;
    pointer-events: none;
}
.home-food-strip svg { flex: none; }

.home-primary { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }

.home-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 18px;
    min-height: 76px;
    box-shadow: 0 1px 2px rgba(44, 39, 34, 0.05);
    border: 1px solid var(--border);
    position: relative;
    text-decoration: none;
    color: var(--text);
}

.home-icon {
    width: 52px; height: 52px; min-width: 52px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--green-soft);
}
.home-icon svg { color: var(--primary); }
.home-icon-sm { width: 44px; height: 44px; min-width: 44px; border-radius: 11px; }

.home-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-card-title { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: var(--text); }
.home-card-sub { font-size: 0.92rem; color: var(--text-muted); }
.home-chevron { margin-left: auto; flex-shrink: 0; color: #cebfa4; }

.home-badge {
    position: absolute; top: 12px; right: 12px;
    background: var(--danger); color: #fff;
    font-size: 0.78rem; font-weight: 700;
    min-width: 22px; height: 22px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px;
}

.home-section-label {
    font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0 0 12px 2px;
}

.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.home-grid-card {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--card-bg); border-radius: var(--radius); padding: 18px;
    min-height: 96px;
    box-shadow: 0 1px 2px rgba(44, 39, 34, 0.05); border: 1px solid var(--border);
    position: relative;
    text-decoration: none; color: var(--text);
}

.home-grid-card.span2 {
    grid-column: span 2;
    flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px;
    min-height: 76px;
}
.home-grid-card .home-card-title { font-size: 1.05rem; }
.home-grid-card .home-card-sub { font-size: 0.88rem; margin-top: -6px; }
.home-grid-card.span2 .home-card-sub { margin-top: 0; }

.recipe-of-day {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 1px 2px rgba(44, 39, 34, 0.05);
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    cursor: pointer;
}
.recipe-of-day:active { background: var(--bg); }

.recipe-of-day-label {
    font-size: 0.72rem; font-weight: 700; color: var(--warning);
    text-transform: uppercase; letter-spacing: 0.08em;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.recipe-of-day-label svg { color: var(--warning); flex: none; }

.recipe-of-day-img {
    width: 100%; height: 160px; object-fit: cover;
    border-radius: 12px; background: var(--bg);
    margin-bottom: 2px;
}

.recipe-of-day-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.recipe-of-day-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.recipe-of-day-video {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px; align-self: flex-start;
    background: var(--primary); color: #f7f2e7;
    font-family: var(--serif);
    font-size: 1rem; font-weight: 600;
    min-height: 46px;
    padding: 10px 18px; border-radius: 999px;
    text-decoration: none;
}
.recipe-of-day-video:hover { background: var(--primary-dark); color: #f7f2e7; }

.app-footer {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
}
.app-footer a { color: var(--text-muted); text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }