/* ==========================================================================
   NÁPOLES SHOP CORE - PWA DASHBOARD CSS (ESTILO CARDS MODERNAS)
   ========================================================================== */

/* 1. Contenedor Principal (Mobile First) */
.nsc-pwa-container {
    max-width: 600px; /* Ancho máximo tipo celular */
    margin: 20px auto;
    padding: 0 15px 120px 15px; /* Padding bottom para la barra sticky */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #ffffff; /* CAMBIO: Fondo completamente blanco puro */
}

/* 2. Títulos y Cabeceras */
.nsc-pwa-titles {
    text-align: left;
    margin-bottom: 25px;
    padding-left: 5px;
}

.nsc-pwa-titles h2 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #2c3e50;
}

.nsc-pwa-titles p {
    font-size: 15px;
    margin: 0;
    color: #7f8c8d;
    line-height: 1.4;
}

/* 3. Indicadores de Steps (Mapa Superior) */
.nsc-pwa-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 15px 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* CAMBIO: Sombra más fuerte y limpia */
}

.nsc-pwa-step {
    font-size: 13px;
    font-weight: 600;
    color: #b0bec5; /* Gris suave por defecto */
    text-align: center;
    flex: 1;
    position: relative;
    cursor: pointer; /* Indicar que se puede volver atrás */
}

.nsc-pwa-step.active {
    color: #F27E03; /* Naranja Nápoles para el activo */
}

/* 4. Grid de Tarjetas (Cards) */
.nsc-packs-grid, .nsc-platos-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móvil */
    gap: 15px;
}

/* 5. Diseño de Tarjeta (Card) */
.nsc-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* CAMBIO: Sombras marcadas en cards */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent; /* CAMBIO: 2px para que el hover/selected resalte mejor */
}

.nsc-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.nsc-card.nsc-card-selected {
    border-color: #F27E03; /* CAMBIO: Borde sólido y color más fuerte */
    background-color: #fffaf5; /* CAMBIO: Fondo ligeramente naranja */
}

/* Info dentro de la card */
.nsc-pack-info {
    flex: 1;
    padding-right: 15px;
}

.nsc-pack-info h3 {
    font-size: 18px;
    margin: 0 0 5px 0;
    font-weight: 700; /* CAMBIO: Más peso para mejor lectura */
    color: #333;
}

.nsc-pack-price {
    font-size: 16px;
    font-weight: 800; /* CAMBIO: Más peso para el precio */
    color: #F27E03;
    margin: 0;
}

/* Badges (Lunes a Viernes, etc.) - Ocultos por defecto según feedback */
.nsc-badge, .nsc-badge-type {
    display: none; 
}

/* 6. Controles de Cantidad (+ / -) */
.nsc-pack-qty {
    display: flex;
    align-items: center;
    background: #f1f3f4;
    border-radius: 30px;
    padding: 2px;
}

.nsc-qty-btn {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    font-size: 20px;
    font-weight: 700;
    color: #F27E03;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
}

.nsc-qty-btn:hover {
    background-color: rgba(242, 126, 3, 0.1);
}

.nsc-qty-input {
    width: 35px;
    border: none;
    background: none;
    text-align: center;
    font-size: 16px;
    font-weight: 700; /* CAMBIO: Input más visible */
    color: #333;
    padding: 0;
    margin: 0;
}

.nsc-qty-input:focus {
    outline: none;
}

/* 7. Step 2 - Menú (Tabs y Contenedor) */
#nsc-container-tabs-menus {
    margin-bottom: 20px;
}

.nsc-pwa-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.nsc-tab-btn {
    flex: 1;
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #7f8c8d;
    padding: 12px;
    border-radius: 30px;
    font-weight: 700; /* CAMBIO: Más peso */
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nsc-tab-btn.active {
    background: #F27E03;
    color: #fff;
    border-color: #F27E03;
    box-shadow: 0 4px 10px rgba(242, 126, 3, 0.3); /* CAMBIO: Sombra en el botón activo */
}

/* NUEVO: Botón especial para agregar extras */
.nsc-tab-extra { 
    border-style: dashed; 
    border-color: #cbd5e0; 
}
.nsc-tab-extra.active { 
    border-style: solid; 
}

/* Imagen del Plato en Card */
.nsc-plato-img-container {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 15px;
    background: #f1f3f4;
    border: 1px solid #eaeaea;
}

.nsc-plato-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 8. Barra Inferior Sticky (Píldora Centrada Flotante) */
.nsc-pwa-bottom-bar-wrapper {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    pointer-events: none; /* No bloquea clics detrás */
    display: flex;
    justify-content: center;
    z-index: 999;
}

.nsc-pwa-bottom-bar {
    pointer-events: auto; /* Reactiva clics en la barra */
    width: 90%;
    max-width: 400px;
    background: #fff;
    padding: 12px 25px;
    border-radius: 50px; /* Estilo píldora */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra pesada para que flote bien */
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nsc-pwa-summary {
    display: flex;
    flex-direction: column;
}

#nsc-summary-text {
    font-size: 13px;
    color: #7f8c8d;
    font-weight: 600; /* CAMBIO: Mejor lectura */
}

#nsc-summary-total {
    font-size: 22px;
    font-weight: 800; /* CAMBIO: Más peso para el total */
    margin: 0;
    color: #333;
}

