/* ===================================================
   app.css — estilos propios de la aplicación
   Cargado globalmente desde link_styles.html
   =================================================== */

/* --- Utilidades generales --- */
.hidden { display: none; }

.bg-pendiente       { background-color: rgba(255, 234, 50, 0.1); }
.bg-pendiente-oscuro{ background-color: rgba(255, 234, 50, 0.9); }

.img-user-icon         { width: 28px !important; height: 28px !important; }
.img-user-icon-portada { width: 48px !important; height: 48px !important; }

/* --- Barra de progreso vertical --- */
.barra-vertical {
    width: 25px;
    height: 70px;
    border: 2px solid #707070;
    border-radius: 5px;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
    opacity: 0.6;
}
.barra-llenada {
    width: 100%;
    background-color: #2a98b9;
    position: absolute;
    bottom: 0;
}

/* --- Botón scroll-to-top --- */
.scroll-up {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #3498db;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    opacity: 60%;
}
.scroll-up:hover {
    background-color: #2980b9;
    opacity: 100%;
}

/* --- Columna de mes en tablas --- */
.mes {
    border-left: 2px solid #3b92bd !important;
    border-right: 2px solid #3b92bd !important;
    transition: background-color 0.3s ease !important;
}

/* --- Íconos en tablas --- */
.icon-gris     { scale: 90%; color: rgb(124, 124, 124) !important; }
.icon-reabierta{ scale: 90%; color: #f28910 !important; }
.icon-verde    { scale: 90%; color: rgb(9, 172, 150) !important; }
.icon-rojo     { scale: 90%; color: rgb(172, 9, 9) !important; }

/* --- Selects con grupos --- */
.bold-option {
    font-weight: bold;
    color: brown;
    background-color: lightgray;
}
.gray-background { background-color: #d3d3d3; }

/* --- Formularios --- */
.radio_presupuesto {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
}
.is-invalid { border-color: #dc3545; }
.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* --- Tablas con fade --- */
.hiddenTable { display: none; }
.fade-in {
    opacity: 1;
    transition: opacity 0.5s ease;
    display: table;
}
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
    height: 0;
    overflow: hidden;
}

a div:hover { background-color: #e0e0e0; }

/* --- Botones de estado de pago --- */
.btn-todo-claro {
    background-color: rgba(5, 176, 250, 0.10) !important;
    border-color: rgba(5, 176, 250, 1) !important;
    transition: background-color 0.3s ease !important;
}
.btn-todo-claro:hover { background-color: rgba(5, 176, 250, 0.25) !important; }

.btn-todo {
    background-color: rgb(192, 235, 254) !important;
    border-color: rgba(5, 176, 250, 1) !important;
    transition: background-color 0.3s ease !important;
}
.btn-todo:hover { background-color: rgb(130, 216, 252) !important; }

.btn-nada {
    background-color: rgba(184, 105, 48, 0.2) !important;
    border-color: rgba(184, 105, 48, 1) !important;
    transition: background-color 0.3s ease !important;
}
.btn-nada:hover { background-color: rgba(184, 105, 48, 0.5) !important; }

.btn-algo {
    background-color: rgb(204, 231, 218) !important;
    border-color: rgba(54, 191, 118, 1) !important;
    transition: background-color 0.3s ease !important;
}
.btn-algo:hover { background-color: rgb(154, 223, 186) !important; }

.btn-amarillo {
    background-color: rgb(236, 235, 204) !important;
    border-color: rgb(191, 189, 54) !important;
    transition: background-color 0.3s ease !important;
}
.btn-amarillo:hover { background-color: rgb(223, 222, 154) !important; }

.btn-rojo {
    background-color: rgba(148, 0, 0, 0.2) !important;
    border-color: rgb(148, 0, 0) !important;
    transition: background-color 0.3s ease !important;
}
.btn-rojo:hover { background-color: rgba(148, 0, 0, 0.5) !important; }

/* --- Deshabilitar hover en botones decorativos --- */
.no-hover:hover,
.no-hover2:hover {
    background-color: inherit !important;
    border-color: inherit !important;
    text-decoration: none;
}

/* --- Tabla responsive: primera columna fija --- */
.fijar-primera-linea > thead th:first-child,
.fijar-primera-linea > tbody td:first-child {
    position: sticky;
    left: 0;
    background-color: #ffffff;
    z-index: 3;
}
.fijar-primera-linea > thead th:first-child { z-index: 4; }
.fijar-primera-linea table table { position: relative; z-index: auto; }
.fijar-primera-linea table td,
.fijar-primera-linea table th { background-color: transparent !important; }
.fijar-primera-linea table td:first-child,
.fijar-primera-linea table th:first-child { position: static; z-index: auto; }

/* --- Gráficos responsivos --- */
.chart-canvas          { display: block !important; }
.default-description   { display: block !important; }
.small-resolution-description { display: none !important; }
.chart-message         { display: none !important; }

@media (max-width: 500px) {
    .chart-canvas                 { display: none !important; }
    .default-description          { display: none !important; }
    .small-resolution-description { display: block !important; }
    .chart-message                { display: block !important; }
}

/* --- Presupuesto: celdas con tooltip --- */
.cell-info {
    position: relative;
    cursor: pointer;
    text-align: center;
}
.cell-info .tooltip-content {
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    width: 200px;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}
.cell-info .tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
}
.cell-info:hover .tooltip-content { visibility: visible; opacity: 1; }

.link-button {
    background: none;
    color: rgb(0, 132, 255);
    border: none;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Presupuesto: tablas de estado de pago --- */
.table-nada { transition: background-color 0.3s ease !important; }
.table-nada td {
    border: 1px solid rgba(184, 105, 48, 1) !important;
    transition: background-color 0.3s ease !important;
}
.table-nada th {
    border-bottom: 1px solid rgba(184, 105, 48, 1) !important;
    transition: background-color 0.3s ease !important;
}
.table-nada .mes {
    border-left: 2px solid #3b92bd !important;
    border-right: 2px solid #3b92bd !important;
    transition: background-color 0.3s ease !important;
}

.table-detalle {
    border: 2px solid rgba(184, 105, 48, 1) !important;
    transition: background-color 0.3s ease !important;
}
.table-detalle td {
    border: 1px solid rgba(184, 105, 48, 1) !important;
    transition: background-color 0.3s ease !important;
}
.table-detalle th {
    border-bottom: 1px solid rgba(184, 105, 48, 1) !important;
    transition: background-color 0.3s ease !important;
}
.table-detalle .mes {
    border-left: 2px solid #3b92bd !important;
    border-right: 2px solid #3b92bd !important;
    transition: background-color 0.3s ease !important;
}
.table-detalle .mes_fila {
    border-left: 2px solid #3b92bd !important;
    border-right: 2px solid #3b92bd !important;
    border-top: 2px solid #3b92bd !important;
    border-bottom: 2px solid #3b92bd !important;
    transition: background-color 0.3s ease !important;
}

.texto-blanco { color: #fff !important; }

/* --- Utilidades de color de fondo --- */
.bg-gray          { background-color: #d3d3d3 !important; }
.border-gray      { border: 1px solid #d3d3d3 !important; }
.bg-info-light    { background-color: #e0f2f7 !important; }
.border-info-light{ border-color: #a7d4e4 !important; }
.bg-success-light { background-color: #e8f5e9 !important; }
.bg-danger-light  { background-color: #ffebee !important; }
.bg-warning-light { background-color: #fff3e0 !important; }
.bg-primary-light { background-color: #c8e6ff !important; }
.border-success   { border-color: #c3e6cb !important; }
.table-scroll-wrapper { overflow-x: auto; max-width: 100%; }

/* --- Alineación vertical en tablas --- */
.table td, .table th { vertical-align: middle; }

/* --- Íconos de Material Symbols --- */
.material-symbols-outlined { vertical-align: middle; }

/* --- Calendario / DateRangePicker --- */
.daterangepicker .calendar-table {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}
.daterangepicker td.available:hover,
.daterangepicker .calendar-table .btn-light:hover { background-color: #e9ecef; }
.daterangepicker td.active,
.daterangepicker td.active:hover { background-color: #007bff; color: white; }
.hoy      { background-color: #ffeb3b !important; color: black !important; }
.reservado{ background-color: rgba(255,99,71,0.6) !important; color: white !important; }
.selected { background-color: rgba(0,123,255,0.5) !important; }

[data-theme="dark"] .daterangepicker { background-color: #1e2d40; border-color: #2e3f54; color: #cdd9e5; }
[data-theme="dark"] .daterangepicker .calendar-table { background-color: #1e2d40; border-color: #2e3f54; }
[data-theme="dark"] .daterangepicker td.available { color: #b0c4d8; }
[data-theme="dark"] .daterangepicker td.available:hover { background-color: #2e3f54; }
[data-theme="dark"] .daterangepicker td.active,
[data-theme="dark"] .daterangepicker td.active:hover { background-color: #3a6ea8; }
[data-theme="dark"] .hoy { background-color: rgba(255,235,59,0.3) !important; color: #cdd9e5 !important; }

/* --- Animaciones de collapse/accordion --- */
.collapse      { transition: height 0.5s ease, background-color 0.5s ease; }
.card-header   { transition: background-color 0.5s ease; }

/* --- Íconos pequeños y de portada --- */
.img-ssm { width: 23px; height: 23px; }

/* --- Selección de propiedades/tenant --- */
.card-select { cursor: pointer; }

/* --- Texto en mayúsculas con estilo --- */
.uppercase {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* --- Bloque deshabilitado --- */
.disabled-block {
    opacity: 0.5;
    pointer-events: none;
    background-color: #f0f0f0;
}

/* --- Select con optgroups (navbar selector de propiedad) --- */
optgroup.bold-option {
    font-style: normal !important;
    font-weight: bold;
    color: rgb(129, 0, 0) !important;
    background-color: #fff8f8 !important;
}
select option {
    color: initial !important;
    background-color: initial !important;
    font-style: normal !important;
}

/* --- Botón toggle de tema en navbar --- */
.btn-theme-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #6c757d;
}
.btn-theme-toggle:hover { color: #343a40; }

/* ===================================================
   TEMA OSCURO  (navy-azul, no negro puro)
   Activado con: <html data-theme="dark">
   =================================================== */

[data-theme="dark"] body,
[data-theme="dark"] .container-scroller {
    background-color: #1c2a3e;
    color: #cdd9e5;
}

/* Navbar */
[data-theme="dark"] .navbar {
    background: #162032 !important;
    border-bottom: 1px solid #243347;
}
[data-theme="dark"] .navbar .navbar-brand-wrapper {
    background: #111c2d !important;
    border-bottom: 1px solid #243347;
}
[data-theme="dark"] .navbar .navbar-menu-wrapper {
    background: #162032 !important;
    border-bottom: 1px solid #243347;
}
[data-theme="dark"] .navbar .nav-link,
[data-theme="dark"] .navbar h6,
[data-theme="dark"] .navbar .date {
    color: #8fa8c0 !important;
}
[data-theme="dark"] .btn-theme-toggle { color: #8fa8c0; }
[data-theme="dark"] .btn-theme-toggle:hover { color: #cdd9e5; }

/* Sidebar */
[data-theme="dark"] .sidebar {
    background: #111c2d !important;
    border-right: 1px solid #1e2d40;
}
[data-theme="dark"] .sidebar .nav .nav-item .nav-link {
    color: #9ab8d0 !important;
}
[data-theme="dark"] .sidebar .nav .nav-item .nav-link .menu-icon,
[data-theme="dark"] .sidebar .nav .nav-item .nav-link i {
    color: #9ab8d0 !important;
}
[data-theme="dark"] .sidebar .nav .nav-item .nav-link .menu-title {
    color: #cdd9e5 !important;
}
[data-theme="dark"] .sidebar .nav .nav-item .nav-link:hover .menu-title,
[data-theme="dark"] .sidebar .nav .nav-item.active > .nav-link .menu-title {
    color: #ffffff !important;
}
[data-theme="dark"] .sidebar .nav .nav-item .nav-link:hover,
[data-theme="dark"] .sidebar .nav .nav-item.active > .nav-link {
    background: rgba(255,255,255,0.05) !important;
}
[data-theme="dark"] .sidebar .nav .sub-menu .nav-item .nav-link {
    color: #7a9ab8 !important;
}
[data-theme="dark"] .sidebar .nav .sub-menu .nav-item .nav-link .menu-title {
    color: #b0c8e0 !important;
}

/* Panel principal */
[data-theme="dark"] .main-panel,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .page-body-wrapper {
    background: #1c2a3e !important;
}

/* Cards */
[data-theme="dark"] .card {
    background: #243347 !important;
    border-color: #2e3f54 !important;
}
[data-theme="dark"] .card .card-title,
[data-theme="dark"] .card-header {
    color: #cdd9e5 !important;
    background-color: #1e2d40 !important;
    border-bottom-color: #2e3f54 !important;
}
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-footer {
    color: #b0c4d8;
}

/* Tablas */
[data-theme="dark"] .table {
    color: #b0c4d8 !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: #2e3f54 !important;
    background-color: transparent;
}
[data-theme="dark"] .table thead th {
    background-color: #1e2d40 !important;
    color: #cdd9e5 !important;
    border-color: #2e3f54 !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.03) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255,255,255,0.06) !important;
}

/* Formularios */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #1c2a3e !important;
    color: #cdd9e5 !important;
    border-color: #3a4f68 !important;
}
[data-theme="dark"] .form-control:focus {
    background-color: #1c2a3e !important;
    color: #cdd9e5 !important;
    border-color: #5b8abf !important;
    box-shadow: 0 0 0 0.2rem rgba(91,138,191,0.25) !important;
}
[data-theme="dark"] label,
[data-theme="dark"] .form-label { color: #8fa8c0; }

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: #1e2d40 !important;
    border-color: #2e3f54 !important;
}
[data-theme="dark"] .dropdown-item {
    color: #b0c4d8 !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #243347 !important;
    color: #cdd9e5 !important;
}
[data-theme="dark"] .dropdown-divider { border-color: #2e3f54; }

/* Modales */
[data-theme="dark"] .modal-content {
    background-color: #1e2d40 !important;
    border-color: #2e3f54;
    color: #cdd9e5;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: #2e3f54;
}

/* Textos y encabezados */
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6 {
    color: #cdd9e5;
}
[data-theme="dark"] p,
[data-theme="dark"] span { color: #b0c4d8; }
[data-theme="dark"] .text-muted { color: #6a8aaa !important; }
[data-theme="dark"] .text-dark  { color: #cdd9e5 !important; }

/* Badges y alertas */
[data-theme="dark"] .badge-light { background-color: #2e3f54; color: #cdd9e5; }

/* Paginación */
[data-theme="dark"] .page-link {
    background-color: #243347 !important;
    border-color: #2e3f54 !important;
    color: #8fa8c0 !important;
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: #3a6ea8 !important;
    border-color: #3a6ea8 !important;
}

/* Tabla sticky primera columna */
[data-theme="dark"] .fijar-primera-linea > thead th:first-child,
[data-theme="dark"] .fijar-primera-linea > tbody td:first-child {
    background-color: #243347 !important;
}

/* Footer */
[data-theme="dark"] .footer { background: #111c2d !important; border-top: 1px solid #1e2d40; }

/* Barra breadcrumb (teal #00c8bf en light → navy en dark) */
[data-theme="dark"] .navbar-breadcrumb {
    background: #152438 !important;
    border-bottom: 1px solid #1e2d40;
}
[data-theme="dark"] .navbar-breadcrumb .nav-link a,
[data-theme="dark"] .navbar-breadcrumb .nav-link i,
[data-theme="dark"] .navbar-breadcrumb .material-symbols-outlined {
    color: #8fa8c0 !important;
}
[data-theme="dark"] .navbar-breadcrumb .nav-link a:hover i,
[data-theme="dark"] .navbar-breadcrumb .nav-link a:hover .material-symbols-outlined {
    color: #cdd9e5 !important;
}

/* Alertas / Messages django */
[data-theme="dark"] .alert-success {
    background-color: rgba(20,70,40,0.75) !important;
    border-color: #1e5c35 !important;
    color: #a8d5b5 !important;
}
[data-theme="dark"] .alert-danger {
    background-color: rgba(80,20,25,0.75) !important;
    border-color: #7a1a20 !important;
    color: #f0a8ac !important;
}
[data-theme="dark"] .alert-warning {
    background-color: rgba(75,50,10,0.75) !important;
    border-color: #7a5a10 !important;
    color: #f0d080 !important;
}
[data-theme="dark"] .alert-info {
    background-color: rgba(10,50,75,0.75) !important;
    border-color: #0a5070 !important;
    color: #80c8e8 !important;
}

/* --- Utilidades de color: overrides dark --- */
[data-theme="dark"] .bg-gray           { background-color: #2a3a52 !important; }
[data-theme="dark"] .border-gray       { border-color: #3a4f68 !important; }
[data-theme="dark"] .bg-info-light     { background-color: #1a3040 !important; }
[data-theme="dark"] .border-info-light { border-color: #2a5570 !important; }
[data-theme="dark"] .bg-success-light  { background-color: #1a3328 !important; }
[data-theme="dark"] .bg-danger-light   { background-color: #3a1a1e !important; }
[data-theme="dark"] .bg-warning-light  { background-color: #332810 !important; }
[data-theme="dark"] .bg-primary-light  { background-color: #1a2e48 !important; }
[data-theme="dark"] .bg-pendiente      { background-color: rgba(255,234,50,0.07) !important; }
[data-theme="dark"] .bg-pendiente-oscuro { background-color: rgba(200,175,20,0.65) !important; }

/* Botones de estado de pago: dark */
[data-theme="dark"] .btn-todo-claro  { background-color: rgba(5,176,250,0.08) !important; }
[data-theme="dark"] .btn-todo        { background-color: rgba(5,176,250,0.18) !important; }
[data-theme="dark"] .btn-nada        { background-color: rgba(184,105,48,0.15) !important; }
[data-theme="dark"] .btn-algo        { background-color: rgba(54,191,118,0.12) !important; }
[data-theme="dark"] .btn-amarillo    { background-color: rgba(191,189,54,0.12) !important; }
[data-theme="dark"] .btn-rojo        { background-color: rgba(148,0,0,0.15) !important; }

/* Presupuesto: tablas en dark */
[data-theme="dark"] .table-nada td,
[data-theme="dark"] .table-nada th,
[data-theme="dark"] .table-detalle,
[data-theme="dark"] .table-detalle td,
[data-theme="dark"] .table-detalle th { background-color: transparent !important; }

/* Scroll-up dark */
[data-theme="dark"] .scroll-up       { background-color: #2a4a6a; }
[data-theme="dark"] .scroll-up:hover { background-color: #3a6090; }

/* Barra de progreso dark */
[data-theme="dark"] .barra-vertical  { background-color: #1e2d40; border-color: #3a4f68; }
[data-theme="dark"] .barra-llenada   { background-color: #3a7abf; }

/* Link-button dark */
[data-theme="dark"] .link-button { color: #5ba3d9; }

/* Tooltip celda presupuesto dark */
[data-theme="dark"] .cell-info .tooltip-content {
    background-color: rgba(15,30,50,0.92);
}

/* Select con optgroups dark */
[data-theme="dark"] optgroup.bold-option {
    color: #e07070 !important;
    background-color: #1e2d40 !important;
}
[data-theme="dark"] select option {
    background-color: #1c2a3e !important;
    color: #cdd9e5 !important;
}