/* =========================================================
   UDRINK base.css (OFFLINE / STITCH-COMPATIBLE)
   Reglas:
   - NO usar @apply
   - Scopeado bajo .ud-stitch
   - NO tocar inputs "de diseño" (bg-transparent / border-none)
   - NO tocar checkbox/radio (los maneja Tailwind Forms / Stitch)
   ========================================================= */

.ud-stitch {
  font-family: "Be Vietnam Pro", sans-serif;
}

.ud-stitch .material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.ud-stitch .soft-shadow {
  box-shadow: 0 10px 30px -5px rgba(15, 73, 189, 0.08);
}

.ud-stitch .dashed-divider {
  border-top: 1px dashed #e2e8f0;
  margin: 1.5rem 0;
}

/* Inputs normales (NO transparentes / NO border-none / NO checkbox-radio) */
.ud-stitch input:not([type="checkbox"]):not([type="radio"]):not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']),
.ud-stitch select:not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']),
.ud-stitch textarea:not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']) {
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #0f172a;
  padding: 0.75rem 1rem;
  outline: none;
}

/* Focus solo para inputs normales */
.ud-stitch input:not([type="checkbox"]):not([type="radio"]):not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']):focus,
.ud-stitch select:not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']):focus,
.ud-stitch textarea:not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']):focus {
  border-color: rgba(17, 82, 212, 0.6);
  box-shadow: 0 0 0 4px rgba(17, 82, 212, 0.20);
}

/* Dark mode real: Tailwind usa la clase .dark en un ancestro */
.dark .ud-stitch input:not([type="checkbox"]):not([type="radio"]):not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']),
.dark .ud-stitch select:not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']),
.dark .ud-stitch textarea:not(.bg-transparent):not(.border-none):not([class*='p-']):not([class*='px-']):not([class*='py-']):not([class*='pl-']):not([class*='pr-']):not([class*='pt-']):not([class*='pb-']):not([class*='rounded']):not([class*='border']):not([class*='bg-']):not([class*='text-']) {
  background-color: #020617;
  border-color: #334155;
  color: #f8fafc;
}

/* =========================================================
   AGE GATE (sin JS)
   Comportamiento:
   - Botón "Soy mayor de edad" parte desactivado (plomo)
   - Se habilita visualmente y permite click SOLO si el checkbox está checked
   Nota: usamos :has() para no depender de reestructurar el DOM.
   ========================================================= */

