.presupuesto-table-wrapper {
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg);
    overflow-x: auto !important; 
    overflow-y: auto !important; /* Habilita el scroll vertical */
    max-height: 500px; /* Límite de altura. Ajusta a tu gusto (ej. 60vh) */
    box-shadow: var(--shadow-sm);
    padding-bottom: 20px; /* Reducido para evitar un espacio vacío gigante al final */
}

/* Fija la cabecera en la parte superior al hacer scroll */
.presupuesto-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--input-bg);
}

.presupuesto-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 900px;
}

.presupuesto-table th {
    background: var(--input-bg);
    padding: 15px 20px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--card-border);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.presupuesto-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
    color: var(--text-primary);
}

/* === ETIQUETAS DE TIPO (Ingreso / Gasto) === */
.pres-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pres-badge.income {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.pres-badge.expense {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

/* === BOTONES DE ACCIÓN === */
.btn-saldar {
    background: rgb(0, 150, 136);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;

    justify-content: center !important;
    font-size: 1rem !important;
}

.btn-saldar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

/* === ESTADO PAGADO (Grisado visual) === */
.tr-paid {
    background-color: rgba(16, 185, 129, 0.04);
}

.paid-amount-text {
    font-weight: 900;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.paid-amount-text span {
    font-size: 0.75rem;
    color: var(--success-color);
    font-weight: 700;
    margin-top: 2px;
}

/* === Opciones de segmentación en el Modal (Ingreso/Gasto) === */
#pres-tipo-ingreso:checked + label { 
    background: rgba(16, 185, 129, 0.15); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
#pres-tipo-gasto:checked + label { 
    background: rgba(239, 68, 68, 0.15); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

/* === ETIQUETAS DE ESTADO DE PAGO (ESTILO PASTILLA) === */
.pres-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    background: transparent;
}

.status-overdue {
    color: var(--danger-color);
    border: 1.5px solid var(--danger-color);
}

.status-today {
    color: #f97316; /* Naranja vibrante para "Vence Hoy" */
    border: 1.5px solid #f97316;
}

.status-ok {
    color: var(--success-color);
    border: 1.5px solid var(--success-color);
}

.status-neutral {
    color: var(--text-secondary);
    border: 1.5px solid var(--text-secondary);
}

/* Faltan 1-3 días: aviso antes de que se convierta en "Vence hoy" */
.status-soon {
    color: #d97706;
    border: 1.5px solid #d97706;
    background: rgba(217, 119, 6, 0.08);
}

.status-overdue {
    background: rgba(220, 53, 69, 0.08);
}

.status-paid {
    color: var(--success-color);
    border: 1.5px solid transparent;
    background: rgba(25, 135, 84, 0.12);
}

/* ========================================================================= */
/* === AJUSTES DE FUENTE (MENOS GRUESA) === */
/* ========================================================================= */
.presupuesto-table th,
.pres-badge,
.pres-status,
.btn-saldar,
.paid-amount-text {
    font-weight: 700 !important; /* Bajamos de 800/900 a 600 */
}

/* ========================================================================= */
/* === TABLA A LISTA VERTICAL EN MÓVILES (ESTILO AGENDA IDÉNTICO) === */
/* ========================================================================= */
/* === ESTADO ABONO PARCIAL === */
.status-partial {
    color: var(--warning-color);
    border: 1.5px solid var(--warning-color);
}
.tr-partial {
    background-color: rgba(255, 193, 7, 0.04);
}

/* ========================================================================= */
/* === TABLA A LISTA VERTICAL EN MÓVILES (REFACORIZADA SIN !IMPORTANT) === */
/* ========================================================================= */
/* ========================================================================= */
/* === TABLA A LISTA VERTICAL EN MÓVILES (REFACORIZADA SIN !IMPORTANT) === */
/* ========================================================================= */
/* ========================================================================= */
/* ESTÁNDAR COMPARTIDO CON AGENDA: los números de esta sección (padding,
   min-height, márgenes, radios, sombra, ancho de etiqueta) son A PROPÓSITO
   idénticos a los del bloque equivalente en agenda.css
   (".agenda-table" → "TABLA A LISTA VERTICAL EN MÓVILES") para que ambas
   vistas (Agenda y Presupuesto/Gastos Fijos) se vean como el mismo sistema
   de diseño en celular. Si cambias un valor aquí, cámbialo también allá. */
/* ========================================================================= */
@media (max-width: 768px) {
    /* 1. Liberamos el contenedor para que no corte los menús */
    .presupuesto-table-wrapper {
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 170px 0;
        overflow: visible !important;
        max-height: none !important; /* <-- ESTA ES LA MAGIA QUE EVITA EL CORTE */
    }

    .presupuesto-table thead {
        display: none;
    }

    .presupuesto-table, 
    .presupuesto-table tbody, 
    .presupuesto-table tr, 
    .presupuesto-table td {
        display: block;
        width: 100%;
        min-width: 0; 
        box-sizing: border-box;
    }

    .presupuesto-table tr {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1.1rem;
        border: 1px solid var(--card-border);
        border-radius: 14px;
        background: var(--card-bg);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        padding: 0;
        position: relative;
        overflow: visible !important; /* <-- Aseguramos que sea visible */
        z-index: 1; 
    }

    .presupuesto-table tr:focus-within,
    .presupuesto-table tr:hover {
        z-index: 50 !important;
    }

    .presupuesto-table td {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        position: relative;
        padding: 12px 15px 12px 42%;
        /*border-bottom: 1px dashed rgba(0,0,0,0.05);*/
        text-align: right;
        min-height: 42px;
    }

    .presupuesto-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 38%;
        text-align: left;
        font-weight: 800;
        color: var(--text-secondary);
        font-size: 0.72rem;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .presupuesto-table td > strong,
    .presupuesto-table td > div {
        display: block;
        text-align: right;
        width: 100% !important;
        word-break: break-word;
    }

    .presupuesto-table td > span {
        display: inline-block;
        text-align: right;
        width: auto;
        margin-left: auto;
    }

    /* "Vencido hace 120 días" puede no caber en 360px: se deja partir en dos líneas */
    .presupuesto-table .pres-status {
        white-space: normal;
        max-width: 100%;
        text-align: center;
        line-height: 1.25;
    }

    /* 8. Botonera Inferior Compartida */
.presupuesto-table td[data-label="Acciones"] {
    width: 100% !important;
    padding: 12px 15px !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.presupuesto-table td[data-label="Acciones"]::before {
    display: none !important;
}

.presupuesto-table td[data-label="Acciones"] > div {
    width: 100% !important;
}

.presupuesto-table td[data-label="Acciones"] button.btn-saldar,
.presupuesto-table td[data-label="Acciones"] button.btn-pay {
    flex-grow: 1 !important;
    justify-content: center !important;
    height: 46px !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
}

.presupuesto-table td[data-label="Acciones"] .pres-menu-container {
    width: 46px !important;
    height: 46px !important;
    flex-shrink: 0 !important;
}

.presupuesto-table td[data-label="Acciones"] .pres-menu-btn {
    width: 46px !important;
    height: 46px !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 150, 136, 0.4) !important;
    color: rgb(0, 150, 136) !important;
    background: rgba(0, 150, 136, 0.05) !important;
    border-radius: 8px !important;
}
}

/* ========================================================================= */
/* === MENÚ DE OPCIONES DE GASTOS FIJOS (MOTOR PROPIO E INDEPENDIENTE) === */
/* ========================================================================= */
/* Estos estilos son necesarios porque .pres-fix-menu / .pres-dropdown-item
   ya NO comparten nombre de clase con el motor de menús de calendar.js
   (.options-menu-btn / .options-dropdown / .options-dropdown-item). Antes
   se aprovechaban "gratis" los estilos base de calendar.css/style.css,
   pero eso hacía que el listener global de calendar.js (fase de captura)
   también interceptara los clics de Gastos Fijos, rompiendo el menú y
   disparando un salto de scroll al tope de la página. Con clases propias,
   Gastos Fijos necesita sus propios estilos base de mostrar/ocultar y hover
   (mismo criterio ya usado en Agenda). */

.pres-fix-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.pres-fix-menu.active {
    display: block;
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.2s ease forwards;
}

.pres-dropdown-item {
    padding: 10px 15px;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pres-dropdown-item:hover,
.pres-dropdown-item:hover svg {
    background-color: var(--hover-bg);
    color: var(--primary-color) !important;
}

@media (hover: none) {
    .pres-menu-btn:hover,
    .pres-dropdown-item:hover {
        background-color: transparent !important;
        transform: none !important;
    }

    .pres-fix-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .pres-fix-menu.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}