/* Capa de marca Octapharma sobre Metronic (Tailwind). Solo variables y componentes propios. */

:root {
    --octa-blue: #0b5cad;
    --octa-blue-strong: #08488a;
    --octa-teal: #1aa3a3;
    --octa-amber: #e8a317;
    --octa-red: #d0333a;
    --octa-violet: #6d4fc2;

    --primary: var(--octa-blue);
    --primary-foreground: #ffffff;

    /* Jerarquía: lienzo gris azulado, tarjetas blancas, títulos en azul marino y textos secundarios en gris. */
    --mono: #0b1e33;
    --foreground: #18202c;
    --secondary-foreground: #4a5566;
    --muted-foreground: #6b7585;
    --border: #e6eaf0;
    --input: #d3dae4;
    --octa-canvas: #f2f5f9;
    --octa-card-border: #e2e7ee;
    --octa-th: #f6f8fb;
    --octa-sombra: 0 1px 2px rgb(16 24 40 / 0.04), 0 2px 8px -2px rgb(16 24 40 / 0.06);
}

.dark {
    --primary: #4b93e0;
    --primary-foreground: #0b1220;

    /* Se repiten los valores del tema oscuro: en <html class="dark"> la regla :root de arriba también aplica. */
    --mono: #d4d4d8;
    --foreground: #f4f4f5;
    --background: #101318;
    --card: #15191f;
    --popover: #15191f;
    --border: #252a32;
    --input: #333a45;
    --secondary-foreground: #b3bcc9;
    --muted-foreground: #8a94a3;
    --accent: #1d222a;
    --octa-canvas: #0b0e12;
    --octa-card-border: #232831;
    --octa-th: #1a1f26;
    --octa-sombra: none;
}

body {
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

/* Permite que las columnas de las rejillas encojan y que "truncate" funcione en móvil. */
main .grid > * {
    min-width: 0;
}

/* Logo: el PNG no tiene transparencia, así que se presenta sobre una pastilla blanca. */
.octa-brand-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-radius: 0.6rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.octa-logo {
    height: 18px;
    width: auto;
}

.octa-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: var(--octa-blue);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
}

.octa-avatar-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.25rem;
}

/* Línea de tiempo del historial de visitas */
.octa-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-inline-start: 2px solid var(--border);
    margin-inline-start: 0.4rem;
}

.octa-timeline > li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-inline-start: 1.25rem;
}

.octa-timeline > li::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-0.4rem - 1px);
    top: 0.35rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: var(--background);
    border: 2px solid var(--primary);
}

/* Planning semanal */
.octa-dia-hoy {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.octa-plan-item,
.octa-no-visita {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    background: var(--background);
}

.octa-no-visita {
    border-inline-start-color: var(--octa-amber);
    background: color-mix(in srgb, var(--octa-amber) 8%, var(--background));
}

.octa-plan-form > summary {
    list-style: none;
}

.octa-plan-form > summary::-webkit-details-marker {
    display: none;
}

/* Impresión: solo el contenido */
@media print {
    #sidebar, #header, footer, [data-octa-aviso], main form, main .kt-btn { display: none !important; }
    body, #scrollable_content { overflow: visible !important; height: auto !important; background: #ffffff !important; }
    .lg\:ms-\(--sidebar-width\) { margin: 0 !important; }
    .kt-card { break-inside: avoid; box-shadow: none !important; }
}

/* Contador de alertas */
.octa-contador {
    position: absolute;
    top: 0.1rem;
    inset-inline-end: 0.1rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: var(--octa-amber);
    color: #1f1300;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.octa-contador-alta {
    background: var(--octa-red);
    color: #ffffff;
}

/* Semáforo */
.octa-semaforo {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
}

.octa-semaforo-Verde { background: #16a34a; }
.octa-semaforo-Ambar { background: var(--octa-amber); }
.octa-semaforo-Rojo { background: var(--octa-red); }

/* Barra apilada de cobertura de cartera */
.octa-apilada {
    display: flex;
    height: 0.5rem;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--accent);
}

.octa-apilada > span { display: block; height: 100%; }
.octa-apilada .al-dia { background: var(--octa-teal); }
.octa-apilada .atencion { background: var(--octa-amber); }
.octa-apilada .desatendido { background: var(--octa-red); }

/* Mini gráfico de barras (tendencia semanal) */
.octa-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 1.75rem;
}

