/* =====================================================================
   Tema visual institucional
   E.S.E. Hospital San Juan Bosco - Sistema de Consulta de Empleados
   Se apoya en Bootstrap 5 (ya incluido en el proyecto) y solo agrega
   una capa de estilo propio: paleta de color, tarjetas, badges de
   estado y el layout del panel de administración.
   ===================================================================== */

:root {
    --hsjb-primario: #0f5c73;      /* azul-verde institucional */
    --hsjb-primario-oscuro: #0a3f4f;
    --hsjb-acento: #16a085;        /* verde para acciones/éxito */
    --hsjb-fondo: #f4f7f8;
    --hsjb-texto: #1f2d34;
    --hsjb-borde: #dfe6e9;
    --hsjb-lila: #9e77b2;          /* color de los formularios (consulta pública, resultado, mensajes, login) */
    --hsjb-lila-oscuro: #7e5f8e;
    --hsjb-panel: #9e77b2;         /* color del panel de administración */
    --hsjb-panel-oscuro: #7e5f8e;

    /* --hsjb-lila/-oscuro y --hsjb-panel/-oscuro son los valores por
       defecto (el morado/lila institucional). Un administrador puede
       cambiarlos desde admnstrr/configuracion.php; en ese caso, cada
       página los sobrescribe con un <style> propio que imprime
       includes/config_colores.php, justo después de este archivo. */
}

body {
    background-color: var(--hsjb-fondo);
    color: var(--hsjb-texto);
}

/* ---------- Encabezado / marca ---------- */
.hsjb-marca {
    text-align: center;
    padding: 1.25rem 0 0.1rem;
}

.hsjb-marca img {
    max-width: 220px;
    height: auto;
}

/* Página de resultado de consulta (rsltvld.php): márgenes superior e
   inferior del logo más reducidos que en el resto de pantallas. */
.hsjb-marca-compacta {
    padding-top: 0.35rem;
    padding-bottom: 0.05rem;
}

/* Pie de página "Desarrollado por" (login del panel y consulta pública). */
.hsjb-footer-dev {
    text-align: center;
    color: #8a97a0;
    font-size: 0.78rem;
    margin-top: 0.9rem;
}

/* ---------- Tarjetas ---------- */
.card {
    border: none;
    border-radius: 0.6rem;
    box-shadow: 0 2px 10px rgba(15, 92, 115, 0.08);
}

.card-header {
    background-color: var(--hsjb-primario);
    color: #fff;
    border-radius: 0.6rem 0.6rem 0 0 !important;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
}

/* Tarjeta "DATOS DEL EMPLEADO": el título usa el morado/lila del logo
   institucional en vez del azul-verde genérico. Escenario propio de esta
   tarjeta (no afecta el resto de tarjetas ni el panel de administración). */
.hsjb-card-empleado > .card-header {
    background-color: var(--hsjb-lila);
}

/* Formulario principal de consulta (index.php): mismo morado/lila del
   logo institucional en el título, para que coincida con la tarjeta de
   resultados. Clase propia para no afectar el resto de tarjetas ni el
   panel de administración. */
.hsjb-card-consulta > .card-header {
    background-color: var(--hsjb-lila);
}

/* Mismo patrón repetitivo del logo institucional que ya lleva el fondo
   de la tarjeta de resultados (empleados activos), para que el
   formulario principal de consulta tenga el mismo acabado de marca. */
.hsjb-card-consulta {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.hsjb-card-consulta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/logo.webp");
    background-repeat: repeat;
    background-size: 130px auto;
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
}

/* Tarjetas de contacto en msg.php (documento no encontrado): una por
   cada funcionario de RR.HH. a quien llamar, en vez de texto corrido. */
.hsjb-contacto-card {
    height: 100%;
    padding: 1rem 0.9rem;
    border: 1px solid var(--hsjb-borde);
    border-radius: 0.6rem;
    background-color: #faf8fb;
}

.hsjb-contacto-card i.bi-person-circle {
    font-size: 1.9rem;
    color: var(--hsjb-lila);
}

.hsjb-contacto-nombre {
    font-weight: 700;
    margin-top: 0.35rem;
    font-size: 0.95rem;
}

