/* ==========================================================
   PAGE SPECIFIC STYLES
   Estilos específicos para páginas individuales
   Este archivo se carga DESPUÉS de styles_new.css
========================================================== */

/* ==========================================================
   COLUMNA CONTABILIZA — checkbox en tabla Cuentas (type=L)
========================================================== */
.col-contabiliza {
    text-align: center !important;
    width: 90px;
    vertical-align: middle !important;
}

.col-contabiliza input[type="checkbox"] {
    accent-color: var(--brand-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ==========================================================
   INLINE EDIT — campos editables en tabla (type=L)
========================================================== */
.inline-edit-input {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 3px 4px;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    cursor: text;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}

.inline-edit-input:hover {
    border-bottom-color: var(--obj-salmon-486);
    background: rgba(206, 14, 45, 0.03);
}

.inline-edit-input:focus {
    border-bottom: 2px solid var(--brand-primary);
    background: rgba(206, 14, 45, 0.05);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 2px 0 0 rgba(206, 14, 45, 0.15);
}

/* ==========================================================
   DASHBOARD
========================================================== */
.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Centrar cuando solo hay una tarjeta */
.dashboard-main-grid:has(> :only-child) {
    grid-template-columns: 1fr;
    max-width: calc((100% - 3rem) / 3);
    margin-left: auto;
    margin-right: auto;
}

.dashboard-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-assets-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

/* ============================================================
   KPI CARDS — Paleta brandbook / Autoridad Editorial Financiera
   Liquidez = Salmón 486 · Rentabilidad/Patrimonio = Gris 432
   Seguridad/Inmuebles = Rojo Objettiva (ya en text-purple-vivid)
============================================================ */

/* Todas las tarjetas: borde sutil uniforme + acento superior de 3px */
.category-card-liquidez,
.category-card-rentabilidad,
.category-card-seguridad {
    background: white !important;
    border: 1px solid #CFD2D3 !important;
    border-radius: 1rem !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Barra de acento superior por categoría */
.category-card-liquidez::before,
.category-card-rentabilidad::before,
.category-card-seguridad::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
}

/* Liquidez: Salmón 486 (evoca movimiento cálido de capital) */
.category-card-liquidez::before {
    background: #EE907B !important;
}

/* Patrimonio / Rentabilidad: Gris 432 (profundo, autoridad) */
.category-card-rentabilidad::before {
    background: #323E48 !important;
}

/* Seguridad / Inmuebles: Rojo Objettiva (decisión, solidez) */
.category-card-seguridad::before {
    background: #CE0E2D !important;
}

/* Inner cards should have subtle gray background */
.category-card-liquidez .card,
.category-card-rentabilidad .card,
.category-card-seguridad .card {
    background-color: #f8f9fa !important;
    border: none !important;
}

/* Dashboard responsive */
@media (max-width: 1024px) {
    .dashboard-category-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-assets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .dashboard-assets-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard text sizes + tipografía editorial */
.dashboard-title {
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: 700;
    font-family: var(--font-heading) !important;
    letter-spacing: -0.01em;
}

.dashboard-subtitle {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
}

.dashboard-amount {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
}

.dashboard-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Dashboard icons - small arrows */
.dashboard-arrow {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0;
}

.dashboard-big-arrow {
    width: 2.5rem !important;
    height: 2.5rem !important;
    flex-shrink: 0;
}

/* Dashboard spacing */
.dashboard-card {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

/* Category cards specific styling - force center alignment */
.category-card-liquidez .p-6,
.category-card-rentabilidad .p-6,
.category-card-seguridad .p-6 {
    text-align: center !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.category-card-liquidez .px-6,
.category-card-rentabilidad .px-6,
.category-card-seguridad .px-6 {
    text-align: center !important;
    width: 100%;
}

.category-card-liquidez .text-3xl,
.category-card-rentabilidad .text-3xl,
.category-card-seguridad .text-3xl {
    text-align: center !important;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Force center for titles in categories */
.category-card-liquidez h3,
.category-card-rentabilidad h3,
.category-card-seguridad h3,
.category-card-liquidez h4,
.category-card-rentabilidad h4,
.category-card-seguridad h4 {
    text-align: center !important;
    width: 100%;
    display: block;
}

/* Force center alignment for main dashboard metrics */
.dashboard-main-grid .dashboard-card {
    text-align: center !important;
}

.dashboard-main-grid .dashboard-card .text-center {
    text-align: center !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dashboard-main-grid .dashboard-card h2,
.dashboard-main-grid .dashboard-card p,
.dashboard-main-grid .dashboard-card .dashboard-title,
.dashboard-main-grid .dashboard-card .dashboard-label {
    text-align: center !important;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Center the variation display with arrow */
.dashboard-main-grid .dashboard-card .flex {
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

/* Hover solo para las tarjetas clickables de categorías (Liquidez, Rentabilidad, Seguridad) */
.category-card-liquidez:hover,
.category-card-rentabilidad:hover,
.category-card-seguridad:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dashboard-metric-card {
    padding: 1.5rem;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.2s ease;
}

.dashboard-inner-card {
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================
   PATRIMONIO / ACTIVOS
========================================================== */
.patrimony-listing-container {
    max-width: 1400px;
    margin: 0 auto;
}

.patrimony-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.subcategory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--muted);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.subcategory-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.subcategory-header .title-section {
    flex: 1;
}

.subcategory-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
}

/* ==========================================================
   CUENTAS BANCARIAS
========================================================== */
.bank-groups {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Empty State - Estado vacío cuando no hay cuentas */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--muted-foreground);
    opacity: 0.5;
}

.empty-state-icon svg {
    width: 80px;
    height: 80px;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.empty-state-description {
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
    max-width: 500px;
}

.empty-state-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.bank-group {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.bank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Alinear verticalmente el contenedor del logo y texto de cuentas */
.bank-header .flex.items-center {
    align-items: center !important;
    min-height: 35px !important; /* Asegurar que el contenedor tenga la altura del logo */
}

/* Centrar verticalmente el texto del contador de cuentas con el logo */
.bank-header .bank-logo + div {
    display: flex !important;
    align-items: center !important;
    height: 35px !important;
    margin: 0 !important;
}

/* Eliminar márgenes del párrafo dentro del contador de cuentas */
.bank-header .bank-logo + div p {
    margin: 0 !important;
    line-height: 35px !important;
}

.accounts-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.account-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.account-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.account-card-header {
    margin-bottom: 1rem !important;
}

.account-info .account-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
}

.account-meta {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
}

/* Sync Badges */
.sync-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

.sync-badge-auto {
    background: #dcfdf7 !important;
    color: #0f766e !important;
}

.sync-badge-manual {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* Balance Section */
.account-card-body {
    margin-bottom: 1.5rem !important;
}

.balance-section {
    padding: 1rem !important;
    background: var(--muted) !important;
    border-radius: 0.5rem !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
}

.balance-label {
    font-size: 0.875rem !important;
    color: var(--muted-foreground) !important;
    margin-bottom: 0.25rem !important;
    text-align: center !important;
}

.balance-amount {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
    text-align: center !important;
}

.last-update {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.75rem !important;
    color: var(--muted-foreground) !important;
}

.last-update .icon {
    width: 1rem !important;
    height: 1rem !important;
}

.account-card-actions {
    border-top: 1px solid var(--border) !important;
    padding-top: 1rem !important;
    margin-top: 1rem !important;
}

.additional-actions {
    margin-top: 3rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid var(--border) !important;
}

.action-card {
    background: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 1.5rem !important;
    text-align: center !important;
}

.action-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    margin-bottom: 0.5rem !important;
}

.action-description {
    color: var(--muted-foreground) !important;
    margin-bottom: 1rem !important;
}

/* ==========================================================
   BANK LOGOS - ESTILOS GLOBALES
========================================================== */
/* Estilos base para logos de bancos (usados en múltiples páginas) */
.bank-logo {
    width: 90px !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    display: block !important; /* Cambiado de inline-block a block para mejor compatibilidad con flexbox */
    flex-shrink: 0 !important;
    mix-blend-mode: multiply !important;
}

/* ==========================================================
   VINCULAR CUENTAS - BANK LOGOS
========================================================== */
/* Contenedor para logos en página de vincular cuentas */
.bank-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 35px;
}

/* ==========================================================
   TESORERÍA / MOVIMIENTOS BANCARIOS
========================================================== */
.treasury-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Account Header */
.account-header {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.account-info-section {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 2rem !important;
    flex-wrap: nowrap !important;
}

.account-details {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex: 1 !important;
    gap: 2rem !important;
    min-width: 0 !important;
}

.account-name {
    flex: 1 !important;
    min-width: 0 !important;
}

.account-name h2 {
    margin-bottom: 0.5rem !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
}

.account-name p {
    margin: 0 !important;
    color: var(--muted-foreground) !important;
    font-size: 0.875rem !important;
}

.account-balance {
    text-align: right !important;
    flex-shrink: 0 !important;
}

.balance-label {
    font-size: 0.875rem !important;
    color: var(--muted-foreground) !important;
    margin-bottom: 0.25rem !important;
    text-align: right !important;
}

.balance-amount {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
    text-align: right !important;
}

.header-actions {
    flex-shrink: 0 !important;
}

.header-actions .btn-secondary,
.header-actions .ui-button {
    width: auto !important;
    min-width: auto !important;
    white-space: nowrap !important;
}

/* Stats Section */
.stats-section {
    margin-bottom: 2rem !important;
}

.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
}

.stat-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.stat-icon {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.stat-icon-movements {
    background: #e0f2fe !important;
    color: #0277bd !important;
}

.stat-icon .icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.stat-content {
    flex: 1 !important;
}

.stat-value {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
    margin-bottom: 0.25rem !important;
}

.stat-label {
    font-size: 0.875rem !important;
    color: var(--muted-foreground) !important;
}

/* Filters Section */
.filters-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.filters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
}

/* Movements Section */
.movements-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.movements-table-container {
    margin-top: 1rem;
}

.movements-table-container .modern-table {
    background: transparent;
    border: none;
}

.movement-description {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.movement-name {
    font-weight: 500;
    color: var(--foreground);
}

.movement-concept {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    font-style: italic;
}

.movement-type {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.movement-type.amount-positive {
    background: #dcfdf7;
    color: #0f766e;
}

.movement-type.amount-negative {
    background: #fef2f2;
    color: #dc2626;
}

.movement-amount {
    font-weight: 600;
    text-align: right;
}

.movement-amount.amount-positive {
    color: #059669;
}

.movement-amount.amount-negative {
    color: #dc2626;
}

/* Column Specific Widths */
.date-column {
    width: 120px;
}

.description-column {
    width: auto;
    min-width: 200px;
}

.type-column {
    width: 100px;
    text-align: center;
}

.amount-column {
    width: 120px;
    text-align: right;
}

.balance-column {
    width: 100px;
    text-align: right;
}

/* Responsive Design for Movements */
@media (max-width: 1024px) {
    .filters-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .filter-actions {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .account-info-section {
        flex-direction: column;
        gap: 1.5rem;
    }

    .account-details {
        flex-direction: column;
        gap: 1rem;
    }

    .account-balance {
        text-align: left;
    }

    .filters-grid {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        flex-direction: column;
    }
}

/* ==========================================================
   DIAGNÓSTICO
========================================================== */
.diagnostico-container {
    max-width: 1200px;
    margin: 0 auto;
}

.diagnostico-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--muted);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--obj-black) 0%, var(--obj-gray-432) 100%);
    transition: width 0.3s ease;
}

/* ==========================================================
   INFORMES
========================================================== */
.report-container {
    max-width: 1400px;
    margin: 0 auto;
}

.chart-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.metric-cards-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: 2rem;
}

/* ==========================================================
   LOGIN / REGISTRO
========================================================== */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--obj-black) 0%, var(--obj-gray-432) 100%);
}

.auth-card {
    background: white;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 450px;
    width: 100%;
}

.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ==========================================================
   FORMULARIOS / AÑADIR ACTIVOS
========================================================== */
.category-section {
    margin-bottom: 2rem;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.category-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.category-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.category-description {
    color: var(--muted-foreground);
    margin: 0;
    font-size: 0.8125rem;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.asset-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.asset-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.asset-card-content {
    margin-bottom: 0.75rem;
}

.asset-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.375rem 0;
    line-height: 1.3;
}

.asset-card p {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.3;
}

/* ==========================================================
   MOVIMIENTOS BANCARIOS - AUTOCOMPLETE DE CATEGORÍA
========================================================== */

/* Contenedor del autocomplete de categoría */
.category-autocomplete {
    max-width: 300px !important;
    min-width: 200px;
    width: auto !important;
}

/* Input del autocomplete */
.category-autocomplete .ui-autocomplete-input {
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
    background-color: transparent;
    transition: all 0.2s ease;
    border-radius: 4px;
    width: auto;
    min-width: 180px;
}

/* Hover sobre el input */
.category-autocomplete .ui-autocomplete-input:hover {
    background-color: var(--muted);
    border-color: var(--border);
}

/* Focus sobre el input */
.category-autocomplete .ui-autocomplete-input:focus {
    border-color: var(--brand-primary);
    background-color: var(--background);
    box-shadow: 0 0 0 3px rgba(206, 14, 45, 0.1);
    outline: none;
}

/* Panel del dropdown */
.category-autocomplete .ui-autocomplete-panel {
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: var(--background);
    z-index: 1000;
}

/* Items del autocomplete */
.category-autocomplete .ui-autocomplete-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s ease;
    cursor: pointer;
}

/* Último item sin borde inferior */
.category-autocomplete .ui-autocomplete-item:last-child {
    border-bottom: none;
}

/* Hover sobre items */
.category-autocomplete .ui-autocomplete-item:hover,
.category-autocomplete .ui-autocomplete-item-highlighted {
    background-color: var(--brand-primary);
    color: white;
}

/* Estructura interna del item */
.concept-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Nombre del concepto */
.concept-name {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25;
}

/* Subcategoría del concepto */
.concept-subcategory {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.25;
}

/* Cuando el item está en hover, cambiar color de subcategoría */
.category-autocomplete .ui-autocomplete-item:hover .concept-subcategory,
.category-autocomplete .ui-autocomplete-item-highlighted .concept-subcategory {
    color: rgba(255, 255, 255, 0.8);
}

/* Botón dropdown del autocomplete - Ocultar */
.category-autocomplete .ui-autocomplete-dropdown {
    display: none !important;
}

/* Tabla de movimientos - ajustar columna de descripción */
.description-column .movement-concept {
    margin-top: 0.25rem;
}

/* Responsive: en pantallas pequeñas, hacer el autocomplete más compacto */
@media (max-width: 768px) {
    .category-autocomplete .ui-autocomplete-input {
        font-size: 0.8125rem;
        padding: 0.25rem 0.5rem;
    }

    .category-autocomplete .ui-autocomplete-item {
        padding: 0.5rem 0.75rem;
    }

    .concept-name {
        font-size: 0.8125rem;
    }

    .concept-subcategory {
        font-size: 0.6875rem;
    }
}

/* ============================================================
   IPC proyectado (admin) - tarjetas por decada
   ============================================================ */
.ipc-nac-subtitle {
    margin-top: 0.25rem;
    margin-bottom: 1.5rem;
}

.ipc-nac-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ipc-nac-range {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--foreground);
    white-space: nowrap;
}

.ipc-nac-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.ipc-nac-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ipc-nac-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(45, 41, 38, 0.08);
}

