.logo-oscuro {
    display: none;
}

[data-bs-theme="dark"] .logo-claro {
    display: none;
}

[data-bs-theme="dark"] .logo-oscuro {
    display: inline;
}

.footer {
    border-top: 1px solid var(--bs-border-color);
}

/* Pantalla de ingreso: misma apariencia que el login del sistema anterior */
.login-page {
    --login-fondo: #f7f7f7;
    --login-borde: #a9bbce;
    --login-titulo: #546673;
    --login-boton: #5981c1;
    background-color: var(--login-fondo);
    align-items: center;
}

[data-bs-theme="dark"] .login-page {
    --login-fondo: var(--bs-body-bg);
    --login-borde: var(--bs-border-color);
    --login-titulo: var(--bs-body-color);
}

.login-header {
    padding: 50px 0;
    text-align: center;
}

.login-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--login-borde);
    border-radius: 3px;
    margin: 0 auto;
    padding: 30px 40px;
    width: 478px;
    max-width: calc(100% - 32px);
}

.login-card h1 {
    color: var(--login-titulo);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}

.login-card input[type="text"],
.login-card input[type="password"] {
    background: var(--bs-body-bg);
    border: 1px solid #a3acb8;
    border-radius: 3px;
    color: var(--bs-body-color);
    display: block;
    font-size: 14px;
    height: 40px;
    margin-bottom: 20px;
    padding: 4px 6px;
    width: 100%;
}

.login-card .btn-ingresar {
    background: var(--login-boton);
    border: 0;
    border-radius: 3px;
    color: #fff;
    float: right;
    padding: 8px 12px;
    width: 47.5%;
}

.login-card form::after {
    clear: both;
    content: "";
    display: table;
}

/* Apariencia del sistema anterior (Bootstrap 3): fondo gris, barra #e8e8e8, paneles y tablas azul claro */
:root {
    --legacy-barra: #e8e8e8;
    --legacy-azul-claro: #e7eef6;
    --legacy-boton: #5981c1;
}

[data-bs-theme="light"] body {
    background-color: #f7f7f7;
}

body {
    font-size: 13px;
}

[data-bs-theme="light"] .navbar,
[data-bs-theme="light"] .footer {
    --bs-navbar-color: #777;
    --bs-navbar-hover-color: #777;
    --bs-navbar-active-color: #000;
    background-color: var(--legacy-barra) !important;
    border-color: var(--legacy-barra);
}

