/* Calculadora Cap Rate - Estilos específicos */

/* Utility classes extracted from inline styles */
.icon-valign-middle {
    vertical-align: middle;
}

.icon-valign-bottom {
    vertical-align: bottom;
}

.select-freq {
    max-width: 120px;
}

.select-currency {
    max-width: 100px;
}

.slider-range {
    flex: 1;
}

.slider-value {
    width: 80px;
    text-align: center;
}

.icon-btn-sm {
    font-size: 18px;
    margin-right: 5px;
}

.icon-btn-md {
    margin-right: 8px;
}

.icon-btn-send {
    margin-right: 5px;
}

/* Layout principal 70/30 */
.calculator-layout {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: var(--graf-spacing-xl);
    margin: var(--graf-spacing-xl) 0;
    align-items: start;
}

/* Sidebar de indicadores — must come BEFORE the media query so mobile override wins */
.macro-sidebar {
    position: sticky;
    top: calc(72px + var(--graf-spacing-lg));
}

@media (max-width: 992px) {
    .calculator-layout {
        grid-template-columns: 1fr;
    }

    .macro-sidebar {
        position: static;
        order: -1;
        margin-bottom: var(--graf-spacing-xl);
    }
}

.indicators-grid {
    display: flex;
    flex-direction: column;
    gap: var(--graf-spacing-md);
}

.indicator-item {
    display: flex;
    align-items: flex-start;
    gap: var(--graf-spacing-md);
    padding: var(--graf-spacing-md);
    background-color: var(--graf-warm-100);
    border-radius: var(--graf-border-radius);
    border-left: 4px solid transparent;
    transition: var(--graf-transition);
}

.indicator-item[data-status="current"] {
    border-left-color: var(--graf-success);
}

.indicator-item[data-status="fallback"],
.indicator-item[data-status="historical"] {
    border-left-color: var(--graf-warning);
}

.indicator-item[data-status="default"] {
    border-left-color: var(--graf-danger);
}

.indicator-icon {
    font-size: 1.5rem;
    min-width: 30px;
}

.indicator-content h3 {
    margin: 0 0 0.25rem;
    font-size: var(--graf-font-size-sm);
    color: var(--graf-warm-800);
    font-weight: var(--graf-font-weight-semibold);
}

.indicator-value {
    font-weight: var(--graf-font-weight-bold);
    font-size: var(--graf-font-size-lg);
    color: var(--graf-primary);
    display: block;
}

.indicator-date {
    font-size: var(--graf-font-size-xs);
    color: var(--graf-text-secondary);
    display: block;
}

.indicator-warning {
    font-size: var(--graf-font-size-xs);
    color: var(--graf-warning);
    font-style: italic;
    display: block;
    margin-top: 0.25rem;
}

.indicator-source {
    font-size: var(--graf-font-size-xs);
    color: var(--graf-text-secondary);
    font-style: italic;
    display: block;
    margin-top: 0.25rem;
}

.premium-risk {
    background: linear-gradient(135deg, var(--graf-warning-light, #fff3cd), var(--graf-warning-lighter, #ffeaa7));
}

.source-info {
    margin-top: var(--graf-spacing-md);
    padding-top: var(--graf-spacing-md);
    border-top: 1px solid var(--graf-border);
    font-size: var(--graf-font-size-xs);
    color: var(--graf-text-secondary);
}

/* Tabla de Gastos */
.expense-table-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem;
    border-bottom: 2px solid var(--graf-warm-100);
    padding-bottom: 0.5rem;
}

.expense-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--graf-surface);
    border-radius: var(--graf-border-radius);
    border: 1px solid var(--graf-border);
    margin-bottom: 0.5rem;
    transition: var(--graf-transition);
}