.ipc-nac-card__year {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
}
.ipc-nac-card__value {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}

.ipc-nac-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
}
.ipc-nac-badge::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: currentColor;
}

/* Dato real -> neutro con fino filete rojo de marca (oficial INE) */
.ipc-nac-card--real {
    border-color: var(--border);
    background: var(--card);
    overflow: hidden;
}
.ipc-nac-card--real::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
}
.ipc-nac-card--real .ipc-nac-card__value {
    color: var(--foreground);
}
.ipc-nac-badge--real {
    background: rgba(206, 14, 45, 0.08);
    color: var(--primary);
}

/* Dato estimado -> gris claro, borde discontinuo (proyeccion) */
.ipc-nac-card--estimado {
    border-style: dashed;
    border-color: var(--border);
    background: #F6F6F5;
}
.ipc-nac-card--estimado .ipc-nac-card__value {
    color: var(--muted-foreground);
}
.ipc-nac-badge--estimado {
    background: transparent;
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

/* Dato estimado editado a mano por el admin */
.ipc-nac-card--manual {
    border-color: #C9A227;
}
.ipc-nac-badge--manual {
    background: rgba(201, 162, 39, 0.12);
    color: #8A6D14;
    border: 1px solid rgba(201, 162, 39, 0.45);
}

/* Input de edicion de los anhos estimados: ancho fijo para que el reformateo
   del importe no provoque reflujos horizontales dentro de la tarjeta. */
.ipc-nac-card__edit {
    display: flex;
    justify-content: center;
    width: 100%;
}
.ipc-nac-card__edit .ui-inputnumber,
.ipc-nac-card__edit .ui-inputnumber input.ui-inputfield {
    width: 6.5rem;
    max-width: 100%;
}
.ipc-nac-card__edit .ui-inputnumber input.ui-inputfield {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    padding: 0.25rem 0.4rem;
    color: var(--foreground);
}

/* La tarjeta estimada es una superficie de edicion: no se desplaza al pasar el
   cursor (el "lift" de hover, reservado a las de solo lectura, provocaba un
   bucle de temblor al editar el campo). */
.ipc-nac-card--estimado:hover {
    transform: none;
}

.ipc-nac-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.ipc-nac-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted-foreground);
}
.ipc-nac-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}
.ipc-nac-dot--real {
    background: var(--primary);
    border: 1px solid var(--primary);
}
.ipc-nac-dot--estimado {
    background: #F6F6F5;
    border: 1px dashed var(--muted-foreground);
}
.ipc-nac-dot--manual {
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid #C9A227;
}

