/* ============================================================================
   tema.css — identidad visual del sistema.

   Los dos colores de marca llegan como variables desde la base de datos
   (Empresas.ColorPrimario y .ColorSecundario), así que cada clínica ajusta el
   aspecto desde su propia pantalla de configuración sin tocar CSS.

   El resto de tonos se derivan de esos dos con color-mix, para que al cambiar
   la marca cambie el conjunto y no queden piezas sueltas del color anterior.
   ========================================================================== */

/* asp-validation-summary sin errores queda como <div class="alert alert-danger">
   vacío: sin esta regla se ve como una barra rosada en blanco en cada
   formulario, aunque no haya ningún error que mostrar. */
.validation-summary-valid { display: none; }

/* --------------------------------------------------------- overlay "procesando"
   Bloquea toda la pagina (clicks incluidos) mientras corre una busqueda, un
   envio de formulario o cualquier llamada ajax. El anillo gira alrededor del
   logo de KelNatSoft con el color primario de la marca. Ver Sonografia.js. */
#cargandoOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(1px);
}
#cargandoOverlay.d-none { display: none; }
.cargando-anillo {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 5px solid color-mix(in srgb, var(--marca-primario) 18%, white);
    border-top-color: var(--marca-primario);
    animation: cargando-girar 0.9s linear infinite;
}
.cargando-anillo img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: contain;
}
.cargando-texto {
    font-weight: 600;
    color: var(--marca-primario);
    letter-spacing: .02em;
}
@keyframes cargando-girar {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .cargando-anillo { animation: none; }
}

:root {
    /* Valores por defecto; el layout los sobrescribe con los de la empresa. */
    --marca-primario:   #1a237e;
    --marca-secundario: #0d47a1;

    --marca-primario-oscuro: color-mix(in srgb, var(--marca-primario) 80%, black);
    --marca-suave:           color-mix(in srgb, var(--marca-primario) 8%,  white);
    --marca-borde:           color-mix(in srgb, var(--marca-primario) 18%, white);

    --texto:       #1f2733;
    --texto-tenue: #6b7787;
    --fondo:       #f4f6fa;
    --superficie:  #ffffff;
    --linea:       #e3e8ef;
    --radio:       .625rem;
    --sombra:      0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}

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

/* ---------------------------------------------------------------- botones */
.btn-primary {
    --bs-btn-bg: var(--marca-primario);
    --bs-btn-border-color: var(--marca-primario);
    --bs-btn-hover-bg: var(--marca-primario-oscuro);
    --bs-btn-hover-border-color: var(--marca-primario-oscuro);
    --bs-btn-active-bg: var(--marca-primario-oscuro);
    --bs-btn-active-border-color: var(--marca-primario-oscuro);
    --bs-btn-disabled-bg: var(--marca-primario);
    --bs-btn-disabled-border-color: var(--marca-primario);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.btn-outline-primary {
    --bs-btn-color: var(--marca-primario);
    --bs-btn-border-color: var(--marca-borde);
    --bs-btn-hover-bg: var(--marca-primario);
    --bs-btn-hover-border-color: var(--marca-primario);
    --bs-btn-active-bg: var(--marca-primario);
}
.text-primary     { color: var(--marca-primario) !important; }
.bg-primary       { background-color: var(--marca-primario) !important; }
.badge.bg-primary { background-color: var(--marca-primario) !important; }

a       { color: var(--marca-secundario); }
a:hover { color: var(--marca-primario); }

/* ------------------------------------------------------------------- foco */
.form-control:focus, .form-select:focus, .btn:focus-visible {
    border-color: var(--marca-primario);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--marca-primario) 18%, transparent);
}

