/*!
 * calipso-theme.css
 *
 * Capa de tema del modulo de Seguridad. Se carga DESPUES de css/css.css
 * (Bootstrap 4.3.1 + SB Admin 2) y solo redefine colores y tipografia.
 * El archivo base no se toca, asi que quitar este <link> devuelve el look anterior.
 *
 * Los tokens replican la interfaz de webcorporate (localhost:34024), medidos
 * sobre la app viva: azul de barra/encabezados, fila seleccionada, grises y Roboto.
 *
 * Nota: el proyecto usa historicamente .btn-warning como boton de accion
 * principal (Login, "Agregar Usuario"), no como advertencia. Por eso aca
 * .btn-warning se pinta con el color primario.
 */

:root {
    --cal-primary: #2e6299;
    --cal-primary-dark: #24507e;
    --cal-primary-darker: #1d4064;
    --cal-primary-soft: #d0e5f5;
    --cal-primary-softer: #eaf3fb;

    --cal-page-bg: #e0e0e0;
    --cal-surface: #ffffff;
    --cal-surface-alt: #fcfdfd;

    --cal-text: #454545;
    --cal-text-muted: #6d7276;
    --cal-border: #d5dae0;

    --cal-danger: #c0392b;
    --cal-danger-dark: #a33325;
    --cal-info: #1f7a8c;
    --cal-info-dark: #17606e;
    --cal-success: #2e7d4f;
    --cal-warning: #d99614;
    --cal-warning-dark: #a8730f;

    --cal-font: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --cal-radius: 3px;

    /* css.css define Nunito aca y lo hereda todo Bootstrap */
    --font-family-sans-serif: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* css.css fija Nunito literal en estos dos, fuera de la variable */
.tooltip,
.popover {
    font-family: var(--cal-font);
}

/* ---------- Base ---------- */

body {
    font-family: var(--cal-font);
    background-color: var(--cal-page-bg);
    color: var(--cal-text);
}

#wrapper #content-wrapper {
    background-color: var(--cal-page-bg);
}

/* Un respiro arriba: al sacar los <br> el banner quedaba pegado al borde.
   A los lados, .container-fluid traia 24px que dejaban una franja gris muerta
   entre el sidebar y las tarjetas; se recorta a un margen minimo. */
#content .container-fluid {
    padding-top: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

a {
    color: var(--cal-primary);
}

a:hover,
a:focus {
    color: var(--cal-primary-dark);
}

/* ---------- Sidebar ---------- */
/* En webcorporate la navegacion es una barra azul; aca el equivalente
   estructural es el sidebar, asi que lleva el primario. */

/* El sidebar traia min-height:100vh, que cubre la ventana pero no el
   documento: con una tabla larga el azul se cortaba y quedaba una franja gris
   debajo. Se fija al viewport, asi ademas la navegacion queda siempre a mano
   en vez de perderse al scrollear. */
#wrapper > .border-right {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    z-index: 10;
}

#wrapper > .border-right > .sidebar {
    height: 100%;
    min-height: 100%;
    /* Si el menu no entra en pantallas bajas, scrollea dentro del sidebar */
    overflow-y: auto;
}

.sidebar,
.sidebar.navbar-nav,
.navbar-nav.bg-yellow {
    background-color: var(--cal-primary);
    background-image: none;
}

