/* ============================================================
   Infinity Donations - Estilos personalizados
   Paleta: azul solido + acentos verde / morado / naranja
   SIN GRADIENTES: solo colores solidos.
   ============================================================ */

:root {
    --font-heading: 'Helvetica Now Display Bold', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --color-text: #192837;
    --color-brand: #1D4ED8;
    --color-brand-dark: #1E40AF;
    --color-brand-light: #3B82F6;
    --color-green: #10B981;
    --color-purple: #8B5CF6;
    --color-orange: #F97316;
    --color-bg: #F6F7FB;
    --color-card: #FFFFFF;
    --color-border: #E8EAF1;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-heading { font-family: var(--font-heading); }

/* ------------------------------------------------------------
   Scrollbar
   ------------------------------------------------------------ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C9CFDD; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #9AA3B8; }

/* ------------------------------------------------------------
   Animaciones (fadeUp tipo Framer Motion)
   ------------------------------------------------------------ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { opacity: 0; animation: fadeUp .6s cubic-bezier(.22,1,.36,1) forwards; }
.anim-delay-1 { animation-delay: .15s; }
.anim-delay-2 { animation-delay: .3s; }
.anim-delay-3 { animation-delay: .45s; }
.anim-delay-4 { animation-delay: .6s; }

@keyframes popIn {
    0% { opacity: 0; transform: scale(.85); }
    100% { opacity: 1; transform: scale(1); }
}
.anim-pop { animation: popIn .35s cubic-bezier(.22,1,.36,1) both; }

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ------------------------------------------------------------
   Sidebar de la app
   ------------------------------------------------------------ */
.sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    font-size: 14px; font-weight: 500; color: #5A6478;
    transition: background .15s ease, color .15s ease;
}
.sidebar-link i { font-size: 20px; }
.sidebar-link:hover { background: #EEF2FF; color: var(--color-brand); }
.sidebar-link.active { background: var(--color-brand); color: #fff; }
.sidebar-link.active:hover { background: var(--color-brand-dark); color: #fff; }

/* Sidebar movil fullwidth */
.mobile-sidebar {
    position: fixed; inset: 0; z-index: 70;
    background: #FFFFFF;
    transform: translateX(-100%);
    transition: transform .42s cubic-bezier(.22,1,.36,1);
    display: flex; flex-direction: column;
}
.mobile-sidebar.open { transform: translateX(0); }
.mobile-sidebar .sidebar-link { font-size: 16px; padding: 15px 18px; }

/* ------------------------------------------------------------
   Bottom nav movil (glass blur capsulado)
   ------------------------------------------------------------ */
.bottom-nav {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 60;
    display: flex; align-items: center; gap: 2px;
    padding: 8px;
    border-radius: 9999px;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(25,40,55,.08);
    box-shadow: 0 8px 32px rgba(25,40,55,.16);
}
.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 56px; height: 48px; border-radius: 9999px;
    color: #5A6478; font-size: 10px; font-weight: 600; gap: 2px;
    transition: background .15s ease, color .15s ease;
}
.bottom-nav-item i { font-size: 21px; }
.bottom-nav-item.active { background: var(--color-brand); color: #fff; }

/* ------------------------------------------------------------
   Cards / paneles
   ------------------------------------------------------------ */
.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 18px;
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(25,40,55,.08); }

/* ------------------------------------------------------------
   Checklist gamificado
   ------------------------------------------------------------ */
.achievement-item { position: relative; }
.achievement-item .check-circle {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    border: 2px dashed #C9CFDD; color: #9AA3B8;
    transition: all .25s ease;
}
.achievement-item.done .check-circle {
    border: 2px solid var(--color-green);
    background: var(--color-green); color: #fff;
}
.achievement-item.done .achievement-title {
    color: #9AA3B8; text-decoration: line-through;
}
.achievement-connector {
    position: absolute; left: 20px; top: 46px; bottom: -14px; width: 2px;
    background: #E8EAF1;
}
.achievement-item.done .achievement-connector { background: var(--color-green); }
.achievement-item:last-child .achievement-connector { display: none; }

/* ------------------------------------------------------------
   Progreso circular (holding tank)
   ------------------------------------------------------------ */
.progress-ring { transform: rotate(-90deg); }
.progress-ring circle { transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1); }

/* ------------------------------------------------------------
   Niveles de donacion (tarjetas)
   ------------------------------------------------------------ */
.level-card {
    border: 2px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: all .18s ease;
}
.level-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(25,40,55,.10); }
.level-card.selected { border-color: var(--color-brand); box-shadow: 0 8px 24px rgba(29,78,216,.18); }
.level-card.level-active { border-color: var(--color-green); }
.level-card.level-locked { opacity: .72; }

/* ------------------------------------------------------------
   Tablas
   ------------------------------------------------------------ */
