/* ==========================================================
   tema.css — Tema visual de la app (base común de todos los módulos)
   Se carga al final del <head> de cada layout (después de
   Bootstrap 3, DataTables, Select2, SweetAlert y los CSS propios).

   Índice
     1. Variables de color (modo claro / modo oscuro)
     2. Base (body, tipografía, contenido)
     3. Barra superior y menú de usuario
     4. Encabezado de página
     5. Botones y formularios (Bootstrap 3)
     6. Interruptor (checkbox .rrhh-switch)
     7. Modales (Bootstrap 3)
     8. Select2
     9. SweetAlert2 y Toastify
    10. Paneles, alertas y otros
    11. Pantalla "Aguarde un instante..." (#divEspere)
    12. Corrección del desplegable de Select2
   ========================================================== */


/* ==========================================================
   1. VARIABLES DE COLOR
   Cambiando un valor acá se actualiza todo el módulo.
   El modo oscuro se activa con <html data-theme="dark"> (tema.js).
   ========================================================== */
:root {
    --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --brand: #0d5c91;               /* azul institucional */
    --brand-600: #0a4870;           /* azul hover */
    --brand-50: #e8f1f8;            /* azul muy suave (fondos activos) */
    --brand-ring: rgba(13, 92, 145, .18);
    --on-brand: #ffffff;            /* texto sobre azul */

    --bg: #f3f6f9;                  /* fondo de la página */
    --surface: #ffffff;             /* tarjetas, tablas, modales */
    --surface-2: #f8fafc;           /* fondo secundario (filas hijas, pie de modal) */
    --line: #e3e9ef;                /* bordes y divisores */
    --line-strong: #d3dce5;         /* bordes de inputs */
    --ink: #16222e;                 /* texto principal */
    --muted: #66788a;               /* texto secundario */
    --hover: #eef4f9;               /* fondo al pasar el mouse */
    --thead: #f5f8fb;               /* encabezado de tablas */
    --thead-ink: #4b5d6e;

    --ok: #14804a;    --ok-bg: #e5f5ec;
    --warn: #a15c07;  --warn-bg: #fdf1dc;
    --bad: #b42318;   --bad-bg: #fdecea;

    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 40, 60, .05);
    --shadow: 0 1px 2px rgba(16, 40, 60, .04), 0 8px 24px rgba(16, 40, 60, .06);
    --shadow-lg: 0 24px 60px rgba(16, 40, 60, .22);

    --topbar-h: 46px;   /* un poco más baja que la original (50) */
    --side-w: 45px;     /* menú cerrado */
    --side-w-abierto: 290px;   /* entra el texto más largo del menú */

    /* compatibilidad con los nombres que ya usaban datatable-moderno.css y barra-acciones.css */
    --dt-ink: var(--ink);
    --dt-muted: var(--muted);
    --dt-line: var(--line);
    --dt-surface: var(--surface);
    --dt-stripe: var(--surface-2);
    --dt-hover: var(--hover);
    --dt-brand: var(--brand);
    --dt-brand-dark: var(--brand-600);
    --dt-radius: var(--radius);

    color-scheme: light;
}

html[data-theme="dark"] {
    --brand: #3b9ae1;
    --brand-600: #5aaeea;
    --brand-50: rgba(59, 154, 225, .14);
    --brand-ring: rgba(59, 154, 225, .30);
    --on-brand: #06121c;

    --bg: #0d141b;
    --surface: #151e27;
    --surface-2: #1a2530;
    --line: #25323f;
    --line-strong: #314252;
    --ink: #e4ebf1;
    --muted: #8a9bab;
    --hover: #1d2a36;
    --thead: #1a2530;
    --thead-ink: #9aabbb;

    --ok: #4ad08a;    --ok-bg: rgba(74, 208, 138, .13);
    --warn: #f2b45a;  --warn-bg: rgba(242, 180, 90, .13);
    --bad: #f97066;   --bad-bg: rgba(249, 112, 102, .13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);

    color-scheme: dark;
}


/* ==========================================================
   2. BASE
   ========================================================== */
html,
body {
    background: var(--bg);
}

body {
    font-family: var(--font);
    font-size: 14px;
    color: var(--ink);
    padding-top: var(--topbar-h);
    -webkit-font-smoothing: antialiased;
}

body,
.form-control,
.btn,
.select2-container,
.swal2-popup {
    font-family: var(--font);
}

a { color: var(--brand); }
a:hover, a:focus { color: var(--brand-600); }

hr { border-top-color: var(--line); }

/* Transición suave al cambiar de tema */
html.rrhh-cambiando-tema *,
html.rrhh-cambiando-tema *::before,
html.rrhh-cambiando-tema *::after {
    transition: background-color .25s, border-color .25s, color .25s !important;
}

/* Tablas: la columna que las contiene no suma margen a los costados,
   así ocupan todo el ancho disponible (solo en pantallas grandes) */
@media (min-width: 901px) {
    #page-wrapper .row > [class*="col-"]:has(.dataTables_wrapper) {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Área de contenido: deja lugar al menú lateral */
#wrapper {
    padding-left: var(--side-w);
}

