/* ═══════════════════════════════════════════════════════════════
   SVSK · panel-condominio.css
   Extraído del bloque <style> que vivía dentro de PanelCondominio.razor.
   Los tokens globales siguen en wwwroot/css/svsk-design.css
   ═══════════════════════════════════════════════════════════════ */

        /* ═══════════════════════════════════════════════════════════
           ⚠️ Los tokens de tema, el contenedor, el header, la matriz,
           el calendario y el modo móvil ahora viven en:
                 wwwroot/css/svsk-design.css  (SVSK DESIGN SYSTEM v2)
           Aquí solo quedan estilos propios de esta pantalla.
           ═══════════════════════════════════════════════════════════ */

        /* ═══════════════════════════════════════════════════════════
           🛡️ ESCUDO ANTI-CAPA-FANTASMA (matriz de unidades)
           Garantiza que los botones de las tarjetas queden POR ENCIMA
           de cualquier capa decorativa (glow, aurora, ::after, etc.)
           y que ninguna capa hija de la tarjeta robe los clics.
           ═══════════════════════════════════════════════════════════ */
        .zona-botones-apto,
        .mini-card .mud-button-root,
        .mini-card button {
            position: relative !important;
            z-index: 500 !important;
            pointer-events: auto !important;
        }
        .mini-card::before, .mini-card::after,
        .solid-card::before, .solid-card::after,
        .dashboard-container::before, .dashboard-container::after {
            pointer-events: none !important;
        }

        .mud-table-cell { overflow: visible !important; }
        .mud-popover-provider { z-index: 2000000 !important; }
        .mud-popover.fixed-popover { z-index: 2000001 !important; position: fixed !important; }

        /* ═══════════════════════════════════════════════════════════
           ⏱️ La tira de meses, el módulo de gas y todo el relieve 3D
           viven ahora en: wwwroot/css/svsk-design.css (v3 "MAQUETA")
           ═══════════════════════════════════════════════════════════ */

        /* Calendario y chips de reserva: ver svsk-design.css */
        .neon-red    { box-shadow: 0 0 6px var(--svsk-bad);  color: var(--svsk-bad);  font-weight: 800; border: 1px solid var(--svsk-bad); }
        .neon-orange { box-shadow: 0 0 6px var(--svsk-warn); color: var(--svsk-warn); font-weight: 800; border: 1px solid var(--svsk-warn); }
        .bg-green    { background: var(--svsk-ok); color: #04140d; font-weight: 800; }
        .cancel-x    { color: #ffcccc; font-weight: bold; margin-left: 5px; }

        /* 🚨 CSS DE IMPRESIÓN BLINDADO (VERSIÓN FINAL) 🚨 */
        @media print {
            @page {
                size: letter;
                margin: 1cm;
            }
            /* 1. Ocultar la pantalla principal, menú lateral y barra superior (Esto quita el fondo no deseado) */
            .dashboard-container,
            .mud-drawer,
            .mud-appbar,
            header, nav, aside {
                display: none !important;
            }
            /* 2. MAGIA: Volver el fondo oscuro del modal transparente, pero NO borrarlo (para que no desaparezca la tabla) */
            .mud-overlay {
                background-color: transparent !important;
            }
            /* 3. Limpiar la caja del modal para que sea como una hoja en blanco */
            .mud-dialog-container {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
            }

            .mud-dialog {
                box-shadow: none !important;
                background: transparent !important;
                margin: 0 !important;
                padding: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
                border: none !important;
            }

            .mud-dialog-content {
                padding: 0 !important;
            }
            /* 4. Ocultar botones, título del modal y la tabla visual colorida */
            .mud-dialog-title,
            .mud-dialog-actions,
            .mud-table,
            button,
            .d-flex.gap-4.mb-4.align-end {
                display: none !important;
            }
            /* 5. Forzar la visualización de tu Área Oculta de Impresión */
            #area-impresion-asist, #area-impresion-pdf {
                display: block !important;
                visibility: visible !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
                background: white !important;
            }
                /* 6. Forzar LETRAS NEGRAS anti-tema oscuro */
                #area-impresion-asist *, #area-impresion-pdf * {
                    color: black !important;
                    font-family: 'Helvetica', 'Arial', sans-serif !important;
                }
            /* 7. Estilo profesional de la tabla de PDF */
            .pdf-table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
                font-size: 12px;
            }

                .pdf-table th {
                    background-color: #e0e0e0 !important; /* Fondo gris claro */
                    color: #000 !important;
                    padding: 10px;
                    border: 1px solid #000;
                    font-weight: bold;
                    text-transform: uppercase;
                    -webkit-print-color-adjust: exact; /* Fuerza a la impresora a usar el fondo gris */
                    print-color-adjust: exact;
                }

                .pdf-table td {
                    border: 1px solid #000;
                    padding: 10px;
                }
        }

        /* Estenedor del Buscador Neuronal */
    .search-neural-container {
        background: var(--svsk-elevated);
        border-radius: 14px;
        border: 1px solid var(--svsk-border);
    }

    .search-large .mud-input-root {
        height: 50px;
        font-size: 1.1rem;
    }

    /* Contenedor de la lista LIKE */
    .coincidencias-container {
        max-height: 250px;
        overflow-y: auto;
        background: var(--svsk-surface-solid);
        border: 2px solid var(--svsk-accent);
        border-top: none;
        border-radius: 0 0 14px 14px;
        box-shadow: var(--svsk-shadow);
        z-index: 100;
        position: relative;
    }

    /* Items de la lista */
    .coincidencia-item {
        padding: 13px 16px;
        cursor: pointer;
        border-bottom: 1px solid var(--svsk-border);
        transition: all 0.15s ease-in-out;
        color: var(--svsk-text);
    }

    .coincidencia-item:hover {
        background-color: var(--svsk-surface-hover);
        padding-left: 22px; /* Efecto slide */
    }

    .coincidencia-item.active {
        background-color: rgba(56, 189, 248, 0.14);
        background-color: color-mix(in srgb, var(--svsk-accent) 14%, transparent);
        border-left: 5px solid var(--svsk-accent);
    }

    /* Tags Visuales */
    .apto-tag-search {
        background: linear-gradient(135deg, var(--svsk-accent), var(--svsk-accent-2));
        color: #fff;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: 900;
        margin-right: 12px;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.9rem;
    }

    .nombre-text-search {
        font-weight: 600;
        color: var(--svsk-text);
        font-size: 0.95rem;
    }
    /* 📱 El modo app móvil (barra inferior, bottom sheets, safe-area)
       está en wwwroot/css/svsk-design.css */

    /* ═══════════════════════════════════════════════════════════
       📊 GRÁFICO 3D DE CONSUMO DE GAS — CSS puro, sin librerías.
       La perspectiva sale de rotateX sobre la escena, más dos caras
       extra por barra (tapa elíptica arriba y lateral sesgado).
       ═══════════════════════════════════════════════════════════ */
    .g3d-escena {
        display: flex; align-items: flex-end; justify-content: space-around;
        gap: 10px; height: 230px; padding: 30px 12px 0;
        perspective: 900px; overflow-x: auto;
        background: linear-gradient(180deg, transparent 0%, rgba(255,138,92,0.04) 100%);
        border-bottom: 2px solid rgba(255,138,92,0.25);
    }

    .g3d-col {
        display: flex; flex-direction: column; align-items: center;
        justify-content: flex-end; min-width: 44px; flex: 1;
        transform-style: preserve-3d;
    }

    .g3d-barra {
        position: relative; width: 30px;
        background: linear-gradient(180deg, #ff8a5c 0%, #c1440e 100%);
        border-radius: 3px 3px 0 0;
        transform: rotateX(8deg);
        transform-style: preserve-3d;
        box-shadow: 0 6px 18px rgba(0,0,0,0.45);
        transition: all .35s cubic-bezier(.2,.9,.3,1);
        animation: g3dCrecer .7s cubic-bezier(.2,.9,.3,1) backwards;
    }

    .g3d-barra.alta { background: linear-gradient(180deg, #ff6b6b 0%, #9b1c1c 100%); }
    .g3d-barra:hover { filter: brightness(1.25); transform: rotateX(8deg) translateY(-4px); }

    /* Tapa superior elíptica: es lo que da la sensación de volumen */
    .g3d-tapa {
        position: absolute; top: -7px; left: 0; width: 30px; height: 14px;
        background: #ffb08a; border-radius: 50% / 100%;
        transform: rotateX(72deg); transform-origin: bottom;
    }
    .g3d-barra.alta .g3d-tapa { background: #ff9d9d; }

    /* Cara lateral derecha */
    .g3d-lado {
        position: absolute; top: 0; right: -7px; width: 7px; height: 100%;
        background: linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.55));
        transform: skewY(-38deg); transform-origin: top left;
    }

    .g3d-valor { font-size: 0.62rem; font-weight: 900; color: var(--gas-luz); margin-bottom: 5px; white-space: nowrap; }
    .g3d-mes   { font-size: 0.62rem; font-weight: 800; color: var(--texto-2); margin-top: 9px; text-transform: uppercase; }
    .g3d-anio  { font-size: 0.55rem; color: var(--texto-3); }

    @keyframes g3dCrecer { from { height: 0 !important; opacity: 0; } }

    /* ═══════════════════════════════════════════════════════════
       🛢️ MEDIDOR DEL TANQUE — vista amigable para el residente
       ═══════════════════════════════════════════════════════════ */
    .tanque-cuerpo {
        position: relative; height: 130px; border-radius: 14px;
        background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
        border: 2px solid rgba(255,138,92,.3);
        box-shadow: inset 0 3px 12px rgba(0,0,0,.6);
        overflow: hidden;
    }

    .tanque-liquido {
        position: absolute; bottom: 0; left: 0; right: 0;
        background: linear-gradient(180deg, #ff8a5c 0%, #c1440e 100%);
        box-shadow: 0 -3px 16px rgba(255,138,92,.4);
        transition: height 1s cubic-bezier(.2,.9,.3,1);
        animation: tanqueSubir 1.2s cubic-bezier(.2,.9,.3,1) backwards;
    }

    /* La ola de arriba: un óvalo que se mece, para que se lea como líquido */
    .tanque-ola {
        position: absolute; top: -6px; left: 0; right: 0; height: 12px;
        background: #ffb08a; border-radius: 50%;
        opacity: .85; animation: tanqueOla 3.5s ease-in-out infinite;
    }

    .tanque-marcas {
        position: absolute; inset: 0; display: flex; flex-direction: column;
        justify-content: space-between; padding: 4px 10px;
        font-size: .55rem; font-weight: 800; color: rgba(255,255,255,.45);
        letter-spacing: 1px; pointer-events: none;
    }

    @keyframes tanqueSubir { from { height: 0 !important; } }
    @keyframes tanqueOla {
        0%, 100% { transform: translateY(0) scaleX(1); }
        50%      { transform: translateY(-3px) scaleX(1.04); }
    }

    /* ── Historial de llenados ── */
    .llenado-lista { display: flex; flex-direction: column; gap: 9px; }

    .llenado-fila { display: flex; align-items: center; gap: 12px; }

    .llenado-fecha {
        min-width: 66px; display: flex; flex-direction: column; line-height: 1.1;
        font-size: .68rem; color: var(--texto-2);
    }
    .llenado-fecha span { font-size: .55rem; color: var(--texto-3); }

    .llenado-pista {
        flex: 1; height: 22px; border-radius: 6px;
        background: rgba(0,0,0,.28); overflow: hidden;
    }

    .llenado-barra {
        height: 100%; border-radius: 6px;
        background: linear-gradient(90deg, #c1440e, #ff8a5c);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
        animation: llenadoCrecer .8s cubic-bezier(.2,.9,.3,1) backwards;
    }

    .llenado-gal {
        min-width: 78px; text-align: right;
        font-size: .74rem; font-weight: 900; color: var(--gas-luz);
    }

    @keyframes llenadoCrecer { from { width: 0 !important; } }




/* ══════════════════════════════════════════════════════════════════════
   📱 AJUSTES PARA CELULAR

   El panel se diseñó en pantalla ancha. Las barras de encabezado usan
   "d-flex justify-space-between" SIN permiso de envolver, así que en un
   celular de 360 px el último botón se empuja fuera y se ve cortado.

   La solución no es achicar todo: es dejar que envuelvan. En pantalla de
   escritorio nada de esto aplica.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

    /* TODA fila flexible dentro del panel puede envolver. Es una regla
       amplia a propósito: envolver siempre se ve mejor que desbordarse,
       y así cubre las barras que no conozco una por una. */
    .dashboard-container .d-flex {
        flex-wrap: wrap;
    }

    /* Encabezado con título a un lado y botón al otro: el botón baja a
       una segunda línea y ocupa el ancho completo. Es el caso del
       "NUEVA RESERVA" del gazebo y del "PAGAR NÓMINA" de personal. */
    .dashboard-container .d-flex.justify-space-between {
        gap: 10px;
    }

    .dashboard-container .d-flex.justify-space-between > .mud-button-root,
    .dashboard-container .d-flex.justify-space-between > .mud-menu {
        width: 100%;
        flex: 1 1 100%;
    }

    .dashboard-container .d-flex.justify-space-between > .mud-menu > .mud-button-root {
        width: 100%;
    }

    /* Grupos de botones agrupados en un div: ancho completo y envolviendo. */
    .dashboard-container .d-flex.justify-space-between > .d-flex {
        width: 100%;
        gap: 8px !important;
    }

    /* Botones: que no se apachurren ni se salgan. */
    .dashboard-container .mud-button-root {
        min-width: 0;
        font-size: .75rem;
        padding-left: 12px;
        padding-right: 12px;
        white-space: normal;
        line-height: 1.3;
    }

    .dashboard-container .mud-button-root .mud-icon-root {
        font-size: 1rem;
    }

    /* La leyenda del gazebo (OCUPADO / PARCIAL / LIBRE) más compacta. */
    .leyenda-box {
        font-size: .6rem !important;
        padding: 3px 6px !important;
    }

    /* Calendario del gazebo: en celular caben 4 columnas cómodas. */
    .calendar-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    /* Los paneles pierden el relleno grande: en 360 px de ancho, 24 px de
       relleno por lado se comen un tercio de la pantalla. */
    .dashboard-container .content-panel,
    .dashboard-container .mud-paper.pa-4,
    .dashboard-container .mud-paper.pa-5,
    .dashboard-container .mud-paper.pa-6 {
        padding: 14px !important;
    }

    /* Las tablas anchas se deslizan en vez de romper el diseño. */
    .dashboard-container .mud-table-container,
    .dashboard-container .mud-simple-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Los modales aprovechan casi toda la pantalla. */
    .mud-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* Las pestañas se deslizan en vez de comprimirse hasta ser ilegibles. */
    .dashboard-container .mud-tabs-toolbar,
    .dashboard-container .mud-tabs-toolbar-wrapper {
        overflow-x: auto;
    }

    /* Nada debe empujar la página a lo ancho. */
    .dashboard-container {
        overflow-x: hidden;
    }
}

/* Pantallas muy angostas (iPhone SE y similares) */
@media (max-width: 400px) {
    .calendar-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .dashboard-container .mud-button-root {
        font-size: .7rem;
        width: 100%;
        flex: 1 1 100%;
    }
}