/* ==========================================================
   Cali Gastro Web — mejoras de la evaluación heurística (2026-11-11)
   Toast de confirmación, panel de accesibilidad (tamaño de texto y
   alto contraste), búsqueda sin resultados, carga del mapa, enlaces
   en texto, tamaños mínimos en celular y página de Ayuda.
   ========================================================== */

:root {
    --accent-dark: #C2410C;      /* texto naranja legible sobre blanco (5,2:1) */
    --text-light: #556274;       /* gris de apoyo: ≥4,5:1 también sobre #F5F5F7 */
    --text-muted-light: #5F6B7A; /* gris tenue solo para fondos claros */
}

/* Tamaño de texto elegido por el usuario (A− / A / A+) */
html[data-text="lg"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }

/* Grises tenues que quedaban por debajo de 4,5:1 sobre fondo claro */
.map-location-item p, .video-info p, .audio-info p, .about-feature p, .showcase-meta, .legend-item, .game-stat-label { color: var(--text-muted-light) !important; }
.photo-card .price-val.muted { color: #E2E8F0 !important; }
.map-location-type { filter: brightness(.82); }
.favorite-btn svg { color: var(--text-muted-light); }

/* Enlaces dentro del texto: subrayado claro, no solo un cambio de color */
main p a:not([class]), main li a:not([class]), .cali-month a, .recipe-cultural-note a {
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
    text-decoration-color: rgba(13, 115, 119, .45); font-weight: 600;
}
main p a:not([class]):hover, main li a:not([class]):hover { text-decoration-color: currentColor; }

/* Foco visible con teclado */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Celular: ningún texto por debajo de 12 px */
@media (max-width: 768px) {
    .section-tag, .showcase-badge, .showcase-category, .sp-now, .src, .fact .src, .map-preview-hint,
    .filter-btn, .dish-card-category, .photo-card__chip, .badge-type, .price-status, .price-src,
    .cali-icon-tag, .map-location-type, .legend-item, .game-stat-label, .meta-label, .ing-have,
    .ing-qty, .place-sources, .price-range span, .season-note, .cgw-popup .pp-sub, .cgw-popup .pp-note,
    .cgw-popup .pp-meta, .footer-bottom p, .dish-card-meta, .map-location-item p { font-size: .8rem !important; }
    .map-location-type span { font-size: .8rem !important; }
}

/* ---------- Toast (confirmación de favoritos y otras acciones) ---------- */
.cgw-toast {
    position: fixed; left: 50%; bottom: 5rem; z-index: 9500; transform: translate(-50%, 140%);
    display: flex; align-items: center; gap: .6rem; width: max-content; max-width: min(440px, calc(100vw - 32px));
    background: #0F2A2B; color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.4;
    padding: .75rem 1.1rem; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
    transition: transform .25s var(--ease), opacity .25s; opacity: 0; pointer-events: none;
}
.cgw-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cgw-toast a { color: #7DE3DD; text-decoration: underline; white-space: nowrap; }
.cgw-toast .ico { width: 18px; height: 18px; flex: none; }

/* ---------- Botón y panel de accesibilidad ---------- */
.a11y-btn {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 9400; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center; background: var(--primary); color: #fff; border: 2px solid #fff;
    box-shadow: var(--shadow-lg); cursor: pointer;
}
.a11y-btn svg { width: 24px; height: 24px; }
.a11y-panel {
    position: fixed; left: 1rem; bottom: 4.6rem; z-index: 9401; width: min(300px, calc(100vw - 32px));
    background: #fff; color: var(--text-dark); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow-xl); padding: 1rem 1.1rem;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: .2rem; color: var(--text-dark); }
.a11y-panel p { font-size: .85rem; color: var(--text-light); margin-bottom: .7rem; line-height: 1.5; }
.a11y-row { display: flex; gap: .4rem; margin-bottom: .8rem; }
.a11y-row button, .a11y-toggle {
    flex: 1; min-height: 44px; font: inherit; font-weight: 700; border-radius: 10px; cursor: pointer;
    border: 1.5px solid var(--border); background: #fff; color: var(--text-dark);
}
.a11y-row button[aria-pressed="true"], .a11y-toggle[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.a11y-row button:nth-child(1) { font-size: .85rem; } .a11y-row button:nth-child(2) { font-size: 1rem; } .a11y-row button:nth-child(3) { font-size: 1.2rem; }
.a11y-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.a11y-panel .a11y-help { display: block; margin-top: .8rem; font-size: .85rem; font-weight: 600; text-align: center; }
@media print { .a11y-btn, .a11y-panel, .cgw-toast { display: none !important; } }

/* ---------- Modo alto contraste ---------- */
html[data-contrast="high"] {
    --primary: #00494C; --primary-dark: #00393B; --accent-dark: #8F2E08;
    --text-body: #111827; --text-light: #1F2937; --text-muted: #E2E8F0; --text-muted-light: #1F2937;
    --border: #475569; --border-light: #64748B; --bg-light: #FFFFFF;
}
html[data-contrast="high"] body { background: #fff; color: #111827; }
html[data-contrast="high"] .photo-card__media { filter: brightness(.55); }
html[data-contrast="high"] .photo-card__body, html[data-contrast="high"] .photo-card__body * { text-shadow: 0 1px 2px #000; }
html[data-contrast="high"] .btn-primary, html[data-contrast="high"] .btn-accent, html[data-contrast="high"] .showcase-badge,
html[data-contrast="high"] .sp-now, html[data-contrast="high"] .now-pill { background: #9A3412 !important; border-color: #9A3412 !important; color: #fff !important; }
html[data-contrast="high"] .footer-nav a, html[data-contrast="high"] .footer p, html[data-contrast="high"] .footer li { color: #F8FAFC !important; }
html[data-contrast="high"] a:not([class]) { text-decoration: underline; }

/* ---------- Recetas: estado del catálogo y búsqueda sin resultados ---------- */
.recipe-status { margin: 0 0 var(--s-lg); font-size: .92rem; color: var(--text-light); }
.recipe-status strong { color: var(--text-dark); }
.recipe-empty {
    grid-column: 1 / -1; text-align: center; padding: 2.5rem 1.2rem; background: var(--bg-light);
    border: 1px dashed var(--border); border-radius: 16px; color: var(--text-dark);
}
.recipe-empty h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: .4rem; }
.recipe-empty p { color: var(--text-light); margin-bottom: .8rem; }
.recipe-empty .suggest { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: .9rem; }
.recipe-empty .suggest button, .recipe-empty .clear {
    font: inherit; font-weight: 600; min-height: 44px; padding: .45rem 1rem; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--primary); background: #fff; color: var(--primary);
}
.recipe-empty .clear { background: var(--primary); color: #fff; }

/* "Qué es": definición corta de cada plato en la tarjeta */
.dish-card-what { font-size: .9rem; line-height: 1.5; margin-bottom: var(--s-md); }
.dish-card-what strong { font-weight: 700; }

/* Resumen rápido y saltos dentro del detalle de la receta */
.recipe-summary {
    background: #E6F4F4; border-left: 4px solid var(--primary); border-radius: 12px;
    padding: 1rem 1.1rem; margin-bottom: var(--s-lg); color: var(--text-dark); font-size: .95rem; line-height: 1.6;
}
.recipe-summary h3 { font-family: var(--font-heading); font-size: 1rem; margin-bottom: .3rem; }
.recipe-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.recipe-jump a {
    display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .85rem; border-radius: 999px;
    background: #fff; border: 1.5px solid var(--primary); color: var(--primary); font-weight: 600; font-size: .88rem;
}
.ing-tools { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: -.4rem 0 var(--s-md); }
.ing-tools .ing-help { margin: 0; }
.ing-reset { font: inherit; font-size: .85rem; font-weight: 600; color: var(--accent-dark); background: none; border: 0; text-decoration: underline; cursor: pointer; min-height: 40px; }
.ing-progress { font-size: .85rem; font-weight: 700; color: var(--primary-dark); }

/* ---------- Dónde comer: lista de precios más compacta ---------- */
.price-more { margin-top: .3rem; }
.price-more summary {
    cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--primary); padding: .5rem 0; min-height: 40px;
    list-style: none; display: flex; align-items: center; gap: .35rem;
}
.price-more summary::-webkit-details-marker { display: none; }
.price-more summary::before { content: '+'; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; border: 1.5px solid currentColor; font-size: .85em; line-height: 1; }
.price-more[open] summary::before { content: '−'; }

/* ---------- Mapa: indicador de carga ---------- */
.map-loading {
    position: absolute; inset: 0; z-index: 800; display: grid; place-items: center; align-content: center; gap: .7rem;
    background: rgba(245, 245, 247, .92); color: var(--text-dark); font-weight: 600; font-size: .95rem; text-align: center;
    transition: opacity .3s;
}
.map-loading.done { opacity: 0; pointer-events: none; }
.map-spinner { width: 38px; height: 38px; border-radius: 50%; border: 4px solid #CDE6E6; border-top-color: var(--primary); animation: cgwSpin .8s linear infinite; }
@keyframes cgwSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .map-spinner { animation-duration: 2.4s; } }

/* ---------- Página de Ayuda ---------- */
.help-wrap { padding-top: var(--s-2xl); padding-bottom: var(--s-3xl); }
.help-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s-2xl); }
.help-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border-radius: 999px; background: #E6F4F4; color: var(--primary-dark); font-weight: 600; }
.help-section { margin-bottom: var(--s-3xl); scroll-margin-top: 90px; }
.help-section > h2 { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--text-dark); margin-bottom: var(--s-md); }
.help-section > p { max-width: 48rem; margin-bottom: var(--s-lg); }
.help-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.help-step { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem 1.2rem; }
.help-step h3 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-dark); margin-bottom: .35rem; display: flex; gap: .5rem; align-items: center; }
.help-step p { font-size: .95rem; line-height: 1.6; }
.help-step .eg { display: block; margin-top: .5rem; font-size: .88rem; color: var(--text-light); }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 14px; margin-bottom: .7rem; }
.faq summary { cursor: pointer; padding: 1rem 1.2rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; color: var(--text-dark); min-height: 48px; }
.faq details[open] summary { border-bottom: 1px solid var(--border-light); }
.faq details > div { padding: .9rem 1.2rem 1.1rem; font-size: .97rem; line-height: 1.7; }
.faq details > div p + p { margin-top: .6rem; }
.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8rem; }
.glossary div { background: var(--bg-warm); border: 1px solid #F3DCC6; border-radius: 14px; padding: .9rem 1rem; }
.glossary dt { font-family: var(--font-heading); font-weight: 700; color: var(--text-dark); font-size: 1.02rem; }
.glossary dt span { font-weight: 500; font-size: .85rem; color: var(--text-light); margin-left: .3rem; }
.glossary dd { font-size: .93rem; line-height: 1.55; margin-top: .2rem; }
.glossary dd a { font-weight: 600; }
.help-contact { background: var(--bg-light); border-radius: 16px; padding: 1.2rem 1.3rem; }
.badge-type.market { color: #17665D; }
.help-toc a { text-decoration: none; }
main .cali-chips a:not([class]), main nav a:not([class]) { text-decoration: none; }

/* ---------- Botón de idioma ES | EN ---------- */
.lang-switch { display: inline-flex; flex: none; border: 1.5px solid var(--primary); border-radius: 999px; overflow: hidden; margin-left: auto; margin-right: .6rem; }
.lang-switch a { display: inline-grid; place-items: center; min-width: 40px; min-height: 36px; padding: 0 .55rem; font-family: var(--font-heading); font-size: .85rem; font-weight: 700; letter-spacing: .03em; color: var(--primary); text-decoration: none; background: #fff; }
.lang-switch a[aria-current="true"] { background: var(--primary); color: #fff; cursor: default; }
.lang-switch a:not([aria-current]):hover { background: #E6F4F4; }
@media (min-width: 1025px) { .nav-menu { margin-left: auto; } .lang-switch { margin-left: 1rem; margin-right: 0; } }