.ipc-nac-empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--muted-foreground);
}

@media (max-width: 1100px) {
    .ipc-nac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .ipc-nac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ipc-nac-toolbar { flex-wrap: wrap; }
}
@media (max-width: 440px) {
    .ipc-nac-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ipc-nac-card { transition: none; }
    .ipc-nac-card:hover { transform: none; }
}

/* =============================================================================
   ADMIN PROYECCIONES - Tabla 4 (% de diversificacion): total por categoria
   ============================================================================= */
.div-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-weight: 600;
}
.div-total span { color: var(--muted-foreground); font-weight: 500; }
.div-total--ok { color: #16a34a; }
.div-total--warn { color: #d97706; }

/* =============================================================================
   CLIENTE - Distribucion Actual: pesos actuales vs % objetivo por franja de edad
   ============================================================================= */
.dist-card {
    padding: 0;
    overflow: hidden;
}
.dist-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--obj-surface);
}
.dist-card-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
}

.dist-body {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 2rem 1.5rem 1.75rem;
}

/* --- Columna izquierda: barras ------------------------------------------- */
.dist-caption {
    margin: 0 0 1.75rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.dist-plot {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 1.25rem;
    /* Hueco para la cifra y el importe cuando una barra llega arriba del todo */
    padding-top: 3rem;
}
.dist-col {
    flex: 1 1 0;
    max-width: 120px;
    min-width: 60px;
}
.dist-track {
    position: relative;
    height: 240px;
    display: flex;
    align-items: flex-end;
}
.dist-bar {
    width: 100%;
    height: var(--h);
    border-radius: 2px 2px 0 0;
    animation: distGrow 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: var(--delay);
}
.dist-bar--liquidez     { background-color: var(--obj-gray-431); }
.dist-bar--rentabilidad { background-color: var(--obj-red); }
.dist-bar--seguridad    { background-color: var(--obj-black); }

/* Peso actual (%) e importe, justo encima de la barra */
.dist-value {
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: var(--h);
    margin-bottom: 0.375rem;
    text-align: center;
    animation: distFade 400ms ease-out both;
    animation-delay: calc(var(--delay) + 380ms);
}
.dist-pct {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--foreground);
}
.dist-amount {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--muted-foreground);
    white-space: nowrap;
}