/* --------------------------------------------------------------- tarjetas */
.card {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.card-header {
    background: var(--superficie);
    border-bottom: 1px solid var(--linea);
    padding: 1rem 1.15rem;
}
.card-title { font-weight: 600; font-size: 1rem; }

/* ---------------------------------------------------- botones de acción
   Patrón aprobado en el canvas de diseño: cuadrados, solo ícono. Editar en
   contorno, eliminar sólido en rojo — así resalta que es la acción que
   quita algo del sistema. */
.table .btn-sm {
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
}
.table .btn-outline-danger.btn-sm {
    --bs-btn-color: #fff;
    --bs-btn-bg: #e64545;
    --bs-btn-border-color: #e64545;
    --bs-btn-hover-bg: #d33a3a;
    --bs-btn-hover-border-color: #d33a3a;
}

/* -------------------------------------------------- opciones tactiles
   Casillas y radios de los formularios de preconsulta (tablet): se ven y
   se tocan como botones-pastilla, no como checkboxes diminutos. */
.opcion-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.1rem; border: 1.5px solid var(--linea); border-radius: 999px;
    cursor: pointer; user-select: none; font-size: .88rem; background: #fff;
    transition: background .15s, border-color .15s, color .15s;
}
.opcion-pill input { display: none; }
.opcion-pill.activa {
    background: var(--marca-primario); border-color: var(--marca-primario); color: #fff; font-weight: 600;
}
.opciones-grid { display: flex; flex-wrap: wrap; gap: .6rem; }

.escala-touch { display: flex; flex-wrap: wrap; gap: .4rem; }
.escala-touch .opcion-pill { padding: .5rem 0; width: 2.6rem; justify-content: center; }

@media (max-width: 575.98px) {
    .opcion-pill { font-size: .82rem; padding: .55rem .9rem; }
}

/* ------------------------------------------------------ buscador de tabla
   Ocupa el lugar donde antes iba el selector "Mostrar N registros": más
   ancho que el default de DataTables, para que quepa un texto real. */
.dt-search input,
.dataTables_filter input {
    min-width: 22rem;
}
@media (max-width: 575.98px) {
    .dt-search input,
    .dataTables_filter input {
        min-width: 100%;
    }
}

/* ----------------------------------------------------------------- tablas */
.table > thead > tr > th {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    font-weight: 600;
    border-bottom-width: 1px;
}
.table > tbody > tr:hover > * {
    background-color: color-mix(in srgb, var(--marca-primario) 4%, white);
}

/* -------------------------------------------------- barra superior y título */
.app-header { border-bottom: 1px solid var(--linea); }
.app-content-header h3 { font-weight: 700; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- sidebar

   Sidebar oscuro con los colores de marca (--marca-primario de fondo,
   --marca-secundario en las franjas de encabezado/buscador/usuario) —
   el mismo patrón visual de Hotel Paradise & Suites, el otro producto
   KelNatSoft que el cliente usa como referencia exacta. El bloque blanco
   que hubo antes fue un intento fallido de "arreglar" un bug de modo
   oscuro del navegador (ver _Layout.cshtml, data-lte-color-mode="off");
   una vez resuelto ese bug, el sidebar oscuro vuelve a ser una elección
   de diseño válida, no el problema. */
.app-sidebar {
    background: var(--marca-primario) !important;
    border-right: 0;
}
.app-sidebar .sidebar-brand {
    background: var(--marca-secundario);
    border-bottom: 0;
}
.app-sidebar .brand-text { font-weight: 700; color: #fff; }
.app-sidebar .sidebar-brand .text-body-secondary,
.app-sidebar .sidebar-brand small {
    color: rgba(255, 255, 255, .65) !important;
}

.sidebar-buscar {
    background: var(--marca-secundario);
    padding: 0 .75rem .6rem;
    position: relative;
}
.sidebar-buscar input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: .5rem;
    padding: .4rem 1.6rem .4rem 1.9rem;
    font-size: .78rem;
    outline: none;
}
.sidebar-buscar input::placeholder { color: rgba(255, 255, 255, .55); }
.sidebar-buscar input:focus {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .45);
}
.sidebar-buscar .icono-buscar {
    position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
    color: rgba(255, 255, 255, .55); font-size: .7rem; pointer-events: none;
}
.sidebar-buscar .icono-limpiar {
    position: absolute; right: 1.15rem; top: 50%; transform: translateY(-50%);
    color: rgba(255, 255, 255, .55); font-size: .75rem; cursor: pointer; display: none;
}
.sidebar-buscar .icono-limpiar:hover { color: #fff; }
.sidebar-sin-resultados {
    color: rgba(255, 255, 255, .5);
    font-size: .78rem;
    padding: .9rem;
    text-align: center;
}

.app-sidebar .nav-header {
    color: rgba(255, 255, 255, .45);
    opacity: 1;
}
.app-sidebar .sidebar-menu > .nav-item > .nav-link,
.app-sidebar .nav-treeview > .nav-item > .nav-link {
    color: rgba(255, 255, 255, .85);
    border-radius: .5rem;
    margin: .1rem .5rem;
    border-left: 0;
}
.app-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
/* El grupo ABIERTO (p. ej. "Gestión" desplegado) usa el color secundario de
   la marca: un tercer estado, distinto del simple hover y de la página
   activa, para que no se confundan entre sí. */
.app-sidebar .nav-item.menu-open > .nav-link {
    background: var(--marca-secundario);
    color: #fff;
}
.app-sidebar .nav-link.active {
    background: #fff !important;
    color: var(--marca-primario) !important;
    font-weight: 700;
}
.app-sidebar .nav-link.active .nav-icon,
.app-sidebar .nav-link:hover .nav-icon {
    color: inherit;
}
.app-sidebar .nav-icon { color: rgba(255, 255, 255, .7); }
.app-sidebar .nav-link.active .nav-arrow,
.app-sidebar .nav-link:hover .nav-arrow {
    color: inherit;
}
.app-sidebar .nav-arrow { color: rgba(255, 255, 255, .55); font-size: .68rem; }

.sidebar-usuario {
    background: var(--marca-secundario);
    padding: .7rem .9rem;
    display: flex; align-items: center; gap: .6rem;
}
.sidebar-usuario .avatar {
    height: 34px; width: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .2); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.sidebar-usuario .nombre { color: #fff; font-weight: 600; font-size: .82rem; }
.sidebar-usuario .estado { color: rgba(255, 255, 255, .65); font-size: .72rem; }

/* -------------------------------------------------------------- small-box */
.small-box { border-radius: var(--radio); box-shadow: var(--sombra); }
.small-box .small-box-icon { opacity: .28; }

/* ============================================================================
   Pantalla de acceso: mitad de marca, mitad formulario.
   ========================================================================== */
.acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .acceso { grid-template-columns: 1.1fr .9fr; }
}

.acceso-marca {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 3.5rem;
    color: #fff;
    background: linear-gradient(135deg,
                var(--marca-primario) 0%,
                var(--marca-secundario) 100%);
    flex-direction: column;
    justify-content: space-between;
}
@media (min-width: 992px) { .acceso-marca { display: flex; } }

/* Los círculos dan profundidad sin cargar ninguna imagen. */
.acceso-marca::before,
.acceso-marca::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}
.acceso-marca::before { width: 34rem; height: 34rem; top: -9rem;     right: -7rem; }
.acceso-marca::after  { width: 26rem; height: 26rem; bottom: -11rem; left: -8rem; }

