/* eKinex: estilos propios sobre Bootstrap 5.3. Colores de marca del legado (#0D5EA3 / #00BBE5). */
:root {
    --ek-azul: #0D5EA3;
    --ek-azul-oscuro: #0A4A82;
    --ek-azul-claro: #00BBE5;
    --ek-azul-suave: #EAF2FA;
    --ek-fondo: #F4F6F9;
    --ek-borde: #E2E7EE;
    --ek-texto: #1D2939;
    --ek-texto-suave: #5B6577;
    --ek-sombra: 0 1px 2px rgba(16, 24, 40, .05);

    /* Bootstrap: primario = azul de marca. */
    --bs-primary: var(--ek-azul);
    --bs-primary-rgb: 13, 94, 163;
    --bs-link-color: var(--ek-azul);
    --bs-link-color-rgb: 13, 94, 163;
    --bs-link-hover-color: var(--ek-azul-oscuro);
    --bs-link-hover-color-rgb: 10, 74, 130;
    --bs-body-color: var(--ek-texto);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-border-color: var(--ek-borde);
    --bs-secondary-color: var(--ek-texto-suave);
    --bs-focus-ring-color: rgba(13, 94, 163, .25);
}
body { background: var(--ek-fondo); font-size: .925rem; }
/* Solo en campos que escribe el usuario; los nombres se muestran con Texto.NombrePropio. */
.capitalizar { text-transform: capitalize; }

