/* ═══════════════════════════════════════════════════════════════════════════
   SVSK DESIGN SYSTEM v3 — "MAQUETA"
   ───────────────────────────────────────────────────────────────────────────
   El panel no es una pantalla: es un TABLERO FÍSICO de administración.
   Placas metálicas extruidas, tornillos, luz que cae de arriba-izquierda,
   y fichas que se hunden cuando el mes queda pagado.

   Tres reglas que gobiernan todo:

   1. LUZ ÚNICA. La luz viene de arriba-izquierda, siempre. Por eso todo
      objeto elevado tiene brillo en su borde superior y sombra abajo-derecha.
      Todo objeto hundido tiene lo contrario. Es lo que da el volumen real.

   2. DOS ESTADOS FÍSICOS. Un objeto está ELEVADO (.relieve) o HUNDIDO
      (.hendidura). Nunca plano. El estado dice algo: lo pendiente sobresale
      (le falta algo), lo saldado está estampado hacia adentro (ya se cerró).

   3. EL GAS ES OTRO MATERIAL. No comparte NI UN color con el resto del
      sistema. Su naranja butano (--gas) no aparece en ningún otro lugar.
      Cuando usted vea ese naranja, sabe sin pensarlo que está mirando gas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía ─────────────────────────────────────────────────────────── */