/* Botón Principal (Siguiente) */
.nsc-btn {
    background: #F27E03;
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 800; /* CAMBIO: Más peso */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.nsc-btn:disabled {
    opacity: 0.5;
    background: #b0bec5;
    cursor: not-allowed;
}

.nsc-btn:not(:disabled):hover {
    background: #d36e02;
}

/* 9. Step 3 - Formulario de Datos */
.nsc-pwa-form-group {
    margin-bottom: 20px; /* CAMBIO: Más separación */
    background: #fff;
    padding: 20px; /* CAMBIO: Más espacio interior */
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* CAMBIO: Sombra oscura y marcada, quita efecto gris */
    border: 1px solid #f1f5f9;
}

.nsc-pwa-form-group label {
    display: block;
    font-size: 15px; /* CAMBIO: Label un poco más grande */
    font-weight: 700; /* CAMBIO: Más peso */
    margin-bottom: 8px;
    color: #2c3e50;
}

.nsc-pwa-input {
    width: 100%;
    padding: 14px 15px; /* CAMBIO: Inputs más altos y cómodos en móvil */
    border: 2px solid #eaeaea; /* CAMBIO: Borde 2px */
    border-radius: 10px; /* CAMBIO: Más curvos */
    font-size: 16px; /* CAMBIO: Evita el zoom automático en iOS */
    background: #fff; /* CAMBIO: Fondo blanco puro */
    font-family: inherit;
    color: #333;
    transition: border-color 0.2s;
}

.nsc-pwa-input:focus {
    outline: none;
    border-color: #F27E03;
}

/* Calendario */
#nsc-calendar-container {
    margin-top: 15px;
    /* Estilos base absorbidos por .nsc-pwa-form-group */
}

/* NUEVO: Textos de advertencia legibles (ej: regla 16:00 hrs) */
.nsc-disclaimer-text { 
    font-size: 14px; 
    color: #e67e22; /* CAMBIO: Naranja oscuro, mucho más visible */
    font-weight: 600; 
    margin-top: 0; 
    margin-bottom: 12px; 
}

/* NUEVO: Estilo para select (Comunas y Bloques) */
.nsc-select { 
    appearance: none; 
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); 
    background-repeat: no-repeat; 
    background-position: right 15px center; 
    background-size: 16px; 
    padding-right: 40px; 
}

/* Ocultar elementos de carga */
.nsc-loading-spinner {
    grid-column: 1 / -1;
    color: #7f8c8d;
    padding: 30px;
    text-align: center;
    font-weight: 600;
}

/* ── Filtros por categoría (Step 2) ── */
.nsc-pwa-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    padding: 4px 2px 12px;
}

.nsc-filtro-btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    flex: 1 1 60px;
    min-width: 52px;
    max-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    cursor: pointer;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nsc-filtro-btn:hover,
.nsc-filtro-btn.active { background: none; }

.nsc-filtro-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #244928;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.18s;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.10));
}

.nsc-filtro-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.nsc-filtro-btn.active .nsc-filtro-icon {
    background: #F27E03;
    filter: drop-shadow(0 3px 8px rgba(242,126,3,0.25));
}

.nsc-filtro-label {
    font-size: 10px;
    font-weight: 600;
    color: #7f8c8d;
    text-align: center;
    line-height: 1.2;
    transition: color 0.18s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.nsc-filtro-btn.active .nsc-filtro-label { color: #F27E03; }

/* ==========================================================================
   PICKER DE FECHA PERSONALIZADO — Solo Domingos
   ========================================================================== */

.nsc-date-picker {
    width: 100%;
    font-family: inherit;
    user-select: none;
}

/* ── Header: flechas + título ── */
.nsc-dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.nsc-dp-nav {
    background: #fff;
    border: 2px solid #eaeaea;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    padding: 0;
    font-family: inherit;
}

.nsc-dp-nav:hover:not(:disabled) {
    border-color: #F27E03;
    color: #F27E03;
}

.nsc-dp-nav:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.nsc-dp-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #2c3e50;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

/* ── Grid de días: 7 columnas ── */
.nsc-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Cabeceras de día de la semana */
.nsc-dp-dow {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #b0bec5;
    padding: 4px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* "Dom" destacado en la cabecera */
.nsc-dp-dow-sunday {
    color: #F27E03;
}

/* Celda vacía (relleno inicial del mes) */
.nsc-dp-empty {
    background: none;
}

/* Celda de día base */
.nsc-dp-cell {
    text-align: center;
    font-size: 0.82rem;
    border-radius: 8px;
    padding: 7px 2px;
    cursor: default;
    font-weight: 600;
}

/* Días deshabilitados (no domingos o domingos pasados) */
.nsc-dp-disabled {
    color: #d5dbe0;
    background: #fafafa;
}

/* Domingos disponibles */
.nsc-dp-sunday {
    color: #F27E03;
    font-weight: 800;
    cursor: pointer;
    background: #fff8f0;
    border: 2px solid #fde0b8;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.nsc-dp-sunday:hover {
    background: #fde0b8;
    box-shadow: 0 2px 8px rgba(242, 126, 3, 0.2);
    transform: scale(1.08);
}

/* Domingo seleccionado */
.nsc-dp-selected {
    background: #F27E03 !important;
    color: #fff !important;
    border-color: #d36e02 !important;
    box-shadow: 0 4px 10px rgba(242, 126, 3, 0.35) !important;
    transform: none !important;
}

/* Separación entre el picker y el select de bloque horario */
.nsc-date-picker + select,
.nsc-date-picker + .nsc-pwa-input,
#nsc_hora_envio {
    margin-top: 20px;
}