/* Marca del % objetivo: la referencia contra la que se lee cada barra */
.dist-goal-line {
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: var(--goal);
    border-top: 2px dashed var(--obj-gray-429);
    animation: distFade 400ms ease-out both;
    animation-delay: calc(var(--delay) + 500ms);
}

.dist-labels {
    padding-top: 0.625rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
.dist-name {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.dist-goal-text {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: var(--obj-gray-429);
}

/* --- Columna derecha: diagnostico ---------------------------------------- */
.dist-diag {
    max-width: 46ch;
}
.dist-range {
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.dist-range-chip {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    background: var(--obj-black);
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.dist-verdict {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}
.dist-verdict--warn { color: var(--obj-red); }
.dist-verdict--ok   { color: #16a34a; }
.dist-verdict-icon {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}
.dist-text {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--obj-gray-431);
}
.dist-foot {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--obj-gray-429);
}

/* --- Sin activos ---------------------------------------------------------- */
.dist-empty {
    padding: 3rem 1.5rem;
    text-align: center;
}
.dist-empty-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
}
.dist-empty-text {
    margin: 0 auto 1.5rem;
    max-width: 52ch;
    color: var(--muted-foreground);
}
.dist-empty-action {
    display: inline-block;
    text-decoration: none;
}

@keyframes distGrow {
    from { height: 0; }
    to   { height: var(--h); }
}
@keyframes distFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 900px) {
    .dist-body {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .dist-diag { max-width: none; }
}
@media (max-width: 480px) {
    .dist-track { height: 180px; }
    .dist-plot { gap: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dist-bar,
    .dist-value,
    .dist-goal-line {
        animation: none;
    }
}

/* =============================================================================
   ADMIN PROYECCIONES - % proyeccion activa: % ideal de crecimiento por categoria
   -----------------------------------------------------------------------------
   La barra de composicion es el elemento central: cada segmento es un concepto,
   su ancho es el peso (% de diversificacion) y su color, la tasa. Asi se ve de
   un vistazo que activo empuja la media y cual la frena.
   ============================================================================= */
.pa-pct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}

.pa-pct-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.pa-pct-card__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.pa-pct-card__figure {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.pa-pct-card__value {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}
.pa-pct-card__unit {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

/* Barra de composicion */
.pa-pct-bar {
    display: flex;
    height: 10px;
    margin-top: 1.25rem;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--obj-surface);
}
.pa-pct-bar__seg {
    box-sizing: border-box;
    height: 100%;
    border-right: 1px solid var(--card);
}
.pa-pct-bar__seg:last-child { border-right: 0; }

/* Rampa de intensidad: gris -> salmon -> rojo Objettiva */
.pa-pct-bar__seg--n0 { background: var(--obj-gray-427); }
.pa-pct-bar__seg--n1 { background: var(--obj-salmon-489); }
.pa-pct-bar__seg--n2 { background: rgba(206, 14, 45, 0.55); }
.pa-pct-bar__seg--n3 { background: var(--obj-red); }

.pa-pct-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.pa-pct-meta__item strong { color: var(--foreground); font-weight: 600; }
.pa-pct-meta__item--ok { color: #16a34a; font-weight: 600; }
.pa-pct-meta__item--warn { color: #d97706; font-weight: 600; }

/* Desglose */
.pa-pct-details {
    margin-top: 1rem;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}
.pa-pct-details__summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    list-style: none;
}
.pa-pct-details__summary::-webkit-details-marker { display: none; }
.pa-pct-details__summary::before {
    content: "+";
    display: inline-block;
    width: 1rem;
    font-weight: 700;
}
.pa-pct-details[open] .pa-pct-details__summary::before { content: "\2212"; }
.pa-pct-details__summary:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.pa-pct-table {
    width: 100%;
    margin-top: 0.75rem;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.pa-pct-table th {
    padding: 0.35rem 0.4rem;
    text-align: left;
    font-weight: 600;
    color: var(--muted-foreground);
    border-bottom: 1px solid var(--border);
}
.pa-pct-table td {
    padding: 0.4rem;
    border-bottom: 1px solid var(--obj-surface);
    vertical-align: top;
}
.pa-pct-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pa-pct-table__num--strong { font-weight: 600; color: var(--foreground); }
.pa-pct-table__concept { display: block; color: var(--foreground); }
.pa-pct-table__sub { display: block; font-size: 0.68rem; color: var(--muted-foreground); }

/* Categoria sin pesos repartidos */
.pa-pct-empty {
    margin-top: 1rem;
    padding: 0.75rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* Aviso de pesos incompletos */
.pa-pct-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid #d97706;
    border-radius: var(--radius);
    background: rgba(217, 119, 6, 0.07);
    font-size: 0.8rem;
    color: var(--foreground);
}
.pa-pct-alert__icon {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    color: #d97706;
}

.pa-pct-footer {
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--muted-foreground);
}
.pa-pct-footer span { display: block; }

@media (max-width: 640px) {
    .pa-pct-card { padding: 1.15rem; }
    .pa-pct-card__value { font-size: 2.25rem; }
}

/* =============================================================================
   CLIENTE - Proyeccion Activa
   -----------------------------------------------------------------------------
   El elemento central son las dos bandas. Las dos estan a la misma escala: el
   ancho de la banda de salida es su patrimonio de hoy medido contra el de
   llegada, asi que el ancho es dinero. Dentro de cada banda, los segmentos son
   el reparto, y se ve a la vez cuanto crece el total y como cambia la mezcla.

   Colores por area: los mismos que la grafica de la Proyeccion Pasiva, para que
   el cliente no tenga que reaprender el codigo de color al cambiar de pantalla.
   Salen del brandbook (globals.css), no de una paleta propia. Se definen aqui
   una sola vez y los reusan bandas y leyenda; la grafica los repite en
   ProyeccionesClienteBean, que es donde Chart.js los necesita -- alli van en
   literal porque el color viaja por JSON y no resuelve var(--obj-*).

   El armazon (category-section + category-header + tarjeta) es el mismo que el
   de la Proyeccion Pasiva; aqui solo se estila lo propio de las bandas.
   ============================================================================= */
.pact-card {
    --pact-liquidez:     var(--obj-gray-431);
    --pact-rentabilidad: var(--obj-red);
    --pact-seguridad:    var(--obj-black);
}

/* =============================================================================
   CLIENTE - Mensaje del escenario (encima de la Proyeccion Activa)
   -----------------------------------------------------------------------------
   Texto corrido, sin color de area: el mensaje habla de las tres a la vez y
   pintarlo de un color sugeriria que va de una sola. El descargo legal va en
   gris y mas pequeno porque es letra pequena de verdad, no parte del consejo.

   Los tokens usados existen en styles_new.css, que es la hoja que carga esta
   pantalla; globals.css no se carga aqui.
   ============================================================================= */
.pmsg-parrafo {
    margin: 0;
    color: var(--obj-black);
    line-height: 1.55;
}

.pmsg-puntos {
    margin: 0.85rem 0 0;
    padding-left: 1.15rem;
    list-style: disc;
    color: var(--obj-black);
}
.pmsg-puntos li {
    margin-bottom: 0.5rem;
    line-height: 1.55;
}
.pmsg-puntos li:last-child { margin-bottom: 0; }

/* Separado del consejo: es una invitacion, no una recomendacion mas. */
.pmsg-cierre {
    margin: 1.1rem 0 0;
    color: var(--obj-black);
    line-height: 1.55;
}

.pmsg-descargo {
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--obj-gray-427);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--obj-gray-431);
}

/* --- Formulario: importe y accion, juntos y al tamano que les toca ---------
   .btn-primary trae width:100%, pensado para llenar una tarjeta estrecha. Aqui
   la tarjeta ocupa toda la fila, asi que el boton se ajusta a su texto: la
   accion no debe pesar mas que el contenido de la pantalla. */
.pact-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.pact-form-row .pact-input { width: 12rem; }
.pact-form-row .pact-input input { width: 100%; }
.pact-form-row .ui-button {
    width: auto;
    min-width: 12rem;
}

/* Aviso de patrimonio neto negativo */
.pact-note {
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--obj-red);
    background: var(--obj-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--obj-gray-431);
}

/* --- Las dos bandas -------------------------------------------------------- */
.pact-bands {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.pact-band-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: center;
    gap: 1rem;
}
.pact-band-meta {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.pact-band-year {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
}
.pact-band-total {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--foreground);
}
.pact-band-total--fin { color: var(--obj-red); }

/* La pista da la referencia del 100%: sin ella, la banda corta flotaria sin
   escala y el crecimiento no se leeria. */
.pact-band-track {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
}
.pact-band {
    display: flex;
    height: 44px;
    border-radius: 3px;
    overflow: hidden;
}
.pact-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    transform-origin: left center;
    animation: pactGrow 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}