.sidebar .nav-item .nav-link,
.sidebar .nav-item .nav-link i,
.sidebar .sidebar-brand,
.sidebar .sidebar-brand-text {
    color: rgba(255, 255, 255, 0.85);
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:hover i,
.sidebar .nav-item.active .nav-link,
.sidebar .nav-item.active .nav-link i {
    color: #ffffff;
}

.sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* logoHeader.svg usa #18161d y #e42c52 sobre fondo transparente: pensado para
   cabecera clara. Sobre el azul del sidebar el casi-negro no contrasta, asi que
   lleva un fondo blanco en vez de alterar el asset de marca.
   Sin border-radius: el atomo llega a las esquinas del viewBox y una mascara
   circular le cortaba los brazos. */
.sidebar .logo-sidebar {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
    width: 132px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.25rem auto 1rem !important;
}

.sidebar .sidebar-heading,
.sidebar .sidebar-heading2 {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* El nombre de usuario y version que el sidebar muestra como texto suelto */
.sidebar .text-center,
.sidebar p,
.sidebar span:not(.badge) {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Topbar ---------- */

.topbar,
.topbar.navbar-light {
    background-color: var(--cal-surface);
    border-bottom: 1px solid var(--cal-border);
    box-shadow: none;
}

/* ---------- Tarjetas ---------- */

.card {
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: var(--cal-surface-alt);
    border-bottom: 1px solid var(--cal-border);
    color: var(--cal-text);
    font-weight: 500;
}

/* Banner descriptivo de cada pagina ("Gestionar Usuarios") */
.bg-color-tema {
    background-color: var(--cal-primary-softer);
    background-image: none;
    border-left: 4px solid var(--cal-primary);
    color: var(--cal-text);
}

.bg-color-tema2 {
    background-color: var(--cal-primary-soft);
    background-image: none;
    color: var(--cal-text);
}

/* ---------- Botones ---------- */

.btn-primary,
.btn-warning {
    color: #ffffff;
    background-color: var(--cal-primary);
    border-color: var(--cal-primary);
}

.btn-primary:hover,
.btn-warning:hover,
.btn-primary:focus,
.btn-warning:focus {
    color: #ffffff;
    background-color: var(--cal-primary-dark);
    border-color: var(--cal-primary-dark);
}

.btn-primary:active,
.btn-warning:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--cal-primary-darker);
    border-color: var(--cal-primary-darker);
}

.btn-primary:focus,
.btn-warning:focus,
.btn-primary.focus,
.btn-warning.focus {
    box-shadow: 0 0 0 0.2rem rgba(46, 98, 153, 0.35);
}

.btn-danger {
    background-color: var(--cal-danger);
    border-color: var(--cal-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--cal-danger-dark);
    border-color: var(--cal-danger-dark);
}

.btn-info {
    background-color: var(--cal-info);
    border-color: var(--cal-info);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--cal-info-dark);
    border-color: var(--cal-info-dark);
}

.btn-success {
    background-color: var(--cal-success);
    border-color: var(--cal-success);
}

.btn {
    border-radius: var(--cal-radius);
    font-weight: 500;
}

/* Los btn-circle de la columna ACCION quedan redondos igual */
.btn-circle {
    border-radius: 50%;
}

/* ---------- Formularios ---------- */

.form-control {
    border-color: var(--cal-border);
    border-radius: var(--cal-radius);
    color: var(--cal-text);
}

.form-control:focus {
    border-color: var(--cal-primary);
    box-shadow: 0 0 0 0.2rem rgba(46, 98, 153, 0.25);
}

.form-control-user {
    border-radius: var(--cal-radius);
}

/* ---------- Mostrar / ocultar contraseña ---------- */
/* El boton se superpone al input en vez de envolverlo en un input-group, para no
   perder la forma de pildora que tienen los campos del login. */

.campo-con-ojo {
    position: relative;
}

.campo-con-ojo .form-control {
    padding-right: 2.75rem;
}

.ojo-password {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--cal-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.ojo-password:hover {
    color: var(--cal-primary);
    background-color: rgba(46, 98, 153, 0.08);
}

.ojo-password:focus-visible {
    outline: 2px solid var(--cal-primary);
    outline-offset: 1px;
}

/* ---------- Tablas ---------- */

.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--cal-primary);
    color: #ffffff;
    font-weight: 500;
    font-size: 13px;
    border-color: var(--cal-primary-dark);
    vertical-align: middle;
}

.table td,
table.dataTable tbody td {
    font-size: 13px;
    color: var(--cal-text);
    border-color: var(--cal-border);
    vertical-align: middle;
}

.table tbody tr {
    background-color: var(--cal-surface-alt);
}

.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--cal-primary-soft);
    color: var(--cal-text);
}