#page-wrapper {
    padding: 12px 12px 16px;   /* compacto: menos aire arriba del título y a los costados */
    min-height: calc(100vh - var(--topbar-h));
}

#page-wrapper > .container-fluid {
    padding: 0;
}

/* el .row de Bootstrap tiene márgenes negativos: se anulan para alinear el título */
#page-wrapper > .container-fluid > .row {
    margin-left: 0;
    margin-right: 0;
}

#page-wrapper > .container-fluid > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Scrollbars finas y acordes al tema */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}


/* ==========================================================
   3. BARRA SUPERIOR Y MENÚ DE USUARIO
   ========================================================== */
.rrhh-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 0;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.rrhh-hamburguesa {
    display: none;  /* solo en celulares (movil.css) */
}

.rrhh-marca {
    width: var(--side-w);
    flex: none;
    display: flex;
    justify-content: center;
}

.rrhh-marca img {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 8px;
    background: var(--brand-50);
    object-fit: contain;
}

.rrhh-titulo {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.rrhh-titulo b {
    font-size: 14px;
    letter-spacing: .2px;
    white-space: nowrap;
}

.rrhh-titulo small {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.rrhh-espacio { flex: 1; }

.rrhh-boton-icono {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: color .15s, border-color .15s, background-color .15s;
}

.rrhh-boton-icono:hover,
.rrhh-boton-icono:focus-visible {
    color: var(--brand);
    border-color: var(--brand);
    outline: none;
}

/* Íconos sol/luna: se muestran según el tema activo */
.rrhh-icono-claro { display: none !important; }
html[data-theme="dark"] .rrhh-icono-claro { display: inline-block !important; }
html[data-theme="dark"] .rrhh-icono-oscuro { display: none !important; }

/* Botón de usuario */
.rrhh-usuario {
    position: relative;
}

.rrhh-usuario-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 2px 10px 2px 2px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s;
}

.rrhh-usuario-chip:hover,
.rrhh-usuario.open .rrhh-usuario-chip {
    border-color: var(--brand);
}

.rrhh-usuario-chip:focus { outline: none; }

.rrhh-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px;
    flex: none;
    text-transform: uppercase;
}

.rrhh-usuario-nombre {
    font-weight: 600;
    font-size: 13px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rrhh-usuario-flecha {
    font-size: 11px;
    color: var(--muted);
    transition: transform .2s;
}

.rrhh-usuario.open .rrhh-usuario-flecha { transform: rotate(180deg); }

/* Menú desplegable (usa .dropdown-menu de Bootstrap 3) */
.rrhh-usuario .dropdown-menu {
    margin-top: 8px;
    width: 260px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.rrhh-usuario .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--ink);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.rrhh-usuario .dropdown-menu > li > a:hover,
.rrhh-usuario .dropdown-menu > li > a:focus {
    background: var(--hover);
    color: var(--ink);
}

.rrhh-usuario .dropdown-menu > li > a i {
    width: 18px;
    text-align: center;
    color: var(--muted);
}

.rrhh-usuario .dropdown-menu > li > a.rrhh-salir,
.rrhh-usuario .dropdown-menu > li > a.rrhh-salir i { color: var(--bad); }
.rrhh-usuario .dropdown-menu > li > a.rrhh-salir:hover { background: var(--bad-bg); }

.rrhh-usuario .dropdown-menu > li.rrhh-rol > a { cursor: default; }
.rrhh-usuario .dropdown-menu > li.rrhh-rol > a:hover { background: transparent; }

.rrhh-usuario .dropdown-menu .divider {
    margin: 4px 0;
    background: var(--line);
}

.rrhh-usuario-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.rrhh-usuario-cabecera .rrhh-avatar {
    width: 38px;
    height: 38px;
    font-size: 14px;
}

.rrhh-usuario-cabecera b {
    display: block;
    font-size: 14px;
}

.rrhh-usuario-cabecera small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrhh-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .3px;
}


/* ==========================================================
   4. ENCABEZADO DE PÁGINA
   ========================================================== */
#page-wrapper .page-header {
    margin: 0 0 10px !important;   /* espacio entre el título y el contenido */
    padding: 0;
    border-bottom: 0;
}

#page-wrapper .page-header h1,
#page-wrapper h1.page-header {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink);
    margin: 0 !important;
}

#page-wrapper h1.page-header small,
#page-wrapper .page-header h1 small {
    color: var(--muted);
    font-weight: 500;
}

.rrhh-migas {
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted);
    margin-bottom: 1px;
}

/* Planillas: el título es un <h1 class="page-header"> dentro de la columna */
#page-wrapper h1.page-header { margin-bottom: 10px !important; }

/* 10 px entre el título y el contenido en TODOS los módulos:
   el bloque que sigue al título no suma margen propio (los 10 px los da .page-header) */
