:root { --ek-azul: #0D5EA3; --ek-azul-claro: #00BBE5; }
body { background: #f4f6f9; font-size: .925rem; }
.bg-ek { background: var(--ek-azul); }
.capitalizar { text-transform: capitalize; }
.tabla-ek { font-size: .85rem; }
.tabla-ek th { white-space: nowrap; position: sticky; top: 0; background: #fff; z-index: 1; }
.tabla-ek td { vertical-align: middle; }
.contenedor-tabla { max-height: 70vh; overflow: auto; }
.badge-estado { font-weight: 500; font-size: .78rem; padding: .3em .55em; border-radius: .3rem; display: inline-block; }
.kpi { background: #fff; border-radius: .5rem; padding: .6rem 1rem; border: 1px solid #e3e7ee; }
.kpi .valor { font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.kpi .etiqueta { color: #6c757d; font-size: .78rem; }
.indicador { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.indicador.fuera { background: #dc3545; }
.indicador.en-plazo { background: #198754; }
.indicador.visto { background: var(--ek-azul-claro); }
.indicador.no-visto { background: #ced4da; }
.progreso-estados { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.progreso-estados li { padding: .35rem .75rem; background: #e9ecef; color: #6c757d; border-radius: .3rem; font-size: .8rem; }
.progreso-estados li.pasado { background: #cfe2ff; color: #084298; }
.progreso-estados li.actual { font-weight: 600; outline: 2px solid #212529; }
.linea-tiempo { list-style: none; padding-left: 0; margin: 0; }
.linea-tiempo li { padding: .5rem .75rem; margin-bottom: .4rem; background: #fff; border-radius: .3rem; }
.panel { background: #fff; border: 1px solid #e3e7ee; border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
.panel > h2 { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; color: var(--ek-azul); }
.grafico { position: relative; height: 280px; }
.lista-kines .list-group-item { cursor: pointer; }
.muestra-color { width: 1rem; height: 1rem; border-radius: .2rem; display: inline-block; vertical-align: middle; }
.login-caja { max-width: 380px; margin: 8vh auto 0; }
.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) {
    .contenedor-tabla { max-height: none; }
    main.container-fluid { padding-left: .5rem; padding-right: .5rem; }
}