/* ==========================================================
   WalletPuntos - Capa visual Claymorfismo
   Solo diseño: no modifica PHP, formularios, SMS, Wallet ni lógica.
   ========================================================== */
:root {
    --clay-bg: #f8efe3;
    --clay-bg-2: #fff7ee;
    --clay-card: rgba(255, 250, 242, 0.88);
    --clay-card-solid: #fff8ee;
    --clay-text: #2f2119;
    --clay-muted: #8b7666;
    --clay-line: rgba(125, 84, 50, 0.13);
    --clay-primary: #f2a31f;
    --clay-primary-dark: #d87d00;
    --clay-success: #22a75a;
    --clay-info: #347dd1;
    --clay-purple: #8b45c9;
    --clay-danger: #d84b45;
    --clay-warning-soft: #fff1ce;
    --clay-shadow: 16px 18px 34px rgba(137, 89, 45, 0.16), -10px -10px 26px rgba(255, 255, 255, 0.86);
    --clay-shadow-sm: 10px 12px 22px rgba(137, 89, 45, 0.13), -7px -7px 18px rgba(255, 255, 255, 0.82);
    --clay-shadow-xs: 6px 8px 16px rgba(137, 89, 45, 0.11), -5px -5px 13px rgba(255, 255, 255, 0.82);
    --clay-inset: inset 6px 6px 12px rgba(137, 89, 45, 0.08), inset -6px -6px 12px rgba(255, 255, 255, 0.78);
    --clay-radius-xl: 34px;
    --clay-radius-lg: 26px;
    --clay-radius-md: 20px;
    --clay-radius-pill: 999px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--clay-bg);
}

body {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--clay-text) !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 212, 112, 0.56) 0, rgba(255, 212, 112, 0.28) 17%, transparent 37%),
        radial-gradient(circle at 90% 15%, rgba(255, 138, 128, 0.34) 0, transparent 30%),
        radial-gradient(circle at 78% 82%, rgba(137, 69, 201, 0.20) 0, transparent 31%),
        linear-gradient(135deg, #fff7ed 0%, var(--clay-bg) 46%, #f4e4d3 100%) !important;
    background-attachment: fixed !important;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    opacity: 0.86;
    filter: blur(0.2px);
    border-radius: 42% 58% 55% 45% / 45% 42% 58% 55%;
}

body::before {
    width: 250px;
    height: 250px;
    left: -86px;
    top: 160px;
    background: linear-gradient(145deg, rgba(255, 188, 62, 0.72), rgba(255, 240, 195, 0.62));
    box-shadow: var(--clay-shadow);
}

body::after {
    width: 300px;
    height: 300px;
    right: -120px;
    bottom: 50px;
    background: linear-gradient(145deg, rgba(131, 78, 206, 0.30), rgba(255, 255, 255, 0.50));
    box-shadow: var(--clay-shadow);
}