body, .mud-typography, .mud-button-root, .mud-input-root,
.mud-table, .mud-dialog, .mud-chip, .mud-tab {
    font-family: 'Inter', 'Segoe UI', 'Roboto', system-ui, sans-serif;
}
.mud-table-cell, .money-text, .cifra { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODO NOCHE — "Sala de máquinas"
   Grafito cálido, no negro. El negro puro es plano; el grafito tiene cuerpo.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-dark {
    --fondo:        #171b22;
    --fondo-hondo:  #10141a;
    --placa:        #232932;   /* superficie elevada */
    --placa-alta:   #2b323d;   /* elevada + hover */
    --hendido:      #14181e;   /* superficie hundida */

    --linea:        rgba(255,255,255,.07);
    --linea-viva:   rgba(255,255,255,.14);

    /* Los tres ingredientes del relieve */
    --luz-borde:    rgba(255,255,255,.09);
    --sombra-borde: rgba(0,0,0,.55);
    --sombra-caida: rgba(0,0,0,.50);

    --texto:        #e6e9ee;
    --texto-2:      #9aa5b4;
    --texto-3:      #67717f;

    --laton:        #c9922e;   /* Latón: llaves, accesos, adelantos */
    --laton-luz:    #e8bc63;
    --azulejo:      #3b96be;   /* Azulejo: el sistema, lo informativo */
    --azulejo-luz:  #62b8dc;
    --saldado:      #55a97a;   /* Salvia: pagado, cerrado */
    --pendiente:    #d9534f;   /* Ladrillo: debe */

    /* ⛽ GAS — material exclusivo. No usar en NADA más. */
    --gas:          #e8622c;
    --gas-luz:      #ff8a5c;
    --gas-hondo:    #7d2f11;

    /* Compatibilidad con clases viejas */
    --bg-main: var(--fondo); --bg-card: var(--placa);
    --text-main: var(--texto); --popover-bg: var(--placa);
    --svsk-accent: var(--azulejo); --svsk-accent-2: var(--azulejo-luz);
    --svsk-text: var(--texto); --svsk-text-soft: var(--texto-2);
    --svsk-text-mute: var(--texto-3); --svsk-border: var(--linea);
    --svsk-border-strong: var(--linea-viva); --svsk-surface: var(--placa);
    --svsk-surface-solid: var(--placa); --svsk-elevated: var(--placa-alta);
    --svsk-ok: var(--saldado); --svsk-bad: var(--pendiente); --svsk-warn: var(--laton);
    --svsk-shadow: 0 18px 40px -12px var(--sombra-caida);
    --svsk-shadow-sm: 0 8px 20px -8px var(--sombra-caida);
    --svsk-surface-hover: var(--placa-alta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO DÍA — "Plano de arquitectura"
   Papel de plano, azul-gris frío. Nada de crema ni sepia.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-light {
    --fondo:        #d9dfe6;
    --fondo-hondo:  #cdd4dd;
    --placa:        #f2f5f8;
    --placa-alta:   #ffffff;
    --hendido:      #e0e6ec;

    --linea:        rgba(24,36,52,.10);
    --linea-viva:   rgba(24,36,52,.22);

    --luz-borde:    rgba(255,255,255,.95);
    --sombra-borde: rgba(24,36,52,.16);
    --sombra-caida: rgba(30,45,66,.20);

    --texto:        #1b2430;
    --texto-2:      #55637a;
    --texto-3:      #8a97a8;

    --laton:        #9a6f1c;
    --laton-luz:    #c9922e;
    --azulejo:      #24708f;
    --azulejo-luz:  #3b96be;
    --saldado:      #3e8a5f;
    --pendiente:    #c0392b;

    /* ⛽ GAS */
    --gas:          #d14e1b;
    --gas-luz:      #e8622c;
    --gas-hondo:    #f7e0d5;

    --bg-main: var(--fondo); --bg-card: var(--placa);
    --text-main: var(--texto); --popover-bg: var(--placa-alta);
    --svsk-accent: var(--azulejo); --svsk-accent-2: var(--azulejo-luz);
    --svsk-text: var(--texto); --svsk-text-soft: var(--texto-2);
    --svsk-text-mute: var(--texto-3); --svsk-border: var(--linea);
    --svsk-border-strong: var(--linea-viva); --svsk-surface: var(--placa);
    --svsk-surface-solid: var(--placa-alta); --svsk-elevated: var(--placa-alta);
    --svsk-ok: var(--saldado); --svsk-bad: var(--pendiente); --svsk-warn: var(--laton);
    --svsk-shadow: 0 18px 40px -14px var(--sombra-caida);
    --svsk-shadow-sm: 0 8px 18px -8px var(--sombra-caida);
    --svsk-surface-hover: var(--placa-alta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIMITIVAS DE RELIEVE — el corazón del sistema
   ═══════════════════════════════════════════════════════════════════════════ */

/* ELEVADO: sobresale del tablero */
.relieve {
    background: var(--placa);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 var(--luz-borde),          /* filo iluminado arriba */
        inset 0 -1px 0 var(--sombra-borde),      /* filo oscuro abajo */
        0 1px 0 var(--sombra-borde),             /* canto extruido */
        0 8px 18px -8px var(--sombra-caida),     /* sombra cercana */
        0 22px 44px -18px var(--sombra-caida);   /* sombra lejana */
}

/* HUNDIDO: entra en el tablero. Lo contrario, exacto. */
.hendidura {
    background: var(--hendido);
    border-radius: 12px;
    box-shadow:
        inset 0 2px 5px -1px var(--sombra-borde),  /* la sombra cae adentro */
        inset 0 -1px 0 var(--luz-borde);           /* el filo de abajo brilla */
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL TABLERO
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-container {
    background: var(--fondo);
    color: var(--texto);
    min-height: 100vh;
    position: relative;
    transition: background .4s ease, color .4s ease;
    /* ⚠️ FIX CLICS FANTASMA: se eliminó `perspective: 1400px`.
       La perspectiva + inclinación 3D movía los botones DEBAJO del cursor
       en pleno clic (mousedown y mouseup caían en elementos distintos →
       el navegador nunca disparaba el click). Solo pasaba en escritorio;
       en móvil (<900px) la inclinación se apagaba y por eso al abrir
       DevTools (que encoge la ventana) los botones "revivían". */
}

/* Textura del tablero: una retícula muy tenue, como papel de plano */
.dashboard-container::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(var(--linea) 1px, transparent 1px),
        linear-gradient(90deg, var(--linea) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .5;
    mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 78%);
}
.dashboard-container > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   CABECERA — placa atornillada al tablero
   ═══════════════════════════════════════════════════════════════════════════ */
.svsk-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--placa);
    border-radius: 16px;
    padding: 16px 22px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    box-shadow:
        inset 0 1px 0 var(--luz-borde),
        inset 0 -1px 0 var(--sombra-borde),
        0 1px 0 var(--sombra-borde),
        0 10px 24px -10px var(--sombra-caida),
        0 26px 50px -20px var(--sombra-caida);
}

/* Los cuatro tornillos de la placa */
.svsk-header::before, .svsk-header::after {
    content: ''; position: absolute; top: 9px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--hendido);
    box-shadow: inset 0 1px 1px var(--sombra-borde), 0 1px 0 var(--luz-borde);
}
.svsk-header::before { left: 9px; }
.svsk-header::after  { right: 9px; }

.svsk-brand-line { display: flex; align-items: center; gap: 13px; min-width: 0; }

/* La placa de latón grabada con la marca */
.svsk-logo-orb {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 11px;
    background: linear-gradient(160deg, var(--laton-luz), var(--laton) 55%, #8a6318);
    display: grid; place-items: center;
    font-weight: 800; font-size: .82rem;
    color: #241a04;
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -2px 3px rgba(0,0,0,.3),
        0 3px 0 #6b4c12,
        0 8px 16px -5px var(--sombra-caida);
}

.svsk-eyebrow {
    font-size: .58rem; font-weight: 800; letter-spacing: 2.6px;
    color: var(--texto-3); text-transform: uppercase;
    display: block; line-height: 1.5;
}
.svsk-title {
    font-size: 1.4rem; font-weight: 800; letter-spacing: -.5px;
    line-height: 1.15; margin: 0; color: var(--texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.svsk-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Indicadores hundidos: como visores empotrados en la placa */
.svsk-pill {
    display: flex; flex-direction: column; justify-content: center;
    background: var(--hendido);
    border-radius: 11px;
    padding: 8px 14px;
    box-shadow: inset 0 2px 5px -1px var(--sombra-borde), inset 0 -1px 0 var(--luz-borde);
}
.svsk-pill-label {
    font-size: .52rem; font-weight: 800; letter-spacing: 1.7px;
    color: var(--texto-3); text-transform: uppercase;
}
.svsk-pill-value {
    font-size: .95rem; font-weight: 800; color: var(--texto);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.svsk-pill-value.money { color: var(--saldado); }

.svsk-led { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.svsk-led.on  { background: var(--saldado);  box-shadow: 0 0 9px var(--saldado); animation: svskLatido 1.9s ease-in-out infinite; }
.svsk-led.off { background: var(--pendiente); box-shadow: 0 0 9px var(--pendiente); }
@keyframes svskLatido { 0%,100%{opacity:1} 50%{opacity:.32} }

/* Botón físico: se HUNDE cuando lo presiona */
.svsk-theme-btn {
    width: 42px; height: 42px;
    border-radius: 12px; border: none;
    background: var(--placa-alta);
    color: var(--texto);
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 var(--luz-borde),
        0 3px 0 var(--sombra-borde),
        0 6px 12px -4px var(--sombra-caida);
    transition: transform .1s ease, box-shadow .1s ease;
}
.svsk-theme-btn:hover { color: var(--laton-luz); }
.svsk-theme-btn:active {
    transform: translateY(3px);
    box-shadow: inset 0 2px 5px -1px var(--sombra-borde);
}
.svsk-theme-btn:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PESTAÑAS — teclas de una consola
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-container .mud-tabs-toolbar {
    background: var(--hendido) !important;
    border-radius: 15px;
    padding: 7px !important;
    margin-bottom: 18px;
    box-shadow: inset 0 2px 6px -1px var(--sombra-borde), inset 0 -1px 0 var(--luz-borde);
}
.dashboard-container .mud-tab {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: .71rem !important;
    letter-spacing: .7px !important;
    color: var(--texto-3) !important;
    min-height: 42px !important;
    text-transform: uppercase;
    transition: all .16s ease !important;
}
.dashboard-container .mud-tab:hover {
    color: var(--texto) !important;
    background: var(--placa) !important;
}
/* La tecla presionada sale del hueco: brilla y sobresale */
.dashboard-container .mud-tab.mud-tab-active {
    background: var(--placa-alta) !important;
    color: var(--laton-luz) !important;
    box-shadow:
        inset 0 1px 0 var(--luz-borde),
        0 2px 0 var(--sombra-borde),
        0 6px 14px -5px var(--sombra-caida);
}
.dashboard-container .mud-tab-slider { display: none !important; }
.dashboard-container .mud-tabs-panels { background: transparent !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SUPERFICIES
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-container .content-panel,
.dashboard-container .mud-paper {
    background: var(--placa) !important;
    border: none !important;
    border-radius: 16px !important;
    color: var(--texto) !important;
    box-shadow:
        inset 0 1px 0 var(--luz-borde),
        0 1px 0 var(--sombra-borde),
        0 10px 24px -12px var(--sombra-caida) !important;
}

.dashboard-container .mud-table { background: transparent !important; }
.dashboard-container .mud-table-head .mud-table-cell {
    background: var(--hendido) !important;
    color: var(--texto-3) !important;
    font-size: .64rem !important; font-weight: 800 !important;
    letter-spacing: 1.3px; text-transform: uppercase;
    border: none !important;
    box-shadow: inset 0 -1px 0 var(--sombra-borde);
}
.dashboard-container .mud-table-body .mud-table-cell {
    color: var(--texto) !important;
    border-bottom: 1px solid var(--linea) !important;
    font-size: .85rem;
}
.dashboard-container .mud-table-row:hover { background: var(--placa-alta) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MATRIZ — cada apartamento es una PLACA con su número grabado
   ═══════════════════════════════════════════════════════════════════════════ */
.grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 18px;
}

.mini-card, .dashboard-container .mini-card {
    background: var(--placa) !important;
    border: none;
    border-radius: 16px;
    padding: 0 !important;
    color: var(--texto);
    position: relative;
    overflow: visible;
    box-shadow:
        inset 0 1px 0 var(--luz-borde),
        inset 0 -1px 0 var(--sombra-borde),
        0 2px 0 var(--sombra-borde),
        0 10px 22px -10px var(--sombra-caida),
        0 26px 48px -20px var(--sombra-caida);
    transition: box-shadow .3s ease, filter .3s ease;
    padding: 14px !important;
}

/* Al pasar el mouse, la placa SE ILUMINA y despega su sombra — sin moverse.
   ⚠️ FIX CLICS FANTASMA: antes había translateY(-6px) rotateX(4deg) rotateY(-1.5deg).
   Ese movimiento desplazaba los botones (que viven en el borde INFERIOR de la
   tarjeta, la zona que más se movía con la inclinación) justo entre el
   mousedown y el mouseup → el clic nunca se completaba. La tarjeta ahora
   expresa el hover con luz y sombra, que no mueven ni un píxel. */
.mini-card:hover {
    transform: none;
    filter: brightness(1.05);
    box-shadow:
        inset 0 1px 0 var(--luz-borde),
        0 3px 0 var(--sombra-borde),
        0 20px 36px -12px var(--sombra-caida),
        0 44px 70px -26px var(--sombra-caida);
}

/* La franja de estado: un canto de color en el borde izquierdo, con volumen */
.mini-card::before {
    content: '';
    position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 4px; border-radius: 0 4px 4px 0;
}
.mini-card.border-red::before {
    background: linear-gradient(180deg, var(--pendiente), #8f2e2b);
    box-shadow: 0 0 12px -2px var(--pendiente);
}
.mini-card.border-green::before {
    background: linear-gradient(180deg, var(--saldado), #2f6d4c);
    box-shadow: 0 0 12px -2px var(--saldado);
}

.mini-card .truncate { color: var(--texto-2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solid-card { opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ⏱️ TIRA DE MESES — se lee SIN pasar el mouse
   ───────────────────────────────────────────────────────────────────────────
   Cada mes es una FICHA física. Tres señales redundantes, no una:

     1. POSICIÓN  — pagada = hundida (estampada). Debe = elevada (sobresale).
     2. SÍMBOLO   — ✓ pagado · ! debe · ★ adelantado · · fuera de periodo
     3. COLOR     — salvia · ladrillo · latón · gris

   Con tres canales, se entiende de un vistazo, se entiende impreso en blanco
   y negro, y se entiende siendo daltónico (8% de los hombres).
   ═══════════════════════════════════════════════════════════════════════════ */
.months-panel {
    background: var(--hendido);
    border-radius: 13px;
    padding: 11px 10px 9px;
    margin-top: auto;
    box-shadow: inset 0 2px 6px -1px var(--sombra-borde), inset 0 -1px 0 var(--luz-borde);
}

.months-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.months-year-label {
    font-size: .58rem; font-weight: 900; letter-spacing: 1.2px;
    color: var(--texto-3); font-variant-numeric: tabular-nums;
}
.months-progress-track {
    flex: 1; height: 6px; border-radius: 10px;
    background: rgba(0,0,0,.28);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
    overflow: hidden;
}
.months-progress-fill {
    height: 100%; border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    transition: width .7s cubic-bezier(.2,.9,.3,1);
}
.fill-ok   { background: linear-gradient(90deg, #3e8a5f, var(--saldado)); }
.fill-warn { background: linear-gradient(90deg, #9a6f1c, var(--laton-luz)); }
.fill-bad  { background: linear-gradient(90deg, #9d3330, var(--pendiente)); }

.months-pct { font-size: .6rem; font-weight: 900; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.pct-ok { color: var(--saldado); } .pct-warn { color: var(--laton-luz); } .pct-bad { color: var(--pendiente); }

/* Cuatro trimestres de tres fichas. La separación ayuda a contar. */
.mini-months-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    width: 100%;
}

.month-box {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    padding: 5px 0 4px;
    border-radius: 7px;
    font-size: .52rem; font-weight: 800;
    letter-spacing: .3px; text-transform: uppercase;
    user-select: none;
    transition: transform .15s ease;
}

/* El símbolo: la señal que se lee primero, antes que el color */
.month-mark {
    font-size: .68rem; font-weight: 900; line-height: 1;
    display: block;
}

/* ── PAGADO: la ficha está ESTAMPADA hacia adentro. Ya se cerró. ── */
.mes-pagado {
    background: rgba(85,169,122,.14);
    color: var(--saldado);
    box-shadow:
        inset 0 2px 4px -1px rgba(0,0,0,.45),
        inset 0 -1px 0 rgba(255,255,255,.07);
}
.mes-pagado .month-mark { color: var(--saldado); }

/* ── DEBE: la ficha SOBRESALE. Todavía falta algo. ── */
.mes-debe {
    background: linear-gradient(180deg, #e0605c, var(--pendiente));
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 2px 0 #8f2e2b,
        0 5px 10px -3px rgba(0,0,0,.5);
    transform: translateY(-1px);
    animation: svskRespira 2.6s ease-in-out infinite;
}
.mes-debe .month-mark { color: #fff; }
@keyframes svskRespira {
    0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 0 #8f2e2b, 0 5px 10px -3px rgba(0,0,0,.5); }
    50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 0 #8f2e2b, 0 5px 10px -3px rgba(0,0,0,.5), 0 0 14px -1px rgba(217,83,79,.75); }
}

/* ── ADELANTADO: ficha de latón, sobresale y brilla. ── */
.mes-adelanto {
    background: linear-gradient(180deg, var(--laton-luz), var(--laton));
    color: #2a1d05;
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 2px 0 #7d5814,
        0 5px 10px -3px rgba(0,0,0,.45);
    transform: translateY(-1px);
}
.mes-adelanto .month-mark { color: #2a1d05; }

/* ── FUERA DE PERIODO: hueco vacío, sin ficha puesta. ── */
.mes-futuro {
    background: transparent;
    color: var(--texto-3);
    opacity: .55;
    box-shadow: inset 0 0 0 1px var(--linea);
}
.mes-futuro .month-mark { color: var(--texto-3); }

/* ── La línea que lo dice con palabras. Esto elimina el hover. ── */
.months-resumen {
    margin-top: 8px; padding-top: 7px;
    border-top: 1px solid var(--linea);
    font-size: .6rem; font-weight: 700;
    line-height: 1.45; text-align: center;
    letter-spacing: .2px;
}
.months-resumen.debe { color: var(--pendiente); }
.months-resumen.aldia { color: var(--saldado); }
.months-resumen.adelanto { color: var(--laton-luz); }
.months-resumen b { font-weight: 900; letter-spacing: .6px; }

/* ── Leyenda permanente. Se pone UNA vez arriba de la matriz. ── */
.leyenda-meses {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    background: var(--hendido);
    border-radius: 12px;
    padding: 9px 14px;
    margin-bottom: 16px;
    box-shadow: inset 0 2px 5px -1px var(--sombra-borde);
}
.leyenda-t {
    font-size: .55rem; font-weight: 900; letter-spacing: 1.6px;
    color: var(--texto-3); text-transform: uppercase; margin-right: 4px;
}
.leyenda-item {
    display: flex; align-items: center; gap: 6px;
    font-size: .66rem; font-weight: 700; color: var(--texto-2);
}
.leyenda-ficha {
    width: 26px; height: 20px; border-radius: 6px;
    display: grid; place-items: center;
    font-size: .62rem; font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⛽ GAS — MATERIAL EXCLUSIVO
   ───────────────────────────────────────────────────────────────────────────
   El gas no es una sección más: es un aparato APARTE, atornillado al lado.
   Otro color, otra textura (rayas de advertencia), otra forma.
   Su naranja butano no aparece en NINGÚN otro lugar del sistema.
   Si ve naranja, es gas. Punto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El módulo de gas dentro de la tarjeta del apartamento:
   está SEPARADO por un espacio y tiene su propio cuerpo físico. */
.gas-modulo {
    margin-top: 12px;
    border-radius: 12px;
    background: var(--gas-hondo);
    padding: 0;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 2px 0 rgba(0,0,0,.35),
        0 6px 14px -6px var(--sombra-caida);
}

/* La cinta de advertencia: dice "esto es otra cosa" sin una sola palabra */
.gas-cinta {
    height: 5px;
    background: repeating-linear-gradient(
        -45deg,
        var(--gas) 0 7px,
        rgba(0,0,0,.35) 7px 14px
    );
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);
}

.gas-cuerpo {
    padding: 9px 11px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.gas-etiqueta {
    font-size: .5rem; font-weight: 900; letter-spacing: 1.5px;
    color: var(--gas-luz); text-transform: uppercase;
    display: flex; align-items: center; gap: 4px;
}
.gas-aparte {
    font-size: .44rem; font-weight: 900; letter-spacing: 1px;
    color: var(--gas-luz); opacity: .8;
    border: 1px solid currentColor;
    border-radius: 20px; padding: 1px 5px;
    white-space: nowrap;
}
.gas-monto {
    font-size: 1rem; font-weight: 900;
    color: var(--gas-luz);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.gas-monto.cero { color: var(--texto-3); opacity: .7; text-shadow: none; }

/* Botón de gas: mismo material, se hunde al presionar */
.gas-btn {
    background: linear-gradient(180deg, var(--gas-luz), var(--gas));
    color: #2b0f04;
    border: none; border-radius: 9px;
    padding: 6px 12px;
    font-size: .6rem; font-weight: 900; letter-spacing: .8px;
    cursor: pointer; white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255,255,255,.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        0 3px 0 #8f3a15,
        0 6px 12px -4px rgba(0,0,0,.45);
    transition: transform .08s ease, box-shadow .08s ease;
}
.gas-btn:hover { filter: brightness(1.07); }
.gas-btn:active {
    transform: translateY(3px);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}
.gas-btn:focus-visible { outline: 2px solid var(--gas-luz); outline-offset: 2px; }

/* La pestaña GAS en la barra de pestañas: se distingue del resto */
.dashboard-container .mud-tab.tab-gas.mud-tab-active {
    background: linear-gradient(180deg, var(--gas-luz), var(--gas)) !important;
    color: #2b0f04 !important;
}

/* Panel de gas (dentro de su pestaña) */
.gas-panel {
    background: var(--placa) !important;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 var(--luz-borde),
        0 10px 24px -12px var(--sombra-caida);
}
.gas-panel::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: repeating-linear-gradient(-45deg, var(--gas) 0 7px, rgba(0,0,0,.35) 7px 14px);
}

/* Tarjeta de indicador de gas (KPI) */
.gas-kpi {
    background: var(--hendido);
    border-radius: 13px;
    padding: 13px 16px;
    box-shadow: inset 0 2px 6px -1px var(--sombra-borde), inset 0 -1px 0 var(--luz-borde);
    border-left: 3px solid var(--gas);
}
.gas-kpi-l { font-size: .55rem; font-weight: 900; letter-spacing: 1.6px; color: var(--texto-3); text-transform: uppercase; }
.gas-kpi-v { font-size: 1.35rem; font-weight: 900; color: var(--gas-luz); font-variant-numeric: tabular-nums; margin-top: 3px; }
.gas-kpi-v.neutro { color: var(--texto); }
.gas-kpi-v.bien   { color: var(--saldado); }
.gas-kpi-v.mal    { color: var(--pendiente); }

/* Aviso de cuenta separada — se repite donde haga falta, sin pena */
.gas-aviso {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--gas-hondo);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: .8rem; line-height: 1.55;
    color: var(--texto);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 rgba(0,0,0,.3);
    border-left: 4px solid var(--gas);
}
.gas-aviso b { color: var(--gas-luz); }

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDARIO
   ═══════════════════════════════════════════════════════════════════════════ */
.calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.cal-day {
    background: var(--placa);
    border-radius: 12px; padding: 8px; min-height: 92px;
    box-shadow: inset 0 1px 0 var(--luz-borde), 0 2px 0 var(--sombra-borde), 0 6px 14px -8px var(--sombra-caida);
    transition: transform .2s ease;
}
.cal-day:hover { transform: translateY(-3px); }
.cal-date { font-size: .64rem; font-weight: 800; color: var(--texto-3); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 5px; }
.day-full    { box-shadow: inset 0 0 0 2px var(--pendiente), 0 2px 0 var(--sombra-borde), 0 6px 14px -8px var(--sombra-caida); }
.day-partial { box-shadow: inset 0 0 0 2px var(--laton), 0 2px 0 var(--sombra-borde), 0 6px 14px -8px var(--sombra-caida); }
.leyenda-box { font-size: .58rem; font-weight: 900; padding: 5px 12px; border-radius: 20px; letter-spacing: 1px; }
.reserva-chip {
    background: linear-gradient(180deg, var(--azulejo-luz), var(--azulejo));
    color: #061620; border-radius: 8px; font-size: .68rem; font-weight: 700; padding: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 rgba(0,0,0,.3);
}
.reserva-pendiente {
    background: linear-gradient(180deg, var(--laton-luz), var(--laton)) !important;
    color: #241a04 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARIOS Y BOTONES — todo se hunde al presionar
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-container .mud-input-root { color: var(--texto) !important; }
.dashboard-container .mud-input-label { color: var(--texto-3) !important; }
.dashboard-container .mud-input-outlined-border { border-color: var(--linea) !important; }
.dashboard-container .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--azulejo) !important; }

.dashboard-container .mud-button-root {
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-transform: none;
    transition: transform .09s ease, box-shadow .09s ease !important;
}
.dashboard-container .mud-button-filled {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.35), 0 6px 12px -5px var(--sombra-caida) !important;
}
.dashboard-container .mud-button-filled:active {
    transform: translateY(3px);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.4) !important;
}
.dashboard-container .mud-chip { border-radius: 8px !important; font-weight: 700 !important; }

.mud-popover.fixed-popover, .dashboard-container .mud-popover {
    background: var(--placa-alta) !important;
    color: var(--texto) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 44px -14px var(--sombra-caida), inset 0 1px 0 var(--luz-borde) !important;
}

.dashboard-container *::-webkit-scrollbar { width: 9px; height: 9px; }
.dashboard-container *::-webkit-scrollbar-track { background: var(--hendido); border-radius: 20px; }
.dashboard-container *::-webkit-scrollbar-thumb {
    background: var(--placa-alta); border-radius: 20px;
    box-shadow: inset 0 1px 0 var(--luz-borde);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 MÓVIL — el tablero cabe en la mano
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .dashboard-container {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        perspective: none; /* La inclinación 3D marea en pantalla chica */
    }
    .dashboard-container::before { background-size: 34px 34px; }

    .svsk-header {
        border-radius: 0 0 18px 18px;
        margin: 0 -8px 14px;
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        flex-wrap: nowrap; gap: 9px;
    }
    .svsk-logo-orb { width: 38px; height: 38px; flex-basis: 38px; font-size: .74rem; }
    .svsk-title { font-size: 1.02rem; }
    .svsk-eyebrow { font-size: .48rem; letter-spacing: 1.6px; }
    .svsk-header-right { gap: 7px; flex-wrap: nowrap; }
    .svsk-pill { padding: 6px 10px; }
    .svsk-pill-label { font-size: .45rem; }
    .svsk-pill-value { font-size: .78rem; }
    .svsk-pill.solo-escritorio { display: none; }
    .svsk-theme-btn { width: 38px; height: 38px; }

    /* Barra de pestañas abajo, como teclas de una consola de mano */
    .dashboard-container .mud-tabs-toolbar {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        background: var(--placa) !important;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -10px 30px -8px var(--sombra-caida), inset 0 1px 0 var(--luz-borde) !important;
        overflow-x: auto !important; overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity;
    }
    .dashboard-container .mud-tabs-toolbar::-webkit-scrollbar { display: none !important; }
    .dashboard-container .mud-tab {
        flex-direction: column !important;
        min-width: 74px !important; max-width: 74px !important;
        min-height: 56px !important;
        padding: 7px 3px !important; gap: 3px !important;
        font-size: .5rem !important; line-height: 1.15 !important;
        scroll-snap-align: center;
    }
    .dashboard-container .mud-tab .mud-icon-root { font-size: 1.4rem !important; margin: 0 !important; }
    .dashboard-container .mud-tabs-panels { padding: 0 !important; }
    .dashboard-container .content-panel { padding: 14px !important; }

    .grid-compact { grid-template-columns: 1fr; gap: 14px; }
    .mini-card { min-height: auto !important; }
    .mini-card:hover { transform: none; } /* Sin inclinación: no hay mouse */

    .dashboard-container .mud-button-root { min-height: 44px !important; font-size: .85rem !important; }
    .dashboard-container .mud-icon-button { min-width: 42px !important; min-height: 42px !important; }
    .dashboard-container .mud-input-root input,
    .dashboard-container .mud-input-root textarea { font-size: 16px !important; }

    /* Diálogos: cajones que salen del fondo */
    .mud-dialog {
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important; width: 100% !important; max-width: 100% !important;
        max-height: 92vh !important;
        position: fixed !important; bottom: 0 !important; left: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: svskCajon .3s cubic-bezier(.2,.9,.3,1);
        box-shadow: 0 -14px 40px -8px rgba(0,0,0,.6) !important;
    }
    @keyframes svskCajon { from { transform: translateY(100%); } to { transform: none; } }
    .mud-dialog::before {
        content: ''; position: absolute; top: 8px; left: 50%;
        transform: translateX(-50%);
        width: 42px; height: 5px; border-radius: 10px;
        background: var(--hendido);
        box-shadow: inset 0 1px 2px var(--sombra-borde);
    }
    .mud-dialog-content { padding-top: 22px !important; max-height: 74vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .dashboard-container .mud-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

    .calendar-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .leyenda-meses { padding: 8px 10px; gap: 6px; }
    .leyenda-item { font-size: .6rem; }
    .gas-cuerpo { flex-wrap: wrap; }
}

@media (max-width: 400px) {
    .svsk-title { font-size: .92rem; }
    .dashboard-container .mud-tab { min-width: 66px !important; max-width: 66px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-container *, .mud-dialog { animation: none !important; transition: none !important; }
    .mini-card:hover { transform: none; }
}

@media print {
    .dashboard-container::before, .svsk-header { display: none !important; }
}