[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link.show {
    background-color: #dfdfdf;
    color: #000;
}

[data-bs-theme="light"] .dropdown-menu {
    --bs-dropdown-bg: var(--legacy-barra);
    --bs-dropdown-link-color: #1a1a1a;
    --bs-dropdown-link-hover-bg: #7e7e7e;
    --bs-dropdown-link-hover-color: #1a1a1a;
    --bs-dropdown-font-size: 13px;
    border-radius: 0;
}

.btn {
    --bs-btn-font-size: 12px;
    --bs-btn-border-radius: 2px;
}

.btn-primary {
    --bs-btn-bg: var(--legacy-boton);
    --bs-btn-border-color: var(--legacy-boton);
    --bs-btn-hover-bg: #4a6fae;
    --bs-btn-hover-border-color: #4a6fae;
    --bs-btn-active-bg: #4a6fae;
    --bs-btn-active-border-color: #4a6fae;
}

/* Botón "default" de Bootstrap 3: blanco con borde gris */
.btn-default {
    --bs-btn-color: #333;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-active-color: #333;
    --bs-btn-active-bg: #e6e6e6;
    --bs-btn-active-border-color: #adadad;
}

[data-bs-theme="dark"] .btn-default {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5bc0de;
    --bs-btn-border-color: #46b8da;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #31b0d5;
    --bs-btn-hover-border-color: #269abc;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #31b0d5;
    --bs-btn-active-border-color: #269abc;
}

.btn-sm {
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 10px;
}

.btn-danger {
    --bs-btn-bg: #d9534f;
    --bs-btn-border-color: #d43f3a;
}

/* Paneles */
.panel {
    background-color: var(--bs-body-bg);
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
}

[data-bs-theme="dark"] .panel {
    border-color: var(--bs-border-color);
}

.panel-heading {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-radius: 3px 3px 0 0;
    padding: 10px 15px;
}

[data-bs-theme="dark"] .panel-heading {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

.panel-title {
    color: #424242;
    font-size: 15px;
    margin: 0;
    text-align: center;
}

[data-bs-theme="dark"] .panel-title {
    color: var(--bs-body-color);
}

.panel-body {
    padding: 15px;
}

.panel h5 {
    font-size: 13px;
}

.control-back {
    color: #333;
    text-decoration: underline;
}

[data-bs-theme="dark"] .control-back {
    color: var(--bs-body-color);
}

/* Alertas compactas */
.alert {
    border-radius: 2px;
    padding: 6px 15px;
}

/* Tabla principal */
.tabla-personalizada {
    --bs-table-bg: transparent;
    border-collapse: collapse;
    color: #555;
    font-size: 13px;
}

[data-bs-theme="dark"] .tabla-personalizada {
    color: var(--bs-body-color);
}

.tabla-personalizada th,
.tabla-personalizada td {
    border: 1px solid #ddd;
    vertical-align: middle;
}

[data-bs-theme="dark"] .tabla-personalizada th,
[data-bs-theme="dark"] .tabla-personalizada td {
    border-color: var(--bs-border-color);
}

.tabla-personalizada > thead > tr {
    background-color: var(--legacy-azul-claro);
    color: #424242;
    font-weight: bold;
    white-space: nowrap;
}

.tabla-personalizada > thead > tr > th {
    background-color: transparent;
    color: inherit;
}

[data-bs-theme="dark"] .tabla-personalizada > thead > tr {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.tabla-personalizada > thead a {
    color: inherit;
    text-decoration: none;
}

.tabla-personalizada > tbody > tr:hover > td {
    background-color: lightyellow;
}

[data-bs-theme="dark"] .tabla-personalizada > tbody > tr:hover > td {
    background-color: var(--bs-secondary-bg);
}

.tabla-personalizada .col-boton {
    border-left-color: transparent;
    border-right-color: transparent;
    text-align: center;
    width: 5%;
}

/* Buscador, info y paginación (estilo DataTables del sistema anterior) */
.tabla-buscar label {
    font-weight: normal;
}

.tabla-buscar input {
    display: inline-block;
    margin-left: 6px;
    width: 16em;
}

.tabla-info {
    margin-top: 20px;
}

.pagination {
    --bs-pagination-border-radius: 2px;
    --bs-pagination-color: #555;
    --bs-pagination-active-bg: var(--legacy-azul-claro);
    --bs-pagination-active-border-color: var(--legacy-azul-claro);
    --bs-pagination-active-color: #555;
    margin-top: 12px;
}

/* Formularios */
.form-control {
    border-radius: 2px;
    font-size: 13px;
}

/* Tarjetas de la home */
.card {
    background-color: var(--bs-body-bg);
    border: 0;
    border-radius: 3px;
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2);
    margin: 10px;
    overflow: hidden;
    padding: 10px;
}

.card-heading {
    border-bottom: 1px solid #efefef;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    text-align: center;
}

[data-bs-theme="dark"] .card-heading {
    border-color: var(--bs-border-color);
}

.card-body p {
    font-size: 13px;
    line-height: 1.4;
    margin: 10px;
}

/* Estado de usuario (colores de la tabla del legacy) */
.tabla-personalizada td.estado-activo {
    background-color: #94d194;
    color: #555;
}

.tabla-personalizada td.estado-inactivo {
    background-color: #df6f6d;
    color: #555;
}

.tabla-personalizada > tbody > tr:hover > td.estado-activo {
    background-color: #94d194;
}

.tabla-personalizada > tbody > tr:hover > td.estado-inactivo {
    background-color: #df6f6d;
}

/* Editor de líneas de la reparación: los campos van sin borde dentro de la tabla (como .input-in-table del legacy) */
.input-en-tabla {
    width: 100%;
    border: 0;
    padding: 0 4px;
    height: 23px;
    font-size: 13px;
    background: transparent;
    color: inherit;
}

.input-en-tabla:focus {
    outline: 1px solid #66afe9;
}

/* Submenú de "Informes": se abre al pasar el mouse, como el legacy (y con clic, ver submenu_controller.js) */
.dropdown-menu li.submenu:hover > .dropdown-menu {
    display: block;
    top: 0;
    left: 100%;
    margin-top: 0;
}

/* Botón "Nuevo" junto a un desplegable (navegación anidada): como el legacy, en una línea,
   pegado al desplegable (margen -25px) y del alto de los campos (38px) */
.nuevo-dentro-form {
    margin-left: -25px;
    height: calc(1.5rem + .75rem + 2px);
    white-space: nowrap;
    --bs-btn-border-radius: 3px;
}