table.dataTable tbody tr.selected,
table.dataTable tbody tr.active {
    background-color: var(--cal-primary-soft);
    color: var(--cal-text);
}

/* ---------- Cabecera de listado: buscador + accion, mismo nivel ---------- */
/* Antes el boton "Agregar" ocupaba una fila entera propia (btn-block) arriba
   de la tarjeta, dejando una franja muerta entre el banner y la tabla. */

.card-header.d-flex {
    padding: 0.6rem 1rem;
    gap: 0.75rem;
}

.acciones-cabecera {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.acciones-cabecera .form-control {
    min-width: 220px;
    width: auto;
}

.acciones-cabecera .btn {
    white-space: nowrap;
}

/* ---------- Banner descriptivo: sin espacio muerto ---------- */
/* El markup separa los parrafos con <br> sueltos y la ilustracion se salia
   de la tarjeta. Se resuelve aca para no tocar las 10 paginas. */

.card-header.bg-color-tema {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.25rem;
    overflow: hidden;
}

.card-header.bg-color-tema br {
    display: none;
}

.card-header.bg-color-tema .h4 {
    margin-bottom: 0.35rem;
}

/* La ilustracion es un SVG con height:auto: dentro del flex colapsaba a 0x0
   y su contenedor (col-xl-3) igual reservaba 220px vacios. */
.card-header.bg-color-tema img {
    display: block;
    height: 72px;
    max-height: 72px;
    width: auto;
    /* img-fluid trae max-width:100%, que se resuelve contra un contenedor cuyo
       ancho depende de la propia imagen: la referencia circular la colapsa a 0. */
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
}

.card-header.bg-color-tema .blockquote-custom-icon {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}

.card-header.bg-color-tema .blockquote-custom-icon > div {
    width: auto;
    max-width: none;
    padding: 0;
    flex: 0 0 auto;
}

/* La ilustracion es decorativa: por debajo de 992px no hay ancho para ella y
   se superpone al texto del banner, asi que se oculta.
   Ese umbral es el mismo que traia css.css via el hack de .col-xl-3; al
   corregir la grilla hay que declararlo aca, sobre la clase correcta. */
@media (max-width: 991.98px) {
    .card-header.bg-color-tema .blockquote-custom-icon {
        display: none;
    }
}

/* La tarjeta del banner no necesita tanto aire debajo */
.card-header.bg-color-tema {
    border-bottom: none;
}

/* Columna ACCION: los iconos van en fila, no apilados.
   Antes cada fila media ~150px porque el grupo era btn-group-vertical. */
.tabla-acciones {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.tabla-acciones .btn {
    margin: 0;
    flex: 0 0 auto;
}

/* Filas densas, al estilo de la grilla de webcorporate */
.table td,
table.dataTable tbody td {
    padding: 6px 10px;
}

.table thead th,
table.dataTable thead th {
    padding: 8px 10px;
    white-space: nowrap;
}

/* El btn-circle de SB Admin es grande para una grilla densa */
.table .btn-circle.btn-sm,
table.dataTable .btn-circle.btn-sm {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 0.7rem;
    padding: 0;
}

/* ---------- Orden por columna ---------- */
/* DataTables dibuja las flechas como :before/:after que heredan el color del
   th, asi que sobre el header azul salen blancas. Solo hay que darles lugar y
   reubicarlas, porque el padding compacto las descolocaba. */

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 26px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease-in-out;
}

table.dataTable thead th.sorting:hover,
table.dataTable thead th.sorting_asc:hover,
table.dataTable thead th.sorting_desc:hover {
    background-color: var(--cal-primary-dark);
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.4;
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before {
    right: 16px;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    right: 7px;
}

/* La flecha activa, a full */
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:after {
    opacity: 1;
}

/* La columna de acciones no es ordenable: DataTables le pone sorting_disabled,
   que ya viene sin flechas. Solo hay que sacarle el cursor y el hover. */
table.dataTable thead th.sorting_disabled {
    cursor: default;
    padding-right: 10px;
}

table.dataTable thead th.sorting_disabled:hover {
    background-color: var(--cal-primary);
}

/* ---------- Controles de DataTables ---------- */

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cal-primary);
    border-color: var(--cal-primary);
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cal-primary-soft);
    border-color: var(--cal-border);
    color: var(--cal-text) !important;
}