.octa-spark > span {
    flex: 1 1 0;
    min-width: 3px;
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--primary) 70%, transparent);
}

.octa-spark > span.actual { background: color-mix(in srgb, var(--primary) 35%, transparent); }

/* Mapa de calor semanal */
.octa-calor {
    display: grid;
    place-items: center;
    height: 2rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
    background: color-mix(in srgb, var(--primary) var(--octa-intensidad, 0%), var(--accent));
}

.octa-calor.fuerte { color: #ffffff; }

/* Calendario plan frente a ejecución */
.octa-dia-ejecucion {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    font-size: 0.7rem;
    min-height: 3.25rem;
}

.octa-dia-ejecucion.ok { background: color-mix(in srgb, var(--octa-teal) 12%, var(--background)); }
.octa-dia-ejecucion.sin-visitas { background: color-mix(in srgb, var(--octa-red) 10%, var(--background)); }
.octa-dia-ejecucion.ausencia { background: color-mix(in srgb, var(--octa-amber) 12%, var(--background)); }
.octa-dia-ejecucion.libre { opacity: 0.7; }


/* Tarjetas KPI */
.octa-kpi-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    font-size: 1.35rem;
    background: color-mix(in srgb, var(--octa-kpi, var(--octa-blue)) 12%, transparent);
    color: var(--octa-kpi, var(--octa-blue));
}

.octa-kpi-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.octa-tone-blue { --octa-kpi: var(--octa-blue); }
.octa-tone-teal { --octa-kpi: var(--octa-teal); }
.octa-tone-amber { --octa-kpi: var(--octa-amber); }
.octa-tone-red { --octa-kpi: var(--octa-red); }

.octa-trend-up { color: #16a34a; }
.octa-trend-down { color: var(--octa-red); }

.octa-progress {
    position: relative;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--accent);
    overflow: hidden;
}

.octa-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--octa-kpi, var(--octa-blue));
}

/* Marca de la media del equipo sobre una barra (patrones de trabajo) */
.octa-progress > .octa-progress-ref {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--foreground);
    opacity: 0.65;
}

/* Barra repartida en tramos de colores */
.octa-barra-apilada {
    display: flex;
    height: 0.625rem;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--accent);
}

.octa-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--octa-kpi, var(--octa-blue));
}

.octa-num {
    font-variant-numeric: tabular-nums;
}

/* Panel lateral del login */
.octa-login-hero {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgb(26 163 163 / 0.35), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, rgb(75 147 224 / 0.35), transparent 60%),
        linear-gradient(160deg, #0b2f57 0%, #08488a 55%, #0b5cad 100%);
    color: #ffffff;
}

.octa-login-hero .octa-hero-muted {
    color: rgb(255 255 255 / 0.75);
}

.octa-hero-stat {
    border: 1px solid rgb(255 255 255 / 0.18);
    background: rgb(255 255 255 / 0.08);
    border-radius: 0.875rem;
    padding: 1rem 1.25rem;
    backdrop-filter: blur(4px);
}

/* Lista de hospitales con casillas (alta de usuarios) */
.octa-lista-hospitales {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    column-gap: 1rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}
.octa-lista-hospitales label[hidden] { display: none; }