.hsjb-contacto-cargo {
    font-size: 0.82rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.hsjb-contacto-telefono {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--hsjb-lila);
    font-weight: 600;
    text-decoration: none;
}

.hsjb-contacto-telefono:hover,
.hsjb-contacto-telefono:focus {
    color: var(--hsjb-lila-oscuro);
    text-decoration: underline;
}

.hsjb-contacto-correo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    color: #55606b;
    font-size: 0.85rem;
    text-decoration: none;
    word-break: break-word;
}

.hsjb-contacto-correo:hover,
.hsjb-contacto-correo:focus {
    color: var(--hsjb-lila-oscuro);
    text-decoration: underline;
}

.hsjb-label-consulta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hsjb-label-consulta i {
    color: var(--hsjb-lila);
}

.hsjb-input-group-lila .input-group-text {
    background-color: #f3edf5;
    color: var(--hsjb-lila);
    border-color: var(--hsjb-borde);
}

.btn-primary {
    background-color: var(--hsjb-primario);
    border-color: var(--hsjb-primario);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hsjb-primario-oscuro);
    border-color: var(--hsjb-primario-oscuro);
}

/* Botón "Consultar" del formulario principal (index.php): mismo
   morado/lila del logo institucional que ya se usa en los títulos, en
   vez del azul-verde genérico de .btn-primary. */
.hsjb-btn-lila {
    background-color: var(--hsjb-lila) !important;
    border-color: var(--hsjb-lila) !important;
}

.hsjb-btn-lila:hover,
.hsjb-btn-lila:focus {
    background-color: var(--hsjb-lila-oscuro) !important;
    border-color: var(--hsjb-lila-oscuro) !important;
}

.btn-outline-primary {
    color: var(--hsjb-primario);
    border-color: var(--hsjb-primario);
}

.btn-outline-primary:hover {
    background-color: var(--hsjb-primario);
    border-color: var(--hsjb-primario);
}

/* ---------- Foto de empleado tipo avatar ---------- */
.hsjb-avatar {
    width: 150px;
    height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 3px solid var(--hsjb-borde);
    background-color: #fff;
}

/* Patrón repetitivo del logo institucional sobre la foto del empleado,
   visible solo para empleados activos. */
.hsjb-foto-zona {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 200px;
}

.hsjb-foto-activo-marca::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-image: url("../images/logo.webp");
    background-repeat: repeat;
    background-size: 60px auto;
    opacity: 0.12;
    border-radius: calc(0.5rem - 3px);
    pointer-events: none;
}

/* ---------- Ficha de datos del empleado (Documento, Nombre, Cargo,
   Estado): reemplaza los antiguos inputs de solo lectura por filas de
   etiqueta arriba / valor abajo, centradas, con líneas divisorias sutiles. */
.hsjb-ficha {
    text-align: center;
    margin-top: 0.9rem;
}

.hsjb-ficha-fila {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.55rem 0.1rem;
    border-bottom: 1px solid var(--hsjb-borde);
}

.hsjb-ficha-fila:last-child {
    border-bottom: none;
}

.hsjb-ficha-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7d8a91;
}

.hsjb-ficha-label i {
    color: var(--hsjb-primario);
    font-size: 0.85rem;
}

.hsjb-ficha-valor {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hsjb-texto);
}