.page-item.active .page-link {
    background-color: var(--cal-primary);
    border-color: var(--cal-primary);
}

.page-link {
    color: var(--cal-primary);
}

/* ---------- Modales ---------- */

.modal-header {
    background-color: var(--cal-primary);
    color: #ffffff;
    border-bottom: none;
}

.modal-header .close,
.modal-header .close span {
    color: #ffffff;
    opacity: 0.9;
    text-shadow: none;
}

.modal-content {
    border-radius: var(--cal-radius);
    border: none;
}

/* ---------- Preloader ---------- */
/* css.css lo define con el naranja #f4b619, un verde #2ecc71 a mitad de
   animacion y dos amarillos mas en los keyframes. Los @keyframes no se pisan
   por especificidad: hay que redeclararlos con el mismo nombre, y gana el
   ultimo en cargarse (esta hoja). */

#preloader5 {
    background: var(--cal-primary);
}

#preloader5:after {
    border-top-color: var(--cal-primary);
    border-bottom-color: var(--cal-primary);
    border-left-color: transparent;
    border-right-color: transparent;
}

@keyframes preloader_5 {
    0% {
        transform: rotate(0deg);
        background: var(--cal-primary);
    }
    50% {
        transform: rotate(180deg);
        background: var(--cal-primary-soft);
    }
    100% {
        transform: rotate(360deg);
        background: var(--cal-primary);
    }
}

@keyframes preloader_5_after {
    0% {
        border-top-color: var(--cal-primary-soft);
        border-bottom-color: var(--cal-primary-soft);
    }
    50% {
        border-top-color: var(--cal-primary-dark);
        border-bottom-color: var(--cal-primary-dark);
    }
    100% {
        border-top-color: var(--cal-primary);
        border-bottom-color: var(--cal-primary);
    }
}

/* ---------- Utilitarios de texto que la plantilla trae en violeta ---------- */

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

/* ---------- Grilla: correccion de .col-xl-3 ---------- */
/* css.css tiene .col-xl-3 editada a mano (flex 0 0 180% y max-width 400px en
   lugar de 25%/25%, mas display:none por debajo de 992px). Solo esa clase esta
   alterada: .col-xl-2 y .col-xl-4 conservan sus valores correctos.
   El efecto era que el dashboard mostraba 2 tarjetas KPI por fila en vez de 4,
   y que por debajo de 992px desaparecian del todo.
   La ilustracion del banner, que es lo que ese hack buscaba acomodar, ya se
   resuelve arriba por .blockquote-custom-icon, que es mas especifica. */

@media (min-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 991.98px) {
    .col-xl-3 {
        display: block;
    }
}

/* ---------- Colores semanticos del dashboard ---------- */

.border-left-primary {
    border-left: 4px solid var(--cal-primary) !important;
}

.border-left-success {
    border-left: 4px solid var(--cal-success) !important;
}

.border-left-info {
    border-left: 4px solid var(--cal-info) !important;
}

.border-left-danger {
    border-left: 4px solid var(--cal-danger) !important;
}

.border-left-warning {
    border-left: 4px solid var(--cal-warning) !important;
}

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

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

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

.text-warning {
    color: var(--cal-warning-dark) !important;
}

/* ==========================================================================
   Grilla de grupos (grupos.html)
   Misma grilla que usuarios, pero cada grupo puede desplegar sus usuarios en
   una fila de detalle. La fila del grupo y su detalle viajan siempre juntas.
   ========================================================================== */

#TableGrupos thead th.ordenable {
    cursor: pointer;
    user-select: none;
    padding-right: 22px;
    position: relative;
    transition: background-color 0.12s ease-in-out;
}

#TableGrupos thead th.ordenable:hover {
    background-color: var(--cal-primary-dark);
}

