/* =====================================================
   CUARTO DE MILLA — THEME V2 "Showroom"
   Capa de diseño sobre styles.css: profundidad, brillo
   y componentes nuevos (calendario sábados, chips, badges)
   ===================================================== */

/* --- Fondo con profundidad: gradiente + resplandores dorados --- */
body {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(212,175,55,0.07), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(139,26,26,0.08), transparent 55%),
        linear-gradient(180deg, #0d0d0f 0%, #0a0a0a 40%, #0c0b08 100%);
    background-attachment: fixed;
}

/* --- Header con línea de luz --- */
#main-header {
    border-bottom: 1px solid rgba(212,175,55,0.25);
    box-shadow: 0 1px 0 rgba(212,175,55,0.08), 0 10px 30px rgba(0,0,0,0.5);
}

/* --- Títulos de sección con acento --- */
main h2.gold-text {
    position: relative;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
}
main h2.gold-text::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 64px; height: 3px;
    border-radius: 3px;
    background: var(--gold-gradient);
    box-shadow: 0 0 12px rgba(212,175,55,0.6);
}

/* --- Tarjetas de producto: vidrio + glow --- */
.product-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 45%, rgba(212,175,55,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
}
.product-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(212,175,55,0.7);
    box-shadow: 0 18px 44px rgba(0,0,0,0.6), 0 0 24px rgba(212,175,55,0.18);
}
.product-img { border-bottom: 1px solid rgba(212,175,55,0.15); }

/* --- Badges de producto --- */
.badge-restock, .badge-new {
    position: absolute;
    top: 1rem; right: 1rem;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.badge-restock { background: rgba(100,181,246,0.18); color: #64B5F6; border: 1px solid #64B5F6; }
.badge-new     { background: rgba(212,175,55,0.18);  color: var(--primary-gold); border: 1px solid var(--primary-gold); }

/* --- Botones: sheen + relieve --- */
.btn-premium {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(212,175,55,0.25), inset 0 1px 0 rgba(255,255,255,0.45);
    border-radius: 8px;
}
.btn-premium::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}
.btn-premium:hover::after { left: 130%; }
.btn-outline { border-radius: 8px; }
.btn-outline:hover { background: rgba(212,175,55,0.1); box-shadow: 0 0 14px rgba(212,175,55,0.2); }

/* --- Inputs más ricos --- */
.form-group input, .filters input, .filters select, select, textarea {
    border-radius: 8px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-group input:focus, .filters input:focus, textarea:focus {
    border-color: var(--primary-gold) !important;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15), 0 0 18px rgba(212,175,55,0.12) !important;
}
/* Sin flechitas en inputs numéricos (escritura más limpia) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* --- Cards y tablas del admin --- */
.admin-card, .auth-card, .orders-detail-container {
    background: linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 55%, rgba(212,175,55,0.035));
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    padding: 1.5rem;
}
.admin-item {
    border-radius: 12px;
    border: 1px solid rgba(212,175,55,0.18);
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-item:hover {
    transform: translateX(4px);
    border-color: rgba(212,175,55,0.5);
    box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
table tbody tr:hover { background: rgba(212,175,55,0.05); }

/* --- Tabs del admin estilo píldora --- */
.admin-tabs {
    gap: 0.5rem;
    border-bottom: none;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.03);
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(212,175,55,0.15);
}
.admin-tab-btn {
    border-radius: 8px;
    padding: 0.55rem 1rem;
    position: relative;
}
.admin-tab-btn.active {
    background: var(--gold-gradient);
    color: #000;
    box-shadow: 0 4px 14px rgba(212,175,55,0.35);
    font-weight: 800;
}

/* --- Badge de notificación (autorizaciones pendientes) --- */
.notif-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 10px;
    background: #ff4d4d;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(255,77,77,0.7);
    animation: notif-pulse 1.6s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes notif-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* --- Mini-tabs (modales) --- */
.mini-tab {
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 8px;
    background: transparent;
    color: var(--primary-gold);
    cursor: pointer;
    transition: all 0.2s ease;
}
.mini-tab.active {
    background: var(--gold-gradient);
    color: #000;
    font-weight: 700;
}

/* --- CALENDARIO SOLO-SÁBADOS --- */
.sat-calendar {
    position: absolute;
    z-index: 3000;
    background: #16151a;
    border: 1px solid rgba(212,175,55,0.45);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.75), 0 0 26px rgba(212,175,55,0.12);
    padding: 1rem;
    width: 300px;
    animation: modalIn 0.25s ease;
}
.sat-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.sat-cal-header strong {
    color: var(--primary-gold);
    font-family: var(--font-header);
    font-size: 0.9rem;
    text-transform: capitalize;
}
.sat-cal-nav {
    background: rgba(212,175,55,0.12);
    border: 1px solid rgba(212,175,55,0.4);
    color: var(--primary-gold);
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}
.sat-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}
.sat-cal-grid .dow {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 4px 0;
}
.sat-cal-grid .dow.sat-dow { color: var(--primary-gold); font-weight: 800; }
.sat-cal-day {
    padding: 7px 0;
    font-size: 0.8rem;
    border-radius: 8px;
    color: rgba(255,255,255,0.22);
    cursor: default;
    user-select: none;
}
.sat-cal-day.saturday {
    color: var(--primary-gold);
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.45);
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(212,175,55,0.15);
}
.sat-cal-day.saturday:hover { background: var(--gold-gradient); color: #000; }
.sat-cal-day.selected { background: var(--gold-gradient); color: #000; }
.sat-cal-day.past { opacity: 0.3; pointer-events: none; }

/* --- CHIPS DE MESES (rango estimado) --- */
.month-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 0.4rem;
}
.month-chip {
    padding: 0.5rem 0.2rem;
    text-align: center;
    font-size: 0.72rem;
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: capitalize;
}
.month-chip:hover { border-color: var(--primary-gold); color: var(--primary-gold); }
.month-chip.in-range {
    background: rgba(212,175,55,0.18);
    color: var(--primary-gold);
    border-color: var(--primary-gold);
}
.month-chip.edge {
    background: var(--gold-gradient);
    color: #000;
    font-weight: 800;
}

/* --- Caja de comprobante de transferencia --- */
.receipt-box {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed rgba(212,175,55,0.5);
    border-radius: 12px;
    background: rgba(212,175,55,0.05);
    text-align: center;
}
.receipt-box.done {
    border-style: solid;
    border-color: #2ecc71;
    background: rgba(46,204,113,0.07);
}

/* --- KPIs con vida --- */
#admin-tab-content .admin-card[style*="text-align:center"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#admin-tab-content .admin-card[style*="text-align:center"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.55), 0 0 18px rgba(212,175,55,0.15);
}