/* (también sus primeros hijos, hasta 3 niveles: filtros o paneles que traían margin-top) */
#page-wrapper .container-fluid:has(.page-header) + *,
#page-wrapper .container-fluid:has(.page-header) + * > :first-child,
#page-wrapper .container-fluid:has(.page-header) + * > :first-child > :first-child,
#page-wrapper .container-fluid:has(.page-header) + * > :first-child > :first-child > :first-child,
#page-wrapper .row:has(> div > .page-header) + *,
#page-wrapper .row:has(> div > .page-header) + * > :first-child,
#page-wrapper .row:has(> div > .page-header) + * > :first-child > :first-child,
#page-wrapper .row:has(> div > .page-header) + * > :first-child > :first-child > :first-child,
#page-wrapper .row:has(> .page-header) + *,
#page-wrapper .row:has(> .page-header) + * > :first-child,
#page-wrapper .row:has(> .page-header) + * > :first-child > :first-child,
#page-wrapper .row:has(> .page-header) + * > :first-child > :first-child > :first-child {
    margin-top: 0 !important;
}

/* el contenedor del título tampoco suma margen abajo (partes pendientes traía 10 px) */
#page-wrapper .container-fluid:has(.page-header) { margin-bottom: 0 !important; }

/* Reclamos y conexiones: la barra (estado + botones) traía 10 + 18 px arriba */
#page-wrapper .div-panel-tipo-reclamo { margin-top: 0 !important; }
#page-wrapper .div-panel-tipo-reclamo > div[style*="margin-top: 18px"] { margin-top: 0 !important; }

h1, h2, h3, h4, h5, h6 { color: var(--ink); }


/* ==========================================================
   5. BOTONES Y FORMULARIOS (Bootstrap 3)
   ========================================================== */
.btn {
    border-radius: 9px;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 14px;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.btn:focus,
.btn:active:focus,
.btn.focus { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }

.btn-default {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background: var(--hover);
    border-color: var(--brand);
    color: var(--brand);
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 1px 2px rgba(13, 92, 145, .25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--on-brand);
}

.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover {
    background: var(--brand);
    border-color: var(--brand);
    opacity: .45;
}

/* Botones de color (se usan mucho en la app: btn-info, btn-success, btn-danger…) */
.btn-success,
.btn-success:focus { background: #14804a; border-color: #14804a; color: #fff; }
.btn-success:hover,
.btn-success:active { background: #0f6b3d; border-color: #0f6b3d; color: #fff; }

.btn-info,
.btn-info:focus { background: #0e7490; border-color: #0e7490; color: #fff; }
.btn-info:hover,
.btn-info:active { background: #0b5f76; border-color: #0b5f76; color: #fff; }

.btn-warning,
.btn-warning:focus { background: #b45309; border-color: #b45309; color: #fff; }
.btn-warning:hover,
.btn-warning:active { background: #92400e; border-color: #92400e; color: #fff; }

.btn-danger,
.btn-danger:focus { background: #b42318; border-color: #b42318; color: #fff; }
.btn-danger:hover,
.btn-danger:active { background: #912018; border-color: #912018; color: #fff; }

.btn-link { color: var(--brand); }

label {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
}

.form-control {
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--line-strong);
    background-color: var(--surface) !important;  /* pisa los style="background-color: white" */
    color: var(--ink);
    box-shadow: none;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
    background-color: var(--surface-2) !important;
    color: var(--muted);
}

.form-control::placeholder { color: var(--muted); }

select.form-control { cursor: pointer; }

input[type="file"].form-control {
    padding: 7px 10px;
    height: auto;
}

.input-group-addon {
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--muted);
}

/* Checkboxes y radios con el color de la marca */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand);
}


/* ==========================================================
   6. INTERRUPTOR — <input type="checkbox" class="rrhh-switch">
   Sigue siendo un checkbox: .prop('checked') funciona igual.
   ========================================================== */
.rrhh-switch-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
}

.rrhh-switch-fila b {
    display: block;
    font-size: 13px;
}

.rrhh-switch-fila small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

input[type="checkbox"].rrhh-switch {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 40px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 999px;
    background: var(--line-strong);
    position: relative;
    cursor: pointer;
    transition: background-color .2s;
}

input[type="checkbox"].rrhh-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .2s;
}

input[type="checkbox"].rrhh-switch:checked { background: var(--brand); }
input[type="checkbox"].rrhh-switch:checked::after { transform: translateX(18px); }
input[type="checkbox"].rrhh-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }


/* ==========================================================
   7. MODALES (Bootstrap 3)
   ========================================================== */
.modal-backdrop { background: #0a141e; }
.modal-backdrop.in { opacity: .45; }
html[data-theme="dark"] .modal-backdrop.in { opacity: .65; }

.modal-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: var(--ink);
}

/* El modal nunca se sale de la pantalla:
   - el diálogo deja 24px arriba y abajo,
   - la caja (.modal-content) mide como máximo el alto de la ventana menos esos márgenes,
   - encabezado y pie quedan fijos y solo el cuerpo (.modal-body) tiene scroll.
   Funciona aunque el formulario (<form>) envuelva header, body y footer. */
.modal-dialog {
    margin-top: 24px;
    margin-bottom: 24px;
}

.modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;        /* permite que el cuerpo se achique y haga scroll */
    flex: 1 1 auto;
}

.modal-header,
.modal-footer {
    flex: none;
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;   /* pisa style="max-height: 450px" de los partials */
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 12px;
    border-bottom: 0;
}

.modal-header::before,
.modal-header::after { display: none; } /* anula el clearfix de Bootstrap 3 */

.modal-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.rrhh-modal-icono {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    background: var(--brand-50);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 16px;
}

.rrhh-modal-textos { flex: 1; min-width: 0; }

.rrhh-modal-sub {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.modal-header .close {
    margin: 0 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--muted);
    opacity: 1;
    text-shadow: none;
    float: none;
}

.modal-header .close:hover { background: var(--hover); color: var(--ink); }

.modal-body {
    padding: 6px 20px 18px;
}

.modal-body label {
    margin-bottom: 6px !important;
}

.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}