#TableGrupos thead th.ordenable:after {
    content: "\f0dc";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75em;
    opacity: 0.4;
}

#TableGrupos thead th.orden-asc:after {
    content: "\f0de";
    opacity: 1;
}

#TableGrupos thead th.orden-desc:after {
    content: "\f0dd";
    opacity: 1;
}

#TableGrupos tbody tr.fila-grupo {
    cursor: pointer;
}

#TableGrupos tbody tr.fila-grupo.expandida {
    background-color: var(--cal-primary-soft);
}

#TableGrupos tbody tr.fila-grupo .font-weight-500 {
    font-weight: 500;
}

.chevron-grupo {
    color: var(--cal-primary);
    font-size: 0.8em;
    width: 10px;
    transition: transform 0.12s ease-in-out;
}

/* La fila de detalle no repite el borde superior: se lee como continuacion
   de la fila del grupo, no como un registro aparte. */
#TableGrupos tbody tr.fila-miembros > td {
    border-top: 0;
    background-color: var(--cal-detalle-bg, #f7f9fb);
    padding: 6px 12px 10px 34px;
    box-shadow: inset 3px 0 0 var(--cal-primary-soft);
}

/* Un usuario por renglon: en varias columnas la lista se leia como una grilla
   suelta y costaba seguir quien esta en el grupo. */
.lista-miembros {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-miembros li {
    padding: 2px 0;
    font-size: 0.9rem;
    color: var(--cal-text);
}

.lista-miembros li i {
    color: var(--cal-primary);
    opacity: 0.6;
    font-size: 0.85em;
}

/* ==========================================================================
   Grilla de licencias activas (licencias.html)
   Misma mecanica que la grilla de grupos: encabezados ordenables y una fila de
   detalle por registro. Se suman la columna de tildes (finalizar en lote) y las
   tarjetas de cupo, que replican el boton "Estado" del monitor de Delphi.
   ========================================================================== */

.tarjeta-licencias .card-body {
    padding: 0.6rem 1rem;
}

.licencias-rotulo {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cal-text-muted);
}

.licencias-valor {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cal-primary);
}

/* El tilde de "seleccionar todo" y los de cada fila no ordenan ni despliegan */
#TableLicencias th.col-tilde,
#TableLicencias td.col-tilde {
    width: 32px;
    text-align: center;
    cursor: default;
}

.acciones-cabecera .refresco-auto {
    white-space: nowrap;
    font-size: 0.85rem;
    padding-top: 2px;
}

#TableLicencias thead th.ordenable {
    cursor: pointer;
    user-select: none;
    padding-right: 22px;
    position: relative;
    transition: background-color 0.12s ease-in-out;
}

#TableLicencias thead th.ordenable:hover {
    background-color: var(--cal-primary-dark);
}

#TableLicencias thead th.ordenable:after {
    content: "\f0dc";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75em;
    opacity: 0.4;
}

#TableLicencias thead th.orden-asc:after {
    content: "\f0de";
    opacity: 1;
}

#TableLicencias thead th.orden-desc:after {
    content: "\f0dd";
    opacity: 1;
}

#TableLicencias tbody tr.fila-licencia {
    cursor: pointer;
}

#TableLicencias tbody tr.fila-licencia.expandida {
    background-color: var(--cal-primary-soft);
}

#TableLicencias tbody tr.fila-licencia .font-weight-500 {
    font-weight: 500;
}

/* La fila de detalle se lee como continuacion de la licencia, no como un
   registro aparte. */
#TableLicencias tbody tr.fila-detalle > td {
    border-top: 0;
    background-color: var(--cal-detalle-bg, #f7f9fb);
    padding: 6px 12px 10px 34px;
    box-shadow: inset 3px 0 0 var(--cal-primary-soft);
}

/* Un dato por renglon, igual que el panel de detalle del monitor de Delphi. */
.lista-detalle {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-detalle li {
    padding: 2px 0;
    font-size: 0.9rem;
    color: var(--cal-text);
}

.lista-detalle .detalle-rotulo {
    color: var(--cal-text-muted);
    margin-right: 4px;
}