/* --- Footer --- */
footer { border-top: 1px solid rgba(212,175,55,0.15); }

/* --- Scroll horizontal amable en tablas admin (móvil) --- */
.table-container { overflow-x: auto; border-radius: 10px; }

/* =====================================================
   MOBILE FIRST-AID — Optimización para celular
   ===================================================== */
@media (max-width: 768px) {
    html { font-size: 15px; }
    .container { padding: 0 1rem; }

    /* Header compacto */
    #main-header { padding: 0.8rem 0; }
    #main-header .logo-container span { font-size: 1.05rem !important; }
    .nav-actions { gap: 0.4rem; }
    .nav-actions button { padding: 0.45rem 0.7rem; font-size: 0.72rem; }
    #user-name { font-size: 0.75rem; }

    /* Secciones y títulos */
    main h2.gold-text { font-size: 1.35rem; }
    main section { padding-top: 1rem; }

    /* Auth */
    .auth-card { padding: 1.5rem; margin: 1.5rem auto; }

    /* Tienda: 2 columnas compactas */
    .store-header { padding-top: 1.5rem; margin-bottom: 1.5rem; }
    .weekly-balance-preview { width: 100%; align-items: center; padding: 0.8rem 1rem; }
    .filters { margin-bottom: 1.5rem; gap: 0.6rem; }
    .filters input, .filters select { padding: 0.7rem; font-size: 0.85rem; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-bottom: 2.5rem; }
    .product-img { height: 125px; }
    .product-info { padding: 0.8rem; }
    .product-info h3 { font-size: 0.82rem !important; }
    .product-price { font-size: 1rem; }
    .product-info .buy-btn { padding: 0.6rem; font-size: 0.72rem; }
    .badge-agotado, .badge-restock, .badge-new { font-size: 0.55rem; padding: 0.2rem 0.5rem; top: 0.5rem; right: 0.5rem; }

    /* Modales a pantalla completa amable */
    .modal-content { padding: 1.4rem; max-height: 92vh; overflow-y: auto; border-radius: 16px; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions button { width: 100%; }

    /* Admin */
    .admin-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab-btn { white-space: nowrap; font-size: 0.78rem; padding: 0.5rem 0.8rem; }
    .admin-header { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .admin-header > div { display: flex; flex-direction: column; gap: 0.5rem !important; }
    .admin-header button { width: 100%; }
    .admin-item { flex-wrap: wrap; padding: 1rem; }
    .admin-actions { width: 100%; margin-top: 0.5rem; justify-content: space-between; }
    .admin-card { padding: 1.1rem; }

    /* Tablas: scroll + letra chica */
    .table-container table { min-width: 640px; }
    table th, table td { font-size: 0.72rem !important; padding: 0.5rem 0.5rem !important; }
    .orders-detail-container { padding: 1rem; }
    .orders-table { min-width: 520px; }

    /* Cuenta semanal */
    #payment-confirmation-box, #delivery-selection-box { padding: 1rem !important; }

    /* Calendario sábados centrado en pantalla */
    .sat-calendar { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(300px, 92vw); }
    .month-chips { grid-template-columns: repeat(3, 1fr); }

    /* Modo Julio: botones grandotes para dedos */
    .julio-card button { padding: 1rem 0.5rem !important; font-size: 0.9rem !important; }
}

@media (max-width: 380px) {
    .products-grid { grid-template-columns: 1fr; }
    .product-img { height: 170px; }
}

/* --- Banner de instalación PWA --- */
.install-banner {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 5000;
    width: min(420px, calc(100vw - 2rem));
    background: linear-gradient(160deg, #1c1a15, #141414);
    border: 1px solid var(--primary-gold);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    box-shadow: 0 16px 44px rgba(0,0,0,0.7), 0 0 24px rgba(212,175,55,0.2);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    animation: bannerUp 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes bannerUp { from { transform: translate(-50%, 120%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.install-banner img { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.install-banner .ib-text { flex: 1; min-width: 0; }
.install-banner .ib-text strong { color: var(--primary-gold); font-size: 0.85rem; display: block; }
.install-banner .ib-text small { color: var(--text-muted); font-size: 0.7rem; line-height: 1.3; display: block; }
.install-banner .ib-close {
    position: absolute; top: 6px; right: 10px;
    background: none; border: none; color: var(--text-muted);
    font-size: 1rem; cursor: pointer;
}

/* =====================================================
   SAFE AREA — App instalada (notch / reloj del iPhone)
   El header baja para no chocar con la barra de estado
   ===================================================== */
#main-header {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    padding-bottom: 1rem;
}
/* Solo cuando corre como app instalada: header más prominente */
@media (display-mode: standalone) {
    #main-header {
        padding-top: calc(0.8rem + env(safe-area-inset-top, 24px));
        background: rgba(10, 10, 10, 0.95);
    }
    #main-header .logo-container span { font-size: 1.25rem !important; }
    /* El splash respeta el notch en su contenido */
    .splash-panel { padding-top: env(safe-area-inset-top, 0px); }
}

/* =====================================================
   MODALES CON SCROLL — nunca más contenido cortado
   ===================================================== */
.modal-overlay {
    overflow-y: auto !important;
    padding: 1.5rem 1rem !important;
    align-items: flex-start !important;
}
.modal-content {
    margin: auto;
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#bulk-import-modal > div, #reserve-modal > div {
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto;
}

/* --- Visor de contraseña (ojito) --- */
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 2.8rem !important; }
.pass-toggle {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--primary-gold);
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0.3rem;
    line-height: 1;
    opacity: 0.75;
}
.pass-toggle:hover { opacity: 1; }