/* =====================================================================
   dtp-ui.css — Design System global DigitalTiendaPro (2026)
   ---------------------------------------------------------------------
   Capa de modernización visual cargada desde _Layout: aplica a catálogo,
   panel admin, reportes, turnos y ruleta para que todos los módulos
   compartan la misma identidad (radios, sombras, foco, botones, forms,
   modales y popups SweetAlert).

   Reglas de la capa:
   - Solo moderniza componentes NO configurables por el usuario.
   - No pisa los estilos premium del catálogo (EstilosTarjetasPro usa
     !important y especificidad mayor: gana siempre que corresponde).
   - Performance hosting compartido: solo transiciones de transform /
     box-shadow / color, cero blur, cero filtros, cero animaciones
     permanentes, un único request (cacheado 30 días).
   ===================================================================== */

:root {
    /* Tokens de identidad */
    --ui-primary: #2563eb;
    --ui-primary-2: #1d4ed8;
    --ui-success: #059669;
    --ui-success-2: #047857;
    --ui-danger: #dc2626;
    --ui-danger-2: #b91c1c;
    --ui-warning: #d97706;
    --ui-text: #111827;
    --ui-text-soft: #6b7280;
    --ui-border: #e5e7eb;
    --ui-border-strong: #d1d5db;
    --ui-radius: 14px;
    --ui-radius-sm: 10px;
    --ui-radius-lg: 18px;
    --ui-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --ui-shadow-2: 0 2px 4px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .10);
    --ui-shadow-3: 0 8px 12px rgba(16, 24, 40, .08), 0 20px 40px rgba(16, 24, 40, .14);
    --ui-ring: 0 0 0 3px rgba(37, 99, 235, .22);
    --ui-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------
   EXPERIENCIA TÁCTIL TIPO APP
   - Sin flash gris al tocar (tap-highlight).
   - touch-action: manipulation elimina el retraso de doble-tap zoom
     en elementos interactivos → respuesta táctil inmediata.
   ------------------------------------------------------------------- */
button, .btn, a, label, select, input, textarea,
[role="button"], .pill, .swal2-styled {
    -webkit-tap-highlight-color: transparent;
}

button, .btn, a, .pill, [role="button"], .swal2-styled {
    touch-action: manipulation;
}

/* Anillo de foco accesible y consistente (solo teclado, no clicks) */
.btn:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

/* Scrollbars finos y neutros (detalle SaaS, costo cero) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .45) transparent;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .40);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .65);
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* =====================================================================
   BOTONES BOOTSTRAP → 2026
   Geometría, peso tipográfico, micro-interacción (lift + press) y
   sombras coherentes. Los colores semánticos se refinan, no se cambian.
   ===================================================================== */
.btn {
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s var(--ui-ease), box-shadow .15s var(--ui-ease),
                background-color .15s var(--ui-ease), border-color .15s var(--ui-ease),
                color .15s var(--ui-ease);
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0) scale(.985);
    }

    .btn:disabled, .btn.disabled {
        transform: none;
    }

.btn-primary {
    background: linear-gradient(180deg, var(--ui-primary) 0%, var(--ui-primary-2) 100%);
    border-color: var(--ui-primary-2);
    box-shadow: var(--ui-shadow-1), inset 0 1px 0 rgba(255, 255, 255, .18);
}

    .btn-primary:hover, .btn-primary:focus {
        background: linear-gradient(180deg, #3b76f0 0%, var(--ui-primary) 100%);
        border-color: var(--ui-primary-2);
        box-shadow: var(--ui-shadow-2), inset 0 1px 0 rgba(255, 255, 255, .18);
    }

.btn-success {
    background: linear-gradient(180deg, var(--ui-success) 0%, var(--ui-success-2) 100%);
    border-color: var(--ui-success-2);
    box-shadow: var(--ui-shadow-1), inset 0 1px 0 rgba(255, 255, 255, .16);
}

    .btn-success:hover, .btn-success:focus {
        background: linear-gradient(180deg, #0ba776 0%, var(--ui-success) 100%);
        border-color: var(--ui-success-2);
        box-shadow: var(--ui-shadow-2), inset 0 1px 0 rgba(255, 255, 255, .16);
    }

.btn-danger {
    background: linear-gradient(180deg, var(--ui-danger) 0%, var(--ui-danger-2) 100%);
    border-color: var(--ui-danger-2);
    box-shadow: var(--ui-shadow-1), inset 0 1px 0 rgba(255, 255, 255, .14);
}

    .btn-danger:hover, .btn-danger:focus {
        background: linear-gradient(180deg, #e4393b 0%, var(--ui-danger) 100%);
        border-color: var(--ui-danger-2);
    }

.btn-secondary {
    background: #f3f4f6;
    border-color: var(--ui-border-strong);
    color: #374151;
}

    .btn-secondary:hover, .btn-secondary:focus {
        background: #e5e7eb;
        border-color: #9ca3af;
        color: var(--ui-text);
    }

.btn-outline-secondary {
    border-color: var(--ui-border-strong);
    color: #374151;
}

    .btn-outline-secondary:hover {
        background: #f3f4f6;
        border-color: #9ca3af;
        color: var(--ui-text);
    }

/* =====================================================================
   FORMULARIOS — inputs limpios con foco visible
   ===================================================================== */
.form-control, .form-select {
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-border-strong);
    transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--ui-primary);
        box-shadow: var(--ui-ring);
    }

.form-check-input {
    border-color: var(--ui-border-strong);
}

    .form-check-input:checked {
        background-color: var(--ui-primary);
        border-color: var(--ui-primary);
    }

    .form-check-input:focus {
        border-color: var(--ui-primary);
        box-shadow: var(--ui-ring);
    }

input[type="checkbox"], input[type="radio"], input[type="range"], progress {
    accent-color: var(--ui-primary);
}

input[type="color"].form-control {
    min-height: 44px;
    padding: 4px 6px;
    cursor: pointer;
}

/* =====================================================================
   CARDS / MODALES / TABLAS / BADGES / ALERTS
   ===================================================================== */
.card {
    border-radius: var(--ui-radius);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-1);
}