/* Verificación en dos pasos */
.octa-qr {
    background: #fff;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    image-rendering: pixelated;
}
.octa-pasos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 1.25rem;
    list-style: decimal;
    font-size: 0.875rem;
    color: var(--secondary-foreground);
}
.octa-pasos strong { color: var(--mono, var(--foreground)); }
.octa-codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    padding: 1rem 1.25rem 1rem 2.5rem;
    border: 1px dashed var(--border);
    border-radius: 0.75rem;
    list-style: decimal;
    font-size: 1rem;
}
.octa-codigos code { letter-spacing: 0.08em; color: var(--foreground); }
@media print {
    .octa-codigos { border-style: solid; }
}

/* Protección de datos: página pública del cliente (pensada para el móvil) y texto de la política. */
.octa-publico {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.octa-publico-marca { display: flex; justify-content: center; }
.octa-publico-marca img { background: #fff; padding: 0.4rem 0.75rem; border-radius: 0.5rem; box-sizing: content-box; }
.octa-publico-ok { --octa-kpi: var(--octa-teal); }
.octa-politica { font-size: 0.875rem; line-height: 1.6; color: var(--secondary-foreground); }
.octa-politica h3 { font-size: 0.875rem; font-weight: 600; color: var(--mono, var(--foreground)); margin: 1rem 0 0.25rem; }
.octa-politica h3:first-child { margin-top: 0; }
.octa-politica p { margin: 0 0 0.5rem; }
.octa-politica ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.octa-politica strong { color: var(--mono, var(--foreground)); }
.octa-politica-caja {
    max-height: 45vh;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--muted, transparent);
    overscroll-behavior: contain;
}
.octa-publico-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    font-size: 0.875rem;
}
.octa-publico-datos dt { color: var(--secondary-foreground); }
.octa-publico-datos dd { color: var(--mono, var(--foreground)); overflow-wrap: anywhere; }
.octa-publico-casilla {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--mono, var(--foreground));
    cursor: pointer;
}
.octa-publico-casilla:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.octa-publico-casilla input { margin-top: 0.1rem; flex-shrink: 0; }
.octa-publico-aceptadas { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--mono, var(--foreground)); }
.octa-publico-aceptadas li { display: flex; gap: 0.5rem; align-items: flex-start; }
.octa-publico-aceptadas i { color: var(--octa-teal); margin-top: 0.15rem; }
.octa-publico-retirar { border-top: 1px solid var(--border); padding-top: 1rem; }
.octa-publico-retirar summary { cursor: pointer; font-size: 0.875rem; color: var(--secondary-foreground); }
.octa-qr-grande { width: min(320px, 80vw); height: auto; }
.octa-historial { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.8125rem; }
.octa-historial li { display: flex; flex-direction: column; gap: 0.1rem; padding-left: 0.75rem; border-left: 2px solid var(--border); }

/* =====================================================================
   Capa visual común: lienzo, tarjetas, botones, tablas, formularios y menú.
   Va sin @layer, así que se impone a las clases de Metronic.
   ===================================================================== */

.octa-canvas { background: var(--octa-canvas); }

.octa-titulo { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--mono); }

/* Breadcrumb con el recorrido real (_Migas): cápsula azul suave sobre el lienzo, pasos en azul y la página
   actual en negrita. En el móvil solo queda el paso anterior, como «‹ Volver». */