.expense-row:hover {
    border-color: var(--graf-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Force inputs to fit their containers */
.expense-row .graf-form-control {
    width: 100% !important;
    height: 38px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.9rem;
    min-width: 0;
    /* Flexbox fix */
}

/* Columna Labels for Mobile */
.expense-row label {
    display: none;
    font-size: 0.75rem;
    color: var(--graf-text-secondary);
    margin-bottom: 0.25rem;
}

/* Defines widths relative to each other */
.expense-col-concept {
    flex: 3;
    min-width: 150px;
}

.expense-col-amount {
    flex: 1.5;
    min-width: 100px;
}

.expense-col-freq {
    flex: 1.2;
    min-width: 90px;
}

.expense-col-curr {
    flex: 0.8;
    min-width: 70px;
}

.expense-col-vacant {
    flex: 0.8;
    display: flex;
    justify-content: center;
}

/* Checkbox centered */
.expense-col-imputable {
    flex: 1.5;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.expense-col-actions {
    flex: 0 0 40px;
    display: flex;
    justify-content: flex-end;
}

/* Fix specific input types size */
.expense-row input[type="checkbox"],
.expense-row input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    cursor: pointer;
    accent-color: var(--graf-primary);
}

/* Radio buttons container styling */
.radio-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 4px;
}

.radio-group span {
    font-size: 16px !important;
    margin-top: 2px;
    color: var(--graf-text-secondary);
}

/* Highlight selected radio group icon */
.radio-group input:checked+span {
    color: var(--graf-primary);
    font-weight: bold;
}

@media (max-width: 768px) {
    .expense-table-header {
        display: none !important;
    }

    .expense-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.25rem;
        position: relative;
    }

    .expense-row>div {
        width: 100%;
        min-width: 0;
    }

    .expense-row label {
        display: block;
    }

    /* Adjust checkbox/radio containers on mobile */
    .expense-col-vacant,
    .expense-col-imputable {
        justify-content: flex-start;
    }

    .expense-col-actions {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: auto;
    }
}

/* Resultados Layout Refinado */
.results-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.result-main-card {
    background-color: var(--graf-primary);
    background: linear-gradient(135deg, var(--graf-primary), var(--graf-primary-dark, #00363a));
    color: var(--graf-white);
    padding: 2rem;
    border-radius: var(--graf-border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    box-shadow: var(--graf-shadow-lg);
    text-align: left;
}

.result-icon-large {
    background: rgba(255, 255, 255, 0.2);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-value-large {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.result-label-large {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Cards de Detalles */
.result-detail-card {
    background: var(--graf-surface);
    padding: 1.5rem;
    border-radius: var(--graf-border-radius);
    box-shadow: var(--graf-shadow-sm);
    text-align: center;
    border: 1px solid var(--graf-border);
    transition: var(--graf-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--graf-shadow-md);
    border-color: var(--graf-primary-light);
}

.detail-label {
    font-size: 0.9rem;
    color: var(--graf-text-secondary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.detail-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.value-positive {
    color: var(--graf-success);
}

.value-negative {
    color: var(--graf-danger);
}

.value-neutral {
    color: var(--graf-warning);
}

/* Trace Section */
.calculation-trace {
    background-color: var(--graf-bg-light);
    border: 1px dashed var(--graf-border);
    border-radius: var(--graf-border-radius);
    padding: 1.5rem;
}

.trace-step {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    color: var(--graf-body-color);
}

.trace-step.total {
    border-top: 2px solid var(--graf-border);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
}

.trace-step.operator {
    color: var(--graf-text-secondary);
    margin-right: 0.5rem;
}

/* Glosario Grid Refinement */
.glossary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.glossary-list dt {
    color: var(--graf-primary);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.glossary-list dd {
    font-size: 0.95rem;
    color: var(--graf-text-secondary);
    line-height: 1.6;
    margin-left: 0;
}

/* Print Styles - Corrected for Red Square Restriction & No Blank Pages */
@media print {

    /* 1. Reset Root */
    html,
    body {
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    /* 2. Hide Everything Not Relevant */
    body>* {
        display: none !important;
    }

    /* 3. Restore Visibility for Parents leading to #results-container */
    /* Wait, we can't show parents if we hid strict body > *. 
       Instead, we use a technique where we hide specific top-level blocks.
    */
    header,
    footer,
    aside,
    nav,
    .macro-sidebar,
    .top-bar-menu,
    .header-widget,
    #header-container,
    #header,
    #footer,
    .graf-alert,
    .faq-section,
    #cap-rate-form {
        display: none !important;
    }

    /* 4. Restore the container chain */
    #main-content,
    main,
    .container,
    .graf-row,
    .graf-col-md-9,
    .calculator-layout,
    .graf-card,
    .graf-card-body {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: static !important;
        /* Let flow naturally */
        float: none !important;
    }

    /* 5. Specific Fix for Results Container: Position it at top */
    /* Since we hid siblings (form, sidebar), this should naturally float up. */
    #results-container {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
    }

    /* 6. Hide the Print Button itself */
    .no-print {
        display: none !important;
    }

    /* 7. Grid for Metrics (inside results) */
    #results-container .graf-row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-right: -15px;
        margin-left: -15px;
    }

    #results-container .graf-col-md-3 {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    /* 8. Force High Contrast Colors */
    .graf-bg-primary {
        background-color: #006064 !important;
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .graf-bg-primary *,
    #res-cap-rate,
    .graf-text-white {
        color: white !important;
    }

    /* Ensure Footer Note is Visible */
    .graf-bg-primary div[style*="font-size: 13px"] {
        color: white !important;
        opacity: 1 !important;
    }
}