.pact-seg--liquidez     { background-color: var(--pact-liquidez); }
.pact-seg--rentabilidad { background-color: var(--pact-rentabilidad); }
.pact-seg--seguridad    { background-color: var(--pact-seguridad); }

/* Texto blanco: los tres colores de marca son oscuros (contraste sobre blanco
   5.9 en liquidez, 5.6 en rentabilidad y 14.4 en seguridad, todos por encima
   del 4.5 de WCAG AA). En negro la cifra no se leia en ninguno, y sobre
   seguridad desaparecia del todo por ser exactamente el mismo --obj-black.

   El blanco va en literal a proposito: esta pantalla carga styles_new.css, no
   globals.css, y ese :root es una copia parcial del brandbook donde faltan
   --obj-white, --obj-warm-red y --obj-salmon-486. Con var(--obj-white) la
   declaracion es invalida y el color cae al heredado -- otra vez el negro. */
.pact-seg-pct {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    white-space: nowrap;
}

@keyframes pactGrow {
    from { transform: scaleX(0); opacity: 0.4; }
    to   { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 640px) {
    .pact-band-row { grid-template-columns: 1fr; gap: 0.35rem; }
    .pact-band-meta { flex-direction: row; align-items: baseline; gap: 0.5rem; text-align: left; }
    .pact-band { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .pact-seg { animation: none; }
}

/* ==========================================================================
   Pantalla de cliente "Proyecciones" (/usuario/proyecciones.xhtml)
   Amplia el bloque .pact-* de la antigua Proyeccion Activa, que se reutiliza
   tal cual para las bandas del punto de partida.
   ========================================================================== */

/* El icono del bloque comparativo va en el rojo de marca: es el unico que
   habla de la diferencia entre las dos proyecciones, no de una de ellas. */
.bg-red-vivid {
    background-color: var(--obj-red);
}

/* Pie de cada banda: dice de que situacion habla, porque "Hoy" y el anho final
   no se leen a la misma escala de tiempo. */
.pact-band-note {
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--obj-gray-429);
}

/* Accesos directos a cada bloque. Hacen el trabajo de unas pestanhas -llegar
   rapido- sin esconder el resto de la pagina. */
.pact-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pact-jump {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--obj-gray-427);
    border-radius: 999px;
    background-color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--obj-gray-431);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.pact-jump:hover,