.modal-content {
    border-radius: var(--ui-radius-lg);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-3);
}

.modal-header {
    border-bottom-color: var(--ui-border);
}

.modal-footer {
    border-top-color: var(--ui-border);
}

.table > thead th {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ui-text-soft);
    border-bottom-width: 1px;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(37, 99, 235, .045);
}

.badge {
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
}

.alert {
    border-radius: var(--ui-radius);
}

.accordion-button {
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
}

.pagination .page-link {
    border-radius: var(--ui-radius-sm);
    margin: 0 2px;
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.pagination .page-item.active .page-link {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

/* =====================================================================
   SWEETALERT2 → 2026
   Todos los diálogos del sistema (carrito, checkout, avisos, admin)
   comparten geometría y botones modernos. Los popups con tema propio
   (.popup-neon, etc.) usan !important y conservan su diseño.
   ===================================================================== */
.swal2-popup {
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-3) !important;
}

.swal2-popup.swal2-toast {
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: var(--ui-shadow-2) !important;
}

.swal2-title {
    color: var(--ui-text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.swal2-html-container {
    color: #374151;
}

/* Botones de SweetAlert: mismos tokens que .btn */
.swal2-styled {
    border-radius: var(--ui-radius-sm) !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    min-height: 44px;
    transition: transform .15s var(--ui-ease), box-shadow .15s var(--ui-ease), filter .15s var(--ui-ease) !important;
}

    .swal2-styled:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

    .swal2-styled:active {
        transform: scale(.985);
    }

.swal2-styled.swal2-confirm {
    background: linear-gradient(180deg, var(--ui-primary) 0%, var(--ui-primary-2) 100%) !important;
    box-shadow: var(--ui-shadow-1), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.swal2-styled.swal2-cancel {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid var(--ui-border-strong) !important;
}

.swal2-styled.swal2-deny {
    background: linear-gradient(180deg, var(--ui-danger) 0%, var(--ui-danger-2) 100%) !important;
}

.swal2-styled:focus {
    box-shadow: var(--ui-ring) !important;
}

/* Input dentro de SweetAlert (comentarios de producto, etc.) */
.swal2-input, .swal2-textarea, .swal2-select {
    border-radius: var(--ui-radius-sm) !important;
    border: 1.5px solid var(--ui-border-strong) !important;
    box-shadow: none !important;
    transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease) !important;
}

    .swal2-input:focus, .swal2-textarea:focus {
        border-color: var(--ui-primary) !important;
        box-shadow: var(--ui-ring) !important;
    }

/* Mobile: el diálogo ocupa el ancho útil con márgenes de app y los
   botones crecen a tap-target completo. Evita scroll-chaining con la
   página de fondo (sensación nativa). */
.swal2-container {
    overscroll-behavior: contain;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

@media (max-width: 576px) {
    .swal2-popup:not(.swal2-toast):not(.popup-neon) {
        width: calc(100vw - 20px) !important;
    }

    .swal2-actions {
        width: 100%;
        gap: 8px;
    }

    .swal2-styled {
        flex: 1 1 auto;
        min-height: 48px;
    }
}

/* =====================================================================
   ACCESIBILIDAD — respeta reduce-motion en toda la capa
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .btn, .swal2-styled, .form-control, .form-select,
    .swal2-input, .swal2-textarea {
        transition: none !important;
    }

        .btn:hover, .btn:active, .swal2-styled:hover, .swal2-styled:active {
            transform: none !important;
        }
}