.table-base { width: 100%; font-size: 14px; }
.table-base thead th {
    text-align: left; padding: 10px 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #8A93A8; border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.table-base tbody td { padding: 13px 14px; border-bottom: 1px solid #F1F3F8; vertical-align: middle; }
.table-base tbody tr:last-child td { border-bottom: none; }
.table-base tbody tr:hover { background: #FAFBFE; }

/* Tabla de datos del panel admin (listados con paginacion) */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    min-width: 640px;
}
.data-table thead th {
    text-align: left;
    padding: 11px 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #8A93A8;
    background: #FAFBFE;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.data-table thead th:first-child { border-top-left-radius: 12px; }
.data-table thead th:last-child  { border-top-right-radius: 12px; }
.data-table thead th.text-right  { text-align: right; }
.data-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid #F1F3F8;
    vertical-align: middle;
    color: var(--color-text);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #F8FAFF; }

/* Encabezado ordenable (link con flecha) */
.th-sort {
    display: inline-flex; align-items: center; gap: 5px;
    color: inherit; cursor: pointer;
    transition: color .15s ease;
}
.th-sort:hover { color: var(--color-brand); }
.th-sort i { font-size: 13px; opacity: .55; }
.th-sort.is-active { color: var(--color-brand); }
.th-sort.is-active i { opacity: 1; }

/* ------------------------------------------------------------
   Badges
   ------------------------------------------------------------ */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 9999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.badge-blue   { background: #DBEAFE; color: #1D4ED8; }
.badge-green  { background: #D1FAE5; color: #047857; }
.badge-purple { background: #EDE9FE; color: #6D28D9; }
.badge-orange { background: #FFEDD5; color: #C2410C; }
.badge-red    { background: #FEE2E2; color: #B91C1C; }
.badge-gray   { background: #F1F3F8; color: #5A6478; }

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: 14px;
    border-radius: 12px; padding: 11px 20px;
    transition: all .15s ease;
    cursor: pointer; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--color-brand); color: #fff; }
.btn-primary:hover { background: var(--color-brand-dark); }
.btn-green { background: var(--color-green); color: #fff; }
.btn-green:hover { background: #059669; }
.btn-orange { background: var(--color-orange); color: #fff; }
.btn-orange:hover { background: #EA580C; }
.btn-outline { background: #fff; color: var(--color-text); border: 1px solid #D6DAE6; }
.btn-outline:hover { border-color: var(--color-brand); color: var(--color-brand); }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; }
.btn[disabled], .btn.disabled { opacity: .7; cursor: not-allowed; pointer-events: none; }

/* Botón en estado de carga: bloquea clicks, mantiene color y muestra spinner */
.btn.is-loading { pointer-events: none; cursor: progress; position: relative; }
.btn.is-loading .btn-label { opacity: .85; }
.btn-spin {
    display: inline-block; width: 18px; height: 18px;
    animation: btnSpin .65s linear infinite;
    transform-origin: center;
}
.btn-spin circle { opacity: .9; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Overlay de carga a pantalla completa (depósitos/retiros que redirigen) */
.load-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(246,247,251,.78);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.load-overlay.show { opacity: 1; pointer-events: auto; }
.load-overlay .lo-card {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 20px; padding: 26px 30px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    box-shadow: 0 24px 60px rgba(25,40,55,.18);
}
.lo-ring { width: 46px; height: 46px; animation: btnSpin .8s linear infinite; transform-origin: center; }

/* ------------------------------------------------------------
   Formularios
   ------------------------------------------------------------ */
.form-input {
    width: 100%;
    border: 1.5px solid #D6DAE6; border-radius: 12px;
    padding: 12px 15px; font-size: 14.5px;
    background: #fff; color: var(--color-text);
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
}
.form-input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 4px rgba(29,78,216,.10); }
.form-input::placeholder { color: #A6AEBF; }
.form-label {
    display: block; font-size: 13px; font-weight: 600;
    color: #44506A; margin-bottom: 7px;
}

/* ------------------------------------------------------------
   Flash messages / toasts
   ------------------------------------------------------------ */
.flash {
    display: flex; align-items: flex-start; gap: 10px;
    border-radius: 14px; padding: 14px 16px;
    font-size: 14px; font-weight: 500;
}
.flash i { font-size: 19px; margin-top: 1px; }
.flash-success { background: #D1FAE5; color: #065F46; }
.flash-error   { background: #FEE2E2; color: #991B1B; }
.flash-warning { background: #FEF3C7; color: #92400E; }
.flash-info    { background: #DBEAFE; color: #1E40AF; }

/* ------------------------------------------------------------
   Modales
   ------------------------------------------------------------ */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(25,40,55,.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.modal-panel {
    background: #fff; border-radius: 20px;
    width: 100%; max-width: 480px;
    max-height: 92vh; overflow-y: auto;
    animation: popIn .3s cubic-bezier(.22,1,.36,1) both;
}

/* ------------------------------------------------------------
   Landing especifico
   ------------------------------------------------------------ */
.landing-nav-link {
    font-size: 14px; font-weight: 500; color: var(--color-text);
    transition: opacity .15s ease;
}
.landing-nav-link:hover { opacity: .65; }

.landing-sheet-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(25,40,55,.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.landing-sheet {
    position: fixed; right: 0; top: 0; z-index: 95;
    width: min(88vw, 360px); height: 100dvh;
    background: #FFFFFF;
    box-shadow: -12px 0 48px rgba(25,40,55,.18);
    animation: slideInRight .45s cubic-bezier(.22,1,.36,1) both;
    display: flex; flex-direction: column;
}
.landing-sheet-link {
    opacity: 0; animation: fadeUp .5s cubic-bezier(.22,1,.36,1) forwards;
    font-size: 17px; font-weight: 600; color: var(--color-text);
    padding: 13px 0; display: block;
}

/* Ocultar artefactos de Google Translate */
.goog-te-banner-frame, .goog-te-gadget, #google_translate_element, .skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-spinner-pos { display: none !important; }

/* ------------------------------------------------------------
   Utilidades responsive
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    .has-bottom-nav { padding-bottom: 96px; }
}

/* Numeros tabulares para montos */
.tabular { font-variant-numeric: tabular-nums; }