.pact-jump:focus-visible {
    border-color: var(--obj-red);
    color: var(--obj-red);
}

.pact-jump:focus-visible {
    outline: 2px solid var(--obj-red);
    outline-offset: 2px;
}

/* El salto tiene que dejar el titulo del bloque a la vista, no debajo del
   header fijo. */
#pasiva, #partida, #activa, #comparativa {
    scroll-margin-top: 5rem;
}

/* Sin proyeccion todavia: una invitacion, no cuatro tarjetas vacias. */
.pact-empty {
    padding: 1.5rem;
    border: 1px dashed var(--obj-gray-427);
    border-radius: 0.5rem;
    background-color: var(--obj-surface);
    color: var(--obj-gray-431);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* La celda del boton dentro del asset-grid: centrado y a la altura de los
   campos, que son mas altos por su pregunta de dos lineas. */
.pact-submit-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60px;
}

/* La cunha entre las dos lineas es el dato del bloque, asi que la tarjeta se
   marca en rojo para que no se lea como una grafica mas. */
.pact-compare {
    border-color: var(--obj-red) !important;
}

@media (prefers-reduced-motion: reduce) {
    .pact-jump { transition: none; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   Tablas de proyeccion del admin (admin/proyecciones/proyeccion.xhtml)
   Las reglas globales de .ui-inputfield y .btn-secondary llevan !important y
   width: 100 %, asi que aqui hay que pisarlas con la misma fuerza.
   ========================================================================== */

/* Botones que van al lado de un titulo: mismo boton que en el resto de
   la web (altura 3rem, primario rojo / secundario gris), pero a su ancho
   natural en vez del 100 % de .btn-secondary. */
.tp-btn.btn-secondary,
.tp-btn.btn-primary {
    width: auto !important;
    padding: 0 1.25rem !important;
    white-space: nowrap;
}

/* Avisos: cosas que revisar antes de dar la tabla por buena, no errores.
   Un solo bloque con un margen rojo, para que tres avisos no parezcan
   tres fallos. */
.tp-avisos {
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-radius: var(--radius, 0.5rem);
    border-left: 4px solid var(--obj-red);
    background-color: var(--obj-surface);
    color: var(--foreground);
    font-size: 0.875rem;
}

.tp-avisos-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.tp-avisos-titulo .pi {
    color: var(--obj-red);
}

.tp-avisos-lista {
    margin: 0;
    padding-left: 1.25rem;
    max-width: 90ch;
}

.tp-avisos-lista li + li {
    margin-top: 0.2rem;
}

.tp-subtitulo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
}

.tp-leyenda {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    margin: -0.25rem 0 0.75rem 0;
    max-width: 72ch;
}

/* Cinco anhos con importe y % necesitan ~62rem: por debajo la tabla se
   desplaza en horizontal en vez de aplastar los importes. */
.tp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tp-reticula {
    min-width: 62rem;
}

/* La fila de anhos se queda pegada arriba mientras se recorre su bloque: con
   200 activos, sin ella no se sabe que columna es que anho. Solo puede
   funcionar si ningun contenedor intermedio es de scroll: por eso en pantallas
   anchas .tp-scroll deja de recortar y el main recorta con clip, no hidden. */
.main-content-with-sidebar.tp-main {
    overflow-x: clip;
}

@media (min-width: 1360px) {
    .tp-scroll {
        overflow: visible;
    }

    .tp-anios-tabla {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #fff;
        box-shadow: 0 1px 0 var(--border);
    }

    .tp-tabla.tp-propuestas thead th {
        position: sticky;
        top: 0;
        z-index: 3;
    }
}

.tp-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background-color: var(--obj-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.tp-badge-propuesta {
    background-color: var(--obj-gray-431);
}

/* Cabecera: nombre y meta a la izquierda, selector de tabla en medio y
   acciones a la derecha; en estrecho se apilan en ese orden. */
.tp-cabecera {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.tp-cabecera-titulo {
    flex: 1 1 18rem;
}

.tp-acciones {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Selector Pasiva / Activa: control segmentado, no botones de accion. La
   opcion activa va en gris 432, para que el unico rojo sea Guardar. Cada
   opcion lleva la evolucion del patrimonio de su tabla, que es el dato con
   el que se comparan las dos. Son commandLink (un boton solo pinta su
   value), asi que no arrastran las reglas globales de .ui-button. */
.tp-segmento {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.5rem);
    overflow: hidden;
}

.tp-segmento a.tp-segmento-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 8rem;
    padding: 0.45rem 1rem;
    background: #fff;
    color: var(--obj-gray-431);
    text-decoration: none;
    line-height: 1.2;
}

.tp-segmento a.tp-segmento-btn + a.tp-segmento-btn {
    border-left: 1px solid var(--border);
}

.tp-segmento a.tp-segmento-btn:hover {
    background: var(--obj-surface);
    color: var(--obj-gray-432);
}

.tp-segmento a.tp-segmento-btn.tp-activo,
.tp-segmento a.tp-segmento-btn.tp-activo:hover {
    background: var(--obj-gray-432);
    color: #fff;
    cursor: default;
}

.tp-segmento a.tp-segmento-btn:focus-visible {
    outline: 2px solid var(--obj-red);
    outline-offset: -2px;
}

.tp-segmento-nombre {
    font-size: 0.75rem;
    font-weight: 400;
}

.tp-segmento-cifra {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tp-concepto {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* Dialogo de alta: el panel de conceptos no puede ser mas ancho que el
   campo (450px de dialogo menos 1.5rem de margen por lado), y la ayuda
   bajo la tasa va en el mismo gris pequeno que el resto de pistas. */
.tp-panel-conceptos {
    max-width: calc(450px - 3rem);
}

.tp-panel-conceptos .ui-selectonemenu-items-wrapper {
    max-height: 18rem !important;
}

.tp-ayuda {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

.tp-fila-resultado {
    font-style: italic;
    color: var(--muted-foreground);
}

/* Cada anho es una celda con el importe arriba y el % debajo, a la derecha,
   como en el informe. */
.tp-celda {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.tp-tabla .tp-importe,
.tp-tabla .tp-pct {
    display: block;
}

.tp-tabla .tp-importe { width: 100%; }
.tp-tabla .tp-pct     { width: 5.5rem; }

.tp-tabla .tp-importe input.ui-inputfield,
.tp-tabla .tp-pct input.ui-inputfield {
    width: 100% !important;
    height: 2rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.8rem !important;
    text-align: right;
    background: #fff !important;
}

.tp-tabla .tp-pct input.ui-inputfield {
    height: 1.6rem !important;
    font-size: 0.72rem !important;
    color: var(--muted-foreground);
    background: var(--obj-surface) !important;
}

/* Fila derivada (resultado acumulado): se lee como texto, no como campo. */
.tp-tabla .tp-importe input.ui-inputfield:disabled,
.tp-tabla .tp-pct input.ui-inputfield:disabled {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--muted-foreground);
    font-style: italic;
    opacity: 1;
}

.tp-tabla .tp-importe.tp-negativo input.ui-inputfield {
    color: var(--obj-red) !important;
}

/* Las dataTables van sin el marco redondeado ni la sombra de .modern-table:
   son filas de la misma reticula que los totales, no una caja dentro de
   ella. */
.tp-tabla.modern-table {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.tp-tabla.modern-table .ui-datatable-data tr {
    border-bottom: 1px solid var(--border) !important;
}

.tp-tabla.modern-table .ui-datatable-data tr:hover {
    background: var(--obj-surface) !important;
}

.tp-tabla .ui-datatable-data > tr > td {
    padding: 0.4rem 0.6rem !important;
    vertical-align: middle;
}

.tp-tabla .tp-col-accion {
    width: 3.25rem;
    text-align: center;
}

/* Las tablas de lineas van sin cabecera propia: la fila de anhos la pone la
   tabla de totales que las precede, como en el informe. */
.tp-tabla.tp-sin-cabecera thead {
    display: none;
}

.tp-tabla td.tp-col-nombre,
.tp-tabla th.tp-col-nombre,
.tp-totales td.tp-col-nombre {
    width: 15rem;
}

.tp-fila-wrap + .tp-tabla,
.tp-tabla + .tp-fila-wrap {
    margin-top: 0.25rem;
}

.tp-totales .tp-anios td {
    text-align: right;
    font-weight: 600;
    background-color: var(--obj-surface);
    border-top: 0;
}

.tp-tabla .tp-col-accion .action-buttons {
    display: flex;
    justify-content: center;
}

.tp-tabla .ui-datatable-empty-message td {
    font-style: normal;
    color: var(--muted-foreground);
    font-size: 0.85rem;
}

/* Filas de totales: misma reticula que la tabla de arriba (fixed + mismas
   anchuras de primera y ultima columna). */
.tp-totales {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    table-layout: fixed;
}

/* El padding derecho suma el del input (0.5rem) para que la cifra de un
   total termine en la misma vertical que la de la celda editable. */
.tp-totales td {
    padding: 0.4rem 1.1rem 0.4rem 0.6rem;
    text-align: right;
    border-top: 1px solid var(--border);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tp-totales td.tp-col-nombre {
    text-align: left;
    white-space: normal;
}

.tp-totales td.tp-col-accion { width: 3.25rem; }

.tp-totales .tp-total td {
    font-weight: 600;
    background-color: var(--obj-surface);
}

.tp-totales .tp-resultado td {
    font-weight: 700;
    border-top: 2px solid var(--foreground);
}

.tp-totales .tp-subtotal td {
    color: var(--muted-foreground);
}

.tp-totales td.tp-negativo {
    color: var(--obj-red);
}

.tp-total-patrimonio {
    margin-bottom: 1.5rem;
}

.tp-categoria {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

.tp-categoria-cabecera {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.tp-categoria-cabecera .tp-subtitulo {
    margin: 0;
}

.tp-categoria-cabecera .tp-btn {
    margin-left: auto;
}

/* Ideal / Inicial / Final: tres cifras con su etiqueta encima, en la misma
   linea que el titulo de la categoria. */
.tp-porcentajes {
    display: flex;
    gap: 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tp-porcentajes > span {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.tp-porcentajes small {
    font-weight: 400;
    color: var(--muted-foreground);
    font-size: 0.7rem;
}

.tp-porcentajes .tp-ideal {
    color: var(--obj-gray-432);
    font-weight: 700;
}

/* Nota de estado bajo la leyenda (no es un aviso del motor): icono y una frase. */
.tp-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--foreground);
    background: var(--obj-surface);
    border-left: 3px solid var(--obj-gray-432);
    max-width: 72ch;
}

.tp-nota .pi {
    margin-top: 0.1rem;
    color: var(--obj-gray-432);
}

/* ---- Propuestas especificas: una fila por concepto con dos columnas de
   texto (notas y origen). Lleva cabecera y pie propios, no la fila de anhos.
   Siete columnas mas la accion necesitan ~70rem. */
.tp-reticula-propuestas {
    min-width: 70rem;
}

.tp-tabla.tp-propuestas thead th {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.75rem !important;
    text-align: left;
    background-color: var(--obj-surface) !important;
    white-space: nowrap;
}

.tp-tabla.tp-propuestas th.tp-col-tasa,
.tp-tabla.tp-propuestas th.tp-col-importe {
    text-align: right;
}

.tp-tabla.tp-propuestas .ui-datatable-data > tr > td {
    vertical-align: top;
}

.tp-tabla.tp-propuestas td.tp-col-categoria,
.tp-tabla.tp-propuestas th.tp-col-categoria { width: 7.5rem; }
.tp-tabla.tp-propuestas td.tp-col-tasa,
.tp-tabla.tp-propuestas th.tp-col-tasa      { width: 6.5rem; }
.tp-tabla.tp-propuestas td.tp-col-importe,
.tp-tabla.tp-propuestas th.tp-col-importe   { width: 9.5rem; }

.tp-tabla.tp-propuestas td.tp-col-categoria {
    font-size: 0.85rem;
    padding-top: 0.75rem !important;
}

/* Las tasas van como el importe (misma altura), no como el % pequenho de las celdas por anho. */
.tp-tabla.tp-propuestas .tp-col-tasa .tp-pct { width: 100%; }
.tp-tabla.tp-propuestas .tp-col-tasa .tp-pct input.ui-inputfield {
    height: 2rem !important;
    font-size: 0.8rem !important;
    color: inherit;
    background: #fff !important;
}

/* Notas y origen: texto libre en area de tres lineas, a la anchura de la columna. */
.tp-tabla.tp-propuestas .tp-texto {
    width: 100%;
    min-width: 14rem;
    min-height: 4.6rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.35;
    resize: vertical;
    background: #fff;
}

/* Pie: el total propuesto bajo la columna de importe, como la fila de totales de las otras tablas. */
.tp-tabla.tp-propuestas tfoot td {
    padding: 0.4rem 1.1rem 0.4rem 0.6rem !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    border-top: 1px solid var(--border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    font-variant-numeric: tabular-nums;
}

.tp-tabla.tp-propuestas tfoot td.tp-col-importe {
    text-align: right;
    white-space: nowrap;
}