.acceso-marca > * { position: relative; z-index: 1; }

.acceso-logo { display: flex; align-items: center; gap: .9rem; }
.acceso-logo img { height: 46px; border-radius: .5rem; background: #fff; padding: .3rem; }
.acceso-logo .nombre { font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.acceso-logo .lema   { font-size: .85rem; opacity: .8; }

.acceso-etiqueta {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    margin-bottom: 1.75rem;
}

.acceso-titular {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 1rem;
    max-width: 16ch;
}
.acceso-bajada { font-size: 1.02rem; opacity: .85; max-width: 44ch; margin: 0; }

.acceso-puntos { display: flex; gap: 2.5rem; margin-top: 2.5rem; }
.acceso-punto  { text-align: center; }
.acceso-punto i { font-size: 1.3rem; display: block; margin-bottom: .45rem; opacity: .9; }
.acceso-punto span { font-size: .85rem; opacity: .85; }

.acceso-pie { font-size: .8rem; opacity: .7; }

.acceso-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--fondo);
}
.acceso-caja {
    width: 100%;
    max-width: 26rem;
    background: var(--superficie);
    border-radius: 1rem;
    padding: 2.25rem;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .1);
}
.acceso-caja h1  { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; }
.acceso-caja .sub { color: var(--texto-tenue); font-size: .92rem; margin-bottom: 1.75rem; }
.acceso-caja .form-label { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.acceso-caja .input-group-text {
    background: var(--marca-suave);
    border-right: 0;
    color: var(--marca-primario);
}
.acceso-caja .input-group .form-control { border-left: 0; }
.acceso-caja .btn-primary { padding: .65rem; font-weight: 600; }

.acceso-enlaces { text-align: center; margin-top: 1.25rem; }
.acceso-enlaces a { display: block; font-size: .88rem; margin-top: .5rem; text-decoration: none; }

/* Marca del fabricante, discreta al pie del panel. */
.acceso-fabricante {
    text-align: center; margin-top: 2rem;
    font-size: .75rem; color: var(--texto-tenue);
}

/* Select2: que no se vea angosto ni con el resaltado azul por defecto --
   se busca con frecuencia (provincias, municipios, distritos, pacientes),
   así que se acompasa con el color de marca. */
.select2-container { min-width: 12rem; }
.select2-container--default .select2-selection--single {
    height: calc(1.5em + .8rem + 2px);
    border-color: #ced4da;
    border-radius: .375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .8rem);
    padding-left: .75rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .8rem);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--marca-primario);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--marca-primario) 25%, transparent);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--marca-primario) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline-color: var(--marca-primario);
}