.ud-stitch.ud-agegate:not(:has(#terms-acceptance:checked)) #primary-age-btn {
  background-color: #9ca3af !important; /* gray-400 */
  color: #ffffff !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.ud-stitch.ud-agegate:not(:has(#terms-acceptance:checked)) #primary-age-btn:hover,
.ud-stitch.ud-agegate:not(:has(#terms-acceptance:checked)) #primary-age-btn:active {
  transform: none !important;
}

.ud-stitch.ud-agegate:has(#terms-acceptance:checked) #primary-age-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* UDRINK_OFFLINE_TOKEN_OVERRIDES */
.ud-stitch {
  font-family: "Be Vietnam Pro", sans-serif;
}

/* Design tokens from Stitch (used by utilities below) */
.ud-stitch .text-text-main { color: #0f172a !important; }
.ud-stitch .text-text-muted { color: #64748b !important; }
.ud-stitch .bg-surface-light { background-color: #ffffff !important; }
.ud-stitch .bg-surface-dark { background-color: #0b1220 !important; }
.ud-stitch .bg-background-light { background-color: #f6f7f8 !important; }
.ud-stitch .bg-background-dark { background-color: #0b1220 !important; }
.ud-stitch .bg-primary { background-color: #1152d4 !important; }
.ud-stitch .text-primary { color: #1152d4 !important; }
.ud-stitch .border-primary { border-color: #1152d4 !important; }

/* Overlay utility used by modals: bg-secondary/60 */
.ud-stitch .bg-secondary\/60 { background-color: rgba(15, 23, 42, 0.60) !important; }

/* Custom shadows from Stitch */
.ud-stitch .shadow-soft { box-shadow: 0 10px 30px -5px rgba(15, 73, 189, 0.08) !important; }
.ud-stitch .shadow-modal { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
.ud-stitch .shadow-primary\/10 { box-shadow: 0 10px 30px -5px rgba(17, 82, 212, 0.10) !important; }
.ud-stitch .shadow-primary\/15 { box-shadow: 0 10px 30px -5px rgba(17, 82, 212, 0.15) !important; }
.ud-stitch .shadow-primary\/20 { box-shadow: 0 10px 30px -5px rgba(17, 82, 212, 0.20) !important; }
.ud-stitch .shadow-blue-500\/20 { box-shadow: 0 10px 30px -5px rgba(59, 130, 246, 0.20) !important; }

/* Material Symbols tweaks */
.ud-stitch .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Extras required by Stitch classes */
.ud-stitch .active\:scale-\[0\.98\]:active{transform:scale(.98)!important;}
.ud-stitch .custom-scrollbar::-webkit-scrollbar{width:6px;}
.ud-stitch .custom-scrollbar::-webkit-scrollbar-track{background:transparent;}
.ud-stitch .custom-scrollbar::-webkit-scrollbar-thumb{background-color:rgba(148,163,184,.5);border-radius:20px;}


    /* =========================
   Validaciones formularios
   ========================= */

    .ud-stitch .validation-message {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.4;
        color: #dc2626; /* rojo elegante */
        font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .ud-stitch .validation-errors {
        margin-top: 6px;
    }

        .ud-stitch .validation-errors ul {
            margin: 0;
            padding-left: 16px;
        }

        .ud-stitch .validation-errors li {
            font-size: 11px;
            color: #dc2626;
            font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }



/* =====================================================
   Alerts UDRINK (reemplazo Bootstrap alert-*)
   ===================================================== */

/* Base */
.ud-alert {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Spacing helpers (equivalentes a mt-*) */
.ud-mt-1 {
    margin-top: 4px;
}

.ud-mt-2 {
    margin-top: 8px;
}

.ud-mt-3 {
    margin-top: 12px;
}

.ud-mt-4 {
    margin-top: 16px;
}

/* Danger (alert-danger) */
.ud-alert-danger {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* Success (alert-success) */
.ud-alert-success {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* Warning (alert-warning) */
.ud-alert-warning {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* Info (alert-info) */
.ud-alert-info {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

/*
=====================================================
EJEMPLOS DE USO (NO BORRAR, REFERENCIA PARA RAZOR)
=====================================================

❌ Bootstrap (NO usar)
<div class="alert alert-danger mt-3" role="alert">
  Error de autenticación.
</div>

✅ UDRINK (usar)
<div class="ud-alert ud-alert-danger ud-mt-3">
  Error de autenticación.
</div>

✅ Success
<div class="ud-alert ud-alert-success ud-mt-3">
  Cuenta creada correctamente.
</div>

✅ Warning
<div class="ud-alert ud-alert-warning ud-mt-3">
  Debes completar todos los campos.
</div>

✅ Info
<div class="ud-alert ud-alert-info ud-mt-3">
  Te enviaremos un código de verificación.
</div>

=====================================================
*/


/* =========================
   UDRINK Toasts (equilibrado)
   ========================= */

/* Host */
.ud-toast-host {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(420px, calc(100vw - 2rem));
}

/* Base */
.ud-toast {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    gap: 0.85rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,0.12);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 18px 45px rgba(0,0,0,0.18);
    backdrop-filter: blur(10px);
}

/* Icono (Material Symbols) */
.ud-toast-icon {
    font-family: "Material Symbols Outlined";
    font-size: 22px;
    line-height: 22px;
    margin-top: 2px;
}

/* Texto */
.ud-toast-title {
    font-weight: 900;
    font-size: 0.98rem;
    line-height: 1.15rem;
    letter-spacing: -0.01em;
    color: rgba(15,23,42,0.95);
}

.ud-toast-message {
    margin-top: 0.25rem;
    font-size: 0.95rem;
    line-height: 1.35rem;
    color: rgba(15,23,42,0.78);
    white-space: normal;
    word-break: break-word;
}

/* Botón cerrar */
.ud-toast-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 10px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: rgba(15,23,42,0.65);
}

    .ud-toast-close:hover {
        background: rgba(15,23,42,0.06);
    }

/* =========================
   Variantes (equilibradas)
   - Fondo con “tinte” visible (más que antes)
   - Barra izquierda marcada, pero no chillona
   ========================= */

.ud-toast-info {
    border-left: 6px solid rgba(37,99,235,0.75);
    background: linear-gradient(0deg, rgba(37,99,235,0.18), rgba(255,255,255,0.96));
}

    .ud-toast-info .ud-toast-icon {
        color: rgba(37,99,235,0.95);
    }

.ud-toast-success {
    border-left: 6px solid rgba(22,163,74,0.75);
    background: linear-gradient(0deg, rgba(22,163,74,0.18), rgba(255,255,255,0.96));
}

    .ud-toast-success .ud-toast-icon {
        color: rgba(22,163,74,0.95);
    }

.ud-toast-warning {
    border-left: 6px solid rgba(245,158,11,0.80);
    background: linear-gradient(0deg, rgba(245,158,11,0.22), rgba(255,255,255,0.96));
}

    .ud-toast-warning .ud-toast-icon {
        color: rgba(217,119,6,0.98);
    }

.ud-toast-error {
    border-left: 6px solid rgba(239,68,68,0.80);
    background: linear-gradient(0deg, rgba(239,68,68,0.20), rgba(255,255,255,0.96));
}

    .ud-toast-error .ud-toast-icon {
        color: rgba(220,38,38,0.98);
    }

/* =========================
   Dark mode
   ========================= */
.dark .ud-toast {
    background: rgba(15,23,42,0.86);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

.dark .ud-toast-title {
    color: rgba(255,255,255,0.92);
}

.dark .ud-toast-message {
    color: rgba(255,255,255,0.78);
}

.dark .ud-toast-close {
    color: rgba(255,255,255,0.70);
}

.dark .ud-toast-close:hover {
    background: rgba(255,255,255,0.10);
}

.dark .ud-toast-info {
    background: linear-gradient(0deg, rgba(37,99,235,0.24), rgba(15,23,42,0.86));
    border-left-color: rgba(59,130,246,0.80);
}

.dark .ud-toast-success {
    background: linear-gradient(0deg, rgba(22,163,74,0.24), rgba(15,23,42,0.86));
    border-left-color: rgba(34,197,94,0.80);
}

.dark .ud-toast-warning {
    background: linear-gradient(0deg, rgba(245,158,11,0.28), rgba(15,23,42,0.86));
    border-left-color: rgba(245,158,11,0.85);
}

.dark .ud-toast-error {
    background: linear-gradient(0deg, rgba(239,68,68,0.26), rgba(15,23,42,0.86));
    border-left-color: rgba(239,68,68,0.85);
}


/* =========================
   UDRINK Buttons (ud-btn)
   - Base común para modales/toasts y CTA internos
   - Sin Bootstrap
   ========================= */
.ud-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,0.14);
    background: rgba(255,255,255,0.92);
    color: rgba(15,23,42,0.92);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.05rem;
    cursor: pointer;
    transition: filter 120ms ease, background 120ms ease, border-color 120ms ease;
    user-select: none;
    text-decoration: none;
}

.ud-btn:hover{
    filter: brightness(0.98);
    border-color: rgba(15,23,42,0.18);
}

.ud-btn:disabled{
    opacity: 0.55;
    cursor: not-allowed;
}

.ud-btn-primary{
    background: rgba(37,99,235,0.92);
    border-color: rgba(37,99,235,0.70);
    color: #fff;
}

.ud-btn-primary:hover{
    filter: brightness(0.96);
}

.ud-btn-secondary{
    background: rgba(15,23,42,0.06);
    border-color: rgba(15,23,42,0.12);
    color: rgba(15,23,42,0.92);
}

.ud-btn-secondary:hover{
    background: rgba(15,23,42,0.08);
}

/* Íconos dentro de botones (Material Symbols) */
.ud-btn-icon{
    font-family: "Material Symbols Outlined";
    font-size: 20px;
    line-height: 20px;
    display: inline-block;
}

/* Dark mode */
.dark .ud-btn{
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.92);
}

.dark .ud-btn-secondary{
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
}

.dark .ud-btn-primary{
    background: rgba(59,130,246,0.85);
    border-color: rgba(59,130,246,0.70);
}


/* =========================
   Message Modal (UDRINK)
   ========================= */
/* Overlay base (si no lo tienes ya) */
.ud-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Caja modal */
.ud-modal {
    width: 100%;
    max-width: 560px;
    background: rgba(255,255,255,0.98);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,0.12);
    box-shadow: 0 22px 60px rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
}

.ud-modal-header,
.ud-modal-body,
.ud-modal-footer {
    padding: 1.05rem 1.25rem;
}

.ud-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(15,23,42,0.08);
}

.ud-modal-footer {
    border-top: 1px solid rgba(15,23,42,0.08);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.ud-modal-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: rgba(15,23,42,0.95);
}

.ud-modal-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0.25rem 0.35rem;
    border-radius: 10px;
    color: rgba(15,23,42,0.65);
}

    .ud-modal-close:hover {
        background: rgba(15,23,42,0.06);
    }

/* Message header */
.ud-msg-headleft {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.ud-msg-icon {
    font-family: "Material Symbols Outlined";
    font-size: 26px;
    line-height: 26px;
    margin-top: 2px;
}

.ud-msg-subtitle {
    margin-top: 0.2rem;
    font-size: 0.95rem;
    color: rgba(15,23,42,0.65);
}

.ud-msg-message {
    font-size: 1rem;
    line-height: 1.5rem;
    color: rgba(15,23,42,0.85);
}

/* Variantes (barra superior) */
.ud-msg-info {
    border-top: 6px solid rgba(37,99,235,0.78);
}

.ud-msg-success {
    border-top: 6px solid rgba(22,163,74,0.78);
}

.ud-msg-warning {
    border-top: 6px solid rgba(245,158,11,0.82);
}

.ud-msg-error {
    border-top: 6px solid rgba(239,68,68,0.82);
}

.ud-msg-info .ud-msg-icon {
    color: rgba(37,99,235,0.95);
}

.ud-msg-success .ud-msg-icon {
    color: rgba(22,163,74,0.95);
}

.ud-msg-warning .ud-msg-icon {
    color: rgba(217,119,6,0.98);
}

.ud-msg-error .ud-msg-icon {
    color: rgba(220,38,38,0.98);
}

/* Botón peligro (si no lo tienes) */
.ud-btn-danger {
    background: #dc2626;
    color: #fff;
}

    .ud-btn-danger:hover {
        filter: brightness(0.95);
    }

/* Dark mode */
.dark .ud-modal {
    background: rgba(15,23,42,0.90);
    border-color: rgba(255,255,255,0.12);
}

.dark .ud-modal-header, .dark .ud-modal-footer {
    border-color: rgba(255,255,255,0.10);
}

.dark .ud-modal-title {
    color: rgba(255,255,255,0.92);
}

.dark .ud-msg-subtitle {
    color: rgba(255,255,255,0.72);
}

.dark .ud-msg-message {
    color: rgba(255,255,255,0.85);
}

.dark .ud-modal-close {
    color: rgba(255,255,255,0.70);
}

.dark .ud-modal-close:hover {
    background: rgba(255,255,255,0.10);
}

/* Google Places Autocomplete
   La lista de sugerencias (pac-container) se renderiza fuera del DOM del modal.
   Si el modal usa overlay con z-index alto, debemos elevar la lista para que no quede oculta. */
.pac-container {
    z-index: 2147483647 !important;
}

/* Responsive helpers (no dependemos de variantes Tailwind compiladas)
   - ud-only-desktop: visible desde LG (>= 1024px)
   - ud-only-mobile: visible bajo LG (< 1024px)
*/
.ud-only-desktop {
    display: none;
}

.ud-only-mobile {
    display: block;
}

@media (min-width: 1024px) {
    .ud-only-desktop {
        display: block;
    }

    .ud-only-mobile {
        display: none;
    }
}


/* ==================== FIN ==========================*/