.modal-footer .btn { min-width: 100px; }


/* ==========================================================
   7b. FORMULARIOS DENTRO DE MODALES
   Aspecto común para los campos de todas las ventanas modales:
   etiquetas chicas en gris, campos más altos, selects con flecha
   propia y texto a la izquierda, y campos de solo lectura que se
   ven como "dato" (sin borde) en vez de como un campo apagado.
   No hace falta tocar los partials.
   ========================================================== */

/* Etiquetas: arriba del campo, alineadas a la izquierda, en gris
   (no se aplica a los interruptores .rrhh-switch-fila ni a los <label class="btn">, que tienen su propio diseño) */
.modal-body label:not(.rrhh-switch-fila):not(.btn) {
    display: block;
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--muted);
    margin-bottom: 5px !important;
}

/* Campos: un poco más altos y con más aire adentro */
.modal-body .form-control {
    height: 40px;
    padding: 8px 12px;
    font-size: 14px;
}
.modal-body textarea.form-control {
    height: auto;
    min-height: 92px;
    line-height: 1.5;
}

/* Al pasar el mouse por un campo editable, el borde se marca apenas */
.modal-body .form-control:hover:not(:focus):not([disabled]):not([readonly]) {
    border-color: color-mix(in srgb, var(--line-strong), var(--ink) 22%);
}

/* Selects: texto a la izquierda (varios partials los centran) y flecha propia */
.modal-body select.form-control {
    -webkit-appearance: none;
    appearance: none;
    text-align: left !important;
    text-align-last: left !important;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366788a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
html[data-theme="dark"] .modal-body select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.modal-body select.form-control[multiple] {
    background-image: none;
    padding-right: 12px;
}

/* Solo lectura (número de reclamo, nombre, dirección…): se lee como dato */
.modal-body .form-control[disabled],
.modal-body .form-control[readonly] {
    border-color: var(--line);
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);   /* Safari/Chrome los apagan */
    opacity: 1;
    cursor: default;
}
.modal-body select.form-control[disabled] { background-image: none; }

/* Pie: botones del mismo alto que los campos */
.modal-footer .btn {
    height: 38px;
    padding: 0 18px;
}


/* ----------------------------------------------------------
   Piezas para ordenar los formularios (se usan en los partials
   que se vayan rediseñando; no afectan a los demás)
   ---------------------------------------------------------- */

/* Fila de campos lado a lado (en celular pasan a columna, ver movil.css) */
.modal-body .rrhh-fila-campos {
    display: flex;
    gap: 14px;
}
.modal-body .rrhh-fila-campos > * { flex: 1 1 0; min-width: 0; }
.modal-body .rrhh-fila-campos > .tema-campo-chico { flex: 0 0 120px; }

/* Cada campo con su etiqueta; separación pareja entre campos */
.modal-body > .tema-campo + .tema-campo,
.modal-body > .rrhh-fila-campos + .tema-campo,
.modal-body > .tema-campo + .rrhh-fila-campos,
.modal-body > .rrhh-fila-campos + .rrhh-fila-campos {
    margin-top: 14px;
}

/* Título de sección dentro del formulario ("Datos del reclamo", "Trabajo") */
.modal-body .tema-form-seccion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.modal-body .tema-form-seccion:first-child { margin-top: 4px; }
.modal-body .tema-form-seccion::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Resumen de solo lectura en una caja suave (datos que no se editan) */
.modal-body .tema-form-resumen {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}
.modal-body .tema-form-resumen .form-control[disabled],
.modal-body .tema-form-resumen .form-control[readonly] {
    height: auto;
    padding: 0;
    border-color: transparent;
    background: transparent !important;
    font-weight: 600;
}
.modal-body .tema-form-resumen label { margin-bottom: 2px !important; }
.modal-body .tema-form-resumen .rrhh-fila-campos + .rrhh-fila-campos { margin-top: 10px; }


/* ----------------------------------------------------------
   Más piezas para formularios ordenados (externas-cloacas/reclamos)
   ---------------------------------------------------------- */