/* Ficha del paciente (y cualquier otra pantalla con pestañas): la pestaña
   activa se marca con el color de marca para que se note cual esta abierta. */
.nav-tabs .nav-link.active {
    color: var(--marca-primario);
    font-weight: 600;
    border-bottom: 3px solid var(--marca-primario);
}
.acceso-fabricante img { height: 22px; opacity: .55; display: block; margin: 0 auto .4rem; }

/* Un botón deshabilitado normalmente no dispara "mouseover" (el navegador
   lo trata como si no estuviera ahí), así que su tooltip nunca aparecía.
   Se le devuelve la capacidad de recibir el mouse solo para ese fin --
   sigue sin poder hacer click, eso lo sigue bloqueando "disabled". */
.btn:disabled[data-bs-toggle="tooltip"],
.btn.disabled[data-bs-toggle="tooltip"] {
    pointer-events: auto;
}

/* El pie "Usuario: X (Rol: Y) fecha hora" de los documentos e informes:
   que la fecha y la hora nunca se corten en una línea aparte. */
.pie-generado {
    white-space: nowrap;
}

/* .card-header.d-flex.justify-content-between no empuja el ultimo elemento
   hasta el borde derecho en este tema (el titulo y los botones de
   exportar quedaban pegados en vez de separados a los extremos) -- se
   refuerza con margin-left:auto en el ultimo hijo, que si respeta el
   ancho real del header. No se toca cuando el header trae un solo
   elemento (nada que empujar). */
.card-header.d-flex.justify-content-between > *:last-child:not(:only-child) {
    margin-left: auto;
}

/* Chips de "tipo de evento" en la linea de tiempo clinica: redondos, y el
   que esta activo en verde claro (no el azul de marca, para no confundirlo
   con un enlace o boton primario). */
#filtroTipoEvento .btn.active {
    background-color: #d1f2dc;
    border-color: #a3e4b8;
    color: #146c2e;
}

/* Botones de menu: al hacer clic se marcan de una vez, sin esperar a que
   cargue la pagina destino -- feedback inmediato en vez de sentirse "sin
   respuesta" durante la navegacion. */
.app-sidebar .nav-link.clic-inmediato {
    background: var(--marca-secundario) !important;
    color: #fff !important;
}

/* Matriz de permisos (Perfiles/Permisos): pantallas en filas, acciones en
   columnas fijas del catalogo dbo.Acciones -- mas facil de escanear que una
   lista de checkboxes envueltos por fila. */
.permisos-matriz .col-pantalla {
    min-width: 14rem;
}

.permisos-matriz .col-accion {
    min-width: 4.5rem;
}

.permisos-matriz thead th {
    background-color: var(--bs-tertiary-bg);
    vertical-align: middle;
    border-bottom-width: 2px;
}

.permisos-matriz thead .col-accion i {
    color: var(--marca-primario, #6c757d);
}

.fila-grupo td {
    background-color: var(--bs-tertiary-bg);
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* Excepciones de usuario: la fila entera se tine apenas se elige Conceder/Negar,
   para que las desviaciones del perfil salten a la vista sin leer cada radio. */
.fila-excepcion.tiene-concede { background-color: color-mix(in srgb, var(--bs-success) 6%, transparent); }
.fila-excepcion.tiene-niega   { background-color: color-mix(in srgb, var(--bs-danger) 6%, transparent); }

.permisos-matriz .chk-permiso {
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
}

.permisos-matriz .chk-permiso:disabled {
    cursor: not-allowed;
}

/* Modulos: las filas de grupo (contenedores del menu) se resaltan un poco
   para separarlas visualmente de las pantallas que agrupan. */
.tabla-modulos .fila-grupo-modulo {
    background-color: var(--bs-tertiary-bg);
}