.hsjb-ficha-fila-estado .hsjb-ficha-valor {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botón "Cerrar" reubicado en la esquina derecha del título de la
   tarjeta, estilo botón de cerrar de una ventana de Windows: icono "X",
   fondo transparente que se pone rojo al pasar el mouse. */
.hsjb-btn-cerrar-header {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hsjb-btn-cerrar-header:hover,
.hsjb-btn-cerrar-header:focus {
    background-color: #e81123;
    color: #fff;
    outline: none;
}

/* ---------- Sello de "Desvinculado" en diagonal, desde la foto hasta el
   estado (empleado inactivo). La zona se extiende a todo el ancho de la
   tarjeta (bleed) para que los bordes de la cinta lleguen limpiamente
   hasta los extremos en lugar de quedar "flotando" dentro del recorte. */
.hsjb-desvinculado-zona {
    position: relative;
    overflow: hidden;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.hsjb-sello-desvinculado-diagonal {
    position: absolute;
    top: 42%;
    left: 46%;
    width: 90%;
    transform: translate(-50%, -50%) rotate(-45deg);
    text-align: center;
    border-top: 4px solid rgba(176, 30, 30, 0.85);
    border-bottom: 4px solid rgba(176, 30, 30, 0.85);
    border-left: 4px solid rgba(176, 30, 30, 0.85);
    border-right: 4px solid rgba(176, 30, 30, 0.85);
    border-radius: 12px;
    padding: 0.336rem 0;
    color: rgba(176, 30, 30, 0.9);
    background-color: rgba(255, 255, 255, 0.6);
    font-weight: 800;
    font-size: 1.46rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* Patrón repetitivo (marca de agua) de "Desvinculado" sobre toda la
   tarjeta "DATOS DEL EMPLEADO", visible solo para empleados inactivos.
   Misma imagen que el sello diagonal, pero un 80% más pequeña y
   semitransparente. Orientación horizontal (sin rotación). */
.hsjb-card-desvinculado {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.hsjb-card-desvinculado::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    right: -35%;
    bottom: -35%;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxNDAgNDAiPgogIDxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSIxMzIiIGhlaWdodD0iMzIiIHJ4PSI0IiByeT0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDE3NiwzMCwzMCwwLjA1KSIgc3Ryb2tlLXdpZHRoPSIxLjMiLz4KICA8dGV4dCB4PSI3MCIgeT0iMjUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iODAwIiBmb250LXNpemU9IjcuNSIgbGV0dGVyLXNwYWNpbmc9IjAuNSIgZmlsbD0icmdiYSgxNzYsMzAsMzAsMC4wNSkiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkRFU1ZJTkNVTEFETzwvdGV4dD4KPC9zdmc+Cg==");
    background-repeat: repeat;
    background-size: 190px auto;
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: -1;
}

/* Igual que arriba, pero con el logo institucional en vez del texto
   "Desvinculado", sobre toda la tarjeta "DATOS DEL EMPLEADO", visible
   solo para empleados activos. */
.hsjb-card-activo-marca {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.hsjb-card-activo-marca::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/logo.webp");
    background-repeat: repeat;
    background-size: 130px auto;
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
}

.hsjb-avatar-sm {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--hsjb-borde);
    background-color: #fff;
}

/* ---------- Badges de estado ---------- */
.badge-activo {
    background-color: #e6f7ef;
    color: #0f7a4f;
    border: 1px solid #b6e4cd;
    font-weight: 600;
}

.badge-inactivo {
    background-color: #fdecec;
    color: #a12a2a;
    border: 1px solid #f3c3c3;
    font-weight: 600;
}

.badge-activo, .badge-inactivo {
    padding: 0.35em 0.7em;
    border-radius: 1rem;
    font-size: 0.78rem;
}

/* ---------- Interruptor (switch) para cambiar el estado de un empleado
   desde el listado del panel de administración: verde = activo,
   apagado = inactivo. El cambio real solo ocurre si se confirma en el
   modal de confirmación (ver layout_admin_footer.php). ---------- */
.hsjb-switch-estado .form-check-input {
    width: 2.6em;
    height: 1.45em;
    cursor: pointer;
    margin-top: 0;
}

.hsjb-switch-estado .form-check-input:checked {
    background-color: #0f7a4f;
    border-color: #0f7a4f;
}

.hsjb-switch-estado .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(15, 92, 115, 0.25);
}

/* ---------- Panel de administración: layout con barra lateral ---------- */
.hsjb-admin-shell {
    display: flex;
    min-height: 100vh;
}

.hsjb-sidebar {
    width: 240px;
    flex-shrink: 0;
    background-color: var(--hsjb-primario-oscuro);
    color: #fff;
    min-height: 100vh;
}

.hsjb-sidebar .hsjb-marca {
    background-color: #fff;
    border-radius: 0.5rem;
    margin: 1rem 1rem 0;
    padding: 0.6rem;
}

.hsjb-sidebar .hsjb-marca img {
    max-width: 150px;
    width: 100%;
    height: auto;
}

.hsjb-sidebar a.nav-link {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.6rem 1.25rem;
    border-radius: 0.4rem;
    margin: 0.15rem 0.6rem;
    font-size: 0.92rem;
}

.hsjb-sidebar a.nav-link:hover,
.hsjb-sidebar a.nav-link.activo {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.hsjb-sidebar hr {
    border-color: rgba(255, 255, 255, 0.15);
    margin: 0.75rem 1rem;
}

.hsjb-sidebar .hsjb-usuario {
    padding: 0.75rem 1.25rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

.hsjb-contenido {
    flex-grow: 1;
    padding: 1.75rem;
}

.hsjb-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.hsjb-topbar h4 {
    margin: 0;
    color: var(--hsjb-primario-oscuro);
}

@media (max-width: 768px) {
    .hsjb-admin-shell {
        flex-direction: column;
    }
    .hsjb-sidebar {
        width: 100%;
        min-height: auto;
    }
}

/* ---------- Tablas ---------- */
.table thead th {
    background-color: #eef4f5;
    color: var(--hsjb-primario-oscuro);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: none;
}

.table td {
    vertical-align: middle;
    font-size: 0.92rem;
}

/* ---------- Modal de confirmación ---------- */
.modal-content {
    border: none;
    border-radius: 0.75rem;
}

.hsjb-modal-icono {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background-color: #eef4f5;
    color: var(--hsjb-primario-oscuro);
}

.hsjb-modal-icono-peligro {
    background-color: #fdecec;
    color: #a12a2a;
}

/* ---------- Iconos de las tarjetas KPI del dashboard ---------- */
.hsjb-kpi-icono {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background-color: #eaf1f3;
    color: var(--hsjb-primario-oscuro);
}

.hsjb-kpi-icono-activo {
    background-color: #e6f7ef;
    color: #0f7a4f;
}

.hsjb-kpi-icono-inactivo {
    background-color: #fdecec;
    color: #a12a2a;
}

/* ---------- Panel de administración: color configurable ----------
   Usa --hsjb-panel/--hsjb-panel-oscuro (independientes de
   --hsjb-lila/-oscuro, que son el color de los formularios). Ambos
   pares se pueden cambiar desde admnstrr/configuracion.php. Todo queda
   bajo .hsjb-panel-admin (clase en el <body> de
   layout_admin_header.php) para no afectar las pantallas públicas. */
.hsjb-panel-admin .card-header {
    background-color: var(--hsjb-panel);
}

.hsjb-panel-admin .hsjb-sidebar {
    background-color: var(--hsjb-panel-oscuro);
}

.hsjb-panel-admin .hsjb-topbar h4 {
    color: var(--hsjb-panel-oscuro);
}

.hsjb-panel-admin .table thead th {
    color: var(--hsjb-panel-oscuro);
}

.hsjb-panel-admin .btn-primary {
    background-color: var(--hsjb-panel);
    border-color: var(--hsjb-panel);
}

.hsjb-panel-admin .btn-primary:hover,
.hsjb-panel-admin .btn-primary:focus {
    background-color: var(--hsjb-panel-oscuro);
    border-color: var(--hsjb-panel-oscuro);
}

.hsjb-panel-admin .btn-outline-primary {
    color: var(--hsjb-panel);
    border-color: var(--hsjb-panel);
}

.hsjb-panel-admin .btn-outline-primary:hover {
    background-color: var(--hsjb-panel);
    border-color: var(--hsjb-panel);
}

.hsjb-panel-admin .hsjb-modal-icono {
    background-color: #f3edf5;
    color: var(--hsjb-panel-oscuro);
}

.hsjb-panel-admin .hsjb-kpi-icono {
    background-color: #f3edf5;
    color: var(--hsjb-panel-oscuro);
}

/* Vista previa de color en admnstrr/configuracion.php */
.hsjb-muestra-color {
    display: inline-block;
    width: 100%;
    height: 42px;
    border-radius: 0.5rem;
    border: 1px solid var(--hsjb-borde);
}