/* .modal-body.tema-form: separación pareja entre todos los bloques */
.modal-body.tema-form > * + * { margin-top: 14px; }
.modal-body.tema-form > .tema-form-seccion { margin: 18px 0 12px; }
.modal-body.tema-form > .tema-form-seccion:first-child { margin-top: 4px; }
.modal-body.tema-form > .tema-form-seccion + * { margin-top: 0; }

/* dentro del resumen de solo lectura, filas más juntas */
.modal-body .tema-form-resumen > * + * { margin-top: 10px; }
/* campos agrupados dentro del resumen (ej. Calle / Entre calle / Y calle) */
.modal-body .tema-form-resumen .tema-campo + .tema-campo { margin-top: 10px; }
.modal-body .tema-form-resumen .rrhh-fila-campos > .tema-campo + .tema-campo { margin-top: 0; }   /* los de una misma fila, alineados */

/* Campo con un botón al lado (Dirección + Google Maps, Calle/barrio + buscar) */
.modal-body .tema-campo-con-boton {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.modal-body .tema-campo-con-boton > .tema-campo { flex: 1; min-width: 0; }
.modal-body .tema-campo-con-boton > .btn {
    flex: none;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0;
    display: grid;
    place-items: center;
}

/* Aviso dentro del formulario (ej. "No se encontró un usuario") */
.modal-body .tema-aviso {
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--bad-bg);
    color: var(--bad);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* Pie con botones envueltos en divs (Crear / Listo según el caso) */
.modal-footer .tema-pie-botones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

/* Ícono del encabezado en rojo para acciones que borran */
.rrhh-modal-icono.tema-icono-peligro {
    background: var(--bad-bg);
    color: var(--bad);
}

/* textarea de solo lectura dentro del resumen: alto según el texto */
.modal-body .tema-form-resumen textarea.form-control {
    min-height: 0;
    field-sizing: content;
    resize: none;
}

/* Interruptores (.rrhh-switch-fila) dentro de formularios ordenados */
.modal-body.tema-form .rrhh-switch-fila { margin-top: 0; }
.modal-body .tema-form-resumen .rrhh-switch-fila {
    margin-top: 10px;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px dashed var(--line);
    border-radius: 0;
    background: transparent;
}


/* ----------------------------------------------------------
   Buscar calle o barrio (compartidos/buscarUsuarioOSM)
   Computadora: tabla a la izquierda y lo seleccionado a la
   derecha, un campo debajo del otro. Celular: todo en columna.
   ---------------------------------------------------------- */
@media (min-width: 901px) {
    #buscarUsuarioOSM .modal-dialog,
    .modal-dialog:has(.tema-buscar-osm) { width: 900px; max-width: calc(100vw - 80px); }   /* también Dirección de conexiones */
    .tema-buscar-osm .tema-buscar-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 16px;
        align-items: start;
    }
}

/* pestañas pegadas al contenido, sin sombras dobles */
.tema-buscar-osm .tab {
    box-shadow: none;
    border-bottom: 0;
}
.tema-buscar-osm .tab button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tema-buscar-osm .tabcontent {
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: none;
    padding: 12px;
    animation: none;
}

/* buscador de la tabla a todo el ancho */
.tema-buscar-osm .dataTables_wrapper .dataTables_filter {
    float: none;
    width: 100%;
    margin: 0 0 8px;
    text-align: left;
}
.tema-buscar-osm .dataTables_wrapper .dataTables_filter label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 !important;
}
.tema-buscar-osm .dataTables_wrapper .dataTables_filter input {
    flex: 1;
    width: auto !important;
    margin: 0 !important;
}

/* Alto de la tabla: lo fija este CSS (en el JS se comentaron los cambios de alto;
   el partial todavía trae style="min-height: 290px" en los div de las tablas).
   En la computadora mide 300 px y solo se achica si la ventana del navegador es baja
   (notebooks de 768 px con barras), para que el modal entre siempre sin scroll.
   Mide lo mismo en todos los casos y pestañas: los campos no saltan al filtrar. */
.tema-buscar-osm #divTablaCalles,
.tema-buscar-osm #divTablaBarrios,
.tema-buscar-osm .tema-buscar-layout > div:first-child {   /* también divTablaCallesConexiones / divTablaBarriosConexiones */
    min-height: 0 !important;
    height: auto !important;
}
.tema-buscar-osm .dataTables_scrollBody {
    height: 300px !important;
    max-height: 300px !important;
}
@media (min-width: 901px) {
    .tema-buscar-osm .dataTables_scrollBody {
        height: clamp(120px, calc(100vh - 372px), 300px) !important;
        max-height: clamp(120px, calc(100vh - 372px), 300px) !important;
    }
}

