/* ============================================================
   ResiCash — Premium Design System v2
   Clean Fintech (Nubank / Revolut) — No Emojis, SVG Icons
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;450;500;550;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
    /* Brand emerald scale (UI Kit Master v2) */
    --brand-50: #ECFDF5;
    --brand-100: #D1FAE5;
    --brand-200: #A7F3D0;
    --brand-300: #6EE7B7;
    --brand-400: #34D399;
    --brand-500: #10B981;
    --brand-600: #059669;
    --brand-700: #047857;
    --brand-800: #064E3B;
    --brand-900: #053527;

    --primary: #10B981;
    --primary-dark: #059669;
    --primary-light: #34D399;
    --primary-glow: rgba(16, 185, 129, 0.12);
    --primary-soft: #ECFDF5;
    --primary-gradient: linear-gradient(135deg, #059669 0%, #10B981 100%);
    --hero-gradient: linear-gradient(155deg, #047857 0%, #064E3B 60%, #053527 100%);
    --dark: #1A1D1F;
    --dark-gradient: linear-gradient(145deg, #065F46 0%, #059669 50%, #10B981 100%);
    --bg: #F0F3F5;
    --bg-white: #FFFFFF;
    --glass: #F5F6F8;
    --glass-border: #E5E7EB;
    --text: #0F172A;
    --text-2: #334155;
    --text-3: #64748B;
    --text-4: #94A3B8;
    --border: #E2E8F0;
    --border-2: #F1F5F9;
    --danger: #EF4444;
    --danger-bg: #FEF2F2;
    --warning: #F59E0B;
    --warning-bg: #FFFBEB;
    --success-bg: #ECFDF5;
    --success: #10B981;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.04);
    --shadow-nav: 0 -1px 8px rgba(0, 0, 0, 0.06);
    /* UI Kit Master shadows */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.03);
    --shadow-card: 0 1px 3px rgba(14, 22, 19, 0.04), 0 8px 24px rgba(14, 22, 19, 0.05);
    --shadow-float: 0 20px 60px rgba(14, 22, 19, 0.12);
    --shadow-brand: 0 8px 20px rgba(16, 185, 129, 0.30);
    --r: 20px;
    --r-lg: 28px;
    --r-full: 9999px;
    --nav-h: 72px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Las dos familias que de verdad se descargan en index.html. Antes estas
       variables nombraban Geist y Geist Mono, que nunca se cargaron: el texto
       caía a Inter y las cifras a la monoespaciada del sistema, distinta en
       cada teléfono. Los montos son el corazón de este producto y no pueden
       verse diferentes según el aparato. */
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Prevent iOS text size adjustment after orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    max-width: none;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5
}

/* Prevent iOS auto-zoom on input focus (triggers when font-size < 16px) */
input, textarea, select {
    font-size: 16px !important
}

/* === SCREENS === */
.phone {
    position: relative;
    min-height: 100vh;
    width: 100%;
    max-width: 430px;
    margin: 0 auto
}

.screen {
    display: none;
    min-height: 100vh;
    flex-direction: column;
    opacity: 0;
    transform: translateY(4px)
}

/* Sin `forwards`: el estado final se declara aquí, para que al terminar la
   animación quede `transform: none`. Con un transform residual, la pantalla se
   vuelve el marco de referencia de todo lo que lleve `position: fixed` dentro,
   y en laptop eso descentraba la bienvenida y obligaba a parches de posición. */
.screen.active {
    display: flex;
    opacity: 1;
    transform: none;
    animation: in .3s var(--ease)
}

/* Solo opacidad, a propósito: cualquier transform en la pantalla la convierte
   en marco de referencia de lo que lleve `position: fixed` dentro, y el
   contenido saltaba de lado mientras duraba la transición. */
@keyframes in {
    from {
        opacity: 0
    }
}

/* === LOADER === */
.ov {
    position: fixed;
    inset: 0;
    max-width: 430px;
    margin: auto;
    background: rgba(248, 249, 250, 0.92);
    backdrop-filter: blur(16px);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-3);
    font-weight: 500
}

/* Desktop: allow full-width app canvas (sidebar mode handled in index.html) */
@media (min-width: 800px) {
    .ov { max-width: none; }
    /* También sin sesión: antes el lienzo quedaba clavado en 430 px y las
       pantallas de entrada se veían como una tira de teléfono en una laptop.
       Cada pantalla centra su propio contenido con su max-width. */
    .phone { max-width: none; }
    body.sidebar-open .phone { margin: 0; }
}

/* El bloque "RESPONSIVE DESKTOP SIDEBAR" de más abajo reserva 240 px para el
   sidebar en toda pantalla ancha, haya sesión o no. Sin sesión —bienvenida,
   login, registro, generador de demos— no hay sidebar, así que el contenido
   quedaba corrido 120 px a la derecha. Aquí se le devuelve el ancho completo. */
@media (min-width: 768px) {
    body:not(.sidebar-open) .phone {
        margin-left: 0;
        width: 100%;
    }
    body:not(.sidebar-open) .snackbar { left: 50%; }
}

.sp {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite
}

@keyframes spin {
    to { transform: rotate(360deg) }
}
@keyframes popIn {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1);   opacity: 1; }
}

/* === SPLASH SCREEN === */
.splash-c {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 0;
    background:
      radial-gradient(800px 420px at 50% 25%, rgba(16,185,129,0.08), transparent 60%),
      radial-gradient(700px 520px at 50% 100%, rgba(5,150,105,0.06), transparent 60%),
      var(--bg);
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.splash-logo-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    animation: splashLogoIn .7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.splash-logo {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 12px 32px rgba(5,150,105,0.35));
}

.splash-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,0.20) 0%, transparent 70%);
    animation: splashGlowPulse 2s ease-in-out infinite;
}

.splash-brand {
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.03em;
    animation: splashFadeUp .5s .25s both;
    margin-bottom: 6px;
    font-family: var(--font-display);
}

.splash-tagline {
    font-size: 11px;
    font-weight: 500;
    color: var(--brand-700);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    animation: splashFadeUp .5s .35s both;
    margin-bottom: 40px;
}

.splash-dots {
    display: flex;
    gap: 8px;
    animation: splashFadeUp .4s .45s both;
}

.splash-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-500);
    animation: splashDot 1.2s ease-in-out infinite;
}

.splash-dots span:nth-child(2) { animation-delay: .15s; }
.splash-dots span:nth-child(3) { animation-delay: .30s; }

@keyframes splashLogoIn {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes splashFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes splashGlowPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.2); opacity: 0.5; }
}

@keyframes splashDot {
    0%, 80%, 100% { transform: scale(1);   opacity: 0.35; }
    40%            { transform: scale(1.4); opacity: 1; }
}

/* splash dark overrides removed — single theme */
@keyframes splashOut { to { opacity: 0; transform: scale(0.9); } }
#splash.splash-out { animation: splashOut .4s ease-in forwards; pointer-events: none; }

/* === CARDS === */
.card {
    background: var(--bg-white);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 12px;
    transition: transform .2s var(--ease);
    position: relative;
    overflow: hidden
}

.card:active {
    transform: scale(0.99)
}

.card-hero {
    background: var(--dark-gradient);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-lg)
}

.card-hero .card-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 81, 44, 0.12) 0%, transparent 70%);
    pointer-events: none
}

/* === BUTTONS === */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: var(--r);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s var(--ease);
    letter-spacing: .3px
}

.btn:active {
    transform: scale(0.97)
}

.btn-p {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 81, 44, 0.25)
}

.btn-o {
    background: var(--glass);
    color: var(--text);
    border: 1.5px solid rgba(0, 81, 44, 0.2)
}

.btn-d {
    background: var(--danger-bg);
    color: var(--danger)
}

.btn-ghost {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    color: var(--primary);
    font-size: 14px;
    padding: 8px 0
}

/* === INPUTS === */
.fg {
    margin-bottom: 14px
}

.fl {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    margin-bottom: 6px;
    letter-spacing: .5px;
    text-transform: uppercase
}

.fw {
    position: relative
}

.fw svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-4);
    pointer-events: none
}

.fi {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1.5px solid rgba(0, 81, 44, 0.15);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    color: var(--text);
    background: var(--glass);
    transition: all .2s
}

.fi:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow)
}

.fi::placeholder {
    color: var(--text-4)
}

.fi-plain {
    padding-left: 16px !important
}

select.fi {
    appearance: none;
    cursor: pointer;
    background: var(--bg-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%238A8A9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 14px center
}

/* === BADGES === */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px
}

.b-ok {
    background: var(--success-bg);
    color: var(--success)
}

.b-err {
    background: var(--danger-bg);
    color: var(--danger)
}

.b-warn {
    background: var(--warning-bg);
    color: var(--warning)
}

.b-dark {
    background: var(--glass);
    color: var(--text-2)
}

/* === HEADER === */
.hdr {
    padding: 16px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 50
}

.hdr h2 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.3px
}

.hdr-x {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.hdr-x svg {
    color: var(--text-3)
}

/* === FLOATING BOTTOM NAV — Premium Mobile Fix === */
.btm {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    /* 64 y no 68: con el contenido en 45px, 68 dejaba 24px de aire muerto y
       los destinos se veían chicos flotando en una barra alta. Sigue siendo
       zona táctil de sobra (el mínimo cómodo son 44px). */
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    z-index: 100;
    border-radius: 0;
}

.ni {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    transition: all .2s var(--ease);
    padding: 8px 0;
    -webkit-tap-highlight-color: transparent;
}

.ni svg {
    width: 25px;
    height: 25px;
    /* Antes var(--text-4) (#94A3B8), que sobre blanco da 2.5:1 y hacia ver la
       barra desteñida. #64748B da 4.6:1 y los iconos se leen de verdad. */
    color: var(--text-3);
    transition: all .2s var(--ease);
    position: relative;
    z-index: 1;
}

.ni span {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-4);
    transition: all .2s var(--ease);
    letter-spacing: 0.1px;
}

/* #00512C es identidad, no relleno: dentro de la app el verde que trabaja es
   el esmeralda profundo. */
.ni.on svg {
    color: #047857;
}

.ni.on span {
    color: #047857;
    font-weight: 700;
}

/* El destino activo se marca con una pastilla detrás del icono, no con una
   raya de 3px arriba. Es el patrón que ya usa el sistema —un icono vive dentro
   de una pastilla de color tenue de su familia— y de paso llena el hueco que
   dejaba un contenido de 40px dentro de una barra de 68. */
.ni.on::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 9px));
    width: 44px;
    max-width: 86%;
    height: 32px;
    border-radius: var(--r-full);
    background: var(--primary-soft);
    z-index: 0;
}

/* === DESKTOP SIDEBAR NAV (uses same .ni markup) === */
body.sidebar-open #rc-sidebar #sb-items {
    padding: 10px 0;
}

body.sidebar-open #rc-sidebar .ni {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin: 2px 10px;
    border-radius: 14px;
    color: var(--text-3);
}

body.sidebar-open #rc-sidebar .ni svg {
    width: 20px;
    height: 20px;
    color: var(--text-4);
}

body.sidebar-open #rc-sidebar .ni span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-3);
}

body.sidebar-open #rc-sidebar .ni.on {
    background: rgba(0, 81, 44, 0.10);
}

body.sidebar-open #rc-sidebar .ni.on svg,
body.sidebar-open #rc-sidebar .ni.on span {
    color: #00512C;
}

body.sidebar-open #rc-sidebar .ni.on::before {
    display: none;
}

/* === DOTS === */
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0
}

.dot-g {
    background: var(--primary)
}

.dot-r {
    background: var(--danger)
}

/* === AVATAR === */
.av {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0
}

.av-lg {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    font-size: 26px
}

.av-gr {
    background: var(--success-bg);
    color: var(--success)
}

.av-rd {
    background: var(--danger-bg);
    color: var(--danger)
}

/* === QUICK ACTIONS === */
.qa {
    display: flex;
    gap: 12px;
    margin: 16px 0
}

.qa-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--bg-white);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all .2s;
    border: none;
    font-family: inherit
}

.qa-btn:active {
    transform: scale(0.96)
}

.qa-btn .qa-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center
}

.qa-btn .qa-ico svg {
    width: 20px;
    height: 20px;
    color: var(--primary)
}

.qa-btn span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .3px
}

/* === LIST === */
.li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-2);
    cursor: pointer;
    transition: background .15s
}

.li:last-child {
    border-bottom: none
}

.li-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.li-ico svg {
    width: 20px;
    height: 20px
}

.li-t {
    font-weight: 600;
    font-size: 14px
}

.li-s {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 1px
}

.li-r {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    margin-left: auto
}

.li-arr {
    color: var(--text-4);
    margin-left: 4px
}

.li-arr svg {
    width: 16px;
    height: 16px
}

/* === METRIC === */
.m-xl {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1
}

.m-lg {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.5px
}

.m-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .8px
}

.m-white {
    color: #fff
}

.m-green {
    color: var(--primary)
}

/* === PROGRESS === */
.prog {
    height: 6px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden
}

.prog-fill {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 6px;
    transition: width .8s var(--ease)
}

/* === BAR CHART === */
.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 0 24px
}

.bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
    transition: height .5s var(--ease);
    position: relative;
    min-height: 4px
}

.bar-l {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap
}

/* === SCROLL === */
.sa {
    padding: 0 20px calc(var(--nav-h) + 40px);
    flex: 1;
    overflow-y: auto
}

.sa-auth {
    padding: 32px 20px 40px
}

/* ═══════════════════════════════════════════════════
   Login Screen v2 — Pixel-Perfect
   ═══════════════════════════════════════════════════ */
.lg-wrap {
    /* Break out of .phone (430px) so it scales properly on desktop */
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 5;
    background: var(--bg);
    display: grid;
    grid-template-columns: minmax(0, 420px);
    grid-auto-rows: max-content;
    justify-content: center;
    align-content: start;
    gap: 0;
    padding: 44px 22px 32px;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}
.lg-wrap > .lg-header,
.lg-wrap > .lg-card,
.lg-wrap > .lg-footer,
.lg-wrap > .lg-bg-glow {
    width: 100%;
}
.lg-wrap > .lg-bg-glow {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}
@media (min-width: 768px) {
    .lg-wrap {
        align-content: center;
        padding: 48px 22px 48px;
        grid-template-columns: minmax(0, 440px);
    }
}
.lg-bg-glow {
    position: absolute; inset: 0;
    background:
      radial-gradient(800px 420px at 80% 0%, rgba(16,185,129,.06), transparent 60%),
      radial-gradient(700px 520px at 0% 100%, rgba(5,150,105,.05), transparent 60%);
    pointer-events: none;
}
.lg-header { position: relative; z-index: 1; }
.lg-toprow { display: flex; align-items: center; gap: 12px; }
.lg-back{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-3);
    box-shadow: var(--shadow-soft);
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
}
.lg-back:hover{ background: #FAFAFA; border-color: rgba(16,185,129,0.25); color: var(--text); }
.lg-back:active{ transform: scale(0.98); }
.lg-stepKicker{
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-4);
    font-weight: 700;
    font-family: var(--font-mono);
}
.lg-stepTitle{
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}
.lg-brandRow { display: flex; align-items: center; gap: 12px; }
.lg-logo {
    width: 44px; height: 44px; object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(16,185,129,0.25));
}
.lg-brandText { display: flex; flex-direction: column; gap: 2px; }
.lg-brandName {
    font-size: 22px; font-weight: 600; color: var(--text);
    letter-spacing: -0.03em; line-height: 1.05;
    font-family: var(--font-display);
}
.lg-brandKicker {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-700);
    font-family: var(--font-mono);
    font-weight: 500;
}
.lg-hero { margin-top: 56px; }
.lg-heroTitle {
    font-size: 32px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text);
    font-family: var(--font-display);
}
.lg-heroDesc {
    font-size: 14px; color: var(--text-3);
    margin-top: 12px; font-weight: 400; line-height: 1.6;
    letter-spacing: -0.005em;
}

/* ── Form Card ── */
.lg-card {
    width: 100%;
    background: var(--bg-white);
    border-radius: 28px;
    padding: 24px 22px;
    margin-top: 28px;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-card);
    position: relative; z-index: 1;
}
.lg-error {
    background: #FEF2F2; border: 1px solid #FECACA;
    color: #DC2626; border-radius: 12px;
    padding: 12px 16px; margin-bottom: 16px;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}
.lg-field { display: block; margin-top: 14px; }
.lg-field:first-child { margin-top: 0; }
.lg-labelRow {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    margin-left: 2px;
}
.lg-label {
    display: inline-block;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 500;
    font-family: var(--font-mono);
}
.lg-forgot {
    font-size: 13px; font-weight: 500; color: var(--brand-600);
    cursor: pointer; transition: opacity .2s;
}
.lg-forgot:hover { opacity: 0.75; }
.lg-input-wrap {
    position: relative;
    margin-top: 8px;
}
.lg-input-icon {
    position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%); pointer-events: none;
    color: var(--text-4);
}
.lg-input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 48px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    font-size: 15px;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    color: var(--text);
    background: #F1F5F9;
    outline: none;
    transition: all .15s var(--ease);
}
.lg-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
    background: #FFFFFF;
}
.lg-input::placeholder { color: var(--text-4); }
.lg-eye {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    background: none; border: 0; cursor: pointer;
    padding: 4px; display: flex; align-items: center;
    color: var(--text-4);
}

/* ── Primary Button ── */
.lg-btn-primary {
    width: 100%; height: 52px; border-radius: 14px;
    background: var(--brand-500); color: #fff;
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
    border: 0; cursor: pointer; font-family: var(--font-display);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .2s ease; margin-top: 8px;
    box-shadow: var(--shadow-brand);
}
.lg-btn-primary:hover { background: var(--brand-600); }
.lg-btn-primary:active { transform: scale(0.98); }
.lg-btn-primary.loading { pointer-events: none; opacity: 0.8; }
.lg-spinner {
    width: 22px; height: 22px; border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%;
    animation: lgSpin .6s linear infinite;
}
@keyframes lgSpin { to { transform: rotate(360deg); } }

/* ── Divider ── */
.lg-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0;
}
.lg-divider-line { flex: 1; height: 1px; background: var(--border); }
.lg-divider-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    font-family: var(--font-mono);
}

/* ── Google Button ── */
.lg-btn-google {
    width: 100%; height: 52px; border-radius: 14px;
    background: var(--bg-white); color: var(--text);
    font-size: 14px; font-weight: 500;
    border: 1.5px solid var(--border); cursor: pointer;
    font-family: var(--font-display); letter-spacing: -0.01em;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all .2s ease;
    box-shadow: var(--shadow-soft);
}
.lg-btn-google:hover { border-color: var(--text-4); background: #FAFAFA; }
.lg-btn-google:active { transform: scale(0.98); }

/* ── Footer ── */
.lg-footer {
    margin-top: 32px; text-align: center;
    position: relative; z-index: 1;
}
.lg-footer-reg {
    font-size: 13px; color: var(--text-3); margin-bottom: 16px;
}
.lg-link { color: var(--brand-600); font-weight: 600; cursor: pointer; }
.lg-link:hover { text-decoration: underline; }
.lg-footer-legal {
    display: flex; justify-content: center; gap: 24px;
    font-size: 12px; color: var(--text-4); font-weight: 400;
}

.sa-full {
    padding: 0 20px 40px
}

/* ── Resident Code Entry (rce-*) ── */
.rce-code-input {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 17px;
}
.rce-code-input::placeholder {
    letter-spacing: 0.12em;
    font-weight: 400;
    color: var(--text-4);
}
.rce-preview {
    margin-top: 14px;
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: 14px;
    padding: 14px 16px;
    animation: rceFade .25s var(--ease) both;
}
@keyframes rceFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.rce-preview-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.rce-preview-icon {
    width: 22px; height: 22px; border-radius: 8px;
    background: var(--brand-500); color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rce-preview-kicker {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--brand-700);
    font-weight: 500;
}
.rce-preview-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-900);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.rce-preview-slots {
    font-size: 12px;
    color: var(--brand-700);
    font-weight: 500;
    font-family: var(--font-mono);
}

/* Forgot success state */
.lg-success {
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    color: var(--brand-800);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lg-success svg {
    flex-shrink: 0;
    color: var(--brand-600);
}

/* ============================================================
   WELCOME SCREEN — Role bifurcation (Manager / Resident)
   Mobile-first, centered both axes, scales up to desktop
   ============================================================ */
.wlc-stage {
    /* Break out of .phone container (430px) so it centers in full viewport */
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: var(--bg);
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 5;
}
.wlc-bg-glow {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(800px 420px at 80% 5%, rgba(16,185,129,0.08), transparent 60%),
      radial-gradient(700px 520px at 0% 100%, rgba(5,150,105,0.06), transparent 60%);
    pointer-events: none;
}
.wlc-card-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Brand block */
.wlc-brand {
    text-align: center;
    margin-bottom: 36px;
}
.wlc-logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
    filter: drop-shadow(0 14px 32px rgba(5,150,105,0.30));
}
.wlc-brand-name {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.05;
    font-family: var(--font-display);
}
.wlc-brand-tag {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-700);
    font-family: var(--font-mono);
    font-weight: 500;
    margin-top: 8px;
}

/* Eyebrow */
.wlc-eyebrow {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-4);
    font-family: var(--font-mono);
    margin-bottom: 14px;
}

/* Role cards (button reset + base) */
.wlc-role {
    width: 100%;
    border: 0;
    border-radius: 22px;
    padding: 0;
    margin-bottom: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wlc-role:hover { transform: translateY(-2px); }
.wlc-role:active { transform: translateY(0) scale(0.99); }
.wlc-role:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 3px;
}

.wlc-role-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

/* Manager (primary, gradient) */
.wlc-role-primary {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 60%, var(--brand-700) 110%);
    box-shadow: var(--shadow-brand);
}
.wlc-role-primary:hover { box-shadow: 0 14px 30px rgba(16,185,129,0.40); }
.wlc-role-deco {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    pointer-events: none;
}
.wlc-role-deco-1 { top: -50px; right: -50px; width: 160px; height: 160px; }
.wlc-role-deco-2 { bottom: -40px; left: -40px; width: 100px; height: 100px; background: rgba(255,255,255,0.07); }

/* Resident (secondary, white) */
.wlc-role-secondary {
    background: #FFFFFF;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-card);
}
.wlc-role-secondary:hover { box-shadow: var(--shadow-float); border-color: var(--border); }

/* Icon containers */
.wlc-role-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wlc-role-icon-primary {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.wlc-role-icon-secondary {
    background: var(--brand-50);
    color: var(--brand-700);
}

/* Body */
.wlc-role-body {
    flex: 1;
    min-width: 0;
}
.wlc-role-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.2;
}
.wlc-role-title-light { color: #FFFFFF; }
.wlc-role-sub {
    font-size: 12.5px;
    color: var(--text-3);
    margin-top: 4px;
    line-height: 1.4;
    font-weight: 400;
}
.wlc-role-sub-light { color: rgba(255,255,255,0.86); }

/* Arrow */
.wlc-role-arrow {
    color: #CBD5E1;
    flex-shrink: 0;
    transition: transform .18s var(--ease);
}
.wlc-role-arrow-light { color: rgba(255,255,255,0.85); }
.wlc-role:hover .wlc-role-arrow { transform: translateX(3px); }

/* Legal */
.wlc-legal {
    text-align: center;
    font-size: 12px;
    color: var(--text-4);
    font-weight: 400;
    margin-top: 28px;
    line-height: 1.5;
}
.wlc-legal-link {
    color: var(--brand-600);
    font-weight: 600;
    cursor: pointer;
}
.wlc-legal-link:hover { text-decoration: underline; }

/* Inline text button (logout, etc.) */
.wlc-text-btn {
    background: none;
    border: 0;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 12px 16px;
    margin: 16px auto 0;
    display: block;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: color .15s var(--ease);
}
.wlc-text-btn:hover { color: var(--brand-700); }

/* Desktop refinements */
@media (min-width: 768px) {
    .wlc-card-wrap { max-width: 440px; }
    .wlc-logo { width: 92px; height: 92px; }
    .wlc-brand-name { font-size: 38px; }
    .wlc-role-inner { padding: 22px; }
    .wlc-role-icon { width: 56px; height: 56px; border-radius: 18px; }
    .wlc-role-title { font-size: 18px; }
}

/* Sidebar-mode override (when logged in another tab is showing sidebar — welcome shouldn't shift) */
body.sidebar-open .wlc-stage { padding-left: 20px; padding-right: 20px; }

/* === MASTER PORTAL v2 UPDATES === */
.m-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.m-stat {
    flex: 1;
    padding: 16px 12px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.m-stat-1 {
    background: rgba(0, 81, 44, 0.1);
    color: #4ADE80;
    border: 1px solid rgba(0, 81, 44, 0.12);
}

.m-stat-2 {
    background: rgba(245, 158, 11, 0.1);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.12);
}

.m-stat-3 {
    background: rgba(239, 68, 68, 0.1);
    color: #F87171;
    border: 1px solid rgba(239, 68, 68, 0.12);
}

.m-stat-val {
    font-size: 24px;
    font-weight: 800;
    display: block;
}

.m-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .8;
}

.condo-card {
    background: var(--bg-white);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
    position: relative;
}

.condo-img-w {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
}

.condo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.condo-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.cb-act {
    background: rgba(0, 81, 44, 0.9);
    color: #fff;
}

.cb-tri {
    background: rgba(245, 158, 11, 0.9);
    color: #fff;
}

.cb-sus {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

.condo-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.condo-meta {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 16px;
}

.condo-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-2);
}

.condo-info-row svg {
    width: 16px;
    height: 16px;
    color: var(--text-4);
}

.condo-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.btn-sm-o {
    padding: 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.prog-w {
    margin: 12px 0;
}

.prog-lbl-w {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.prog-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-3);
}

.prog-val {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
}

/* === SEARCH & FILTERS === */
.search-w {
    position: relative;
    margin: 16px 0;
}

.search-w svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-4);
    width: 20px;
}

.search-w input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass);
    box-shadow: var(--shadow);
    font-size: 14px;
    outline: none;
    color: var(--text);
    font-family: inherit;
}
.search-w input::placeholder { color: var(--text-4); }
.search-w input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }

.chip-row {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    margin: 12px 0 20px;
    padding-bottom: 4px;
}

.chip-row::-webkit-scrollbar {
    display: none;
}

.chip {
    padding: 8px 16px;
    border-radius: 99px;
    background: var(--glass);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.chip.on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* === CARD HERO V2 === */
.hero-v2 {
    background: var(--glass);
    backdrop-filter: blur(12px);
    border-radius: 40px;
    padding: 38px 28px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    margin: 20px 0;
    position: relative;
    border: 1px solid rgba(0, 81, 44, 0.1);
}

.hero-v2 .badge-t {
    position: absolute;
    top: 28px;
    right: 28px;
    background: var(--primary-soft);
    color: var(--primary);
    padding: 7px 14px;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* === GRID ACTIONS === */
.grid-qa {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin: 20px 0;
}

.qa-v2 {
    aspect-ratio: 1/1;
    background: var(--glass);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 81, 44, 0.1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.qa-v2 .ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(0, 81, 44, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qa-v2 span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
}

/* === STAT PILLS === */
.pill-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.pill {
    flex: 1;
    padding: 16px;
    border-radius: 24px;
    text-align: center;
}

/* === CONDO LIST V2 === */
.cd-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cd-card {
    background: var(--bg-white);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.cd-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.cd-stat {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary);
    color: #fff;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.cd-bod {
    padding: 20px 24px 24px;
}

.cd-tit {
    font-size: 19px;
    font-weight: 900;
    margin-bottom: 4px;
}

.cd-inf {
    color: var(--text-3);
    font-size: 13px;
    margin-bottom: 16px;
}

.cd-prog-w {
    margin: 16px 0;
}

.cd-bar {
    height: 8px;
    background: var(--border-2);
    border-radius: 4px;
    overflow: hidden;
}

.cd-bar-f {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 81, 44, 0.3);
}

.cd-ops {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.cd-op {
    background: var(--glass);
    border: 1.5px solid var(--glass-border);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
}

/* === HEALTH CHECK === */
.health-w {
    background: var(--bg-white);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow);
    margin: 16px 0;
}

.health-i {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-2);
}

.health-i:last-child {
    border: 0;
}

.health-l {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

.health-l svg {
    color: var(--primary);
}

.health-v {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-4);
}

/* === FLOATING ACTION BUTTON === */
.fab {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background: var(--primary-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 81, 44, 0.4);
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    z-index: 101;
    transition: transform .2s var(--ease);
}

.fab-add:active {
    transform: scale(0.9);
}

.modal {
    position: fixed;
    inset: 0;
    max-width: 430px;
    margin: auto;
    background: rgba(13, 27, 42, 0.4);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
}

.modal-content {
    width: 100%;
    background: var(--bg);
    border-radius: 30px 30px 0 0;
    padding: 30px 20px 40px;
    animation: slideUp .4s var(--ease);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.modal-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.modal-hdr h1 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.5px;
}

/* === END MASTER PORTAL v2 UPDATES === */

/* === SECTION === */
.sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 12px
}

.sec-t {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px
}

.sec-a {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer
}

/* === ALERT === */
.alert {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    display: none;
    text-align: center;
    animation: in .3s
}

.al-err {
    background: var(--danger-bg);
    color: var(--danger)
}

.al-ok {
    background: var(--success-bg);
    color: var(--success)
}

/* === PAY METHOD === */
.pm {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 10px
}

.pm.sel {
    border-color: var(--primary);
    background: rgba(0, 81, 44, 0.02)
}

.pm-chk {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    color: #fff;
    transition: all .2s
}

.pm.sel .pm-chk {
    background: var(--primary);
    border-color: var(--primary)
}

/* === SEARCH === */
.search {
    position: relative;
    margin-bottom: 16px
}

.search .fi {
    padding-left: 42px;
    border-radius: 14px
}

.search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-4)
}

/* === CHECKBOX === */
.chk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    margin: 12px 0
}

.chk input {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    cursor: pointer
}

/* === SPLASH === */
.splash-bg {
    background: var(--dark-gradient);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.splash-bg::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 81, 44, 0.06) 0%, transparent 70%);
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

@keyframes loadbar {
    0% {
        width: 0
    }

    60% {
        width: 75%
    }

    100% {
        width: 95%
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes checkPop {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(1.12)
    }

    100% {
        transform: scale(1)
    }
}

/* === STAT GRID === */
.stat {
    text-align: center;
    padding: 18px 12px
}

.stat-v {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px
}

.stat-l {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 4px
}

/* === GRID === */
.g2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.g3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px
}

/* === EMPTY === */
.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-3)
}

.empty svg {
    width: 48px;
    height: 48px;
    opacity: .3;
    margin-bottom: 12px
}

/* Dark mode overrides removed — app uses single dark-green theme via :root */

/* === MODALS & DRAWERS === */
.mdl {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: all .3s var(--ease)
}

.mdl.on {
    opacity: 1;
    pointer-events: auto
}

.mdl-c {
    background: #FFFFFF;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 81, 44, 0.12);
    width: 100%;
    max-width: 380px;
    border-radius: 32px;
    padding: 32px;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    transition: all .3s var(--ease)
}

.mdl.on .mdl-c {
    transform: translateY(0)
}

.drawer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    z-index: 1001;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: all .3s var(--ease)
}

.drawer.on {
    opacity: 1;
    pointer-events: auto
}

.drawer-c {
    background: #FFFFFF;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 81, 44, 0.12);
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    border-radius: 32px 32px 0 0;
    padding: 32px;
    transform: translateY(100%);
    transition: all .4s cubic-bezier(0.16, 1, 0.3, 1)
}

.drawer.on .drawer-c {
    transform: translateY(0)
}

.st-fg {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.st-i {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    width: 100%
}

.theme-toggle:active {
    transform: scale(.9)
}

.theme-toggle svg {
    width: 18px;
    height: 18px
}

/* === MISSING UTILITIES === */
.av-sm {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.av-sm svg {
    width: 18px;
    height: 18px;
}

.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(0, 81, 44, 0.35);
    z-index: 110;
    transition: transform .2s, box-shadow .2s;
    line-height: 1;
}

.fab:active {
    transform: scale(0.93);
    box-shadow: 0 2px 12px rgba(0, 81, 44, 0.2);
}

.card-w {
    position: relative;
}

/* ============================================================
   MEJORA 2 — RESPONSIVE DESKTOP SIDEBAR
   ============================================================ */
@media (min-width: 768px) {
    body {
        max-width: 100%;
        display: flex;
        background: #f1f5f9;
    }

    /* Sidebar lateral fijo */
    .sidebar {
        display: flex;
        flex-direction: column;
        width: 240px;
        min-width: 240px;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: var(--bg-white);
        border-right: 1px solid var(--border-2);
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.04);
        z-index: 200;
        padding: 24px 0 32px;
    }

    .sidebar .sb-logo {
        padding: 0 24px 28px;
        border-bottom: 1px solid var(--border-2);
        margin-bottom: 16px;
        font-weight: 900;
        font-size: 18px;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sidebar .ni {
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 24px;
        border-radius: 0;
        margin: 2px 12px;
        border-radius: 12px;
    }

    .sidebar .ni svg {
        width: 20px;
        height: 20px;
    }

    .sidebar .ni span {
        font-size: 13px;
        font-weight: 600;
    }

    .sidebar .ni.on {
        background: var(--primary-soft);
    }

    .sidebar .sb-user {
        margin-top: auto;
        padding: 0 24px;
    }

    /* Ocultar bottom nav en desktop */
    .btm {
        display: none !important;
    }

    /* Contenido principal con margen del sidebar */
    .phone {
        margin-left: 240px;
        width: calc(100vw - 240px);
        display: flex;
        justify-content: center;
        min-height: 100vh;
        background: #f1f5f9;
    }

    /* Limitar ancho máximo del contenido */
    .screen {
        max-width: 800px;
        width: 100%;
        margin: 0;
        box-shadow: var(--shadow-lg);
        background: var(--bg-white);
        min-height: 100vh;
        border-radius: 0;
    }

    /* Ajustar overlay loader */
    .ov {
        left: 240px;
        max-width: 800px;
    }

    /* Ajustar modal */
    .mdl {
        left: 240px;
    }

    /* Sidebar item hover & active states */
    .sidebar .ni {
        transition: background .15s ease, color .15s ease;
    }

    .sidebar .ni:hover {
        background: var(--border-2);
    }

    .sidebar .ni.on {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .sidebar .ni.on svg {
        stroke: var(--primary);
    }

    .sidebar .ni.on span {
        color: var(--primary);
        font-weight: 800;
    }

    /* Snackbar: center on the content area (right of sidebar) — top */
    .snackbar {
        left: calc(240px + (100vw - 240px) / 2);
        top: 16px;
        bottom: auto;
    }

    /* Quick-action buttons: 3-up grid that looks better on desktop */
    .grid-qa {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   MEJORA 4 — VALIDACIONES VISUALES
   ============================================================ */
.fi.error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.fi.valid {
    border-color: var(--success) !important;
}

.field-err {
    font-size: 11px;
    color: var(--danger);
    font-weight: 600;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: fadeIn .2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Botón con loading state */
.btn-loading {
    opacity: 0.75;
    pointer-events: none;
    cursor: not-allowed;
}

.btn-loading::after {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   MEJORA 3 — EMPTY STATES
   ============================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    gap: 16px;
}

.empty-state .es-icon {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.empty-state .es-icon svg {
    width: 36px;
    height: 36px;
    color: var(--text-4);
}

.empty-state h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.empty-state p {
    font-size: 13px;
    color: var(--text-4);
    line-height: 1.5;
    max-width: 220px;
    margin: 0;
}

/* ============================================================
   MEJORA 4 — SNACKBAR
   ============================================================ */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === TOAST NOTIFICATIONS (top of screen) === */
.snackbar {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: 13px 22px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
}

.snackbar.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.snackbar.success {
    background: rgba(22, 163, 74, 0.95);
    border-color: rgba(34, 197, 94, 0.3);
}

.snackbar.error {
    background: rgba(220, 38, 38, 0.95);
    border-color: rgba(239, 68, 68, 0.3);
}

.snackbar.info {
    background: rgba(59, 130, 246, 0.95);
    border-color: rgba(96, 165, 250, 0.3);
}

/* ============================================================
   MEJORA 5 — CONFIRM DIALOG
   ============================================================ */
.confirm-dialog {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 980;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.confirm-dialog.open {
    opacity: 1;
    pointer-events: all;
}

.confirm-sheet {
    background: var(--bg-white);
    border-radius: 28px 28px 20px 20px;
    padding: 28px 24px;
    width: 100%;
    max-width: 420px;
    transform: translateY(30px);
    transition: transform .3s var(--ease);
    text-align: center;
}

.confirm-dialog.open .confirm-sheet {
    transform: translateY(0);
}

.confirm-sheet h3 {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 8px;
}

.confirm-sheet p {
    font-size: 14px;
    color: var(--text-3);
    margin-bottom: 24px;
    line-height: 1.5;
}

.confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ============================================================
   NUEVA COMUNIDAD — MODAL FULLSCREEN
   ============================================================ */
.screen-modal {
    position: fixed;
    inset: 0;
    background: var(--bg-white);
    z-index: 500;
    display: none;
    flex-direction: column;
    max-width: 800px;
}

.screen-modal.open {
    display: flex;
    animation: in .3s var(--ease) forwards;
}

/* --- CONFIRM DIALOG --- */
.confirm-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; padding: 20px; }
.confirm-dialog.open { opacity: 1; pointer-events: auto; }
.confirm-sheet { background: #FFFFFF; border: 1px solid var(--border); width: 100%; max-width: 400px; border-radius: 28px; padding: 32px 24px 24px; text-align: center; box-shadow: var(--shadow-lg); transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.confirm-dialog.open .confirm-sheet { transform: translateY(0) scale(1); }
.confirm-sheet h3 { font-size: 20px; font-weight: 900; color: var(--text); margin-bottom: 8px; letter-spacing: -0.5px; }
.confirm-sheet p { font-size: 14px; color: var(--text-3); line-height: 1.5; margin-bottom: 28px; }
.confirm-actions { display: flex; gap: 12px; }
.confirm-actions button { flex: 1; height: 52px; border-radius: 16px; font-size: 15px; font-weight: 800; border: none; cursor: pointer; }

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skel {
    background: linear-gradient(90deg, rgba(34,197,94,0.06) 25%, rgba(34,197,94,0.12) 50%, rgba(34,197,94,0.06) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
.skel-card {
    background: var(--bg-white);
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 12px;
    border: 1px solid var(--border-2);
}
.skel-h { height: 14px; margin-bottom: 8px; }
.skel-h-sm { height: 10px; width: 60%; }
.skel-hero { height: 180px; border-radius: 24px; margin-bottom: 16px; }
.skel-avatar { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.skel-line { height: 12px; border-radius: 6px; }
.skel-btn { height: 52px; border-radius: 16px; }

/* ============================================================
   5-ITEM BOTTOM NAV — compact mode
   ============================================================ */
.btm .ni {
    flex: 1;
    min-width: 0;
}
.btm .ni span {
    /* Tope real: con 7 destinos y "Residentes" (la etiqueta más larga), a
       360px no cabe nada mayor. El peso y el color hacen el trabajo que no
       puede hacer el tamaño. */
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

/* Dark mode overrides removed — single dark-green theme */

/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skel { animation: none !important; }
}

/* ═══════════════════════════════════════════════
   RESIDENT DASHBOARD v3 — Premium Dark Fintech
   ═══════════════════════════════════════════════ */

/* ── Dashboard top bar ── */
.rd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.rd-greeting { font-size: 12px; color: var(--text-3); font-weight: 500; letter-spacing: 0.3px; }
.rd-greeting strong { color: var(--text); font-weight: 900; font-size: 20px; display: block; margin-top: 3px; letter-spacing: -0.3px; }
.rd-community { font-size: 14px; color: var(--primary); font-weight: 600; }
.rd-topbar-actions { display: flex; align-items: center; gap: 8px; }
.rd-icon-btn {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text-3);
    transition: all .2s var(--ease);
}
.rd-icon-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: rgba(34,197,94,0.25); }
.rd-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 16px; height: 16px;
    background: #EF4444; border-radius: 10px;
    font-size: 9px; font-weight: 900; color: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg);
}

/* ── Balance Hero Card ── */
.rd-hero {
    margin: 8px 16px 20px;
    border-radius: 24px;
    padding: 28px 24px 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #003D21 0%, #00512C 50%, #006B3C 100%);
    border: none;
    box-shadow: 0 8px 32px rgba(0, 81, 44, 0.25);
}
.rd-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 81, 44, 0.1) 0%, transparent 70%);
    pointer-events: none;
}
.rd-hero::after {
    content: '';
    position: absolute;
    bottom: -50px; left: -30px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 81, 44, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.rd-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    position: relative; z-index: 1;
}
.rd-community {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-light);
    letter-spacing: 0.3px;
}
.rd-status-badge {
    border-radius: var(--r-full);
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rd-status-badge.paid {
    background: rgba(0, 81, 44, 0.15);
    color: #4ADE80;
    border: 1px solid rgba(0, 81, 44, 0.2);
}
.rd-status-badge.pending {
    background: rgba(249, 115, 22, 0.15);
    color: #FB923C;
    border: 1px solid rgba(249, 115, 22, 0.2);
}
.rd-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    animation: statusPulse 2s ease-in-out infinite;
}
.rd-status-badge.paid .rd-status-dot { background: #4ADE80; }
.rd-status-badge.pending .rd-status-dot { background: #FB923C; }

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.rd-balance-section { position: relative; z-index: 1; margin-bottom: 24px; }
.rd-balance-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.rd-balance {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rd-balance .currency { font-size: 24px; font-weight: 700; opacity: 0.6; margin-right: 2px; vertical-align: top; line-height: 1.4; }
.rd-balance .cents { font-size: 22px; font-weight: 700; opacity: 0.4; }
.rd-last-pay {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Hero Action Buttons ── */
.rd-hero-actions {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.rd-pay-btn {
    flex: 1;
    height: 50px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
    font-family: inherit;
    letter-spacing: 0.3px;
    transition: all .2s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.rd-pay-btn.active {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 81, 44, 0.3);
}
.rd-pay-btn.active:active { transform: scale(0.97); }
.rd-pay-btn.disabled {
    background: rgba(0, 81, 44, 0.1);
    color: rgba(0, 81, 44, 0.5);
    cursor: default;
}
.rd-secondary-btn {
    height: 50px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-3);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    transition: all .2s var(--ease);
}
.rd-secondary-btn:hover { border-color: var(--primary); color: var(--text-2); }

/* ── Quick Actions ── */
.rd-section { padding: 0 16px; margin-bottom: 20px; }
.rd-section-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}
.rd-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.rd-qa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 14px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s var(--ease);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.rd-qa:active { transform: scale(0.95); }
.rd-qa:hover { background: var(--primary-soft); border-color: rgba(34,197,94,0.2); }
.rd-qa-icon {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 81, 44, 0.08);
}
.rd-qa-icon svg {
    width: 20px; height: 20px;
    stroke: var(--primary);
    stroke-width: 2;
    fill: none;
}
.rd-qa-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-align: center;
    line-height: 1.2;
}

/* ── WhatsApp / Receipt row ── */
.rd-receipt-row {
    margin: 0 16px 20px;
    display: flex;
    gap: 10px;
}
.rd-receipt-btn {
    flex: 1;
    height: 46px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-3);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s var(--ease);
}
.rd-receipt-btn:hover { border-color: var(--primary); color: var(--text-2); }
.rd-receipt-btn.wa {
    border-color: rgba(37, 211, 102, 0.2);
    color: #25D366;
    background: rgba(37, 211, 102, 0.06);
}
.rd-receipt-btn.wa:hover { background: rgba(37, 211, 102, 0.12); }

/* ── Bottom spacing for mobile nav ── */
.rd-bottom-spacer { height: 100px; }

/* ── Dashboard v2 ── */
.rd-av-ring {
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid var(--primary-soft); padding: 2px;
    display: flex; align-items: center; justify-content: center;
}
.rd-av-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 16px; cursor: pointer;
}
.rd-brand { color: var(--primary); font-weight: 900; font-size: 17px; letter-spacing: -0.3px; }
.rd-hero-label {
    font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6);
    letter-spacing: 2px; margin-bottom: 12px;
    position: relative; z-index: 1;
}
.rd-hero-circle-deco {
    position: absolute; top: -30px; right: -20px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.rd-vencimiento {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45);
    letter-spacing: 0.5px; margin-top: 10px; margin-bottom: 22px;
    position: relative; z-index: 1;
}
.rd-cta-btn {
    width: 100%; height: 52px; border-radius: 16px;
    background: #fff; color: #003D21;
    font-size: 15px; font-weight: 800; letter-spacing: 0.5px;
    border: 0; cursor: pointer; font-family: inherit;
    position: relative; z-index: 1;
    transition: all .2s var(--ease);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.rd-cta-btn:active { transform: scale(0.97); }
.rd-cta-btn.disabled {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.5);
    cursor: default; box-shadow: none;
}
.rd-card {
    background: var(--bg-white); border-radius: 20px;
    padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.rd-card-title { font-size: 16px; font-weight: 800; color: var(--text); }
.rd-card-sub { font-size: 12px; color: var(--text-4); margin-top: 4px; }
.rd-percent { font-size: 22px; font-weight: 900; color: var(--primary); }
.rd-progress-bar {
    height: 10px; background: var(--glass);
    border-radius: 6px; overflow: hidden; margin-top: 14px;
}
.rd-progress-fill {
    height: 100%; background: var(--primary);
    border-radius: 6px; transition: width .6s ease;
}
.rd-progress-footer {
    display: flex; justify-content: space-between; margin-top: 10px;
    font-size: 12px; color: var(--text-4);
}
.rd-progress-footer span:first-child { font-weight: 600; color: var(--text-3); }
.rd-action-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin: 0 16px 12px;
}
.rd-action-card { cursor: pointer; padding: 20px 16px; transition: all .2s var(--ease); }
.rd-action-card:active { transform: scale(0.97); }
.rd-aicon {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.rd-aicon.yellow { background: #FEF9C3; }
.rd-aicon.yellow svg { stroke: #CA8A04; }
.rd-aicon.green { background: var(--primary-soft); }
.rd-aicon.green svg { stroke: var(--primary); }
.rd-atitle { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.rd-asub { font-size: 12px; color: var(--text-4); font-weight: 500; line-height: 1.4; }
.rd-prow {
    display: flex; align-items: center; gap: 16px;
    cursor: pointer; margin: 0 16px 20px;
    transition: all .2s var(--ease);
}
.rd-prow:active { transform: scale(0.98); }
.rd-prow .rd-aicon { margin-bottom: 0; flex-shrink: 0; }
.rd-news-section { padding: 0 16px; margin-bottom: 20px; }
.rd-stitle { font-size: 18px; font-weight: 900; color: var(--text); margin-bottom: 14px; }
.rd-news-card2 {
    border-radius: 20px; overflow: hidden; position: relative;
    cursor: pointer; background: var(--bg-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.rd-news-img2 {
    width: 100%; height: 160px;
    background: linear-gradient(135deg, #C6F6D5 0%, #68D391 50%, #38A169 100%);
    position: relative;
}
.rd-news-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 14px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.rd-news-tag2 {
    display: inline-block;
    background: var(--primary); color: #fff;
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 6px;
    margin-bottom: 6px;
}
.rd-news-headline {
    font-size: 15px; font-weight: 800; color: #fff; line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════
   Dashboard v3 — Pixel-Perfect Redesign
   ═══════════════════════════════════════════════════════ */

/* ── Top Bar ── */
/* ── Dashboard v3 — Lighter Green + Charts ── */
/* ═══════════ Dashboard v4 — Premium Fintech ═══════════ */

/* ════════════════════════════════════════════════════════
   NOTIFICACIONES — Bottom Sheet (única definición)
   ════════════════════════════════════════════════════════ */
.rd-notif-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999;
    background: rgba(15,23,42,0.55);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex !important;
    align-items: flex-end !important;
}
.rd-notif-overlay.open { opacity: 1 !important; visibility: visible !important; }

.rd-notif-panel {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: 100% !important;
    max-height: 82vh !important;
    background: #F8FAFC !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -8px 48px rgba(0,0,0,0.18) !important;
    transform: translateY(100%) !important;
    transition: transform .38s cubic-bezier(0.16,1,0.3,1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.rd-notif-overlay.open .rd-notif-panel { transform: translateY(0) !important; }

.rd-notif-panel::before {
    content: ''; display: block;
    width: 40px; height: 4px;
    background: #CBD5E1; border-radius: 2px;
    margin: 12px auto 0; flex-shrink: 0;
}
.rd-notif-header {
    display: flex !important;
    justify-content: space-between; align-items: center;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC; flex-shrink: 0;
    position: static !important;
}
.rd-notif-header h3 { font-size: 18px; font-weight: 900; color: #0F172A; margin: 0; }
.rd-notif-close {
    width: 34px; height: 34px; border-radius: 50%;
    background: #E2E8F0; border: 0; cursor: pointer;
    font-size: 18px; color: #64748B;
    display: flex; align-items: center; justify-content: center;
    transform: none !important; transition: background .15s;
    line-height: 1;
}
.rd-notif-close:hover { background: #CBD5E1; }

#rd-notif-list {
    flex: 1; overflow-y: auto; padding: 14px 14px 32px;
    scrollbar-width: thin; scrollbar-color: #E2E8F0 transparent;
    background: #F8FAFC;
}

.rd-notif-item {
    background: #fff; border-radius: 16px; padding: 14px 16px;
    margin-bottom: 10px; border-left: 4px solid #E2E8F0;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06);
    border-top: none; position: static;
}
.rd-notif-title { font-size: 14px; font-weight: 800; color: #0F172A; margin-bottom: 4px; padding-right: 0; }
.rd-notif-body  { font-size: 12px; color: #475569; line-height: 1.5; }
.rd-notif-meta  { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rd-notif-type  { font-size: 9px; font-weight: 900; padding: 3px 8px; border-radius: 6px; }
.rd-notif-date  { font-size: 10px; color: #94A3B8; margin-left: auto; }
.rd-notif-empty { text-align: center; padding: 48px 20px; color: #94A3B8; font-size: 14px; font-weight: 600; }

/* ── Notification Item v2 ── */
.nv2-item {
    background: #fff; border-radius: 18px; padding: 14px 16px;
    margin-bottom: 10px; border-left: 4px solid transparent;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06); transition: transform .15s;
}
.nv2-item:active { transform: scale(0.98); }
.nv2-item-top { display: flex; align-items: flex-start; gap: 12px; }
.nv2-icon {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 20px;
}
.nv2-item-main { flex: 1; min-width: 0; }
.nv2-item-label { font-size: 9px; font-weight: 900; letter-spacing: 0.8px; margin-bottom: 2px; }
.nv2-item-title { font-size: 14px; font-weight: 800; color: #0F172A; line-height: 1.3; }
.nv2-item-time  { text-align: right; flex-shrink: 0; }
.nv2-date { font-size: 11px; font-weight: 700; color: #64748B; }
.nv2-time { font-size: 10px; font-weight: 600; color: #94A3B8; }
.nv2-item-body  {
    font-size: 12px; font-weight: 600; color: #475569; line-height: 1.5;
    margin-top: 8px; background: #F8FAFC; border-radius: 10px; padding: 8px 12px;
}
.nv2-folio {
    display: inline-block; margin-top: 8px;
    font-size: 10px; font-weight: 900; color: #00512C;
    background: rgba(0,81,44,0.08); padding: 3px 10px; border-radius: 8px;
}
.nv2-loading { text-align: center; padding: 32px; color: #94A3B8; font-size: 13px; font-weight: 600; }
.nv2-empty { text-align: center; padding: 52px 20px; }
.nv2-empty-icon { font-size: 44px; margin-bottom: 12px; }
.nv2-empty-title { font-size: 15px; font-weight: 900; color: #0F172A; margin-bottom: 4px; }
.nv2-empty-sub  { font-size: 12px; font-weight: 600; color: #94A3B8; }

/* ════════════════════════════════════════════════════════════════
   RHN — Resident Home New: Clean PropTech Dashboard
   ════════════════════════════════════════════════════════════════ */
.rhn-wrap { background: var(--bg); min-height: 100vh; padding-bottom: 20px; font-family: var(--font-display); letter-spacing: -0.01em; }
.rhn-header { position: sticky; top: 0; z-index: 40; background: rgba(240,243,245,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-2); }
.rhn-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; max-width: 720px; margin: 0 auto; }
.rhn-h-left { display: flex; align-items: center; gap: 12px; }
.rhn-avatar { width: 44px; height: 44px; border-radius: 14px; background: var(--brand-700); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; flex-shrink: 0; box-shadow: var(--shadow-soft); cursor: pointer; font-family: var(--font-display); letter-spacing: -0.02em; }
.rhn-greet { line-height: 1.2; }
.rhn-greet-name { color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.rhn-greet-sub { color: var(--text-3); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.rhn-bell { position: relative; width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid var(--border-2); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: all .15s var(--ease); box-shadow: var(--shadow-soft); }
.rhn-bell:hover { background: #FAFAFA; border-color: var(--border); }
.rhn-bell:active { transform: scale(0.96); }
.rhn-bell-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; background: var(--danger); border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.rhn-bell-pulse { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; background: var(--danger); border-radius: 50%; animation: rhnPulse 2s ease-in-out infinite; }
@keyframes rhnPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0; } }
.rhn-main { padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; }
.rhn-hero { background: var(--hero-gradient); color: #E6FBF1; border-radius: 24px; padding: 24px 22px; box-shadow: 0 14px 38px rgba(5,55,39,0.30); position: relative; overflow: hidden; }
.rhn-hero-glow { position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; }
.rhn-hero-glow.pend { background: radial-gradient(circle, rgba(252,211,77,0.30), transparent 60%); }
.rhn-hero-glow.paid { background: radial-gradient(circle, rgba(52,211,153,0.40), transparent 60%); }
.rhn-hero-content { position: relative; z-index: 1; }
.rhn-hero-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.rhn-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,0.10); backdrop-filter: blur(6px); }
.rhn-status-dot { width: 7px; height: 7px; border-radius: 50%; }
.rhn-status-dot.pend { background: #FCD34D; }
.rhn-status-dot.paid { background: #6EE7B7; animation: rhnPulse 2s ease-in-out infinite; }
.rhn-status-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); }
.rhn-status-label.pend { color: #FDE68A; }
.rhn-status-label.paid { color: #BBF7D0; }
.rhn-detail-btn { background: rgba(255,255,255,0.10); border: 0; cursor: pointer; font-size: 11px; font-weight: 500; color: rgba(230,251,241,0.85); padding: 5px 10px; border-radius: 99px; backdrop-filter: blur(6px); transition: background .15s var(--ease); font-family: var(--font-display); }
.rhn-detail-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.rhn-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; font-family: var(--font-mono); }
/* El saldo encoge en pantallas angostas en vez de recortarse: a 48px fijos, un
   adeudo de seis cifras ya se cortaba en un teléfono de 360px. Arriba de 436px
   de ancho se queda en los 48px de siempre. */
.rhn-amount-whole { font-size: clamp(34px, 11vw, 48px); font-weight: 500; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.rhn-amount-cents { font-size: 22px; font-weight: 500; color: rgba(230,251,241,0.55); }
.rhn-amount-mxn { font-size: 12px; font-weight: 500; color: rgba(230,251,241,0.65); margin-left: 6px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.rhn-due { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; font-size: 12.5px; font-weight: 400; color: rgba(230,251,241,0.85); }
.rhn-due-accent { color: #FDE68A; font-weight: 600; }
.rhn-due svg { flex-shrink: 0; color: rgba(230,251,241,0.7); }
.rhn-due.paid svg { color: #6EE7B7; }
.rhn-pay-btn { width: 100%; height: 52px; background: #fff; color: var(--brand-900); border: 0; cursor: pointer; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 18px rgba(0,0,0,0.18); transition: all .2s var(--ease); font-family: var(--font-display); }
.rhn-pay-btn:hover { background: var(--brand-50); transform: translateY(-1px); }
.rhn-pay-btn:active { transform: scale(0.98); }
.rhn-pay-btn.paid { background: rgba(255,255,255,0.10); color: #fff; backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.rhn-pay-btn.paid:hover { background: rgba(255,255,255,0.18); }
.rhn-stripe-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 10.5px; font-weight: 400; color: rgba(230,251,241,0.55); font-family: var(--font-mono); letter-spacing: 0.04em; }
.rhn-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 540px) { .rhn-quick-grid { grid-template-columns: repeat(4, 1fr); } }
.rhn-quick { background: #fff; border-radius: 18px; padding: 16px 14px; border: 1px solid var(--border-2); cursor: pointer; text-align: left; box-shadow: var(--shadow-soft); transition: all .15s var(--ease); display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); }
.rhn-quick:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); border-color: var(--border); }
.rhn-quick:active { transform: scale(0.98); }
.rhn-quick-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; transition: background .15s var(--ease); }
.rhn-quick:hover .rhn-quick-icon { background: var(--brand-200); }
.rhn-quick-title { color: var(--text); font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
.rhn-quick-sub { color: var(--text-3); font-weight: 400; font-size: 11px; margin-top: 2px; }
.rhn-section-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0; }
.rhn-section-title { color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.rhn-section-link { background: none; border: 0; cursor: pointer; color: var(--brand-600); font-weight: 500; font-size: 12px; font-family: var(--font-display); letter-spacing: -0.005em; }
.rhn-section-link:hover { color: var(--brand-700); }
.rhn-comm { background: #fff; border: 1px solid var(--border-2); border-radius: 24px; padding: 22px; box-shadow: var(--shadow-card); }
.rhn-comm-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.rhn-comm-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.10em; color: var(--brand-700); font-family: var(--font-mono); }
.rhn-comm-title { color: var(--text); font-weight: 600; font-size: 16px; margin-top: 6px; letter-spacing: -0.02em; }
.rhn-comm-month { background: var(--brand-50); color: var(--brand-700); font-size: 10.5px; font-weight: 500; padding: 5px 10px; border-radius: 99px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.rhn-comm-fund { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; font-family: var(--font-mono); }
.rhn-comm-fund-whole { font-size: 32px; font-weight: 500; color: var(--text); letter-spacing: -0.03em; line-height: 1; }
.rhn-comm-fund-mxn { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0.04em; }
.rhn-comm-bar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rhn-comm-bar-label { font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.rhn-comm-bar-pct { font-size: 12px; font-weight: 600; color: var(--brand-700); font-family: var(--font-mono); }
.rhn-comm-bar { height: 8px; background: var(--border-2); border-radius: 99px; overflow: hidden; }
.rhn-comm-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-400) 0%, var(--brand-600) 100%); transition: width .7s var(--ease); }
.rhn-comm-meta { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.rhn-comm-meta-bold { font-weight: 600; color: var(--text-2); }
.rhn-comm-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; background: none; border: 0; cursor: pointer; padding: 0; color: var(--brand-600); font-weight: 600; font-size: 12.5px; transition: color .15s var(--ease); font-family: var(--font-display); }
.rhn-comm-link:hover { color: var(--brand-700); }
.rhn-amen-slider { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scroll-snap-type: x mandatory; }
.rhn-amen-slider::-webkit-scrollbar { display: none; }
.rhn-amen-slider { -ms-overflow-style: none; scrollbar-width: none; }
.rhn-amen-card { flex-shrink: 0; width: 260px; background: #fff; border-radius: 24px; overflow: hidden; scroll-snap-align: start; box-shadow: 0 2px 16px -4px rgba(15,23,42,0.06); }
.rhn-amen-cover { height: 128px; position: relative; background: linear-gradient(135deg, #34D399, #10B981); }
.rhn-amen-cover.c1 { background: linear-gradient(135deg, #60A5FA, #6366F1); }
.rhn-amen-cover.c2 { background: linear-gradient(135deg, #FB923C, #F97316); }
.rhn-amen-cover.c3 { background: linear-gradient(135deg, #A78BFA, #EC4899); }
.rhn-amen-cover.c4 { background: linear-gradient(135deg, #2DD4BF, #06B6D4); }
.rhn-amen-badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); border-radius: 99px; padding: 4px 10px; display: flex; align-items: center; gap: 6px; }
.rhn-amen-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.rhn-amen-badge-dot.ok { background: #10B981; }
.rhn-amen-badge-dot.busy { background: #F97316; }
.rhn-amen-badge-text { font-size: 10px; font-weight: 900; letter-spacing: 0.3px; }
.rhn-amen-badge-text.ok { color: #047857; }
.rhn-amen-badge-text.busy { color: #C2410C; }
.rhn-amen-body { padding: 16px; }
.rhn-amen-name { color: #1E293B; font-weight: 800; font-size: 15px; }
.rhn-amen-sub { display: flex; align-items: center; gap: 6px; color: #64748B; font-weight: 500; font-size: 11px; margin-top: 2px; }
.rhn-amen-btn { width: 100%; height: 40px; margin-top: 12px; background: #10B981; color: #fff; border: 0; cursor: pointer; font-weight: 700; font-size: 12px; border-radius: 12px; transition: background .15s; }
.rhn-amen-btn:hover { background: #059669; }
.rhn-amen-btn:active { transform: scale(0.98); }
.rhn-amen-btn.busy { background: #F1F5F9; color: #94A3B8; cursor: not-allowed; }
.rhn-feed { background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 2px 16px -4px rgba(15,23,42,0.06); }
.rhn-feed-empty { text-align: center; padding: 20px 0; color: #94A3B8; font-size: 13px; font-weight: 600; }
.rhn-feed-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F1F5F9; }
.rhn-feed-item:last-child { border-bottom: 0; }
.rhn-feed-ico { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.rhn-feed-info { flex: 1; min-width: 0; }
.rhn-feed-title { font-size: 13px; font-weight: 700; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhn-feed-sub { font-size: 11px; font-weight: 500; color: #94A3B8; margin-top: 2px; }
.rhn-feed-right { text-align: right; flex-shrink: 0; }
.rhn-feed-amt { font-size: 13px; font-weight: 800; color: #10B981; }
.rhn-feed-status { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 6px; margin-top: 2px; background: #ECFDF5; color: #047857; }
.rhn-spacer { height: 80px; }


/* ════════════════════════════════════════════════════════════════
   RH4 — Resident Home v4: Premium Fintech Redesign
   ════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rh4-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px 14px;
    position: sticky; top: 0; z-index: 10;
    background: rgba(244,246,248,0.88);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.rh4-topbar-left { display: flex; align-items: center; gap: 14px; }
.rh4-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(145deg, #00512C, #003D21);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,81,44,0.2);
}
.rh4-avatar span {
    color: #fff; font-weight: 900; font-size: 18px; letter-spacing: -0.5px;
}
.rh4-greeting { display: flex; flex-direction: column; gap: 2px; }
.rh4-greeting-hi { font-size: 12px; color: var(--text-4); font-weight: 500; letter-spacing: 0.3px; }
.rh4-greeting-name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.rh4-topbar-right { display: flex; align-items: center; gap: 8px; }
.rh4-icon-btn {
    position: relative; width: 44px; height: 44px; border-radius: 16px;
    border: 1.5px solid var(--border); background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-3); transition: all .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.rh4-icon-btn:active { transform: scale(0.92); }
.rh4-notif-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 20px; height: 20px; border-radius: 10px;
    background: #EF4444; color: #fff; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px; border: 2.5px solid #F4F6F8;
    animation: rh4Pulse 2s ease-in-out infinite;
}
@keyframes rh4Pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ── Hero Card (Level 1 — The Focus) ── */
.rh4-hero {
    margin: 8px 16px 20px; border-radius: 28px;
    position: relative; overflow: hidden;
    background: linear-gradient(155deg, #001F12 0%, #00311F 25%, #00512C 55%, #006B3A 100%);
    box-shadow: 0 12px 40px rgba(0,51,28,0.35), 0 2px 8px rgba(0,0,0,0.1);
}
.rh4-hero-orb1 {
    position: absolute; top: -60px; right: -40px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,230,115,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.rh4-hero-orb2 {
    position: absolute; bottom: -40px; left: -30px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,230,115,0.05) 0%, transparent 70%);
    pointer-events: none;
}
.rh4-hero-mesh {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0px, transparent 1px, transparent 60px);
    pointer-events: none;
}
.rh4-hero-content { position: relative; z-index: 1; padding: 28px 26px 26px; }
.rh4-hero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.rh4-hero-label {
    font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.4);
    letter-spacing: 2.5px; text-transform: uppercase;
}
.rh4-hero-badge {
    padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 700;
    backdrop-filter: blur(8px);
}
.rh4-hero-badge.ok { background: rgba(0,230,115,0.12); color: #6EE7B7; border: 1px solid rgba(0,230,115,0.15); }
.rh4-hero-badge.pend { background: rgba(251,191,36,0.12); color: #FDE68A; border: 1px solid rgba(251,191,36,0.15); }
.rh4-hero-amount {
    font-size: 52px; font-weight: 900; color: #fff;
    letter-spacing: -3px; line-height: 1; margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.rh4-cur { font-size: 28px; font-weight: 700; opacity: 0.45; margin-right: 4px; vertical-align: top; line-height: 1.6; }
.rh4-dec { font-size: 24px; font-weight: 700; opacity: 0.3; }
.rh4-hero-sub {
    font-size: 12px; color: rgba(255,255,255,0.35); font-weight: 500;
    margin-bottom: 24px; display: flex; align-items: center; gap: 6px;
}
.rh4-hero-actions { display: flex; gap: 10px; }
.rh4-pay-btn {
    flex: 1; height: 54px; border-radius: 16px;
    background: #fff; color: #00512C;
    font-size: 14px; font-weight: 800; border: 0;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transition: all .2s var(--ease);
    letter-spacing: 0.3px;
}
.rh4-pay-btn:active { transform: scale(0.96); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.rh4-pay-btn.disabled { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); cursor: default; box-shadow: none; }
.rh4-recibo-btn {
    height: 54px; padding: 0 20px; border-radius: 16px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
    font-size: 13px; font-weight: 700; border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 7px;
    transition: all .2s;
    backdrop-filter: blur(8px);
}
.rh4-recibo-btn:active { transform: scale(0.96); }

/* ── Quick Actions Grid (Level 2) ── */
.rh4-actions {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin: 0 16px 24px;
}
.rh4-act {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 12px 18px; background: #fff; border-radius: 22px;
    cursor: pointer; transition: all .22s var(--ease);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1.5px solid transparent;
}
.rh4-act:active { transform: scale(0.94); }
.rh4-act:hover { border-color: rgba(0,81,44,0.08); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.rh4-act-icon {
    width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}
.rh4-act-icon.emerald { background: linear-gradient(135deg, #ECFDF5, #D1FAE5); }
.rh4-act-icon.emerald svg { stroke: #00512C; }
.rh4-act-icon.blue { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.rh4-act-icon.blue svg { stroke: #2563EB; }
.rh4-act-icon.amber { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); }
.rh4-act-icon.amber svg { stroke: #D97706; }
.rh4-act-label { font-size: 12px; font-weight: 700; color: var(--text-2); text-align: center; }

/* ── Section Titles ── */
.rh4-section-head {
    display: flex; justify-content: space-between; align-items: center;
    margin: 0 16px 12px; padding-top: 4px;
}
.rh4-section-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.rh4-section-link { font-size: 13px; font-weight: 700; color: #00512C; cursor: pointer; }
.rh-feed-badge {
    font-size: 10px; font-weight: 900; color: #fff;
    background: #EF4444; padding: 3px 10px; border-radius: 20px;
    letter-spacing: 0.3px;
}

/* ── Feed Section ── */
.rh-feed-list {
    margin: 0 16px 6px;
    display: flex; flex-direction: column; gap: 0;
}
.rh-feed-item {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; padding: 12px 14px;
    border-left: 3px solid #E2E8F0;
    margin-bottom: 8px; border-radius: 16px;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05);
    transition: transform .15s;
}
.rh-feed-item:active { transform: scale(0.98); }
.rh-feed-unread { background: #FAFFFE; box-shadow: 0 2px 10px rgba(0,81,44,0.08); }
.rh-feed-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.rh-feed-content { flex: 1; min-width: 0; }
.rh-feed-label {
    font-size: 9px; font-weight: 900; letter-spacing: 0.7px; margin-bottom: 2px;
}
.rh-feed-title {
    font-size: 13px; font-weight: 800; color: #0F172A;
    line-height: 1.3; margin-bottom: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rh-feed-body {
    font-size: 11px; font-weight: 600; color: #64748B;
    line-height: 1.4;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.rh-feed-folio {
    font-size: 10px; font-weight: 900; color: #00512C;
    background: rgba(0,81,44,0.07); padding: 2px 8px;
    border-radius: 6px; display: inline-block; margin-top: 4px;
}
.rh-feed-time { text-align: right; flex-shrink: 0; padding-top: 2px; }
.rh-feed-date { font-size: 10px; font-weight: 700; color: #64748B; }
.rh-feed-hr   { font-size: 9px;  font-weight: 600; color: #94A3B8; margin-top: 1px; }
.rh-feed-empty {
    text-align: center; padding: 28px 16px;
    background: #fff; border-radius: 16px;
    margin: 0 16px 8px;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05);
}

/* ── Feed Wrap & Loading ── */
.rh-feed-wrap { margin: 0 16px 6px; }
.rh-feed-loading {
    text-align: center; padding: 20px 16px;
    font-size: 13px; font-weight: 600; color: #94A3B8;
}

/* ── Feed Card (expandable) ── */
.rh-feed-card {
    background: #fff; border-radius: 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 6px rgba(15,23,42,0.06);
    border: 1px solid #F1F5F9;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.rh-feed-card.rh-feed-unread {
    border-color: rgba(0,81,44,0.15);
    box-shadow: 0 2px 10px rgba(0,81,44,0.08);
}
.rh-feed-hidden { display: none !important; }
.rh-feed-card-top {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 14px; cursor: pointer;
    position: relative; user-select: none;
}
.rh-feed-card-top:active { opacity: 0.85; }
.rh-feed-dot {
    position: absolute; top: 10px; right: 10px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #00512C;
}
.rh-feed-card-icon {
    width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.rh-feed-card-main { flex: 1; min-width: 0; }
.rh-feed-card-label {
    font-size: 9px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 2px;
}
.rh-feed-card-title {
    font-size: 13px; font-weight: 700; color: #0F172A;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-feed-card-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;
}
.rh-feed-card-date {
    font-size: 10px; font-weight: 700; color: #94A3B8;
}
.rh-feed-card-chevron {
    color: #CBD5E1; transition: transform 0.2s;
    display: flex; align-items: center;
}
.rh-feed-card-detail {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid #F1F5F9;
}
.rh-feed-card.rh-feed-card-open .rh-feed-card-detail { display: block; }
.rh-feed-detail-time {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: #94A3B8; margin-bottom: 8px; padding-top: 12px;
}
.rh-feed-detail-body {
    font-size: 13px; font-weight: 500; color: #475569; line-height: 1.5;
}
.rh-feed-detail-folio {
    display: flex; align-items: center; gap: 5px; margin-top: 8px;
    font-size: 11px; font-weight: 800; color: #00512C;
}
.rh-feed-detail-row { margin-top: 8px; }
.rh-feed-detail-pill {
    display: inline-block; background: #F0FDF4;
    color: #00512C; border-radius: 20px;
    padding: 3px 10px; font-size: 11px; font-weight: 700;
}
.rh-feed-more-wrap {
    text-align: center; margin-top: 4px; padding-bottom: 4px;
}
.rh-feed-more-btn {
    display: inline-flex; align-items: center;
    background: none; border: 1.5px solid #E2E8F0;
    border-radius: 20px; padding: 7px 18px;
    font-size: 12px; font-weight: 700; color: #475569;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.rh-feed-more-btn:active { background: #F8FAFC; }
.rh-feed-empty-icon { font-size: 32px; margin-bottom: 8px; }
.rh-feed-empty-title { font-size: 13px; font-weight: 700; color: #94A3B8; margin-bottom: 4px; }
.rh-feed-empty-sub { font-size: 11px; font-weight: 500; color: #CBD5E1; }

/* ── Cards (v4) ── */
.rh4-card {
    background: #fff; border-radius: 24px;
    padding: 22px; margin: 0 16px 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.035);
    border: 1px solid rgba(0,0,0,0.03);
}

/* ── Transactions ── */
.rh4-tx {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid #F3F4F6;
}
.rh4-tx:last-child { border-bottom: 0; padding-bottom: 4px; }
.rh4-tx-icon {
    width: 42px; height: 42px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rh4-tx-icon.ok { background: #ECFDF5; }
.rh4-tx-icon.ok svg { stroke: #059669; }
.rh4-tx-icon.pend { background: #FFFBEB; }
.rh4-tx-icon.pend svg { stroke: #D97706; }
.rh4-tx-info { flex: 1; min-width: 0; }
.rh4-tx-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.rh4-tx-date { font-size: 11px; color: var(--text-4); font-weight: 500; }
.rh4-tx-end { text-align: right; flex-shrink: 0; }
.rh4-tx-amt { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.rh4-tx-tag {
    font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
    padding: 3px 10px; border-radius: 8px; display: inline-block;
}
.rh4-tx-tag.ok { background: #ECFDF5; color: #059669; }
.rh4-tx-tag.pend { background: #FFFBEB; color: #D97706; }

/* ── Announcement Card ── */
.rh4-aviso {
    margin: 0 16px 14px; padding: 18px 20px;
    background: #fff; border-radius: 22px;
    cursor: pointer; transition: all .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.035);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative; overflow: hidden;
}
.rh4-aviso:active { transform: scale(0.98); }
.rh4-aviso-badge {
    display: inline-block; background: #00512C; color: #fff;
    font-size: 9px; font-weight: 800; letter-spacing: 0.8px;
    padding: 4px 12px; border-radius: 8px; margin-bottom: 10px;
}
.rh4-aviso-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.rh4-aviso-body { font-size: 13px; color: var(--text-3); line-height: 1.6; }

/* ── Community Section (Level 3 — Secondary) ── */
.rh4-community {
    margin: 8px 16px 14px; padding: 20px;
    background: #fff; border-radius: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.035);
    border: 1px solid rgba(0,0,0,0.03);
}
.rh4-comm-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rh4-comm-icon {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rh4-comm-icon svg { stroke: #00512C; }
.rh4-comm-name { font-size: 15px; font-weight: 800; color: var(--text); }
.rh4-comm-unit { font-size: 12px; color: var(--text-4); font-weight: 500; margin-top: 2px; }
.rh4-comm-stats {
    display: flex; gap: 0; border-radius: 16px; overflow: hidden;
    background: var(--bg);
}
.rh4-comm-stat {
    flex: 1; padding: 14px 10px; text-align: center;
    border-right: 1px solid rgba(0,0,0,0.04);
}
.rh4-comm-stat:last-child { border-right: 0; }
.rh4-comm-stat-val { font-size: 16px; font-weight: 900; color: var(--text); margin-bottom: 2px; }
.rh4-comm-stat-label { font-size: 9px; font-weight: 700; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Transparency CTA ── */
.rh4-transparency {
    margin: 0 16px 16px; padding: 20px;
    border-radius: 22px; position: relative; overflow: hidden;
    background: linear-gradient(145deg, #00311F 0%, #00512C 100%);
    color: #fff; cursor: pointer; transition: all .2s;
    box-shadow: 0 4px 20px rgba(0,51,28,0.2);
}
.rh4-transparency:active { transform: scale(0.98); }
.rh4-transparency h4 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.rh4-transparency p { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 10px; }
.rh4-transparency-link {
    font-size: 13px; font-weight: 700; color: #6EE7B7;
    display: flex; align-items: center; gap: 6px;
}

/* ── Bottom spacer ── */
.rh4-bottom-spacer { height: 100px; }

/* ── Greeting Card ── */
.rd2-greeting-card {
    margin: 6px 16px 14px; padding: 22px 24px;
    background: var(--primary-soft); border-radius: 20px;
}
.rd2-greeting-name {
    font-size: 22px; font-weight: 800; color: var(--text);
    line-height: 1.3; margin-bottom: 4px;
}
.rd2-greeting-sub { font-size: 13px; color: var(--text-3); font-weight: 500; }

/* ── Hero Saldo Card ── */
.rd2-hero {
    margin: 0 16px 16px; border-radius: 24px;
    padding: 28px 24px 24px; position: relative; overflow: hidden;
    background: linear-gradient(160deg, #003D21 0%, #00512C 40%, #00913A 100%);
    box-shadow: 0 8px 32px rgba(0,81,44,0.3);
}
.rd2-hero-deco {
    position: absolute; top: -20px; right: -10px;
    width: 140px; height: 140px; border-radius: 50%;
    background: rgba(255,255,255,0.04); pointer-events: none;
}
.rd2-hero-label {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5);
    letter-spacing: 2px; margin-bottom: 8px;
    position: relative; z-index: 1;
}
.rd2-hero-amount {
    font-size: 42px; font-weight: 900; color: #fff;
    letter-spacing: -2px; line-height: 1; margin-bottom: 20px;
    position: relative; z-index: 1;
    font-variant-numeric: tabular-nums;
}
.rd2-dollar { font-size: 24px; font-weight: 700; opacity: 0.6; margin-right: 2px; vertical-align: top; line-height: 1.4; }
.rd2-cents { font-size: 22px; font-weight: 700; opacity: 0.4; }
.rd2-mxn { font-size: 14px; font-weight: 600; opacity: 0.4; vertical-align: middle; }
.rd2-pay-btn {
    width: 100%; height: 52px; border-radius: 16px;
    background: #fff; color: #003D21;
    font-size: 14px; font-weight: 800; letter-spacing: 0.5px;
    border: 0; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: relative; z-index: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transition: all .2s ease;
}
.rd2-pay-btn:active { transform: scale(0.97); }
.rd2-pay-btn.disabled {
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5);
    cursor: default; box-shadow: none;
}
.rd2-recibo-btn {
    width: 100%; height: 46px; border-radius: 14px; margin-top: 10px;
    background: rgba(255,255,255,0.12); color: #fff;
    font-size: 13px; font-weight: 700; border: 0; cursor: pointer;
    font-family: inherit; display: flex; align-items: center;
    justify-content: center; gap: 8px;
    position: relative; z-index: 1;
    transition: all .2s ease;
}
.rd2-recibo-btn:active { transform: scale(0.97); }

/* ── Cards ── */
.rd2-card {
    background: var(--bg-white); border-radius: 20px;
    padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.rd2-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.rd2-card-title { font-size: 16px; font-weight: 800; color: var(--text); }
.rd2-card-link {
    font-size: 13px; font-weight: 600; color: var(--text-4);
    cursor: pointer; transition: color .2s;
}
.rd2-card-link:hover { color: var(--primary); }

/* ── Transaction Items ── */
.rd2-tx-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-2);
}
.rd2-tx-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rd2-tx-check {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rd2-tx-check.ok { background: #ECFDF5; color: #10B981; }
.rd2-tx-check.pend { background: #FEF3C7; color: #F59E0B; }
.rd2-tx-info { flex: 1; min-width: 0; }
.rd2-tx-concept { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.rd2-tx-date { font-size: 11px; color: var(--text-4); font-weight: 500; }
.rd2-tx-right { text-align: right; flex-shrink: 0; }
.rd2-tx-amount { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.rd2-tx-badge {
    font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 6px; display: inline-block;
}
.rd2-tx-badge.ok { background: #ECFDF5; color: #10B981; }
.rd2-tx-badge.pend { background: #FEF3C7; color: #F59E0B; }

/* ── Mi Comunidad ── */
.rd2-section-title { font-size: 18px; font-weight: 800; color: var(--text); }
.rd2-comm-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--primary-soft);
    display: flex; align-items: center; justify-content: center;
}
.rd2-comm-type {
    font-size: 10px; font-weight: 800; color: var(--text-4);
    letter-spacing: 1px; margin-bottom: 2px;
}
.rd2-comm-name { font-size: 16px; font-weight: 800; color: var(--text); }
.rd2-comm-unit {
    font-size: 12px; color: var(--text-3); font-weight: 500; margin-top: 6px;
    padding-top: 6px; border-top: 1px solid var(--border-2);
}

/* ── Stats Row ── */
.rd2-stats-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin: 0 16px 16px;
}
.rd2-stat-card {
    background: var(--bg-white); border-radius: 18px;
    padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.rd2-stat-label {
    font-size: 10px; font-weight: 800; color: var(--text-4);
    letter-spacing: 1px; margin-bottom: 6px;
}
.rd2-stat-value { font-size: 22px; font-weight: 900; color: var(--primary); }
.rd2-stat-bar {
    height: 6px; background: var(--glass); border-radius: 4px;
    overflow: hidden; margin-top: 8px;
}
.rd2-stat-fill {
    height: 100%; background: var(--primary);
    border-radius: 4px; transition: width .6s ease;
}

/* ── Transparencia Card ── */
.rd2-transp {
    margin: 0 16px 16px; border-radius: 20px;
    padding: 22px 20px; cursor: pointer;
    background: linear-gradient(145deg, #003D21 0%, #00512C 100%);
    transition: transform .2s ease;
}
.rd2-transp:active { transform: scale(0.98); }
.rd2-transp-title {
    font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 6px;
}
.rd2-transp-sub {
    font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5;
    margin-bottom: 14px;
}
.rd2-transp-link {
    font-size: 13px; font-weight: 700; color: #4ADE80;
}

/* ── Quick Actions Row ── */
.rd2-quick-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin: 0 16px 20px;
}
.rd2-quick-card {
    background: var(--bg-white); border-radius: 18px;
    padding: 20px 16px; text-align: center;
    cursor: pointer; transition: all .2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.rd2-quick-card:active { transform: scale(0.97); }
.rd2-quick-icon {
    width: 50px; height: 50px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
.rd2-quick-icon.green { background: var(--primary-soft); }
.rd2-quick-icon.green svg { stroke: var(--primary); }
.rd2-quick-icon.teal { background: #E0F2FE; }
.rd2-quick-icon.teal svg { stroke: #0EA5E9; }
.rd2-quick-label { font-size: 13px; font-weight: 700; color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   AMENIDADES — Premium Reservation Screen
   ════════════════════════════════════════════════════════════════ */

/* Horizontal amenity selector */
.amen-scroll-wrap {
    margin: 0 -20px 20px;
    padding: 0 20px;
}
.amen-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.amen-scroll::-webkit-scrollbar { display: none; }

.amen-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 110px;
    padding: 16px 12px 14px;
    background: var(--bg-white);
    border: 2px solid transparent;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    transition: all .25s var(--ease);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    user-select: none;
}
.amen-chip:active { transform: scale(0.96); }
.amen-chip.active {
    border-color: #00512C;
    background: linear-gradient(145deg, #ECFDF5, #FFFFFF);
    box-shadow: 0 4px 16px rgba(0,81,44,0.12);
}
.amen-chip-icon {
    font-size: 32px;
    margin-bottom: 8px;
    line-height: 1;
}
.amen-chip-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.amen-chip.active .amen-chip-name { color: #00512C; }
.amen-chip-cap {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-4);
    margin-top: 4px;
}

/* Section titles */
.amen-section { margin-bottom: 22px; }
.amen-section-title {
    font-size: 11px;
    font-weight: 900;
    color: var(--text-3);
    letter-spacing: .8px;
    margin-bottom: 12px;
}

/* Premium date input */
.amen-date-wrap {
    position: relative;
}
.amen-date-input {
    width: 100%;
    padding: 16px 18px;
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: all .2s var(--ease);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.amen-date-input:focus {
    border-color: #00512C;
    box-shadow: 0 0 0 4px rgba(0,81,44,0.08);
}
.amen-date-input::-webkit-calendar-picker-indicator {
    background: none;
    cursor: pointer;
    padding: 4px;
    opacity: .5;
}

/* Legend */
.amen-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.amen-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-4);
}
.amen-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.amen-dot-avail { background: #FFFFFF; border: 2px solid #00512C; }
.amen-dot-selected { background: #00512C; }
.amen-dot-occupied { background: #D1D5DB; }

/* Time slot grid */
.amen-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.amen-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 90px;
    flex: 1 0 calc(33.333% - 8px);
    padding: 14px 10px;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all .22s var(--ease);
    user-select: none;
}

/* Available state */
.amen-slot.available {
    background: #FFFFFF;
    border: 2px solid rgba(0,81,44,0.2);
    color: var(--text-2);
}
.amen-slot.available:hover {
    border-color: #00512C;
    box-shadow: 0 2px 12px rgba(0,81,44,0.1);
}
.amen-slot.available:active { transform: scale(0.95); }

/* Selected state */
/* Range start (only inicio picked, no fin yet) */
.amen-slot.range-start {
    background: linear-gradient(135deg, #00512C, #00874A);
    border: 2px solid #00512C;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,81,44,0.3);
    transform: scale(1.04);
    z-index: 1;
}
/* Range edges (lo and hi of complete range) */
.amen-slot.range-edge {
    background: linear-gradient(135deg, #00512C, #00874A);
    border: 2px solid #00512C;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,81,44,0.25);
    transform: scale(1.02);
    z-index: 1;
}
/* Middle slots in a range */
.amen-slot.range-mid {
    background: rgba(0, 81, 44, 0.12);
    border: 2px solid rgba(0, 81, 44, 0.3);
    color: #00512C;
    transform: scale(1.0);
}
/* Generic selected (alias kept for backwards compat) */
.amen-slot.selected {
    background: linear-gradient(135deg, #00512C 0%, #00874A 100%);
    border: 2px solid #00512C;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0,81,44,0.3);
    transform: scale(1.02);
}

/* Occupied state — base (overridden below) */
.amen-slot.occupied {
    background: #E5E7EB;
    border: 2px solid #D1D5DB;
    color: #9CA3AF;
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
}

.amen-slot-time {
    font-size: 13px;
    font-weight: 700;
}
.amen-slot-lock { stroke: #9CA3AF; }
.amen-slot-check { stroke: #FFFFFF; }

/* Summary banner */
.amen-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ECFDF5;
    border: 1px solid rgba(0,81,44,0.12);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #00512C;
    animation: amenFadeIn .25s var(--ease);
}
.amen-summary span:last-child {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-3);
}

/* CTA */
.amen-cta-wrap {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--bg) 70%, transparent);
    padding: 16px 0 24px;
    margin-top: 8px;
}
.amen-cta {
    height: 56px;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
}
.amen-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

@keyframes amenFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Occupied slot final ── */
.amen-slot.occupied {
    background: #E5E7EB !important;
    border: 2px solid #D1D5DB !important;
    color: #9CA3AF !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}
.amen-slot.occupied .amen-slot-time,
.amen-slot.occupied .amen-slot-time s {
    color: #9CA3AF;
    text-decoration: line-through;
    font-weight: 600;
}
.amen-slot-who {
    font-size: 8px;
    font-weight: 800;
    color: #94A3B8;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin-top: 1px;
}

/* ── Reservation Card (Mis Reservaciones) ── */
.rv-card {
    background: #fff;
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s;
}
.rv-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.rv-card:active { transform: scale(0.98); }
.rv-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.rv-card-info { flex: 1; min-width: 0; }
.rv-card-name {
    font-size: 14px;
    font-weight: 900;
    color: #0F172A;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rv-card-date {
    font-size: 11px;
    color: #64748B;
    font-weight: 700;
    margin-top: 2px;
}
.rv-card-folio {
    font-size: 10px;
    font-weight: 900;
    color: #00512C;
    background: rgba(0, 81, 44, 0.08);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 4px;
}
.rv-card-arrow {
    color: #CBD5E1;
    flex-shrink: 0;
}

/* ── AVN: New Amenidades Design ──────────────────────────────────────────────── */
.avn-date-btn {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 14px; min-width: 52px; border-radius: 18px; border: none;
    font-family: 'Inter', sans-serif; cursor: pointer; transition: background .15s, color .15s; user-select: none;
}
.avn-date-btn .avn-day-name { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.avn-date-btn .avn-day-num  { font-size: 18px; font-weight: 900; line-height: 1.15; }
.avn-date-btn.idle   { background: var(--bg-white); color: #64748B; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.avn-date-btn.idle:hover { background: #F8FAFC; }
.avn-date-btn.active { background: #10B981; color: #FFFFFF; box-shadow: 0 4px 12px rgba(16,185,129,.28); }

.avn-spaces { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.avn-spaces::-webkit-scrollbar { display: none; }
.avn-space-card {
    flex-shrink: 0; width: 148px; background: var(--bg-white); border-radius: 24px;
    border: 2px solid transparent; padding: 16px; cursor: pointer;
    box-shadow: 0 1px 6px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; user-select: none;
}
.avn-space-card:active { transform: scale(0.96); }
.avn-space-card.active { border-color: #10B981; box-shadow: 0 4px 16px rgba(16,185,129,.14); }
.avn-space-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.avn-space-name { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 3px; }
.avn-space-cap  { font-size: 11px; font-weight: 600; color: var(--text-4); }
.avn-space-badge { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.avn-space-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; flex-shrink: 0; }
.avn-space-badge-lbl { font-size: 10px; font-weight: 800; color: #059669; text-transform: uppercase; letter-spacing: .04em; }

.avn-slots-card { background: var(--bg-white); border-radius: 24px; padding: 20px; box-shadow: 0 1px 6px rgba(0,0,0,.06); margin-bottom: 16px; }
.avn-slots-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
.avn-slots-title { font-size: 14px; font-weight: 800; color: var(--text); }
.avn-legend-row { display: flex; align-items: center; gap: 8px; }
.avn-legend-item { display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.avn-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.avn-hint { display: none; align-items: center; gap: 8px; background: #ECFDF5; border-radius: 14px; padding: 8px 12px; margin-bottom: 12px; }
.avn-hint.visible { display: flex; }
.avn-hint-text { font-size: 11px; font-weight: 700; color: #047857; }

.avn-rules { background: #F1F5F9; border-radius: 20px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.avn-rules-text { font-size: 12px; font-weight: 600; color: #64748B; line-height: 1.6; }

.avn-my-reservas-label { font-size: 11px; font-weight: 900; color: var(--text-3); letter-spacing: .7px; text-transform: uppercase; margin-bottom: 10px; margin-top: 4px; }
.avn-rv-card {
    background: var(--bg-white); border-radius: 20px; padding: 14px 16px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.avn-rv-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avn-rv-name { font-size: 13px; font-weight: 800; color: var(--text); }
.avn-rv-date { font-size: 11px; font-weight: 600; color: var(--text-4); margin-top: 2px; }
.avn-rv-folio { font-size: 10px; font-weight: 800; color: #94A3B8; flex-shrink: 0; }

.avn-cta-bar { position: sticky; bottom: 0; padding: 12px 0 var(--safe-bottom, 20px); background: linear-gradient(to top, var(--bg) 60%, transparent); }
.avn-cta-btn {
    width: 100%; height: 56px; background: #10B981; color: #FFFFFF; border: none;
    border-radius: 18px; font-size: 15px; font-weight: 800; font-family: 'Inter', sans-serif;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 8px 20px rgba(16,185,129,.35); transition: background .15s; user-select: none;
}
.avn-cta-btn:disabled { background: #E2E8F0; color: #94A3B8; box-shadow: none; cursor: not-allowed; }
.avn-cta-btn:not(:disabled):active { transform: scale(0.98); }

/* ── Ticket / Comprobante Modal ── */
.tk-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: tkFadeIn 0.3s ease;
}
@keyframes tkFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.tk-card {
    background: #fff;
    border-radius: 24px;
    width: 100%;
    max-width: 380px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
    animation: tkSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
@keyframes tkSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.tk-header {
    padding: 28px 24px 22px;
    text-align: center;
    color: #fff;
    position: relative;
}
.tk-header-icon {
    font-size: 48px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.tk-header-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    opacity: 0.85;
}
.tk-folio-row {
    text-align: center;
    padding: 18px 24px 14px;
}
.tk-folio-label {
    font-size: 9px;
    font-weight: 900;
    color: #94A3B8;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.tk-folio {
    font-size: 32px;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -1px;
    font-family: var(--font-mono);
}
.tk-divider {
    height: 1px;
    background: repeating-linear-gradient(90deg, #E2E8F0, #E2E8F0 8px, transparent 8px, transparent 16px);
    margin: 0 20px;
    position: relative;
}
.tk-divider::before, .tk-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    transform: translateY(-50%);
}
.tk-divider::before { left: -30px; }
.tk-divider::after { right: -30px; }
.tk-info-section { padding: 16px 24px; }
.tk-info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.tk-info-row:last-child { margin-bottom: 0; }
.tk-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tk-info-data { flex: 1; min-width: 0; }
.tk-info-label {
    font-size: 9px;
    font-weight: 900;
    color: #94A3B8;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}
.tk-info-value {
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
}
.tk-info-sub {
    font-size: 20px;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -0.5px;
    margin-top: 2px;
}
.tk-rules {
    padding: 14px 24px 18px;
}
.tk-rules-title {
    font-size: 9px;
    font-weight: 900;
    color: #94A3B8;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.tk-rule-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    line-height: 1.4;
}
.tk-rule-item:last-child { margin-bottom: 0; }
.tk-rule-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tk-tear {
    position: relative;
    height: 0;
}
.tk-actions {
    padding: 16px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tk-btn-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    border: 2px solid #EF4444;
    background: transparent;
    color: #EF4444;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s;
}
.tk-btn-cancel:hover { background: #FEF2F2; }
.tk-btn-close {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(135deg, #00512C, #003D21);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.15s;
}
.tk-btn-close:hover { opacity: 0.9; }
.tk-btn-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    border: 2px solid #10B981;
    background: transparent;
    color: #10B981;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s;
}
.tk-btn-qr:hover { background: #ECFDF5; }

/* ============================================================
   Fintech Premium — Residente Finanzas Dashboard
   ============================================================ */

/* ── Page Container ── */
.fin-page {
    padding: 20px 16px 100px;
    background: #F4F6F8;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Sticky Header ── */
.fin-header {
    background: #FFFFFF;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #10B981, #059669, #10B981) 1;
}

.fin-header-title {
    font-size: 13px;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* ── Section Title ── */
.fin-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.fin-section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(180deg, #10B981, #059669);
    flex-shrink: 0;
}

.fin-section-title h3 {
    font-size: 17px;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -0.3px;
}

.fin-section-title .fin-section-sub {
    font-size: 12px;
    color: #94A3B8;
    font-weight: 600;
    margin-left: auto;
}

/* ── Overview Card — Hero ── */
.fin-overview {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 28px 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    animation: finFadeIn 0.4s ease-out;
}

.fin-overview::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.fin-overview::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(5, 150, 105, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* Status Row */
.fin-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.fin-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.fin-status-badge .fin-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: finPulse 2s ease-in-out infinite;
}

.fin-vigente {
    font-size: 11px;
    font-weight: 800;
    color: #10B981;
    border: 1.5px solid #10B981;
    border-radius: 10px;
    padding: 5px 14px;
    letter-spacing: 0.3px;
}

/* Balance Display */
.fin-balance-ctx {
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.fin-balance {
    font-size: 48px;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
    font-variant-numeric: tabular-nums;
}

.fin-balance .fin-currency {
    font-size: 16px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0;
    margin-left: 4px;
}

/* ── Fee Breakdown ── */
.fin-desglose {
    background: #F8FAFC;
    border-radius: 18px;
    padding: 18px 16px;
    margin: 20px 0 16px;
    position: relative;
    z-index: 1;
}

.fin-desglose-title {
    font-size: 11px;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fin-desglose-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
}

.fin-desglose-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fin-desglose-row .fin-desg-label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fin-desglose-row .fin-desg-label .fin-desg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fin-desglose-row .fin-desg-amount {
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
}

.fin-deadline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #E2E8F0;
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
}

.fin-deadline svg {
    width: 16px;
    height: 16px;
    color: #94A3B8;
    flex-shrink: 0;
}

/* ── Contextual Alert ── */
.fin-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    margin: 16px 0;
    position: relative;
    z-index: 1;
    border-left: 4px solid;
}

.fin-alert-warn {
    background: #FFFBEB;
    border-left-color: #F59E0B;
}

.fin-alert-warn .fin-alert-icon {
    color: #F59E0B;
}

.fin-alert-ok {
    background: #F0FDF4;
    border-left-color: #22C55E;
}

.fin-alert-ok .fin-alert-icon {
    color: #22C55E;
}

.fin-alert-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.fin-alert-text {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    line-height: 1.5;
}

.fin-alert-text strong {
    font-weight: 800;
    color: #0F172A;
}

/* ── CTA Button ── */
.fin-cta-pay {
    width: 100%;
    height: 58px;
    border-radius: 18px;
    border: 0;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    letter-spacing: -0.2px;
}

.fin-cta-pay:active {
    transform: scale(0.97);
}

.fin-cta-pay.fin-cta-pending {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.35), 0 2px 8px rgba(16, 185, 129, 0.2);
    animation: finCtaPulse 3s ease-in-out infinite;
}

.fin-cta-pay.fin-cta-paid {
    background: #F8FAFC;
    color: #0F172A;
    border: 1.5px solid #E2E8F0;
}

.fin-cta-pay.fin-cta-paid:hover {
    background: #F1F5F9;
}

/* ── Change Method Link ── */
.fin-change-method {
    text-align: center;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

.fin-change-method span {
    font-size: 13px;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
    transition: color 0.2s;
    position: relative;
}

.fin-change-method span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: #10B981;
    transition: width 0.3s ease;
}

.fin-change-method span:hover {
    color: #10B981;
}

.fin-change-method span:hover::after {
    width: 100%;
}

/* ── Transparency Panel ── */
.fin-transparency {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    animation: finFadeIn 0.5s ease-out 0.1s both;
}

.fin-cat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #F8FAFC;
    transition: background 0.15s;
}

.fin-cat-row:last-child {
    border-bottom: none;
}

.fin-cat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fin-cat-icon .fin-cat-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.fin-cat-info {
    flex: 1;
    min-width: 0;
}

.fin-cat-name {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 6px;
}

.fin-cat-bar {
    height: 6px;
    background: #F1F5F9;
    border-radius: 99px;
    overflow: hidden;
}

.fin-cat-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fin-cat-meta {
    text-align: right;
    flex-shrink: 0;
}

.fin-cat-pct {
    font-size: 14px;
    font-weight: 900;
    color: #0F172A;
}

.fin-cat-amt {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    margin-top: 2px;
}

/* Comparison & Health */
.fin-comparison {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #F0FDF4;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #059669;
}

.fin-comparison svg {
    flex-shrink: 0;
}

.fin-health-score {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
    border: 1px solid rgba(16, 185, 129, 0.15);
    margin-top: 16px;
}

.fin-health-circle {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.fin-health-circle svg {
    width: 56px;
    height: 56px;
    transform: rotate(-90deg);
}

.fin-health-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: #059669;
}

.fin-health-info h4 {
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 2px;
}

.fin-health-info p {
    font-size: 12px;
    color: #64748B;
    font-weight: 500;
    line-height: 1.4;
}

/* ── Payment History ── */
.fin-history {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    animation: finFadeIn 0.5s ease-out 0.2s both;
}

.fin-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fin-filter-bar::-webkit-scrollbar {
    display: none;
}

.fin-filter-pill {
    padding: 7px 16px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #E2E8F0;
    background: transparent;
    color: #64748B;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
    flex-shrink: 0;
}

.fin-filter-pill.active,
.fin-filter-pill:hover {
    background: #0F172A;
    color: #fff;
    border-color: #0F172A;
}

.fin-history-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #F8FAFC;
    transition: background 0.15s;
}

.fin-history-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fin-hi-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fin-hi-info {
    flex: 1;
    min-width: 0;
}

.fin-hi-title {
    font-size: 14px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-hi-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.fin-hi-meta span {
    font-size: 11px;
    color: #94A3B8;
    font-weight: 500;
}

.fin-hi-meta .fin-hi-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #CBD5E1;
    flex-shrink: 0;
}

.fin-hi-right {
    text-align: right;
    flex-shrink: 0;
}

.fin-hi-amount {
    font-size: 15px;
    font-weight: 900;
    color: #0F172A;
    margin-bottom: 4px;
}

.fin-hi-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}

.fin-hi-status.paid {
    background: #F0FDF4;
    color: #16A34A;
}

.fin-hi-status.pending {
    background: #FFF7ED;
    color: #EA580C;
}

.fin-hi-receipt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #3B82F6;
    text-decoration: none;
    margin-top: 4px;
    transition: color 0.2s;
}

.fin-hi-receipt:hover {
    color: #2563EB;
}

/* ── Ver Todos link ── */
.fin-ver-todos {
    font-size: 13px;
    font-weight: 800;
    color: #10B981;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
    margin-left: auto;
}

.fin-ver-todos:hover {
    color: #059669;
}

/* ── No data state ── */
.fin-empty {
    padding: 32px 16px;
    text-align: center;
    color: #94A3B8;
    font-size: 14px;
    font-weight: 600;
}

/* ── Animations ── */
@keyframes finFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes finPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes finCtaPulse {
    0%, 100% { box-shadow: 0 8px 28px rgba(16, 185, 129, 0.35), 0 2px 8px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 12px 36px rgba(16, 185, 129, 0.45), 0 4px 12px rgba(16, 185, 129, 0.25); }
}

/* ═══════════════════════════════════════════════════════════════════
   WALLET & ADVANCE PAYMENT — Premium Digital Wallet
   ═══════════════════════════════════════════════════════════════════ */

/* ── Wallet Section ── */
.wallet-section {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
    animation: finFadeIn 0.4s ease-out both;
    animation-delay: 0.3s;
}

.wallet-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wallet-section-title h3 {
    font-size: 17px;
    font-weight: 900;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    letter-spacing: -0.3px;
}

.wallet-section-title .wallet-count {
    font-size: 11px;
    font-weight: 800;
    color: #64748B;
    background: #F1F5F9;
    padding: 4px 10px;
    border-radius: 8px;
}

/* ── Individual Wallet Card ── */
.wallet-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 18px;
    margin-bottom: 10px;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    cursor: default;
    position: relative;
}

.wallet-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.wallet-card.wallet-card-default {
    border-color: #10B981;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%);
}

.wallet-card.wallet-card-default:hover {
    border-color: #059669;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
}

/* ── Card Brand Icon ── */
.wallet-card-brand {
    width: 52px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

.wallet-brand-visa { background: linear-gradient(135deg, #1A1F71, #2B3990); }
.wallet-brand-mastercard { background: linear-gradient(135deg, #EB001B, #F79E1B); }
.wallet-brand-amex { background: linear-gradient(135deg, #2E77BC, #1565C0); }
.wallet-brand-generic { background: linear-gradient(135deg, #64748B, #475569); }

/* ── Card Info ── */
.wallet-card-info {
    flex: 1;
    min-width: 0;
}

.wallet-card-mask {
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    font-family: var(--font-mono);
    letter-spacing: 1px;
}

.wallet-card-exp {
    font-size: 12px;
    color: #94A3B8;
    font-weight: 600;
    margin-top: 3px;
}

/* ── Card Badge ── */
.wallet-card-badge {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.wallet-badge-default {
    color: #059669;
    background: #ECFDF5;
}

.wallet-badge-saved {
    color: #64748B;
    background: #F1F5F9;
}

/* ── Card Actions ── */
.wallet-card-actions {
    position: absolute;
    top: 8px;
    right: 10px;
}

.wallet-card-actions button {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}

.wallet-card-actions button:hover {
    color: #EF4444;
    background: #FEF2F2;
}

/* ── Add Card Button ── */
.wallet-add-btn {
    width: 100%;
    height: 52px;
    border-radius: 16px;
    border: 2px dashed #CBD5E1;
    background: #FFFFFF;
    color: #10B981;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    transition: all 0.2s;
}

.wallet-add-btn:hover {
    border-color: #10B981;
    background: #F0FDF4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.wallet-add-btn:active {
    transform: translateY(0);
}

/* ── Empty State ── */
.wallet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    text-align: center;
    gap: 8px;
}

.wallet-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    color: #10B981;
}

.wallet-empty-title {
    font-size: 15px;
    font-weight: 900;
    color: #0F172A;
}

.wallet-empty-desc {
    font-size: 13px;
    color: #94A3B8;
    font-weight: 600;
    line-height: 1.5;
    max-width: 260px;
}

/* ═══════════════════════════════════════════════════════════════════
   ADVANCE PAYMENT MODAL
   ═══════════════════════════════════════════════════════════════════ */

.advance-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: advOverlayIn 0.25s ease-out;
}

@keyframes advOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.advance-modal {
    width: 100%;
    max-width: 440px;
    background: #FFFFFF;
    border-radius: 28px 28px 0 0;
    padding: 28px 24px 32px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
    animation: advSlideUp 0.3s cubic-bezier(.4,0,.2,1);
    max-height: 85vh;
    overflow-y: auto;
}

@keyframes advSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.advance-modal-handle {
    width: 40px;
    height: 4px;
    background: #E2E8F0;
    border-radius: 4px;
    margin: 0 auto 20px;
}

.advance-modal-title {
    font-size: 20px;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}

.advance-modal-subtitle {
    font-size: 13px;
    color: #94A3B8;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 1.4;
}

/* ── Month Pills ── */
.advance-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.advance-pill {
    height: 56px;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.15s;
}

.advance-pill:hover {
    border-color: #10B981;
    background: #F0FDF4;
}

.advance-pill.active {
    border-color: #10B981;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    transform: scale(1.02);
}

.advance-pill-label {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.6;
}

/* ── Custom Amount Input ── */
.advance-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 20px;
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
}

.advance-or::before,
.advance-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}

.advance-input-wrap {
    position: relative;
    margin-bottom: 24px;
}

.advance-input-prefix {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 900;
    color: #94A3B8;
    pointer-events: none;
}

.advance-input {
    width: 100%;
    height: 58px;
    border-radius: 16px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    padding: 0 16px 0 36px;
    font-size: 22px;
    font-weight: 900;
    color: #0F172A;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.5px;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.advance-input:focus {
    border-color: #10B981;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.advance-input::placeholder {
    color: #CBD5E1;
    font-weight: 700;
    font-size: 18px;
}

/* ── Summary + CTA ── */
.advance-summary {
    background: #F0FDF4;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.advance-summary-label {
    font-size: 13px;
    font-weight: 700;
    color: #064E3B;
}

.advance-summary-amount {
    font-size: 22px;
    font-weight: 900;
    color: #059669;
    letter-spacing: -0.5px;
}

.advance-cta {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    border: 0;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
    transition: all 0.15s;
    letter-spacing: -0.2px;
}

.advance-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.4);
}

.advance-cta:active {
    transform: translateY(0);
}

.advance-cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.advance-cancel {
    width: 100%;
    height: 46px;
    border-radius: 14px;
    border: 0;
    background: #F1F5F9;
    color: #64748B;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.15s;
}

.advance-cancel:hover {
    background: #E2E8F0;
}

/* ── Dual CTA Row (when isPaid) ── */
.fin-cta-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.fin-cta-secondary {
    height: 52px;
    border-radius: 16px;
    border: 1.5px solid #E2E8F0;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
}

.fin-cta-secondary:hover {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

.fin-cta-advance {
    height: 52px;
    border-radius: 16px;
    border: 0;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
    transition: all 0.15s;
}

.fin-cta-advance:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

/* ============================================================
   ESTADO DE CUENTA — Premium Accordion System
   ============================================================ */

/* ── Hero Card ── */
.ec-hero {
    background: linear-gradient(160deg, #003D21 0%, #00512C 50%, #006B3C 100%);
    padding: 28px 24px 24px;
    margin: 16px;
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(0, 81, 44, 0.35);
    position: relative;
    overflow: hidden;
}

.ec-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -20%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ec-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ec-hero-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ec-hero-total {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px;
    margin-bottom: 20px;
    line-height: 1;
}

.ec-hero-total .ec-currency {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0;
    margin-left: 4px;
}

.ec-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.ec-hero-stat-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ec-hero-stat-value {
    font-size: 22px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.2;
}

.ec-hero-stat-value.white {
    color: #FFFFFF;
}

.ec-hero-stat-sub {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    margin-top: 1px;
}

.ec-hero-community {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.ec-hero-download {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    letter-spacing: -0.01em;
}

.ec-hero-download:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}

.ec-hero-download svg {
    flex-shrink: 0;
}

/* ── Year Group ── */
.ec-year-group {
    margin-bottom: 8px;
}

.ec-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 10px;
}

.ec-year-label {
    font-size: 11px;
    font-weight: 900;
    color: var(--text-4);
    letter-spacing: .5px;
    font-family: var(--font-mono);
}

.ec-year-total {
    font-size: 11px;
    font-weight: 900;
    color: var(--success);
}

/* ── Accordion Item ── */
.ec-item {
    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    border-radius: 16px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}

.ec-item:hover {
    border-color: #E2E8F0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.ec-item.expanded {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
}

/* ── Accordion Header (always visible) ── */
.ec-item-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background .15s ease;
}

.ec-item-header:active {
    background: #FAFBFC;
}

.ec-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ec-item-icon svg {
    stroke: var(--success);
}

.ec-item-body {
    flex: 1;
    min-width: 0;
}

.ec-item-month {
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-item-date-sub {
    font-size: 10px;
    color: var(--text-4);
    margin-top: 2px;
}

.ec-item-right {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ec-item-amount {
    font-weight: 900;
    font-size: 16px;
    color: var(--text);
    letter-spacing: -0.5px;
}

.ec-item-amount .ec-cents {
    font-size: 10px;
    color: var(--text-4);
    font-weight: 600;
}

.ec-badge {
    font-size: 9px;
    font-weight: 900;
    color: var(--success);
    background: var(--success-bg);
    border-radius: 8px;
    padding: 3px 10px;
    letter-spacing: .5px;
    white-space: nowrap;
}

.ec-chevron {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), background .2s ease;
}

.ec-item.expanded .ec-chevron {
    transform: rotate(180deg);
    background: var(--primary-soft);
}

.ec-chevron svg {
    stroke: var(--text-4);
    transition: stroke .2s ease;
}

.ec-item.expanded .ec-chevron svg {
    stroke: var(--primary);
}

/* ── Accordion Detail Panel (hidden by default) ── */
.ec-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity .25s ease;
    opacity: 0;
}

.ec-item.expanded .ec-detail {
    max-height: 500px;
    opacity: 1;
}

.ec-detail-inner {
    padding: 0 18px 18px;
    border-top: 1px solid #F1F5F9;
    margin-top: 0;
}

.ec-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-top: 16px;
}

.ec-detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ec-detail-item.full {
    grid-column: 1 / -1;
}

.ec-detail-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-4);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.ec-detail-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.ec-detail-value.mono {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-3);
}

/* ── Desglose (Breakdown) ── */
.ec-breakdown {
    grid-column: 1 / -1;
    background: #F8FAFC;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.ec-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ec-breakdown-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}

.ec-breakdown-value {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
}

.ec-breakdown-divider {
    height: 1px;
    background: #E2E8F0;
}

.ec-breakdown-row.total .ec-breakdown-label {
    font-weight: 800;
    color: var(--text);
}

.ec-breakdown-row.total .ec-breakdown-value {
    font-size: 14px;
    font-weight: 900;
    color: var(--success);
}

/* ── Receipt Download Button ── */
.ec-receipt-btn {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    background: transparent;
    border: 1.5px solid var(--primary);
    border-radius: 12px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all .2s ease;
    margin-top: 4px;
    text-decoration: none;
}

.ec-receipt-btn:hover {
    background: var(--primary-soft);
}

.ec-receipt-btn svg {
    flex-shrink: 0;
}

/* ── Empty State ── */
.ec-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    gap: 16px;
}

.ec-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-empty-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--text);
}

.ec-empty-desc {
    font-size: 13px;
    color: var(--text-4);
    text-align: center;
    line-height: 1.5;
    max-width: 220px;
}

.ec-empty-btn {
    height: 46px;
    padding: 0 24px;
    background: var(--primary-gradient);
    color: #fff;
    border: 0;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    margin-top: 4px;
    transition: transform .15s ease;
}

.ec-empty-btn:active {
    transform: scale(0.97);
}

/* ── Header bar ── */
.ec-topbar {
    background: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F1F5F9;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ec-topbar-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--text);
}

.ec-topbar-badge {
    background: var(--success-bg);
    color: var(--success);
    border-radius: 10px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 900;
}

.ec-payments-list {
    padding: 0 16px 20px;
}

/* ============================================================
   UNIVERSAL STAGGER ANIMATION SYSTEM
   Applies cascading fade-up to all screen children
   ============================================================ */

/* Base: all animatable elements start invisible */
.rc-anim {
    opacity: 0;
    transform: translateY(12px);
    animation: rcStaggerIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--rc-d, 0s);
}

@keyframes rcStaggerIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Override the screen-level animation so it doesn't conflict */
.screen.active.rc-stagger-active {
    animation: none;
    opacity: 1;
    transform: none;
}

/* Nested items get a subtler entrance for lists */
.rc-anim-item {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    animation: rcItemIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--rc-d, 0s);
}

@keyframes rcItemIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ============================================================
   MANAGER DASHBOARD — Premium SaaS Command Center
   ============================================================ */

/* ── Header ── */
.md-header {
    background: #FFFFFF;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F0F0F5;
    position: sticky;
    top: 0;
    z-index: 10;
}

.md-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.md-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00512C, #003D21);
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.md-header-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
}

.md-header-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-4);
    margin-top: 1px;
}

.md-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.md-code-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    color: #00512C;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
    padding: 7px 12px;
    cursor: pointer;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.md-code-btn:hover {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.md-code-btn svg {
    color: #94A3B8;
}

.md-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748B;
    transition: all 0.2s;
    flex-shrink: 0;
}

.md-icon-btn:hover {
    background: #F0F0F5;
    color: var(--text);
}

/* ── Body ── */
.md-body {
    padding: 20px 16px 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Welcome Hero ── */
.md-hero {
    position: relative;
    background: linear-gradient(135deg, #00512C 0%, #003D21 60%, #002818 100%);
    border-radius: 26px;
    padding: 24px 22px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 81, 44, 0.2);
}
.md-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 10%, rgba(16, 185, 129, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(34, 197, 94, 0.25) 0%, transparent 45%);
    pointer-events: none;
}
.md-hero-content { position: relative; z-index: 1; }
.md-hero-greet {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.md-hero-greet span { color: #fff; font-weight: 900; }
.md-hero-title {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.md-hero-sub {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 18px;
}
.md-hero-code-wrap {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 14px 16px;
}
.md-hero-code-label {
    font-size: 9px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}
.md-hero-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.md-hero-code {
    flex: 1;
    font-size: 22px;
    font-weight: 900;
    font-family: var(--font-mono);
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.md-hero-copy {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.md-hero-copy:hover {
    background: rgba(255, 255, 255, 0.28);
}
.md-hero-copy:active { transform: scale(0.96); }
.md-hero-hint {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

/* ============================================================
   MANAGER FINANZAS (Egresos) — rich layout
   ============================================================ */
.mg-header {
    background: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #F0F0F5;
    position: sticky;
    top: 0;
    z-index: 10;
}
.mg-back {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    cursor: pointer;
    flex-shrink: 0;
}
.mg-back:hover { background: #F0F0F5; }
.mg-header-title { flex: 1; }
.mg-header-name {
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
}
.mg-header-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-4);
    margin-top: 2px;
    text-transform: capitalize;
}
.mg-header-add {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #00512C, #003D21);
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 81, 44, 0.2);
}
.mg-header-add:active { transform: scale(0.96); }

.mg-body {
    padding: 20px 16px 100px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.mg-hero {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 24px;
    padding: 22px 20px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
}
.mg-hero-label {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.2px;
    margin-bottom: 6px;
}
.mg-hero-value {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
    line-height: 1.1;
}
.mg-positive { color: #22C55E; }
.mg-negative { color: #F87171; }
.mg-hero-split {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px 14px;
}
.mg-hero-col { flex: 1; }
.mg-hero-col-label {
    font-size: 9px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.mg-hero-col-value {
    font-size: 16px;
    font-weight: 900;
}
.mg-hero-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
}

.mg-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mg-kpi {
    background: #fff;
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.mg-kpi-label {
    font-size: 9px;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.mg-kpi-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}
.mg-kpi-trend {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
}
.mg-trend-up { color: #EF4444; }
.mg-trend-down { color: #22C55E; }

.mg-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.mg-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #F8FAFC;
}
.mg-card-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text);
    margin: 0;
}
.mg-card-sub {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
}
.mg-card-body {
    padding: 14px 18px 18px;
}

.mg-cat-row {
    margin-bottom: 14px;
}
.mg-cat-row:last-child { margin-bottom: 0; }
.mg-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.mg-cat-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
}
.mg-cat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.mg-cat-amt {
    font-size: 13px;
    font-weight: 900;
    color: var(--text);
}
.mg-cat-pct {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
}
.mg-cat-bar {
    height: 6px;
    background: #F1F5F9;
    border-radius: 6px;
    overflow: hidden;
}
.mg-cat-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}
.mg-cat-empty {
    padding: 24px 0;
    text-align: center;
    color: #94A3B8;
    font-size: 12px;
    font-weight: 700;
}

.mg-rows { padding: 6px 8px 8px; }
.mg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 14px;
    transition: background 0.15s;
}
.mg-row:hover { background: #F8FAFC; }
.mg-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.mg-row-main {
    flex: 1;
    min-width: 0;
}
.mg-row-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.mg-row-meta {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mg-row-cat {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.mg-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}
.mg-row-amount {
    font-size: 14px;
    font-weight: 900;
    color: #EF4444;
}
.mg-row-receipt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 800;
    color: #22C55E;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 6px;
    background: #F0FDF4;
}
.mg-row-noreceipt {
    font-size: 9px;
    font-weight: 700;
    color: #CBD5E1;
}
.mg-row-del {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #CBD5E1;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.mg-row-del:hover {
    background: #FEF2F2;
    color: #EF4444;
}

.mg-empty {
    padding: 36px 20px;
    text-align: center;
}
.mg-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}
.mg-empty-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}
.mg-empty-sub {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
}

/* ── mg-card-total ── */
.mg-card-total {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.3px;
    flex-shrink: 0;
}
.mg-total-green { color: #16A34A; }
.mg-total-red   { color: #DC2626; }

/* ── Caja Actual hero ── */
.mg-caja-card {
    background: linear-gradient(135deg, #00512C 0%, #007A42 100%);
    border-radius: 24px;
    padding: 22px 20px;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 81, 44, 0.28);
    display: flex;
    align-items: center;
    gap: 16px;
}
.mg-caja-icon {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
}
.mg-caja-info { flex: 1; min-width: 0; }
.mg-caja-label {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,0.65);
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}
.mg-caja-value {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.mg-caja-sub {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    margin-top: 4px;
}

/* ── Summary row ── */
.mg-summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.mg-summary-card {
    border-radius: 18px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mg-s-income { background: #F0FDF4; }
.mg-s-egreso { background: #FEF2F2; }
.mg-s-pos    { background: #F0FDF4; }
.mg-s-neg    { background: #FEF2F2; }
.mg-s-icon {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 4px;
    line-height: 1;
}
.mg-s-income .mg-s-icon,
.mg-s-pos    .mg-s-icon { color: #16A34A; }
.mg-s-egreso .mg-s-icon,
.mg-s-neg    .mg-s-icon { color: #DC2626; }
.mg-s-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #94A3B8;
}
.mg-s-value {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.3px;
}
.mg-s-income .mg-s-value,
.mg-s-pos    .mg-s-value { color: #16A34A; }
.mg-s-egreso .mg-s-value,
.mg-s-neg    .mg-s-value { color: #DC2626; }
.mg-s-sub {
    font-size: 9px;
    font-weight: 700;
    color: #94A3B8;
    margin-top: 2px;
}

/* ── Transaction rows ── */
.mg-tx-list { padding: 6px 8px 8px; }
.mg-tx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 14px;
    transition: background 0.15s;
}
.mg-tx-row:hover { background: #F8FAFC; }
.mg-tx-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00512C, #007A42);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    flex-shrink: 0;
}
.mg-tx-main { flex: 1; min-width: 0; }
.mg-tx-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.mg-tx-unit { color: #94A3B8; font-weight: 600; }
.mg-tx-meta {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
}
.mg-tx-amount {
    font-size: 14px;
    font-weight: 900;
    color: #16A34A;
    flex-shrink: 0;
}
.mg-tx-empty {
    padding: 36px 20px;
    text-align: center;
}

/* ── Desglose presupuesto vs real ── */
.mg-dg-row {
    margin-bottom: 14px;
}
.mg-dg-row:last-child { margin-bottom: 0; }
.mg-dg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.mg-dg-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
}
.mg-dg-nums {
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
}
.mg-dg-actual { font-weight: 900; color: var(--text); }
.mg-dg-actual.mg-dg-over { color: #EF4444; }
.mg-dg-slash { color: #CBD5E1; margin: 0 2px; }
.mg-dg-budget { color: #94A3B8; }
.mg-dg-bar {
    height: 6px;
    background: #F1F5F9;
    border-radius: 6px;
    overflow: hidden;
}
.mg-dg-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}
.mg-dg-alert {
    font-size: 10px;
    font-weight: 700;
    color: #EF4444;
    margin-top: 4px;
}

/* ============================================================
   MASTER DASHBOARD — mbd-*
   ============================================================ */
.mbd-header {
    background: #fff;
    padding: 18px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F1F5F9;
    position: sticky;
    top: 0;
    z-index: 10;
}
.mbd-greet {
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
}
.mbd-date {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    margin-top: 2px;
}
.mbd-refresh {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
}
.mbd-refresh:hover { background: #F0FDF4; color: #00512C; border-color: #BBF7D0; }

.mbd-body {
    padding: 20px 16px 100px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* KPI grid */
.mbd-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mbd-kpi-card {
    border-radius: 20px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mbd-kpi-green  { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); }
.mbd-kpi-blue   { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.mbd-kpi-purple { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); }
.mbd-kpi-amber  { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); }
.mbd-kpi-icon { font-size: 22px; margin-bottom: 4px; line-height: 1; }
.mbd-kpi-val {
    font-size: 28px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.5px;
    line-height: 1;
}
.mbd-kpi-lbl {
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    margin-top: 2px;
}

/* Income hero */
.mbd-income-hero {
    background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
    border-radius: 24px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.2);
}
.mbd-income-label {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,0.55);
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}
.mbd-income-value {
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 6px;
}
.mbd-income-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
}
.mbd-income-sub strong { color: #4ADE80; font-weight: 900; }
.mbd-income-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(74,222,128,0.15);
    color: #4ADE80;
    border: 1px solid rgba(74,222,128,0.3);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

/* Card */
.mbd-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
}
.mbd-card-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #F8FAFC;
}
.mbd-card-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text);
    margin: 0;
}
.mbd-card-sub {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    margin-top: 1px;
}
.mbd-card-total {
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
    flex-shrink: 0;
}
.mbd-total-green { color: #16A34A; }
.mbd-card-body { padding: 14px 18px 18px; }
.mbd-see-all {
    background: none;
    border: 0;
    font-size: 12px;
    font-weight: 800;
    color: #00512C;
    cursor: pointer;
    padding: 4px 0;
    flex-shrink: 0;
}

/* Bar chart */
.mbd-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 8px 18px 18px;
    overflow-x: auto;
}
.mbd-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 36px;
}
.mbd-bar-val {
    font-size: 8px;
    font-weight: 800;
    color: #94A3B8;
    min-height: 12px;
    text-align: center;
}
.mbd-bar-wrap {
    display: flex;
    align-items: flex-end;
    width: 100%;
}
.mbd-bar-fill {
    width: 100%;
    background: #E2E8F0;
    border-radius: 6px 6px 0 0;
    transition: height .5s ease;
}
.mbd-bar-fill.mbd-bar-active { background: linear-gradient(180deg, #00512C, #007A42); }
.mbd-bar-label {
    font-size: 9px;
    font-weight: 600;
    color: #94A3B8;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.mbd-bar-label-active { color: #0F172A; font-weight: 900; }

/* Community list */
.mbd-comm-list { padding: 4px 10px 10px; }
.mbd-comm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 8px;
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s;
}
.mbd-comm-row:hover { background: #F8FAFC; }
.mbd-comm-av {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    flex-shrink: 0;
}
.mbd-comm-info { flex: 1; min-width: 0; }
.mbd-comm-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.mbd-comm-meta {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
}
.mbd-comm-income {
    font-size: 14px;
    font-weight: 900;
    color: var(--text);
    flex-shrink: 0;
}

/* Transaction list */
.mbd-tx-list { padding: 4px 10px 10px; }
.mbd-tx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    transition: background .15s;
}
.mbd-tx-row:hover { background: #F8FAFC; }
.mbd-tx-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #BBF7D0;
    border: 2px solid #16A34A;
    flex-shrink: 0;
}
.mbd-tx-info { flex: 1; min-width: 0; }
.mbd-tx-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}
.mbd-tx-meta {
    font-size: 10px;
    font-weight: 600;
    color: #94A3B8;
}
.mbd-tx-amt {
    font-size: 13px;
    font-weight: 900;
    color: #16A34A;
    flex-shrink: 0;
}
.mbd-empty {
    padding: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
}

/* ============================================================
   MASTER HOME — mhi-* (blank canvas redesign)
   ============================================================ */
.mhi-wrap {
    display: flex; flex-direction: column;
    min-height: 100%; background: #F0F3F5; padding-bottom: 100px;
}
.mhi-topbar {
    background: #fff; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #F1F5F9; position: sticky; top: 0; z-index: 10;
}
.mhi-topbar-left { display: flex; align-items: center; gap: 10px; }
.mhi-topbar-av {
    width: 36px; height: 36px; border-radius: 11px;
    background: linear-gradient(135deg,#00512C,#007A42); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900; flex-shrink: 0;
}
.mhi-topbar-name { font-size: 13px; font-weight: 900; color: var(--text); line-height: 1.2; }
.mhi-topbar-role { font-size: 10px; font-weight: 600; color: #94A3B8; }
.mhi-topbar-refresh {
    width: 36px; height: 36px; border-radius: 11px;
    border: 1.5px solid #E2E8F0; background: #F8FAFC; color: #64748B;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s;
}
.mhi-topbar-refresh:hover { background: #F0FDF4; border-color: #BBF7D0; color: #00512C; }
.mhi-income-hero {
    margin: 16px 16px 0;
    background: linear-gradient(145deg,#0B1F15 0%,#003D21 60%,#005C30 100%);
    border-radius: 26px; padding: 24px 20px 20px; position: relative; overflow: hidden;
}
.mhi-income-hero::before {
    content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle,rgba(0,122,66,.3) 0%,transparent 70%);
    top: -60px; right: -40px; pointer-events: none;
}
.mhi-income-label { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: rgba(255,255,255,.4); margin-bottom: 4px; position: relative; z-index: 1; }
.mhi-income-value { font-size: 36px; font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1; margin-bottom: 6px; position: relative; z-index: 1; }
.mhi-income-meta { font-size: 12px; color: rgba(255,255,255,.5); font-weight: 600; margin-bottom: 20px; position: relative; z-index: 1; }
.mhi-income-meta strong { color: #4ADE80; font-weight: 900; }
.mhi-income-grid {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center; background: rgba(255,255,255,.06); border-radius: 16px;
    padding: 14px 16px; position: relative; z-index: 1;
}
.mhi-ig-item { text-align: center; }
.mhi-ig-n { font-size: 20px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 3px; }
.mhi-ig-n-green { color: #4ADE80; }
.mhi-ig-l { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .3px; }
.mhi-ig-sep { width: 1px; height: 32px; background: rgba(255,255,255,.10); }
.mhi-alert-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 0; }
.mhi-alert {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-radius: 14px;
    font-size: 12px; font-weight: 800; cursor: pointer; transition: opacity .15s;
}
.mhi-alert:hover { opacity: .85; }
.mhi-alert svg { flex-shrink: 0; }
.mhi-alert span { flex: 1; }
.mhi-alert-orange { background: rgba(249,115,22,.10); color: #EA580C; }
.mhi-alert-red    { background: rgba(239,68,68,.10);  color: #DC2626; }
.mhi-section-search { padding: 14px 16px 0; position: relative; }
.mh-search-drop {
    display: none; position: absolute; left: 16px; right: 16px; top: 62px;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 16px;
    z-index: 20; max-height: 300px; overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.mhi-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 0; }
.mhi-nav-item {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 10px; padding: 16px; border-radius: 20px; border: 0;
    cursor: pointer; font-size: 13px; font-weight: 800; color: #fff;
    position: relative; transition: transform .15s, box-shadow .15s;
    text-align: left; min-height: 90px;
}
.mhi-nav-item:active { transform: scale(.97); }
.mhi-nav-green  { background: linear-gradient(135deg,#005C30,#007A42); box-shadow: 0 4px 14px rgba(0,92,48,.30); }
.mhi-nav-blue   { background: linear-gradient(135deg,#1D4ED8,#3B82F6); box-shadow: 0 4px 14px rgba(29,78,216,.25); }
.mhi-nav-purple { background: linear-gradient(135deg,#5B21B6,#7C3AED); box-shadow: 0 4px 14px rgba(91,33,182,.25); }
.mhi-nav-amber  { background: linear-gradient(135deg,#B45309,#D97706); box-shadow: 0 4px 14px rgba(180,83,9,.25); }
.mhi-nav-red    { background: linear-gradient(135deg,#991B1B,#DC2626); box-shadow: 0 4px 14px rgba(153,27,27,.30); }
.mhi-nav-badge {
    position: absolute; top: 12px; right: 12px;
    background: rgba(255,255,255,.2); color: #fff;
    border-radius: 99px; font-size: 10px; font-weight: 900; padding: 2px 8px;
}
.mhi-nav-alert {
    position: absolute; top: 12px; right: 12px;
    background: #fff; color: #DC2626;
    border-radius: 99px; font-size: 10px; font-weight: 900; padding: 2px 8px;
}
.mhi-section { margin: 14px 16px 0; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.mhi-section-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid #F8FAFC; }
.mhi-section-title { font-size: 14px; font-weight: 900; color: var(--text); }
.mhi-section-sub   { font-size: 11px; font-weight: 700; color: #94A3B8; }
.mhi-section-link  { background: none; border: 0; font-size: 12px; font-weight: 800; color: #00512C; cursor: pointer; padding: 0; }
.mhi-bar-chart { display: flex; align-items: flex-end; gap: 6px; padding: 8px 18px 16px; }
.mhi-bar-col   { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.mhi-bar-amt   { font-size: 7px; font-weight: 800; color: #94A3B8; min-height: 10px; text-align: center; white-space: nowrap; }
.mhi-bar-track { display: flex; align-items: flex-end; height: 64px; width: 100%; }
.mhi-bar-fill  { width: 100%; background: #E2E8F0; border-radius: 6px 6px 0 0; transition: height .6s ease; }
.mhi-bar-fill.mhi-bar-now { background: linear-gradient(180deg,#22C55E 0%,#00512C 100%); }
.mhi-bar-lbl     { font-size: 8px; font-weight: 700; color: #94A3B8; text-align: center; }
.mhi-bar-lbl-now { color: #00512C; font-weight: 900; font-size: 9px; }
.mhi-comm-scroll { display: flex; gap: 10px; padding: 12px 18px 18px; overflow-x: auto; scrollbar-width: none; }
.mhi-comm-scroll::-webkit-scrollbar { display: none; }
.mhi-comm-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; min-width: 90px; background: #F8FAFC;
    border-radius: 18px; padding: 14px 10px 12px; flex-shrink: 0; text-align: center;
}
.mhi-comm-ring-wrap { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.mhi-comm-pct {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 900;
}
.mhi-comm-name { font-size: 10px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 78px; }
.mhi-comm-sub  { font-size: 9px; font-weight: 600; color: #94A3B8; white-space: nowrap; }
.mhi-comm-empty { padding: 24px 18px; font-size: 12px; font-weight: 700; color: #94A3B8; }
.mhi-act-card { padding: 4px 10px 10px; }
.mhi-act-row  { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; transition: background .12s; }
.mhi-act-row:hover { background: #F8FAFC; }
.mhi-act-dot  { width: 10px; height: 10px; border-radius: 50%; background: #BBF7D0; border: 2.5px solid #16A34A; flex-shrink: 0; }
.mhi-act-info { flex: 1; min-width: 0; }
.mhi-act-name { font-size: 12px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
.mhi-act-meta { font-size: 10px; font-weight: 600; color: #94A3B8; }
.mhi-act-amt  { font-size: 13px; font-weight: 900; color: #16A34A; flex-shrink: 0; }
.mhi-act-empty { padding: 24px; text-align: center; font-size: 12px; font-weight: 700; color: #94A3B8; }

/* ============================================================
   MANAGER REPORTES — rich layout
   ============================================================ */
.mr-header {
    background: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #F0F0F5;
    position: sticky;
    top: 0;
    z-index: 10;
}
.mr-back {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    cursor: pointer;
    flex-shrink: 0;
}
.mr-back:hover { background: #F0F0F5; }
.mr-header-title { flex: 1; }
.mr-header-name {
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
}
.mr-header-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-4);
    margin-top: 2px;
}
.mr-header-add {
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #00512C, #003D21);
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 81, 44, 0.2);
}
.mr-header-add:active { transform: scale(0.96); }

.mr-body {
    padding: 18px 16px 100px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.mr-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.mr-stat {
    background: #fff;
    border-radius: 18px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.mr-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mr-stat-info { min-width: 0; flex: 1; }
.mr-stat-value {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
}
.mr-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    margin-top: 3px;
}

.mr-tabs-main {
    display: flex;
    gap: 8px;
    background: #fff;
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.mr-tab-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.2s;
}
.mr-tab-main.on {
    background: linear-gradient(135deg, #00512C, #003D21);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 81, 44, 0.25);
}
.mr-tab-count {
    font-size: 10px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.2);
    color: inherit;
}
.mr-tab-main.on .mr-tab-count {
    background: rgba(255, 255, 255, 0.2);
}

.mr-subtabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
}
.mr-subtabs::-webkit-scrollbar { display: none; }
.mr-subtab {
    white-space: nowrap;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.mr-subtab span {
    font-size: 10px;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 8px;
    background: #F1F5F9;
    color: #94A3B8;
}
.mr-subtab.on {
    background: #00512C;
    border-color: #00512C;
    color: #fff;
}
.mr-subtab.on span {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.mr-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mr-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mr-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
}
.mr-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.mr-card-bar {
    width: 5px;
    flex-shrink: 0;
}
.mr-card-body {
    flex: 1;
    padding: 16px 18px;
    min-width: 0;
}
.mr-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.mr-card-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 900;
    padding: 4px 9px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}
.mr-badge-cat {
    background: #F8FAFC;
    color: #64748B;
}
.mr-card-date {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    flex-shrink: 0;
}
.mr-card-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
}
.mr-card-desc {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}
.mr-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #F1F5F9;
}
.mr-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.mr-card-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00512C, #003D21);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mr-card-author-info { min-width: 0; }
.mr-card-author-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mr-card-author-meta {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mr-card-tag-ok {
    font-size: 9px;
    font-weight: 900;
    color: #00512C;
    background: #F0FDF4;
    padding: 4px 9px;
    border-radius: 7px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.mr-card-tag-pend {
    font-size: 9px;
    font-weight: 900;
    color: #94A3B8;
    background: #F8FAFC;
    padding: 4px 9px;
    border-radius: 7px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* ── Reportes v2: Header, Stats, Tabs ── */
.mr2-header {
    background: linear-gradient(135deg, #00512C 0%, #003D21 60%, #002818 100%);
    border-radius: 0 0 28px 28px;
    padding: 16px 20px 20px;
    color: #fff;
    margin-bottom: 18px;
}
.mr2-header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.mr2-back {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: rgba(255,255,255,0.12);
    border: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mr2-header-info { flex: 1; min-width: 0; }
.mr2-header-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.3px;
}
.mr2-header-sub {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
}
.mr2-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 0;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mr2-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.mr2-stat-chip {
    background: rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px 8px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mr2-stat-num {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
}
.mr2-stat-lbl {
    font-size: 9px;
    font-weight: 800;
    opacity: 0.7;
    letter-spacing: 0.3px;
    margin-top: 2px;
}
.mr2-stat-pend .mr2-stat-num { color: #FDBA74; }
.mr2-stat-proc .mr2-stat-num { color: #93C5FD; }
.mr2-stat-ok .mr2-stat-num { color: #6EE7B7; }
.mr2-stat-an .mr2-stat-num { color: #fff; }
.mr2-body { padding: 0 16px 24px; }
.mr2-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.mr2-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    border-radius: 16px;
    border: 2px solid #E2E8F0;
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    color: #64748B;
    cursor: pointer;
    transition: all 0.2s;
}
.mr2-tab.on {
    background: linear-gradient(135deg, #00512C, #003D21);
    border-color: #00512C;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 81, 44, 0.25);
}
.mr2-tab-count {
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.15);
}
.mr2-tab.on .mr2-tab-count {
    background: rgba(255,255,255,0.2);
}
.mr2-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Anuncios Card v2 ── */
.mr-an-empty {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mr-an-empty-icon { font-size: 44px; margin-bottom: 12px; }
.mr-an-empty-title { font-size: 15px; font-weight: 900; color: #0F172A; margin-bottom: 4px; }
.mr-an-empty-sub { font-size: 12px; font-weight: 600; color: #94A3B8; }
.mr-an-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 2px 8px rgba(15,23,42,0.05), 0 0 0 1px rgba(15,23,42,0.04);
    transition: all 0.25s ease;
    margin-bottom: 14px;
}
.mr-an-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.mr-an-bar {
    width: 5px;
    flex-shrink: 0;
}
.mr-an-body {
    flex: 1;
    padding: 18px 20px 16px;
    min-width: 0;
}
.mr-an-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.mr-an-type-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.mr-an-top-main { flex: 1; min-width: 0; }
.mr-an-title {
    font-size: 16px;
    font-weight: 900;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 2px;
    word-break: break-word;
}
.mr-an-type-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
}
.mr-an-time-block {
    text-align: right;
    flex-shrink: 0;
}
.mr-an-rel {
    font-size: 10px;
    font-weight: 800;
    color: #00512C;
    background: #F0FDF4;
    padding: 3px 8px;
    border-radius: 7px;
    display: inline-block;
    margin-bottom: 3px;
}
.mr-an-time {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
}
.mr-an-content {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    line-height: 1.6;
    background: #F8FAFC;
    border-left: 3px solid #E2E8F0;
    padding: 12px 14px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 14px;
    word-break: break-word;
}
.mr-an-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #E2E8F0;
}
.mr-an-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00512C, #003D21);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mr-an-author-info { flex: 1; min-width: 0; }
.mr-an-author-label {
    font-size: 9px;
    font-weight: 900;
    color: #94A3B8;
    letter-spacing: 0.5px;
}
.mr-an-author-name {
    font-size: 13px;
    font-weight: 900;
    color: #0F172A;
}
.mr-an-date-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
    background: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
}
.mr-an-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.mr-an-btn-edit {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 81, 44, 0.08);
    color: #00512C;
    border: 0;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}
.mr-an-btn-edit:hover { background: rgba(0, 81, 44, 0.15); }
.mr-an-btn-del {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
    border: 0;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}
.mr-an-btn-del:hover { background: rgba(239, 68, 68, 0.15); }

/* ── Reportes: Detailed Card v2 ── */
.mr-card2 {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
    margin-bottom: 14px;
}
.mr-card2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.mr-c2-bar {
    width: 5px;
    flex-shrink: 0;
}
.mr-c2-body {
    flex: 1;
    padding: 18px 20px 16px;
    min-width: 0;
}
.mr-c2-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.mr-c2-cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.mr-c2-top-main {
    flex: 1;
    min-width: 0;
}
.mr-c2-title {
    font-size: 16px;
    font-weight: 900;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 3px;
    word-break: break-word;
}
.mr-c2-cat-line {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.2px;
}
.mr-c2-id {
    font-family: var(--font-mono);
    color: #64748B;
    background: #F1F5F9;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10px;
}
.mr-c2-time-block {
    text-align: right;
    flex-shrink: 0;
}
.mr-c2-rel {
    font-size: 10px;
    font-weight: 800;
    color: #00512C;
    background: #F0FDF4;
    padding: 3px 8px;
    border-radius: 7px;
    display: inline-block;
    margin-bottom: 4px;
}
.mr-c2-time {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}
.mr-c2-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.mr-c2-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 900;
    padding: 5px 10px;
    border-radius: 8px;
    letter-spacing: 0.4px;
}
.mr-c2-desc {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    line-height: 1.55;
    background: #F8FAFC;
    border-left: 3px solid #E2E8F0;
    padding: 12px 14px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 14px;
    word-break: break-word;
}
.mr-c2-desc-empty {
    color: #CBD5E1;
    font-style: italic;
}
.mr-c2-photo-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #F1F5F9;
}
.mr-c2-photo {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}
.mr-c2-photo-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mr-c2-author-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #E2E8F0;
}
.mr-c2-avatar {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, #00512C, #003D21);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 81, 44, 0.2);
}
.mr-c2-author-info {
    flex: 1;
    min-width: 0;
}
.mr-c2-author-label {
    font-size: 9px;
    font-weight: 900;
    color: #94A3B8;
    letter-spacing: 0.6px;
    margin-bottom: 2px;
}
.mr-c2-author-name {
    font-size: 14px;
    font-weight: 900;
    color: #0F172A;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mr-c2-author-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.mr-c2-meta-pill {
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    background: #fff;
    padding: 3px 8px;
    border-radius: 7px;
    border: 1px solid #E2E8F0;
}
.mr-c2-quick {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.mr-c2-qbtn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.15s;
}
.mr-c2-qbtn:active { transform: scale(0.92); }
.mr-c2-qbtn-call {
    background: #00512C;
    color: #fff;
}
.mr-c2-qbtn-wa {
    background: #25D366;
    color: #fff;
}
.mr-c2-response {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04));
    border-left: 3px solid #3B82F6;
    border-radius: 0 12px 12px 0;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.mr-c2-response-label {
    font-size: 9px;
    font-weight: 900;
    color: #3B82F6;
    letter-spacing: 0.6px;
    margin-bottom: 3px;
}
.mr-c2-response-text {
    font-size: 12px;
    font-weight: 600;
    color: #1E40AF;
    line-height: 1.5;
}
.mr-c2-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed #E2E8F0;
}
.mr-c2-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}
.mr-c2-footer-action {
    font-size: 11px;
    font-weight: 900;
    color: #00512C;
    letter-spacing: 0.2px;
}

.mr-empty {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.mr-empty-icon {
    display: inline-flex;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: #F8FAFC;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
    margin-bottom: 14px;
}
.mr-empty-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}
.mr-empty-sub {
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
}

/* ── KPI Grid ── */
.md-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.md-kpi {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 18px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.md-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.md-kpi-green { background: #F0FDF4; color: #00512C; }
.md-kpi-green svg { stroke: #00512C; }
.md-kpi-red { background: #FEF2F2; color: #EF4444; }
.md-kpi-red svg { stroke: #EF4444; }
.md-kpi-gray { background: #F8FAFC; color: #94A3B8; }
.md-kpi-gray svg { stroke: #94A3B8; }
.md-kpi-blue { background: #EFF6FF; color: #3B82F6; }
.md-kpi-blue svg { stroke: #3B82F6; }
.md-kpi-purple { background: #F5F3FF; color: #8B5CF6; }
.md-kpi-purple svg { stroke: #8B5CF6; }

.md-kpi-label {
    font-size: 10px;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.md-kpi-value {
    font-size: 26px;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
}

.md-kpi-val-red {
    color: #EF4444;
}

.md-kpi-pct {
    font-size: 16px;
    font-weight: 800;
    color: #94A3B8;
}

.md-kpi-bar {
    height: 4px;
    background: #F1F5F9;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0 6px;
}

.md-kpi-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00512C, #10B981);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.md-kpi-sub {
    font-size: 10px;
    font-weight: 600;
    color: #94A3B8;
}

/* ── Quick Actions ── */
.md-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
}

.md-actions::-webkit-scrollbar { display: none; }

.md-action {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

.md-action:hover {
    border-color: #00512C;
    background: #F0FDF4;
}

.md-action:active {
    transform: scale(0.97);
}

.md-action-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    flex-shrink: 0;
    position: relative;
}

.md-action:hover .md-action-icon {
    background: #DCFCE7;
    color: #00512C;
}

.md-action:hover .md-action-icon svg {
    stroke: #00512C;
}

.md-action-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    border: 2px solid #FFFFFF;
}

.md-action span {
    font-size: 11px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Widget Grid ── */
.md-widgets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.md-widget {
    background: #FFFFFF;
    border-radius: 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.md-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #F8FAFC;
}

.md-widget-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.md-widget-link {
    font-size: 11px;
    font-weight: 700;
    color: #00512C;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.md-widget-link:hover {
    background: #F0FDF4;
}

.md-widget-body {
    padding: 4px 18px 14px;
}

/* Activity Rows */
.md-activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #F8FAFC;
}

.md-activity-row:last-child {
    border-bottom: none;
}

.md-act-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.md-act-icon-ok {
    background: #F0FDF4;
    color: #00512C;
}

.md-act-info {
    flex: 1;
    min-width: 0;
}

.md-act-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-act-date {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 600;
    margin-top: 2px;
}

.md-act-amount {
    font-size: 14px;
    font-weight: 900;
    color: #00512C;
    flex-shrink: 0;
}

/* Report Rows */
.md-report-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #F8FAFC;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 8px;
}

.md-report-row:last-child {
    border-bottom: none;
}

.md-report-row:hover {
    background: #FAFAFA;
}

.md-rpt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.md-rpt-info {
    flex: 1;
    min-width: 0;
}

.md-rpt-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-rpt-meta {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 600;
    margin-top: 2px;
}

.md-rpt-badge {
    font-size: 9px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.md-rep-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    margin-left: 4px;
    vertical-align: middle;
}

/* Empty State */
.md-empty {
    padding: 28px 16px;
    text-align: center;
}

.md-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.md-empty-text {
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
}

/* ── Billing Config ── */
.md-billing {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.md-billing-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.md-billing-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.md-billing-ok { background: #F0FDF4; color: #00512C; }
.md-billing-ok svg { stroke: #00512C; }
.md-billing-warn { background: #FFF7ED; color: #F97316; }
.md-billing-warn svg { stroke: #F97316; }

.md-billing-label {
    font-size: 9px;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.md-billing-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-billing-edit {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    border-radius: 10px;
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.md-billing-edit:hover {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #00512C;
}

/* ── Month Label ── */
.md-month-label {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #CBD5E1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-bottom: 8px;
}

/* ── KPI Enrichment ── */
.md-kpi-trend {
    font-size: 11px;
    font-weight: 800;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.md-trend-up { color: #10B981; }
.md-trend-down { color: #EF4444; }

.md-kpi-detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #F1F5F9;
}
.md-kpi-moroso {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    padding: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-kpi-more {
    color: #94A3B8;
    font-style: italic;
}

/* ── Data Tables ── */
.md-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 18px 14px;
}
.md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.md-table thead th {
    font-size: 10px;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #F1F5F9;
    white-space: nowrap;
    background: #FAFBFC;
}
.md-table thead th:first-child { padding-left: 0; }
.md-table thead th:last-child { padding-right: 0; }

.md-trow {
    transition: background 0.15s;
    cursor: default;
}
.md-trow:hover {
    background: #FAFBFC;
}
.md-trow td {
    padding: 10px 8px;
    border-bottom: 1px solid #F8FAFC;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 12px;
}
.md-trow:last-child td {
    border-bottom: none;
}
.md-trow td:first-child { padding-left: 0; }
.md-trow td:last-child { padding-right: 0; }

.md-td-name {
    font-weight: 700;
    color: var(--text);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-td-unit {
    color: #6B7280;
    font-size: 11px;
}
.md-td-date {
    color: #6B7280;
    font-size: 12px;
}
.md-td-time {
    display: block;
    font-size: 10px;
    color: #94A3B8;
    font-weight: 500;
}
.md-td-id {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #94A3B8;
    letter-spacing: 0.3px;
}
.md-td-amount {
    font-weight: 900;
    color: #00512C;
}
.md-td-subject {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

/* ── Table Badges ── */
.md-badge {
    font-size: 9px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    display: inline-block;
}
.md-badge-ok { background: #F0FDF4; color: #00512C; }
.md-badge-warn { background: #FFF7ED; color: #F97316; }
.md-badge-high { background: #FEF2F2; color: #EF4444; }
.md-badge-med { background: #FFF7ED; color: #F97316; }

.md-resolve-btn {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    color: #00512C;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.md-resolve-btn:hover {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

/* ── Slide-over Panel ── */
.md-slideover-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.md-slideover-backdrop.md-so-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.md-slideover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    min-width: 340px;
    max-width: 540px;
    background: #FFFFFF;
    z-index: 9001;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0.35s;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
}
.md-slideover.md-so-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0s;
}
.md-so-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #F0F0F5;
    flex-shrink: 0;
}
.md-so-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
    margin: 0;
}
.md-so-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    font-size: 16px;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.md-so-close:hover {
    background: #F0F0F5;
    color: var(--text);
}
.md-so-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.md-so-section {
    margin-bottom: 20px;
}
.md-so-section-title {
    font-size: 10px;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.md-so-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.md-so-stat {
    background: #F8FAFC;
    border-radius: 14px;
    padding: 14px;
}
.md-so-stat-value {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
}
.md-so-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    margin-top: 4px;
}
.md-so-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F8FAFC;
}
.md-so-list-item:last-child {
    border-bottom: none;
}
.md-so-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F0FDF4;
    color: #00512C;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.md-so-item-info {
    flex: 1;
    min-width: 0;
}
.md-so-item-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-so-item-meta {
    font-size: 11px;
    color: #6B7280;
    margin-top: 1px;
}
.md-so-item-right {
    flex-shrink: 0;
    text-align: right;
}
.md-so-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    color: #00512C;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 16px;
}
.md-so-fullscreen:hover {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

/* ── Vertical webapp layout (force single column for widgets) ── */
.md-body {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}
.md-widgets {
    grid-template-columns: 1fr !important;
}
@media (min-width: 760px) {
    .md-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .md-actions {
        gap: 10px;
    }
}

/* ── Mobile: hide less important table columns, wider slideover ── */
@media (max-width: 600px) {
    .md-slideover {
        width: 85%;
        min-width: unset;
    }
    .md-hide-mobile {
        display: none;
    }
}

/* ============================================================
   RESIDENT REGISTRATION — Premium Two-Card Layout
   ============================================================ */

.rreg-wrap {
    /* Break out of .phone (430px) for full-viewport layout */
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 5;
    background: var(--bg);
    display: grid;
    grid-template-columns: minmax(0, 460px);
    grid-auto-rows: max-content;
    justify-content: center;
    padding: 28px 22px 40px;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}
.rreg-wrap > * { width: 100%; max-width: 460px; margin-left: 0; margin-right: 0; }
@media (min-width: 768px) {
    .rreg-wrap { padding: 40px 22px 56px; align-content: start; }
}

/* ── Top bar ── */
.rreg-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0 0;
    margin-bottom: 20px;
}

.rreg-back {
    width: 42px;
    height: 42px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s var(--ease);
    color: var(--text-3);
    box-shadow: var(--shadow-soft);
}

.rreg-back:hover {
    background: var(--brand-50);
    border-color: var(--brand-200);
    color: var(--brand-700);
}

.rreg-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-family: var(--font-display);
}

.rreg-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-3);
    margin-top: 3px;
}

/* ── Community verified badge ── */
.rreg-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 22px;
}

.rreg-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--hero-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-brand);
}

.rreg-badge-label {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-700);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.rreg-badge-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-900);
    margin-top: 3px;
    letter-spacing: -0.02em;
}

/* ── Error box ── */
.rreg-error-box {
    display: none;
    background: linear-gradient(135deg, #FEF2F2, #FFF1F2);
    border: 1.5px solid rgba(239,68,68,0.2);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    color: #DC2626;
    line-height: 1.5;
    gap: 10px;
    align-items: flex-start;
}

.rreg-error-box.visible {
    display: flex;
}

/* ── Section Cards ── */
.rreg-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 22px 20px;
    margin-bottom: 14px;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.rreg-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.rreg-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rreg-card-icon.green { background: var(--brand-100); }
.rreg-card-icon.green svg { stroke: var(--brand-700); }
.rreg-card-icon.blue { background: #DBEAFE; }
.rreg-card-icon.blue svg { stroke: #2563EB; }

.rreg-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.rreg-card-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── Unified Inputs ── */
.rreg-field {
    margin-bottom: 14px;
}

.rreg-field:last-child {
    margin-bottom: 0;
}

.rreg-label {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 7px;
    font-family: var(--font-mono);
}

.rreg-label .req {
    color: var(--danger);
    margin-left: 2px;
}

.rreg-label .opt {
    color: var(--text-4);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10.5px;
    font-family: var(--font-display);
}

.rreg-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F1F5F9;
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 0 14px;
    transition: all .15s var(--ease);
}

.rreg-input-wrap:focus-within {
    border-color: var(--brand-500);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}

.rreg-input-wrap.has-error {
    border-color: var(--danger);
    background: #FEF2F2;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.10);
}

.rreg-input-wrap svg {
    flex-shrink: 0;
    color: var(--text-4);
    transition: color .15s var(--ease);
}

.rreg-input-wrap:focus-within svg {
    color: var(--brand-600);
}

.rreg-input-wrap.has-error svg {
    color: var(--danger);
}

.rreg-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 15px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    outline: none;
    min-width: 0;
}

.rreg-input::placeholder {
    color: var(--text-4);
    font-weight: 400;
}

/* ── Address Grid ── */
.rreg-addr-row {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.rreg-addr-row.two-col {
    grid-template-columns: 2fr 1fr;
}

.rreg-addr-row.three-col {
    grid-template-columns: 1fr 1fr 1fr;
}

.rreg-addr-row .rreg-field {
    margin-bottom: 0;
    min-width: 0;
}

.rreg-addr-row.three-col .rreg-input-wrap {
    padding: 0 10px;
}

.rreg-addr-row.three-col .rreg-input {
    font-size: 14px;
    padding: 13px 0;
}

/* ── Live Preview ── */
.rreg-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #DBEAFE;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    padding: 11px 14px;
    margin-top: 14px;
    min-height: 40px;
    transition: all .2s var(--ease);
}

.rreg-preview-text {
    font-size: 12px;
    font-weight: 500;
    color: #1E40AF;
    line-height: 1.4;
}

.rreg-preview.empty {
    opacity: 0.55;
}

/* ── Submit Button ── */
.rreg-submit {
    width: 100%;
    height: 52px;
    background: var(--brand-500);
    color: #fff;
    border: 0;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: all .2s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.rreg-submit:hover:not(:disabled) {
    background: var(--brand-600);
    transform: translateY(-1px);
}

.rreg-submit:active:not(:disabled) {
    transform: scale(0.98);
}

.rreg-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.rreg-submit .rreg-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* ── Footer ── */
.rreg-footer {
    text-align: center;
    margin-top: 22px;
    padding-bottom: 12px;
    font-size: 13px;
    color: var(--text-3);
}
.rreg-footer-link {
    color: var(--brand-600);
    font-weight: 600;
    cursor: pointer;
}
.rreg-footer-link:hover { text-decoration: underline; }

.rreg-footer-link {
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
}

.rreg-footer-link:hover {
    text-decoration: underline;
}

/* ── Responsive: stack three-col on small screens ── */
@media (max-width: 440px) {
    .rreg-addr-row.three-col {
        grid-template-columns: 1fr 1fr;
    }
    .rreg-addr-row.three-col .rreg-field:first-child {
        grid-column: 1 / -1;
    }
}

/* ═══════════════════════════════════════════════════
   TRANSPARENCY MODULE — Caja de la Comunidad
   ═══════════════════════════════════════════════════ */

/* ── iOS Toggle Switch ── */
.rc-toggle {
    position: relative;
    width: 52px;
    height: 30px;
    flex-shrink: 0;
}
.rc-toggle input {
    display: none;
}
.rc-toggle-track {
    position: absolute;
    inset: 0;
    background: #D1D5DB;
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.3s cubic-bezier(.4,0,.2,1);
}
.rc-toggle input:checked + .rc-toggle-track {
    background: #10B981;
}
.rc-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.rc-toggle input:checked ~ .rc-toggle-thumb {
    transform: translateX(22px);
}

/* ── Manager: Caja Card ── */
.md-caja {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 0;
    margin: 16px 0;
    box-shadow: 0 2px 20px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
    overflow: hidden;
}
.md-caja-hero {
    background: linear-gradient(145deg, #065F46 0%, #059669 50%, #10B981 100%);
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.md-caja-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.md-caja-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.md-caja-label {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.md-caja-amount {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}
.md-caja-amount .md-caja-cur {
    font-size: 24px;
    font-weight: 800;
    opacity: 0.6;
    margin-right: 2px;
}
.md-caja-amount .md-caja-dec {
    font-size: 22px;
    font-weight: 700;
    opacity: 0.4;
}
.md-caja-sub {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    margin-top: 6px;
    position: relative;
    z-index: 1;
}
.md-caja-body {
    padding: 20px 24px 24px;
}
.md-caja-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.md-caja-title svg {
    color: var(--primary);
}

/* Desglose Bar Rows */
.md-desglose-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.md-desglose-row:last-child {
    margin-bottom: 0;
}
.md-desglose-info {
    flex: 1;
    min-width: 0;
}
.md-desglose-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.md-desglose-pct {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
}
.md-desglose-bar {
    height: 8px;
    background: var(--border-2);
    border-radius: 4px;
    overflow: hidden;
}
.md-desglose-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
}
.md-desglose-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-2);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

/* Desglose bar color palette */
.md-desglose-fill.c0 { background: linear-gradient(90deg, #059669, #10B981); }
.md-desglose-fill.c1 { background: linear-gradient(90deg, #2563EB, #3B82F6); }
.md-desglose-fill.c2 { background: linear-gradient(90deg, #D97706, #F59E0B); }
.md-desglose-fill.c3 { background: linear-gradient(90deg, #7C3AED, #8B5CF6); }
.md-desglose-fill.c4 { background: linear-gradient(90deg, #DC2626, #EF4444); }
.md-desglose-fill.c5 { background: linear-gradient(90deg, #0891B2, #06B6D4); }

/* Toggle row for transparency */
.md-caja-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-2);
    background: var(--glass);
    border-radius: 0 0 24px 24px;
}
.md-caja-toggle-info {
    flex: 1;
}
.md-caja-toggle-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 2px;
}
.md-caja-toggle-desc {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-4);
}

/* Empty state for desglose */
.md-desglose-empty {
    text-align: center;
    padding: 20px 0;
    color: var(--text-4);
    font-size: 13px;
    font-weight: 600;
}

/* ── Resident: Transparency Card ── */
.rh4-caja-card {
    background: #FFFFFF;
    border-radius: 24px;
    margin: 12px 16px 0;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.rh4-caja-hero {
    background: linear-gradient(145deg, #065F46, #059669, #10B981);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.rh4-caja-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}
.rh4-caja-hero-label {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.rh4-caja-hero-amount {
    font-size: 34px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -1.5px;
    line-height: 1;
}
.rh4-caja-hero-amount .caja-cur { font-size: 20px; opacity: 0.6; }
.rh4-caja-hero-amount .caja-dec { font-size: 18px; opacity: 0.4; }
.rh4-caja-body {
    padding: 16px 20px 20px;
}
.rh4-caja-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* Resident desglose mini rows */
.rh4-desglose-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.rh4-desglose-item:last-child { margin-bottom: 0; }
.rh4-desglose-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.rh4-desglose-dot.c0 { background: #10B981; }
.rh4-desglose-dot.c1 { background: #3B82F6; }
.rh4-desglose-dot.c2 { background: #F59E0B; }
.rh4-desglose-dot.c3 { background: #8B5CF6; }
.rh4-desglose-dot.c4 { background: #EF4444; }
.rh4-desglose-dot.c5 { background: #06B6D4; }
.rh4-desglose-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}
.rh4-desglose-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}
.rh4-desglose-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    min-width: 32px;
    text-align: right;
}

/* Resident: Privacy card (when transparency is off) */
.rh4-caja-private {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px 20px;
    margin: 12px 16px 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.rh4-caja-private-icon {
    width: 40px;
    height: 40px;
    background: var(--border-2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rh4-caja-private-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-4);
}
.rh4-caja-private-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-4);
    line-height: 1.4;
}

/* ── Wizard Config toggle row ── */
.mc-toggle-card {
    position: relative; z-index: 1;
    background: #fff; border-radius: 24px;
    padding: 20px 24px; margin: 0 20px 16px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
    display: flex; align-items: center; gap: 16px;
}
.mc-toggle-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    background: #ECFDF5; display: flex; align-items: center; justify-content: center;
}
.mc-toggle-icon svg { stroke: #059669; }
.mc-toggle-info { flex: 1; }
.mc-toggle-title {
    font-size: 14px; font-weight: 900; color: #111827; margin-bottom: 2px;
}
.mc-toggle-desc {
    font-size: 11px; font-weight: 600; color: #9CA3AF; line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   MANAGER DASHBOARD — UI Kit Master v2
   ───────────────────────────────────────────────────────────── */
#man-dashboard { background: #F7F8FA; min-height: 100vh; padding-bottom: 90px; }

.mgr-header {
    background: var(--hero-gradient);
    color: #fff;
    padding: 18px 20px 22px;
    position: relative;
    overflow: hidden;
}
.mgr-header::before {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,0.25), transparent 65%);
    pointer-events: none;
}
.mgr-header-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: relative; z-index: 1;
}
.mgr-h-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mgr-h-icon {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    background: rgba(255,255,255,0.14); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.mgr-h-kicker {
    font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
    color: rgba(255,255,255,0.72); text-transform: uppercase;
}
.mgr-h-title {
    font-size: 18px; font-weight: 800; color: #fff;
    margin-top: 2px; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgr-h-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mgr-panic {
    height: 36px; padding: 0 14px; border-radius: 12px;
    background: #DC2626; color: #fff; border: 0;
    font-size: 12px; font-weight: 900; letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(220,38,38,0.45), inset 0 -2px 0 rgba(0,0,0,0.18);
    transition: transform .12s ease;
}
.mgr-panic:active { transform: scale(0.96); }
.mgr-icon-btn {
    width: 36px; height: 36px; border-radius: 12px; border: 0;
    background: rgba(255,255,255,0.14); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.18);
}
.mgr-icon-btn:hover { background: rgba(255,255,255,0.22); }

.mgr-body { padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 14px; }

/* ── Hero row: Fund + Alerts ── */
.mgr-hero-row {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px;
    margin-top: -22px;
}
.mgr-fund-card {
    position: relative; overflow: hidden;
    border-radius: 22px; padding: 18px 18px 16px;
    background: #FFFFFF;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-2);
}
.mgr-fund-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(circle at 100% 0%, rgba(16,185,129,0.10), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(4,120,87,0.06), transparent 60%);
}
.mgr-fund-content { position: relative; z-index: 1; }
.mgr-fund-label {
    font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--brand-700); text-transform: uppercase;
}
.mgr-fund-amount {
    font-family: var(--font-mono);
    font-size: 32px; font-weight: 800; color: var(--text);
    margin: 8px 0 4px; line-height: 1; letter-spacing: -.5px;
    display: flex; align-items: baseline; gap: 2px;
}
.mgr-fund-cur { font-size: 18px; color: var(--text-3); font-weight: 700; }
.mgr-fund-cents { font-size: 16px; color: var(--text-4); font-weight: 700; }
.mgr-fund-sub {
    font-size: 11px; font-weight: 600; color: var(--text-3);
    margin-bottom: 12px; line-height: 1.4;
}
.mgr-fund-bar {
    height: 6px; border-radius: 999px;
    background: var(--border-2); overflow: hidden;
}
.mgr-fund-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
    transition: width .4s ease;
}
.mgr-fund-bar-pct {
    margin-top: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .8px;
    color: var(--text-4); text-transform: uppercase;
}

.mgr-alerts-stack { display: flex; flex-direction: column; gap: 8px; }
.mgr-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 14px;
    border: 0; background: #fff; cursor: pointer;
    text-align: left; width: 100%;
    box-shadow: var(--shadow-soft);
    transition: transform .12s, box-shadow .15s;
}
.mgr-alert:not(.mgr-alert-ok):hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.mgr-alert-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mgr-alert-body { flex: 1; min-width: 0; }
.mgr-alert-count {
    font-family: var(--font-mono);
    font-size: 18px; font-weight: 800; line-height: 1; color: var(--text);
}
.mgr-alert-text { font-size: 11px; font-weight: 600; color: var(--text-3); margin-top: 2px; line-height: 1.3; }
.mgr-alert-text-strong { font-size: 12px; font-weight: 800; color: var(--text); }
.mgr-alert-sub { font-size: 10px; font-weight: 600; color: var(--text-4); margin-top: 1px; }
.mgr-alert-chev { color: var(--text-4); flex-shrink: 0; }

.mgr-alert-critical { border-left: 3px solid #DC2626; }
.mgr-alert-critical .mgr-alert-icon { background: #FEE2E2; color: #DC2626; }
.mgr-alert-critical .mgr-alert-count { color: #DC2626; }

.mgr-alert-warn { border-left: 3px solid #F59E0B; }
.mgr-alert-warn .mgr-alert-icon { background: #FEF3C7; color: #B45309; }
.mgr-alert-warn .mgr-alert-count { color: #B45309; }

.mgr-alert-ok { border-left: 3px solid var(--brand-500); cursor: default; }
.mgr-alert-ok .mgr-alert-icon { background: var(--brand-50); color: var(--brand-700); }

/* ── Quick actions ── */
.mgr-quick-row {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.mgr-qa {
    display: flex; align-items: center; gap: 10px;
    padding: 12px; border-radius: 16px;
    background: #fff; border: 1px solid var(--border-2);
    cursor: pointer; text-align: left;
    box-shadow: var(--shadow-soft);
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
.mgr-qa:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); border-color: var(--brand-500); }
.mgr-qa:active { transform: scale(0.98); }
.mgr-qa-icon {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    background: var(--brand-50); color: var(--brand-700);
    display: flex; align-items: center; justify-content: center;
}
.mgr-qa-text { min-width: 0; flex: 1; }
.mgr-qa-title { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.2; }
.mgr-qa-sub { font-size: 10px; font-weight: 600; color: var(--text-4); margin-top: 2px; }

/* ── Section / Timeline ── */
.mgr-section { margin-top: 4px; }
.mgr-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 10px; gap: 12px;
}
.mgr-section-kicker {
    font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
    color: var(--brand-700); text-transform: uppercase;
}
.mgr-section-title {
    font-size: 17px; font-weight: 800; color: var(--text);
    margin: 2px 0 0; line-height: 1.2;
}
.mgr-section-link {
    font-size: 11px; font-weight: 800; color: var(--brand-700);
    background: none; border: 0; cursor: pointer; padding: 6px 8px;
    border-radius: 8px;
}
.mgr-section-link:hover { background: var(--brand-50); }

.mgr-timeline {
    background: #fff; border-radius: 18px; padding: 8px 16px;
    box-shadow: var(--shadow-soft); border: 1px solid var(--border-2);
    position: relative;
}
.mgr-tl-item {
    display: grid; grid-template-columns: 56px 16px 1fr;
    align-items: center; gap: 10px;
    padding: 12px 0;
    position: relative;
}
.mgr-tl-item + .mgr-tl-item { border-top: 1px dashed var(--border-2); }
.mgr-tl-time {
    font-size: 11px; font-weight: 800; color: var(--text-3);
    letter-spacing: .4px;
}
.mgr-tl-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-50);
    margin: 0 auto;
}
.mgr-tl-title { font-size: 13px; font-weight: 800; color: var(--text); }
.mgr-tl-sub { font-size: 11px; font-weight: 600; color: var(--text-4); margin-top: 2px; }

.mgr-tl-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 22px 12px; text-align: center;
}
.mgr-tl-empty-icon {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--brand-50); color: var(--brand-700);
    display: flex; align-items: center; justify-content: center;
}
.mgr-tl-empty-text { font-size: 12px; font-weight: 700; color: var(--text-3); }

/* ── Invite code ── */
.mgr-invite {
    background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 100%);
    border: 1px solid var(--brand-50);
    border-radius: 18px; padding: 14px 16px;
}
.mgr-invite-label {
    font-size: 9px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--brand-700); text-transform: uppercase;
}
.mgr-invite-row {
    display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.mgr-invite-code {
    flex: 1;
    font-size: 22px; font-weight: 800; color: var(--text);
    letter-spacing: 4px; padding: 10px 14px;
    background: #fff; border: 1.5px dashed var(--brand-500);
    border-radius: 12px; text-align: center;
}
.mgr-invite-copy {
    height: 40px; padding: 0 14px; border-radius: 12px;
    background: var(--brand-700); color: #fff; border: 0;
    font-size: 12px; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    box-shadow: var(--shadow-brand);
}
.mgr-invite-copy:hover { background: var(--brand-900); }
.mgr-invite-hint {
    font-size: 10px; font-weight: 600; color: var(--text-3);
    margin-top: 8px; line-height: 1.4;
}

/* ── Widgets (existing tables) ── */
.mgr-widgets { display: flex; flex-direction: column; gap: 12px; }
.mgr-widget {
    background: #fff; border-radius: 18px; padding: 14px 14px 10px;
    border: 1px solid var(--border-2); box-shadow: var(--shadow-soft);
}
.mgr-widget-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; gap: 10px;
}
.mgr-widget-title {
    font-size: 13px; font-weight: 800; color: var(--text);
    margin: 0; display: flex; align-items: center; gap: 8px;
}
.mgr-widget-link {
    font-size: 11px; font-weight: 800; color: var(--brand-700);
    background: none; border: 0; cursor: pointer; padding: 4px 6px;
    border-radius: 6px;
}
.mgr-widget-link:hover { background: var(--brand-50); }

.mgr-pill-warn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #FEF3C7; color: #B45309;
    font-size: 10px; font-weight: 800;
}

.mgr-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 12px; text-align: center;
}
.mgr-empty-icon {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--brand-50); color: var(--brand-700);
    display: flex; align-items: center; justify-content: center;
}
.mgr-empty-text { font-size: 12px; font-weight: 700; color: var(--text-3); }

/* ── Billing strip ── */
.mgr-billing {
    background: #fff; border-radius: 16px; padding: 12px 14px;
    border: 1px solid var(--border-2);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mgr-billing-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mgr-billing-icon {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    background: var(--brand-50); color: var(--brand-700);
    display: flex; align-items: center; justify-content: center;
}
.mgr-billing-icon.warn { background: #FEF3C7; color: #B45309; }
.mgr-billing-label {
    font-size: 9px; font-weight: 800; letter-spacing: 1.3px;
    color: var(--text-4); text-transform: uppercase;
}
.mgr-billing-value {
    font-size: 12px; font-weight: 700; color: var(--text); margin-top: 2px;
}
.mgr-billing-edit {
    background: var(--brand-700); color: #fff; border: 0;
    height: 34px; padding: 0 14px; border-radius: 10px;
    font-size: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0;
}
.mgr-billing-edit:hover { background: var(--brand-900); }

/* ── Caja / Transparencia ── */
.mgr-caja {
    background: #fff; border-radius: 18px; padding: 14px;
    border: 1px solid var(--border-2); box-shadow: var(--shadow-soft);
}
.mgr-caja-head { margin-bottom: 10px; }
.mgr-caja-kicker {
    font-size: 9px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--brand-700); text-transform: uppercase;
}
.mgr-caja-title { font-size: 14px; font-weight: 800; color: var(--text); margin-top: 2px; }
.mgr-caja-body { display: flex; flex-direction: column; gap: 8px; }
.mgr-caja-toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border-2);
}
.mgr-caja-toggle-label { font-size: 12px; font-weight: 800; color: var(--text); }
.mgr-caja-toggle-desc { font-size: 10px; font-weight: 600; color: var(--text-4); margin-top: 2px; }

/* ── Responsive: stack the hero on narrow screens ── */
@media (max-width: 540px) {
    .mgr-hero-row { grid-template-columns: 1fr; }
    .mgr-quick-row { grid-template-columns: 1fr 1fr; }
    .mgr-fund-amount { font-size: 28px; }
}
@media (min-width: 768px) {
    .mgr-quick-row { grid-template-columns: repeat(4, 1fr); }
    .mgr-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   MASTER DASHBOARD — SaaS Console UI Kit v2
   ───────────────────────────────────────────────────────────── */
#mas-dashboard { background: #F7F8FA; min-height: 100vh; padding-bottom: 90px; }

.msd-header {
    background: var(--hero-gradient);
    color: #fff;
    padding: 18px 20px 28px;
    position: relative; overflow: hidden;
}
.msd-header::before {
    content: ""; position: absolute; right: -80px; top: -80px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,0.28), transparent 65%);
    pointer-events: none;
}
.msd-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.msd-h-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.msd-h-icon {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    background: rgba(255,255,255,0.14); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.msd-h-kicker {
    font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
    color: rgba(255,255,255,0.72); text-transform: uppercase;
}
.msd-h-title { font-size: 18px; font-weight: 800; color: #fff; margin-top: 2px; line-height: 1.2; }
.msd-refresh {
    width: 36px; height: 36px; border-radius: 12px; border: 0;
    background: rgba(255,255,255,0.14); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.18);
}
.msd-refresh:hover { background: rgba(255,255,255,0.22); }

.msd-body { padding: 0 16px 32px; display: flex; flex-direction: column; gap: 14px; }

/* ── HERO MRR ── */
.msd-hero {
    position: relative; overflow: hidden;
    margin-top: -22px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-card);
    padding: 22px 22px 20px;
}
.msd-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(circle at 100% 0%, rgba(16,185,129,0.10), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(4,120,87,0.06), transparent 60%);
}
.msd-hero-content { position: relative; z-index: 1; }
.msd-hero-label {
    font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--brand-700); text-transform: uppercase;
}
.msd-hero-amount {
    font-family: var(--font-mono);
    font-size: 38px; font-weight: 800; color: var(--text);
    margin: 8px 0 12px; line-height: 1; letter-spacing: -.5px;
    display: flex; align-items: baseline; gap: 2px;
}
.msd-hero-cur { font-size: 22px; color: var(--text-3); font-weight: 700; }
.msd-hero-cents { font-size: 18px; color: var(--text-4); font-weight: 700; }
.msd-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msd-hero-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800;
    font-family: var(--font-mono);
}
.msd-hero-pill.up { background: var(--brand-50); color: var(--brand-700); }
.msd-hero-pill.down { background: #FEE2E2; color: #DC2626; }
.msd-hero-meta-text { font-size: 11px; font-weight: 600; color: var(--text-3); }

/* ── KPIs strip ── */
.msd-kpis {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.msd-kpi {
    background: #fff; border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column; gap: 2px;
}
.msd-kpi-icon {
    width: 32px; height: 32px; border-radius: 10px; margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center;
}
.msd-kpi-icon-green { background: var(--brand-50); color: var(--brand-700); }
.msd-kpi-icon-blue  { background: #DBEAFE; color: #1D4ED8; }
.msd-kpi-icon-purple { background: #EDE9FE; color: #6D28D9; }
.msd-kpi-icon-amber { background: #FEF3C7; color: #B45309; }
.msd-kpi-val {
    font-family: var(--font-mono);
    font-size: 20px; font-weight: 800; color: var(--text); line-height: 1;
}
.msd-kpi-val-sm { font-family: inherit; font-size: 14px; }
.msd-kpi-lbl { font-size: 11px; font-weight: 700; color: var(--text-3); margin-top: 4px; }
.msd-kpi-sub { font-size: 10px; font-weight: 600; color: var(--text-4); margin-top: 2px; letter-spacing: .3px; }

.msd-pulse-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.msd-pulse-dot.ok {
    background: var(--brand-500);
    box-shadow: 0 0 0 0 rgba(16,185,129,0.7);
    animation: msdPulse 1.6s infinite;
}
.msd-pulse-dot.idle { background: #F59E0B; }
@keyframes msdPulse {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* ── Cards ── */
.msd-card {
    background: #fff; border-radius: 18px;
    padding: 14px;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-soft);
}
.msd-card-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 12px; gap: 12px;
}
.msd-card-kicker {
    font-size: 9px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--brand-700); text-transform: uppercase;
}
.msd-card-title { font-size: 15px; font-weight: 800; color: var(--text); margin: 2px 0 0; line-height: 1.2; }
.msd-card-total {
    font-family: var(--font-mono);
    font-size: 16px; font-weight: 800; color: var(--text);
}
.msd-card-total-green {
    font-family: var(--font-mono);
    font-size: 14px; font-weight: 800; color: var(--brand-700);
}

/* ── Ranking ── */
.msd-rank-list { display: flex; flex-direction: column; gap: 4px; }
.msd-rank-row {
    display: grid; grid-template-columns: 28px 36px 1fr auto;
    align-items: center; gap: 10px;
    padding: 10px 8px; border-radius: 12px;
    background: transparent; border: 0; cursor: pointer; text-align: left; width: 100%;
    transition: background .12s;
}
.msd-rank-row:hover { background: var(--bg, #F7F8FA); }
.msd-rank-pos { font-size: 11px; font-weight: 800; color: var(--text-4); letter-spacing: .5px; text-align: center; }
.msd-rank-av {
    width: 36px; height: 36px; border-radius: 11px;
    color: #fff; font-weight: 900; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.msd-rank-info { min-width: 0; }
.msd-rank-name { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.2; }
.msd-rank-meta { font-size: 10px; font-weight: 600; color: var(--text-4); margin-top: 2px; letter-spacing: .3px; }
.msd-rank-bar {
    height: 4px; border-radius: 999px;
    background: var(--border-2); overflow: hidden;
    margin-top: 6px;
}
.msd-rank-bar-fill {
    height: 100%; border-radius: 999px;
    transition: width .4s ease;
}
.msd-rank-amt {
    font-size: 13px; font-weight: 800; color: var(--text); flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 540px) {
    .msd-hero-amount { font-size: 32px; }
}
@media (min-width: 768px) {
    .msd-kpis { grid-template-columns: repeat(4, 1fr); }
}
/* ── Desktop centering (sidebar mode) ── */
@media (min-width: 800px) {
    .msd-header { padding: 22px 32px 32px; }
    .msd-header-inner { max-width: 740px; margin: 0 auto; }
    .msd-body { max-width: 740px; margin: 0 auto; padding: 0 0 40px; }
}

/* ─────────────────────────────────────────────────────────────
   MASTER SHARED — Unified design system for all .mas-* pages
   ───────────────────────────────────────────────────────────── */
#mas-home, #mas-comunidades, #mas-usuarios, #mas-reportes, #mas-perfil,
#mas-comunidades-detalle, #mas-comunidades-vista, #mas-crear,
#mas-usuario-det, #mas-usuario-crear {
    background: #F7F8FA; min-height: 100vh; padding-bottom: 100px;
}

.msx-header {
    background: var(--hero-gradient);
    color: #fff;
    padding: 18px 20px 26px;
    position: relative; overflow: hidden;
}
.msx-header::before {
    content: ""; position: absolute; right: -80px; top: -80px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,0.28), transparent 65%);
    pointer-events: none;
}
.msx-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.msx-h-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.msx-h-back {
    width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.msx-h-back:hover { background: rgba(255,255,255,0.22); }
.msx-h-icon {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    background: rgba(255,255,255,0.14); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.msx-h-titles { min-width: 0; }
.msx-h-kicker {
    font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
    color: rgba(255,255,255,0.72); text-transform: uppercase;
}
.msx-h-title { font-size: 18px; font-weight: 800; color: #fff; margin-top: 2px; line-height: 1.2; }
.msx-h-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.msx-h-btn {
    height: 36px; padding: 0 14px; border-radius: 12px;
    background: #fff; color: var(--brand-700); border: 0;
    font-size: 12px; font-weight: 800; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.msx-h-btn:hover { background: #F0FDF4; }
.msx-h-iconbtn {
    width: 36px; height: 36px; border-radius: 12px; border: 0;
    background: rgba(255,255,255,0.14); color: #fff; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
}
.msx-h-iconbtn:hover { background: rgba(255,255,255,0.22); }

.msx-body { padding: 0 16px 32px; display: flex; flex-direction: column; gap: 14px; }

/* ── Search bar (rounded, unified) ── */
.msx-search {
    margin-top: -22px;
    background: #fff; border-radius: 16px;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-card);
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px; height: 48px;
}
.msx-search svg { color: var(--text-4); flex-shrink: 0; }
.msx-search input {
    border: 0; background: transparent; outline: none;
    font-size: 14px; font-weight: 600; color: var(--text);
    flex: 1; min-width: 0;
}
.msx-search input::placeholder { color: var(--text-4); }

/* ── Pills row ── */
.msx-pills {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
}
.msx-pills::-webkit-scrollbar { display: none; }
.msx-pill {
    flex-shrink: 0;
    height: 36px; padding: 0 14px; border-radius: 12px;
    background: #fff; border: 1px solid var(--border-2);
    color: var(--text-3); cursor: pointer;
    font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s, border-color .12s, color .12s;
}
.msx-pill:hover { border-color: var(--brand-500); color: var(--text); }
.msx-pill.on { background: var(--brand-700); color: #fff; border-color: var(--brand-700); box-shadow: var(--shadow-brand); }
.msx-pill .msx-pill-count {
    background: rgba(255,255,255,0.22); color: inherit;
    padding: 1px 6px; border-radius: 8px;
    font-size: 10px; font-weight: 800;
    font-family: var(--font-mono);
}
.msx-pill:not(.on) .msx-pill-count { background: var(--border-2); color: var(--text-4); }

/* ── KPI mini-strip (above lists) ── */
.msx-kpis-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.msx-kpi {
    background: #fff; border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-2);
    text-align: center;
}
.msx-kpi-val {
    font-family: var(--font-mono);
    font-size: 18px; font-weight: 800; color: var(--text); line-height: 1;
}
.msx-kpi-lbl { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: var(--text-4); margin-top: 4px; text-transform: uppercase; }
.msx-kpi.warn .msx-kpi-val { color: #B45309; }
.msx-kpi.danger .msx-kpi-val { color: #DC2626; }
.msx-kpi.info .msx-kpi-val { color: #1D4ED8; }
.msx-kpi.ok .msx-kpi-val { color: var(--brand-700); }

/* ── Card list ── */
.msx-list { display: flex; flex-direction: column; gap: 10px; }
.msx-card {
    background: #fff; border-radius: 16px;
    padding: 14px;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-soft);
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, border-color .15s;
    text-align: left; width: 100%;
}
.msx-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); border-color: var(--brand-500); }
.msx-card-av {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    color: #fff; font-weight: 900; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
.msx-card-info { flex: 1; min-width: 0; }
.msx-card-title { font-size: 14px; font-weight: 800; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msx-card-meta { font-size: 11px; font-weight: 600; color: var(--text-3); margin-top: 3px; }
.msx-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.msx-card-iconbtn {
    width: 32px; height: 32px; border-radius: 10px; border: 0;
    background: var(--brand-50); color: var(--brand-700); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.msx-card-iconbtn.danger { background: #FEE2E2; color: #DC2626; }
.msx-card-iconbtn:hover { transform: scale(1.05); }
.msx-card-chev { color: var(--text-4); flex-shrink: 0; }

.msx-card-badge {
    flex-shrink: 0;
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    padding: 4px 8px; border-radius: 7px;
    text-transform: uppercase;
}
.msx-badge-master { background: #1F2937; color: #fff; }
.msx-badge-manager { background: var(--brand-700); color: #fff; }
.msx-badge-resident { background: var(--border-2); color: var(--text-3); }
.msx-badge-active { background: var(--brand-50); color: var(--brand-700); }
.msx-badge-inactive { background: var(--border-2); color: var(--text-4); }
.msx-badge-pending { background: #FEF3C7; color: #B45309; }
.msx-badge-progress { background: #DBEAFE; color: #1D4ED8; }
.msx-badge-resolved { background: var(--brand-50); color: var(--brand-700); }

/* ── Hero tile community card ── */
.msx-tile {
    background: #fff; border-radius: 20px;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-card);
    overflow: hidden; cursor: pointer;
    transition: transform .12s, box-shadow .15s;
}
.msx-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-float, 0 12px 32px rgba(14,22,19,0.10)); }
.msx-tile-cover {
    position: relative;
    height: 130px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.msx-tile-cover-grad {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.msx-tile-cover-letter {
    font-size: 48px; font-weight: 900; color: rgba(255,255,255,0.32);
    position: relative; z-index: 1;
}
.msx-tile-status {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 7px;
    backdrop-filter: blur(8px);
    text-transform: uppercase;
}
.msx-tile-fee {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    font-size: 10px; font-weight: 800;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
    color: #fff; padding: 4px 10px; border-radius: 7px;
    font-family: var(--font-mono);
}
.msx-tile-body { padding: 14px 16px 16px; }
.msx-tile-name { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.2; }
.msx-tile-mgr { font-size: 11px; font-weight: 600; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.msx-tile-bar {
    height: 6px; border-radius: 999px; background: var(--border-2);
    overflow: hidden; margin: 12px 0 8px;
}
.msx-tile-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); transition: width .4s ease; }
.msx-tile-bar-meta { display: flex; align-items: center; justify-content: space-between; }
.msx-tile-bar-pct { font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: var(--brand-700); }
.msx-tile-bar-fr { font-size: 10px; font-weight: 700; color: var(--text-4); }
.msx-tile-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    margin-top: 10px;
}
.msx-tile-stat {
    text-align: center; padding: 8px 4px; border-radius: 10px;
    background: var(--border-2);
}
.msx-tile-stat-val { font-family: var(--font-mono); font-size: 14px; font-weight: 800; color: var(--text); line-height: 1; }
.msx-tile-stat-lbl { font-size: 8px; font-weight: 800; letter-spacing: .8px; color: var(--text-4); margin-top: 3px; text-transform: uppercase; }
.msx-tile-stat.ok { background: var(--brand-50); }
.msx-tile-stat.ok .msx-tile-stat-val { color: var(--brand-700); }
.msx-tile-stat.ok .msx-tile-stat-lbl { color: var(--brand-700); }
.msx-tile-stat.bad { background: #FEE2E2; }
.msx-tile-stat.bad .msx-tile-stat-val { color: #DC2626; }
.msx-tile-stat.bad .msx-tile-stat-lbl { color: #DC2626; }

/* ── FAB ── */
.msx-fab {
    position: fixed; bottom: 24px; right: 24px;
    width: 56px; height: 56px; border-radius: 18px;
    background: var(--brand-700); color: #fff; border: 0;
    box-shadow: 0 8px 28px rgba(4,120,87,0.40), 0 4px 12px rgba(0,0,0,0.10);
    cursor: pointer; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s, box-shadow .15s;
}
.msx-fab:hover { transform: scale(1.06); }
.msx-fab:active { transform: scale(0.96); }

body.sidebar-open .msx-fab { right: 32px; bottom: 32px; }

/* ── Empty state ── */
.msx-empty {
    background: #fff; border: 1px dashed var(--border);
    border-radius: 16px; padding: 32px 16px;
    text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.msx-empty-icon {
    width: 52px; height: 52px; border-radius: 16px;
    background: var(--brand-50); color: var(--brand-700);
    display: flex; align-items: center; justify-content: center;
}
.msx-empty-title { font-size: 14px; font-weight: 800; color: var(--text); }
.msx-empty-sub { font-size: 12px; font-weight: 600; color: var(--text-3); }

/* ── Section header ── */
.msx-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin: 8px 0 4px;
}
.msx-section-kicker {
    font-size: 9px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--brand-700); text-transform: uppercase;
}
.msx-section-title { font-size: 15px; font-weight: 800; color: var(--text); margin: 2px 0 0; line-height: 1.2; }
.msx-section-link { font-size: 11px; font-weight: 800; color: var(--brand-700); background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.msx-section-link:hover { background: var(--brand-50); }

/* ── Profile card (perfil) ── */
.msx-profile {
    background: #fff; border-radius: 22px;
    border: 1px solid var(--border-2); box-shadow: var(--shadow-card);
    padding: 24px;
    text-align: center;
    margin-top: -22px; position: relative; z-index: 1;
}
.msx-profile-av {
    width: 76px; height: 76px; border-radius: 22px;
    background: var(--brand-700); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 900;
    margin: 0 auto 14px;
    box-shadow: var(--shadow-brand);
}
.msx-profile-name { font-size: 20px; font-weight: 800; color: var(--text); }
.msx-profile-email { font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 4px; }
.msx-profile-role {
    display: inline-block; margin-top: 12px;
    background: var(--brand-50); color: var(--brand-700);
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    padding: 6px 14px; border-radius: 999px;
    text-transform: uppercase;
}

/* ── Settings rows ── */
.msx-settings { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-2); box-shadow: var(--shadow-soft); }
.msx-row {
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; border-bottom: 1px solid var(--border-2);
    transition: background .12s;
}
.msx-row:last-child { border-bottom: 0; }
.msx-row:hover { background: var(--border-2); }
.msx-row-icon {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    background: var(--brand-50); color: var(--brand-700);
    display: flex; align-items: center; justify-content: center;
}
.msx-row-info { flex: 1; min-width: 0; }
.msx-row-title { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.2; }
.msx-row-sub { font-size: 11px; font-weight: 600; color: var(--text-3); margin-top: 2px; }
.msx-row-chev { color: var(--text-4); flex-shrink: 0; }

/* ── Logout button ── */
.msx-logout {
    width: 100%; height: 52px; border-radius: 16px;
    background: #fff; border: 1.5px solid #FEE2E2; color: #DC2626;
    font-size: 14px; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .12s;
}
.msx-logout:hover { background: #FEF2F2; }

@media (min-width: 768px) {
    .msx-list.msx-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .msx-list-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 1024px) {
    .msx-list-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ═════════════════════════════════════════════════════════════
   MANAGER ONBOARDING WIZARD — 5 STEPS · Print-design parity
   ═════════════════════════════════════════════════════════════ */
.wzd-root *, .wzd-root *::before, .wzd-root *::after { box-sizing: border-box; }
.wzd-root {
    --wzd-bg: #F4F6F8;
    --wzd-card: #FFFFFF;
    --wzd-ink: #0E1613;
    --wzd-ink-2: #414B47;
    --wzd-ink-3: #6E7974;
    --wzd-ink-4: #A0A8A4;
    --wzd-line: #E7EBEE;
    --wzd-line-2: #EFF2F4;
    --wzd-em-900: #053527;
    --wzd-em-800: #064E3B;
    --wzd-em-700: #047857;
    --wzd-em-600: #059669;
    --wzd-em-500: #10B981;
    --wzd-em-400: #34D399;
    --wzd-em-100: #D1FAE5;
    --wzd-em-50: #ECFDF5;
    position: fixed; inset: 0; z-index: 200;
    background: var(--wzd-bg);
    overflow-y: auto;
    font-family: 'Geist', -apple-system, system-ui, sans-serif;
    color: var(--wzd-ink);
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
}
.wzd-root .mono { font-family: var(--font-mono); letter-spacing: -.02em; }

.wzd-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

/* Side panel — DARK GREEN */
.wzd-side {
    background: linear-gradient(155deg, var(--wzd-em-700) 0%, var(--wzd-em-800) 55%, var(--wzd-em-900) 100%);
    color: #fff;
    padding: 28px 24px 24px;
    position: relative;
    overflow: hidden;
}
.wzd-side::before {
    content: ""; position: absolute; right: -80px; top: -80px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(52,211,153,0.30), transparent 65%);
    pointer-events: none;
}
.wzd-brand {
    display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
    position: relative; z-index: 1;
}
.wzd-brand img { width: 26px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(52,211,153,.4)); }
.wzd-brand b { font-weight: 600; letter-spacing: -.03em; font-size: 16px; }

.wzd-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    position: relative; z-index: 1;
}
.wzd-headline {
    font-size: 22px; font-weight: 550; line-height: 1.25;
    letter-spacing: -.025em;
    margin: 8px 0 22px; color: #fff;
    position: relative; z-index: 1;
}

.wzd-steps {
    display: flex; flex-direction: column; gap: 4px;
    position: relative; z-index: 1;
}
.wzd-step {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 4px;
    cursor: default;
    transition: opacity .2s;
}
.wzd-step-num {
    width: 26px; height: 26px; border-radius: 99px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 500;
    border: 1px solid rgba(255,255,255,0.30);
    color: rgba(255,255,255,0.7);
    background: transparent;
    transition: background .2s, border-color .2s, color .2s;
}
.wzd-step.is-active .wzd-step-num {
    background: var(--wzd-em-500);
    border-color: var(--wzd-em-500);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(16,185,129,.20);
}
.wzd-step.is-done .wzd-step-num {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.26);
    color: rgba(255,255,255,0.8);
}
.wzd-step-info { min-width: 0; }
.wzd-step-title {
    font-size: 13.5px; font-weight: 550; color: rgba(255,255,255,0.45);
    line-height: 1.25;
    transition: color .2s;
}
.wzd-step.is-active .wzd-step-title { color: #fff; font-weight: 600; }
.wzd-step.is-done .wzd-step-title { color: rgba(255,255,255,0.75); }
.wzd-step-sub {
    font-size: 11.5px; color: rgba(255,255,255,0.40);
    margin-top: 2px; line-height: 1.4;
    transition: color .2s;
}
.wzd-step.is-active .wzd-step-sub { color: rgba(255,255,255,0.75); }
.wzd-step.is-done .wzd-step-sub { color: rgba(255,255,255,0.55); }

.wzd-side-foot {
    margin-top: auto; padding-top: 20px;
    font-family: var(--font-mono);
    font-size: 11px; line-height: 1.55;
    color: rgba(255,255,255,0.45);
    position: relative; z-index: 1;
}

/* Form panel — WHITE */
.wzd-form {
    padding: 24px 22px;
    display: flex; flex-direction: column;
    background: var(--wzd-bg);
    min-height: 0;
}
.wzd-form-head { margin-bottom: 18px; }
.wzd-form-title {
    font-size: 24px; font-weight: 550; letter-spacing: -.025em;
    color: var(--wzd-ink); margin: 0; line-height: 1.15;
}
.wzd-form-sub {
    font-size: 13px; color: var(--wzd-ink-3);
    margin-top: 6px; line-height: 1.45;
}

.wzd-form-body { flex: 1; }

.wzd-field { margin-bottom: 16px; }
.wzd-label {
    font-size: 12.5px; font-weight: 500; color: var(--wzd-ink-2);
    margin-bottom: 6px; display: block;
}
.wzd-input {
    width: 100%;
    height: 48px;
    border: 1px solid var(--wzd-line);
    border-radius: 14px;
    padding: 0 16px;
    font-size: 14px; font-weight: 450;
    color: var(--wzd-ink);
    background: var(--wzd-card);
    outline: none;
    font-family: inherit;
    letter-spacing: -.01em;
    transition: border-color .15s, box-shadow .15s;
}
.wzd-input:focus { border-color: var(--wzd-em-600); box-shadow: 0 0 0 4px rgba(5,150,105,.10); }
.wzd-input::placeholder { color: var(--wzd-ink-4); font-weight: 400; }
textarea.wzd-input { height: auto; padding: 12px 16px; resize: vertical; min-height: 80px; }
.wzd-input-prefix {
    display: flex; align-items: center;
    border: 1px solid var(--wzd-line);
    border-radius: 14px; background: var(--wzd-card);
    padding: 0 12px; height: 48px;
    transition: border-color .15s, box-shadow .15s;
}
.wzd-input-prefix:focus-within { border-color: var(--wzd-em-600); box-shadow: 0 0 0 4px rgba(5,150,105,.10); }
.wzd-input-prefix svg { color: var(--wzd-ink-3); flex-shrink: 0; }
.wzd-input-prefix input {
    flex: 1; border: 0; outline: 0; background: transparent;
    height: 100%; padding: 0 0 0 8px;
    font-size: 14px; font-weight: 450; color: var(--wzd-ink);
    font-family: inherit; letter-spacing: -.01em;
}
.wzd-input-prefix input::placeholder { color: var(--wzd-ink-4); }

.wzd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.wzd-divider {
    border: 0; border-top: 1px solid var(--wzd-line-2);
    margin: 20px 0 16px;
}

/* Toggle row */
.wzd-toggle-row {
    background: var(--wzd-card);
    border: 1px solid var(--wzd-line);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.wzd-toggle-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: var(--wzd-em-50); color: var(--wzd-em-700);
    display: flex; align-items: center; justify-content: center;
}
.wzd-toggle-info { flex: 1; min-width: 0; }
.wzd-toggle-title { font-size: 14px; font-weight: 550; color: var(--wzd-ink); line-height: 1.2; }
.wzd-toggle-sub { font-size: 11.5px; color: var(--wzd-ink-3); margin-top: 2px; }
.wzd-switch {
    position: relative;
    width: 42px; height: 24px;
    background: var(--wzd-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}
.wzd-switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    transition: transform .2s;
}
.wzd-switch.on { background: var(--wzd-em-500); }
.wzd-switch.on::after { transform: translateX(18px); }

/* Expense rows */
.wzd-exp-list {
    background: var(--wzd-card);
    border: 1px solid var(--wzd-line);
    border-radius: 18px;
    overflow: hidden;
}
.wzd-exp-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wzd-line-2);
}
.wzd-exp-row:last-child { border-bottom: 0; }
.wzd-exp-icon {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    background: var(--wzd-em-50); color: var(--wzd-em-700);
    display: flex; align-items: center; justify-content: center;
}
.wzd-exp-name {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-size: 14px; font-weight: 500; color: var(--wzd-ink);
    font-family: inherit; letter-spacing: -.01em;
}
.wzd-exp-amount {
    width: 110px;
    border: 1px solid var(--wzd-line); border-radius: 10px;
    padding: 0 12px; height: 36px;
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 500;
    color: var(--wzd-ink); text-align: right;
    background: var(--wzd-bg); outline: 0;
    letter-spacing: -.01em;
}
.wzd-exp-amount:focus { border-color: var(--wzd-em-600); }
.wzd-exp-del {
    width: 28px; height: 28px; border-radius: 8px; border: 0;
    background: transparent; color: var(--wzd-ink-4); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.wzd-exp-del:hover { background: var(--wzd-line-2); color: var(--wzd-ink-2); }
.wzd-exp-add {
    width: 100%; padding: 12px;
    border: 1px dashed var(--wzd-line);
    border-radius: 12px;
    background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--wzd-ink-3);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 10px;
}
.wzd-exp-add:hover { border-color: var(--wzd-em-600); color: var(--wzd-em-700); background: var(--wzd-em-50); }
.wzd-exp-total {
    margin-top: 14px;
    background: var(--wzd-em-50); border-radius: 14px;
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.wzd-exp-total-lbl { font-size: 12.5px; font-weight: 500; color: var(--wzd-em-800); }
.wzd-exp-total-val {
    font-family: var(--font-mono);
    font-size: 18px; font-weight: 500; color: var(--wzd-em-900);
    letter-spacing: -.02em;
}

/* Amenities carousel */
.wzd-amen-row {
    display: flex; gap: 12px; overflow-x: auto;
    padding: 4px 2px 16px;
    margin: 0 -2px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.wzd-amen-row::-webkit-scrollbar { display: none; }
.wzd-amen-card {
    flex-shrink: 0;
    width: 168px;
    background: var(--wzd-card);
    border: 1.5px solid var(--wzd-line);
    border-radius: 18px;
    padding: 16px 14px 14px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    scroll-snap-align: start;
    text-align: left;
    font: inherit;
}
.wzd-amen-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,22,19,.06); }
.wzd-amen-card.on { border-color: var(--wzd-em-500); box-shadow: 0 6px 20px rgba(16,185,129,.18); }
.wzd-amen-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; margin-bottom: 12px;
}
.wzd-amen-icon-pool { background: linear-gradient(135deg, #34D399, #059669); }
.wzd-amen-icon-event { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.wzd-amen-icon-padel { background: linear-gradient(135deg, #FBBF24, #D97706); }
.wzd-amen-icon-gym { background: linear-gradient(135deg, #F87171, #DC2626); }
.wzd-amen-icon-grill { background: linear-gradient(135deg, #FB923C, #EA580C); }
.wzd-amen-icon-court { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.wzd-amen-icon-park { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.wzd-amen-name { font-size: 14px; font-weight: 550; color: var(--wzd-ink); line-height: 1.2; }
.wzd-amen-hours {
    font-family: var(--font-mono);
    font-size: 11px; color: var(--wzd-ink-3);
    margin-top: 4px;
}
.wzd-amen-check {
    margin-top: 10px;
    width: 22px; height: 22px; border-radius: 7px;
    border: 1.5px solid var(--wzd-line);
    background: var(--wzd-card);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.wzd-amen-card.on .wzd-amen-check {
    background: var(--wzd-em-500);
    border-color: var(--wzd-em-500);
}

/* Footer */
.wzd-footer {
    padding: 16px 22px;
    background: var(--wzd-card);
    border-top: 1px solid var(--wzd-line);
    display: flex; align-items: center; gap: 10px;
    position: sticky; bottom: 0;
}
.wzd-btn-back, .wzd-btn-skip {
    background: transparent; border: 0;
    color: var(--wzd-ink-3); cursor: pointer;
    font-size: 13.5px; font-weight: 500;
    padding: 12px 14px; border-radius: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
}
.wzd-btn-back:hover, .wzd-btn-skip:hover { background: var(--wzd-line-2); color: var(--wzd-ink); }
.wzd-btn-back[disabled] { opacity: .35; cursor: not-allowed; }
.wzd-btn-skip { margin-left: auto; }
.wzd-btn-next {
    background: var(--wzd-em-700); color: #fff;
    border: 0; cursor: pointer;
    font-size: 14px; font-weight: 550;
    padding: 12px 22px; border-radius: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 14px rgba(4,120,87,.30);
    font-family: inherit;
    transition: background .15s, transform .12s;
    min-height: 48px;
}
.wzd-btn-next:hover { background: var(--wzd-em-800); }
.wzd-btn-next:active { transform: scale(0.98); }
.wzd-btn-next[disabled] { background: var(--wzd-line); color: var(--wzd-ink-4); box-shadow: none; cursor: not-allowed; }

/* ──────────────────────────────────────────────
   MOBILE (default, < 1024px) — native app feel
   ────────────────────────────────────────────── */
.wzd-shell {
    grid-template-columns: 1fr;
    background: var(--wzd-bg);
}
.wzd-side { display: none; }
.wzd-mbar { display: flex; }
.wzd-mhero { display: flex; }

/* Mobile top bar: back · step counter · skip */
.wzd-mbar {
    position: sticky; top: 0; z-index: 8;
    background: rgba(244, 246, 248, 0.92);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--wzd-line);
    padding: 12px 14px calc(8px + env(safe-area-inset-top, 0px));
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    flex-direction: column;
    gap: 10px;
}
.wzd-mbar-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
}
.wzd-mbar-back, .wzd-mbar-skip {
    height: 36px; padding: 0 10px;
    border: 0; background: transparent;
    color: var(--wzd-ink-2);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: inherit;
}
.wzd-mbar-back:hover, .wzd-mbar-skip:hover { background: var(--wzd-line-2); }
.wzd-mbar-back[disabled] { opacity: .35; cursor: not-allowed; }
.wzd-mbar-counter {
    flex: 1; text-align: center;
    font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 500;
    color: var(--wzd-ink-3);
    letter-spacing: .04em;
}
.wzd-mbar-skip { margin-left: auto; }

/* Progress bar */
.wzd-mprog {
    height: 4px; border-radius: 99px;
    background: var(--wzd-line);
    overflow: hidden;
    width: 100%;
}
.wzd-mprog-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wzd-em-500), var(--wzd-em-700));
    border-radius: 99px;
    transition: width .35s cubic-bezier(.2,.7,.2,1);
}

/* Mobile hero — large icon + kicker + title */
.wzd-mhero {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 20px 4px;
}
.wzd-mhero-icon {
    width: 56px; height: 56px; border-radius: 18px;
    background: linear-gradient(135deg, var(--wzd-em-500), var(--wzd-em-700));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(5, 150, 105, .28);
}
.wzd-mhero-kicker {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--wzd-em-700);
    font-weight: 500;
}

/* Hide desktop-only form head on mobile (we use mhero) */
.wzd-form-head { display: none; }

.wzd-form {
    padding: 0 20px 100px;
    background: var(--wzd-bg);
    overflow-y: visible;
}
.wzd-form-body {
    padding: 18px 0 0;
}

/* Field cards with stronger contrast on mobile */
.wzd-field { margin-bottom: 14px; }
.wzd-label {
    font-size: 11.5px; font-weight: 600;
    color: var(--wzd-ink-3);
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.wzd-input {
    height: 50px; font-size: 15px;
    border-radius: 14px;
    background: var(--wzd-card);
    border: 1px solid var(--wzd-line);
}
.wzd-input-prefix { height: 50px; border-radius: 14px; background: var(--wzd-card); }
textarea.wzd-input { height: auto; min-height: 88px; }

/* Stack dual columns on mobile */
.wzd-grid-2 { grid-template-columns: 1fr; gap: 0; }

/* FOOTER: full-width primary CTA at bottom */
.wzd-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--wzd-line);
    flex-direction: column;
    gap: 0;
    z-index: 9;
    display: flex;
}
.wzd-btn-back { display: none; }
.wzd-btn-skip { display: none; }
.wzd-btn-next {
    width: 100%;
    height: 54px;
    padding: 0 20px;
    font-size: 15px; font-weight: 550;
    border-radius: 16px;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(4, 120, 87, .28);
}

/* Expense rows: tight on mobile */
.wzd-exp-list { border-radius: 16px; }
.wzd-exp-row { gap: 10px; padding: 11px 12px; }
.wzd-exp-icon { width: 34px; height: 34px; border-radius: 11px; }
.wzd-exp-name { font-size: 13.5px; min-width: 0; padding: 0; }
.wzd-exp-row .wzd-input-prefix {
    width: 102px; height: 36px; padding: 0 8px;
    border-radius: 10px; background: var(--wzd-bg);
}
.wzd-exp-row .wzd-input-prefix input { font-size: 12.5px; }
.wzd-exp-del { width: 26px; height: 26px; }
.wzd-exp-add {
    height: 48px;
    border-radius: 14px;
    font-size: 13px;
}

.wzd-amen-row { padding: 4px 0 12px; gap: 10px; }
.wzd-amen-card {
    width: 156px;
    border-radius: 16px;
    padding: 14px 12px 12px;
}
.wzd-amen-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px; }
.wzd-amen-name { font-size: 13.5px; }
.wzd-amen-hours { font-size: 10.5px; }

.wzd-toggle-row { border-radius: 14px; padding: 12px 14px; }

/* Snack toast over wizard */
body.wzd-active .snack { z-index: 240 !important; }

/* ──────────────────────────────────────────────
   TABLET (≥ 640px) — bigger paddings, still stacked
   ────────────────────────────────────────────── */
@media (min-width: 640px) {
    .wzd-form { padding: 28px 32px 0; }
    .wzd-side { padding: 22px 32px 16px; }
    .wzd-form-title { font-size: 24px; }
    .wzd-headline { font-size: 17px; }
    .wzd-footer { padding: 14px 32px 18px; }
    .wzd-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────────
   DESKTOP (≥ 1024px) — split layout (PDF parity)
   ────────────────────────────────────────────── */
@media (min-width: 1024px) {
    /* Hide mobile-only chrome */
    .wzd-mbar { display: none !important; }
    .wzd-mhero { display: none !important; }
    .wzd-form-head { display: block; }

    .wzd-root { padding: 20px; }
    .wzd-shell {
        width: min(1140px, 100%);
        margin: 0 auto;
        background: var(--wzd-card);
        border-radius: 22px;
        box-shadow: 0 30px 80px rgba(14,22,19,.10), 0 4px 12px rgba(14,22,19,.04);
        overflow: hidden;
        grid-template-columns: minmax(260px, 320px) 1fr;
        grid-template-rows: 1fr;
        min-height: calc(100vh - 40px);
    }
    .wzd-side {
        display: flex; flex-direction: column;
        padding: 30px 24px 22px;
        min-height: 100%;
    }
    .wzd-side .wzd-brand img { width: 26px; height: 28px; }
    .wzd-side .wzd-brand b { font-size: 16px; }
    .wzd-side-foot { display: block; }
    .wzd-eyebrow { font-size: 10.5px; letter-spacing: .12em; }
    .wzd-headline {
        font-size: 21px; line-height: 1.25;
        margin: 8px 0 24px;
    }

    /* Vertical step list */
    .wzd-steps {
        flex-direction: column;
        gap: 2px;
        margin: 0; padding: 0;
        overflow: visible;
        justify-content: flex-start;
    }
    .wzd-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 9px 4px;
        flex: none;
        text-align: left;
    }
    .wzd-step + .wzd-step::before { content: none; }
    .wzd-step-num { width: 28px; height: 28px; font-size: 12px; }
    .wzd-step-info,
    .wzd-step.is-active .wzd-step-info {
        display: block;
        position: static;
        transform: none;
        white-space: normal;
        text-align: left;
        min-width: 0;
    }
    .wzd-step .wzd-step-title { font-size: 13.5px; }
    .wzd-step.is-active .wzd-step-sub,
    .wzd-step .wzd-step-sub { display: block; font-size: 11.5px; }

    .wzd-form {
        padding: 32px 36px 0;
        min-height: 0;
        overflow-y: auto;
    }
    .wzd-form-title { font-size: 26px; }
    .wzd-form-sub { font-size: 13px; }

    .wzd-footer {
        position: static;
        background: transparent;
        border-top: 1px solid var(--wzd-line-2);
        padding: 16px 36px 20px;
        margin-top: auto;
        flex-wrap: nowrap;
        flex-direction: row;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .wzd-btn-back, .wzd-btn-skip {
        display: inline-flex !important;
        padding: 12px 14px; font-size: 13.5px;
    }
    .wzd-btn-next {
        width: auto; height: auto;
        padding: 12px 22px; font-size: 14px;
        min-width: auto;
        box-shadow: 0 4px 14px rgba(4,120,87,.30);
    }

    .wzd-input, .wzd-input-prefix { height: 48px; }

    .wzd-exp-row { gap: 12px; padding: 12px 14px; }
    .wzd-exp-row .wzd-input-prefix { width: 140px; height: 36px; padding: 0 10px; }
    .wzd-exp-row .wzd-input-prefix input { font-size: 13px; }

    .wzd-amen-card { width: 178px; }
}

@media (min-width: 1200px) {
    .wzd-shell { grid-template-columns: 340px 1fr; }
    .wzd-side { padding: 36px 28px 28px; }
    .wzd-headline { font-size: 22px; margin-bottom: 28px; }
    .wzd-form { padding: 40px 52px 0; }
    .wzd-form-title { font-size: 28px; }
    .wzd-footer { padding: 20px 52px 24px; }
}

/* ═════════════════════════════════════════════════════════════
   MANAGER DASHBOARD v2 — PDF parity (Geist + Geist Mono + emerald)
   ═════════════════════════════════════════════════════════════ */
#man-dashboard, #man-directorio, #man-reportes {
    --mgd-bg: #F4F6F8;
    --mgd-card: #FFFFFF;
    --mgd-ink: #0E1613;
    --mgd-ink-2: #414B47;
    --mgd-ink-3: #6E7974;
    --mgd-ink-4: #A0A8A4;
    --mgd-line: #E7EBEE;
    --mgd-line-2: #EFF2F4;
    --mgd-em-900: #053527;
    --mgd-em-800: #064E3B;
    --mgd-em-700: #047857;
    --mgd-em-600: #059669;
    --mgd-em-500: #10B981;
    --mgd-em-400: #34D399;
    --mgd-em-100: #D1FAE5;
    --mgd-em-50: #ECFDF5;
    --mgd-warn: #B5610A;
    --mgd-warn-bg: #FEF3E2;
    --mgd-danger: #B91C1C;
    --mgd-danger-bg: #FEE7E2;
    background: var(--mgd-bg);
    min-height: 100vh;
    padding-bottom: 100px;
    color: var(--mgd-ink);
    font-family: 'Geist', -apple-system, system-ui, sans-serif;
    letter-spacing: -.01em;
}
#man-dashboard .mono {
    font-family: var(--font-mono);
    letter-spacing: -.02em;
}

/* ── Top bar (sticky glass) ── */
.mgd-topbar {
    position: sticky; top: 0; z-index: 40;
    height: 54px;
    background: rgba(244, 246, 248, .92);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--mgd-line);
}
.mgd-topbar-inner {
    height: 100%;
    max-width: 1200px; margin: 0 auto;
    padding: 0 16px;
    display: flex; align-items: center; gap: 12px;
}
.mgd-tb-brand { display: flex; align-items: center; gap: 8px; }
.mgd-tb-brand img { filter: drop-shadow(0 2px 4px rgba(5,150,105,.25)); }
.mgd-tb-brand b { font-weight: 600; letter-spacing: -.03em; font-size: 14.5px; }
.mgd-tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mgd-tb-btn {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--mgd-card); border: 1px solid var(--mgd-line);
    color: var(--mgd-ink-2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    transition: background .15s, border-color .15s;
}
.mgd-tb-btn:hover { background: var(--mgd-line-2); border-color: var(--mgd-em-100); }
.mgd-tb-dot {
    position: absolute; top: 8px; right: 9px;
    width: 7px; height: 7px; border-radius: 99px;
    background: #DC2626;
    border: 1.5px solid var(--mgd-card);
}
.mgd-tb-avatar {
    width: 36px; height: 36px; border-radius: 99px;
    background: var(--mgd-em-700); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px;
    border: 0; cursor: pointer;
    font-family: inherit;
}

/* ── Main container ── */
.mgd-main {
    max-width: 1200px; margin: 0 auto;
    padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
}

/* ── Greeting hero ── */
.mgd-hero-greet { animation: mgdFadeUp .35s cubic-bezier(.2,.7,.2,1) both; }
.mgd-greet-h {
    font-size: 24px; font-weight: 550; letter-spacing: -.025em;
    margin: 0; color: var(--mgd-ink);
    line-height: 1.15;
}
.mgd-greet-p {
    font-size: 13px; color: var(--mgd-ink-3);
    margin: 4px 0 0; line-height: 1.4;
}

/* ── Month strip ── */
.mgd-month-strip {
    display: flex; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 4px 16px;
    -webkit-overflow-scrolling: touch;
}
.mgd-month-strip::-webkit-scrollbar { display: none; }
.mgd-month-btn {
    flex-shrink: 0;
    padding: 10px 14px; border-radius: 99px;
    background: var(--mgd-card); border: 1px solid var(--mgd-line);
    font-size: 12.5px; font-weight: 500; color: var(--mgd-ink-2);
    min-height: 40px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
}
.mgd-month-btn:hover { background: var(--mgd-line-2); }
.mgd-month-btn.on {
    background: var(--mgd-ink); color: #fff;
    border-color: var(--mgd-ink);
}
.mgd-month-export {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--mgd-em-700);
    font-weight: 550;
}
.mgd-month-export:hover { background: var(--mgd-em-50); border-color: var(--mgd-em-100); }

/* ── KPI cards row ── */
.mgd-kpis {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.mgd-kpi {
    background: var(--mgd-card); border-radius: 24px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(14,22,19,.04);
    display: flex; flex-direction: column; gap: 8px;
    animation: mgdFadeUp .35s cubic-bezier(.2,.7,.2,1) both;
}
.mgd-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mgd-kpi-eyebrow {
    font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--mgd-ink-3);
    font-weight: 500;
}
.mgd-kpi-val {
    font-size: 28px; font-weight: 500; line-height: 1;
    color: var(--mgd-ink); letter-spacing: -.02em;
}
.mgd-kpi-sub { font-size: 12px; color: var(--mgd-ink-3); }

.mgd-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 99px;
    font-size: 11.5px; font-weight: 500;
    font-family: var(--font-mono);
}
.mgd-chip-up { background: var(--mgd-em-100); color: var(--mgd-em-800); }
.mgd-chip-warn { background: var(--mgd-warn-bg); color: var(--mgd-warn); }
.mgd-chip-danger { background: var(--mgd-danger-bg); color: var(--mgd-danger); }
.mgd-chip-neutral { background: var(--mgd-line-2); color: var(--mgd-ink-2); }
.mgd-chip-paid { background: var(--mgd-em-100); color: var(--mgd-em-800); }
.mgd-chip-pend { background: var(--mgd-warn-bg); color: var(--mgd-warn); }
.mgd-chip-late { background: var(--mgd-danger-bg); color: var(--mgd-danger); }

/* ── Hero split: Recaudación + Reservas ── */
.mgd-split { display: grid; grid-template-columns: 1fr; gap: 14px; }

.mgd-recaud {
    position: relative; overflow: hidden;
    background: linear-gradient(145deg, var(--mgd-em-700), var(--mgd-em-800) 60%, var(--mgd-em-900));
    color: #E6FBF1;
    padding: 22px;
    border-radius: 24px;
    animation: mgdFadeUp .4s cubic-bezier(.2,.7,.2,1) both;
}
.mgd-recaud-glow {
    position: absolute; inset: -40px -40px auto auto;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(52,211,153,.35), transparent 60%);
    pointer-events: none;
}
.mgd-recaud-content { position: relative; z-index: 1; }
.mgd-recaud-eyebrow {
    font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(230,251,241,.6);
    font-weight: 500;
}
.mgd-recaud-amt {
    display: flex; align-items: baseline; gap: 6px;
    margin-top: 6px;
}
.mgd-recaud-big {
    font-size: 38px; font-weight: 500;
    color: #fff; letter-spacing: -.02em; line-height: 1;
}
.mgd-recaud-amt small {
    color: rgba(230,251,241,.7); font-size: 13px;
}
.mgd-recaud-bar {
    height: 8px; background: rgba(255,255,255,.15);
    border-radius: 99px; overflow: hidden; margin-top: 16px;
}
.mgd-recaud-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mgd-em-400), #fff);
    border-radius: 99px;
    transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.mgd-recaud-bar-meta {
    display: flex; justify-content: space-between;
    margin-top: 8px;
    font-size: 11px; color: rgba(230,251,241,.8);
}

.mgd-houses { margin-top: 18px; position: relative; z-index: 1; }
.mgd-dots {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
    margin-top: 8px;
}
.mgd-dot {
    aspect-ratio: 1; border-radius: 3px;
    transition: transform .15s;
}
.mgd-dot:hover { transform: scale(1.4); }
.mgd-dot-paid { background: var(--mgd-em-500); }
.mgd-dot-pend { background: rgba(255,255,255,.30); }
.mgd-dot-late { background: var(--mgd-danger); }
.mgd-dot-empty { background: rgba(255,255,255,.10); }

.mgd-legend {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 11.5px; font-weight: 400;
    color: rgba(230,251,241,.7);
    margin-top: 12px;
    font-family: var(--font-mono);
}
.mgd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mgd-legend i {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.mgd-l-paid { background: var(--mgd-em-500); }
.mgd-l-pend { background: rgba(255,255,255,.30); }
.mgd-l-late { background: var(--mgd-danger); }

/* Side card: reservas */
.mgd-side-card {
    background: var(--mgd-card); border-radius: 24px; padding: 18px;
    box-shadow: 0 1px 2px rgba(14,22,19,.04);
    display: flex; flex-direction: column; gap: 10px;
    animation: mgdFadeUp .42s cubic-bezier(.2,.7,.2,1) both;
}
.mgd-side-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.mgd-side-title { font-size: 15px; font-weight: 550; color: var(--mgd-ink); margin: 0; line-height: 1.2; }
.mgd-side-sub { font-size: 12px; color: var(--mgd-ink-3); margin-top: 2px; }
.mgd-link {
    background: transparent; border: 0;
    color: var(--mgd-em-700); cursor: pointer;
    font-size: 12.5px; font-weight: 550;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 6px; border-radius: 8px;
    font-family: inherit;
}
.mgd-link:hover { background: var(--mgd-em-50); }

.mgd-res {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--mgd-line-2);
}
.mgd-res:first-child { border-top: 0; padding-top: 4px; }
.mgd-res-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--mgd-em-50); color: var(--mgd-em-700);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mgd-res-info { flex: 1; min-width: 0; }
.mgd-res-top {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.mgd-res-name { font-size: 13.5px; font-weight: 550; color: var(--mgd-ink); }
.mgd-res-when { font-size: 11.5px; color: var(--mgd-ink-3); white-space: nowrap; }
.mgd-res-by { font-size: 11.5px; color: var(--mgd-ink-3); margin-top: 2px; }

.mgd-empty-mini {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 24px 10px; text-align: center;
    color: var(--mgd-ink-3); font-size: 12px;
}
.mgd-empty-mini svg { color: var(--mgd-ink-4); }

/* ── Quick actions row ── */
.mgd-quick {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.mgd-q {
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    background: var(--mgd-card); border-radius: 16px;
    border: 1px solid var(--mgd-line);
    cursor: pointer; text-align: left;
    box-shadow: 0 1px 2px rgba(14,22,19,.04);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    font-family: inherit;
    color: inherit;
}
.mgd-q:hover {
    transform: translateY(-1px);
    border-color: var(--mgd-em-100);
    box-shadow: 0 4px 12px rgba(14,22,19,.06);
}
.mgd-q:active { transform: scale(.98); }
.mgd-q-icon {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    background: var(--mgd-em-50); color: var(--mgd-em-700);
    display: inline-flex; align-items: center; justify-content: center;
}
.mgd-q-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.mgd-q-title { font-size: 13px; font-weight: 550; color: var(--mgd-ink); line-height: 1.2; }
.mgd-q-sub { font-size: 10.5px; color: var(--mgd-ink-3); font-weight: 500; }

/* ── Table card (Estado de pagos / Reportes / Caja) ── */
.mgd-table-card {
    background: var(--mgd-card); border-radius: 24px; padding: 0;
    box-shadow: 0 1px 2px rgba(14,22,19,.04);
    overflow: hidden;
    animation: mgdFadeUp .45s cubic-bezier(.2,.7,.2,1) both;
}
.mgd-tcard-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px;
    flex-wrap: wrap;
}
.mgd-tcard-title {
    font-size: 15px; font-weight: 550;
    margin: 0; color: var(--mgd-ink);
    line-height: 1.2;
}
.mgd-tcard-sub {
    font-size: 12px; color: var(--mgd-ink-3);
    margin: 2px 0 0;
}

.mgd-btn-primary {
    background: var(--mgd-em-600); color: #fff;
    padding: 9px 14px; border-radius: 12px;
    font-size: 12.5px; font-weight: 550;
    min-height: 40px;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
    transition: background .15s;
}
.mgd-btn-primary:hover { background: var(--mgd-em-700); }
.mgd-btn-primary:active { background: var(--mgd-em-800); }

.mgd-btn-ghost {
    background: var(--mgd-card); border: 1px solid var(--mgd-line);
    color: var(--mgd-ink-2);
    padding: 8px 14px; border-radius: 12px;
    font-size: 12.5px; font-weight: 500;
    min-height: 36px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.mgd-btn-ghost:hover { background: var(--mgd-line-2); }

/* Segment switcher (tabs) */
.mgd-seg {
    display: inline-flex; gap: 2px;
    padding: 3px;
    margin: 0 18px 14px;
    background: var(--mgd-line-2); border-radius: 12px;
    overflow-x: auto; scrollbar-width: none;
    max-width: calc(100% - 36px);
}
.mgd-seg::-webkit-scrollbar { display: none; }
.mgd-seg-btn {
    padding: 9px 13px; border-radius: 9px;
    font-size: 12px; font-weight: 500;
    color: var(--mgd-ink-3);
    background: transparent; border: 0;
    cursor: pointer;
    min-height: 40px; white-space: nowrap;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.mgd-seg-btn:hover { color: var(--mgd-ink-2); }
.mgd-seg-btn.on {
    background: var(--mgd-card);
    color: var(--mgd-ink);
    box-shadow: 0 1px 2px rgba(14,22,19,.04);
}
.mgd-seg-btn .mono { color: var(--mgd-ink-4); margin-left: 2px; font-size: 11px; }
.mgd-seg-btn.on .mono { color: var(--mgd-em-700); }

/* Payment rows */
.mgd-prows {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 12px 16px;
}
.mgd-prow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: var(--mgd-card);
    border: 1px solid var(--mgd-line-2);
    border-radius: 16px;
    min-height: 64px;
    transition: border-color .15s;
}
.mgd-prow:hover { border-color: var(--mgd-em-100); }
.mgd-num {
    font-size: 12px; font-weight: 500;
    color: var(--mgd-ink-3);
    background: var(--mgd-line-2);
    padding: 5px 9px;
    border-radius: 8px;
}
.mgd-who { min-width: 0; }
.mgd-who-name { font-size: 14px; font-weight: 550; color: var(--mgd-ink); }
.mgd-who-meta {
    font-size: 11.5px; color: var(--mgd-ink-3);
    margin-top: 3px;
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.mgd-money {
    text-align: right;
    font-size: 14px; font-weight: 500;
    color: var(--mgd-ink);
}
.mgd-action {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 8px; margin-top: 2px;
    border-top: 1px dashed var(--mgd-line-2);
}
.mgd-action button {
    padding: 8px 14px; min-height: 40px;
    background: var(--mgd-card);
    border: 1px solid var(--mgd-line);
    color: var(--mgd-ink-2);
    border-radius: 10px;
    font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.mgd-action button:hover { background: var(--mgd-line-2); }

.mgd-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 32px 16px; text-align: center;
    color: var(--mgd-ink-3); font-size: 12px;
}
.mgd-empty svg { color: var(--mgd-ink-4); }

/* ── Directory: inline search bar ── */
.mgd-dir-search {
    display: flex; align-items: center; gap: 10px;
    margin: 0 16px 0; padding: 0 14px;
    height: 44px;
    background: var(--mgd-line-2);
    border: 1.5px solid var(--mgd-line);
    border-radius: 12px;
    transition: border-color .15s;
}
.mgd-dir-search:focus-within { border-color: var(--mgd-em-400); }
.mgd-dir-search svg { color: var(--mgd-ink-4); flex-shrink: 0; }
.mgd-dir-search input {
    border: 0; background: transparent; outline: none;
    flex: 1; min-width: 0;
    font-size: 13.5px; font-weight: 500;
    color: var(--mgd-ink); font-family: inherit;
}
.mgd-dir-search input::placeholder { color: var(--mgd-ink-4); }

/* ── Directory: resident avatar ── */
.mgd-res-av {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    color: #fff; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: -.02em;
}

/* ── Directory: prow tweaks for residents ── */
.mgd-prow-res { grid-template-columns: auto 1fr auto; cursor: pointer; }
.mgd-prow-res:hover { border-color: var(--mgd-em-400); background: var(--mgd-em-50); }
.mgd-prow-res .mgd-action { grid-column: unset; border-top: 0; padding-top: 0; margin-top: 0; }
@media (min-width: 640px) {
    .mgd-prow-res { grid-template-columns: 56px auto 1fr auto auto; }
    .mgd-prow-res .mgd-res-av { grid-row: 1; }
}

/* ── Invite code card ── */
.mgd-invite {
    background: linear-gradient(135deg, var(--mgd-em-50), #fff);
    border: 1px solid var(--mgd-em-100);
    border-radius: 20px;
    padding: 18px;
    display: flex; align-items: center; gap: 14px; justify-content: space-between;
}
.mgd-invite-eyebrow {
    font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mgd-em-700);
    font-weight: 600;
}
.mgd-invite-code {
    font-size: 22px; font-weight: 600;
    color: var(--mgd-ink);
    letter-spacing: 4px;
    margin: 4px 0 4px;
}
.mgd-invite-hint {
    font-size: 11px; color: var(--mgd-ink-3); font-weight: 500;
}

/* ── Billing card ── */
.mgd-billing-card {
    background: var(--mgd-card); border-radius: 20px;
    padding: 14px 18px;
    border: 1px solid var(--mgd-line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.mgd-billing-left {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
}
.mgd-billing-icon {
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--mgd-em-50); color: var(--mgd-em-700);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.mgd-billing-icon.warn { background: var(--mgd-warn-bg); color: var(--mgd-warn); }
.mgd-billing-eyebrow {
    font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mgd-ink-3);
    font-weight: 500;
}
.mgd-billing-val {
    font-size: 13px; font-weight: 500;
    color: var(--mgd-ink);
    margin-top: 2px;
}

/* ── Transparency toggle row inside table-card ── */
.mgd-trans-toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--mgd-line-2);
    margin-top: 6px;
}
.mgd-trans-label { font-size: 13.5px; font-weight: 550; color: var(--mgd-ink); }
.mgd-trans-desc { font-size: 11.5px; color: var(--mgd-ink-3); margin-top: 2px; }

@keyframes mgdFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ── Tablet (≥ 768px) ── */
@media (min-width: 768px) {
    .mgd-kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .mgd-kpi-val { font-size: 32px; }
    .mgd-split { grid-template-columns: 1.6fr 1fr; gap: 14px; }
    .mgd-recaud { padding: 26px; }
    .mgd-recaud-big { font-size: 46px; }
    .mgd-dots { grid-template-columns: repeat(24, 1fr); }
    .mgd-quick { grid-template-columns: repeat(4, 1fr); }
    .mgd-greet-h { font-size: 28px; }
}

/* ── Desktop (≥ 1024px) ── */
@media (min-width: 1024px) {
    .mgd-main { padding: 22px 32px 48px; gap: 16px; }
    .mgd-topbar-inner { padding: 0 32px; }
    .mgd-prow {
        grid-template-columns: 80px 1fr 110px 1.2fr 130px 130px;
        padding: 14px 18px;
    }
    .mgd-prow .mgd-action {
        grid-column: auto;
        padding: 0; margin: 0; border-top: 0;
        justify-content: flex-end;
    }
}

/* ── Responsive: mobile fine-tune ── */
@media (max-width: 767px) {
    .mgd-tcard-head { padding: 16px; }
    .mgd-seg { margin: 0 16px 12px; max-width: calc(100% - 32px); }
    .mgd-prows { padding: 0 12px 16px; }
    .mgd-recaud { padding: 20px; }
    .mgd-recaud-big { font-size: 32px; }
}

/* ═════════════════════════════════════════════════════════════
   MANAGER FINANZAS — uses .mgd-* tokens + extras
   ═════════════════════════════════════════════════════════════ */
#man-gastos {
    --mgd-bg: #F4F6F8;
    --mgd-card: #FFFFFF;
    --mgd-ink: #0E1613;
    --mgd-ink-2: #414B47;
    --mgd-ink-3: #6E7974;
    --mgd-ink-4: #A0A8A4;
    --mgd-line: #E7EBEE;
    --mgd-line-2: #EFF2F4;
    --mgd-em-900: #053527;
    --mgd-em-800: #064E3B;
    --mgd-em-700: #047857;
    --mgd-em-600: #059669;
    --mgd-em-500: #10B981;
    --mgd-em-400: #34D399;
    --mgd-em-100: #D1FAE5;
    --mgd-em-50: #ECFDF5;
    --mgd-warn: #B5610A;
    --mgd-warn-bg: #FEF3E2;
    --mgd-danger: #B91C1C;
    --mgd-danger-bg: #FEE7E2;
    background: var(--mgd-bg);
    min-height: 100vh;
    padding-bottom: 100px;
    color: var(--mgd-ink);
    font-family: 'Geist', -apple-system, system-ui, sans-serif;
    letter-spacing: -.01em;
}
#man-gastos .mono {
    font-family: var(--font-mono);
    letter-spacing: -.02em;
}

/* Money colors */
.mgd-money-pos { color: var(--mgd-em-700, #047857); }
.mgd-money-neg { color: #B91C1C; }

/* Income/expense row variants */
.mgd-prow-income, .mgd-prow-expense {
    grid-template-columns: auto 1fr auto;
}
.mgd-prow-expense {
    grid-template-columns: auto 1fr auto auto;
}
.mgd-cat-icon {
    width: 40px; height: 40px; border-radius: 12px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}

.mgd-receipt {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 7px;
    background: var(--mgd-line-2, #EFF2F4);
    color: var(--mgd-ink-3, #6E7974);
    font-size: 10.5px; font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mgd-receipt:hover {
    background: var(--mgd-em-50, #ECFDF5);
    color: var(--mgd-em-700, #047857);
}

.mgd-btn-icon-danger {
    width: 32px; height: 32px; border-radius: 10px;
    background: transparent; border: 0;
    color: var(--mgd-ink-4, #A0A8A4);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.mgd-btn-icon-danger:hover {
    background: var(--mgd-danger-bg, #FEE7E2);
    color: var(--mgd-danger, #B91C1C);
}

/* Recaud bottom 3-cell grid */
.mgd-fin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.15);
    position: relative; z-index: 1;
}
.mgd-fin-cell { display: flex; flex-direction: column; gap: 4px; }
.mgd-fin-cell-lbl {
    font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(230,251,241,.55);
    font-weight: 500;
}
.mgd-fin-cell-val {
    font-size: 14px; font-weight: 500;
    color: #fff;
    line-height: 1.1;
}
.mgd-fin-cell-pos { color: #34D399 !important; }
.mgd-fin-cell-neg { color: #FCA5A5 !important; }

/* Top categorías side card */
.mgd-fin-cats {
    display: flex; flex-direction: column;
    gap: 12px;
}
.mgd-fin-cat {
    display: flex; gap: 10px; align-items: center;
}
.mgd-fin-cat-icon {
    width: 36px; height: 36px; border-radius: 11px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.mgd-fin-cat-info { flex: 1; min-width: 0; position: relative; }
.mgd-fin-cat-top {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}
.mgd-fin-cat-name {
    font-size: 13px; font-weight: 550;
    color: var(--mgd-ink, #0E1613);
}
.mgd-fin-cat-amt {
    font-size: 12.5px; font-weight: 500;
    color: var(--mgd-ink, #0E1613);
}
.mgd-fin-cat-bar {
    height: 6px; border-radius: 99px;
    background: var(--mgd-line-2, #EFF2F4);
    overflow: hidden;
    position: relative;
}
.mgd-fin-cat-fill {
    height: 100%; border-radius: 99px;
    transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.mgd-fin-cat-pct {
    position: absolute; right: 0; top: -19px;
    font-size: 10.5px; color: var(--mgd-ink-3, #6E7974);
}

/* Section divider inside "Todos" view */
.mgd-fin-section {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 12px;
}
.mgd-fin-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px;
    border-bottom: 1px dashed var(--mgd-line-2, #EFF2F4);
    margin: 4px 0 8px;
    padding-bottom: 8px;
}
.mgd-fin-section-eyebrow {
    font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mgd-ink-3, #6E7974);
    font-weight: 600;
}

/* Budget rows */
.mgd-budget-row {
    display: flex; flex-direction: column; gap: 5px;
    padding: 12px 14px;
    background: var(--mgd-card, #fff);
    border: 1px solid var(--mgd-line-2, #EFF2F4);
    border-radius: 14px;
    margin-bottom: 8px;
    transition: border-color .15s;
}
.mgd-budget-row.over { border-color: rgba(239,68,68,.30); background: #FFFBFA; }
.mgd-budget-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px;
}
.mgd-budget-name {
    font-size: 13.5px; font-weight: 550;
    color: var(--mgd-ink, #0E1613);
}
.mgd-budget-nums {
    font-size: 12.5px; font-weight: 500;
    color: var(--mgd-ink-3, #6E7974);
}
.mgd-budget-over { color: var(--mgd-danger, #B91C1C); font-weight: 600; }
.mgd-budget-slash { color: var(--mgd-ink-4, #A0A8A4); margin: 0 2px; }
.mgd-budget-budget { color: var(--mgd-ink, #0E1613); }
.mgd-budget-bar {
    height: 6px; border-radius: 99px;
    background: var(--mgd-line-2, #EFF2F4);
    overflow: hidden;
}
.mgd-budget-fill {
    height: 100%; border-radius: 99px;
    background: var(--mgd-em-600, #059669);
    transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.mgd-budget-row.over .mgd-budget-fill { background: var(--mgd-danger, #B91C1C); }
.mgd-budget-alert {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 500;
    color: var(--mgd-danger, #B91C1C);
    margin-top: 4px;
}

/* FAB (floating action) */
.mgd-fab {
    position: fixed;
    right: 20px; bottom: 24px;
    width: 56px; height: 56px;
    border-radius: 18px;
    background: var(--mgd-em-600, #059669);
    color: #fff; border: 0; cursor: pointer;
    box-shadow: 0 8px 22px rgba(5,150,105,.35), 0 4px 8px rgba(14,22,19,.06);
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 80;
    transition: transform .15s, background .15s;
}
.mgd-fab:hover { background: var(--mgd-em-700, #047857); transform: translateY(-1px); }
.mgd-fab:active { transform: scale(.96); }
body.sidebar-open .mgd-fab { right: 32px; bottom: 32px; }

/* Drawer (modal) for new expense */
.mgd-drawer {
    padding: 4px 0 12px;
    color: var(--mgd-ink, #0E1613);
    font-family: 'Geist', -apple-system, system-ui, sans-serif;
    letter-spacing: -.01em;
}
.mgd-drawer .mono {
    font-family: var(--font-mono);
    letter-spacing: -.02em;
}
.mgd-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.mgd-drawer-eyebrow {
    font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mgd-em-700, #047857);
    font-weight: 600;
}
.mgd-drawer-title {
    font-size: 22px; font-weight: 550;
    margin: 4px 0 0;
    letter-spacing: -.025em;
    color: var(--mgd-ink, #0E1613);
}
.mgd-drawer-close {
    width: 36px; height: 36px; border-radius: 12px;
    background: var(--mgd-line-2, #EFF2F4);
    border: 0; cursor: pointer;
    color: var(--mgd-ink-3, #6E7974);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.mgd-drawer-close:hover { background: var(--mgd-line, #E7EBEE); color: var(--mgd-ink, #0E1613); }

.mgd-drawer-label {
    display: block;
    font-size: 11.5px; font-weight: 600;
    color: var(--mgd-ink-3, #6E7974);
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.mgd-drawer-opt {
    color: var(--mgd-ink-4, #A0A8A4);
    font-weight: 500;
}

.mgd-drawer-money {
    display: flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--mgd-line, #E7EBEE);
    border-radius: 16px;
    padding: 0 18px;
    background: var(--mgd-card, #fff);
    margin-bottom: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.mgd-drawer-money:focus-within {
    border-color: var(--mgd-em-600, #059669);
    box-shadow: 0 0 0 4px rgba(5,150,105,.10);
}
.mgd-drawer-money > span {
    font-size: 22px; font-weight: 550;
    color: var(--mgd-ink-3, #6E7974);
}
.mgd-drawer-money input {
    border: 0; background: transparent;
    padding: 18px 0;
    font-size: 26px; font-weight: 500;
    width: 100%; outline: none;
    color: var(--mgd-ink, #0E1613);
    letter-spacing: -.02em;
}
.mgd-drawer-money input::placeholder { color: var(--mgd-ink-4, #A0A8A4); font-weight: 400; }

.mgd-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.mgd-cat-btn {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 12px 4px;
    background: var(--mgd-card, #fff);
    border: 1.5px solid var(--mgd-line, #E7EBEE);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s;
    font-family: inherit;
}
.mgd-cat-btn:hover { transform: translateY(-1px); border-color: var(--mgd-em-100, #D1FAE5); }
.mgd-cat-btn.on {
    border-color: var(--mgd-em-600, #059669);
    background: var(--mgd-em-50, #ECFDF5);
    box-shadow: 0 0 0 3px rgba(5,150,105,.10);
}
.mgd-cat-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mgd-ink-3, #6E7974);
}
.mgd-cat-btn.on .mgd-cat-btn-icon { color: var(--mgd-em-700, #047857); }
.mgd-cat-btn-name {
    font-size: 10px; font-weight: 600;
    color: var(--mgd-ink-3, #6E7974);
    text-transform: capitalize;
    letter-spacing: .01em;
}
.mgd-cat-btn.on .mgd-cat-btn-name { color: var(--mgd-em-800, #064E3B); }

.mgd-drawer-input {
    width: 100%;
    border: 1.5px solid var(--mgd-line, #E7EBEE);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px; font-weight: 450;
    background: var(--mgd-card, #fff);
    color: var(--mgd-ink, #0E1613);
    outline: none;
    margin-bottom: 14px;
    box-sizing: border-box;
    font-family: inherit;
    letter-spacing: -.01em;
    transition: border-color .15s, box-shadow .15s;
}
.mgd-drawer-input:focus {
    border-color: var(--mgd-em-600, #059669);
    box-shadow: 0 0 0 4px rgba(5,150,105,.10);
}
.mgd-drawer-input::placeholder { color: var(--mgd-ink-4, #A0A8A4); font-weight: 400; }

.mgd-drawer-upload {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    border: 2px dashed var(--mgd-line, #E7EBEE);
    border-radius: 16px;
    padding: 22px 16px;
    cursor: pointer;
    background: var(--mgd-card, #fff);
    color: var(--mgd-ink-3, #6E7974);
    margin-bottom: 22px;
    transition: border-color .15s, background .15s, color .15s;
}
.mgd-drawer-upload:hover {
    border-color: var(--mgd-em-600, #059669);
    background: var(--mgd-em-50, #ECFDF5);
    color: var(--mgd-em-700, #047857);
}
.mgd-drawer-upload span {
    font-size: 12px; font-weight: 500;
}

.mgd-drawer-save {
    width: 100%;
    height: 52px;
    border-radius: 16px;
    font-size: 14px; font-weight: 550;
    box-shadow: 0 6px 18px rgba(5,150,105,.32);
}

/* Mobile-tighter cat grid */
@media (max-width: 480px) {
    .mgd-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .mgd-prow-expense { grid-template-columns: auto 1fr auto; }
    .mgd-prow-expense .mgd-btn-icon-danger {
        position: absolute; top: 10px; right: 10px;
    }
    .mgd-prow { position: relative; }
}

/* ── Residente · Amenidades · Carousel scroll ── */
.avn-spaces-scroll { -webkit-overflow-scrolling: touch; }
.avn-spaces-scroll::-webkit-scrollbar { display: none; }
.avn-spaces-scroll .avn-space-card {
    flex-shrink: 0;
    width: 168px !important;
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .avn-spaces-scroll .avn-space-card { width: 200px !important; }
}

/* Hide existing app chrome while wizard is open */
body.wzd-active { overflow: hidden; }
body.wzd-active #rc-sidebar { display: none !important; }
body.wzd-active .phone { filter: blur(0); }
.wzd-root { overscroll-behavior: contain; }

/* ═══════════════════════════════════════════════════════════════
   RESIDENT DESIGN SYSTEM  ·  rsd-* namespace
   Same visual language as mgd-*/msx-* — Geist + emerald tokens
   ═══════════════════════════════════════════════════════════════ */
.rsd-wrap { background:#F7F8FA; min-height:100vh; padding-bottom:80px; font-family:var(--font-display,'Inter',sans-serif); }
.rsd-main { padding:20px 16px; max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

/* ── hero ── */
.rsd-hero { background:var(--hero-gradient,linear-gradient(160deg,#003D21,#00512C,#006B3C)); border-radius:24px; padding:24px 22px; color:#fff; position:relative; overflow:hidden; box-shadow:0 14px 38px rgba(5,55,39,.30); }
.rsd-hero::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(52,211,153,.4),transparent 60%); pointer-events:none; }
.rsd-hero-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; position:relative; z-index:1; }
.rsd-hero-status { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.10); font-size:11px; font-weight:600; font-family:var(--font-mono); }
.rsd-hero-status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.rsd-hero-status-dot.paid { background:#6EE7B7; animation:rhnPulse 2s ease-in-out infinite; }
.rsd-hero-status-dot.pend { background:#FCD34D; }
.rsd-hero-status.paid { color:#BBF7D0; }
.rsd-hero-status.pend { color:#FDE68A; }
.rsd-hero-month { font-size:10px; font-weight:600; letter-spacing:.10em; color:rgba(230,251,241,.60); font-family:var(--font-mono); }
.rsd-hero-amount { display:flex; align-items:baseline; gap:4px; margin-bottom:8px; font-family:var(--font-mono); position:relative; z-index:1; }
/* Mismo encogido que el saldo de Inicio: su caja es más ancha (328px contra
   284px), así que aguanta más, pero a siete cifras también se salía. */
.rsd-hero-amount-main { font-size:clamp(34px, 11vw, 48px); font-weight:500; color:#fff; letter-spacing:-0.03em; line-height:1; }
.rsd-hero-amount-cents { font-size:22px; font-weight:500; color:rgba(230,251,241,.50); }
.rsd-hero-amount-mxn { font-size:12px; font-weight:500; color:rgba(230,251,241,.60); margin-left:6px; letter-spacing:.04em; }
.rsd-hero-due { display:flex; align-items:center; gap:7px; font-size:12px; color:rgba(230,251,241,.80); margin-bottom:18px; position:relative; z-index:1; }
.rsd-pay-btn { width:100%; height:52px; background:#fff; color:#003D21; border:0; cursor:pointer; font-weight:600; font-size:15px; letter-spacing:-0.01em; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 18px rgba(0,0,0,.18); transition:all .2s; font-family:var(--font-display); position:relative; z-index:1; }
.rsd-pay-btn:hover { background:#ECFDF5; transform:translateY(-1px); }
.rsd-pay-btn:active { transform:scale(0.98); }
.rsd-pay-btn.paid { background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.rsd-pay-btn.paid:hover { background:rgba(255,255,255,.20); }
.rsd-secure-note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:10.5px; color:rgba(230,251,241,.50); font-family:var(--font-mono); letter-spacing:.04em; position:relative; z-index:1; }
.rsd-hero-duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative; z-index:1; }

/* ── kpis ── */
.rsd-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rsd-kpi { background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:16px 14px; box-shadow:var(--shadow-soft); }
.rsd-kpi-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#9CA3AF; font-family:var(--font-mono); margin-bottom:8px; }
.rsd-kpi-value { font-size:20px; font-weight:700; color:#1A1D1F; letter-spacing:-0.03em; line-height:1; font-family:var(--font-mono); }
.rsd-kpi-sub { font-size:11px; color:#9CA3AF; font-weight:500; margin-top:4px; }
.rsd-kpi-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:3px 8px; border-radius:99px; margin-top:6px; }
.rsd-kpi-badge.green { background:#DCFCE7; color:#16A34A; }
.rsd-kpi-badge.orange { background:#FEF3C7; color:#D97706; }
.rsd-kpi-badge.blue { background:#DBEAFE; color:#2563EB; }

/* ── section header ── */
.rsd-section-head { display:flex; align-items:center; justify-content:space-between; padding:0 2px; }
.rsd-section-title { font-size:15px; font-weight:600; color:#1A1D1F; letter-spacing:-0.02em; }
.rsd-section-link { background:none; border:0; cursor:pointer; font-size:12px; font-weight:500; color:#047857; font-family:var(--font-display); }

/* ── generic white card ── */
.rsd-card { background:#fff; border:1px solid #E5E7EB; border-radius:20px; padding:18px; box-shadow:var(--shadow-soft); }
.rsd-card-title { font-size:13px; font-weight:700; color:#1A1D1F; letter-spacing:-0.01em; margin-bottom:14px; }

/* ── list rows ── */
.rsd-row { display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1px solid #E5E7EB; border-radius:16px; box-shadow:var(--shadow-soft); margin-bottom:8px; }
.rsd-row-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsd-row-info { flex:1; min-width:0; }
.rsd-row-title { font-size:14px; font-weight:600; color:#1A1D1F; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rsd-row-sub { font-size:11px; color:#9CA3AF; font-weight:500; margin-top:2px; }
.rsd-row-right { text-align:right; flex-shrink:0; }
.rsd-row-amount { font-size:14px; font-weight:700; color:#1A1D1F; font-family:var(--font-mono); letter-spacing:-0.02em; }
.rsd-row-badge { font-size:9px; font-weight:700; letter-spacing:.05em; padding:2px 8px; border-radius:99px; margin-top:4px; display:inline-block; }
.rsd-row-badge.paid { background:#DCFCE7; color:#16A34A; }
.rsd-row-badge.pend { background:#FEF3C7; color:#D97706; }

/* ── report card ── */
.rsd-rep-card { background:#fff; border:1px solid #E5E7EB; border-radius:20px; padding:16px 18px 16px 22px; box-shadow:var(--shadow-soft); margin-bottom:10px; position:relative; overflow:hidden; }
.rsd-rep-bar { position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:20px 0 0 20px; }
.rsd-rep-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; }
.rsd-rep-title { font-size:14px; font-weight:600; color:#1A1D1F; letter-spacing:-0.01em; }
.rsd-rep-meta { font-size:11px; color:#9CA3AF; font-weight:500; margin-top:3px; }
.rsd-rep-status { font-size:10px; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:99px; flex-shrink:0; }
.rsd-rep-desc { font-size:12px; color:#6B7280; line-height:1.5; margin-top:10px; padding-top:10px; border-top:1px solid #F1F5F9; }
.rsd-rep-response { background:#EFF6FF; border-left:3px solid #3B82F6; border-radius:10px; padding:10px 14px; margin-top:10px; }
.rsd-rep-response-label { font-size:10px; font-weight:700; color:#3B82F6; margin-bottom:3px; letter-spacing:.04em; }
.rsd-rep-response-text { font-size:12px; color:#60A5FA; font-weight:500; line-height:1.4; }
.rsd-cat-pill { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 10px; border-radius:99px; background:#F1F5F9; color:#6B7280; margin-right:6px; }

/* ── profile ── */
.rsd-pf-avatar { width:80px; height:80px; border-radius:24px; background:var(--brand-700,#047857); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; font-family:var(--font-display); box-shadow:0 8px 24px rgba(4,120,87,.30); }
.rsd-pf-section { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#9CA3AF; font-family:var(--font-mono); margin:20px 0 10px; }
.rsd-pf-row { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid #F1F5F9; }
.rsd-pf-row:last-child { border-bottom:0; }
.rsd-pf-row-label { font-size:11px; font-weight:600; color:#9CA3AF; margin-bottom:2px; }
.rsd-pf-row-value { font-size:14px; font-weight:600; color:#1A1D1F; }
.rsd-pf-input { border:0; outline:none; font-size:14px; font-weight:600; color:#1A1D1F; background:transparent; width:100%; font-family:var(--font-display); }
.rsd-pf-input:disabled { color:#9CA3AF; }
.rsd-toggle { width:48px; height:28px; border-radius:14px; cursor:pointer; position:relative; transition:.3s; flex-shrink:0; border:0; }
.rsd-toggle-knob { width:24px; height:24px; border-radius:50%; background:#fff; position:absolute; top:2px; transition:.3s; box-shadow:0 2px 6px rgba(0,0,0,.15); }

/* ── form fields ── */
.rsd-field { margin-bottom:16px; }
.rsd-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6B7280; font-family:var(--font-mono); margin-bottom:8px; display:block; }
.rsd-input { width:100%; box-sizing:border-box; height:48px; border:1.5px solid #E5E7EB; border-radius:14px; padding:0 16px; font-size:14px; font-weight:500; color:#1A1D1F; background:#fff; outline:none; transition:border-color .15s; font-family:var(--font-display); }
.rsd-input:focus { border-color:#047857; }
.rsd-textarea { width:100%; box-sizing:border-box; border:1.5px solid #E5E7EB; border-radius:14px; padding:14px 16px; font-size:14px; font-weight:500; color:#1A1D1F; background:#fff; outline:none; transition:border-color .15s; resize:none; line-height:1.5; font-family:var(--font-display); }
.rsd-textarea:focus { border-color:#047857; }
.rsd-select-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rsd-select-btn { height:44px; border-radius:14px; border:1.5px solid #E5E7EB; background:#fff; font-size:13px; font-weight:600; color:#6B7280; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .15s; font-family:var(--font-display); }
.rsd-select-btn.on { border-color:#047857; background:#F0FDF4; color:#047857; }

/* ── buttons ── */
.rsd-btn-primary { width:100%; height:54px; background:linear-gradient(135deg,#00512C,#003D21); color:#fff; border:0; border-radius:16px; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 24px rgba(0,81,44,.30); transition:all .2s; font-family:var(--font-display); letter-spacing:-0.01em; }
.rsd-btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,81,44,.35); }
.rsd-btn-primary:active { transform:scale(0.98); }
.rsd-btn-secondary { width:100%; height:48px; background:#F7F8FA; color:#374151; border:1.5px solid #E5E7EB; border-radius:16px; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .15s; font-family:var(--font-display); }
.rsd-btn-secondary:hover { background:#ECFDF5; border-color:#6EE7B7; }
.rsd-btn-danger { width:100%; height:48px; background:#FEF2F2; color:#DC2626; border:1.5px solid #FEE2E2; border-radius:16px; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .15s; font-family:var(--font-display); }

/* ── empty state ── */
.rsd-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 32px; text-align:center; }
.rsd-empty-icon { width:64px; height:64px; border-radius:20px; background:#F0FDF4; color:#047857; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.rsd-empty-title { font-size:16px; font-weight:600; color:#1A1D1F; letter-spacing:-0.02em; margin-bottom:6px; }
.rsd-empty-sub { font-size:13px; color:#9CA3AF; font-weight:400; max-width:220px; line-height:1.5; margin-bottom:20px; }

/* ── success ── */
.rsd-success-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:40px 24px; text-align:center; background:#F7F8FA; }
.rsd-success-icon { width:88px; height:88px; background:linear-gradient(135deg,#00512C,#047857); color:#fff; border-radius:28px; display:flex; align-items:center; justify-content:center; margin-bottom:24px; box-shadow:0 16px 36px rgba(0,81,44,.35); }
.rsd-success-title { font-size:26px; font-weight:700; color:#1A1D1F; letter-spacing:-0.03em; margin-bottom:8px; }
.rsd-success-sub { font-size:14px; color:#6B7280; line-height:1.5; margin-bottom:28px; }
.rsd-success-receipt { background:#fff; border:1px solid #E5E7EB; border-radius:20px; padding:20px; width:100%; box-shadow:var(--shadow-soft); text-align:left; margin-bottom:20px; }
.rsd-receipt-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #F1F5F9; }
.rsd-receipt-row:last-child { border-bottom:0; padding-bottom:0; }
.rsd-receipt-label { font-size:12px; color:#9CA3AF; font-weight:500; }
.rsd-receipt-value { font-size:13px; font-weight:600; color:#1A1D1F; font-family:var(--font-mono); }

/* ── historial topbar override ── */
.ec-topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 14px; background:rgba(247,248,250,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:sticky; top:0; z-index:30; border-bottom:1px solid #E5E7EB; }
.ec-topbar-inner { display:flex; align-items:center; gap:12px; }
.ec-tb-back { width:38px; height:38px; border-radius:12px; background:#fff; border:1px solid #E5E7EB; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#374151; transition:all .15s; box-shadow:var(--shadow-soft); flex-shrink:0; }
.ec-tb-back:hover { background:#F0FDF4; border-color:#A7F3D0; }
.ec-tb-title { font-size:17px; font-weight:700; color:#1A1D1F; letter-spacing:-0.02em; }
.ec-tb-badge { background:#DCFCE7; color:#16A34A; font-size:10px; font-weight:700; padding:4px 10px; border-radius:99px; letter-spacing:.04em; font-family:var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════
   RESIDENT SCREEN POLISH  — v51
   Estado de Cuenta · Reportes · Mi Cuenta
   ═══════════════════════════════════════════════════════════════════ */

/* ── ec-item: circular green gradient icon (replaces square) ── */
.ec-item-icon { border-radius:50% !important; background:linear-gradient(135deg,#003D21,#059669) !important; width:44px !important; height:44px !important; }
.ec-item-icon svg { stroke:#ffffff !important; stroke-width:2.5 !important; }
.ec-item.expanded { border-color:#00512C !important; box-shadow:0 4px 24px rgba(0,81,44,.13) !important; }

/* ── Year group dividers ── */
.ec-year-group:first-child .ec-year-header { border-top:none !important; }
.ec-year-header { padding:20px 0 12px !important; border-top:1px solid #F1F5F9 !important; }
.ec-year-label { font-size:14px !important; font-weight:800 !important; color:#1A1D1F !important; font-family:var(--font-mono) !important; letter-spacing:0 !important; }
.ec-year-total { font-size:13px !important; font-weight:700 !important; }

/* ── Profile hero (gradient card replacing plain avatar header) ── */
.rsd-pf-hero { background:linear-gradient(160deg,#003D21 0%,#00512C 55%,#006B3C 100%); border-radius:24px; padding:28px 20px 26px; text-align:center; position:relative; overflow:hidden; box-shadow:0 14px 38px rgba(5,55,39,.30); }
.rsd-pf-hero::before { content:''; position:absolute; top:-60px; right:-60px; width:180px; height:180px; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%); border-radius:50%; pointer-events:none; }
.rsd-pf-hero::after { content:''; position:absolute; bottom:-50px; left:-30px; width:140px; height:140px; background:radial-gradient(circle,rgba(52,211,153,.18),transparent 70%); border-radius:50%; pointer-events:none; }
.rsd-pf-hero .rsd-pf-avatar { margin:0 auto !important; width:78px !important; height:78px !important; border-radius:50% !important; font-size:32px !important; background:rgba(255,255,255,.20) !important; box-shadow:0 0 0 4px rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.18) !important; position:relative; z-index:1; }
.rsd-pf-hero-name { font-size:22px; font-weight:800; color:#fff; margin-top:14px; letter-spacing:-0.03em; line-height:1.2; position:relative; z-index:1; }
.rsd-pf-hero-email { font-size:12px; color:rgba(255,255,255,.55); font-weight:500; margin-top:4px; position:relative; z-index:1; }
.rsd-pf-hero-chip { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:11px; font-weight:600; padding:5px 14px; border-radius:99px; margin-top:12px; font-family:var(--font-mono); position:relative; z-index:1; }

/* ── Report card: icon-based category (replaces left bar) ── */
.rsd-rep-cat-icon { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsd-rep-cat-icon.mant { background:#F0FDF4; }
.rsd-rep-cat-icon.seg { background:#FFF7ED; }
.rsd-prio-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; vertical-align:middle; }

/* ── Category select buttons: taller + ring on active ── */
.rsd-select-grid .rsd-select-btn { height:52px !important; border-radius:16px !important; }
.rsd-select-grid .rsd-select-btn.on { box-shadow:0 0 0 1.5px #047857 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   RESIDENT REDESIGN 2026  ·  Claude Design handoff implementation
   Tokens: bg #F4F6F8, card white/24px, brand #047857/#064E3B
═══════════════════════════════════════════════════════════════════════ */
.rc2-wrap { background:#F4F6F8; min-height:100vh; padding-bottom:80px; }
.rc2-topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:rgba(244,246,248,.96); backdrop-filter:blur(14px); }
.rc2-topbar-title { font-size:18px; font-weight:700; color:#0F172A; letter-spacing:-0.02em; }
.rc2-topbar-btn { width:44px; height:44px; border-radius:16px; background:#fff; border:1.5px solid #E5E7EB; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px rgba(14,22,19,.05); }
.rc2-topbar-back { width:44px; height:44px; border-radius:16px; background:#fff; border:1.5px solid #E5E7EB; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px rgba(14,22,19,.05); }
.rc2-main { padding:16px; display:flex; flex-direction:column; gap:14px; max-width:720px; margin:0 auto; }

/* ── Year tabs ── */
.ec2-year-tabs { display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:#E9ECF0; }
.ec2-year-tab { padding:6px 16px; border-radius:10px; font-size:12px; font-weight:700; color:#475569; background:none; border:0; cursor:pointer; font-family:var(--font-display,'Inter',sans-serif); transition:all .15s; letter-spacing:-.01em; }
.ec2-year-tab.on { background:#fff; color:#0F172A; box-shadow:0 1px 4px rgba(14,22,19,.10); }

/* ── KPI summary ── */
.ec2-kpis { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ec2-kpi { background:#fff; border-radius:20px; padding:16px 16px; box-shadow:0 1px 3px rgba(14,22,19,.04),0 4px 16px rgba(14,22,19,.04); }
.ec2-kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94A3B8; font-family:var(--font-mono); margin-bottom:8px; }
.ec2-kpi-value { font-size:22px; font-weight:700; color:#0F172A; letter-spacing:-0.04em; line-height:1; font-family:var(--font-mono); }
.ec2-kpi-sub { font-size:11px; font-weight:600; margin-top:5px; display:flex; align-items:center; gap:4px; }
.ec2-kpi-sub.ok { color:#047857; }
.ec2-kpi-sub.warn { color:#D97706; }
.ec2-kpi-sub.neutral { color:#94A3B8; }

/* ── Histogram chart ── */
.ec2-chart { background:#fff; border-radius:20px; padding:16px 18px; box-shadow:0 1px 3px rgba(14,22,19,.04),0 4px 16px rgba(14,22,19,.04); }
.ec2-chart-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ec2-chart-title { font-size:13px; font-weight:700; color:#0F172A; letter-spacing:-0.01em; }
.ec2-chart-unit { font-size:10px; color:#94A3B8; font-family:var(--font-mono); }
.ec2-bars { display:flex; align-items:flex-end; gap:4px; height:72px; }
.ec2-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ec2-bar { width:100%; border-radius:4px 4px 0 0; min-height:4px; transition:height .3s ease; }
.ec2-bar.paid { background:#047857; }
.ec2-bar.pending { background:#FCD34D; opacity:.8; }
.ec2-bar.future { background:#E2E8F0; }
.ec2-bar-lbl { font-size:8px; font-family:var(--font-mono); color:#94A3B8; font-weight:500; }
.ec2-bar-lbl.current { color:#D97706; font-weight:700; }

/* ── Filter chips ── */
.ec2-chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.ec2-chips::-webkit-scrollbar { display:none; }
.ec2-chip { flex-shrink:0; padding:6px 14px; border-radius:99px; font-size:11.5px; font-weight:700; cursor:pointer; border:0; font-family:var(--font-display,'Inter',sans-serif); transition:all .15s; white-space:nowrap; letter-spacing:-.01em; }
.ec2-chip.on { background:#0F172A; color:#fff; }
.ec2-chip.off { background:#fff; color:#475569; box-shadow:0 0 0 1.5px #E5E7EB; }

/* ── Transaction row ── */
.ec2-month-head { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#94A3B8; font-family:var(--font-mono); padding:0 2px; margin:12px 0 6px; }
.ec2-tx { background:#fff; border-radius:18px; padding:13px 15px; display:flex; align-items:center; gap:12px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 12px rgba(14,22,19,.04); cursor:pointer; transition:all .15s; margin-bottom:6px; }
.ec2-tx:hover { box-shadow:0 1px 3px rgba(14,22,19,.06),0 8px 20px rgba(14,22,19,.07); transform:translateY(-1px); }
.ec2-tx-ico { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ec2-tx-info { flex:1; min-width:0; }
.ec2-tx-title { font-size:13px; font-weight:600; color:#0F172A; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ec2-tx-sub { font-size:11px; color:#94A3B8; font-weight:500; margin-top:2px; }
.ec2-tx-right { text-align:right; flex-shrink:0; }
.ec2-tx-amount { font-size:13.5px; font-weight:700; color:#0F172A; font-family:var(--font-mono); letter-spacing:-0.02em; }
.ec2-tx-badge { font-size:9px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:99px; margin-top:4px; display:inline-block; }
.ec2-tx-badge.paid { background:#DCFCE7; color:#16A34A; }
.ec2-tx-badge.pend { background:#FEF3C7; color:#D97706; }
.ec2-tx-empty { background:#fff; border-radius:18px; padding:32px 20px; text-align:center; color:#94A3B8; font-size:13px; font-weight:500; }

/* ── Reports redesign (rc2-rep) ── */
.rc2-status-tabs { display:flex; border-bottom:1.5px solid #E5E7EB; padding:0 20px; position:sticky; top:57px; z-index:30; background:rgba(244,246,248,.96); backdrop-filter:blur(12px); }
.rc2-status-tab { padding:11px 14px; font-size:13px; font-weight:600; color:#94A3B8; cursor:pointer; border:0; background:none; font-family:var(--font-display); position:relative; white-space:nowrap; }
.rc2-status-tab.on { color:#047857; }
.rc2-status-tab.on::after { content:''; position:absolute; bottom:-1.5px; left:0; right:0; height:2.5px; background:#047857; border-radius:99px; }
.rc2-rep-card { background:#fff; border-radius:24px; padding:16px 18px; box-shadow:0 1px 3px rgba(14,22,19,.04),0 8px 24px rgba(14,22,19,.05); }
.rc2-rep-inner { display:flex; align-items:flex-start; gap:14px; }
.rc2-rep-ico { width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rc2-rep-title { font-size:14px; font-weight:600; color:#0F172A; letter-spacing:-0.01em; line-height:1.3; }
.rc2-rep-meta { font-size:11px; color:#94A3B8; font-weight:500; font-family:var(--font-mono); margin-top:3px; }
.rc2-rep-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; }
.rc2-rep-st { font-size:10px; font-weight:700; letter-spacing:.04em; padding:3px 10px; border-radius:99px; }
.rc2-rep-st.pendiente { background:#FEF3C7; color:#D97706; }
.rc2-rep-st.proceso { background:#DBEAFE; color:#2563EB; }
.rc2-rep-st.resuelto { background:#DCFCE7; color:#16A34A; }
.rc2-rep-prio { font-size:10px; font-weight:600; padding:3px 10px; border-radius:99px; background:#F1F5F9; color:#475569; }
.rc2-rep-prio.alta { background:#FEE2E2; color:#DC2626; }
.rc2-rep-prio.media { background:#FEF3C7; color:#D97706; }
.rc2-rep-resp { background:#EFF6FF; border-left:3px solid #3B82F6; border-radius:12px; padding:10px 14px; margin-top:12px; }
.rc2-rep-resp-lbl { font-size:10px; font-weight:700; color:#3B82F6; margin-bottom:4px; letter-spacing:.04em; }
.rc2-rep-resp-txt { font-size:12px; color:#60A5FA; font-weight:500; line-height:1.4; }

/* FAB */
.rc2-fab { position:fixed; bottom:88px; right:18px; width:54px; height:54px; border-radius:18px; background:#047857; color:#fff; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(4,120,87,.40); z-index:100; transition:all .2s; }
.rc2-fab:hover { background:#064E3B; transform:scale(1.05); }
body.sidebar-open .rc2-fab { display:none; }

/* ── New report form ── */
.rc2-nr-wrap { background:#F4F6F8; min-height:100vh; padding-bottom:80px; }
.rc2-cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.rc2-cat-btn { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 4px; border-radius:18px; background:#fff; border:2px solid transparent; box-shadow:0 1px 3px rgba(14,22,19,.04),0 4px 12px rgba(14,22,19,.04); cursor:pointer; transition:all .15s; }
.rc2-cat-btn.on { border-color:#047857; box-shadow:0 0 0 4px rgba(4,120,87,.10),0 1px 3px rgba(14,22,19,.04); }
.rc2-cat-ico { width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.rc2-cat-lbl { font-size:9.5px; font-weight:700; color:#475569; text-align:center; line-height:1.2; }
.rc2-nr-card { background:#fff; border-radius:20px; padding:16px; box-shadow:0 1px 3px rgba(14,22,19,.04),0 4px 16px rgba(14,22,19,.04); }
.rc2-nr-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94A3B8; font-family:var(--font-mono); margin-bottom:8px; padding-left:2px; }
.rc2-nr-input { width:100%; box-sizing:border-box; height:48px; border:1.5px solid #E5E7EB; border-radius:14px; padding:0 14px; font-size:14px; font-weight:500; color:#0F172A; background:#fff; outline:none; font-family:var(--font-display,'Inter',sans-serif); transition:border-color .15s; }
.rc2-nr-input:focus { border-color:#047857; box-shadow:0 0 0 3px rgba(4,120,87,.12); }
.rc2-nr-textarea { width:100%; box-sizing:border-box; min-height:90px; border:1.5px solid #E5E7EB; border-radius:14px; padding:12px 14px; font-size:14px; font-weight:500; color:#0F172A; background:#fff; outline:none; font-family:var(--font-display,'Inter',sans-serif); resize:none; transition:border-color .15s; }
.rc2-nr-textarea:focus { border-color:#047857; box-shadow:0 0 0 3px rgba(4,120,87,.12); }
.rc2-prio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rc2-prio-btn { height:44px; border-radius:14px; background:#fff; border:2px solid #E5E7EB; cursor:pointer; font-size:13px; font-weight:600; color:#475569; transition:all .15s; font-family:var(--font-display); }
.rc2-prio-btn[data-p="Media"].on { background:#F97316; border-color:#F97316; color:#fff; box-shadow:0 4px 12px rgba(249,115,22,.30); }
.rc2-prio-btn[data-p="Alta"].on { background:#EF4444; border-color:#EF4444; color:#fff; box-shadow:0 4px 12px rgba(239,68,68,.30); }
.rc2-prio-btn[data-p="Baja"].on { background:#6B7280; border-color:#6B7280; color:#fff; }
.rc2-ev-area { border:2px dashed #A7F3D0; border-radius:16px; padding:24px; text-align:center; cursor:pointer; background:#F0FDF4; transition:.2s; }
.rc2-ev-area:hover { background:#ECFDF5; }

/* ── Notifications screen ── */
.rc2-notif-wrap { background:#F4F6F8; min-height:100vh; padding-bottom:80px; }
.rc2-notif-group-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 6px; }
.rc2-notif-group-date { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#94A3B8; font-family:var(--font-mono); }
.rc2-notif-mark-read { font-size:11px; font-weight:600; color:#047857; background:none; border:0; cursor:pointer; }
.rc2-notif-item { background:#fff; border-radius:18px; padding:14px 16px; display:flex; gap:12px; position:relative; margin:0 16px 6px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 12px rgba(14,22,19,.04); cursor:pointer; transition:all .15s; }
.rc2-notif-item.unread { border-left:3px solid #047857; padding-left:13px; }
.rc2-notif-dot { position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%; background:#047857; flex-shrink:0; }
.rc2-notif-ico { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rc2-notif-body { flex:1; min-width:0; }
.rc2-notif-title { font-size:13px; font-weight:600; color:#0F172A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc2-notif-sub { font-size:11.5px; color:#475569; line-height:1.4; margin-top:3px; }
.rc2-notif-time { font-size:10px; color:#94A3B8; font-family:var(--font-mono); margin-top:6px; }
.rc2-notif-cta { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:8px; background:#047857; color:#fff; font-size:10.5px; font-weight:700; border:0; cursor:pointer; margin-top:6px; }
.rc2-notif-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:60px 32px; }
.rc2-notif-empty-ico { width:80px; height:80px; border-radius:24px; background:#fff; box-shadow:0 1px 3px rgba(14,22,19,.04),0 8px 24px rgba(14,22,19,.05); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.rc2-notif-empty-title { font-size:20px; font-weight:600; color:#0F172A; margin-bottom:8px; letter-spacing:-0.02em; }
.rc2-notif-empty-sub { font-size:13px; color:#475569; line-height:1.5; max-width:260px; }

/* ── Notification filter chips ── */
.rc2-notif-chips { display:flex; gap:8px; padding:12px 16px 8px; overflow-x:auto; scrollbar-width:none; }
.rc2-notif-chips::-webkit-scrollbar { display:none; }
.rc2-notif-chip { flex-shrink:0; display:flex; align-items:center; gap:5px; padding:7px 14px; border-radius:99px; font-size:12px; font-weight:700; cursor:pointer; border:0; font-family:var(--font-display,'Inter',sans-serif); background:#fff; color:#475569; box-shadow:0 0 0 1.5px #E5E7EB; transition:all .15s; letter-spacing:-.01em; }
.rc2-notif-chip.on { background:#0F172A; color:#fff; box-shadow:none; }
.rc2-notif-chip-cnt { font-size:10px; font-weight:800; background:rgba(255,255,255,.20); padding:1px 5px; border-radius:6px; }
.rc2-notif-chip.on .rc2-notif-chip-cnt { background:rgba(255,255,255,.20); }
.rc2-notif-chip:not(.on) .rc2-notif-chip-cnt { background:#F1F5F9; color:#64748B; }

/* ── Expandable notification card ── */
.rc2-ncard { background:#fff; border-radius:20px; margin:0 16px 8px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 14px rgba(14,22,19,.05); overflow:hidden; cursor:pointer; transition:box-shadow .15s; }
.rc2-ncard:hover { box-shadow:0 1px 3px rgba(14,22,19,.06),0 8px 24px rgba(14,22,19,.08); }
.rc2-ncard.unread { border-left:3px solid #047857; }
.rc2-ncard-row { display:flex; align-items:flex-start; gap:12px; padding:14px 14px 14px 16px; }
.rc2-ncard.unread .rc2-ncard-row { padding-left:13px; }
.rc2-ncard-ico { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rc2-ncard-main { flex:1; min-width:0; }
.rc2-ncard-label { font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; font-family:var(--font-mono); }
.rc2-ncard-title { font-size:14px; font-weight:700; color:#0F172A; letter-spacing:-0.01em; line-height:1.3; }
.rc2-ncard-sub { font-size:12px; color:#64748B; margin-top:3px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc2-ncard-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; padding-top:2px; }
.rc2-ncard-time { font-size:10.5px; color:#94A3B8; font-family:var(--font-mono); font-weight:600; }
.rc2-ncard-chevron { transition:transform .2s; flex-shrink:0; }
.rc2-ncard.open .rc2-ncard-chevron { transform:rotate(180deg); }
/* expandable detail */
.rc2-ncard-detail { max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; padding:0 16px; }
.rc2-ncard.open .rc2-ncard-detail { max-height:400px; padding:0 16px 16px; }
.rc2-ncard-detail-grid { display:flex; flex-direction:column; gap:8px; padding:12px 0; border-top:1px solid #F1F5F9; }
.rc2-ncard-detail-row { display:flex; align-items:center; justify-content:space-between; }
.rc2-ncard-detail-lbl { font-size:11px; font-weight:600; color:#94A3B8; text-transform:uppercase; letter-spacing:.04em; }
.rc2-ncard-detail-val { font-size:12px; font-weight:700; color:#0F172A; }
.rc2-ncard-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.rc2-ncard-cta { display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 14px; border-radius:10px; background:#047857; color:#fff; font-size:12px; font-weight:700; border:0; cursor:pointer; text-decoration:none; transition:background .15s; }
.rc2-ncard-cta:hover { background:#064E3B; }
.rc2-ncard-cta.ghost { background:#F1F5F9; color:#0F172A; }
.rc2-ncard-cta.ghost:hover { background:#E2E8F0; }

/* ══════════════════════════════════════════════
   REPORTES v2 (rp2-*)
   ══════════════════════════════════════════════ */
.rp2-header { display:flex; align-items:center; justify-content:space-between; padding:18px 16px 6px; }
.rp2-header-title { font-size:24px; font-weight:900; color:#0F172A; letter-spacing:-.03em; }
.rp2-header-btn { width:38px; height:38px; border-radius:12px; background:#F1F5F9; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#475569; transition:background .15s; }

.rp2-tabs { display:flex; border-bottom:1.5px solid #E5E7EB; padding:0 16px; background:rgba(244,246,248,.96); backdrop-filter:blur(12px); position:sticky; top:0; z-index:30; }
.rp2-tab { padding:10px 12px; font-size:14px; font-weight:600; color:#94A3B8; cursor:pointer; border:0; background:none; position:relative; white-space:nowrap; font-family:var(--font-display,'Inter',sans-serif); display:flex; align-items:center; gap:5px; }
.rp2-tab.on { color:#047857; }
.rp2-tab.on::after { content:''; position:absolute; bottom:-1.5px; left:0; right:0; height:2.5px; background:#047857; border-radius:99px; }
.rp2-tab-cnt { font-size:11px; font-weight:800; background:#047857; color:#fff; border-radius:10px; padding:1px 7px; }

.rp2-group-head { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#94A3B8; padding:14px 16px 6px; }

.rp2-card { background:#fff; border-radius:20px; margin:0 16px 10px; padding:14px 14px 12px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 14px rgba(14,22,19,.05); cursor:pointer; transition:box-shadow .15s,transform .1s; -webkit-tap-highlight-color:transparent; }
.rp2-card:active { transform:scale(.99); box-shadow:0 1px 2px rgba(14,22,19,.04); }
.rp2-card-top { display:flex; align-items:flex-start; gap:12px; }
.rp2-card-ico { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rp2-card-body { flex:1; min-width:0; }
.rp2-card-title { font-size:14px; font-weight:700; color:#0F172A; letter-spacing:-.01em; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp2-card-folio { font-size:11px; color:#94A3B8; font-weight:600; margin-top:2px; font-family:var(--font-mono); }
.rp2-card-age { font-size:12px; color:#94A3B8; font-weight:600; flex-shrink:0; padding-top:2px; }
.rp2-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; flex-wrap:wrap; gap:6px; }
.rp2-badges { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.rp2-badge { font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:99px; display:inline-flex; align-items:center; }
.rp2-st-pendiente { background:#FEF3C7; color:#D97706; }
.rp2-st-proceso { background:#DBEAFE; color:#2563EB; }
.rp2-st-resuelto { background:#DCFCE7; color:#16A34A; }
.rp2-prio-urgente,.rp2-prio-alta { background:#FEE2E2; color:#DC2626; }
.rp2-prio-media { background:#FEF3C7; color:#D97706; }
.rp2-prio-baja { background:#F1F5F9; color:#64748B; }
.rp2-assignee { display:flex; align-items:center; gap:6px; }
.rp2-av-stack { display:flex; }
.rp2-av { width:22px; height:22px; border-radius:7px; background:#047857; color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; margin-left:-4px; }
.rp2-av:first-child { margin-left:0; }
.rp2-assignee-lbl { font-size:11px; color:#64748B; font-weight:600; }
.rp2-rating { font-size:11px; color:#D97706; font-weight:700; }

/* New report form */
.rp2-nr-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px; }
.rp2-nr-close { width:36px; height:36px; border-radius:50%; background:#E5E7EB; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#475569; }
.rp2-nr-q { font-size:22px; font-weight:900; color:#0F172A; letter-spacing:-.02em; margin:8px 0 14px; }
.rp2-nr-lbl { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#94A3B8; margin-bottom:8px; display:block; }

.rp2-ev-row { display:flex; gap:8px; }
.rp2-ev-slot { flex:1; aspect-ratio:1/1; border-radius:14px; overflow:hidden; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; min-height:80px; }
.rp2-ev-empty { background:#F8FAFC; border:1.5px dashed #CBD5E1; }
.rp2-ev-lbl { font-size:11px; color:#94A3B8; font-weight:600; }
.rp2-ev-remove { position:absolute; top:5px; right:5px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.45); border:0; color:#fff; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }

.rp2-nr-submit { width:100%; height:52px; border-radius:16px; background:linear-gradient(135deg,#047857,#065F46); color:#fff; font-size:16px; font-weight:800; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 16px rgba(4,120,87,.30); font-family:var(--font-display,'Inter',sans-serif); margin-top:8px; }

/* Report detail */
.rp2-det-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 12px; }
.rp2-det-back { width:36px; height:36px; border-radius:50%; background:#F1F5F9; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#475569; }
.rp2-det-folio { font-size:13px; font-weight:800; color:#0F172A; letter-spacing:.04em; font-family:var(--font-mono); }
.rp2-det-share { width:36px; height:36px; border-radius:50%; background:#F1F5F9; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#475569; }
.rp2-det-hero { display:flex; align-items:flex-start; gap:14px; padding:0 16px 14px; }
.rp2-det-ico { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rp2-det-title { font-size:19px; font-weight:900; color:#0F172A; letter-spacing:-.02em; line-height:1.25; }
.rp2-det-badges { display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }
.rp2-det-body-text { font-size:14px; color:#475569; line-height:1.65; padding:0 16px 16px; }
.rp2-det-photo { margin:0 16px 16px; border-radius:18px; overflow:hidden; }
.rp2-det-photo img { width:100%; display:block; object-fit:cover; max-height:220px; }
.rp2-det-photo-placeholder { height:180px; background:linear-gradient(135deg,#BFDBFE,#93C5FD); border-radius:18px; margin:0 16px 16px; }
.rp2-det-estado-lbl { font-size:14px; font-weight:800; color:#0F172A; padding:4px 16px 12px; }
.rp2-timeline { padding:0 16px 12px; }
.rp2-tl-item { display:flex; gap:14px; }
.rp2-tl-left { display:flex; flex-direction:column; align-items:center; width:28px; flex-shrink:0; }
.rp2-tl-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rp2-tl-done { background:#047857; }
.rp2-tl-active { background:#F97316; }
.rp2-tl-pending { background:#E5E7EB; }
.rp2-tl-line { flex:1; width:2px; background:#E5E7EB; min-height:20px; margin:2px 0; }
.rp2-tl-right { flex:1; padding-bottom:20px; }
.rp2-tl-label { font-size:14px; font-weight:700; color:#0F172A; margin-bottom:3px; line-height:1.3; }
.rp2-tl-label-pending { color:#94A3B8; font-weight:500; }
.rp2-tl-note { font-size:12px; color:#64748B; line-height:1.4; }
.rp2-comment-bar { display:flex; align-items:center; gap:10px; padding:12px 16px 24px; background:#fff; border-top:1px solid #F1F5F9; }
.rp2-comment-input { flex:1; height:42px; border:1.5px solid #E5E7EB; border-radius:14px; padding:0 14px; font-size:14px; color:#0F172A; background:#F8FAFC; outline:none; font-family:var(--font-display,'Inter',sans-serif); }
.rp2-comment-input:focus { border-color:#047857; background:#fff; box-shadow:0 0 0 3px rgba(4,120,87,.10); }
.rp2-comment-send { width:42px; height:42px; border-radius:14px; background:#047857; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rp2-comment-send:disabled { opacity:.5; cursor:not-allowed; }

/* ─── Report detail wrap (flex column, full height) ─── */
.rp2-det-wrap { display:flex; flex-direction:column; min-height:100vh; padding-bottom:0 !important; }
.rp2-chat { flex:1; overflow-y:auto; padding:12px 16px 16px; display:flex; flex-direction:column; gap:10px; min-height:120px; }
.rp2-chat-empty { text-align:center; padding:32px 16px; color:#94A3B8; font-size:13px; font-weight:500; line-height:1.6; }
.rp2-msg { display:flex; flex-direction:column; max-width:78%; }
.rp2-msg-me { align-self:flex-end; align-items:flex-end; }
.rp2-msg-other { align-self:flex-start; align-items:flex-start; }
.rp2-msg-bubble { padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5; word-break:break-word; }
.rp2-msg-me .rp2-msg-bubble { background:#047857; color:#fff; border-bottom-right-radius:4px; }
.rp2-msg-other .rp2-msg-bubble { background:#fff; color:#0F172A; border-bottom-left-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.07); }
.rp2-msg-meta { font-size:11px; color:#94A3B8; margin-top:4px; font-weight:600; }
.rp2-section-lbl { font-size:11px; font-weight:800; color:#94A3B8; letter-spacing:.08em; padding:8px 16px 4px; text-transform:uppercase; flex-shrink:0; }

/* Desktop "Nuevo reporte" button in header */
.rp2-new-btn { display:none; align-items:center; gap:5px; background:#047857; color:#fff; border:0; border-radius:12px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }
.rp2-new-btn:hover { background:#064E3B; }
body.sidebar-open .rp2-new-btn { display:flex; }

/* ══════════════════════════════════════════════
   NOTIFICACIONES v2 (nf2-*)
   ══════════════════════════════════════════════ */
.nf2-header { padding:18px 16px 10px; display:flex; align-items:center; justify-content:space-between; }
.nf2-header-title { font-size:22px; font-weight:900; color:#0F172A; letter-spacing:-.03em; }
.nf2-header-btn { width:38px; height:38px; border-radius:12px; background:#F1F5F9; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#475569; transition:background .15s; }
.nf2-header-btn:hover { background:#E2E8F0; }

.nf2-chips { display:flex; gap:8px; padding:2px 16px 12px; overflow-x:auto; scrollbar-width:none; }
.nf2-chips::-webkit-scrollbar { display:none; }
.nf2-chip { flex-shrink:0; display:flex; align-items:center; gap:5px; padding:8px 16px; border-radius:99px; font-size:13px; font-weight:700; cursor:pointer; border:0; font-family:var(--font-display,'Inter',sans-serif); background:#fff; color:#475569; box-shadow:0 0 0 1.5px #E5E7EB; transition:all .15s; white-space:nowrap; }
.nf2-chip.on { background:#0F172A; color:#fff; box-shadow:none; }
.nf2-chip-cnt { font-size:11px; font-weight:800; background:#F1F5F9; color:#64748B; padding:1px 6px; border-radius:6px; }
.nf2-chip.on .nf2-chip-cnt { background:rgba(255,255,255,.18); color:#fff; }

.nf2-group-head { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 6px; }
.nf2-group-date { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#94A3B8; }
.nf2-mark-read { font-size:11px; font-weight:700; color:#047857; background:none; border:0; cursor:pointer; padding:0; }

.nf2-card { display:flex; align-items:flex-start; gap:12px; background:#fff; margin:0 16px 8px; border-radius:18px; padding:14px 12px 14px 14px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 14px rgba(14,22,19,.05); cursor:pointer; transition:box-shadow .15s,transform .1s; -webkit-tap-highlight-color:transparent; }
.nf2-card:active { box-shadow:0 1px 2px rgba(14,22,19,.04); transform:scale(.99); }
.nf2-card-ico { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nf2-card-body { flex:1; min-width:0; }
.nf2-card-title { font-size:14px; font-weight:700; color:#0F172A; letter-spacing:-.01em; line-height:1.35; }
.nf2-card-sub { font-size:12px; color:#64748B; margin-top:3px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nf2-card-foot { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.nf2-card-time { font-size:11px; color:#94A3B8; font-weight:600; }
.nf2-card-right { display:flex; flex-direction:column; align-items:center; padding-top:3px; flex-shrink:0; gap:4px; }
.nf2-card-dot { width:8px; height:8px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 2px rgba(22,163,74,.18); }
.nf2-cta-pill { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:8px; background:#047857; color:#fff; font-size:12px; font-weight:700; border:0; cursor:pointer; flex-shrink:0; font-family:var(--font-display,'Inter',sans-serif); transition:background .15s; }
.nf2-cta-pill:hover { background:#064E3B; }

/* Detail screen */
.nf2-det-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 4px; }
.nf2-det-back { width:36px; height:36px; border-radius:50%; background:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px rgba(14,22,19,.10); color:#475569; }
.nf2-det-topbar-lbl { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#94A3B8; }
.nf2-det-trash { width:36px; height:36px; border-radius:50%; background:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px rgba(14,22,19,.10); color:#94A3B8; }
.nf2-det-ico-wrap { width:72px; height:72px; border-radius:24px; display:flex; align-items:center; justify-content:center; margin:18px auto 12px; }
.nf2-det-badge { text-align:center; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.nf2-det-title { font-size:22px; font-weight:900; color:#0F172A; text-align:center; letter-spacing:-.03em; line-height:1.25; margin:0 20px 8px; }
.nf2-det-meta { text-align:center; font-size:12px; color:#94A3B8; font-weight:600; margin-bottom:18px; }
.nf2-det-card { background:#fff; border-radius:20px; margin:0 16px 12px; padding:16px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 14px rgba(14,22,19,.05); }
.nf2-det-body { font-size:14px; color:#374151; line-height:1.65; }
.nf2-det-divider { border:0; border-top:1px solid #F1F5F9; margin:14px 0 10px; }
.nf2-det-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nf2-det-grid-lbl { font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#94A3B8; margin-bottom:3px; }
.nf2-det-grid-val { font-size:15px; font-weight:800; color:#0F172A; letter-spacing:-.01em; line-height:1.2; }
.nf2-det-section { font-size:13px; font-weight:800; color:#0F172A; padding:4px 16px 8px; }
.nf2-det-related { background:#fff; border-radius:20px; margin:0 16px 16px; overflow:hidden; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 14px rgba(14,22,19,.05); }
.nf2-det-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid #F8FAFC; cursor:pointer; transition:background .1s; -webkit-tap-highlight-color:transparent; }
.nf2-det-row:last-child { border-bottom:0; }
.nf2-det-row:active { background:#F8FAFC; }
.nf2-det-row-ico { width:36px; height:36px; border-radius:10px; background:#F1F5F9; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nf2-det-row-lbl { flex:1; font-size:14px; font-weight:600; color:#0F172A; }
.nf2-det-actions { padding:0 16px 36px; display:flex; flex-direction:column; gap:10px; }
.nf2-det-cta-primary { width:100%; height:52px; border-radius:16px; background:linear-gradient(135deg,#047857,#065F46); color:#fff; font-size:15px; font-weight:800; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 16px rgba(4,120,87,.30); letter-spacing:-.01em; font-family:var(--font-display,'Inter',sans-serif); }
.nf2-det-cta-secondary { width:100%; height:48px; border-radius:14px; background:transparent; color:#64748B; font-size:14px; font-weight:700; border:0; cursor:pointer; font-family:var(--font-display,'Inter',sans-serif); }

/* ══════════════════════════════════════════════
   MÉTODOS DE PAGO (pm2-*)
   ══════════════════════════════════════════════ */
.pm2-topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 8px; }
.pm2-topbar-title { font-size:17px; font-weight:800; color:#0F172A; letter-spacing:-.02em; }
.pm2-add-btn { width:38px; height:38px; border-radius:50%; background:#047857; color:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(4,120,87,.35); transition:background .15s; flex-shrink:0; }
.pm2-add-btn:hover { background:#064E3B; }

/* Featured card visual */
.pm2-card-visual { position:relative; width:calc(100% - 32px); margin:4px 16px 20px; border-radius:24px; padding:22px 22px 20px; color:#fff; overflow:hidden; display:flex; flex-direction:column; min-height:190px; box-shadow:0 20px 60px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.18); }
.pm2-card-visual::before { content:''; position:absolute; top:-50px; right:-50px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; }
.pm2-card-visual::after  { content:''; position:absolute; bottom:-70px; left:-30px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.05); pointer-events:none; }
.pm2-card-top { display:flex; align-items:center; justify-content:space-between; }
.pm2-card-bank { font-size:18px; font-weight:900; letter-spacing:-.01em; text-shadow:0 1px 4px rgba(0,0,0,.25); }
.pm2-card-badge { font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.22); padding:4px 10px; border-radius:6px; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15); }
.pm2-card-chip { width:36px; height:28px; border-radius:6px; background:linear-gradient(135deg,#F0D060 0%,#C9A84A 40%,#E8C96E 60%,#B8862A 100%); margin:16px 0 12px; box-shadow:0 2px 6px rgba(0,0,0,.25); position:relative; z-index:1; flex-shrink:0; }
.pm2-card-chip::after { content:''; position:absolute; inset:4px; border-radius:3px; border:1px solid rgba(0,0,0,.15); }
.pm2-card-number { font-size:16px; font-weight:600; letter-spacing:.05em; font-family:var(--font-mono); text-shadow:0 1px 3px rgba(0,0,0,.25); margin-bottom:16px; position:relative; z-index:1; }
.pm2-card-bottom { display:flex; align-items:flex-end; gap:0; position:relative; z-index:1; }
.pm2-card-lbl { font-size:7.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.60; margin-bottom:4px; }
.pm2-card-val { font-size:13px; font-weight:700; letter-spacing:.01em; }
.pm2-card-network { font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; opacity:.80; text-align:right; }
.pm2-card-network-logo { width:38px; opacity:.85; }

/* Secondary card rows */
.pm2-section-lbl { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#94A3B8; padding:0 16px 8px; margin-top:4px; }
.pm2-card-row { display:flex; align-items:center; gap:12px; background:#fff; margin:0 16px 8px; border-radius:18px; padding:14px 14px 14px 16px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 14px rgba(14,22,19,.05); cursor:pointer; transition:box-shadow .15s; }
.pm2-card-row:hover { box-shadow:0 2px 6px rgba(14,22,19,.06),0 8px 24px rgba(14,22,19,.08); }
.pm2-card-mini { width:48px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:9px; font-weight:900; letter-spacing:.04em; color:#fff; }
.pm2-card-row-info { flex:1; min-width:0; }
.pm2-card-row-name { font-size:13px; font-weight:700; color:#0F172A; }
.pm2-card-row-sub { font-size:11px; color:#64748B; margin-top:2px; }
.pm2-card-row-menu { padding:6px; cursor:pointer; color:#94A3B8; display:flex; align-items:center; }

/* Domiciliación */
.pm2-domicil-card { background:#F0FDF7; border-radius:18px; margin:0 16px 8px; padding:16px; display:flex; align-items:flex-start; gap:12px; }
.pm2-domicil-ico { width:44px; height:44px; border-radius:14px; background:#047857; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pm2-domicil-body { flex:1; min-width:0; }
.pm2-domicil-title { font-size:14px; font-weight:800; color:#064E3B; }
.pm2-domicil-sub { font-size:11px; color:#047857; font-weight:600; margin-top:2px; }
.pm2-domicil-desc { font-size:11px; color:#065F46; margin-top:8px; line-height:1.5; }
.pm2-domicil-toggle { flex-shrink:0; width:44px; height:26px; border-radius:13px; background:#047857; position:relative; cursor:pointer; border:0; transition:background .2s; }
.pm2-domicil-toggle::after { content:''; position:absolute; right:2px; top:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.20); transition:right .2s; }
.pm2-domicil-toggle.off { background:#E5E7EB; }
.pm2-domicil-toggle.off::after { right:auto; left:2px; }

/* SPEI rows */
.pm2-spei-row { display:flex; align-items:center; gap:12px; background:#fff; margin:0 16px 8px; border-radius:18px; padding:14px 16px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 14px rgba(14,22,19,.05); }
.pm2-spei-ico { width:40px; height:40px; border-radius:12px; background:#F1F5F9; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pm2-spei-body { flex:1; min-width:0; }
.pm2-spei-name { font-size:13px; font-weight:700; color:#0F172A; }
.pm2-spei-clabe { font-size:11px; color:#64748B; margin-top:2px; font-family:var(--font-mono); }
.pm2-spei-badge { font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#047857; background:#F0FDF4; padding:4px 8px; border-radius:6px; flex-shrink:0; }

/* Footer */
.pm2-security-footer { text-align:center; padding:20px 16px 32px; display:flex; flex-direction:column; gap:6px; }
.pm2-security-line { font-size:10px; color:#94A3B8; font-weight:600; display:flex; align-items:center; justify-content:center; gap:5px; }

/* Empty state */
.pm2-empty { display:flex; flex-direction:column; align-items:center; padding:48px 24px 32px; gap:12px; }
.pm2-empty-ico { width:64px; height:64px; border-radius:20px; background:#F1F5F9; display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.pm2-empty-title { font-size:16px; font-weight:800; color:#0F172A; }
.pm2-empty-sub { font-size:13px; color:#64748B; text-align:center; line-height:1.5; max-width:240px; }

/* ══════════════════════════════════════════════
   CHECKOUT v2 (ck-*)
   ══════════════════════════════════════════════ */
.ck-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#fff; border-bottom:1px solid #F1F5F9; }
.ck-back-btn { width:36px; height:36px; border-radius:50%; background:#F1F5F9; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#475569; }
.ck-title { font-size:17px; font-weight:800; color:#0F172A; letter-spacing:-.02em; }
.ck-amount-section { text-align:center; padding:28px 20px 20px; }
.ck-amount-box { background:#FFF8F0; border-radius:20px; margin:12px 16px; padding:22px 20px 18px; text-align:center; border:1px solid #FDE68A; }
.ck-due-line { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:#F97316; font-weight:600; margin-top:8px; }
.ck-card-heading { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:#0F172A; padding:14px 18px 12px; border-bottom:1px solid #F1F5F9; }
.ck-detail-row { display:flex; align-items:center; justify-content:space-between; padding:11px 18px; font-size:14px; color:#0F172A; font-weight:500; border-bottom:1px solid #F8FAFC; }
.ck-detail-total { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; font-size:15px; font-weight:800; color:#0F172A; border-top:1px dashed #E5E7EB; }
.ck-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ck-soon-badge { font-size:10px; font-weight:800; color:#64748B; background:#F1F5F9; border-radius:8px; padding:4px 10px; letter-spacing:.06em; flex-shrink:0; }
.ck-amount-label { font-size:10px; font-weight:800; color:#94A3B8; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.ck-amount-row { display:flex; align-items:baseline; justify-content:center; gap:4px; }
.ck-amount-dollar { font-size:26px; font-weight:800; color:#0F172A; }
.ck-amount-main { font-size:64px; font-weight:900; color:#0F172A; letter-spacing:-.04em; line-height:1; }
.ck-amount-mxn { font-size:16px; font-weight:700; color:#94A3B8; margin-left:4px; }
.ck-amount-sub { font-size:13px; color:#64748B; font-weight:500; margin-top:8px; }
.ck-card { background:#fff; border-radius:20px; margin:0 16px 16px; box-shadow:0 1px 3px rgba(14,22,19,.03),0 4px 14px rgba(14,22,19,.05); overflow:hidden; }
.ck-card-row { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #F8FAFC; }
.ck-row-title { font-size:14px; font-weight:700; color:#0F172A; }
.ck-row-sub { font-size:12px; color:#94A3B8; font-weight:500; margin-top:2px; }
.ck-row-val { font-size:15px; font-weight:800; color:#0F172A; flex-shrink:0; }
.ck-coupon-row { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; }
.ck-coupon-lbl { font-size:14px; color:#94A3B8; font-weight:500; }
.ck-coupon-btn { background:none; border:0; font-size:14px; font-weight:700; color:#047857; cursor:pointer; padding:0; font-family:inherit; }
.ck-section-lbl { font-size:13px; font-weight:800; color:#0F172A; padding:4px 16px 10px; }
.ck-method-card { display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border-radius:18px; border:2px solid #E5E7EB; margin-bottom:10px; cursor:pointer; transition:border-color .15s; }
.ck-method-selected { border-color:#047857; }
.ck-method-ico { width:44px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ck-method-name { font-size:14px; font-weight:700; color:#0F172A; }
.ck-method-sub { font-size:12px; color:#94A3B8; font-weight:500; margin-top:2px; }
.ck-method-info { flex:1; }
.ck-add-method { display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border-radius:18px; border:2px dashed #E5E7EB; cursor:pointer; color:#475569; font-size:14px; font-weight:600; margin-bottom:10px; }
.ck-add-ico { width:44px; height:36px; border-radius:10px; background:#F1F5F9; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#64748B; }
.ck-pay-footer { position:fixed; bottom:0; left:0; right:0; padding:12px 16px 24px; background:linear-gradient(to top,#F4F6F8 70%,rgba(244,246,248,0)); z-index:50; }
body.sidebar-open .ck-pay-footer { left:240px; }
.ck-pay-btn { width:100%; height:56px; border-radius:18px; background:#047857; color:#fff; border:0; font-size:16px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 4px 16px rgba(4,120,87,.35); font-family:inherit; letter-spacing:-.01em; transition:background .15s; }
.ck-pay-btn:hover { background:#064E3B; }

/* ══════════════════════════════════════════════
   PAGO CONFIRMADO (pc-*)
   ══════════════════════════════════════════════ */
.pc-wrap { display:flex; flex-direction:column; align-items:center; min-height:100vh; background:#fff; padding:60px 24px 40px; text-align:center; }
.pc-check-ring { width:96px; height:96px; border-radius:50%; background:#DCFCE7; display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
.pc-title { font-size:28px; font-weight:900; color:#0F172A; letter-spacing:-.03em; margin-bottom:10px; }
.pc-sub { font-size:14px; color:#64748B; line-height:1.65; max-width:280px; margin-bottom:28px; font-weight:500; }
.pc-info-card { width:100%; max-width:340px; background:#F8FAFC; border-radius:20px; border:1px solid #E5E7EB; padding:4px 0; margin-bottom:24px; text-align:left; }
.pc-info-row { display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-bottom:1px solid #E5E7EB; }
.pc-info-lbl { font-size:13px; color:#94A3B8; font-weight:600; }
.pc-info-val { font-size:13px; color:#475569; font-weight:600; }
.pc-info-folio { font-family:var(--font-mono); color:#0F172A; font-weight:800; font-size:13px; }
.pc-btn-primary { width:100%; max-width:340px; height:54px; border-radius:18px; background:#047857; color:#fff; border:0; font-size:15px; font-weight:800; cursor:pointer; margin-bottom:12px; font-family:inherit; box-shadow:0 4px 16px rgba(4,120,87,.30); }
.pc-btn-primary:hover { background:#064E3B; }
.pc-btn-share { width:100%; max-width:340px; height:48px; border-radius:16px; background:#fff; border:1.5px solid #E5E7EB; color:#0F172A; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; font-family:inherit; }
.pc-btn-link { background:none; border:0; font-size:14px; color:#94A3B8; font-weight:600; cursor:pointer; font-family:inherit; }
.pc-btn-link:hover { color:#64748B; }

/* ══════════════════════════════════════════════
   RECIBO DIGITAL (rb-*)
   ══════════════════════════════════════════════ */
.rb-wrap { background:#fff; min-height:100vh; display:flex; flex-direction:column; padding-bottom:100px; }
.rb-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #F1F5F9; }
.rb-back-btn { width:36px; height:36px; border-radius:50%; background:#F1F5F9; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#475569; }
.rb-title { font-size:12px; font-weight:800; color:#0F172A; letter-spacing:.12em; text-transform:uppercase; }
.rb-share-btn { width:36px; height:36px; border-radius:50%; background:#F1F5F9; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#475569; }
.rb-confirmed-pill { display:inline-flex; align-items:center; gap:6px; background:#DCFCE7; color:#16A34A; font-size:11px; font-weight:800; letter-spacing:.06em; padding:6px 14px; border-radius:99px; margin-bottom:16px; }
.rb-amount-row { display:flex; align-items:baseline; justify-content:center; gap:2px; margin-bottom:6px; }
.rb-amount-dollar { font-size:24px; font-weight:800; color:#0F172A; }
.rb-amount-main { font-size:56px; font-weight:900; color:#0F172A; letter-spacing:-.04em; line-height:1; }
.rb-amount-mxn { font-size:14px; font-weight:700; color:#94A3B8; margin-left:4px; }
.rb-amount-sub { font-size:13px; color:#64748B; font-weight:500; margin-bottom:24px; }
.rb-details-card { margin:0 16px 16px; border-radius:20px; border:1px solid #E5E7EB; overflow:hidden; }
.rb-detail-row { display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-bottom:1px solid #F1F5F9; }
.rb-detail-row:last-child { border-bottom:0; }
.rb-detail-lbl { font-size:13px; color:#94A3B8; font-weight:600; }
.rb-detail-val { font-size:13px; color:#0F172A; font-weight:600; text-align:right; max-width:55%; word-break:break-all; }
.rb-val-folio { font-family:var(--font-mono); font-weight:800; }
.rb-val-green { color:#16A34A; font-weight:800; }
.rb-qr-section { display:flex; align-items:center; gap:14px; margin:0 16px 16px; padding:16px; background:#F8FAFC; border-radius:18px; border:1px solid #E5E7EB; }
.rb-qr-img { width:80px; height:80px; flex-shrink:0; border-radius:8px; }
.rb-qr-text { font-size:12px; color:#64748B; line-height:1.55; font-weight:500; }
.rb-footer { position:fixed; bottom:0; left:0; right:0; display:flex; gap:12px; padding:12px 16px 24px; background:#fff; border-top:1px solid #F1F5F9; z-index:50; }
body.sidebar-open .rb-footer { left:240px; }
.rb-pdf-btn { flex:1; height:50px; border-radius:16px; border:1.5px solid #E5E7EB; background:#fff; color:#0F172A; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; }
.rb-done-btn { flex:2; height:50px; border-radius:16px; background:#047857; color:#fff; border:0; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; }
.rb-done-btn:hover { background:#064E3B; }


/* ── C7 (26-sep): foco visible SOLO al navegar con teclado ──────────────
   :focus-visible no se activa al tocar o dar clic en botones, así que el
   aspecto con dedo o ratón no cambia. !important vence los outline:none. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.btm .ni:focus-visible,
#sb-items .ni:focus-visible {
  outline: 2px solid var(--primary, #10B981) !important;
  outline-offset: 2px !important;
}

/* ── C4 (26-sep): pantallas con formato de ticket, en escritorio ─────────
   Recibo, checkout y éxito de pago están diseñadas para teléfono (~430px)
   y con el sidebar abierto se estiraban hasta 820px. Se centran con ancho
   máximo de 480px; su diseño interno no cambia. Solo aplica en escritorio. */
body.sidebar-open #res-recibo > *,
body.sidebar-open #res-checkout > *,
body.sidebar-open #res-success > * {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ── C2 (26-sep): pantallas del manager se salían del teléfono ──────────
   En un teléfono de 400px, .mgd-main medía 450-497px: la cuadrícula de KPIs
   usaba 1fr (que no encoge por debajo de su contenido) y .mgd-main, como
   elemento flex de la pantalla, tampoco encogía. Mismas columnas y mismo
   espaciado que antes; solo se permite que encojan. */
.mgd-main { min-width: 0; width: 100%; box-sizing: border-box; }
.mgd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mgd-kpi { min-width: 0; }
.mgd-greet-h, .mgd-greet-p, .mgd-kpi-val, .mgd-kpi-sub { overflow-wrap: break-word; }
@media (min-width: 768px) {
  .mgd-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Filas de 4 indicadores (Residentes, Reportes): 2×2 en teléfono, 4 en tableta y escritorio.
   Antes tenían repeat(4,1fr) en línea y en teléfono se cortaban por la derecha. */
.mgd-kpis.mgd-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .mgd-kpis.mgd-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Generador de demos de venta (/demo) — herramienta interna ─────────────
   Pensado para usarse de pie, con una mano: campos altos, botones grandes. */
#demo-builder { background: #F4F6F8; overflow-y: auto; }
.dmb-wrap { width: 100%; max-width: 520px; margin: 0 auto; padding: 20px 16px 48px; box-sizing: border-box; }
.dmb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dmb-logo { width: 42px; height: 42px; border-radius: 13px; background: #00512C; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dmb-title { font-size: 19px; font-weight: 900; color: #0F172A; letter-spacing: -.02em; }
.dmb-sub { font-size: 12px; font-weight: 600; color: #94A3B8; }
.dmb-card { background: #fff; border-radius: 20px; padding: 18px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.dmb-card-title { font-size: 14px; font-weight: 900; color: #0F172A; margin-bottom: 14px; }
.dmb-label { display: block; font-size: 11px; font-weight: 800; color: #64748B; letter-spacing: .4px; text-transform: uppercase; margin: 14px 0 6px; }
.dmb-label:first-of-type { margin-top: 0; }
.dmb-input { width: 100%; box-sizing: border-box; height: 52px; border: 1.5px solid #E2E8F0; border-radius: 14px; padding: 0 14px; font-size: 16px; font-weight: 600; color: #0F172A; background: #F8FAFC; outline: none; font-family: inherit; }
.dmb-input:focus { border-color: #00512C; background: #fff; }
select.dmb-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #64748B 50%), linear-gradient(135deg, #64748B 50%, transparent 50%); background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px; background-size: 6px 6px; background-repeat: no-repeat; }
.dmb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dmb-amen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dmb-chip { border: 1.5px solid #E2E8F0; background: #F8FAFC; color: #475569; border-radius: 999px; padding: 11px 15px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.dmb-chip.on { background: #00512C; border-color: #00512C; color: #fff; }
.dmb-btn { width: 100%; height: 56px; margin-top: 20px; border: 0; border-radius: 16px; background: #00512C; color: #fff; font-size: 16px; font-weight: 900; cursor: pointer; font-family: inherit; }
.dmb-btn:disabled { opacity: .6; cursor: default; }
.dmb-btn-ghost { width: 100%; height: 50px; margin-top: 10px; border: 1.5px solid #E2E8F0; border-radius: 16px; background: #fff; color: #334155; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }
.dmb-err { color: #DC2626; font-size: 13px; font-weight: 700; margin-top: 12px; }
.dmb-nota { font-size: 12px; color: #94A3B8; font-weight: 600; margin-top: 10px; line-height: 1.5; }
.dmb-ok { background: linear-gradient(135deg, #059669, #047857); color: #fff; text-align: center; }
.dmb-ok-ico { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.dmb-ok-title { font-size: 20px; font-weight: 900; }
.dmb-ok-sub { font-size: 13px; opacity: .85; margin-top: 4px; }
.dmb-codigo { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F1F5F9; border-radius: 14px; padding: 14px 16px; font-family: var(--font-mono); font-size: 20px; font-weight: 900; color: #0F172A; letter-spacing: 1px; }
.dmb-nota-c { text-align: center; margin: 14px 0 4px; }
.dmb-mas { margin-top: 18px; border-top: 1px solid #F1F5F9; padding-top: 4px; }
.dmb-mas > summary { list-style: none; cursor: pointer; padding: 12px 0 4px; font-size: 13px; font-weight: 800; color: #00512C; }
.dmb-mas > summary::-webkit-details-marker { display: none; }
.dmb-mas > summary::after { content: ' +'; font-weight: 900; }
.dmb-mas[open] > summary::after { content: ' −'; }
.dmb-salir { display: block; width: 100%; margin-top: 22px; border: 0; background: none; color: #94A3B8; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; padding: 10px; }
.dmb-demo-acc { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }

/* Barra de la demo: flota encima de la barra inferior, sin mover el layout. */
#demo-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 101;
    display: flex; align-items: center; gap: 7px;
    max-width: calc(100vw - 24px);
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 6px 24px rgba(15, 23, 42, .3);
    overflow-x: auto;
    scrollbar-width: none;
}
#demo-bar::-webkit-scrollbar { display: none; }
.demo-bar-tag { font-size: 9.5px; font-weight: 900; letter-spacing: .6px; color: #0F172A; background: #FBBF24; border-radius: 999px; padding: 4px 7px; flex-shrink: 0; }
.demo-bar-priv { font-size: 12px; font-weight: 700; color: #CBD5E1; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.demo-bar-roles { display: flex; gap: 4px; flex-shrink: 0; }
.demo-bar-rol, .demo-bar-salir {
    border: 0; border-radius: 999px; padding: 8px 12px;
    font-size: 12.5px; font-weight: 800; font-family: inherit; cursor: pointer;
    background: rgba(255, 255, 255, .11); color: #fff; white-space: nowrap;
}
.demo-bar-rol.on { background: #fff; color: #0F172A; cursor: default; }
.demo-bar-salir { background: #00512C; }
@media (min-width: 800px) {
    #demo-bar { bottom: 20px; }
}
.dmb-mini { border: 1.5px solid #E2E8F0; background: #fff; color: #334155; border-radius: 10px; padding: 9px 13px; font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit; }
.dmb-mini-go { background: #00512C; border-color: #00512C; color: #fff; }
.dmb-mini-del { background: #FEF2F2; border-color: #FECACA; color: #DC2626; flex-shrink: 0; align-self: center; }
.dmb-demo { display: flex; align-items: center; gap: 12px; border-top: 1px solid #F1F5F9; padding: 14px 0; }
.dmb-demo:first-of-type { border-top: 0; }
.dmb-demo-info { flex: 1; min-width: 0; }
.dmb-demo-nombre { font-size: 14px; font-weight: 800; color: #0F172A; }
.dmb-demo-meta { font-size: 12px; color: #64748B; font-weight: 600; margin-top: 2px; }
.dmb-demo-fecha { font-size: 11px; color: #94A3B8; font-weight: 600; margin-top: 2px; }

/* ── Meta de ahorro: la pieza en Inicio del vecino ────────────────────────────
   La unidad de progreso es la casa, no el peso: la cifra grande es el censo
   ("38 de 53") y el dinero es la segunda lectura. Sigue el mundo del sistema:
   tarjeta blanca sobre lienzo gris, separada por sombra y no por borde, radio
   de tarjeta de dato, y toda cifra en monoespaciada. */
.mta {
    background: var(--bg-white);
    border-radius: 24px;
    padding: 18px;
    margin: 0 16px 12px;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.mta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.mta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mta-chip {
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    border-radius: var(--r-full); padding: 3px 9px; white-space: nowrap;
}
/* El estado del vecino manda sobre el de la privada: verde si ya aportó,
   ámbar si le falta. Nunca se suaviza un pendiente con verde. */
.mta-chip.mine-ok { background: var(--primary-soft); color: #047857; }
.mta-chip.mine-pend { background: var(--warning-bg); color: #92400E; }
.mta-chip.done { background: var(--primary-soft); color: #047857; }
.mta-chip.none { background: var(--border-2); color: #475569; }
.mta-name {
    font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.mta-censo { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mta-censo-big {
    font-size: 30px; font-weight: 500; line-height: 1;
    letter-spacing: -.02em; color: var(--text);
}
.mta-censo-de { font-size: 15px; font-weight: 500; color: var(--text-3); }
.mta-censo-txt { font-size: 12px; font-weight: 600; color: var(--text-3); }

/* El censo dibujado: una unidad por casa. Sustituye a la barra de progreso,
   que devolvia la lectura de porcentaje que la pieza quiere desplazar. Mismo
   vocabulario de puntos del panel del administrador, en version clara. */
.mta-censo-dots {
    display: grid;
    grid-template-columns: repeat(auto-fill, 15px);
    gap: 5px;
    margin: 12px 0 10px;
}
.mta-censo-dots.densa { grid-template-columns: repeat(auto-fill, 9px); gap: 4px; }
.mta-u {
    aspect-ratio: 1; border-radius: 4px;
    transition: transform .15s var(--ease);
}
.mta-censo-dots.densa .mta-u { border-radius: 2px; }
.mta-u-ok { background: var(--primary); }
.mta-u-pend { background: var(--border); }
/* Mi casa lleva un aro, no otro color: informa sin senalar. */
.mta-u.mia { box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 3.5px var(--text-3); }
.mta-u-ok.mia { box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 3.5px #047857; }

.mta-money { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.mta-money-de { font-weight: 500; color: var(--text-3); }

.mta-pay {
    width: 100%; margin-top: 14px; height: 46px;
    border: 0; border-radius: var(--r);
    background: var(--primary-gradient); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 81, 44, .25);
    transition: transform .2s var(--ease);
}
.mta-pay:hover { transform: translateY(-1px); }
.mta-pay:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (min-width: 800px) {
    .mta { margin-left: 0; margin-right: 0; }
}

/* ── Meta de ahorro: formulario del administrador ─────────────────────────── */
.mta-f-lbl {
    display: block; font-family: var(--font-mono);
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-4); margin: 14px 0 6px;
}
.mta-f-in { padding-left: 16px; margin-bottom: 0; }
textarea.mta-f-in { resize: vertical; min-height: 56px; line-height: 1.5; }
.mta-f-casa {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-2);
}
.mta-f-casa:hover { background: var(--bg-white); }
.mta-f-casa input { width: 17px; height: 17px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.mta-f-res {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    background: var(--primary-soft); color: #047857;
    font-size: 13px; line-height: 1.5;
}
.mta-f-res:empty { display: none; }

/* ── .mono, por fin global ──────────────────────────────────────────────────
   Existia acotada a .wzd-root, #man-dashboard, #man-gastos y .mgd-drawer, asi
   que en Inicio del vecino y en todos los cajones de detalle la clase no hacia
   nada: las cifras se pintaban en Inter. DESIGN.md exige monoespaciada en todo
   monto, saldo, porcentaje, numero de casa, folio y fecha corta. */
.mono {
    font-family: var(--font-mono);
    letter-spacing: -.02em;
}

/* ── Cuota extraordinaria en el estado de cuenta ──────────────────────────────
   Renglón propio, nunca mezclada con las mensualidades: no es deuda de
   mantenimiento ni cuenta como morosidad. */
.ec2-extra {
    background: var(--bg-white);
    border-radius: 20px;
    padding: 16px;
    margin: 0 16px 14px;
    box-shadow: var(--shadow-card);
}
.ec2-extra-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ec2-extra-tag {
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
    color: var(--text-4); text-transform: uppercase;
}
.ec2-extra-estado {
    font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    border-radius: var(--r-full); padding: 3px 9px;
}
.ec2-extra.ok .ec2-extra-estado { background: var(--primary-soft); color: #047857; }
.ec2-extra.pend .ec2-extra-estado { background: var(--warning-bg); color: #92400E; }
.ec2-extra-nombre { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.ec2-extra-pie { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ec2-extra-pie .mono { font-size: 17px; font-weight: 700; color: var(--text); }
.ec2-extra-nota { font-size: 11.5px; font-weight: 600; color: var(--text-3); }

@media (min-width: 800px) {
    .ec2-extra { margin-left: 0; margin-right: 0; }
}

/* ── Instalar la app ───────────────────────────────────────────────────────── */
.inst-wrap { background: var(--bg); min-height: 100vh; padding-bottom: 40px; }
.inst-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; gap: 10px;
}
.inst-back {
    width: 36px; height: 36px; border-radius: 12px; border: 0;
    background: var(--bg-white); color: var(--text-2);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: var(--shadow-card);
}
.inst-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.inst-topbar-lbl { font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: -.02em; }

.inst-hero { text-align: center; padding: 10px 24px 4px; }
.inst-icono {
    width: 72px; height: 72px; border-radius: 20px;
    box-shadow: var(--shadow-card); margin-bottom: 16px;
}
.inst-titulo {
    font-size: 22px; font-weight: 800; color: var(--text);
    letter-spacing: -.025em; line-height: 1.2; margin: 0 0 8px;
}
.inst-nota { font-size: 13.5px; font-weight: 600; color: var(--text-3); line-height: 1.5; margin: 0; }

.inst-pasos { list-style: none; margin: 22px 16px 0; padding: 0; display: grid; gap: 10px; }
.inst-paso {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--bg-white); border-radius: 18px; padding: 15px 16px;
    box-shadow: var(--shadow-card);
}
.inst-paso-n {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-full);
    background: var(--primary-soft); color: #047857;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.inst-paso-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inst-paso-txt strong { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.inst-paso-txt span { font-size: 12.5px; font-weight: 600; color: var(--text-3); line-height: 1.45; }

.inst-cta {
    display: block; width: calc(100% - 32px); margin: 20px 16px 0; height: 50px;
    border: 0; border-radius: var(--r);
    background: var(--primary-gradient); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 81, 44, .25);
}
.inst-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.inst-despues {
    display: block; width: calc(100% - 32px); margin: 10px 16px 0; height: 46px;
    border: 0; border-radius: var(--r); background: transparent;
    color: var(--text-3); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.inst-despues:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.inst-ok { text-align: center; padding: 60px 24px; }
.inst-ok-ico {
    width: 64px; height: 64px; border-radius: var(--r-full); margin: 0 auto 16px;
    background: var(--primary-soft); color: #047857;
    display: flex; align-items: center; justify-content: center;
}
.inst-ok-t { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.inst-ok-d { font-size: 13.5px; font-weight: 600; color: var(--text-3); margin-top: 6px; }

@media (min-width: 800px) {
    .inst-pasos, .inst-cta, .inst-despues { max-width: 460px; margin-left: auto; margin-right: auto; }
    .inst-cta, .inst-despues { width: 460px; }
}

/* ── Configuración de avisos ───────────────────────────────────────────────── */
.avc-wrap { background: var(--bg); min-height: 100vh; padding-bottom: 100px; }
.avc-intro { padding: 6px 20px 4px; }
.avc-titulo { font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -.025em; margin: 0 0 6px; }
.avc-nota { font-size: 13px; font-weight: 600; color: var(--text-3); line-height: 1.5; margin: 0; }

.avc-aviso {
    margin: 16px; padding: 14px 16px; border-radius: 18px;
    background: var(--warning-bg); box-shadow: var(--shadow-card);
}
.avc-aviso-t { font-size: 13.5px; font-weight: 800; color: #92400E; letter-spacing: -.02em; }
.avc-aviso-d { font-size: 12.5px; font-weight: 600; color: #92400E; line-height: 1.5; margin-top: 4px; opacity: .9; }
.avc-aviso-cta {
    margin-top: 12px; height: 42px; padding: 0 18px; border: 0; border-radius: 12px;
    background: #92400E; color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.avc-aviso-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.avc-cab {
    display: grid; grid-template-columns: 1fr 52px 52px; gap: 8px; align-items: center;
    padding: 18px 20px 6px;
}
.avc-cab-canal {
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
    color: var(--text-4); text-align: center;
}
.avc-fila {
    display: grid; grid-template-columns: 1fr 52px 52px; gap: 8px; align-items: center;
    background: var(--bg-white); border-radius: 18px;
    padding: 15px 16px; margin: 0 16px 10px; box-shadow: var(--shadow-card);
}
.avc-fila-n { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.avc-fila-d { font-size: 12px; font-weight: 600; color: var(--text-3); line-height: 1.45; margin-top: 3px; }

/* Interruptor: la pista es el control y la casilla real queda invisible pero
   presente, para que el teclado y los lectores de pantalla la encuentren. */
.avc-sw { position: relative; display: block; width: 46px; height: 28px; justify-self: center; cursor: pointer; }
.avc-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.avc-sw-pista {
    position: absolute; inset: 0; border-radius: var(--r-full);
    background: var(--border); transition: background .2s var(--ease);
}
.avc-sw-pista::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: var(--r-full);
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s var(--ease);
}
.avc-sw input:checked + .avc-sw-pista { background: var(--primary); }
.avc-sw input:checked + .avc-sw-pista::after { transform: translateX(18px); }
.avc-sw input:focus-visible + .avc-sw-pista { outline: 2px solid var(--primary); outline-offset: 2px; }
.avc-sw.off { opacity: .4; cursor: not-allowed; }
.avc-sw.off input { cursor: not-allowed; }

.avc-pie {
    font-size: 11.5px; font-weight: 600; color: var(--text-4);
    line-height: 1.5; margin: 18px 20px 0;
}

@media (min-width: 800px) {
    .avc-fila, .avc-cab, .avc-aviso { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* ── Probar el push ────────────────────────────────────────────────────────── */
.avc-prueba { margin: 6px 16px 0; }
.avc-prueba-btn {
    width: 100%; height: 48px; border: 0; border-radius: var(--r);
    background: var(--bg-white); color: #047857;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: transform .2s var(--ease);
}
.avc-prueba-btn:hover { transform: translateY(-1px); }
.avc-prueba-btn:disabled { color: var(--text-3); cursor: progress; transform: none; }
.avc-prueba-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* El resultado dice qué pasó en palabras. Ámbar si algo falló, nunca verde
   atenuado; verde solo cuando Firebase de verdad aceptó el envío. */
.avc-prueba-res { margin-top: 10px; border-radius: 16px; font-size: 12.5px; line-height: 1.5; }
.avc-prueba-res strong, .avc-prueba-res span { display: block; }
.avc-prueba-res.ok, .avc-prueba-res.mal { padding: 13px 15px; }
.avc-prueba-res.ok { background: var(--primary-soft); color: #065F46; }
.avc-prueba-res.mal { background: var(--warning-bg); color: #92400E; }
.avc-prueba-res strong { font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 3px; }
.avc-prueba-res span { font-weight: 600; }

@media (min-width: 800px) {
    .avc-prueba { max-width: 560px; margin-left: auto; margin-right: auto; }
}