/* Layouts principales */
.admin-wrapper,
.mobile-container,
body > .container,
.login-container,
.auth-container {
    background: var(--clay-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: var(--clay-radius-xl) !important;
    box-shadow: var(--clay-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

.admin-wrapper {
    position: relative;
    overflow: visible !important;
}

.admin-wrapper::before,
.mobile-container::before,
body > .container::before {
    content: "";
    position: absolute;
    inset: 10px 10px auto 10px;
    height: 38px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0));
    opacity: 0.72;
    pointer-events: none;
}

/* Navbar */
.navbar-custom {
    background: rgba(255, 250, 242, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 0 0 28px 28px !important;
    box-shadow: var(--clay-shadow-sm) !important;
    backdrop-filter: blur(18px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
    margin-bottom: 26px !important;
}

.navbar-custom .navbar-brand img,
.logo-img,
.logo-empresa {
    border-radius: 18px !important;
    box-shadow: var(--clay-shadow-xs) !important;
    background: rgba(255, 255, 255, 0.45) !important;
}

.navbar-custom .brand-sub,
.brand-sub,
.badge,
.badge-progress,
.badge-meta,
.badge-progreso,
.badge-oferta,
.badge-estado,
.badge-counter {
    border-radius: var(--clay-radius-pill) !important;
    box-shadow: var(--clay-shadow-xs) !important;
}

.navbar-custom .nav-link {
    border-radius: var(--clay-radius-pill) !important;
    color: #4d3e30 !important;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active-nav {
    background: linear-gradient(145deg, #fffaf3, #f5dfc7) !important;
    box-shadow: var(--clay-shadow-xs) !important;
    transform: translateY(-2px) !important;
}

.navbar-custom .navbar-collapse {
    border-radius: 24px !important;
}

.navbar-custom .navbar-toggler {
    border: 1px solid rgba(255,255,255,.68) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #fffaf3, #f0dfcd) !important;
    box-shadow: var(--clay-shadow-xs) !important;
}

/* Tarjetas y paneles */
.card-custom,
.card,
.table-card,
.saldo-card,
.premio-card,
.tarjeta-digital,
.empty-state,
.progress-box,
.input-group-sms,
.modal-content,
.modal-content-custom,
.swal2-popup,
.notificacion-ok,
.banner-oferta {
    background: var(--clay-card-solid) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: var(--clay-radius-lg) !important;
    box-shadow: var(--clay-shadow-sm) !important;
    overflow: hidden;
}

.card-custom,
.card,
.table-card,
.premio-card,
.tarjeta-digital,
.progress-box {
    position: relative;
}

.card-custom::before,
.card::before,
.table-card::before,
.premio-card::before,
.tarjeta-digital::before,
.progress-box::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    height: 26px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 0;
}

.card-custom > *,
.card > *,
.table-card > *,
.premio-card > *,
.tarjeta-digital > *,
.progress-box > * {
    position: relative;
    z-index: 1;
}

.card-header-custom,
.modal-header-custom,
.card-header,
.table thead th {
    background: linear-gradient(145deg, #fff4e5, #f2dfcb) !important;
    color: var(--clay-text) !important;
    border-bottom: 1px solid rgba(122, 90, 62, 0.12) !important;
}

.card-body-custom,
.card-body,
.modal-body-custom {
    background: transparent !important;
}

.page-header,
.header-panel {
    background: rgba(255, 250, 242, 0.62) !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    border-radius: var(--clay-radius-lg) !important;
    box-shadow: var(--clay-shadow-xs) !important;
    padding: 14px 18px !important;
}

.page-header i,
.header-panel i,
.icon-large,
.logo-icon,
.brand-icon {
    background: linear-gradient(145deg, #ffc653, #e08900) !important;
    color: #fff !important;
    border-radius: 23px !important;
    box-shadow: 10px 12px 24px rgba(230, 149, 0, 0.25), -8px -8px 18px rgba(255,255,255,0.72) !important;
}

.page-header > i,
.header-panel h1 i,
.icon-large > i,
.logo-icon > i {
    background: transparent !important;
    box-shadow: none !important;
}

.icon-large {
    width: 84px !important;
    height: 84px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.85rem !important;
}

/* Formularios */
.form-control,
.form-control-custom,
.form-select,
.input-group-custom,
.input-group,
.swal2-input,
.swal2-textarea,
textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="time"],
input[type="file"] {
    background: rgba(255, 250, 242, 0.88) !important;
    border: 1px solid rgba(125, 84, 50, 0.14) !important;
    border-radius: 20px !important;
    color: var(--clay-text) !important;
    box-shadow: var(--clay-inset) !important;
    outline: none !important;
}

.form-control:focus,
.form-control-custom:focus,
.form-select:focus,
.input-group-custom:focus-within,
.input-group:focus-within,
.swal2-input:focus,
.swal2-textarea:focus,
textarea:focus,
select:focus,
input:focus {
    border-color: rgba(242, 163, 31, 0.58) !important;
    box-shadow: var(--clay-inset), 0 0 0 5px rgba(242, 163, 31, 0.16) !important;
}

.input-prefix,
.input-group-text,
.input-group i {
    background: linear-gradient(145deg, #fff2de, #ead3bc) !important;
    color: #7b5638 !important;
    border: 0 !important;
    box-shadow: var(--clay-shadow-xs) !important;
}

.form-label-custom,
.form-label,
label {
    color: #4d3e30 !important;
    font-weight: 700 !important;
}

.form-text-custom,
.form-text,
.text-muted,
.card-subtitle-custom,
.subtitle,
small {
    color: var(--clay-muted) !important;
}

/* Botones */
.btn,
button,
.btn-primary-custom,
.btn-success-custom,
.btn-warning-custom,
.btn-secondary-custom,
.btn-blue-custom,
.btn-azul-custom,
.btn-naranja-custom,
.btn-purple-custom,
.btn-refresh,
.btn-submit,
.btn-outline,
.btn-nuevo,
.btn-accion,
.btn-add,
.btn-eliminar,
.btn-logout,
.btn-gwallet,
.btn-notificaciones {
    border: 1px solid rgba(255,255,255,.56) !important;
    border-radius: var(--clay-radius-pill) !important;
    box-shadow: 10px 12px 22px rgba(137, 89, 45, 0.16), -7px -7px 16px rgba(255,255,255,0.78) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
    font-weight: 800 !important;
}

.btn:hover,
button:hover,
.btn-primary-custom:hover,
.btn-success-custom:hover,
.btn-warning-custom:hover,
.btn-secondary-custom:hover,
.btn-blue-custom:hover,
.btn-azul-custom:hover,
.btn-naranja-custom:hover,
.btn-purple-custom:hover,
.btn-refresh:hover,
.btn-submit:hover,
.btn-outline:hover,
.btn-nuevo:hover,
.btn-accion:hover,
.btn-add:hover,
.btn-eliminar:hover,
.btn-logout:hover,
.btn-gwallet:hover,
.btn-notificaciones:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 14px 16px 28px rgba(137, 89, 45, 0.18), -9px -9px 20px rgba(255,255,255,0.82) !important;
    filter: saturate(1.06) !important;
}

.btn:active,
button:active,
.btn-primary-custom:active,
.btn-success-custom:active,
.btn-warning-custom:active,
.btn-secondary-custom:active,
.btn-blue-custom:active,
.btn-azul-custom:active,
.btn-naranja-custom:active,
.btn-purple-custom:active,
.btn-refresh:active,
.btn-submit:active,
.btn-outline:active,
.btn-nuevo:active,
.btn-accion:active,
.btn-add:active,
.btn-eliminar:active,
.btn-logout:active,
.btn-gwallet:active,
.btn-notificaciones:active {
    transform: translateY(0) scale(0.99) !important;
    box-shadow: var(--clay-inset) !important;
}

.btn-primary,
.btn-primary-custom,
.btn-submit,
.btn-nuevo,
.btn-refresh,
.btn-gwallet {
    background: linear-gradient(145deg, #ffc653, #e18b00) !important;
    color: #fff !important;
}

.btn-success,
.btn-success-custom,
.btn-add,
.btn-notificaciones:not(.desactivar) {
    background: linear-gradient(145deg, #42cd78, #148445) !important;
    color: #fff !important;
}

.btn-warning,
.btn-warning-custom,
.btn-naranja-custom {
    background: linear-gradient(145deg, #ffd36a, #e99400) !important;
    color: #3b2616 !important;
}

.btn-danger,
.btn-eliminar,
.btn-accion.eliminar,
.btn-notificaciones.desactivar,
.btn-logout {
    background: linear-gradient(145deg, #ff7b75, #c83d39) !important;
    color: #fff !important;
}

.btn-secondary,
.btn-secondary-custom,
.btn-outline {
    background: linear-gradient(145deg, #fffaf3, #ead9c7) !important;
    color: #4d3e30 !important;
}

.btn-blue-custom,
.btn-azul-custom,
.btn-info,
.btn-accion.editar {
    background: linear-gradient(145deg, #6bb7ff, #347dd1) !important;
    color: #fff !important;
}

.btn-purple-custom {
    background: linear-gradient(145deg, #b37cff, #7730bd) !important;
    color: #fff !important;
}

.btn-accion {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

button:disabled,
.btn:disabled,
.btn-primary-custom:disabled,
.btn-blue-custom:disabled,
.btn-naranja-custom:disabled {
    opacity: .58 !important;
    filter: grayscale(.18) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Alertas */
.alert,
.alert-custom,
.swal2-validation-message {
    border-radius: var(--clay-radius-md) !important;
    border: 1px solid rgba(255,255,255,.68) !important;
    box-shadow: var(--clay-shadow-xs) !important;
}

.alert-success,
.alert-custom.success,
.success.alert,
.notificacion-ok {
    background: linear-gradient(145deg, #edfff4, #d9f7e4) !important;
    color: #155a35 !important;
}

.alert-danger,
.alert-custom.error,
.error.alert {
    background: linear-gradient(145deg, #fff1f0, #ffd9d7) !important;
    color: #8d2622 !important;
}

.alert-warning,
.alert-custom.warning {
    background: linear-gradient(145deg, #fff8e8, #ffe6b1) !important;
    color: #78510d !important;
}

.alert-info,
.alert-custom.info {
    background: linear-gradient(145deg, #ecf6ff, #d8ebff) !important;
    color: #245681 !important;
}

/* Tablas */
.table-responsive,
.table-card {
    border-radius: var(--clay-radius-lg) !important;
    overflow: hidden !important;
}

.table {
    color: var(--clay-text) !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 9px !important;
}

.table tbody tr {
    background: rgba(255, 250, 242, 0.74) !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 12px rgba(137, 89, 45, 0.07) !important;
}

.table tbody td {
    background: transparent !important;
    border: 0 !important;
    vertical-align: middle !important;
}

.table tbody td:first-child {
    border-radius: 18px 0 0 18px !important;
}

.table tbody td:last-child {
    border-radius: 0 18px 18px 0 !important;
}

/* Barra de progreso y sellos */
.progress {
    background: rgba(255, 250, 242, 0.88) !important;
    border-radius: 999px !important;
    box-shadow: var(--clay-inset) !important;
    overflow: hidden !important;
}

.progress-bar,
.bg-warning {
    background: linear-gradient(90deg, #ffd36a, #e99400) !important;
}

.sello {
    background: rgba(255, 250, 242, 0.88) !important;
    border: 1px solid rgba(125, 84, 50, 0.12) !important;
    box-shadow: var(--clay-inset) !important;
    border-radius: 22px !important;
}

.sello.lleno {
    background: linear-gradient(145deg, #ffe7ad, #f2a31f) !important;
    box-shadow: var(--clay-shadow-xs) !important;
}

.pin-box {
    border-radius: 24px !important;
    box-shadow: var(--clay-shadow-xs) !important;
}

/* Imágenes */
.img-preview,
.premio-banner,
.wallet-hero-preview,
.wallet-logo-preview {
    border-radius: 22px !important;
    box-shadow: var(--clay-shadow-xs) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
}

/* SweetAlert */
.swal2-popup {
    background: var(--clay-card-solid) !important;
    color: var(--clay-text) !important;
}

.swal2-title {
    color: var(--clay-text) !important;
    font-weight: 800 !important;
}

.swal2-html-container {
    color: var(--clay-muted) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1dfca;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(145deg, #f2a31f, #d87d00);
    border-radius: 999px;
    border: 2px solid #f1dfca;
}

@media (max-width: 768px) {
    body::before {
        width: 180px;
        height: 180px;
        left: -95px;
        top: 110px;
    }

    body::after {
        width: 220px;
        height: 220px;
        right: -120px;
        bottom: 30px;
    }

    .admin-wrapper,
    .mobile-container,
    body > .container,
    .login-container,
    .auth-container {
        border-radius: 26px !important;
        box-shadow: 10px 14px 26px rgba(137, 89, 45, 0.14), -7px -7px 18px rgba(255,255,255,0.80) !important;
    }

    .page-header,
    .header-panel {
        border-radius: 22px !important;
        padding: 12px 14px !important;
    }

    .card-custom,
    .card,
    .table-card,
    .saldo-card,
    .premio-card,
    .tarjeta-digital,
    .progress-box,
    .modal-content,
    .modal-content-custom {
        border-radius: 22px !important;
    }

    .icon-large {
        width: 70px !important;
        height: 70px !important;
        font-size: 2.25rem !important;
    }
}