.octa-migas {
    display: inline-flex; align-items: center; gap: .625rem; align-self: flex-start; max-width: 100%;
    margin-bottom: .5rem; padding: .3125rem .875rem .3125rem .3125rem; border-radius: 9999px;
    background: color-mix(in srgb, var(--primary) 7%, var(--card, #ffffff));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    box-shadow: var(--octa-sombra);
}
.octa-migas-icono {
    display: inline-grid; place-items: center; flex: none; width: 1.625rem; height: 1.625rem; border-radius: 9999px;
    background: var(--primary); color: var(--primary-foreground); font-size: .875rem;
}
.octa-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: .8125rem; line-height: 1.25rem; }
.octa-migas li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; color: color-mix(in srgb, var(--primary) 55%, var(--muted-foreground)); }
.octa-migas li + li::before {
    content: ""; flex: none; width: .4rem; height: .4rem; margin-inline-end: .1875rem;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .6;
}
.octa-migas a {
    max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin: 0 -.375rem; padding: .0625rem .375rem; border-radius: .375rem;
    color: var(--primary); font-weight: 600; transition: color .15s, background-color .15s;
}
.octa-migas a:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); text-decoration: underline; text-underline-offset: 2px; }
.octa-migas a:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.octa-migas [aria-current] { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mono); font-weight: 700; }
@media (max-width: 639px) {
    .octa-migas { padding-inline-end: .75rem; }
    .octa-migas li { display: none; }
    .octa-migas li.octa-migas-anterior { display: inline-flex; }
    .octa-migas li.octa-migas-anterior::before { display: none; }
    .octa-migas li.octa-migas-anterior a { max-width: calc(100vw - 7rem); }
}

/* Panel de contexto junto a un formulario (p. ej. el cliente en «Registrar visita»): tono turquesa para
   distinguir «sobre quién» del formulario, que va en blanco con los botones azules. */
.octa-panel-contexto {
    --octa-ctx: var(--octa-teal);
    overflow: hidden;
    border-color: color-mix(in srgb, var(--octa-ctx) 30%, var(--octa-card-border));
    background: color-mix(in srgb, var(--octa-ctx) 4%, var(--card, #ffffff));
}
.octa-panel-contexto-cabecera {
    display: flex; align-items: center; gap: .875rem; padding: 1.125rem 1.25rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--octa-ctx) 18%, var(--card, #ffffff)), color-mix(in srgb, var(--octa-blue) 9%, var(--card, #ffffff)));
    border-bottom: 1px solid color-mix(in srgb, var(--octa-ctx) 24%, transparent);
}
.octa-panel-contexto .octa-avatar {
    width: 2.75rem; height: 2.75rem; font-size: .9375rem; background: var(--octa-ctx);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--octa-ctx) 25%, transparent);
}
.octa-panel-contexto-etiqueta { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--octa-ctx) 70%, var(--mono)); }
.octa-panel-contexto-nombre { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--mono); }
.octa-panel-contexto-datos { display: grid; gap: .875rem; margin: 0; font-size: .875rem; }
.octa-panel-contexto-datos > div { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .75rem; align-items: center; }
.octa-panel-contexto-datos dt, .octa-panel-contexto-datos dd { grid-column: 2; overflow-wrap: anywhere; }
.octa-panel-contexto-datos i {
    grid-row: span 2; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem;
    background: color-mix(in srgb, var(--octa-ctx) 13%, transparent); color: var(--octa-ctx); font-size: 1rem;
}
.octa-panel-contexto-datos dt { font-size: .75rem; color: var(--muted-foreground); }
.octa-panel-contexto-datos dd { margin: 0; font-weight: 500; color: var(--mono); }

