/**
 * pei/css/pei.css — LIBRERÍA CSS GLOBAL PEI.
 *
 * ⚠️ ARCHIVO COMPARTIDO por TODAS las peis. Reglas ESTRICTAS:
 *
 * 1. Solo entra código GENERAL reusable por N peis.
 * 2. NO duplicar Bootstrap 5. Si Bootstrap lo cubre → usar Bootstrap directo.
 * 3. Cero contenido app-specific (colores brand app, layouts únicos, overrides
 *    legacy de una sola landing) → van en css/<app>.css de la app.
 *
 * Cargar en cualquier pei:
 *   <link rel="stylesheet" href="https://restaurantesuperin.com/css/pei.css">
 *   (o path relativo si la pei se sirve desde restaurantesuperin.com)
 *
 * Antes de agregar clase acá:
 *   ¿Bootstrap la cubre? → skip.
 *   ¿Otra pei la usaría? → si NO, va en CSS de la app.
 *   ¿Duplicado o variante? → skip.
 *
 * Ver feedback_pei_library_first.md en memoria para regla completa.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * TOKENS — override por pei si necesita re-theme (var(--pei-primary): ...).
 * Bootstrap tiene --bs-* pero pei-* nos deja rebrand sin colisionar.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --pei-primary:      #0d6efd;
    --pei-primary-dark: #0a58ca;
    --pei-primary-soft: rgba(13,110,253,.08);
    --pei-border:       rgba(0,0,0,.06);
    --pei-topbar-h:     51px;
    --pei-secnav-h:     51px;
    /* Sheet/drawer defaults theme-aware (usados por .bottom-sheet cuando la
       peiapp no define --drawer-bg / --text propios). Bootstrap dark theme
       (data-bs-theme="dark") + shorts theme (data-theme="dark") ambos cubiertos. */
    --pei-drawer-bg:    #ffffff;
    --pei-drawer-text:  #212529;
}
[data-bs-theme="dark"], [data-theme="dark"], [data-theme^="dark-"] {
    --pei-drawer-bg:    #1a1d29;
    --pei-drawer-text:  #eaf3ea;
    --pei-border:       rgba(255,255,255,.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-topbar — sticky top con backdrop-filter blur.
 * Bootstrap sticky-top NO tiene blur ni transparencia. Único diferencial.
 * ═══════════════════════════════════════════════════════════════════════════ */
.pei-topbar {
    position: sticky; top: 0; z-index: 500;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pei-border);
    padding: 10px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-pill-group + pei-pill — segmented control compacto.
 * Bootstrap nav-pills existe pero es más grande/heavy. Este es inline compact
 * para switches (moneda, idioma, filtros). Diferencial: inline-flex compact +
 * padding tighter + gap 2px.
 * ═══════════════════════════════════════════════════════════════════════════ */
.pei-pill-group {
    display: inline-flex; gap: 2px;
    background: var(--pei-primary-soft);
    padding: 3px; border-radius: 999px;
}
.pei-pill {
    border: 0; background: transparent;
    padding: 5px 14px; border-radius: 999px;
    font-weight: 600; font-size: 13px; color: #495057;
    cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.pei-pill.active {
    background: var(--pei-primary); color: #fff;
    box-shadow: 0 2px 6px rgba(13,110,253,.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-section-nav — sticky horizontal scroll de anchors.
 * Bootstrap no tiene: horizontal scroll auto sin scrollbar visible + sticky.
 * Ideal para índice de secciones responsive (mobile + desktop mismo layout).
 * ═══════════════════════════════════════════════════════════════════════════ */
.pei-section-nav {
    position: sticky; top: var(--pei-topbar-h); z-index: 490;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pei-border);
    padding: 10px 0;
}
.pei-section-nav-scroll {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 0 1rem;
}
.pei-section-nav-scroll::-webkit-scrollbar { display: none; }
.pei-section-nav-scroll a {
    flex-shrink: 0;
    padding: 6px 14px; border-radius: 999px;
    color: #495057; text-decoration: none;
    font-weight: 600; font-size: 13px;
    border: 1px solid transparent;
    transition: all .15s ease;
}
.pei-section-nav-scroll a:hover { background: var(--pei-primary-soft); color: var(--pei-primary); }
.pei-section-nav-scroll a.active {
    background: var(--pei-primary); color: #fff; border-color: var(--pei-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-grid + pei-list + pei-skeleton — data collection renderers (Pei.list.*).
 * Bootstrap grid (row/col) es rígido; list-group cubre básico. Estos
 * componentes cubren auto-fit + skeleton loaders (bootstrap NO tiene).
 * ═══════════════════════════════════════════════════════════════════════════ */
.pei-grid {
    --pei-grid-gap: 12px;
    --pei-grid-cols: auto-fill;
    display: grid;
    grid-template-columns: repeat(var(--pei-grid-cols), minmax(120px, 1fr));
    gap: var(--pei-grid-gap);
}
.pei-grid-cell { min-width: 0; }

.pei-list { display: flex; flex-direction: column; }
.pei-list-item { padding: .85rem 0; }
.pei-list.pei-list-dividers .pei-list-item + .pei-list-item { border-top: 1px solid var(--pei-border); }
.pei-list-empty { padding: 2rem 1rem; text-align: center; color: #6c757d; font-size: .9rem; }

.pei-skeleton-card, .pei-skeleton-thumb, .pei-skeleton-row {
    background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 75%);
    background-size: 200% 100%;
    animation: peiSkeletonPulse 1.4s ease infinite;
    border-radius: 8px;
}
.pei-skeleton-card { aspect-ratio: 9/16; }
.pei-skeleton-thumb { aspect-ratio: 1/1; }
.pei-skeleton-row { height: 60px; margin-bottom: 8px; }
@keyframes peiSkeletonPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
[data-bs-theme="dark"] .pei-skeleton-card,
[data-bs-theme="dark"] .pei-skeleton-thumb,
[data-bs-theme="dark"] .pei-skeleton-row {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.05) 75%);
    background-size: 200% 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-form — form Pei-consistent (usado en Pei.forms.genericForm/register).
 * Reusa .form-control/.form-select/.form-label/.btn de Bootstrap.
 * Solo agrega spacing consistente + hint style.
 * ═══════════════════════════════════════════════════════════════════════════ */
.pei-form .form-label { margin-bottom: .25rem; }
.pei-form .form-text { margin-top: .2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-header-bar + pei-bottom-tabs — nav reusable (Pei.nav.header / bottomTabs).
 * Bootstrap navbar existe pero es más pesado. pei-header-bar es minimal +
 * sticky + fits pei design tokens. bottom-tabs mobile-first (patrón shorts
 * feed nav) — Bootstrap NO tiene componente bottom tabs nativo.
 * ═══════════════════════════════════════════════════════════════════════════ */
.pei-header-bar {
    position: sticky; top: 0; z-index: 500;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pei-border);
}
.pei-header-left, .pei-header-right { display: flex; align-items: center; gap: 8px; }
.pei-header-title { font-weight: 800; font-size: 1.1rem; letter-spacing: -.3px; color: var(--pei-primary-dark); }
.pei-header-icon-btn {
    position: relative;
    background: transparent; border: 0; padding: 6px 10px;
    font-size: 18px; line-height: 1; cursor: pointer;
    border-radius: 8px; color: #495057;
    transition: background .15s ease;
}
.pei-header-icon-btn:hover { background: var(--pei-primary-soft); }
.pei-header-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #dc3545; color: #fff; border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

.pei-bottom-tabs {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 490;
    display: flex; align-items: stretch;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--pei-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    max-width: 720px; margin: 0 auto;
}
.pei-bottom-tab {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 6px;
    background: transparent; border: 0; cursor: pointer;
    color: #6c757d; font-size: 11px; font-weight: 600;
    transition: color .15s ease; position: relative;
}
.pei-bottom-tab:hover { color: var(--pei-primary); }
.pei-bottom-tab.active { color: var(--pei-primary); }
.pei-bottom-tab-icon { font-size: 20px; line-height: 1; }
.pei-bottom-tab-label { font-size: 10px; letter-spacing: -.1px; }
.pei-bottom-tab-badge {
    position: absolute; top: 4px; right: 20%;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #dc3545; color: #fff; border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

[data-bs-theme="dark"] .pei-header-bar { background: rgba(20,22,30,.94); border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .pei-header-icon-btn { color: #adb5bd; }
[data-bs-theme="dark"] .pei-bottom-tabs { background: rgba(20,22,30,.96); border-top-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .pei-bottom-tab { color: #adb5bd; }

/* ═══════════════════════════════════════════════════════════════════════════
 * .bottom-sheet + .bottom-sheet-backdrop + .drawer-handle — EXTRAÍDO
 * carácter-exacto de css/shorts.css ago-2026 (Fase U5 CSS). Estilos que
 * consume Pei.sheets (extract de shorts.js pushDynamicSheet). Peis distintas
 * a shorts que carguen pei.css tienen sheets funcionales visualmente.
 * Vars: --drawer-bg, --text, --nb-h. Peis nuevas deben definir --drawer-bg
 * y --text en su css (default Bootstrap si no).
 * ═══════════════════════════════════════════════════════════════════════════ */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* max-height escalonado:
       - 80vh   = fallback para browsers viejos (incluye system bar).
       - 80dvh  = altura visible REAL (excluye system bar dinámica/estática en
                  Android moderno). Fix para Samsung A15/S9 donde 80vh dejaba
                  parte inferior detrás de la barra de navegación. */
    max-height: 80vh;
    max-height: 80dvh;
    background: var(--drawer-bg, var(--pei-drawer-bg, #fff));
    color: var(--text, var(--pei-drawer-text, #212529));
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    z-index: 999;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    /* Respeta la barra de navegacion software de Android (botones home/back).
       En celulares con gestos = 0. En celulares con barra clasica = ~48-56dp.
       Combinado con dvh, doble protección contra contenido tapado.
       max() garantiza un mínimo de 12px aunque env() retorne 0 (bug conocido
       en Samsung Internet y Chrome Android viejos que no reportan el inset
       correctamente aún con viewport-fit=cover). */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
}
.bottom-sheet.open { transform: translateY(0); }
.bottom-sheet--above-nav { bottom: var(--nb-h, 0); z-index: 100; }
.bottom-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 998;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
.bottom-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.bottom-sheet-backdrop--above-nav { bottom: var(--nb-h, 0); z-index: 99; }
.bottom-sheet-header { cursor: grab; user-select: none; touch-action: none; }
.drawer-handle {
    cursor: grab; touch-action: none;
    width: 36px; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, .2);
    margin: 10px auto 0;
}
[data-theme="light"] .drawer-handle,
[data-bs-theme="light"] .drawer-handle { background: rgba(0, 0, 0, .2); }

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-sheet — bottom-sheet stack reusable (Pei.sheets.push/pop).
 * Bootstrap offcanvas no cubre stack de N niveles + slide-up + backdrop-blur.
 * ═══════════════════════════════════════════════════════════════════════════ */
.pei-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,.4);
    opacity: 0;
    transition: opacity .24s ease;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.pei-sheet-backdrop.pei-sheet-backdrop-in { opacity: 1; }

.pei-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1051;
    max-height: 90vh;
    background: #fff; color: #212529;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    box-shadow: 0 -8px 32px rgba(0,0,0,.15);
    transform: translateY(100%);
    transition: transform .24s ease;
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.pei-sheet.pei-sheet-in { transform: translateY(0); }
.pei-sheet-sm { max-height: 60vh; }
.pei-sheet-lg { max-height: 95vh; }
/* Tablet+: centrar como modal con ancho limitado. */
@media (min-width: 768px) {
    .pei-sheet { left: 50%; right: auto; transform: translate(-50%, 100%); max-width: 520px; width: 92%; bottom: 5vh; border-radius: 20px; }
    .pei-sheet.pei-sheet-in { transform: translate(-50%, 0); }
    .pei-sheet-lg { max-width: 720px; }
}

.pei-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--pei-border);
    flex-shrink: 0;
}
.pei-sheet-title { font-weight: 700; font-size: 1rem; letter-spacing: -.2px; }
.pei-sheet-close {
    background: transparent; border: 0;
    font-size: 24px; line-height: 1; padding: 0 4px;
    color: #6c757d; cursor: pointer;
}
.pei-sheet-close:hover { color: #212529; }

.pei-sheet-body {
    padding: 16px 20px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.pei-sheet-msg { margin: 0 0 1rem; color: #495057; }
.pei-sheet-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    padding-top: .5rem; border-top: 1px solid var(--pei-border);
    margin-top: 1rem;
}

/* Dark theme opcional — solo si HTML lleva data-bs-theme="dark". */
[data-bs-theme="dark"] .pei-sheet { background: #1a1d29; color: #e9ecef; }
[data-bs-theme="dark"] .pei-sheet-header,
[data-bs-theme="dark"] .pei-sheet-actions { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .pei-sheet-close { color: #adb5bd; }
[data-bs-theme="dark"] .pei-sheet-close:hover { color: #fff; }
[data-bs-theme="dark"] .pei-sheet-msg { color: #adb5bd; }

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-locked-thumb — thumbnail blurred para posts locked (pay-to-view).
 * Usa LockedPosts.renderLockedThumbHtml(). CSS blur = fallback; server-side
 * blur real via media_proxy.php?blur=1 (Fase L4).
 * ═══════════════════════════════════════════════════════════════════════════ */
/* pei-locked-thumb — puede aplicarse como clase adicional sobre .explore-card /
   .profile-post existentes (que ya tienen position:relative + overflow:hidden +
   aspect-ratio). No fuerza aspect-ratio para no colisionar con esos wrappers.
   Blur + candado + chip aplican sobre img child y ::before overlay. */
/* Locked posts placeholder — reemplaza el media completo. Cero exposición
   del original al DOM/network hasta que user paga. Se pinta con aspect-ratio
   heredado del container padre (explore-card, profile-post, slide, feed-card). */
.pei-locked-placeholder {
    width: 100%; height: 100%;
    min-height: 200px;
    aspect-ratio: 9/16;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #1a1d29 0%, #0d1117 100%);
    color: #fff;
    cursor: pointer;
    border-radius: inherit;
    transition: transform .15s ease;
}
.pei-locked-placeholder:hover { transform: scale(1.02); }
.pei-locked-icon { font-size: 48px; opacity: .85; }
.pei-locked-price {
    background: var(--pei-primary, #0d6efd);
    color: #fff;
    padding: 6px 16px; border-radius: 999px;
    font-weight: 700; font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * pei-cta-float — floating fixed CTA bottom-right (WhatsApp button pattern).
 * Bootstrap no tiene componente floating fixed CTA. Único diferencial.
 * Color override por pei (default WhatsApp green — cambiar en el HTML con
 * style="background:#X" o clase custom si otra brand).
 * ═══════════════════════════════════════════════════════════════════════════ */
.pei-cta-float {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    background: #25d366; color: #fff;
    padding: 12px 20px; border-radius: 999px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    text-decoration: none; font-weight: 700;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: transform .15s ease;
}
.pei-cta-float:hover { transform: translateY(-2px); color: #fff; }
.pei-cta-float i { font-size: 1.3em; }