/* ventanas bajas: los campos de la derecha más compactos */
@media (min-width: 901px) and (max-height: 700px) {
    .tema-buscar-osm .tema-buscar-campos .form-control { height: 34px; padding-top: 5px; padding-bottom: 5px; }
    .tema-buscar-osm .tema-buscar-campos label { margin-bottom: 3px !important; }
    .tema-buscar-osm .tema-buscar-campos > .tema-campo + .tema-campo { margin-top: 6px; }
    .tema-buscar-osm .tema-buscar-campos .tema-form-seccion { margin: 6px 0; }
}
/* ventanas muy bajas: Sector, Manzana y Nº casa lado a lado */
@media (min-width: 901px) and (max-height: 620px) {
    .tema-buscar-osm #Barrios .tema-buscar-campos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 8px;
    }
    .tema-buscar-osm #Barrios .tema-buscar-campos > * { grid-column: 1 / -1; }
    .tema-buscar-osm #Barrios .tema-buscar-campos > .tema-campo ~ .tema-campo { grid-column: auto; }
}

/* tabla: recuadro, filas que se pueden tocar, nombres largos en dos renglones */
.tema-buscar-osm .dataTables_scroll {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.tema-buscar-osm table.dataTable thead th { text-align: left !important; }
.tema-buscar-osm table.dataTable tbody tr { cursor: pointer; }
.tema-buscar-osm table.dataTable tbody td {
    padding: 7px 12px;
    white-space: normal;
}

/* fila elegida (la marca el JS con .fila-elegida) */
.tema-buscar-osm table.dataTable tbody tr.fila-elegida > td {
    background: var(--brand-50) !important;
    color: var(--brand);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--brand) !important;
}

/* lo seleccionado: caja suave, campos uno debajo del otro */
.tema-buscar-osm .tema-buscar-campos {
    padding: 4px 14px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}
.tema-buscar-osm .tema-buscar-campos .tema-form-seccion { margin: 8px 0 10px; }
.tema-buscar-osm .tema-buscar-campos > .tema-campo + .tema-campo { margin-top: 10px; }
.tema-buscar-osm .tema-buscar-campos .form-control[disabled] { background: var(--surface) !important; }
.tema-buscar-osm input[type="number"].form-control { text-align: right; }


/* ----------------------------------------------------------
   Formularios ordenados: espacios un poco más justos
   ---------------------------------------------------------- */
/* filas de campos que el JS muestra con display:block (ej. datos del usuario
   en Enviar cuadrilla): siguen lado a lado */
.modal-body .rrhh-fila-campos[style*="block"] { display: flex !important; }

.modal-body.tema-form > .tema-form-seccion { margin: 14px 0 8px; }
.modal-body.tema-form > .tema-form-seccion:first-child { margin-top: 2px; }
.modal-body.tema-form > * + * { margin-top: 12px; }
.modal-body.tema-form > .tema-form-seccion + * { margin-top: 0; }
.modal-body .tema-form-resumen { padding: 10px 14px; }
.modal-body .tema-form-resumen > * + *,
.modal-body .tema-form-resumen .tema-campo + .tema-campo { margin-top: 8px; }
.modal-body .tema-form-resumen .rrhh-fila-campos > .tema-campo + .tema-campo { margin-top: 0; }


/* ----------------------------------------------------------
   Conexiones (externas-agua/conexiones)
   ---------------------------------------------------------- */
/* campos que al tocarlos abren el buscador de calles (Esquina, Entre calles) */
.modal-body .form-control.tema-campo-elegir { cursor: pointer; }
/* Subir PDF: campo de archivo + botón "Buscar" con texto */
.modal-body .tema-campo-con-boton > .form-control { flex: 1; min-width: 0; }
.modal-body .tema-campo-con-boton > label.btn {
    width: auto !important;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
}
.modal-body .custom-file-button input[type=file]::file-selector-button { display: none; }
/* avisos con clase .alert de Bootstrap: mismo aspecto que .tema-aviso */
.modal-body .alert.tema-aviso { border: 0; }


/* Formularios largos en dos columnas (ej. Nueva conexión): en computadora el modal
   se ensancha y los bloques van lado a lado; en celular, uno debajo del otro */
