/**
 * BuenaCarta Admin - estilos globales mobile-first.
 * Sobre Bootstrap 5.3. Variables CSS centralizadas.
 */

:root {
    --bc-primary: #1FA200;
    --bc-primary-dark: #157000;
    --bc-accent-1: #DD7645;
    --bc-accent-2: #A55C5E;
    --bc-bg-soft: #e3ffd4;
    --bc-bg-auth: #f7fff0;
    --bc-border: #e1e1e1;
    --bc-text-muted: #6c757d;
    --bc-radius: 12px;
    --bc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --bc-shadow-md: 0 4px 16px rgba(0,0,0,.6);
    --bc-nav-height: 56px;
    /* Permite transicionar height:auto → height:auto en navegadores modernos
       (Chromium 129+, Safari/Firefox aún no lo soportan — degrada a instant) */
    interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #212529; background: #f8fafb; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }

/* ------ Auth screens (login / signup / reset) ------ */

.bc-auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: radial-gradient(120% 80% at 100% 0%, var(--bc-bg-soft) 0%, transparent 60%), linear-gradient(180deg, #ffffff 0%, #f6faf3 100%); }
.bc-auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-md); padding: 2rem 1.5rem; }
.bc-auth-logo { display: block; margin: 0 auto 0.5rem; height: 48px; }
.bc-auth-tagline { text-align: center; color: var(--bc-primary); font-weight: 500; margin-bottom: 1.5rem; }
.bc-auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: var(--bc-text-muted); }
.bc-auth .form-control, .bc-auth .form-select { padding: 0.75rem 0.9rem; border-radius: 10px; }