.btn-primary {
    --bs-btn-bg: var(--ek-azul); --bs-btn-border-color: var(--ek-azul);
    --bs-btn-hover-bg: var(--ek-azul-oscuro); --bs-btn-hover-border-color: var(--ek-azul-oscuro);
    --bs-btn-active-bg: var(--ek-azul-oscuro); --bs-btn-active-border-color: var(--ek-azul-oscuro);
    --bs-btn-disabled-bg: var(--ek-azul); --bs-btn-disabled-border-color: var(--ek-azul);
}
.btn-outline-primary {
    --bs-btn-color: var(--ek-azul); --bs-btn-border-color: var(--ek-azul);
    --bs-btn-hover-bg: var(--ek-azul); --bs-btn-hover-border-color: var(--ek-azul);
    --bs-btn-active-bg: var(--ek-azul-oscuro); --bs-btn-active-border-color: var(--ek-azul-oscuro);
}
.pagination { --bs-pagination-active-bg: var(--ek-azul); --bs-pagination-active-border-color: var(--ek-azul); --bs-pagination-color: var(--ek-azul); }
/* Paginador centrado de la bandeja: botones con más aire, extremos (Anterior/Siguiente) en gris. */
.paginador { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin: 1rem 0 .5rem; }
.paginador .pagination { --bs-pagination-padding-x: .85rem; --bs-pagination-padding-y: .4rem; --bs-pagination-font-size: .875rem; --bs-pagination-border-color: #D0D5DD; --bs-pagination-hover-bg: var(--ek-azul-suave); --bs-pagination-hover-color: var(--ek-azul-oscuro); --bs-pagination-disabled-color: #98A2B3; flex-wrap: wrap; justify-content: center; box-shadow: var(--ek-sombra); border-radius: .4rem; }
.paginador .page-link { min-width: 2.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.paginador .extremo .page-link { background: #F2F4F7; color: var(--ek-texto); }
.paginador .extremo .page-link:hover { background: #E4E7EC; }
.paginador .extremo.disabled .page-link { background: #F9FAFB; color: #98A2B3; }
.paginador-resumen { font-size: .8rem; color: var(--ek-texto-suave); }
.paginador-resumen strong { color: var(--ek-texto); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    .paginador .pagination { --bs-pagination-padding-x: .55rem; flex-wrap: nowrap; }
    .paginador .page-link { min-width: 2.1rem; }
    .paginador .lejana { display: none; }
}
.list-group { --bs-list-group-active-bg: var(--ek-azul); --bs-list-group-active-border-color: var(--ek-azul); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #7FA9D1; box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--ek-azul); border-color: var(--ek-azul); }
.form-label { color: var(--ek-texto-suave); font-weight: 500; }
.form-label.small { font-size: .78rem; }

/* Barra superior */
.bg-ek { background: var(--ek-azul); }
.navbar-ek { padding-top: .35rem; padding-bottom: .35rem; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.navbar-ek .navbar-brand { font-weight: 700; letter-spacing: .01em; font-size: 1.2rem; }
.navbar-ek .navbar-brand span { color: var(--ek-azul-claro); }
.navbar-ek .nav-link { color: rgba(255, 255, 255, .82); border-radius: .375rem; padding-left: .7rem !important; padding-right: .7rem !important; }
.navbar-ek .nav-link:hover, .navbar-ek .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .08); }
.navbar-ek .nav-link.active, .navbar-ek .nav-link.show { color: #fff; background: rgba(255, 255, 255, .14); font-weight: 600; }
.navbar-ek .dropdown-menu { border-color: var(--ek-borde); box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.navbar-ek .dropdown-item.active, .navbar-ek .dropdown-item:active { background: var(--ek-azul); }
.navbar-ek .usuario { line-height: 1.15; text-align: right; }
.navbar-ek .usuario .nombre { color: #fff; font-weight: 600; }
.navbar-ek .usuario .reloj { color: rgba(255, 255, 255, .65); font-size: .75rem; }
.navbar-ek .avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.navbar-ek .usuario:hover .avatar { background: rgba(255, 255, 255, .28); }
.navbar-ek .navbar-toggler { border-color: rgba(255, 255, 255, .25); padding: .25rem .5rem; }
.busqueda-rapida { width: 15rem; }
@media (max-width: 1199.98px) { .busqueda-rapida { width: 12rem; } }
.busqueda-rapida .form-control { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
.busqueda-rapida .form-control::placeholder { color: rgba(255, 255, 255, .7); }
.busqueda-rapida .form-control:focus { background: #fff; color: var(--ek-texto); }
.busqueda-rapida .form-control:focus::placeholder { color: var(--ek-texto-suave); }
@media (max-width: 991.98px) {
    .navbar-ek .navbar-collapse { margin-top: .4rem; }
    .acciones-barra { flex: 1 1 auto; justify-content: flex-end; }
    .busqueda-rapida { flex: 0 1 15rem; width: auto; min-width: 0; }
}
@media (max-width: 575.98px) {
    .acciones-barra { flex: 1 1 0; min-width: 0; }
    .busqueda-rapida { flex: 1 1 auto; }
}

/* Encabezado de página */
.titulo-pagina { font-size: 1.3rem; font-weight: 600; margin: 0; }
.subtitulo-pagina { color: var(--ek-texto-suave); font-size: .85rem; }

/* Paneles */
.panel { background: #fff; border: 1px solid var(--ek-borde); border-radius: .6rem; padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--ek-sombra); }
.panel > h2 { font-size: .78rem; font-weight: 700; margin-bottom: .85rem; color: var(--ek-texto-suave); text-transform: uppercase; letter-spacing: .06em; }

/* Indicadores */
.kpi { background: #fff; border-radius: .6rem; padding: .75rem 1rem; border: 1px solid var(--ek-borde); box-shadow: var(--ek-sombra); height: 100%; }
.kpi .valor { font-size: 1.5rem; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .etiqueta { color: var(--ek-texto-suave); font-size: .78rem; }

/* Tablas */
.tabla-ek { font-size: .85rem; --bs-table-hover-bg: var(--ek-azul-suave); }
.tabla-ek > thead th { white-space: nowrap; background: var(--ek-azul); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 0; padding-top: .65rem; padding-bottom: .65rem; }
.tabla-ek > thead th a { color: #fff; }
.tabla-ek td { vertical-align: middle; }
.tabla-ek td.celda-compacta { font-size: .8rem; }
/* Cabeceras ordenables: la flecha tenue avisa que se puede ordenar; la de la columna activa va destacada.
   Va fuera del flujo, sobre el relleno entre columnas: la tabla ya está justa a 1024 y 1280 y no debe ensancharse. */
.tabla-ek > thead th a.th-orden { position: relative; display: inline-block; text-decoration: none; }
.tabla-ek > thead th a.th-orden:hover, .tabla-ek > thead th a.th-orden:focus-visible { text-decoration: underline; }
.th-orden .flecha { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 1px; font-size: .5rem; line-height: 1; letter-spacing: 0; opacity: .45; }
.th-orden.activa .flecha { opacity: 1; }
.tabla-ek tr[data-href] { cursor: pointer; }
.tabla-ek .num-ept { font-weight: 600; text-decoration: none; }
/* Cebra plomiza: filas pares en gris suave; el hover (--bs-table-bg-state) sigue mandando. */
.tabla-cebra > tbody > tr:nth-of-type(even) > * { --bs-table-bg-type: #ECEFF3; }
.contenedor-tabla { overflow-x: auto; border-radius: .6rem; }
.panel.p-0 { overflow: hidden; }
/* Bandeja (pantalla ancha): sin scroll propio, títulos fijos al bajar por la página. */
@media (min-width: 992px) {
    .panel.tabla-fija { overflow: visible; }
    .panel.tabla-fija .contenedor-tabla { overflow: visible; }
    .panel.tabla-fija .tabla-ek > thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
    .panel.tabla-fija .tabla-ek > thead th:first-child { border-top-left-radius: .6rem; }
    .panel.tabla-fija .tabla-ek > thead th:last-child { border-top-right-radius: .6rem; }
}

/* Bandeja en pantallas medianas y celulares */
.tarjeta-ept { background: #fff; border: 1px solid var(--ek-borde); border-radius: .6rem; padding: .75rem .9rem; box-shadow: var(--ek-sombra); height: 100%; }
.tarjeta-ept.clicable { cursor: pointer; }
.tarjeta-ept.clicable:hover { border-color: #B9CFE6; background: #FBFDFF; }
.tarjeta-ept .num-ept { font-weight: 700; text-decoration: none; }
.tarjeta-ept .datos { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; row-gap: .1rem; }
.tarjeta-ept .datos dt { font-weight: 500; color: var(--ek-texto-suave); }
.tarjeta-ept .datos dd { margin: 0; }

.badge-estado { font-weight: 600; font-size: .75rem; padding: .3em .6em; border-radius: 1rem; display: inline-block; white-space: nowrap; }
/* Estado de la cuenta (administración de usuarios). */
.badge-estado.cuenta-activa { background: #ECFDF3; color: #067647; }
.badge-estado.cuenta-inactiva { background: #F2F4F7; color: #475467; }
.badge-estado.cuenta-bloqueada { background: #FEF3F2; color: #B42318; }
.badge-estado.cuenta-vencida { background: #FFFAEB; color: #B54708; }
.indicador { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.indicador.fuera { background: #D92D20; }
.indicador.en-plazo { background: #12B76A; }
.indicador.visto { background: var(--ek-azul-claro); }
.indicador.no-visto { background: #D0D5DD; }
/* Doble check azul junto al kinesiólogo (bandeja), al estilo de "leído" en WhatsApp. */
.check-visto { display: inline-flex; margin-left: .3rem; color: #34B7F1; font-size: 1rem; vertical-align: -.2em; }

/* Progreso de la EPT (informativo, no son botones) */
/* Ficha: cabecera con número destacado y estados en flechas (como el sistema anterior). */
/* Doble clase: el padding de .panel en pantallas chicas (más abajo) no debe pisarlo. */
.panel.ficha-cabecera { padding: 0; overflow: hidden; }
.fc-principal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: .9rem 1.1rem; background: linear-gradient(180deg, #E4E7EC 0%, #D5DAE1 100%); border-bottom: 1px solid #C9CFD8; }
.fc-titulo { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.fc-icono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .6rem; background: var(--ek-azul); color: #fff; font-size: 1.35rem; }
.fc-sup { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ek-texto-suave); }
.fc-titulo .titulo-pagina { display: flex; align-items: center; gap: .5rem; line-height: 1.25; }
.num-destacado { display: inline-block; padding: .05rem .55rem; border-radius: .4rem; background: #F0A830; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-sub { font-size: .8rem; color: var(--ek-texto-suave); }
.fc-sub strong { color: var(--ek-texto); font-weight: 600; }
.fc-principal.sin-meta { border-bottom: 0; }
.fc-pasos { overflow-x: auto; max-width: 100%; }
.fc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; padding: .55rem 1.1rem; font-size: .8rem; color: var(--ek-texto-suave); }
.fc-meta strong { color: var(--ek-texto); font-weight: 600; }
.fc-meta .visto { color: var(--ek-azul); font-weight: 600; }
.fc-meta .visto .ico { font-size: 1rem; vertical-align: -.2em; }

.pasos-flecha { display: flex; list-style: none; margin: 0; padding: 0; width: max-content; min-width: 100%; border: 1px solid var(--ek-borde); border-radius: .5rem; overflow: hidden; background: #fff; counter-reset: paso; }
.pasos-flecha li { position: relative; flex: 1 0 auto; display: flex; align-items: center; gap: .4rem; height: 2.4rem; padding: 0 1.45rem 0 1.5rem; font-size: .78rem; color: #98A2B3; white-space: nowrap; background: #fff; counter-increment: paso; }
.pasos-flecha li:first-child { padding-left: .7rem; }
.pasos-flecha li::before { content: counter(paso); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: .68rem; font-weight: 700; }
/* La punta de la flecha es un cuadrado girado que se monta sobre el paso siguiente. */
.pasos-flecha li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -.85rem; top: 50%; width: 1.7rem; height: 1.7rem; background: inherit; border-top: 2px solid var(--ek-borde); border-right: 2px solid var(--ek-borde); transform: translateY(-50%) rotate(45deg); }
.pasos-flecha li.pasado { background: var(--ek-azul-suave); color: var(--ek-azul); }
.pasos-flecha li.pasado::before { content: "✓"; background: var(--ek-azul); border-color: var(--ek-azul); color: #fff; }
.pasos-flecha li.actual { background: var(--ek-azul); color: #fff; font-weight: 600; }
.pasos-flecha li.actual::before { background: #fff; border-color: #fff; color: var(--ek-azul); }
.pasos-flecha li.pasado::after, .pasos-flecha li.actual::after { border-color: #fff; }

/* Íconos (máscaras SVG: toman el color del texto; la CSP permite data: en imágenes). */
.ico { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--i) no-repeat center / contain; mask: var(--i) no-repeat center / contain; }
.ico-ficha { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5.5 1h5v1.5H12A1.5 1.5 0 0 1 13.5 4v10a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 14V4A1.5 1.5 0 0 1 4 2.5h1.5zM6.5 2v1.5h3V2zM5 7h6v1.2H5zm0 2.6h6v1.2H5zm0 2.6h4v1.2H5z'/%3E%3C/svg%3E"); }
.ico-persona { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='4.8' r='3.2'/%3E%3Cpath d='M1.8 15c0-3.4 2.8-5.6 6.2-5.6s6.2 2.2 6.2 5.6z'/%3E%3C/svg%3E"); }
.ico-personas { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5.5' cy='5' r='2.6'/%3E%3Ccircle cx='11.3' cy='5.6' r='2.1'/%3E%3Cpath d='M.5 14c0-2.9 2.2-4.8 5-4.8s5 1.9 5 4.8zM11.5 14c0-1.7-.5-3.1-1.5-4.1.4-.1.9-.2 1.3-.2 2.4 0 4.2 1.6 4.2 4.3z'/%3E%3C/svg%3E"); }
.ico-tarjeta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='1.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='5.5' cy='7' r='1.6'/%3E%3Cpath d='M3 11c.4-1.3 1.3-2 2.5-2s2.1.7 2.5 2zM9.5 6.4h4v1.2h-4zM9.5 8.9h3v1.2h-3z'/%3E%3C/svg%3E"); }
.ico-maletin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 1.5h4a1 1 0 0 1 1 1V4h3a1 1 0 0 1 1 1v8.5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3V2.5a1 1 0 0 1 1-1zm.2 1.2V4h3.6V2.7z'/%3E%3C/svg%3E"); }
.ico-reloj { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7.3 4h1.4v3.6l2.6 1.6-.7 1.2-3.3-2z'/%3E%3C/svg%3E"); }
.ico-atras { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.4 2.3 4.7 8l5.7 5.7 1.1-1.1L6.9 8l4.6-4.6z'/%3E%3C/svg%3E"); }
.ico-fono { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 1.3 6 1l1.4 3.3-1.7 1.3a8 8 0 0 0 4.7 4.7l1.3-1.7L15 10l-.3 2.5a1.6 1.6 0 0 1-1.7 1.3C7 13.3 2.7 9 2.3 3a1.6 1.6 0 0 1 1.3-1.7z'/%3E%3C/svg%3E"); }
.ico-movil { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='1' width='8' height='14' rx='1.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='12.2' r='.95'/%3E%3C/svg%3E"); }
.ico-correo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='1.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='m1.8 4.2 6.2 4.6 6.2-4.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); }
.ico-edificio { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 1h8v14H2zM4 3h1.5v1.5H4zM6.5 3H8v1.5H6.5zM4 6h1.5v1.5H4zM6.5 6H8v1.5H6.5zM4 9h1.5v1.5H4zM6.5 9H8v1.5H6.5zM5 12h2v3H5z'/%3E%3Cpath d='M11 6h3.5v9H11z'/%3E%3C/svg%3E"); }
.ico-flechas { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 1.5 14.5 5 11 8.5V6H3V4h8zM5 7.5V10h8v2H5v2.5L1.5 11z'/%3E%3C/svg%3E"); }
.ico-lista { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3h2v2h-2zM5 3.3h9.5v1.4H5zM1.5 7h2v2h-2zM5 7.3h9.5v1.4H5zM1.5 11h2v2h-2zM5 11.3h9.5v1.4H5z'/%3E%3C/svg%3E"); }
.ico-chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12a1 1 0 0 1 1 1v7.5a1 1 0 0 1-1 1H6.2L2.5 14.5v-3H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.ico-visto { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.3 8.6 1.4 7.5 4.5 10.6 11 4.1l1.1 1.1-7.6 7.6zM7.4 11.5l6.5-6.5L15 6.1l-7.6 7.6z'/%3E%3C/svg%3E"); }

/* Títulos de sección con ícono y campos con ícono a la derecha; los valores van en azul. */
.panel > h2.con-icono { display: flex; align-items: center; gap: .5rem; color: var(--ek-texto); }
.panel > h2.con-icono .ico { font-size: 1.05rem; color: var(--ek-azul); }
.ficha .form-control, .ficha .form-select { color: var(--ek-azul-oscuro); font-weight: 500; }
.ficha .form-control::placeholder { color: #98A2B3; font-weight: 400; }
.ficha .input-group-text { background: var(--ek-fondo); color: var(--ek-texto-suave); min-width: 2.2rem; justify-content: center; }
.ficha .input-group-text .ico { font-size: .95rem; }
/* Crear EPT: segmentos marcados resaltados. */
.tabla-segmentos tbody tr:has(.form-check-input:checked) > td { background: var(--ek-azul-suave); }
.tabla-segmentos tbody tr:has(.form-check-input:checked) .form-check-label { color: var(--ek-azul-oscuro); font-weight: 600; }

/* Resultados del buscador de empresas (ficha EPT): cada coincidencia como fila con ícono y botón. */
.resultados-empresa { margin-top: .4rem; border: 1px solid var(--ek-borde); border-radius: .5rem; background: #fff; box-shadow: 0 4px 12px rgba(16, 24, 40, .08); overflow: hidden; }
.resultados-empresa.vacio { padding: .55rem .75rem; box-shadow: none; background: var(--ek-fondo); }
.re-cabecera { padding: .3rem .75rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ek-texto-suave); background: var(--ek-fondo); border-bottom: 1px solid var(--ek-borde); }
.resultados-empresa ul { max-height: 16rem; overflow-y: auto; }
.resultados-empresa li { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; border-bottom: 1px solid var(--ek-borde); }
.resultados-empresa li:last-child { border-bottom: 0; }
.resultados-empresa li:hover { background: var(--ek-azul-suave); }
.re-icono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ek-azul-suave); color: var(--ek-azul); font-size: .95rem; }
.resultados-empresa li:hover .re-icono { background: var(--ek-azul); color: #fff; }
.re-datos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.re-nombre { font-size: .82rem; font-weight: 600; color: var(--ek-texto); overflow-wrap: anywhere; }
.re-rut { font-size: .74rem; color: var(--ek-texto-suave); font-variant-numeric: tabular-nums; }

/* Modales con contenido htmx: el formulario envuelve cuerpo y pie, así que se le pasa el flex para que con
   .modal-dialog-scrollable solo el cuerpo haga scroll y los botones queden siempre a la vista. */
.modal-dialog-scrollable [data-modal-contenido], .modal-dialog-scrollable [data-modal-contenido] > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.modal-title.con-icono { display: flex; align-items: center; gap: .5rem; }
.modal-title.con-icono .ico { color: var(--ek-azul); }
.input-validation-error { border-color: var(--bs-danger); }

/* Seguimiento */
.linea-tiempo { list-style: none; padding-left: 0; margin: 0; position: relative; }
.linea-tiempo li { position: relative; padding: .55rem .75rem .55rem 1.35rem; margin-bottom: .1rem; }
.linea-tiempo li::before { content: ""; position: absolute; left: .3rem; top: 0; bottom: 0; width: 2px; background: var(--ek-borde); }
.linea-tiempo li::after { content: ""; position: absolute; left: .07rem; top: .85rem; width: .6rem; height: .6rem; border-radius: 50%; background: #fff; border: 2px solid var(--ek-azul); }
.linea-tiempo li:first-child::before { top: .85rem; }
.linea-tiempo li:last-child::before { bottom: auto; height: .85rem; }
.linea-tiempo .comentario { margin-top: .2rem; background: var(--ek-fondo); border-radius: .4rem; padding: .35rem .55rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.texto-multilinea { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Crece con el texto donde el navegador lo permite; en los demás se puede estirar a mano. */
textarea.campo-comentario { resize: vertical; field-sizing: content; min-height: 4.5rem; max-height: 16rem; }

/* Barra de acciones fija al pie del formulario */
.barra-acciones { position: sticky; bottom: .75rem; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: .75rem; padding: .6rem .75rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--ek-borde); border-radius: .6rem; box-shadow: 0 4px 16px rgba(16, 24, 40, .1); }
.barra-acciones .aviso-cambios { color: #B54708; font-size: .85rem; }
.barra-acciones .btn { white-space: nowrap; }

/* Selección múltiple con casillas (filtro de origen) */
.multi-casillas > .form-select { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-casillas .dropdown-menu { max-height: 18rem; overflow-y: auto; min-width: 100%; }
.multi-casillas .form-check { margin: 0; padding: .3rem .75rem .3rem 2.25rem; }
.multi-casillas .form-check:hover { background: var(--ek-azul-suave); }
.multi-casillas .form-check-label { width: 100%; cursor: pointer; }

/* Selector de rango de fechas (rango-fechas.js) */
.rango-fechas { position: relative; }
.rf-boton { display: flex; align-items: center; gap: .5rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--ek-texto-suave); }
.rf-boton.rf-con-valor { color: var(--ek-texto); font-variant-numeric: tabular-nums; }
.rf-icono { flex: 0 0 auto; width: 1rem; height: 1rem; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235B6577'%3E%3Cpath d='M4 .5a.5.5 0 0 1 1 0V1h6V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5zM2 5v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5H2zm2 2h2v2H4V7zm3 0h2v2H7V7zm3 0h2v2h-2V7z'/%3E%3C/svg%3E"); }
.rf-panel { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 1060; display: flex; background: #fff; border: 1px solid var(--ek-borde); border-radius: .6rem; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); overflow: hidden; }
.rf-panel[hidden] { display: none; }
.rf-panel.rf-derecha { left: auto; right: 0; }
.rf-atajos { list-style: none; margin: 0; padding: .4rem 0; min-width: 10.5rem; border-right: 1px solid var(--ek-borde); }
.rf-atajo { display: block; width: 100%; padding: .5rem 1rem; border: 0; background: none; text-align: left; font-size: .875rem; color: var(--ek-texto); }
.rf-atajo:hover { background: var(--ek-azul-suave); }
.rf-atajo.activo { background: var(--ek-azul); color: #fff; }
.rf-cuerpo { display: flex; flex-direction: column; }
.rf-meses { display: flex; gap: 1.5rem; padding: .75rem 1rem .5rem; }
.rf-mes { width: 16.5rem; }
.rf-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.rf-titulo { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.rf-nav { border: 0; background: none; font-size: 1.4rem; line-height: 1; width: 2rem; height: 2rem; border-radius: .4rem; color: var(--ek-texto); }
.rf-nav:hover { background: var(--ek-azul-suave); }
.rf-grilla { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .15rem; }
.rf-dia-semana { text-align: center; font-size: .72rem; font-weight: 700; color: var(--ek-texto-suave); text-transform: uppercase; padding: .3rem 0; }
.rf-dia { border: 0; background: none; height: 2.2rem; font-size: .85rem; color: var(--ek-texto); border-radius: 0; font-variant-numeric: tabular-nums; }
.rf-dia:hover { background: var(--ek-azul-suave); border-radius: .4rem; }
.rf-dia.fuera { color: #C2C8D0; }
.rf-dia.hoy { font-weight: 700; text-decoration: underline; text-underline-offset: .2rem; }
.rf-dia.en-rango { background: var(--ek-azul-suave); border-radius: 0; }
.rf-dia.extremo { background: var(--ek-azul); color: #fff; border-radius: .4rem; }
.rf-dia.inicio:not(.fin) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rf-dia.fin:not(.inicio) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rf-pie { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--ek-borde); margin-top: auto; }
.rf-resumen { margin-right: auto; font-size: .85rem; color: var(--ek-texto-suave); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
    .rf-panel { position: fixed; left: .5rem !important; right: .5rem !important; top: 4rem; flex-direction: column; max-height: calc(100vh - 5rem); overflow-y: auto; }
    .rf-atajos { display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem; border-right: 0; border-bottom: 1px solid var(--ek-borde); min-width: 0; }
    .rf-atajo { width: auto; padding: .3rem .6rem; border: 1px solid var(--ek-borde); border-radius: 1rem; font-size: .8rem; }
    .rf-meses { justify-content: center; }
    .rf-mes { width: 100%; max-width: 20rem; }
}

.grafico { position: relative; height: 280px; }
.lista-kines .list-group-item { cursor: pointer; }
.muestra-color { width: 1rem; height: 1rem; border-radius: .25rem; display: inline-block; vertical-align: middle; }

/* Ingreso */
/* .login-caja también la usan las cajas angostas de Mi cuenta, Exportar y Error. */
.login-caja { width: 100%; max-width: 420px; margin: 6vh auto 0; padding: 1.5rem; }
/* Pantallas de ingreso (_LayoutIngreso): panel de marca a la izquierda, formulario a la derecha. */
.cuerpo-ingreso { background: #fff; }
.ingreso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ingreso-marca { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2.5rem 3rem; color: #fff;
    background: radial-gradient(120% 90% at 85% 15%, #11518C 0%, #0A3A68 45%, #072746 100%); }
.ingreso-marca::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--ek-azul-claro), transparent 70%); }
.im-logo, .if-logo { font-weight: 700; font-size: 1.55rem; letter-spacing: .01em; line-height: 1; }
.im-logo span { color: var(--ek-azul-claro); }
.im-postura { width: min(100%, 470px); margin: auto auto 1.5rem; display: block; }
.im-postura .g { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.im-postura .mueble path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.im-postura .referencia { fill: none; stroke: rgba(0, 187, 229, .45); stroke-width: 1; stroke-dasharray: 4 5; }
.im-postura .cuerpo circle, .im-postura .cuerpo path { fill: none; stroke: rgba(255, 255, 255, .78); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.im-postura .angulo path { fill: none; stroke: var(--ek-azul-claro); stroke-width: 1.6; }
.im-postura .articulacion circle { fill: var(--ek-azul-claro); stroke: #0A3A68; stroke-width: 2; }
.im-postura .cota text { fill: var(--ek-azul-claro); font: 600 11px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
/* Ingreso: animación. Se dibuja como un plano (grilla → mueble → trabajador → articulaciones → ángulos) y después queda
   un movimiento suave: escaneo del plano, línea de visión que fluye y articulaciones que laten. Con "reducir movimiento",
   quieto. Los trazos usan pathLength="1": el guion mide lo mismo que el trazo completo. */
@media (prefers-reduced-motion: no-preference) {
    .im-postura .grilla { animation: im-aparecer .8s ease-out both; }
    .im-postura .mueble path, .im-postura .cuerpo circle, .im-postura .cuerpo path, .im-postura .angulo path {
        stroke-dasharray: 1; stroke-dashoffset: 1; animation: im-trazar 1s cubic-bezier(.65, 0, .35, 1) forwards; }
    .im-postura .mueble path:nth-child(1) { animation-delay: .2s; }
    .im-postura .mueble path:nth-child(2) { animation-delay: .45s; }
    .im-postura .mueble path:nth-child(3) { animation-delay: .7s; animation-duration: .6s; }
    .im-postura .cuerpo circle { animation-delay: 1s; animation-duration: .7s; }
    .im-postura .cuerpo path { animation-delay: 1.3s; animation-duration: 1.6s; }
    .im-postura .articulacion circle { transform-box: fill-box; transform-origin: center; opacity: 0;
        animation: im-brotar .35s ease-out forwards, im-latir 3.2s ease-in-out 3.6s infinite; }
    .im-postura .articulacion circle:nth-child(1) { animation-delay: 2.5s, 3.6s; }
    .im-postura .articulacion circle:nth-child(2) { animation-delay: 2.6s, 4.1s; }
    .im-postura .articulacion circle:nth-child(3) { animation-delay: 2.7s, 4.6s; }
    .im-postura .articulacion circle:nth-child(4) { animation-delay: 2.8s, 5.1s; }
    .im-postura .articulacion circle:nth-child(5) { animation-delay: 2.9s, 5.6s; }
    .im-postura .articulacion circle:nth-child(6) { animation-delay: 3s, 6.1s; }
    .im-postura .angulo path { animation-duration: .6s; }
    .im-postura .angulo path:nth-child(1) { animation-delay: 3s; }
    .im-postura .angulo path:nth-child(2) { animation-delay: 3.15s; }
    .im-postura .angulo path:nth-child(3) { animation-delay: 3.3s; }
    .im-postura .angulo path:nth-child(4) { animation-delay: 3.45s; }
    .im-postura .cota text { animation: im-aparecer .5s ease-out 3.1s both; }
    .im-postura .referencia { animation: im-aparecer .6s ease-out 2.8s both, im-fluir 1.2s linear 2.8s infinite; }
    .im-postura .escaneo { opacity: 0; animation: im-escanear 7s linear 4s infinite; }
    .im-texto { animation: im-aparecer .9s ease-out .3s both; }
}
@keyframes im-trazar { to { stroke-dashoffset: 0; } }
@keyframes im-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes im-brotar { from { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
@keyframes im-latir { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.45); } 24% { transform: scale(1); } }
@keyframes im-fluir { to { stroke-dashoffset: -18; } }
@keyframes im-escanear { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(340px); } }
.im-texto { max-width: 30rem; }
.im-sup { margin: 0 0 .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ek-azul-claro); }
.im-titular { margin: 0 0 .75rem; font-size: clamp(1.45rem, 2.1vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.im-bajada { margin: 0; color: rgba(255, 255, 255, .72); font-size: .95rem; }
.im-pie { margin: 2rem 0 0; font-size: .78rem; color: rgba(255, 255, 255, .55); }

.ingreso-formulario { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 1.5rem 1.5rem; }
.if-contenido { width: 100%; max-width: 360px; margin: auto; }
.if-logo { display: none; color: var(--ek-azul); margin-bottom: 2rem; }
.if-logo span { color: var(--ek-azul-claro); }
.if-titulo { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; }
.if-bajada { color: var(--ek-texto-suave); font-size: .9rem; margin-bottom: 1.75rem; }
.if-aviso { border-left: 3px solid #F79009; background: #FFFAEB; color: #93370D; font-size: .8rem; padding: .55rem .75rem; border-radius: .3rem; margin-bottom: 1.5rem; }
.if-aviso-info { border-left-color: #0086C9; background: #F0F9FF; color: #065986; }
.if-enlace { font-size: .85rem; text-decoration: none; }
.if-enlace:hover { text-decoration: underline; }
.if-pie { text-align: center; color: #98A2B3; font-size: .75rem; margin: 2rem 0 0; }
.ingreso-formulario .form-label { color: var(--ek-texto); font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.ingreso-formulario .form-control { padding: .65rem .8rem; border-color: #D0D5DD; border-radius: .45rem; }
.ingreso-formulario .form-control:focus { border-color: var(--ek-azul); box-shadow: 0 0 0 3px rgba(13, 94, 163, .14); }
.btn-ingresar { padding: .7rem 1rem; font-weight: 600; border-radius: .45rem; }
.campo-clave { position: relative; }
.campo-clave .form-control { padding-right: 5rem; }
.btn-ver-clave { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); border: 0; background: none; padding: .3rem .5rem;
    color: var(--ek-azul); font-size: .8rem; font-weight: 600; border-radius: .3rem; }
.btn-ver-clave:hover { background: var(--ek-azul-suave); }
.btn-ver-clave:focus-visible { outline: 2px solid var(--ek-azul); outline-offset: 1px; }
.campo-codigo { font-size: 1.35rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 991.98px) {
    .ingreso { grid-template-columns: 1fr; }
    .ingreso-marca { display: none; }
    .if-logo { display: block; }
    .ingreso-formulario { padding: 2rem 1rem 1.25rem; border-top: 4px solid var(--ek-azul); }
}
@media (min-width: 1400px) { .ingreso-marca { padding: 3rem 4.5rem; } }
.login-caja .marca { font-size: 1.9rem; font-weight: 700; color: var(--ek-azul); letter-spacing: .01em; line-height: 1; }
.login-caja .marca span { color: var(--ek-azul-claro); }

/* Agenda (FullCalendar): sin estilos de enlace de Bootstrap */
.fc { --fc-border-color: var(--ek-borde); --fc-today-bg-color: #FFF8E1; --fc-button-bg-color: #fff; --fc-button-border-color: var(--ek-borde); --fc-button-text-color: var(--ek-texto); --fc-button-hover-bg-color: var(--ek-azul-suave); --fc-button-hover-border-color: #C7D7EA; --fc-button-active-bg-color: var(--ek-azul); --fc-button-active-border-color: var(--ek-azul); }
.fc .fc-button { font-size: .85rem; box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 600; }
.fc .fc-toolbar-title::first-letter { text-transform: uppercase; }
.fc a, .fc a:hover { color: inherit; text-decoration: none; }
.fc .fc-col-header-cell-cushion { color: var(--ek-texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .4rem; }
.fc .fc-daygrid-day-number { font-size: .8rem; color: var(--ek-texto-suave); }
.fc .fc-daygrid-event { font-size: .78rem; }
.fc .fc-daygrid-dot-event .fc-event-title { font-weight: 500; }
.fc-event { cursor: pointer; }

.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.historial-rut:empty { display: none; }

@media (max-width: 768px) {
    main.container-fluid { padding-left: .6rem; padding-right: .6rem; }
    .panel { padding: .85rem; }
}

/* Empresas: buscador, listado y ficha lateral */
.buscador-empresas .form-control { max-width: 40rem; }
.subtitulo-listado { font-size: .78rem; font-weight: 700; color: var(--ek-texto-suave); text-transform: uppercase; letter-spacing: .06em; margin: .25rem 0 .6rem; }
.chip-encurso { display: inline-block; font-size: .72rem; font-weight: 600; padding: .15em .55em; border-radius: 1rem; background: var(--ek-azul-suave); color: var(--ek-azul); white-space: nowrap; }
.tabla-ek tr.fila-seleccionada > td { background: var(--ek-azul-suave); box-shadow: inset 3px 0 0 var(--ek-azul); }
.tabla-ek tr.fila-seleccionada > td ~ td { box-shadow: none; }
.tarjeta-ept.seleccionada { border-color: var(--ek-azul); background: #F7FAFE; }
@media (min-width: 992px) {
    .ficha-empresa, .ficha-empresa-vacia { position: sticky; top: 1rem; }
}
.ficha-empresa .fe-titulo { font-size: 1.15rem; font-weight: 650; color: var(--ek-texto); margin: 0 0 .15rem; line-height: 1.25; }
.fe-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.fe-cifras > div { background: var(--ek-fondo); border-radius: .5rem; padding: .5rem .65rem; }
.fe-cifras .valor { display: block; font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fe-cifras .etiqueta { display: block; font-size: .72rem; color: var(--ek-texto-suave); }
.fe-seccion { font-size: .75rem; font-weight: 700; color: var(--ek-texto-suave); text-transform: uppercase; letter-spacing: .06em; margin: 1rem 0 .45rem; display: flex; align-items: center; gap: .4rem; }
.fe-seccion .ico { font-size: .95rem; color: var(--ek-azul); }
.fe-datos { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: .75rem; row-gap: .3rem; font-size: .875rem; margin: 0; }
.fe-datos dt { font-weight: 500; color: var(--ek-texto-suave); }
.fe-datos dd { margin: 0; overflow-wrap: anywhere; }
.fe-comentarios { white-space: pre-line; margin: 0; }
.fe-epts { border: 1px solid var(--ek-borde); border-radius: .5rem; overflow: hidden; }
.fe-ept { display: flex; align-items: center; gap: .75rem; padding: .45rem .7rem; text-decoration: none; color: var(--ek-texto); border-top: 1px solid var(--ek-borde); }
.fe-ept:first-child { border-top: 0; }
.fe-ept:hover { background: #F7FAFE; }
.fe-ept .num { font-weight: 600; color: var(--ek-azul); min-width: 4.5rem; }
.fe-pie { font-size: .75rem; color: var(--ek-texto-suave); border-top: 1px solid var(--ek-borde); margin: 1rem 0 0; padding-top: .6rem; }
.ficha-empresa-vacia { text-align: center; color: var(--ek-texto-suave); padding: 2.5rem 1.5rem; }
.ficha-empresa-vacia .ico { font-size: 2rem; color: #B9CFE6; margin-bottom: .5rem; }