.modal-body .tema-form-col > * + * { margin-top: 12px; }
.modal-body .tema-form-col > .tema-form-seccion { margin: 14px 0 8px; }
.modal-body .tema-form-col > .tema-form-seccion:first-child { margin-top: 2px; }
.modal-body .tema-form-col > .tema-form-seccion + * { margin-top: 0; }
@media (min-width: 901px) {
    .modal-dialog:has(.tema-form-columnas) { width: 900px; max-width: calc(100vw - 80px); }
    .modal-body .tema-form-columnas {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
}
@media (max-width: 900px) {
    .modal-body .tema-form-col + .tema-form-col { margin-top: 12px; }
}


/* Formulario en dos columnas: versión compacta para que entre sin scroll
   aunque estén visibles el aviso de usuario y las dos calles */
.modal-body .tema-form-columnas .form-control { height: 36px; padding-top: 6px; padding-bottom: 6px; }
.modal-body .tema-form-columnas label:not(.rrhh-switch-fila):not(.btn) { margin-bottom: 3px !important; }
.modal-body .tema-form-columnas .tema-form-col > * + * { margin-top: 10px; }
.modal-body .tema-form-columnas .tema-form-col > .tema-form-seccion { margin: 10px 0 6px; }
.modal-body .tema-form-columnas .tema-form-col > .tema-form-seccion:first-child { margin-top: 0; }
.modal-body .tema-form-columnas .tema-form-col > .tema-form-seccion + * { margin-top: 0; }
.modal-body .tema-form-columnas .rrhh-switch-fila { padding: 7px 12px; }
.modal-body .tema-form-columnas .rrhh-switch-fila small { display: none; }   /* el título ya lo dice */
.modal-body .tema-form-columnas .tema-aviso { padding: 6px 10px; }
.modal-body .tema-form-columnas .tema-campo-con-boton > .btn { width: 36px !important; height: 36px !important; }
@media (min-width: 901px) {
    .modal-dialog:has(.tema-form-columnas) { margin-top: 12px; margin-bottom: 12px; }
    .modal-dialog:has(.tema-form-columnas) .modal-content { max-height: calc(100vh - 24px); }
    .modal-content:has(.tema-form-columnas) .modal-header { padding: 14px 20px 8px; }
    .modal-content:has(.tema-form-columnas) .modal-footer { padding: 10px 20px; }
}


/* ==========================================================
   8. SELECT2
   ========================================================== */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
    line-height: 36px;
    padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; right: 6px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--muted) transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--muted); }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.select2-dropdown {
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-top: 4px;
    color: var(--ink);
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--line-strong) !important;
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    padding: 6px 10px;
    outline: none;
}

.select2-results__option { padding: 8px 12px; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-50);
    color: var(--brand);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--brand);
    color: var(--on-brand);
}


/* ==========================================================
   9. SWEETALERT2 Y TOASTIFY
   ========================================================== */
.swal2-popup {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-radius: 16px !important;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}

.swal2-title { color: var(--ink) !important; font-size: 19px !important; }
.swal2-html-container, .swal2-content { color: var(--muted) !important; }
.swal2-container.swal2-backdrop-show { background: rgba(10, 20, 30, .45) !important; }

.swal2-styled { border-radius: 9px !important; font-weight: 600 !important; }

.swal2-styled.swal2-confirm.swalBtnOK,
.swal2-styled.swal2-confirm {
    background: var(--brand) !important;
    color: var(--on-brand) !important;
}

.swal2-styled.swal2-cancel.swalBtnCancel,
.swal2-styled.swal2-cancel {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line-strong) !important;
}

.swal2-styled:focus { box-shadow: 0 0 0 3px var(--brand-ring) !important; }

.toastify {
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    font-family: var(--font);
}


/* ==========================================================
   10. PANELES, ALERTAS Y OTROS
   ========================================================== */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.panel-default > .panel-heading {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 12px 16px;
}

.panel-title { height: auto !important; font-weight: 600; }

.alert { border-radius: 10px; border: 1px solid transparent; }
.alert-danger  { background: var(--bad-bg);  color: var(--bad);  border-color: transparent; }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.alert-success { background: var(--ok-bg);   color: var(--ok);   border-color: transparent; }
.alert-info    { background: var(--brand-50); color: var(--brand); border-color: transparent; }

.text-muted { color: var(--muted) !important; }

/* Mensajes "Hay cambios sin registrar" / "Cambios registrados" */
#divHayCambiosSinRegistrar p,
#divCambiosRegistrados p {
    display: inline-block;
    margin: 10px 0 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
}

#divHayCambiosSinRegistrar p { background: var(--bad-bg); color: var(--bad) !important; }
#divCambiosRegistrados p     { background: var(--ok-bg);  color: var(--ok) !important; }


/* ==========================================================
   11. "AGUARDE UN INSTANTE..." (#divEspere)
   Tiene estilos en línea en el layout; acá se lo convierte en una
   capa que cubre la pantalla. El JS sigue usando style.display.
   ========================================================== */
#divEspere {
    position: fixed !important;
    inset: 0;
    width: auto !important;
    height: auto !important;
    z-index: 2000 !important;
    padding-top: 18vh;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#divEspere img {
    width: 120px !important;
    height: 120px !important;
    margin-top: 0 !important;
    border-radius: 20px;
}

#divEspere h4 {
    color: var(--ink);
    font-size: 15px;
}


/* corregirDropDown.js corre el desplegable de Select2 unos píxeles para
   compensar el zoom 90% que tenía el layout. En este diseño ya no hay zoom,
   así que se anula ese corrimiento para que quede alineado al campo. */
.select2-container--open .select2-dropdown {
    top: 0 !important;
    left: 0 !important;
}


/* ==========================================================
   13. COLORES ESCRITOS EN LÍNEA EN LOS PARTIALS (modo oscuro)
   Muchas vistas tienen style="background-color: white", "color: black",
   fondos amarillos claros, etc. En modo claro se ven igual que siempre;
   en modo oscuro se reemplazan por los colores del tema para que no
   aparezcan recuadros blancos. Se buscan las dos formas de escribirlo
   (con y sin espacio después de los dos puntos).
   ========================================================== */
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background-color: #fff;"],
html[data-theme="dark"] [style*="background-color:#fff;"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"] {
    background-color: var(--surface) !important;
}

