body {
    background-color: #f8f9fa;
}

.custom-header {
    background-color: #4e73df; /* Blue header */
    font-weight: bold;
    color: white; /* Ensure text is visible */
}

/* Style for readonly fields to make them look less like inputs */
.read-only-field {
    background-color: #e9ecef; /* Lighter grey */
    cursor: not-allowed;
    border: 1px solid #ced4da; /* Match standard input border */
}

/* Make editable inputs stand out slightly (optional) */
.editable-input {
     background-color: #fff; /* White background */
     /* Optional: add a subtle border color */
     /* border-color: #86b7fe; */
}

/* Ensure this style from V3 is present */
.read-only-field {
    background-color: #e9ecef;
    cursor: not-allowed;
    border: 1px solid #ced4da;
}

/* Ensure editable style is present if desired */
.editable-input {
     background-color: #fff;
}

/* Optional: Adjust spacing if needed within the input group */
#reembolsoPorcentajeSelect {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#reembolsoInput {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
}
.input-group-text {
    border-radius: 0; /* Remove rounding between elements */
}

td .input-group {
    min-width: 130px;
}

td, th {
    vertical-align: middle;
}

/* Align number inputs and percentage outputs */
input[type=number], .percentage-output {
    text-align: right;
}
/* Also align currency text inputs */
.currency-input {
     text-align: right;
}


.percentage-output {
     padding-right: 0.5rem; /* Add some padding */
}

.result-item strong {
    min-width: 80px; /* Adjust as needed */
    display: inline-block;
    text-align: right;
}

.col-form-label {
    text-align: right;
}
@media (max-width: 767px) {
    .col-form-label {
        text-align: left;
    }
}

/* Badge styling for SITUACION / Margen */
#situacionOutput.badge-superavit {
    background-color: #1cc88a; /* Green */
    color: white;
}
#situacionOutput.badge-deficit {
    background-color: #e74a3b; /* Red */
    color: white;
}
#situacionOutput.badge-equilibrio {
    background-color: #f6c23e; /* Yellow/Orange */
    color: #5a5c69;
}

/* Badge styling for Atractivo/No Atractivo */
#atractivoOutput.badge-atractivo {
    background-color: #1cc88a; /* Green */
    color: white;
}
#atractivoOutput.badge-no-atractivo {
    background-color: #e74a3b; /* Red */
    color: white;
}
#atractivoOutput.badge-unset { /* Default state */
    background-color: #858796; /* Grey */
    color: white;
}

/* Badge styling for SI/NO */
#expectativasOutput.badge-si {
     background-color: #1cc88a; /* Green */
     color: white;
}
#expectativasOutput.badge-no {
     background-color: #e74a3b; /* Red */
     color: white;
}
#expectativasOutput.badge-unset { /* Default state */
    background-color: #858796; /* Grey */
    color: white;
}


.navbar {
    margin-bottom: .25rem !important;
}

.btn {
    margin: 5px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Highlight rows contributing to Inversion Total */
.investment-cost-row {
    /* Optional: Add subtle background or border */
    /* background-color: #f0f8ff; */
}
/* Style for Utilidad Neta row */
.bg-utilidad-neta {
     background-color: #fff3cd; /* Light yellow to match spreadsheet */
     border: 1px solid #ffeeba;
     border-radius: 0.25rem;
}
.text-danger {
    color: #dc3545 !important; /* Ensure danger color override */
}

/* Ensure currency inputs have consistent height even without $ sign */
.currency-input {
    /* padding-left: 0.75rem; Add padding if needed */
}

/* Style for remove button in dynamic rows */
.remove-expense-btn {
    padding: 0.25rem 0.5rem; /* Smaller padding */
    font-size: 0.8rem; /* Smaller font */
    margin-left: 5px;
}

/* Ensure input groups in table fit */
td .input-group {
    /* May need adjustment depending on content */
    flex-wrap: nowrap; /* Prevent wrapping */
}
td .form-control {
    min-width: 80px; /* Ensure minimum width for inputs */
}
td .dynamic-concepto-input {
     min-width: 150px; /* Give more space for concept */
}