/* Paneles con tono propio (fichas, inicio, equipo): franja superior, cabecera teñida e icono del color del panel. */
.kt-card.octa-panel {
    --octa-ctx: var(--octa-blue);
    overflow: hidden;
    border-color: color-mix(in srgb, var(--octa-ctx) 26%, var(--octa-card-border));
    border-top: 3px solid var(--octa-ctx);
}
.octa-panel.octa-panel-teal { --octa-ctx: var(--octa-teal); }
.octa-panel.octa-panel-violet { --octa-ctx: var(--octa-violet); }
.octa-panel.octa-panel-amber { --octa-ctx: var(--octa-amber); }
.octa-panel.octa-panel-red { --octa-ctx: var(--octa-red); }
/* Bloque desplegable con tono: el summary hace de cabecera. */
details.octa-panel > summary { background: color-mix(in srgb, var(--octa-ctx) 10%, var(--card, #ffffff)); }
.octa-panel > .kt-card-header {
    background: color-mix(in srgb, var(--octa-ctx) 10%, var(--card, #ffffff));
    border-bottom-color: color-mix(in srgb, var(--octa-ctx) 18%, var(--octa-card-border));
}
.octa-panel-titulo { display: flex; align-items: center; gap: .625rem; }
.octa-panel-titulo > i {
    display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: .5rem;
    background: color-mix(in srgb, var(--octa-ctx) 14%, transparent); color: var(--octa-ctx); font-size: 1rem;
}
.octa-panel-portada {
    background: linear-gradient(160deg, color-mix(in srgb, var(--octa-ctx) 16%, var(--card, #ffffff)), color-mix(in srgb, var(--octa-blue) 6%, var(--card, #ffffff)) 75%);
    border-bottom: 1px solid color-mix(in srgb, var(--octa-ctx) 18%, var(--octa-card-border));
}
.octa-panel-portada .octa-avatar {
    background: var(--octa-ctx);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--octa-ctx) 22%, transparent);
}
.octa-panel-datos dt { color: var(--octa-ctx); }
details.octa-panel-baja {
    border: 1px dashed color-mix(in srgb, var(--octa-red) 45%, var(--octa-card-border));
    background: color-mix(in srgb, var(--octa-red) 4%, var(--card, #ffffff));
    box-shadow: none;
}

a.text-primary:hover, a.kt-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Tarjetas */
.kt-card {
    border-color: var(--octa-card-border);
    box-shadow: var(--octa-sombra);
}
.kt-card-header { border-color: var(--octa-card-border); }
.kt-card-title { color: var(--mono); font-size: 1rem; }
.kt-card-footer { border-color: var(--octa-card-border); }

/* Franja de color en las tarjetas de indicadores */
.kt-card[class*="octa-tone-"],
.kt-card:has(> .kt-card-content .octa-kpi-value) {
    position: relative;
    overflow: hidden;
}
.kt-card[class*="octa-tone-"]::before,
.kt-card:has(> .kt-card-content .octa-kpi-value)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--octa-kpi, var(--primary));
}

/* Botones */
.kt-btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.kt-btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px rgb(11 92 173 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.kt-btn-primary:hover { background-color: var(--octa-blue-strong); border-color: var(--octa-blue-strong); }
.dark .kt-btn-primary:hover { background-color: color-mix(in srgb, var(--primary) 82%, #ffffff); border-color: transparent; }
.kt-btn-outline {
    border-color: var(--input);
    background-color: var(--card);
    color: var(--mono);
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}
.kt-btn-outline:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--input));
    background-color: color-mix(in srgb, var(--primary) 5%, var(--card));
    color: var(--primary);
}
.kt-btn-outline > i { color: inherit; }
/* Los botones «fantasma» con texto del contenido se ven como acciones: tinte azul suave. */
main .kt-btn-ghost:not(.kt-btn-icon) {
    color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 8%, transparent);
}
main .kt-btn-ghost:not(.kt-btn-icon):hover { background-color: color-mix(in srgb, var(--primary) 15%, transparent); }
main .kt-btn-ghost.kt-btn-icon:hover { color: var(--primary); background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.kt-btn-destructive { box-shadow: 0 1px 2px rgb(208 51 58 / 0.25); }

/* Selector segmentado (atajos de periodo) */
.octa-segmentado {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 0.625rem;
    border: 1px solid var(--input);
    background: var(--card);
}
main .octa-segmentado .kt-btn-ghost:not(.kt-btn-icon) { background-color: transparent; color: var(--secondary-foreground); box-shadow: none; }
main .octa-segmentado .kt-btn-ghost:not(.kt-btn-icon):hover { background-color: var(--accent); color: var(--mono); }
main .octa-segmentado .kt-btn-primary { box-shadow: 0 1px 2px rgb(11 92 173 / 0.3); }

/* Tablas */
.kt-table thead th {
    background-color: var(--octa-th);
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.kt-table thead th a { color: inherit; }
.kt-table thead tr, .kt-table tbody tr { border-color: var(--octa-card-border); }
.kt-table tbody tr { transition: background-color .12s; }
.kt-table tbody tr:hover { background-color: color-mix(in srgb, var(--primary) 4%, transparent); }

/* Formularios */
.kt-form-label { font-weight: 500; color: var(--mono); }
.kt-input, .kt-select, .kt-textarea { border-color: var(--input); }
.kt-input:focus, .kt-input:focus-within, .kt-select:focus, .kt-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Etiquetas */
.kt-badge { font-weight: 600; }

/* Desplegables <details>: flecha que gira y color de enlace al pasar el ratón. */
main details > summary.cursor-pointer { list-style: none; display: flex; align-items: center; gap: 0.5rem; }
main details > summary.cursor-pointer.text-center { justify-content: center; }
main details > summary.cursor-pointer::-webkit-details-marker { display: none; }
main details > summary.cursor-pointer::before {
    content: "";
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    margin-inline: 0.1rem 0.15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s;
    opacity: 0.7;
}
main details[open] > summary.cursor-pointer::before { transform: rotate(45deg); }
main details > summary.cursor-pointer:not(.text-destructive):hover { color: var(--primary); }

/* Menú lateral */
#sidebar .kt-menu-link { transition: background-color .12s; }
#sidebar .kt-menu-link:hover { background-color: rgb(255 255 255 / 0.06); }
#sidebar .kt-menu-item.active > .kt-menu-link {
    background-color: rgb(75 147 224 / 0.2);
    box-shadow: inset 3px 0 0 #4b93e0;
}
#sidebar .kt-menu-item.active .kt-menu-title { color: #ffffff; font-weight: 600; }
#sidebar .kt-menu-item.active .kt-menu-icon { color: #7fb3ea; }
#sidebar h3 { letter-spacing: 0.06em; }

/* Avisos */
.kt-alert { border-radius: 0.625rem; }

/* Barra de filtros de los listados: rejilla que se reparte el ancho. */
.octa-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.625rem;
    align-items: center;
    background: var(--octa-th);
}
.octa-filtros > div { display: contents; }
.octa-filtros > div > .kt-input,
.octa-filtros > div > .kt-select { width: 100%; max-width: none; }
.octa-filtros > div > .kt-btn { justify-self: start; }
.octa-filtros > div > label > .kt-input { flex: 1 1 auto; min-width: 0; }

/* Casillas de selección múltiple como opciones con recuadro. */
.octa-opcion {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    background: var(--card);
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}
.octa-opcion:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--input)); }
.octa-opcion:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
}
.octa-opcion .kt-checkbox-label { line-height: 1.3; }
.octa-opcion:has(input:checked) .kt-checkbox-label { color: var(--mono); font-weight: 600; }
.octa-opcion:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* Desplegable con búsqueda obligatorio sin elegir (site.js): el <select> real está oculto y se marca el visible. */
.octa-select-invalido [data-kt-select-display] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 15%, transparent);
}
/* Cuadro de búsqueda de los desplegables: lupa y sin el marco de foco de los campos normales. */
.kt-select-search { padding: .375rem .5rem; }
.kt-select-search input[data-kt-select-search] {
    height: 2.25rem; padding-inline: 2rem .5rem; border-color: transparent; box-shadow: none;
    background: transparent no-repeat .5rem center / 1rem
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.kt-select-search input[data-kt-select-search]:focus { border-color: transparent; box-shadow: none; outline: none; }

/* Versión en pruebas: aviso fijo y mensaje al intentar guardar (Views/Shared/_VersionEnPruebas.cshtml). */
.octa-pruebas-aviso {
    position: sticky; top: 0; z-index: 15;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem;
    margin: -1.25rem 0 1.25rem; padding: .5rem 1rem;
    font-size: .8125rem; line-height: 1.35; text-align: center;
    color: #5a3d00;
    background: repeating-linear-gradient(135deg, #fde7a9 0 14px, #fbdc8e 14px 28px);
    border-bottom: 1px solid color-mix(in srgb, var(--octa-amber) 60%, transparent);
}
body > .octa-pruebas-aviso { position: fixed; inset: 0 0 auto 0; margin: 0; z-index: 50; }
.octa-pruebas-aviso > i { font-size: 1rem; color: #a86b00; }
.octa-pruebas-aviso strong { font-weight: 700; letter-spacing: .01em; }
.octa-pruebas-aviso button {
    padding: .125rem .625rem; border-radius: 999px; font-weight: 600; font-size: .75rem;
    background: rgb(255 255 255 / .65); border: 1px solid rgb(168 107 0 / .35); color: inherit; cursor: pointer;
}
.octa-pruebas-aviso button:hover { background: #ffffff; }
.dark .octa-pruebas-aviso {
    color: #fde7a9;
    background: repeating-linear-gradient(135deg, #3a2c0b 0 14px, #33270a 14px 28px);
    border-bottom-color: rgb(232 163 23 / .35);
}
.dark .octa-pruebas-aviso > i { color: var(--octa-amber); }
.dark .octa-pruebas-aviso button { background: rgb(0 0 0 / .25); border-color: rgb(232 163 23 / .4); }
@media (max-width: 640px) { .octa-pruebas-aviso-detalle { display: none; } }

.octa-pruebas-dialogo {
    width: min(26rem, calc(100vw - 2rem)); padding: 0; margin: auto; border: 0; border-radius: 1rem;
    background: var(--card, #ffffff); color: var(--foreground);
    box-shadow: 0 24px 60px -12px rgb(16 24 40 / .35);
}
.octa-pruebas-dialogo[open] { animation: octa-pruebas-entrada .22s ease-out; }
.octa-pruebas-dialogo::backdrop { background: rgb(15 23 42 / .45); backdrop-filter: blur(3px); }
.octa-pruebas-dialogo-cuerpo { display: flex; flex-direction: column; align-items: center; gap: .875rem; padding: 2rem 1.75rem 1.5rem; text-align: center; }
.octa-pruebas-dialogo-icono {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; font-size: 1.625rem;
    color: #a86b00; background: color-mix(in srgb, var(--octa-amber) 20%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--octa-amber) 9%, transparent);
}
.octa-pruebas-dialogo h2 { font-size: 1.125rem; font-weight: 700; color: var(--mono); }
.octa-pruebas-dialogo p { font-size: .875rem; line-height: 1.55; color: var(--secondary-foreground); }
.octa-pruebas-dialogo p strong { color: var(--mono); }
.octa-pruebas-dialogo-nota { font-size: .8125rem !important; color: var(--muted-foreground) !important; }
.octa-pruebas-dialogo .kt-btn { margin-top: .5rem; }
.dark .octa-pruebas-dialogo-icono { color: var(--octa-amber); }
@keyframes octa-pruebas-entrada { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
/* El contenedor que hace scroll tiene 1.25rem de relleno arriba: el aviso se pega al borde, no a ese relleno. */
#scrollable_content > .octa-pruebas-aviso { top: -1.25rem; }
/* En móvil la página entera hace scroll bajo la cabecera fija: el aviso queda fijo justo debajo de ella. */
@media (max-width: 1023.98px) {
    #scrollable_content > .octa-pruebas-aviso { position: fixed; top: var(--header-height, 60px); left: 0; right: 0; margin: 0; }
    #scrollable_content:has(> .octa-pruebas-aviso) { padding-top: calc(1.25rem + 2.4rem); }
}
/* Páginas públicas (entrada): el aviso es fijo, se reserva su hueco para que no tape el contenido. */
body:has(> .octa-pruebas-aviso) { padding-top: 2.4rem; }