html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:black"] {
    color: var(--ink) !important;
}

html[data-theme="dark"] [style*="color: red"],
html[data-theme="dark"] [style*="color:red"] {
    color: var(--bad) !important;
}

html[data-theme="dark"] [style*="color: blue"],
html[data-theme="dark"] [style*="color:blue"] {
    color: #7cc0f2 !important;
}

html[data-theme="dark"] [style*="color: green"],
html[data-theme="dark"] [style*="color:green"] {
    color: var(--ok) !important;
}

/* fondos amarillos claros (avisos, paneles destacados) */
html[data-theme="dark"] [style*="#F4F3D4" i],
html[data-theme="dark"] [style*="#F7F4D5" i],
html[data-theme="dark"] [style*="#F7F2D4" i] {
    background-color: var(--warn-bg) !important;
}

/* grises claros */
html[data-theme="dark"] [style*="#DDE0E3" i],
html[data-theme="dark"] [style*="#E6E4E0" i],
html[data-theme="dark"] [style*="#F2EFE9" i] {
    background-color: var(--surface-2) !important;
}

/* bordes grises / "azure" */
html[data-theme="dark"] [style*="border-color: #dddddd" i],
html[data-theme="dark"] [style*="border-color:#dddddd" i],
html[data-theme="dark"] [style*="border-color: azure" i],
html[data-theme="dark"] [style*="border-color:azure" i] {
    border-color: var(--line) !important;
}

/* botones/fondos azules fijos (#327ab6, #337ab7): color de la marca en ambos temas */
[style*="background-color: #327ab6" i],
[style*="background-color:#327ab6" i],
[style*="background-color: #337ab7" i],
[style*="background-color:#337ab7" i] {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--on-brand) !important;
}

/* Tablas y listas de Bootstrap 3 que no son DataTables */
.table {
    color: var(--ink);
}

.table > thead > tr > th {
    background: var(--thead);
    color: var(--thead-ink);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > th,
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--line) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--surface-2); }
.table-hover > tbody > tr:hover { background-color: var(--hover); }

.list-group-item {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.well {
    background: var(--surface-2);
    border-color: var(--line);
    box-shadow: none;
}

.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs > li > a { color: var(--muted); border-radius: 8px 8px 0 0; }
.nav-tabs > li > a:hover { background: var(--hover); border-color: transparent; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: var(--surface);
    color: var(--brand);
    border-color: var(--line) var(--line) transparent;
}

.dropdown-menu {
    background: var(--surface);
    border-color: var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

.dropdown-menu > li > a { color: var(--ink); }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background: var(--hover); color: var(--ink); }

.close { color: var(--muted); text-shadow: none; opacity: 1; }

.badge { background-color: var(--muted); }
.label-primary { background-color: var(--brand); }

.text-primary { color: var(--brand); }
.text-danger  { color: var(--bad); }
.text-success { color: var(--ok); }
.text-warning { color: var(--warn); }

.progress { background: var(--surface-2); }

textarea.form-control { height: auto; }


/* ==========================================================
   MARCO DE CONTENIDO (como las tarjetas de Recursos Humanos)
   Los partials agrupan todo lo que va debajo del título en
   <div class="tema-marco">: barra de acciones, filtros, tablas…
   Mismo aspecto que .tabcontent de RRHH. Monitoreo agua no lo usa.
   ========================================================== */
#page-wrapper .tema-marco {
    margin-top: 0 !important;
}

/* 5 px entre el título del módulo y el marco (en vez de los 10 px generales) */
#page-wrapper :has(+ .tema-marco) .page-header,
#page-wrapper .page-header:has(+ .tema-marco) {
    margin-bottom: 5px !important;
}

@media (min-width: 901px) {
    #page-wrapper .tema-marco {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 12px 14px;
        box-shadow: var(--shadow);
    }

    /* mientras todo lo de adentro está oculto (ej. reclamos antes de cargar), sin marco vacío */
    #page-wrapper .tema-marco:not(:has(> :not([style*="display: none"]):not([style*="display:none"]))) {
        display: none;
    }
}


/* ==========================================================
   ÍCONOS EN IMAGEN (PNG negros) EN MODO OSCURO
   Los botones que usan imágenes de /img/botones/ (Agua, Cloaca, promedio,
   ver, observar, lápiz, papelera…) son dibujos negros sobre fondo
   transparente: en modo oscuro casi no se ven. Se invierten a gris claro.
   Quedan afuera las imágenes que ya son de color o blancas
   (buscando, cargando, …Blanco).
   ========================================================== */
html[data-theme="dark"] img[src*="/img/botones/"]:not([src*="Blanco"]):not([src*="blanco"]):not([src*="buscando"]):not([src*="cargando"]) {
    filter: invert(1) brightness(.9);
}