.bc-btn-primary { background: var(--bc-primary); border-color: var(--bc-primary); color: #fff; padding: 0.75rem 1rem; border-radius: 10px; font-weight: 600; width: 100%; transition: background 0.15s ease; }
.bc-btn-primary:hover, .bc-btn-primary:focus { background: var(--bc-primary-dark); border-color: var(--bc-primary-dark); color: #fff; }
.bc-btn-primary:disabled { opacity: 0.6; }

/* Botones de marca externa — no verde BuenaCarta para no competir con la voz de acción */
.btn-whatsapp { background: #25D366; border-color: #25D366; color: #fff; font-weight: 600; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1ebd5b; border-color: #1ebd5b; color: #fff; }
.btn-facebook { background: #1877F2; border-color: #1877F2; color: #fff; font-weight: 600; }
.btn-facebook:hover, .btn-facebook:focus { background: #145fc0; border-color: #145fc0; color: #fff; }

.bc-link-muted { color: var(--bc-text-muted); text-decoration: none; font-size: 0.875rem; }
.bc-link-muted:hover { color: var(--bc-primary); text-decoration: underline; }

/* Input estilo "código de verificación / OTP" para el paso 2 del signup.
   Letras grandes, monoespaciadas, centradas, con tracking generoso para
   que se lea de un vistazo y se pueda pegar / teclear con cero ambigüedad. */
.bc-code-input {
    font-family: 'Courier New', Courier, ui-monospace, monospace;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.4em;
    padding: 0.65rem 0.5rem;
    text-indent: 0.4em; /* compensa el letter-spacing para que quede centrado */
    font-weight: 700;
    color: var(--bc-primary-dark);
}
.bc-code-input::placeholder { letter-spacing: 0.2em; color: #cdd5cd; font-weight: 400; }

/* Checklist en vivo de fortaleza de contraseña (form-reset-confirm).
   Cada regla parte gris y se vuelve verde al cumplirse. */
.bc-pwd-checks { padding-left: 0; }
.bc-pwd-checks li {
    color: var(--bc-text-muted);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.1rem 0;
    transition: color 0.15s ease;
}
.bc-pwd-checks li i { width: 14px; text-align: center; }
.bc-pwd-checks li.bc-pwd-ok { color: var(--bc-primary-dark); }

/* Indicador "coinciden / no coinciden" bajo pass2. */
.bc-pwd-match { min-height: 1.1em; }
.bc-pwd-match[data-state="ok"]  { color: var(--bc-primary-dark); }
.bc-pwd-match[data-state="bad"] { color: #b02a37; }
.bc-pwd-match[data-state="ok"]::before  { content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: 0.35rem; }
.bc-pwd-match[data-state="bad"]::before { content: "\f00d"; font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: 0.35rem; }

/* Botón primario deshabilitado: gris claro + cursor not-allowed.
   Bootstrap por defecto solo aplica opacity:.65, queremos algo más claro. */
.bc-btn-primary:disabled,
.bc-btn-primary[disabled] {
    background: #c8d6c4;
    border-color: #c8d6c4;
    color: #fff;
    cursor: not-allowed;
    opacity: 1;
}

/* ------ Bootstrap palette override — paleta BuenaCarta en todo el proyecto ------
   Bootstrap 5.3 trae azul (#0d6efd) como --bs-primary; aquí lo sustituimos por
   el verde BuenaCarta. Afecta a .btn-primary, .btn-outline-primary, links,
   utility classes (.text-primary, .bg-primary…) y focus de form-control. */
:root {
    --bs-primary: #1FA200;
    --bs-primary-rgb: 31, 162, 0;
    --bs-link-color: var(--bc-primary-dark);
    --bs-link-color-rgb: 21, 112, 0;
    --bs-link-hover-color: var(--bc-primary);
    --bs-link-hover-color-rgb: 31, 162, 0;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bc-primary);
    --bs-btn-border-color: var(--bc-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bc-primary-dark);
    --bs-btn-hover-border-color: var(--bc-primary-dark);
    --bs-btn-focus-shadow-rgb: 31, 162, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bc-primary-dark);
    --bs-btn-active-border-color: var(--bc-primary-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bc-primary);
    --bs-btn-disabled-border-color: var(--bc-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--bc-primary-dark);
    --bs-btn-border-color: var(--bc-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bc-primary);
    --bs-btn-hover-border-color: var(--bc-primary);
    --bs-btn-focus-shadow-rgb: 31, 162, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bc-primary);
    --bs-btn-active-border-color: var(--bc-primary);
    --bs-btn-disabled-color: var(--bc-primary);
    --bs-btn-disabled-bg: transparent;
}
/* Focus rings de Bootstrap usan azul por defecto — pasamos a verde */
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    border-color: var(--bc-primary);
    box-shadow: 0 0 0 0.2rem rgba(31, 162, 0, 0.15);
}
.form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(31, 162, 0, 0.2); border-color: var(--bc-primary); }
.form-check-input:checked { background-color: var(--bc-primary); border-color: var(--bc-primary); }

/* ------ Admin shell ------ */

.bc-app { min-height: 100dvh; display: flex; flex-direction: column; }

.bc-navbar { height: var(--bc-nav-height); background: #fff; border-bottom: 1px solid var(--bc-border); display: flex; align-items: center; padding: 0 0.75rem; position: sticky; top: 0; z-index: 1030; padding-top: env(safe-area-inset-top); height: calc(var(--bc-nav-height) + env(safe-area-inset-top)); }
.bc-navbar-title { font-weight: 600; flex: 1; text-align: center; font-size: 1rem; }
.bc-navbar .btn { border: none; background: transparent; color: #495057; padding: 0.5rem; font-size: 1.1rem; }

.bc-main { flex: 1; width: 100%; max-width: 600px; margin-inline: auto; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* Bottom nav — visible en cualquier tamaño que NO muestre el sidebar
   (móvil + tablet hasta 991.98px). En desktop ≥992px el sidebar toma
   el relevo y el tabbar se oculta. */
.bc-tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--bc-border); display: none; justify-content: space-around; padding: 0.5rem 0; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); z-index: 1030; }
@media (max-width: 991.98px) {
    .bc-tabbar { display: flex; }
    .bc-main { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}
.bc-tabbar a { color: var(--bc-text-muted); text-decoration: none; flex: 1; text-align: center; font-size: 0.75rem; padding: 0.25rem; }
.bc-tabbar a i { display: block; font-size: 1.3rem; margin-bottom: 0.15rem; }
.bc-tabbar a.active { color: var(--bc-primary); }

/* Sidebar (solo en escritorio) */
.bc-sidebar { display: none; width: 240px; background: #fff; border-right: 1px solid var(--bc-border); padding: 1rem 0.75rem; }
@media (min-width: 992px) {
    .bc-app-with-sidebar { flex-direction: row; }
    .bc-sidebar { display: block; }
    .bc-main { padding: 1.5rem 2rem; }
}
.bc-sidebar a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 8px; color: #495057; text-decoration: none; margin-bottom: 2px; }
.bc-sidebar a:hover { background: #f3f6f2; color: var(--bc-primary); }
.bc-sidebar a.active { background: rgba(31,162,0,0.1); color: var(--bc-primary); font-weight: 600; }

/* Selector de establecimiento dentro del sidebar (desktop) */
.bc-sidebar-estab-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bc-text-muted);
    letter-spacing: 0.06em;
    padding: 0 0.25rem 0 0.8rem;
}
.bc-sidebar-estab .bc-sidebar-estab-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: rgba(31, 162, 0, 0.06);
    border: 1px solid rgba(31, 162, 0, 0.18);
    border-radius: 10px;
    color: var(--bc-primary-dark);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.bc-sidebar-estab .bc-sidebar-estab-btn:hover { background: rgba(31, 162, 0, 0.12); border-color: rgba(31, 162, 0, 0.3); }
.bc-sidebar-estab .bc-sidebar-estab-btn::after { margin-left: auto; }
.bc-sidebar-estab .bc-sidebar-estab-btn > i:first-child { color: var(--bc-primary); flex-shrink: 0; }
.bc-sidebar-estab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-sidebar-estab-menu { max-height: 60vh; overflow-y: auto; min-width: 240px; }
.bc-sidebar-estab-menu .dropdown-item { display: flex; align-items: center; padding: 0.5rem 0.85rem; }
.bc-sidebar-estab-menu .dropdown-item.active { background: rgba(31, 162, 0, 0.1); color: var(--bc-primary-dark); font-weight: 600; }

.bc-sidebar-estab-single {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    background: rgba(31, 162, 0, 0.06);
    border-radius: 10px;
    color: var(--bc-primary-dark);
    font-weight: 600;
    font-size: 0.88rem;
}
.bc-sidebar-estab-single i { color: var(--bc-primary); flex-shrink: 0; }
.bc-sidebar-estab-single span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------ Asistente "nuevo establecimiento" ------
   Cuando la vista #/nuevo-estab está montada, el contenedor renderizado
   incluye `.bc-wizard-active`. Usamos :has() (Chrome/Firefox/Safari 2023+)
   para ocultar el chrome de navegación: tabbar, sidebar y navbar. El
   usuario solo ve el formulario centrado, sin opciones para navegar
   fuera del wizard (consistente con que el flujo se cierra solo al
   crear el establecimiento o al pulsar Cancelar, si está disponible). */
body:has(.bc-wizard-active) .bc-tabbar,
body:has(.bc-wizard-active) .bc-sidebar,
body:has(.bc-wizard-active) .bc-navbar { display: none !important; }
/* Reaprovechar el viewport completo para el wizard, sin padding inferior
   del tabbar y sin padding lateral del sidebar. */
body:has(.bc-wizard-active) .bc-main { padding: 1.5rem 1rem; max-width: 600px; margin: 0 auto; }
.bc-wizard-card { background: #fff; border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-md); padding: 2rem 1.5rem; }
.bc-wizard-header h3 { color: var(--bc-primary-dark); font-weight: 700; }
@media (max-width: 575px) {
    body:has(.bc-wizard-active) .bc-main { padding: 1rem 0.5rem; }
    .bc-wizard-card { padding: 1.25rem 1rem; border-radius: 0; box-shadow: none; }
}

/* ------ Suscripción: hero del plan vigente + comparativa de planes ------
   Mobile-first: las 3 cards de plan se apilan; en >=md se ponen en 3 cols.
   La card actual del usuario lleva borde verde, la "popular" un sello
   discreto encima. */
.bc-plan-hero { padding: 1.25rem; }
.bc-plan-hero-row { display: flex; align-items: center; gap: 1rem; }
.bc-plan-hero-icon { font-size: 2.2rem; color: var(--bc-primary); flex-shrink: 0; width: 2.6rem; text-align: center; }
.bc-plan-hero-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }

/* Cards siempre apiladas vertical, también en desktop. Pensado mobile-first:
   el usuario decide entre 3 planes leyendo uno detrás del otro, no mirando
   3 columnas estrechas. En pantallas grandes acotamos el ancho para que el
   contenido no se vea perdido. */
.bc-planes { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.bc-planes-toggle-wrap { max-width: 560px; margin: 0 auto 1rem; padding: 0.75rem 1rem; }

.bc-plan {
    background: #fff; border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-sm);
    padding: 1.25rem 1rem; position: relative; display: flex; flex-direction: column;
    border-top: 4px solid var(--plan-color, #ddd);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bc-plan-popular {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 147, 0, 0.12);
    transform: translateY(-4px);
}
.bc-plan-current { box-shadow: 0 0 0 2px var(--bc-primary), var(--bc-shadow-sm); }
.bc-plan-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--plan-color, #888); color: #fff; font-size: 0.7rem;
    font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em;
}
.bc-plan-current-flag {
    position: absolute; top: 0.5rem; right: 0.5rem; background: var(--bc-primary); color: #fff;
    font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px;
}
.bc-plan-head { text-align: center; margin-bottom: 1rem; }
.bc-plan-head i { font-size: 1.8rem; color: var(--plan-color, #888); display: block; margin-bottom: 0.3rem; }
.bc-plan-head h5 { font-weight: 700; }
.bc-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 0.15rem; }
.bc-plan-price-amt { font-size: 1.6rem; font-weight: 700; color: var(--plan-color, #444); }
.bc-plan-price-period { font-size: 0.85rem; color: var(--bc-text-muted); }
.bc-plan-price-free { font-size: 1.4rem; font-weight: 700; color: var(--bc-text-muted); }
.bc-plan-discount { font-size: 0.75rem; color: var(--bc-primary-dark); margin-top: 0.25rem; font-weight: 600; }
.bc-plan-discount-spacer { font-size: 0.75rem; margin-top: 0.25rem; visibility: hidden; }
.bc-plan-features { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.bc-plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid #f0f3f0; }
.bc-plan-features li:first-child { border-top: 0; }
.bc-plan-feat-cell { width: 1.3rem; flex-shrink: 0; text-align: center; padding-top: 0.1rem; }
.bc-plan-feat-label { color: #444; }
.bc-plan-feat-val { font-weight: 600; color: var(--plan-color, #444); }

/* ------ Cards y listas ------ */

.bc-card { background: #fff; border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-sm); padding: 1rem; margin-bottom: 1rem; }
.bc-card:last-child { margin-bottom: 0;}
.bc-list-item { background: #fff; border-radius: var(--bc-radius); padding: 0.5rem 0.1rem; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: var(--bc-shadow-sm); transition: transform 0.1s ease, background-color 0.12s ease; }

.bc-list-item:active { transform: scale(0.98); }

a.bc-list-item, .bc-list-link { color: inherit; text-decoration: none; }
a.bc-list-item:hover, .bc-list-link:hover { background: #fafbfa; }

.bc-list-item-clickable { cursor: pointer; }
.bc-list-item-clickable:hover { background: #fafbfa; }
.bc-list-item-clickable:focus-visible { outline: 2px solid var(--bc-primary); outline-offset: 2px; }

/* Items de cartas/menús y de platos — mismo tinte verde que el item activo
   del sidebar (`.bc-sidebar a.active`) para reforzar la marca y crear
   continuidad visual entre la navegación y el contenido. */
#bc-menus-list > .bc-list-item,
.bc-platos-list > .bc-list-item {
    background: rgb(250, 255, 248);
}
/* Hover un punto más saturado: el #fafbfa heredado se leería como "se va el
   color" al pasar el ratón. */
#bc-menus-list > .bc-list-item:hover,
#bc-menus-list > a.bc-list-item:hover,
.bc-platos-list > .bc-list-item.bc-list-item-clickable:hover {
    background: rgba(31, 162, 0, 0.18);
}

/* ------ Progress bar global (mientras hay requests en vuelo) ------
   Barra fina arriba del viewport, estilo GitHub/YouTube. Se monta
   perezosamente desde js/app.js; se hace visible cuando body.bc-loading. */
.bc-progress {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(31, 162, 0, 0.22);
    box-shadow: 0 1px 4px rgba(31, 162, 0, 0.35);
    z-index: 2100;            /* sobre toasts y sheets */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    overflow: hidden;
}
.bc-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--bc-primary) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: bc-progress-slide 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
body.bc-loading .bc-progress { opacity: 1; }
/* Refuerzo táctil del estado "estoy haciendo algo": cursor de espera y blur
   sobre el contenido que está a punto de desaparecer/refrescarse. La barra
   superior por sí sola pasaba desapercibida en pantallas grandes; el blur
   le da un "freno" visual claro al contenido viejo. */
body.bc-loading { cursor: progress; }
#bc-view { transition: filter 0.18s ease; }
body.bc-loading #bc-view { filter: blur(3px) saturate(0.85); pointer-events: none; }
@keyframes bc-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Pill "Cargando…" centrado horizontalmente, justo debajo de la barra de
   progreso. Aparece a la vez que la barra (mismo selector body.bc-loading).
   Pointer-events:none para que nunca bloquee taps. */
.bc-loading-pill {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 18px);
    left: 50%;
    transform: translate(-50%, -8px);
    z-index: 2101;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem 0.45rem 0.75rem;
    background: #fff;
    color: var(--bc-primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(15, 30, 5, 0.18), 0 0 0 1px rgba(31, 162, 0, 0.15);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
body.bc-loading .bc-loading-pill {
    opacity: 1;
    transform: translate(-50%, 0);
}
.bc-loading-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(31, 162, 0, 0.25);
    border-top-color: var(--bc-primary);
    animation: bc-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes bc-spin {
    to { transform: rotate(360deg); }
}

/* ------ Toast / feedback ------ */

#bc-toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(5.5rem + env(safe-area-inset-bottom)); z-index: 2000; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; width: min(92vw, 420px); }

/* En desktop, los toasts van arriba-derecha (patrón estándar) */
@media (min-width: 768px) {
    #bc-toasts { left: auto; right: 1.25rem; bottom: auto; top: 1.25rem; transform: none; width: min(92vw, 380px); }
}

.bc-toast { --bc-toast-accent: #212529; --bc-toast-accent-bg: #f3f4f5; position: relative; display: flex; align-items: flex-start; gap: 0.7rem; background: #fff; color: #1c2430; padding: 0.85rem 1rem 0.85rem 1.1rem; border-radius: 12px; font-size: 0.92rem; line-height: 1.35; box-shadow: 0 8px 24px rgba(15, 25, 40, 0.14), 0 2px 4px rgba(15, 25, 40, 0.08); pointer-events: auto; border-left: 4px solid var(--bc-toast-accent); opacity: 0; transform: translateY(16px); transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1); }
@media (min-width: 768px) {
    .bc-toast { transform: translateX(40px); }
    .bc-toast.show { transform: translateX(0); }
}
.bc-toast.show { opacity: 1; transform: translateY(0); }
.bc-toast.hiding { opacity: 0; transform: translateY(-8px); }

.bc-toast-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bc-toast-accent-bg); color: var(--bc-toast-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; margin-top: 1px; }
.bc-toast-msg { flex: 1; min-width: 0; word-wrap: break-word; padding-top: 1px; }
.bc-toast-close { flex-shrink: 0; background: transparent; border: none; color: #9aa2b0; padding: 0; width: 22px; height: 22px; font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 50%; transition: color 0.12s, background 0.12s; }
.bc-toast-close:hover { color: #1c2430; background: #eef0f3; }

/* Variantes por tipo */
.bc-toast-success { --bc-toast-accent: var(--bc-primary); --bc-toast-accent-bg: #e6f7dd; }
.bc-toast-error { --bc-toast-accent: #d1332f; --bc-toast-accent-bg: #fde6e5; }
.bc-toast-info { --bc-toast-accent: #1976d2; --bc-toast-accent-bg: #e3f0fb; }

/* ------ Form utilities ------ */

.bc-field-error { color: #c0392b; font-size: 0.8rem; margin-top: 0.25rem; min-height: 1.1em; }

/* Prevención de zoom en inputs en iOS al enfocar */
@supports (-webkit-touch-callout: none) {
    .bc-auth input, .bc-auth select, .bc-auth textarea,
    .bc-sheet input, .bc-sheet select, .bc-sheet textarea { font-size: 16px !important; }
}

/* ------ Sheet / modal responsive ------ */

body.bc-sheet-open { overflow: hidden; }

/* Backdrop con blur tipo "glass" — más sutil que el oscuro plano anterior */
.bc-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 25, 40, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.bc-sheet-backdrop.show { opacity: 1; }

.bc-sheet {
    position: fixed;
    background: #fff;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(15, 25, 40, 0.18), 0 2px 6px rgba(15, 25, 40, 0.08);
    left: 0; right: 0; bottom: 0;
    max-height: 92dvh;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    transform: translateY(100%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom);
}
.bc-sheet.show { transform: translateY(0); }

/* Header limpio: fondo blanco, título grande peso 700, sin barra verde */
.bc-sheet-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 0.5rem;
    background: #fff;
    border-bottom: none;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
}
.bc-sheet-title {
    flex: 1;
    font-weight: 700;
    font-size: 1.35rem;
    color: #1c2430;
    line-height: 1.2;
    padding-right: 2.75rem; /* deja sitio al botón close flotante */
}

/* Close icon flotante top-right (independiente del header) */
.bc-sheet-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(15, 25, 40, 0.05);
    color: #495057;
    font-size: 0.95rem;
    cursor: pointer;
    z-index: 2;
    transition: background 0.12s, color 0.12s, transform 0.1s;
}
.bc-sheet-close:hover { background: rgba(15, 25, 40, 0.1); color: #1c2430; }
.bc-sheet-close:active { transform: scale(0.94); }

.bc-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.5rem 1rem;
    -webkit-overflow-scrolling: touch;
    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    scroll-behavior: smooth;
}

/* Transiciones suaves al cambiar de tab dentro del sheet. interpolate-size
   (ya activado en :root) permite que height:auto se anime en navegadores
   modernos. En Safari/Firefox degrada a cambio instantáneo. */
.bc-sheet .tab-content { transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
.bc-sheet .tab-pane { transition: opacity 0.18s ease; }
.bc-sheet .tab-pane.fade:not(.show) { opacity: 0; }
.bc-sheet .tab-pane.fade.show { opacity: 1; }

.bc-sheet-actions {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: none;
    background: transparent;
}
.bc-sheet-actions .btn {
    flex: 1;
    padding: 0.7rem 0.85rem;
    font-weight: 600;
    border-radius: 10px;
}

/* Handle visual del sheet en móvil (grabber) */
.bc-sheet::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: #d0d7d0; }

/* Desktop: modal centrado con bordes más amplios y sombra más generosa */
@media (min-width: 768px) {
    .bc-sheet {
        top: 50%; bottom: auto; left: 50%; right: auto;
        transform: translate(-50%, calc(-50% + 20px));
        border-radius: 20px;
        width: 92vw;
        max-width: 540px;
        max-height: 84vh;
        padding-bottom: 0;
        box-shadow: 0 24px 60px rgba(15, 25, 40, 0.22), 0 4px 12px rgba(15, 25, 40, 0.08);
    }
    .bc-sheet.show { transform: translate(-50%, -50%); }
    .bc-sheet-sm { max-width: 380px; }
    .bc-sheet-lg { max-width: 720px; }
    .bc-sheet-header { border-top-left-radius: 20px; border-top-right-radius: 20px; }
    .bc-sheet::before { display: none; }
}

/* Cuando el sheet contiene pestañas (.bc-tabs), fijamos su altura para que
   no salte al cambiar entre pestañas de distinto largo. El body scrollea si
   la pestaña activa supera la altura disponible. */
.bc-sheet:has(.bc-tabs) { height: 92dvh; }
@media (min-width: 768px) {
    .bc-sheet:has(.bc-tabs) { height: 84vh; }
}

/* ------ Botón Guardar oculto hasta que el form esté "dirty" ------
   En sheets con <form>, el botón primario empieza con `.bc-sheet-save-hidden`
   (display:none) y al primer input/change pasa a `.bc-sheet-save-active`
   con una entrada con scale-up + destello periódico que se desliza. */
.bc-sheet-actions .btn.bc-sheet-save-hidden { display: none; }

.bc-sheet-actions .btn.bc-sheet-save-active {
    position: relative;
    overflow: hidden;
    animation: bc-save-fadein 0.25s ease-out;
}
.bc-sheet-actions .btn.bc-sheet-save-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    animation: bc-shimmer 3.5s ease-in-out 0.6s infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes bc-save-fadein {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes bc-shimmer {
    0%   { transform: translateX(-100%); }
    35%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* ------ Offcanvas menú móvil — diseño tipo "side sheet" nativo ------ */

/* El offcanvas de Bootstrap por defecto trae header con borde feo y el body
   sin padding consistente. Sobreescribimos para que parezca una hoja nativa
   iOS/Android: esquinas redondeadas en el lado interior, sombra suave,
   safe-area respetada (notch + home indicator), backdrop con blur. */
.bc-offcanvas {
    --bc-offcanvas-pad: 1.1rem;
    width: min(86vw, 360px) !important;
    height: 100dvh;
    background: #fff;
    color: #1c2430;
    border: none !important;
    /* Sombra hacia la derecha (la hoja entra desde la izquierda). */
    box-shadow: 12px 0 36px rgba(15, 25, 40, 0.18);
    /* Esquinas redondeadas en el lado interior (derecho). */
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    display: flex;
    flex-direction: column;
    /* iOS: respeta notch superior + home indicator inferior */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
}
.bc-offcanvas.offcanvas-start { transform: translateX(-100%); }
.bc-offcanvas.show { transform: translateX(0); }
.bc-offcanvas-backdrop, .offcanvas-backdrop.show {
    background: rgba(15, 25, 40, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
}

/* "Grabber" decorativo del lado derecho (interior): pista visual de hoja
   deslizable. Como ahora la hoja entra desde la izquierda, el grabber va
   en el borde interior (derecho). */
.bc-offcanvas-grabber {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 38px;
    border-radius: 2px;
    background: #d8dde0;
    pointer-events: none;
    opacity: 0.7;
}

/* Header con avatar + datos del usuario + cerrar */
.bc-offcanvas-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem var(--bc-offcanvas-pad) 0.85rem;
    border-bottom: 1px solid #f0f2f0;
    background: linear-gradient(180deg, var(--bc-bg-soft) 0%, #fff 100%);
    flex-shrink: 0;
}
.bc-offcanvas-user { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; }
.bc-offcanvas-user-info { flex: 1; min-width: 0; }
.bc-offcanvas-user-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--bc-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bc-offcanvas-user-mail {
    font-size: 0.78rem;
    color: var(--bc-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--bc-primary);
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(31, 162, 0, 0.25);
}

.bc-offcanvas-close {
    width: 38px; height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    color: #495057;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}
.bc-offcanvas-close:active { background: rgba(0, 0, 0, 0.1); transform: scale(0.94); }

/* Cuerpo scrollable */
.bc-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 0.75rem;
    overscroll-behavior: contain;
}

.bc-offcanvas-section { padding: 0.5rem var(--bc-offcanvas-pad) 0.4rem; }
.bc-offcanvas-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.25rem;
}

/* Selector de establecimientos: lista de tarjetas con el actual marcado */
.bc-offcanvas-estabs { display: flex; flex-direction: column; gap: 0.35rem; }
.bc-offcanvas-estab {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: #f6f8f6;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #1c2430;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease;
}
.bc-offcanvas-estab > i:first-child { color: var(--bc-text-muted); width: 18px; text-align: center; }
.bc-offcanvas-estab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-offcanvas-estab-check { color: var(--bc-primary); font-size: 0.85rem; }
.bc-offcanvas-estab.is-current {
    background: rgba(31, 162, 0, 0.08);
    border-color: rgba(31, 162, 0, 0.25);
    font-weight: 600;
}
.bc-offcanvas-estab:active { transform: scale(0.985); background: #eef1ee; }

/* Tarjeta-resumen del establecimiento único (cuando no hay switcher) */
.bc-offcanvas-current-estab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: rgba(31, 162, 0, 0.06);
    border-radius: 12px;
    color: var(--bc-primary-dark);
    font-weight: 600;
    font-size: 0.92rem;
}
.bc-offcanvas-current-estab i { color: var(--bc-primary); }

/* Lista de navegación: filas grandes (52px), icono fijo a la izquierda,
   chevron a la derecha. Activo se marca con color primario y barra lateral. */
.bc-offcanvas-nav {
    display: flex;
    flex-direction: column;
    padding: 0.25rem var(--bc-offcanvas-pad);
}
.bc-offcanvas-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 52px;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    color: #2a3340;
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.bc-offcanvas-link > i:first-child {
    width: 24px;
    text-align: center;
    font-size: 1rem;
    color: var(--bc-text-muted);
    transition: color 0.12s ease;
    flex-shrink: 0;
}
.bc-offcanvas-link > span { flex: 1; min-width: 0; }
.bc-offcanvas-chev {
    color: #c5cbd1;
    font-size: 0.75rem;
    transition: transform 0.12s ease, color 0.12s ease;
}
.bc-offcanvas-link:active {
    background: rgba(31, 162, 0, 0.08);
    transform: scale(0.99);
}
.bc-offcanvas-link:active > i:first-child { color: var(--bc-primary); }

/* Estado activo (vista actual) */
.bc-offcanvas-link.active {
    background: rgba(31, 162, 0, 0.1);
    color: var(--bc-primary-dark);
    font-weight: 600;
}
.bc-offcanvas-link.active > i:first-child { color: var(--bc-primary); }
.bc-offcanvas-link.active > .bc-offcanvas-chev { color: var(--bc-primary); }

/* Footer con logout */
.bc-offcanvas-footer {
    padding: 0.6rem var(--bc-offcanvas-pad) 0.75rem;
    border-top: 1px solid #f0f2f0;
    background: #fafbfa;
    flex-shrink: 0;
}
.bc-offcanvas-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    color: #d1332f;
    background: #fff;
    border: 1px solid #fadcdb;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.12s ease, transform 0.08s ease;
}
.bc-offcanvas-logout:active { background: #fde6e5; color: #b32925; transform: scale(0.99); }

/* En desktop el offcanvas no se usa (sidebar visible) — pero por si acaso
   lo mostramos algún día, le subimos el ancho. */
@media (min-width: 992px) {
    .bc-offcanvas { width: min(380px, 86vw) !important; }
}

/* Campos dentro de sheets/forms genéricos */
.bc-field { margin-bottom: 1rem; }
.bc-field label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--bc-primary-dark); }
.bc-field .form-control:focus, .bc-field .form-select:focus { outline: none; border-color: var(--bc-primary); box-shadow: 0 0 0 2px rgba(31,162,0,0.15); }
.bc-field textarea.form-control { min-height: 84px; resize: vertical; }

/* Switches (visible/destacado/agotado) más táctiles */
.bc-switch { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; border: 1px solid var(--bc-border); border-radius: 10px; background: #fff; margin-bottom: 0.5rem; cursor: pointer; user-select: none; }
.bc-switch span { font-weight: 500; }
.bc-switch input[type="checkbox"] { appearance: none; width: 42px; height: 24px; background: #d8d8d8; border-radius: 12px; position: relative; transition: background 0.15s; cursor: pointer; flex-shrink: 0; }
.bc-switch input[type="checkbox"]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.bc-switch input[type="checkbox"]:checked { background: var(--bc-primary); }
.bc-switch input[type="checkbox"]:checked::before { transform: translateX(18px); }

/* Botón flotante (FAB) para "Añadir" en listas */
.bc-fab { position: fixed; right: 1.25rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; border-radius: 50%; background: var(--bc-primary); color: #fff; border: none; box-shadow: 0 6px 16px rgba(31,162,0,0.35); font-size: 1.3rem; z-index: 1020; transition: transform 0.1s, background 0.12s; }
.bc-fab:hover { background: var(--bc-primary-dark); color: #fff; }
.bc-fab:active { transform: scale(0.94); }
.bc-fab-label { display: none; }
/* En PC el FAB pasa a "extended FAB" (Material) — pill con icono + texto */
@media (min-width: 992px) {
    .bc-fab { width: auto; height: auto; min-height: 52px; padding: 0 1.25rem 0 1.1rem; border-radius: 999px; font-size: 1rem; }
    .bc-fab-label { display: inline; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }
}
@media (min-width: 768px) {
    .bc-fab { bottom: 1.5rem; }
}

/* Botón icono genérico — círculo táctil 36×36, se ve como botón en reposo */
.btn-icon { width: 36px; height: 36px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bc-border); background: #fff; color: #495057; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.1s; flex-shrink: 0; }
.btn-icon:hover { background: #f1f7ed; color: var(--bc-primary); border-color: #c3dda7; box-shadow: 0 2px 6px rgba(31, 162, 0, 0.12); }
.btn-icon:active { transform: scale(0.94); }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon.btn-icon-danger { color: #9a4040; }
.btn-icon.btn-icon-danger:hover { background: #fde6e5; color: #c0392b; border-color: #f3a8a5; box-shadow: 0 2px 6px rgba(192, 57, 43, 0.12); }

/* Acciones secundarias agrupadas (editar/eliminar) */
.bc-item-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }

/* Pastillas/tags estilo nuevo */
.bc-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; font-size: 0.72rem; font-weight: 500; border-radius: 999px; background: #eef3ee; color: #506050; margin-right: 0.25rem; }
.bc-tag.warning { background: #fff3cd; color: #856404; }
.bc-tag.danger { background: #fde2e0; color: #9c2d25; }
.bc-tag.success { background: #d9efcd; color: #1c5b0a; }

/* ------ Drag handles + Sortable.js states ------ */

.bc-drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #c0c7c0; cursor: grab; user-select: none; flex-shrink: 0; touch-action: none; }
.bc-drag-handle:active { cursor: grabbing; color: var(--bc-primary); }
/* Ghost = el "fantasma" que SortableJS deja en la posición de origen del
   item arrastrado. Lo ocultamos: el feedback visual queda solo en el clon
   flotante (.bc-drag-floating) que sigue al cursor + el reflow natural de
   los items vecinos al hover. `display:none` no rompe el cálculo del drop:
   SortableJS resuelve el índice destino con eventos hover sobre los items
   restantes, no por la posición del ghost. */
.bc-drag-ghost { display: none !important; }
.bc-drag-floating { box-shadow: 0 8px 24px rgba(0,0,0,0.18); transform: rotate(1deg); }
.bc-sortable-list { min-height: 8px; }

/* ------ Pills de Ajustes (4 secciones) — scroll horizontal en móvil ------ */

.bc-ajustes-nav { flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bc-ajustes-nav::-webkit-scrollbar { display: none; }
.bc-ajustes-nav .nav-item { flex-shrink: 0; }
.bc-ajustes-nav .nav-link { white-space: nowrap; padding: 0.45rem 0.85rem; border-radius: 999px; color: #495057; background: #f3f6f2; font-weight: 500; font-size: 0.9rem; border: 1px solid transparent; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.bc-ajustes-nav .nav-link:hover { background: #e9efe6; color: var(--bc-primary-dark); }
.bc-ajustes-nav .nav-link.active { background: rgba(31,162,0,0.12); color: var(--bc-primary-dark); border-color: rgba(31,162,0,0.25); }

/* En desktop, los sub-tabs internos (Info/Social, Colores/Imagen/...) no
   añaden padding-top tras los pills externos. Suficiente con el mb-3 del nav. */

/* ------ Tabs dentro de bc-sheet ------ */

.bc-tabs { flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--bc-border); margin: -0.5rem -0.25rem 0; }
.bc-tabs::-webkit-scrollbar { display: none; }
.bc-tabs .nav-item { flex-shrink: 0; }
.bc-tabs .nav-link { border: none; background: transparent; padding: 0.6rem 1rem; color: #6c757d; border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; }
.bc-tabs .nav-link.active { color: var(--bc-primary); border-bottom-color: var(--bc-primary); background: transparent; }

/* ------ Alérgenos grid ------ */

.bc-alergen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; }
.bc-alergen-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--bc-border); border-radius: 10px; background: #fff; cursor: pointer; font-size: 0.85rem; user-select: none; transition: background 0.12s, border-color 0.12s; }
.bc-alergen-check img { width: 22px; height: 22px; flex-shrink: 0; }
.bc-alergen-check input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 2px solid #d0d7d0; border-radius: 4px; position: relative; flex-shrink: 0; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.bc-alergen-check input[type="checkbox"]:checked { background: var(--bc-primary); border-color: var(--bc-primary); }
.bc-alergen-check input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 1px; left: 4px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bc-alergen-check:has(input:checked) { background: #f3fbe9; border-color: var(--bc-primary); }

/* ------ i18n details (traducciones colapsadas) ------ */

.bc-i18n-others summary { cursor: pointer; padding: 0.35rem 0; list-style: none; display: flex; align-items: center; gap: 0.35rem; }
.bc-i18n-others summary::-webkit-details-marker { display: none; }
/* Chevron de toggle del details — FontAwesome se renderiza centrado en su
   bounding box, así que rota limpio sin desplazarse. */
.bc-i18n-chevron {
    display: inline-block;
    width: 0.7em;
    font-size: 0.85em;
    color: var(--bc-text-muted);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.bc-i18n-others[open] .bc-i18n-chevron { transform: rotate(90deg); }
/* Texto del summary: alterna entre "Mostrar" y "Ocultar" según el estado open. */
.bc-i18n-others .bc-i18n-others-label-hide { display: none; }
.bc-i18n-others[open] .bc-i18n-others-label-show { display: none; }
.bc-i18n-others[open] .bc-i18n-others-label-hide { display: inline; }
.bc-i18n-others summary { color: #1976d2;}
/* Bandera del idioma como sufijo (a la derecha) del input multi-idioma */
.bc-lang-suffix { min-width: 32px; justify-content: center; padding: 0.2rem 0.4rem; background: #f8faf8; }
.bc-lang-flag { width: 16px; height: 16px; object-fit: cover; border-radius: 2px; display: block; }
.bc-lang-code { font-size: 0.65rem; font-weight: 600; color: #6c757d; letter-spacing: 0.5px; }

/* Etiqueta de estado (Auto / Manual / Revisar) a la derecha del input de
   cada idioma no-base, justo antes de la bandera. `input-group-text` con
   texto corto en mayúsculas — pill pequeña tipo tag. */
.bc-lang-state {
    padding: 0.1rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.bc-lang-state-auto {
    background: rgba(31, 162, 0, 0.12);
    color: var(--bc-primary-dark);
    border-color: rgba(31, 162, 0, 0.25);
}
.bc-lang-state-manual {
    background: rgba(108, 117, 125, 0.1);
    color: #495057;
    border-color: rgba(108, 117, 125, 0.2);
}
.bc-lang-state-stale {
    background: rgba(221, 118, 69, 0.15);
    color: #b85c1f;
    border-color: rgba(221, 118, 69, 0.35);
}
/* Cuando el idioma es auto y el input está vacío, el placeholder se ve un
   pelín más sutil — la pista visual la da la etiqueta lateral. */
.bc-i18n-input[data-bc-i18n-state="auto"] .form-control::placeholder {
    color: #a8b8a8;
    font-style: italic;
}

/* ------ Foto del plato ------ */

.bc-foto-container { display: flex; flex-direction: column; }
.bc-foto-preview { text-align: center; }
.bc-foto-preview img { max-height: 320px; object-fit: cover; width: 100%; background: #f5f7f5; }
.bc-foto-empty { border: 2px dashed var(--bc-border); border-radius: var(--bc-radius); }

/* ------ Banco de imágenes (stock) ------ */

.bc-stock-results { min-height: 120px; }
.bc-stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.4rem; }
.bc-stock-thumb { background: #fff; border: 1px solid var(--bc-border); border-radius: 8px; padding: 0; overflow: hidden; cursor: pointer; transition: transform 0.1s, border-color 0.12s; }
.bc-stock-thumb:hover { border-color: var(--bc-primary); }
.bc-stock-thumb:active { transform: scale(0.96); }
.bc-stock-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* ------ Miniatura de foto en lista de platos ------ */

.bc-plato-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f5f7f5; display: inline-flex; align-items: center; justify-content: center; }
.bc-plato-thumb-empty { color: #c0c7c0; font-size: 1rem; }

/* Estados de plato en la lista */
.bc-plato-inactive { opacity: 0.55; }
.bc-plato-agotado { background: linear-gradient(0deg, #fff6f5 0%, #fff 80%); border-left: 3px solid #d1332f;  }
.bc-plato-agotado .fw-bold { text-decoration: line-through; text-decoration-color: rgba(209, 51, 47, 0.55); text-decoration-thickness: 2px; }
/* Badge "Agotado" siempre presente en el DOM (solo en cartas tipo carta);
   se muestra cuando el item lleva la clase de estado. Permite que el
   quick-toggle no tenga que añadir/quitar nodos. */
.bc-tag-agotado { display: none; }
.bc-plato-agotado .bc-tag-agotado { display: inline-flex; }

/* Switch Bootstrap delante del nombre del plato — visibilidad en un toque */
.bc-plato-switch { flex-shrink: 0; margin-bottom: 0; padding-left: 2.25em; min-width: 2.5em; }
.bc-plato-switch .form-check-input { width: 2.25em; height: 1.3em; margin-top: 0.15em; cursor: pointer; }

@media (max-width: 420px) {
    .bc-plato-thumb { width: 38px; height: 38px; }
}

/* Precios — el símbolo y los decimales se muestran en menor peso visual,
   manteniendo el entero como protagonista del precio. */
.bc-money-symbol { font-size: 0.78em; font-weight: 400; opacity: 0.75; padding: 0 0.12em; }
.bc-money-decimals { font-size: 0.85em; font-weight: 400; opacity: 0.85; }
.bc-plato-precio { font-variant-numeric: tabular-nums; }

/* Símbolo de moneda en input-groups de edición de precios */
.bc-money-addon { background: #f5f7f5; color: var(--bc-text-muted); font-weight: 500; min-width: 2.4em; justify-content: center; }

/* bc-split-preview — form a la izquierda + iframe de la carta pública a la
   derecha (solo desktop ≥992px). En móvil el aside no se renderiza para no
   castigar el rendimiento del WebView. */
.bc-split-preview { display: block; }
.bc-preview-pane { display: none; }

@media (min-width: 992px) {
    .bc-main:has(.bc-split-preview) { max-width: 1400px; }
    .bc-split-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
    .bc-split-preview > .bc-split-form { min-width: 0; }
    .bc-preview-pane {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 1rem;
        max-height: calc(100dvh - 2rem);
        background: #fff;
        border-radius: 12px;
        box-shadow: var(--bc-shadow-sm);
        overflow: hidden;
        border: 1px solid var(--bc-border);
    }
    .bc-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--bc-border); background: #f8fafb; }
    .bc-preview-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bc-text-muted); font-weight: 700; }
    .bc-preview-actions { display: flex; gap: 0.15rem; }
    .bc-preview-actions .btn-icon { width: 32px; height: 32px; color: var(--bc-text-muted); }
    .bc-preview-actions .btn-icon:hover { color: var(--bc-primary); background: var(--bc-bg-soft); }
    .bc-preview-iframe { flex: 1; min-height: 70dvh; border: 0; background: #fff; }
}

/* bc-fieldset — agrupa campos con título y subtítulo, opcional collapsible */
.bc-fieldset { margin-bottom: 1.25rem; }
.bc-fieldset:last-child { margin-bottom: 0; }
.bc-fieldset-head { margin-bottom: 0.75rem; }
.bc-fieldset-title { display: block; font-size: 0.92rem; font-weight: 700; color: #212529; letter-spacing: -0.005em; }
.bc-fieldset-hint  { display: block; font-size: 0.82rem; color: var(--bc-text-muted); margin-top: 0.15rem; }
.bc-fieldset-body  { display: block; }

.bc-fieldset-collapsible { border: 1px solid var(--bc-border); border-radius: 10px; padding: 0; background: #f8fafb; overflow: hidden; }
.bc-fieldset-collapsible > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    user-select: none;
    position: relative;
}
.bc-fieldset-collapsible > summary::-webkit-details-marker { display: none; }
.bc-fieldset-collapsible > summary::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    font-size: 0.7rem;
    color: var(--bc-text-muted);
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.15s ease;
}
.bc-fieldset-collapsible[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.bc-fieldset-collapsible > .bc-fieldset-body { padding: 0.5rem 1rem 1rem; background: #fff; border-top: 1px solid var(--bc-border); }

/* Sheet de impresión — defaults visibles, resto en <details> "Más opciones" */
.bc-print-langs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bc-print-lang { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.6rem; border: 1px solid var(--bc-border); border-radius: 999px; background: #fff; cursor: pointer; font-size: 0.85rem; line-height: 1; }
.bc-print-lang input { display: none; }
.bc-print-lang img { width: 16px; height: 16px; border-radius: 2px; }
.bc-print-lang:has(input:checked) { background: #f3fbe9; border-color: var(--bc-primary); color: var(--bc-primary-dark); font-weight: 600; }
.bc-print-opt { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; margin-bottom: 0; }
.bc-print-opt .form-check-input { margin-top: 0; flex-shrink: 0; }

.bc-print-section-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bc-text-muted); margin-bottom: 0.5rem; }
.bc-print-opts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 1rem; }
.bc-print-advanced { border: 1px solid var(--bc-border); border-radius: 10px; padding: 0; background: #f8fafb; overflow: hidden; }
.bc-print-advanced > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}
.bc-print-advanced > summary::-webkit-details-marker { display: none; }
.bc-print-advanced > summary::before {
    content: '\f054'; /* fa-chevron-right */
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    font-size: 0.7rem;
    color: var(--bc-text-muted);
    transition: transform 0.15s ease;
}
.bc-print-advanced[open] > summary::before { transform: rotate(90deg); }
.bc-print-advanced-body { padding: 0.5rem 0.9rem 0.9rem; background: #fff; border-top: 1px solid var(--bc-border); }

/* Dropdown del header del detalle — emparejar bc-sheet en lugar del look Bootstrap */
.bc-card .dropdown-menu,
.bc-pane-detail .dropdown-menu {
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 25, 40, 0.14), 0 2px 4px rgba(15, 25, 40, 0.08);
    padding: 0.4rem;
    min-width: 200px;
}
.bc-card .dropdown-menu .dropdown-item,
.bc-pane-detail .dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.92rem;
    color: #212529;
}
.bc-card .dropdown-menu .dropdown-item:hover,
.bc-pane-detail .dropdown-menu .dropdown-item:hover,
.bc-card .dropdown-menu .dropdown-item:focus,
.bc-pane-detail .dropdown-menu .dropdown-item:focus {
    background: var(--bc-bg-soft);
    color: var(--bc-primary-dark);
}

/* Switches destacados en el cabezal del form de plato */
.bc-plato-header-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.4rem; margin-bottom: 0.75rem; }
.bc-plato-header-switches .bc-switch { margin-bottom: 0; padding: 0.55rem 0.75rem; font-size: 0.88rem; }

/* ------ Home stats bars ------ */

/* Home — tarjeta del día con número grande + sparkline. Sin tiles pastel. */
.bc-home-hero { padding: 1.5rem 1.25rem 1.25rem; }
.bc-home-hero-top { display: flex; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; }
.bc-home-hero-num { flex: 1 1 auto; min-width: 0; }
.bc-home-num { font-size: clamp(2.5rem, 11vw, 3.5rem); font-weight: 700; line-height: 1; color: var(--bc-primary-dark); letter-spacing: -0.02em; }
.bc-home-num-label { font-size: 0.95rem; color: var(--bc-text-muted); margin-top: 0.2rem; }
.bc-home-spark-wrap { flex: 0 0 200px; min-width: 0; }
.bc-spark { display: block; width: 100%; height: 48px; }
.bc-delta-up   { color: var(--bc-primary-dark); font-weight: 600; }
.bc-delta-down { color: #b85c1f;                font-weight: 600; }
.bc-delta-flat { color: var(--bc-text-muted); }
.bc-home-meta { font-size: 0.9rem; color: var(--bc-text-muted); margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bc-home-meta strong { color: #212529; font-weight: 700; }
.bc-home-meta-sep { opacity: 0.5; }

.bc-home-details { margin-top: 1.25rem; border-top: 1px solid var(--bc-border); padding-top: 0.75rem; }
.bc-home-details > summary { list-style: none; cursor: pointer; padding: 0.4rem 0; font-weight: 600; font-size: 0.92rem; color: var(--bc-text-muted); display: flex; align-items: center; gap: 0.5rem; user-select: none; }
.bc-home-details > summary::-webkit-details-marker { display: none; }
.bc-home-details > summary::before { content: '\f054'; font-family: 'Font Awesome 5 Pro'; font-weight: 300; font-size: 0.7rem; transition: transform 0.15s ease; }
.bc-home-details[open] > summary::before { transform: rotate(90deg); }
.bc-home-details[open] > summary { color: #212529; }
.bc-home-details-body { padding-top: 0.5rem; }
.bc-home-section { margin-bottom: 0.5rem; }

/* Bars — neutralizadas (color de marca solo en el sparkline del hero). */
.bc-bars-daily, .bc-bars-monthly { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 0 0.25rem 22px; }
.bc-bars-monthly { gap: 6px; }
.bc-bar { flex: 1; background: var(--bc-bg-soft); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; display: flex; align-items: flex-start; justify-content: center; color: var(--bc-primary-dark); font-size: 10px; font-weight: 600; padding-top: 3px; transition: filter 0.12s; }
.bc-bar:hover { filter: brightness(0.95); }
.bc-bars-monthly .bc-bar { flex: 0 0 auto; width: 36px; background: #eef0ee; color: var(--bc-text-muted); }
.bc-bar-val { line-height: 1; }
.bc-bar-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); color: var(--bc-text-muted); font-size: 10px; font-weight: 500; white-space: nowrap; }

/* ------ QR ------ */

.bc-qr-preview { background: #fff; padding: 0.5rem; border: 1px solid var(--bc-border); border-radius: 12px; max-width: 280px; }
.bc-qr-preview img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.bc-qr-url { word-break: break-all; font-size: 0.85rem; }

/* ------ Idiomas grid (legacy, en uso por otros sitios) ------ */

.bc-idiomas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
.bc-idioma-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--bc-border); border-radius: 10px; background: #fff; cursor: pointer; font-size: 0.88rem; user-select: none; transition: background 0.12s, border-color 0.12s; }
.bc-idioma-check img { width: 22px; height: 22px; border-radius: 3px; flex-shrink: 0; }
.bc-idioma-check input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 2px solid #d0d7d0; border-radius: 4px; position: relative; flex-shrink: 0; cursor: pointer; }
.bc-idioma-check input[type="checkbox"]:checked { background: var(--bc-primary); border-color: var(--bc-primary); }
.bc-idioma-check input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 1px; left: 4px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bc-idioma-check:has(input:checked) { background: #f3fbe9; border-color: var(--bc-primary); }

/* ------ Idiomas tabla (Ajustes/Idiomas) ------ */

.bc-idiomas-table-wrap { background: #fff; border: 1px solid var(--bc-border); border-radius: var(--bc-radius); overflow: hidden; }
.bc-idiomas-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bc-idiomas-table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.85rem;
    background: #fafbfa;
    border-bottom: 1px solid var(--bc-border);
    text-align: left;
}
.bc-idiomas-table thead th.text-center { text-align: center; }
.bc-idiomas-table tbody tr { border-top: 1px solid #f0f2f0; }
.bc-idiomas-table tbody tr:first-child { border-top: none; }
.bc-idiomas-table tbody td { padding: 0.55rem 0.85rem; vertical-align: middle; }
.bc-idiomas-name { display: flex; align-items: center; gap: 0.55rem; }
.bc-idiomas-name img { width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0; }
.bc-idiomas-preview-btn { display: inline-flex; align-items: center; gap: 0.55rem; background: transparent; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.bc-idiomas-preview-btn:hover { color: var(--bc-primary-dark); }
.bc-idiomas-preview-btn:focus-visible { outline: 2px solid var(--bc-primary); outline-offset: 2px; border-radius: 4px; }
.bc-idiomas-table input[type="checkbox"] {
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #d0d7d0;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s, border-color 0.12s;
    margin: 0;
    vertical-align: middle;
}
.bc-idiomas-table input[type="checkbox"]:checked { background: var(--bc-primary); border-color: var(--bc-primary); }
.bc-idiomas-table input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bc-idiomas-table input[type="checkbox"]:disabled { opacity: 0.35; cursor: not-allowed; }

/* En pantallas estrechas mostramos el header corto "Trad. auto" para que las
   tres columnas quepan sin truncarse. */
.bc-idiomas-th-short { display: none; }
@media (max-width: 480px) {
    .bc-idiomas-table thead th { padding: 0.5rem 0.45rem; font-size: 0.62rem; }
    .bc-idiomas-table tbody td { padding: 0.5rem 0.45rem; }
    .bc-idiomas-th-full { display: none; }
    .bc-idiomas-th-short { display: inline; }
}

/* ------ Horarios del menú ------ */

.bc-hora-days { display: flex; flex-direction: column; gap: 0.5rem; }
.bc-hora-day { border: 1px solid var(--bc-border); border-radius: 10px; padding: 0.65rem 0.85rem; background: #fff; }
.bc-hora-day-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.bc-hora-day-header strong { font-size: 0.95rem; }
.bc-hora-slots { display: flex; flex-direction: column; gap: 0.35rem; }
.bc-hora-slot { display: flex; align-items: center; gap: 0.4rem; }
.bc-hora-slot .form-control { flex: 1; }
.bc-hora-sep { color: var(--bc-text-muted); }
.bc-hora-del { flex-shrink: 0; padding: 0.25rem 0.55rem; }

/* ------ Formatos del plato ------ */

.bc-formato-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.bc-formato-row .bc-formato-nombre { flex: 2; }
.bc-formato-row .bc-formato-precio-wrap { flex: 1; max-width: 140px; width: auto; }
.bc-formato-row .bc-formato-precio-wrap .bc-formato-precio { flex: 1 1 auto; }
.bc-formato-row .bc-formato-del { flex-shrink: 0; padding: 0.25rem 0.55rem; }

/* ------ Diseño ------ */

.bc-estab-image { border: 1px solid var(--bc-border); border-radius: 10px; padding: 0.75rem; background: #fafbfa; }
.bc-estab-image-preview { width: 100%; max-height: 180px; object-fit: contain; border-radius: 6px; display: block; background: #fff; }
.bc-estab-image-empty { display: flex; align-items: center; justify-content: center; padding: 1.5rem 0.5rem; color: var(--bc-text-muted); border: 2px dashed var(--bc-border); border-radius: 8px; background: #fff; }
.bc-estab-image-empty i { font-size: 1.4rem; opacity: 0.4; }

.bc-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
.bc-tpl-option { display: block; border: 2px solid var(--bc-border); border-radius: 10px; padding: 0.5rem; cursor: pointer; background: #fff; text-align: center; transition: border-color 0.12s, background 0.12s; user-select: none; }
.bc-tpl-option:hover { border-color: #c3dda7; }
.bc-tpl-option.active, .bc-tpl-option:has(input:checked) { border-color: var(--bc-primary); background: #f3fbe9; }
.bc-tpl-option input[type="radio"] { display: none; }
.bc-tpl-preview { height: 110px; border-radius: 6px; margin-bottom: 0.35rem; background-size: cover; background-position: center; background-color: #eee; }
.bc-tpl-preview-1 { background: linear-gradient(180deg, #fff 0%, #f8fafb 55%, #e5eaef 100%); position: relative; }
.bc-tpl-preview-1::before { content: ''; position: absolute; top: 18%; left: 12%; right: 12%; height: 4px; background: #333; border-radius: 2px; }
.bc-tpl-preview-1::after { content: ''; position: absolute; top: 34%; left: 12%; width: 56%; height: 3px; background: #999; border-radius: 2px; box-shadow: 0 10px 0 #999, 0 22px 0 #999, 0 34px 0 #ccc, 0 46px 0 #ccc; }
.bc-tpl-preview-2 { background: #fff; position: relative; }
.bc-tpl-preview-2::before { content: ''; position: absolute; left: 12%; right: 12%; top: 15%; bottom: 15%; background: linear-gradient(90deg, var(--bc-primary) 0 48%, transparent 48%) top left / 100% 22% no-repeat, linear-gradient(90deg, var(--bc-accent-1) 0 48%, transparent 48%) bottom left / 100% 22% no-repeat, linear-gradient(90deg, transparent 52%, var(--bc-accent-2) 52% 100%) top right / 100% 22% no-repeat, linear-gradient(90deg, transparent 52%, var(--bc-primary) 52% 100%) bottom right / 100% 22% no-repeat; border-radius: 4px; }
.bc-tpl-preview-3 { background: radial-gradient(circle at 20% 20%, #ffd26a 0 28%, transparent 30%), radial-gradient(circle at 80% 30%, #ff7a7a 0 24%, transparent 26%), radial-gradient(circle at 30% 80%, #84d185 0 26%, transparent 28%), linear-gradient(135deg, #fff 0%, #f6faf3 100%); }
.bc-tpl-label { font-size: 0.85rem; font-weight: 500; }

/* ------ Chooser tipo de carta/menú (nueva carta) ------ */
.bc-type-chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.bc-type-chooser-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1rem 0.75rem;
    border: 2px solid var(--bc-border);
    border-radius: 12px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.bc-type-chooser-card:hover { border-color: var(--bc-primary); background: #f3fbe9; }
.bc-type-chooser-card:active { transform: scale(0.97); }
.bc-type-chooser-card i { font-size: 1.6rem; color: var(--bc-primary); }
.bc-type-chooser-card strong { font-size: 1rem; color: var(--bc-primary-dark); }
.bc-type-chooser-card small { font-size: 0.78rem; color: var(--bc-text-muted); line-height: 1.3; }

/* ------ Vista dividida (desktop master-detail) ------
   Solo en escritorio (≥992px): cuando estás en /menu/{id}, la lista de cartas
   queda a la izquierda y el detalle a la derecha — "como dos móviles uno al
   lado del otro". En móvil/tablet la lista pane se oculta y solo se ve el
   detalle, igual que antes. */
@media (min-width: 992px) {
    .bc-main:has(.bc-split) { max-width: 1100px; }
    .bc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
    .bc-split-pane { display: flex; flex-direction: column; min-width: 0; position: relative; }
    /* La lista scrollea independiente (sticky) para que siempre esté visible
       mientras el usuario navega el detalle. El detalle fluye con la página
       como antes — su FAB sigue siendo position: fixed. */
    .bc-pane-list {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100dvh - 3rem);
        overflow-y: auto;
        padding-right: 0.25rem;
    }
    /* Ambos FABs en split usan sticky + align-self: flex-end → quedan
       alineados con el borde derecho de su card (no del viewport). */
    .bc-split .bc-fab { position: sticky; bottom: 1rem; right: auto; align-self: flex-end; margin-top: 1.5rem; }

    /* Items de la lista en split: hover state para señalar clickabilidad,
       y transición suave entre estados normal / hover / activo. */
    .bc-split .bc-pane-list .bc-list-item {
        transition: background 0.15s ease, box-shadow 0.15s ease;
        cursor: pointer;
    }
    .bc-split .bc-pane-list .bc-list-item:hover {
        background: rgba(31, 162, 0, 0.18);
        box-shadow: var(--bc-shadow-sm), 0 0 0 1px rgba(31, 162, 0, 0.18);
    }
    /* Carta actualmente abierta: anillo verde via box-shadow inset (respeta
       border-radius, a diferencia del outline) + tono más saturado que la
       base para que destaque sobre el resto de items. */
    .bc-split .bc-pane-list .bc-list-item.bc-pane-active {
        background: rgba(31, 162, 0, 0.22);
        box-shadow: var(--bc-shadow-sm), inset 0 0 0 2px var(--bc-primary);
    }
    .bc-split .bc-pane-list .bc-list-item.bc-pane-active:hover {
        background: rgba(31, 162, 0, 0.3);
    }

    /* El enlace "← Cartas" del detalle es redundante en split (la lista ya
       está a la izquierda); lo escondemos para no añadir ruido visual.
       Como además es el primer child del card del header del menú, cuando
       desaparece dejamos sin margen el d-flex siguiente para que el h4 no
       cuelgue con un mt-2 perdido. */
    .bc-split .bc-pane-detail a[href="#/menus"] { display: none; }
    .bc-split .bc-pane-detail .bc-card:first-child > .d-flex.mt-2 { margin-top: 0 !important; }
}
/* Por debajo del breakpoint la lista nunca debe verse (la pintamos solo en
   desktop, pero red de seguridad por si el usuario hace resize sin recargar). */
@media (max-width: 991.98px) {
    .bc-split-pane.bc-pane-list { display: none; }
}