/* ============================================================================
   TIKO · Admin — SKIN de marca sobre SKOTE
   ----------------------------------------------------------------------------
   🛑 REGLA (Norberto, 2026-08-22): "replicá los estilos de Skote, no inventes".
   Skote tematiza TODO con variables CSS de Bootstrap 5.3 (--bs-primary,
   --bs-body-bg, --bs-border-color, --bs-header-bg…). Por eso este archivo NO
   redefine superficies ni colores propios: solo
     1) cambia la MARCA (el azul #556ee6 de Skote → violeta TIKO),
     2) aplica el REDONDEADO de KIKA (inputs/botones 15px, cards 16px),
     3) adapta select2 y las grillas del helper NCG (que no son de Skote) a
        los MISMOS grises que ya usa Skote,
     4) deja el menú lateral oscuro tal cual Skote (#2a3042, data-sidebar="dark").
   Todo lo demás (blancos, bordes, sombras, topbar, footer) queda de Skote.
   Se carga SIEMPRE ÚLTIMO entre los CSS.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · MARCA: el primary de Skote pasa a violeta TIKO.
   Skote deriva de estas variables botones, links, badges, focus y activos.
   ------------------------------------------------------------------------- */
:root {
    --tk-marca: #556ee6;
    --tk-marca-hi: #7f92ec;
    --tk-marca-dk: #3f57cc;
    --tk-marca-soft: rgba(85, 110, 230, .10);
    --tk-marca-line: rgba(85, 110, 230, .35);

    /* Borde de los controles de formulario (el que ya usan los .form-control). */
    --tk-borde-control: #ced4da;

    /* Redondeado criterio KIKA */
    /* Redondeado criterio KIKA — bien marcado, "efecto cuadrado redondeado" */
    --tk-r-input: 22px;
    --tk-r-btn: 22px;
    --tk-r-card: 16px;

    /* 🛑 RADIO BASE DE BOOTSTRAP — es lo que usan las utilidades `rounded-*` del HTML,
       que vienen con !important y pisan cualquier border-radius que pongamos en una clase.
       KIKA hace exactamente esto (app.min.css): sube --bs-border-radius y --bs-border-radius-lg
       a 13px. Sin esto, un botón con `rounded-3` queda en 6.4px y se ve cuadrado. */
    --bs-border-radius: 13px;
    --bs-border-radius-lg: 13px;
    --bs-border-radius-xl: 20px;

    /* 🛑 ESPACIADO DE LAS CARDS — es la variable que gobierna el padding de TODOS los .card-body.
       Bootstrap trae 1.25rem; KIKA la baja a 0.5rem (su bootstrap.min.css) y por eso sus formularios
       aprovechan el ancho. Es el MISMO valor que usamos entre columnas, entre campos y entre cards:
       un solo número para todo el espaciado. */
    --bs-card-spacer-x: 0.5rem;
    --bs-card-spacer-y: 0.5rem;

    /* Se pisan las de Bootstrap/Skote: con esto cambia TODO el tema de una */
    --bs-primary: #556ee6;
    --bs-primary-rgb: 85, 110, 230;
    --bs-link-color: #556ee6;
    --bs-link-color-rgb: 85, 110, 230;
    --bs-link-hover-color: #3f57cc;
}

.btn-primary {
    --bs-btn-bg: var(--tk-marca);
    --bs-btn-border-color: var(--tk-marca);
    --bs-btn-hover-bg: var(--tk-marca-hi);
    --bs-btn-hover-border-color: var(--tk-marca-hi);
    --bs-btn-active-bg: var(--tk-marca-dk);
    --bs-btn-active-border-color: var(--tk-marca-dk);
    --bs-btn-disabled-bg: var(--tk-marca);
    --bs-btn-disabled-border-color: var(--tk-marca);
}

.btn-outline-primary {
    --bs-btn-color: var(--tk-marca);
    --bs-btn-border-color: var(--tk-marca);
    --bs-btn-hover-bg: var(--tk-marca);
    --bs-btn-hover-border-color: var(--tk-marca);
    --bs-btn-active-bg: var(--tk-marca);
    --bs-btn-active-border-color: var(--tk-marca);
}

.bg-primary { background-color: var(--tk-marca) !important; }
.text-primary { color: var(--tk-marca) !important; }
.border-primary { border-color: var(--tk-marca) !important; }
.bg-primary-subtle { background-color: #e8ecfb !important; }
.text-bg-primary { background-color: var(--tk-marca) !important; color: #fff !important; }

/* ---------------------------------------------------------------------------
   2 · REDONDEADO (lo único que TIKO cambia de la forma de Skote)
   ------------------------------------------------------------------------- */
.form-control,
.form-select,
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
    border-radius: var(--tk-r-input);
}

.btn { border-radius: var(--tk-r-btn); }
.btn-sm { border-radius: 16px; }
.btn-lg { border-radius: 26px; }

.card,
.modal-content {
    border-radius: var(--tk-r-card);
}

.dropdown-menu { border-radius: 12px; }
.badge { border-radius: 999px; }
.alert { border-radius: 12px; }

/* Foco de los controles con el violeta de marca */
.form-control:focus,
.form-select:focus {
    border-color: var(--tk-marca);
    box-shadow: 0 0 0 .15rem var(--tk-marca-soft);
}

/* 🛑 DESHABILITADO Y SOLO LECTURA, DISTINTOS DE UN CAMPO EDITABLE (Norberto, 2026-09-26: «los disabled deben tener un
   gris claro que se diferencie; el readonly, algo característico también; que se aplique a todo TIKO»).
   · DESHABILITADO: el gris del framework es `disabled` + `bg-light` ($.fn.Disabled / InputIsDisabled de los templates).
     El tema solo lo deja casi blanco (#f8f8fb): acá se asegura ESE mismo gris para todo control deshabilitado, aunque
     se haya apagado sin la clase (un `.prop('disabled')`, `SetFormState`, un renglón armado por JS). Select2 incluido.
   · SOLO LECTURA: se lee, se puede copiar, no se escribe → blanco con el borde PUNTEADO. */
.form-control:disabled,
.form-select:disabled,
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: rgba(var(--bs-light-rgb), 1);
    color: #74788d;
    cursor: not-allowed;
}
.form-control[readonly]:not(:disabled),
.form-select[readonly]:not(:disabled) {
    background-color: #fff;
    border-style: dashed;
    border-color: #b9bfd3;
    cursor: default;
}
.form-control[readonly]:not(:disabled):focus { border-style: dashed; }
/* 🛑 (30-09) El combo de solo lectura se ve igual que un campo de solo lectura: punteado, sin la flecha y sin mano (el clic ya
   no lo abre: jquery.helper.ncg.js, `select2:opening`). Sin esto parecía editable y en un evento cerrado dejaba elegir. */
select[readonly] + .select2-container--default .select2-selection--single,
select[readonly] + .select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border-style: dashed;
    border-color: #b9bfd3;
    cursor: default;
}
select[readonly] + .select2-container--default .select2-selection__arrow { display: none; }

/* 🛑 EL VALOR NUNCA QUEDA DEBAJO DEL ⓘ DEL TOOLTIP (Norberto, 2026-09-26: «el importe no debe solaparse con el ícono
   del tooltip»). Todas las plantillas de EditorTemplates ponen el ⓘ como HERMANO del input, anclado a la derecha
   (`position-absolute end-0 … me-3`): un importe alineado a la derecha (`text-end`) o un texto largo terminaba debajo
   del ícono. El input con tooltip se reserva ese lugar a la derecha. Las fechas quedan afuera: su texto va a la
   izquierda y el ⓘ va arriba del calendario del navegador. `!important` porque ncg_plugin.css (KIKA) fija el padding
   del input flotante con `!important`; acá se pisa SOLO el lado derecho, con un selector más específico: la geometría
   del framework (alto, padding de arriba y de abajo) no se toca. */
.form-floating:has(> [id^="tooltip-"]) > input.form-control:not([type="date"]):not([type="datetime-local"]),
[class*="col-sm-"]:has(> [id^="tooltip-"]) > input.form-control:not([type="date"]):not([type="datetime-local"]),
[id^="ctrl-"]:has(> [id^="tooltip-"]) > input.form-control:not([type="date"]):not([type="datetime-local"]) {
    padding-right: 2.25rem !important;
}

/* ---------------------------------------------------------------------------
   3 · SELECT2 — solo COLOR y FORMA. 🛑 La GEOMETRÍA (alto, line-height,
   padding, flecha) la resuelve ncg_plugin.css, que ya la tiene peleada en KIKA:
   si la pisamos desde acá, el texto se desborda fuera de la caja.
   Principio: KIKA pone el funcionamiento, Skote pone el estilo.
   ------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: var(--tk-r-input);
    border-color: var(--bs-border-color);
}

/* 🛑 GEOMETRIA DEL SELECT2: NO SE TOCA DESDE ACA.
   La resuelve ncg_plugin.css (el CSS del framework, ya peleado en KIKA): alto, line-height,
   padding y flecha, tanto para form-floating como para el combo suelto. Cada vez que este
   archivo intentó "mejorarla", el texto terminó fuera de la caja.
   Acá solo COLOR y RADIO. */

.select2-dropdown {
    border-radius: 14px;
    border-color: var(--bs-border-color);
    box-shadow: 0 5px 20px rgba(18, 38, 63, .12);
    overflow: hidden;
}

/* Hover de las opciones: gris suave de Skote (NO violeta fuerte, NO el verde de KIKA).
   El violeta queda solo para la opción YA seleccionada, y tenue. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
    color: var(--bs-body-color, #495057) !important;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--tk-marca-soft) !important;
    color: var(--tk-marca-dk) !important;
    font-weight: 600;
}

    .select2-container--default .select2-results__option[aria-selected="true"]:hover {
        background-color: var(--tk-marca-soft) !important;
    }

/* Foco del combo: mismo criterio que los inputs. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tk-marca);
    box-shadow: 0 0 0 .15rem var(--tk-marca-soft);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tk-marca-soft);
    border-color: var(--tk-marca-line);
    color: var(--tk-marca-dk);
    border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   4 · MENÚ LATERAL — Skote puro (#2a3042 vía data-sidebar="dark").
   Lo ÚNICO que cambia TIKO: el item activo va en violeta, no en el azul Skote.
   ------------------------------------------------------------------------- */
#sidebar-menu ul li a { border-radius: 0; }

/* --- SUBITEMS COMPACTOS (Norberto, 2026-09-05) -----------------------------
   «Le das mucha separación a los subítems y me corta el texto. Ponelos más a la
   izquierda, así ganamos espacio; los íconos de los submenús más chicos y el
   texto un poco más pegado, así ganamos amplitud.»

   Skote sangra el submenú con `padding-left: 3.6rem` sobre el <a> y le deja al
   ícono el mismo tamaño que al ítem padre. Con nombres de dos palabras
   —«Plantillas de convenio», «Formatos de liquidación»— el texto se partía en
   dos renglones y se cortaba.

   🛑 Se toca SOLO el submenú (`ul.sub-menu`): el ítem padre queda como está, que
      es el que da la referencia visual del nivel. */
/* 🛑 LA CUENTA, para no volver a errarle (Norberto, 2026-09-05: «los ítems no pueden salir más
   que el padre, se ve horrible»):
     · el ítem PADRE tiene `padding-left: 1.5rem` y su ícono `min-width: 1.75rem`
       → su TEXTO arranca en 3.25rem;
     · Skote sangra el submenú en 3.5rem porque en su diseño el subítem NO lleva ícono;
       TIKO sí le pone uno, así que el texto se iba a 3.5 + 1.75 = 5.25rem. Esa era la
       «mucha separación» que cortaba «Plantillas de convenio».
   Se sangra 2rem y el ícono ocupa 1.35rem: el TEXTO del subítem cae en 3.35rem, a la altura del
   texto del padre, y el ícono vive en la sangría — nunca a la izquierda del padre. */
#sidebar-menu ul li ul.sub-menu li a {
    padding-left: 2rem;
    padding-right: .6rem;
    font-size: .82rem;
    line-height: 1.25;
    white-space: normal;         /* que envuelva en vez de cortarse con «…» */
}

    /* El ícono del subítem: más chico y con una separación LEVE del texto. La distancia la da el
       `min-width` de la caja, no un margen: así todos los íconos alinean aunque el glifo sea
       más angosto. */
    #sidebar-menu ul li ul.sub-menu li a i {
        font-size: .95rem;
        min-width: 1.35rem;      /* Skote: 1.75rem */
        margin-right: 0;
        vertical-align: middle;
    }

/* ── EL TERCER NIVEL ────────────────────────────────────────────────────────────────────
   Sangra desde el segundo, no desde cero. Pero la sangría hay que MEDIRLA, no elegirla de
   ojo: el sidebar mide 250px fijos y cada rem que se sangra es un rem menos de texto.

   🛑 LA CUENTA (Norberto, 2026-09-05: «que el texto no se pase a otra línea»):
     · el subítem de 2º nivel sangra 2rem y su ícono ocupa 1.35rem → su texto cae en 3.35rem;
     · el de 3º tiene que caer A LA DERECHA de ese, o se pierde la jerarquía;
     · sangrando 2.6rem + 1.2rem de ícono, el texto del 3º cae en 3.8rem: 0.45rem a la derecha
       del padre —se lee como hijo— y sobran 11.3rem de los 15.6rem del sidebar.
   Con eso «Plantillas de liquidación», que es el más largo, entra en un renglón. */
#sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
    padding-left: 2.6rem;
    padding-right: .35rem;
    font-size: .78rem;
}

    /* El ícono del 3º, un punto más chico que el del 2º: acompaña la jerarquía y devuelve
       ancho al texto, que es lo que faltaba. */
    #sidebar-menu ul li ul.sub-menu li ul.sub-menu li a i {
        font-size: .88rem;
        min-width: 1.2rem;
    }

/* ============================================================================
   EL INPUT DEL SWEETALERT NO SE SALE DE LA TARJETA (Norberto, 2026-09-05)
   ==========================================================================
   El framework le pasa `customClass: { input: 'panel-info form-control' }`, y
   SweetAlert2 SUMA esa clase a la suya: queda `.swal2-input.form-control`.
   Bootstrap le pone `width: 100%` y swal2 le deja su `margin: 1em 2em`, así que
   el input mide el ancho completo MÁS 4em de margen y se desborda por los dos
   lados de la tarjeta.
   Se le sacan los márgenes laterales y se le deja el 100% del contenido. */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
    /* Con `width: 100%` y margen 0 el input queda pegado a los bordes de la tarjeta y el texto
       arranca contra el filo. Se le deja aire a los costados y el ancho lo compensa. */
    width: calc(100% - 2.5rem);
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    box-sizing: border-box;
}

/* ============================================================================
   LOS BOTONES DE ACCIÓN DE UNA FILA, CON SEPARACIÓN UNIFORME
   ==========================================================================
   Norberto (2026-09-05): «algunos están más pegados, otros más separados; deben
   estar uniformes». Pasaba porque cada botón traía su propio margen (`ms-1`) y
   algunos además el del framework (`.btn-views-edit`). Se resuelve con un flex
   con `gap`: la separación la decide el contenedor, una sola vez, y ya no
   depende de qué clases traiga cada botón.
   🛑 `width: max-content` para que la celda se ajuste a los botones y no
      desperdicie el ancho de la columna. */
.tk-acciones-fila {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: max-content;
    margin: 0 auto;
}

    .tk-acciones-fila > .btn {
        margin: 0 !important;
    }


body[data-sidebar="dark"] #sidebar-menu ul li a.active,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a.active {
    color: #fff;
}

    body[data-sidebar="dark"] #sidebar-menu ul li a.active i,
    body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a i {
        color: var(--tk-marca-hi);
    }

/* ---------------------------------------------------------------------------
   5 · GRILLAS DEL HELPER NCG (drawtable) — no son de Skote: se les da el
   MISMO gris/borde que usa Skote para tablas, y el violeta solo en selección.
   ------------------------------------------------------------------------- */
table.ncgdrawtable > thead > tr > th,
.ncgd-modern-thead,
.ncgd-input-filter,
table.ncgdrawtable tfoot,
.ncgd-pager-container {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #74788d);
    border-color: var(--bs-border-color);
}

/* El hover de la grilla lo define ncg_plugin.css (sección "AJUSTES TIKO"):
   una sola regla, para no pelear entre hojas. */

table.ncgdrawtable tbody tr.ngcd-trSelected > td,
.ngcd-trSelected > td {
    background-color: var(--tk-marca-soft) !important;
}

.btn-tool-base:hover,
.btn-hover-brand:hover {
    color: var(--tk-marca) !important;
    border-color: var(--tk-marca-line) !important;
}

.ncgd-spiner-loading-body { color: var(--tk-marca); }

/* Tarjetas y listas que arma el helper: mismo radio que las cards de Skote */
.list-wrapper.card,
.kika-card,
.kika-item-card,
[id$="ncgd-tablesearch-card"],
.ATIC-partial-card {
    border-radius: var(--tk-r-card);
}

.kika-tab-active { border-color: var(--tk-marca) !important; color: var(--tk-marca) !important; }

/* ---------------------------------------------------------------------------
   6 · UTILITARIAS propias de TIKO (las usan las pages). Construidas SOBRE las
   variables de Skote: si mañana cambia el tema, acompañan solas.
   ------------------------------------------------------------------------- */
.tk-page-title { font-size: 1.3rem; font-weight: 600; margin: 0 0 .15rem; }
.tk-page-sub { color: var(--bs-secondary-color); margin: 0 0 1.25rem; font-size: .9rem; }
.tk-sub { color: var(--bs-secondary-color); font-size: .875rem; }
.tk-ayuda { color: var(--bs-secondary-color); font-size: .78rem; }
.tk-mono { font-family: ui-monospace, Consolas, monospace; color: var(--tk-marca-dk); }

.tk-stat-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--bs-secondary-color); margin-bottom: .25rem;
}

.tk-stat-valor { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }

.tk-chip {
    display: inline-block; border-radius: 999px; padding: .15rem .6rem;
    font-size: .75rem; border: 1px solid var(--bs-border-color);
}

.tk-chip-ok { color: #34c38f; border-color: rgba(52,195,143,.3); background: rgba(52,195,143,.1); }
.tk-chip-warn { color: #f1b44c; border-color: rgba(241,180,76,.3); background: rgba(241,180,76,.1); }
.tk-chip-danger { color: #f46a6a; border-color: rgba(244,106,106,.3); background: rgba(244,106,106,.1); }
.tk-chip-info { color: #50a5f1; border-color: rgba(80,165,241,.3); background: rgba(80,165,241,.1); }
.tk-chip-marca { color: var(--tk-marca-dk); border-color: var(--tk-marca-line); background: var(--tk-marca-soft); }

/* 🛑 LA MARCA (V4, 07-10): la entrada hace de T + «IKO» con el punto rojo. Menú = versión oscura;
   con el menú achicado o en el celular queda solo la entrada, como el logo-sm de Skote. */
.tk-logo { display: flex; align-items: center; justify-content: center; height: 100%; }
.tk-logo-completo { height: 26px; width: auto; display: block; }
.tk-logo-icono { height: 30px; width: 30px; display: none; }
.vertical-collpsed .navbar-brand-box { padding: 0; }
.vertical-collpsed .tk-logo-completo { display: none; }
.vertical-collpsed .tk-logo-icono { display: block; }
@media (max-width: 991.98px) {
    .tk-logo-completo { display: none; }
    .tk-logo-icono { display: block; }
}
.tk-logo-completo.tk-logo-empresa { height: 42px; max-width: 190px; object-fit: contain; }
.tk-logo-icono.tk-logo-empresa { height: 34px; width: 34px; object-fit: contain; }
.tk-logo-ingreso { height: 46px; width: auto; max-width: 260px; object-fit: contain; }
.tk-logo-registro { height: 30px; width: auto; }
/* El menú scrollea; el bloque del usuario queda anclado abajo (molde KIKA .vertical-scroll +
   .sidebar-user-info: mismos valores). */
.vertical-scroll { height: calc(100% - 90px); }

.tk-sidebar-pie {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-bottom: .5rem;
    background: var(--bs-sidebar-bg, #2a3042);
}

.tk-sidebar-pie .btn { color: #a6b0cf; font-size: .82rem; }
.tk-sidebar-pie .btn:focus { border-color: transparent !important; box-shadow: none; }
.tk-sidebar-pie .btn:hover { color: #fff; }

/* Selector de ámbito: la pastilla de arriba del menú. */
.tk-sidebar-ambito > .btn {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
}

.tk-sidebar-ambito > .btn:hover { background: rgba(255, 255, 255, .12); }
.tk-sidebar-ambito .tk-ambito-sigla { background: rgba(255, 255, 255, .9); color: var(--tk-marca); }
.tk-user-logo { font-weight: 700; color: var(--tk-marca); }

.tk-check-grid { columns: 3; column-gap: 1.25rem; }

@media (max-width: 992px) {
    .tk-check-grid { columns: 2; }
}

@media (max-width: 576px) {
    .tk-check-grid { columns: 1; }
}

/* ---------------------------------------------------------------------------
   7 · PANTALLAS DE CUENTA — Skote no trae estas 2 clases wrapper en su CSS
   (las usa su HTML de auth). Se agregan con los mismos valores de Skote.
   ------------------------------------------------------------------------- */
body.authentication-bg { background-color: var(--bs-body-bg); min-height: 100vh; }

.account-pages .card,
.account-pages .mt-5.text-center {
    max-width: 430px;      /* mismo ancho que la demo de Skote */
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================================
   15 · PATRÓN DE CARD (feedback Norberto 2026-08-23)
   La línea que separa el header del body casi no se veía y a las cards les
   faltaba sombra. Concepto de KIKA (card con header + divisoria + body),
   estilos de Skote.
   ========================================================================== */
.card {
    box-shadow: 0 0 10px rgba(85, 110, 230, .38);
    border: 1px solid var(--bs-border-color);
}

.card:hover {
    box-shadow: 0 0 14px rgba(85, 110, 230, .50);
}

/* Divisoria header ↔ body: tiene que NOTARSE. */
.card > hr,
.card .card-header,
.card-header {
    border-bottom: 1px solid rgba(85, 110, 230, .28) !important;
    opacity: 1 !important;
}

.card > hr {
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(85, 110, 230, .28);
    opacity: 1;
    color: inherit;
}

/* El <hr class="text-muted opacity-25"> que usan las pages: se le sube el peso. */
.card > hr.text-muted {
    border-top-color: rgba(85, 110, 230, .28) !important;
    opacity: 1 !important;
}

.card-header {
    background-color: transparent;
    padding: .85rem 1.25rem;
}

/* Las tarjetas que arma el helper acompañan el mismo criterio. */
.list-wrapper.card,
.kika-card,
.kika-item-card,
[id$="ncgd-tablesearch-card"],
.ATIC-partial-card,
.table-wrapper-ncgdrawtable {
    box-shadow: 0 0 10px rgba(85, 110, 230, .38);
}

/* ============================================================================
   16 · AVATAR CON INICIALES (concepto KIKA, estilo Skote)
   ========================================================================== */
.tk-avatar-iniciales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--tk-marca-soft);
    color: var(--tk-marca-dk);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.tk-avatar-iniciales.tk-avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.tk-avatar-iniciales.tk-avatar-lg { width: 44px; height: 44px; font-size: 16px; }

/* ---------------------------------------------------------------------------
   15.b · Escala de sombras de TIKO
   Las pages usan `shadow-sm` de Bootstrap, que trae `!important` y pisaba la
   sombra de la card. Se redefine la escala para que TODA la app comparta el
   mismo criterio (más difusa y con el azul de Skote, no negro puro).
   ------------------------------------------------------------------------- */
.shadow-sm {
    box-shadow: 0 0 10px rgba(85, 110, 230, .38) !important;
}

.shadow {
    box-shadow: 0 0 14px rgba(85, 110, 230, .50) !important;
}

.shadow-lg {
    box-shadow: 0 0 20px rgba(85, 110, 230, .55) !important;
}


/* ============================================================================
   17 · CARD-ROUNDED — réplica del patrón de KIKA con los colores de Skote
   ----------------------------------------------------------------------------
   KIKA (app.min.css:6488):
       .card-rounded { border-radius: var(--kika-radius) !important;
                       border: none !important;
                       box-shadow: 0 4px 20px rgba(0,0,0,0.03);
                       transition: transform .2s ease, box-shadow .2s ease; }
   Acá va lo mismo, con el radio de TIKO y la sombra en el azul de Skote
   (rgba(18,38,63,...)) en vez de negro puro.
   🛑 TODA card de TIKO usa esta forma: la web tiene que verse pareja.
   ========================================================================== */
.card-rounded,
.card {
    border-radius: var(--tk-r-card) !important;
    box-shadow: 0 0 10px rgba(85, 110, 230, .38);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .card-rounded:hover,
    .card:hover {
        box-shadow: 0 0 14px rgba(85, 110, 230, .50);
    }

/* Las tarjetas que arma el helper comparten forma y sombra. */
.card-filter-rounded {
    border-radius: 12px !important;
}

.list-wrapper.card,
.kika-card,
.kika-item-card,
[id$="ncgd-tablesearch-card"],
.ATIC-partial-card,
.table-wrapper-ncgdrawtable {
    border-radius: var(--tk-r-card);
    box-shadow: 0 0 10px rgba(85, 110, 230, .38);
}

/* Red de seguridad del ancho del select2: si algún camino de inicialización quedara sin
   width:'100%', el combo debe ocupar igual el ancho de su columna (nunca el del <select> oculto).

   🛑 MEDIDO EN EL NAVEGADOR (23-08-2026): el combo salía en 73px dentro de una columna de 327px
   aunque el markup traía `style="width: 100%"` inline. La causa NO era el JS: era una pelea de
   !important que se define por ESPECIFICIDAD contra la regla del framework

       ncg_plugin.css:536  .select2-container:not(.selectFilter .select2-container) { width: auto !important }

   Ese `:not()` con selector compuesto aporta la especificidad de su argumento, así que la regla
   del framework pesa (0,3,0) y le ganaba a `.form-floating > .select2-container` (0,2,0) → el
   combo se encogía al ancho de su contenido.
   Se repite el mismo `:not()` para llegar a (0,4,0) y ganar, respetando la excepción de
   `.selectFilter` (los filtros de columna del drawtable, que SÍ van con ancho automático). */
.form-floating > .select2-container:not(.selectFilter .select2-container),
.mb-3 > .select2-container:not(.selectFilter .select2-container),
.form-group > .select2-container:not(.selectFilter .select2-container) {
    width: 100% !important;
}


/* ============================================================================
   18 · SOMBRA TEÑIDA CON LA MARCA (feedback Norberto 2026-08-23)
   En KIKA la sombra de las cards NO es gris: es un halo del COLOR PRIMARIO
   (`box-shadow: 0 0 10px #0c768a94` — teal al 58 %, sin desplazamiento).
   Con gris "ni se nota". Acá va lo mismo con el azul de TIKO.
   ========================================================================== */
.card,
.card-rounded,
.card-filter-rounded,
.list-wrapper.card,
.kika-card,
.kika-item-card,
.ncgd-tablesearch-card,
.ATIC-partial-card,
.table-wrapper-ncgdrawtable,
.shadow-sm {
    box-shadow: 0 0 10px rgba(85, 110, 230, .38) !important;
}

    .card:hover,
    .card-rounded:hover {
        box-shadow: 0 0 14px rgba(85, 110, 230, .50) !important;
    }

.modal-content,
.dropdown-menu.show,
.select2-dropdown {
    box-shadow: 0 0 14px rgba(85, 110, 230, .35) !important;
}


/* ============================================================================
   19 · BOTONERA DE LA PAGE — compacta (feedback Norberto 2026-08-23)
   Sobraba aire arriba y abajo de la fila de botones dentro de la card.
   ========================================================================== */
.card-body > [id^="tag-crud-"],
.card-body > [id^="bntuserAction"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

[id^="bntuserAction"] > .row,
[id^="tag-crud-"] > div > .row {
    margin-top: 0;
    margin-bottom: 0;
}

    /* Los mt-1/mb-1 de cada columna de botones: apenas un respiro. */
    [id^="bntuserAction"] .row > [class*="col-"] {
        margin-top: .1rem !important;
        margin-bottom: .1rem !important;
    }

/* El card-body que solo contiene la botonera no necesita el padding completo. */
.card > .card-body:has(> [id^="tag-crud-"]),
.card > .card-body:has(> [id^="bntuserAction"]) {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* La divisoria del header de la card, en el color de la marca (no gris). */
.card > hr,
.card > hr.text-muted {
    border-top-color: rgba(85, 110, 230, .28) !important;
    opacity: 1 !important;
    margin: 0;
}


/* ============================================================================
   20 · EL HEADER DEL CARD Y SU ESQUINA DE HERRAMIENTAS (Norberto, 2026-09-26: «este estilo nuevo de los card, los
   btn de la esquina, en todo TIKO: es patrón»). Los botones de ÍCONO de la derecha del header —ojito, lápiz, tacho,
   estrella, cerrar— van en un sector pegado al borde del card, separado por una línea y cada uno en su celda (como
   la X de las pestañas del navegador). «Ayuda» y los botones con texto quedan AFUERA, antes de la línea.
   Marcado:
     <div class="card card-rounded bg-white shadow-sm mb-2">
         <div class="tk-card-cabeza">
             <div class="tk-card-titulo"> ícono + <strong> + badges </div>
             <div class="tk-card-acciones"> Ayuda · flags · botones con texto </div>      (opcional)
             <div class="tk-card-herr">
                 <button type="button" class="tk-herr tk-herr-ojito" data-bs-toggle="collapse" data-bs-target="#x"
                         aria-expanded="true" aria-controls="x" title="Mostrar u ocultar"><i class="mdi mdi-eye-outline"></i></button>
                 @await Html.PartialAsync("_FavoritoStar")
                 <button type="button" class="tk-herr tk-herr-cerrar" onclick="…" title="Cerrar"><i class="mdi mdi-close"></i></button>
             </div>
         </div>
         <hr>   (o adentro del .collapse, como primer hijo)
     El orden de las celdas: ojito · lápiz · tacho · estrella · cerrar (la X siempre última). El ojito cambia de ícono
   solo (tiko-card.js). La cabeza lleva su propio relleno: en un card con p-2 se estira hasta el borde, así la esquina
   y la línea llegan siempre al borde del card.
   ========================================================================== */
:root {
    --tk-card-linea: rgba(85, 110, 230, .28);
}

.tk-card-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 42px;
    padding: .5rem .5rem .25rem;
}
/* En un card con relleno propio (p-1, p-2 —ítems del ATIC, subcards—, p-3) la cabeza se estira hasta el borde del card. */
.card.p-1 > .tk-card-cabeza {
    margin: -.25rem -.25rem 0;
}

.card.p-2 > .tk-card-cabeza {
    margin: -.5rem -.5rem 0;
}

.card.p-3 > .tk-card-cabeza {
    margin: -1rem -1rem 0;
}

.tk-card-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.tk-card-acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .tk-card-acciones {
        flex-wrap: wrap;
        flex-shrink: 1;
        white-space: normal;
    }
}

.tk-card-herr {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    flex-shrink: 0;
    /* Hasta el borde de arriba, el de la derecha y la línea del header (el relleno de la cabeza). */
    margin: -.5rem -.5rem -.25rem 0;
    border-left: 1px solid var(--tk-card-linea);
    border-top-right-radius: var(--tk-r-card);
    overflow: hidden;
}

.tk-herr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #74788d;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .tk-herr + .tk-herr {
        border-left: 1px solid var(--tk-card-linea);
    }

    .tk-herr > i {
        font-size: inherit;
        line-height: 1;
    }

    .tk-herr:hover,
    .tk-herr:focus-visible {
        background: var(--tk-marca-soft);
        color: var(--tk-marca);
        outline: 0;
    }

    .tk-herr:disabled {
        opacity: .4;
        cursor: default;
        background: transparent;
    }

.tk-herr-editar {
    color: var(--tk-marca);
}

.tk-herr-quitar {
    color: #f46a6a;
}

    .tk-herr-quitar:hover,
    .tk-herr-cerrar:hover {
        background: rgba(244, 106, 106, .12);
        color: #f46a6a;
    }

/* La estrella de favoritos mantiene su color (amarilla si es favorito). 🛑 (22-10) Su hover es AMARILLO también, no azul como el de
   los demás botones de la esquina: el fondo en el mismo amarillo suave y la estrella en un ámbar más intenso (el de «reservada»,
   #f59e0b), tanto la vacía como la prendida. */
.tk-herr-fav:hover,
.tk-herr-fav:focus-visible {
    background: rgba(245, 158, 11, .12);
    color: #f59e0b;
}

.tk-herr-fav:hover > i.text-muted,
.tk-herr-fav:hover > i.text-warning,
.tk-herr-fav:focus-visible > i.text-muted,
.tk-herr-fav:focus-visible > i.text-warning {
    color: #f59e0b !important;
}

/* Plegado: el card queda solo con su cabeza y la esquina baja hasta el borde redondeado. */
.card:has(> .collapse:not(.show)) .tk-card-herr,
.card:has(> .collapse:not(.show)) > .tk-card-cabeza > .tk-card-herr {
    border-bottom-right-radius: var(--tk-r-card);
}

/* La línea del header SIEMPRE con el color de la marca, también la que va adentro del cuerpo plegable, y pegada a la
   cabeza (la esquina baja justo hasta ella). En un card con p-2 cruza todo el card, como en los grandes. */
/* (El margen de ABAJO de la línea queda el que ponga la page: un mb-2 separa lo que sigue.) */
.tk-card-cabeza + hr,
.tk-card-cabeza + .collapse > hr:first-child {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0;
    border-top: 1px solid var(--tk-card-linea) !important;
    opacity: 1 !important;
}

.card.p-1 > .tk-card-cabeza + hr,
.card.p-1 > .tk-card-cabeza + .collapse > hr:first-child {
    margin-left: -.25rem !important;
    margin-right: -.25rem !important;
}

.card.p-2 > .tk-card-cabeza + hr,
.card.p-2 > .tk-card-cabeza + .collapse > hr:first-child {
    margin-left: -.5rem !important;
    margin-right: -.5rem !important;
}

.card.p-3 > .tk-card-cabeza + hr,
.card.p-3 > .tk-card-cabeza + .collapse > hr:first-child {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
}

/* 20.c · UN COMBO CON ERROR SE VE EN ROJO, como los inputs (Norberto, 26-09 noche: «que el validador de FormOperation me
   marque los controles con error»). Parsley pone `parsley-error` en el <select> oculto; lo que se ve es el select2 de
   al lado (Parsley mete su lista de errores en el medio: por eso `~` y no `+`): se le pinta el borde. */
select.parsley-error ~ .select2-container .select2-selection,
select.parsley-error ~ .select2-container--default .select2-selection--single,
select.parsley-error ~ .select2-container--default .select2-selection--multiple {
    border-color: #f46a6a !important;
}

form[id$="Filter"] .row > [class*="col-"] {
    position: relative;
}

form[id$="Filter"] .form-select-sm ~ .select2-container .select2-selection--single {
    font-size: .875em;
    height: calc(1.5em + .5rem + (var(--bs-border-width, 1px) * 2));
    min-height: calc(1.5em + .5rem + (var(--bs-border-width, 1px) * 2));
}

form[id$="Filter"] .form-select-sm ~ .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 1em;
    line-height: calc(1.5em + .5rem);
    padding-right: 30px;
}

form[id$="Filter"] .parsley-errors-list {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 5;
    white-space: nowrap;
    font-size: .75rem;
    line-height: 1.1;
}

/* 20.b · (02-10) EL OJITO DEL ATIC ES UN BOTÓN MÁS DEL ATIC, con la misma forma que «10» y «Agregar» (Norberto: «el ojito
   del ATIC es como los btn del ATIC»): queda el del framework, sin la celda de esquina del 26-09. */

/* ---------------------------------------------------------------------------
   La flecha de desplegar del select2, apenas por debajo del centro: así queda
   pareja con el ícono del tooltip del control (feedback Norberto 2026-08-23).
   ------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.form-floating .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Borde de los combos IGUAL al de los inputs (feedback Norberto 2026-08-23).
   Skote pinta el select2 con `--bs-border-color-translucent` (#ced4da) mientras
   que `.form-control` usa `--bs-border-color` (#eff2f7): por eso el combo se
   veía con un marco más oscuro que el resto de los campos del formulario.
   ------------------------------------------------------------------------- */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-dropdown {
    /* 🛑 EXACTAMENTE el mismo borde que un .form-control de TIKO. Medido en pantalla:
       el input computa #ced4da (se lo pone ncg_plugin.css), NO el --bs-border-color de
       Bootstrap (#eff2f7). Si acá se usa la variable, el combo queda más claro que los
       campos de texto y se nota la diferencia. */
    border-color: var(--tk-borde-control) !important;
}

/* Al abrirlo o enfocarlo manda la marca, igual que en los inputs. */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--tk-marca) !important;
}

/* ============================================================================
   20 · TOOLBAR DE LA GRILLA (feedback Norberto 2026-08-23)
   ========================================================================== */

/* --- a) La barra del buscador se redondea SOLO ARRIBA -----------------------
   Es la tapa de la grilla, no una card aparte: con las 4 esquinas redondeadas
   parecía otro card metido adentro de la tabla. */
[id$="ncgd-tablesearch-card"],
.ncgd-tablesearch-card {
    border-radius: var(--tk-r-card) var(--tk-r-card) 0 0 !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    box-shadow: none !important;
}

/* --- b) Al enfocar el buscador NO aparece borde extra en los extremos -------
   El grupo se comporta como UN control: solo el contorno exterior cambia. */
.ncg-group-integrated:focus-within .input-group-text,
.ncg-group-integrated:focus-within .form-control,
.ncg-group-integrated:focus-within .ncgd-btn-clear {
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--tk-marca) !important;
}

.ncg-group-integrated .form-control:focus,
.ncg-group-integrated .ncgd-btn-clear:focus,
.ncg-group-integrated .input-group-text:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* El borde interior entre las piezas no se dibuja (ya lo hacía el plugin,
   se refuerza para el estado de foco). */
.ncg-group-integrated .form-control {
    border-left: none !important;
    border-right: none !important;
}

/* --- c) MODO AGRUPADO de los botones de opciones ---------------------------
   Se activa con `ButonOpcion: { BotonesEnGrupo: true }` en el drawtable.
   Los botones quedan unidos como un input-group: solo el primero redondeado a
   la izquierda y el último a la derecha. Sin el parámetro, todo sigue como hoy. */
.ncgd-opciones-agrupadas .btn,
.ncgd-opciones-agrupadas .btn-group > .btn,
.ncgd-opciones-agrupadas .btn-group {
    border-radius: 0 !important;
    margin: 0 !important;
}

.ncgd-opciones-agrupadas .btn + .btn,
.ncgd-opciones-agrupadas .btn-group + .btn,
.ncgd-opciones-agrupadas .btn + .btn-group,
.ncgd-opciones-agrupadas .btn-group + .btn-group {
    border-left-width: 0 !important;
}

    /* Extremos: los únicos redondeados. */
    .ncgd-opciones-agrupadas > .collapse > :first-child .btn,
    .ncgd-opciones-agrupadas > .collapse > :first-child.btn {
        border-top-left-radius: var(--tk-r-input) !important;
        border-bottom-left-radius: var(--tk-r-input) !important;
    }

    .ncgd-opciones-agrupadas > .collapse > :last-child .btn,
    .ncgd-opciones-agrupadas > .collapse > :last-child.btn {
        border-top-right-radius: var(--tk-r-input) !important;
        border-bottom-right-radius: var(--tk-r-input) !important;
    }

.ncgd-opciones-agrupadas > .collapse {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   ATIC — CHROME DE PESTAÑAS, TARJETAS Y PIE  (réplica de KIKA con colores TIKO)
   --------------------------------------------------------------------------
   🛑 POR QUÉ ESTÁ ACÁ: en KIKA estas clases viven dentro de su `app.min.css`
   (Skote + la capa propia de KIKA). El `app.min.css` de TIKO es el de Skote
   PELADO, así que `kika-tab-label`, `kika-tab-active`, el separador, el
   contador y los botones pegados NO existían y las tabs del ATIC salían como
   texto plano. Se replican con el MISMO concepto y geometría; lo único que
   cambia es el color: el teal de KIKA (#007e80 / #e0f2f1 / #b2dfdb) pasa al
   azul Skote de TIKO. Los nombres de clase se MANTIENEN (`kika-*`) porque son
   los que emite `jquery.helper.ncg.js` — renombrarlos rompería el framework.
   ========================================================================== */
:root {
    --tk-tab-bg: #eef1fd;      /* fondo de tab (equivale a --kika-soft-bg) */
    --tk-tab-line: #ced4f6;    /* línea y bordes  (equivale a --kika-soft-line) */
    --tk-tab-text: #556ee6;    /* texto activo    (equivale a --kika-teal) */
    --tk-tab-muted: #999;      /* texto de tab inactiva */
}

/* --- 1. Tarjeta de item del ATIC --- */
.kika-item-card {
    background-color: #fff;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .03) !important;
    margin-bottom: 0.5rem;
}
.kika-item-header {
    background: transparent;
    border-bottom: none;
    padding: .75rem 1rem 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- 2. Cabecera de sección: la PESTAÑA de arriba --- */
.kika-tab-container { display: flex; align-items: flex-end; margin-bottom: 0.5rem; }

.kika-tab-label {
    background-color: var(--tk-tab-bg);
    color: var(--tk-tab-text);
    border: 1px solid var(--tk-tab-line);
    border-bottom: none;              /* se conecta con la línea */
    border-radius: 6px 6px 0 0;       /* redondeo SOLO arriba */
    padding: 4px 15px;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: -1px;              /* pisa la línea */
    position: relative;
    z-index: 2;
    cursor: pointer;
}
.kika-tab-label.inactive { background-color: #fff; color: var(--tk-tab-muted); z-index: 0; }

/* Activa: acento arriba + negrita. El padding compensa los 2px que crece el borde
   para que el texto NO salte al cambiar de tab. */
.kika-tab-label.kika-tab-active {
    border-top: 3px solid var(--tk-tab-text) !important;
    padding-top: 2px !important;
    font-weight: 700 !important;
    z-index: 5;
}
/* Skote pinta `.nav-link.active` con SU primario: acá se alinea al de TIKO. */
.nav-tabs-custom .nav-link.active,
.kika-tab-label.kika-tab-active {
    color: var(--tk-tab-text) !important;
    background-color: var(--tk-tab-bg) !important;
    border-top: 3px solid var(--tk-tab-text) !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
    font-weight: 700 !important;
    z-index: 5;
}

/* Tab en ERROR (validación): rojo, sin importar el tema. */
.kika-tab-error { color: #dc3545 !important; }
.kika-tab-error i { color: #dc3545 !important; }
.kika-tab-active.kika-tab-error {
    border-top: 3px solid #dc3545 !important;
    color: #dc3545 !important;
    background-color: #fff !important;
}
.kika-tab-label.kika-tab-error { color: #dc3545 !important; background-color: #fff !important; }
.kika-tab-label.kika-tab-error i,
.kika-tab-active.kika-tab-error i { color: #dc3545 !important; }

/* La línea que sale de la pestaña y cruza a lo ancho */
.kika-line-separator {
    flex-grow: 1;
    border-bottom: 1px solid var(--tk-tab-line);
    height: 1px;
    margin-bottom: 0;
}
/* Botón "Agregar" pegado a la línea de arriba */
.kika-btn-header-wrapper {
    padding-left: .5rem;
    border-bottom: 1px solid var(--tk-tab-line);
    padding-bottom: 0;
}

/* --- 3. Pie de sección: contador + línea + botón --- */
.kika-footer-row { display: flex; align-items: center; }
.kika-counter-box {
    background-color: var(--tk-tab-bg);
    color: var(--tk-tab-text);
    border: 1px solid var(--tk-tab-line);
    font-size: .75rem;
    font-weight: 700;
    min-width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-right: -1px;               /* pegado a la línea que sale de él */
}
.kika-footer-line { flex-grow: 1; height: 1px; background-color: var(--tk-tab-line); }
.kika-btn-footer-wrapper { text-align: right; margin-top: -12px; }

/* --- 4. Botones pegados a la línea (arriba/abajo) --- */
.btn-attached-top,
.btn.btn-sm.btn-attached-top {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: -1px;
    border: 1px solid var(--tk-tab-line) !important;
}
.btn-attached-bottom,
.btn.btn-sm.btn-attached-bottom {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border: 1px solid var(--tk-tab-line) !important;
}

/* ==========================================================================
   FAMILIA DE BOTONES -ico / -tlb  (19 variantes traídas de KIKA)
   --------------------------------------------------------------------------
   🛑 POR QUÉ ESTABA FALTANDO: en KIKA estas variantes están dentro de SU
   `bootstrap.min.css` (Bootstrap + la familia propia). El `bootstrap.min.css`
   de TIKO es el de Skote PELADO, así que las clases que el patrón exige
   (`btn-outline-primary-ico`, `btn-outline-purple-tlb`, `btn-outline-secondary-tlb`,
   el botón de eliminar `-danger-ico`, etc.) no existían y los botones caían al
   outline crudo de Bootstrap: sin fondo tintado y sin relleno en hover.
   Se replican TAL CUAL, con un solo cambio de color: el primario TEAL de KIKA
   (#0c768a) pasa al azul Skote de TIKO (#556ee6). El resto de los colores
   (danger, success, warning, info, purple, pink, dark, light, secondary) son
   los MISMOS que KIKA — no dependen de la marca.
   · -ico = botón de ícono (fila de la grilla): fondo tintado al 25%, se rellena en hover.
   · -tlb = botón de toolbar: mismo criterio, pensado para texto + ícono.
   ========================================================================== */
.btn-outline-primary-ico {
    --bs-btn-color: #556ee6;
    --bs-btn-border-color: #556ee6;
    --bs-btn-bg: rgba(85, 110, 230, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #556ee6;
    --bs-btn-hover-border-color: #556ee6;
    --bs-btn-focus-shadow-rgb: 85, 110, 230;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #556ee6;
    --bs-btn-active-border-color: #556ee6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #556ee6;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #556ee6;
    --bs-gradient: none;
}
.btn-outline-secondary-ico {
    --bs-btn-color: #8590a5;
    --bs-btn-border-color: #8590a5;
    --bs-btn-bg: rgba(133, 144, 165, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8590a5;
    --bs-btn-hover-border-color: #8590a5;
    --bs-btn-focus-shadow-rgb: 133, 144, 165;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8590a5;
    --bs-btn-active-border-color: #8590a5;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #8590a5;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #8590a5;
    --bs-gradient: none;
}
.btn-outline-success-ico {
    --bs-btn-color: #38c786;
    --bs-btn-border-color: #38c786;
    --bs-btn-bg: rgba(56, 199, 134, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #38c786;
    --bs-btn-hover-border-color: #38c786;
    --bs-btn-focus-shadow-rgb: 56, 199, 134;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #38c786;
    --bs-btn-active-border-color: #38c786;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #38c786;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #38c786;
    --bs-gradient: none;
}
.btn-outline-purple-ico {
    --bs-btn-color: #986de5;
    --bs-btn-border-color: #986de5;
    --bs-btn-bg: rgba(152, 109, 229, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #986de5;
    --bs-btn-hover-border-color: #986de5;
    --bs-btn-focus-shadow-rgb: 152, 109, 229;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #986de5;
    --bs-btn-active-border-color: #986de5;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #986de5;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #986de5;
    --bs-gradient: none;
}
.btn-outline-info-ico {
    --bs-btn-color: #4e9def;
    --bs-btn-border-color: #4e9def;
    --bs-btn-bg: rgba(78, 157, 239, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4e9def;
    --bs-btn-hover-border-color: #4e9def;
    --bs-btn-focus-shadow-rgb: 78, 157, 239;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4e9def;
    --bs-btn-active-border-color: #4e9def;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #4e9def;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #4e9def;
    --bs-gradient: none;
}
.btn-outline-warning-ico {
    --bs-btn-color: #f4ba40;
    --bs-btn-border-color: #f4ba40;
    --bs-btn-bg: rgba(244, 186, 64, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f4ba40;
    --bs-btn-hover-border-color: #f4ba40;
    --bs-btn-focus-shadow-rgb: 244, 186, 64;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f4ba40;
    --bs-btn-active-border-color: #f4ba40;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f4ba40;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f4ba40;
    --bs-gradient: none;
}
.btn-outline-danger-ico {
    --bs-btn-color: #ed5e49;
    --bs-btn-border-color: #ed5e49;
    --bs-btn-bg: rgba(237, 94, 73, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ed5e49;
    --bs-btn-hover-border-color: #ed5e49;
    --bs-btn-focus-shadow-rgb: 237, 94, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ed5e49;
    --bs-btn-active-border-color: #ed5e49;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ed5e49;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ed5e49;
    --bs-gradient: none;
}
.btn-outline-pink-ico {
    --bs-btn-color: #e83e8c;
    --bs-btn-border-color: #e83e8c;
    --bs-btn-bg: rgba(232, 62, 140, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e83e8c;
    --bs-btn-hover-border-color: #e83e8c;
    --bs-btn-focus-shadow-rgb: 232, 62, 140;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e83e8c;
    --bs-btn-active-border-color: #e83e8c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #e83e8c;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #e83e8c;
    --bs-gradient: none;
}
.btn-outline-light-ico {
    --bs-btn-color: #f2f6f7;
    --bs-btn-border-color: #f2f6f7;
    /* Para colores muy claros, a veces se necesita un poco m�s de opacidad */
    --bs-btn-bg: rgba(242, 246, 247, 0.35);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f2f6f7;
    --bs-btn-hover-border-color: #f2f6f7;
    --bs-btn-focus-shadow-rgb: 242, 246, 247;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f2f6f7;
    --bs-btn-active-border-color: #f2f6f7;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f2f6f7;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f2f6f7;
    --bs-gradient: none;
}
.btn-outline-dark-ico {
    --bs-btn-color: #47484a;
    --bs-btn-border-color: #47484a;
    --bs-btn-bg: rgba(71, 72, 74, 0.25);
    /* Aumentado a 0.25 */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #47484a;
    --bs-btn-hover-border-color: #47484a;
    --bs-btn-focus-shadow-rgb: 71, 72, 74;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #47484a;
    --bs-btn-active-border-color: #47484a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #47484a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #47484a;
    --bs-gradient: none;
}
.btn-outline-primary-tlb {
    --bs-btn-color: #556ee6;
    --bs-btn-border-color: #556ee6;
    --bs-btn-bg: transparent;
    /* Hover: Fondo claro (15%), Texto sigue siendo Teal */
    --bs-btn-hover-color: #556ee6;
    --bs-btn-hover-bg: rgba(85, 110, 230, 0.15);
    --bs-btn-hover-border-color: #556ee6;
    /* Active/Click */
    --bs-btn-active-color: #556ee6;
    --bs-btn-active-bg: rgba(85, 110, 230, 0.25);
    --bs-btn-active-border-color: #556ee6;
    --bs-btn-focus-shadow-rgb: 85, 110, 230;
}
.btn-outline-secondary-tlb {
    --bs-btn-color: #8590a5;
    --bs-btn-border-color: #8590a5;
    --bs-btn-bg: transparent;
    /* Hover */
    --bs-btn-hover-color: #8590a5;
    --bs-btn-hover-bg: rgba(133, 144, 165, 0.15);
    --bs-btn-hover-border-color: #8590a5;
    /* Active */
    --bs-btn-active-color: #8590a5;
    --bs-btn-active-bg: rgba(133, 144, 165, 0.25);
    --bs-btn-active-border-color: #8590a5;
    --bs-btn-focus-shadow-rgb: 133, 144, 165;
}
.btn-outline-success-tlb {
    --bs-btn-color: #38c786;
    --bs-btn-border-color: #38c786;
    --bs-btn-bg: transparent;
    /* Hover */
    --bs-btn-hover-color: #38c786;
    --bs-btn-hover-bg: rgba(56, 199, 134, 0.15);
    --bs-btn-hover-border-color: #38c786;
    /* Active */
    --bs-btn-active-color: #38c786;
    --bs-btn-active-bg: rgba(56, 199, 134, 0.25);
    --bs-btn-active-border-color: #38c786;
    --bs-btn-focus-shadow-rgb: 56, 199, 134;
}
.btn-outline-info-tlb {
    --bs-btn-color: #4e9def;
    --bs-btn-border-color: #4e9def;
    --bs-btn-bg: transparent;
    /* Hover */
    --bs-btn-hover-color: #4e9def;
    --bs-btn-hover-bg: rgba(78, 157, 239, 0.15);
    --bs-btn-hover-border-color: #4e9def;
    /* Active */
    --bs-btn-active-color: #4e9def;
    --bs-btn-active-bg: rgba(78, 157, 239, 0.25);
    --bs-btn-active-border-color: #4e9def;
    --bs-btn-focus-shadow-rgb: 78, 157, 239;
}
.btn-outline-warning-tlb {
    --bs-btn-color: #f4ba40;
    --bs-btn-border-color: #f4ba40;
    --bs-btn-bg: transparent;
    /* Hover */
    --bs-btn-hover-color: #cf9a2b;
    /* Oscurezco un poco el texto en hover para lectura */
    --bs-btn-hover-bg: rgba(244, 186, 64, 0.15);
    --bs-btn-hover-border-color: #f4ba40;
    /* Active */
    --bs-btn-active-color: #cf9a2b;
    --bs-btn-active-bg: rgba(244, 186, 64, 0.25);
    --bs-btn-active-border-color: #f4ba40;
    --bs-btn-focus-shadow-rgb: 244, 186, 64;
}
.btn-outline-danger-tlb {
    --bs-btn-color: #ed5e49;
    --bs-btn-border-color: #ed5e49;
    --bs-btn-bg: transparent;
    /* Hover */
    --bs-btn-hover-color: #ed5e49;
    --bs-btn-hover-bg: rgba(237, 94, 73, 0.15);
    --bs-btn-hover-border-color: #ed5e49;
    /* Active */
    --bs-btn-active-color: #ed5e49;
    --bs-btn-active-bg: rgba(237, 94, 73, 0.25);
    --bs-btn-active-border-color: #ed5e49;
    --bs-btn-focus-shadow-rgb: 237, 94, 73;
}
.btn-outline-purple-tlb {
    --bs-btn-color: #986de5;
    --bs-btn-border-color: #986de5;
    --bs-btn-bg: transparent;
    /* Hover */
    --bs-btn-hover-color: #986de5;
    --bs-btn-hover-bg: rgba(152, 109, 229, 0.15);
    --bs-btn-hover-border-color: #986de5;
    /* Active */
    --bs-btn-active-color: #986de5;
    --bs-btn-active-bg: rgba(152, 109, 229, 0.25);
    --bs-btn-active-border-color: #986de5;
    --bs-btn-focus-shadow-rgb: 152, 109, 229;
}
.btn-outline-dark-tlb {
    --bs-btn-color: #47484a;
    --bs-btn-border-color: #47484a;
    --bs-btn-bg: transparent;
    /* Hover */
    --bs-btn-hover-color: #47484a;
    --bs-btn-hover-bg: rgba(71, 72, 74, 0.15);
    --bs-btn-hover-border-color: #47484a;
    /* Active */
    --bs-btn-active-color: #47484a;
    --bs-btn-active-bg: rgba(71, 72, 74, 0.25);
    --bs-btn-active-border-color: #47484a;
    --bs-btn-focus-shadow-rgb: 71, 72, 74;
}
.btn-outline-light-tlb {
    --bs-btn-color: #8590a5;
    /* Texto gris�ceo para que se lea */
    --bs-btn-border-color: #dce1e6;
    --bs-btn-bg: transparent;
    /* Hover */
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: rgba(242, 246, 247, 0.5);
    --bs-btn-hover-border-color: #dce1e6;
    /* Active */
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: rgba(242, 246, 247, 0.8);
    --bs-btn-active-border-color: #dce1e6;
    --bs-btn-focus-shadow-rgb: 242, 246, 247;
}

/* --- Utilitarias que el framework emite y Skote no trae --- */
/* Botón cuadrado de ícono: alto = ancho, sin padding (lo usa la col de Acciones). */
.btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: calc(0.94rem + 1.5em + -1px);
    width: calc(0.94rem + 1.5em + -1px);
    padding: 0;
}
.btn-icon i, .btn-icon img, .btn-icon svg { vertical-align: middle; }
.btn-group-sm > .btn-icon.btn, .btn-icon.btn-sm { height: calc(0.5rem + 1.5em + 2px); width: calc(0.5rem + 1.5em + 2px); }
.btn-group-lg > .btn-icon.btn, .btn-icon.btn-lg { height: calc(1rem + 1.5em + 2px);  width: calc(1rem + 1.5em + 2px); }

/* Tamaño de ícono de los botones de fila (entre fs-5 y fs-6 de Bootstrap). */
.fs-5-5 { font-size: 1rem !important; }

.btn-rounded-pill { border-radius: 15px !important; }

/* Input-group redondeado (el bloque de Buscar/Columnas/Exportar del drawtable). */
.grp-rounded-16 > .btn,
.grp-rounded-16 > .dropdown-menu { border-radius: var(--tk-r-input, 22px) !important; }
.grp-rounded-16 > .dropdown-menu {
    border-radius: calc(var(--tk-r-input, 22px) / 2) !important;
    box-shadow: var(--bs-box-shadow-sm) !important;
}

/* Spinner que el helper mete dentro de un input mientras resuelve un lookup. */
.input-spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--tk-marca, #556ee6);
    pointer-events: none;
}

/* Número gigante de las pantallas de error (404/500). */
.error-title {
    text-transform: uppercase;
    background: repeating-linear-gradient(45deg, #556ee6, #556ee6 20px, #38c786 40px, #38c786 10px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 12rem;
    line-height: .8;
    position: relative;
}

/* ---------------------------------------------------------------------------
   PERMISOS — LISTA PLANA + AYUDA EN TOOLTIP (pedido Norberto 2026-08-24).
   Los switches de permisos ya NO van cada uno adentro de su cajita: van uno
   debajo del otro, separados por un divisor sutil, y el código/descripción se
   mudaron al tooltip del ícono (la card triplicaba el alto por nada).
   🛑 CRITERIO COMPARTIDO: lo usan SEG/RolAddMod y la card de permisos del
   USUARIO (SEG/UsuarioAddMod → _PermisoUsuarioItem). Las dos pantallas tienen
   que verse IGUAL: si se toca acá, se toca para las dos.
   ⚠️ `.tk-perm-item` NO es decoración: es el contenedor que busca el JS con
   `.closest('.tk-perm-item')` para atenuar el permiso que no cabe en el nivel.
   ------------------------------------------------------------------------- */
.tk-perm-item {
    padding: .3rem .15rem;
    border-bottom: 1px solid rgba(85, 110, 230, .12);
}

.tk-perm-item:last-child {
    border-bottom: 0;
}

/* El ícono de ayuda, alineado con el switch y sin robar ancho al nombre. */
.tk-perm-ayuda {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* -------------------------------------------------------------------------
   TOOLTIPS DEL ADMIN — explican campos y CADA una de sus opciones, asi que
   son largos: no pueden usar el globito negro translucido de Bootstrap.
   🛑 Feedback Norberto (2026-09-03): «ese fondo con letra en blanco no se lee,
   ademas es medio transparente, se pisa con el texto de atras y marea».
   Tres reglas: fondo SOLIDO (opacidad 1) sobre superficie clara, ancho tope
   para que el texto se acomode, y alto tope con scroll para que uno largo no
   tape media pantalla.
   ------------------------------------------------------------------------- */
.tooltip {
    --bs-tooltip-max-width: 420px;
    --bs-tooltip-opacity: 1;          /* 🛑 sin translucido: se pisaba con el fondo */
    --bs-tooltip-bg: #ffffff;
    --bs-tooltip-color: #2b3445;
    --bs-tooltip-padding-x: .75rem;
    --bs-tooltip-padding-y: .6rem;
    --bs-tooltip-border-radius: .6rem;
    --bs-tooltip-font-size: .78rem;
}

.tooltip .tooltip-inner {
    text-align: left;
    line-height: 1.45;
    max-height: min(60vh, 420px);     /* si es largo, scrollea en vez de desbordar */
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(85, 110, 230, .3);
    border-radius: var(--bs-tooltip-border-radius);
    /* 🛑 Un blanco plano queda pegado al fondo: la sombra en dos capas es lo que lo
       despega de la pantalla y lo hace leible. */
    box-shadow: 0 .15rem .4rem rgba(20, 30, 60, .1),
                0 .9rem 2.2rem rgba(20, 30, 60, .26);
    background-image: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    word-break: break-word;           /* nombres tecnicos largos no rompen el ancho */
}

/* 🛑 Con contenido largo hay que poder ENTRAR al tooltip a scrollear. Bootstrap lo
   cierra al salir del disparador, asi que el JS (tiko-tooltip.js) lo mantiene abierto
   mientras el mouse esta encima: para eso necesita recibir eventos. */
.tooltip.tk-tooltip-scroll {
    pointer-events: auto;
}

/* La flecha acompaña al fondo claro, si no queda un triangulito negro flotando. */
.tooltip .tooltip-arrow::before {
    border-top-color: #f7f9ff;
    border-bottom-color: #ffffff;
    border-left-color: #fbfcff;
    border-right-color: #fbfcff;
    filter: drop-shadow(0 0 1.5px rgba(85, 110, 230, .45));
}

.tooltip .tooltip-inner b {
    display: inline-block;
    margin-top: .35rem;
    color: #1c2536;
}

/* El titulo de cada grupo dentro de un tooltip largo, para poder ubicarse. */
.tooltip .tooltip-inner u {
    display: block;
    margin: .55rem 0 .2rem;
    padding-bottom: .15rem;
    border-bottom: 1px solid rgba(85, 110, 230, .22);
    text-decoration: none;
    font-weight: 600;
    color: #556ee6;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .04em;
}

/* El nombre tecnico de la variable y su tabla.campo, que van monoespaciados. */
.tooltip .tooltip-inner .font-monospace {
    color: #5a6b8c;
    font-size: .72rem;
}

.tooltip .tooltip-inner small {
    color: #6c7a94;
}

/* El scroll del tooltip, discreto. */
.tooltip .tooltip-inner::-webkit-scrollbar {
    width: 7px;
}

.tooltip .tooltip-inner::-webkit-scrollbar-thumb {
    background: rgba(85, 110, 230, .32);
    border-radius: 4px;
}

/* Tooltip con HTML (ayuda general de la card y ayuda por permiso): los 200px
   de Bootstrap dejan la lista de permisos en una columna ilegible. */
.tooltip.tk-tooltip-permisos {
    --bs-tooltip-max-width: 420px;
}

.tk-tooltip-permisos .tooltip-inner {
    text-align: left;
}

.tk-tooltip-permisos .tooltip-inner ul {
    margin-bottom: 0;
    padding-left: 1rem;
}

.tk-tooltip-permisos .tooltip-inner li {
    margin-bottom: .15rem;
}

/* Formularios: las columnas van pegadas como en KIKA (0.5rem entre una y otra) para aprovechar el
   ancho de la card, y los campos dejan ese mismo aire hacia abajo. */
.card .row {
    --bs-gutter-x: 0.5rem;
}

/* El aire vertical del campo se iguala al horizontal. El mb-3 del template deja el doble, y el
   wrapper NO siempre es un .row (cada EditorTemplate arma el suyo): se ancla por el id, que es
   el único común a todos. */
.card [id^="ctrl-"].mb-3 {
    margin-bottom: 0.5rem !important;
}

/* El campo en sí es un .row propio de los EditorTemplates (id="ctrl-<Prop>"): conserva el gutter
   estándar para no tocar la separación entre el label y su input. */
.card .row[id^="ctrl-"] {
    --bs-gutter-x: 1.5rem;
}

/* Cards apilados de un formulario: el mismo aire que hay entre columnas, para no perder alto. */
.card-rounded {
    margin-bottom: 0;
}

.card-rounded + .card-rounded {
    margin-top: 0.5rem;
}

/* La card que contiene un ATIC no tiene card-body: el contenido cuelga directo, así que el aire
   lo pone la card. Sin esto las tarjetas de adentro quedan pegadas al borde. */
.card-rounded > [id^="Contenedor"],
.card-rounded > [id^="CardPerm"] {
    padding: 0.5rem;
}

/* El cuerpo del formulario: los campos ya traen su propio aire (gutter + mb), así que el body
   solo necesita despegarlos del borde. Sin esto quedan hundidos arriba, abajo y a los costados. */
.card-rounded > .card-body {
    padding: 0.5rem 0.5rem 0 0.5rem;
}

.swal2-popup {
    border-radius: var(--tk-r-card) !important;
}

.tk-icono-web {
    position: absolute; left: .35rem; bottom: .35rem; z-index: 2;
    width: 44px; height: 44px; border-radius: 10px; overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2px dashed #ced4da;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.tk-icono-web:has(img:not(.d-none)) { border: 1px solid #dee2e6; }
.tk-icono-web:hover { border-color: var(--bs-primary); }
.tk-icono-web img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.tk-icono-web .vacio { color: #6c757d; text-align: center; font-size: .6rem; line-height: 1.1; }
.tk-icono-web .vacio i { font-size: 1.25rem; display: block; }
.tk-logo-oscuro-web {
    position: absolute; right: .35rem; top: .35rem; z-index: 2;
    width: 92px; height: 38px; border-radius: 8px; overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #2a3042; border: 2px dashed rgba(255, 255, 255, .45);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.tk-logo-oscuro-web:has(img:not(.d-none)) { border: 1px solid rgba(255, 255, 255, .25); }
.tk-logo-oscuro-web:hover { border-color: #fff; }
.tk-logo-oscuro-web img { width: 100%; height: 100%; object-fit: contain; padding: 3px 6px; }
.tk-logo-oscuro-web .vacio { color: rgba(255, 255, 255, .82); text-align: center; font-size: .58rem; line-height: 1.05; }
.tk-logo-oscuro-web .vacio i { font-size: .95rem; display: block; }
.tk-icono-web-quitar {
    position: absolute; top: 2px; right: 2px; z-index: 3;
    width: 18px; height: 18px; padding: 0; border-radius: 50%;
    align-items: center; justify-content: center; font-size: .7rem;
}

.swal2-actions .btn {
    min-width: 110px;
}

.swal2-actions .btn-sm {
    min-width: 96px;
}

/* ---------------------------------------------------------------------------
   Ancho de los combos de FILTRO PRINCIPAL (los de la botonera, inline).
   Valores calcados de KIKA (assets/css/app.min.css:6148): el select2 toma todo
   el ancho disponible entre un mínimo y un máximo, así no queda ni angosto ni
   comiéndose la fila. La page puede apretar más con un style="min-width:...".
   ------------------------------------------------------------------------- */
.select-filter-With .select2-container {
    min-width: 200px;
    max-width: 300px;
    width: 100% !important;
}

.select-filter-With-full .select2-container {
    min-width: 300px;
    max-width: 350px;
    width: 100% !important;
}

.select-filter-With-lg .select2-container {
    min-width: 320px;
    max-width: 460px;
    width: 100% !important;
}

/* El <select> de verdad, ANTES de que select2 lo reemplace, ocupa el mismo ancho que el combo ya transformado: la barra no
   se corre ni se ve «angosto» mientras carga la page. */
.select-filter-With .input-group,
.select-filter-With-full .input-group,
.select-filter-With-lg .input-group {
    flex-wrap: nowrap;
}

.select-filter-With .input-group > .select2-container,
.select-filter-With-full .input-group > .select2-container,
.select-filter-With-lg .input-group > .select2-container {
    margin-left: 0 !important;
}

.select-filter-With select.slct-ncg:not(.select2-hidden-accessible) {
    min-width: 200px;
    max-width: 300px;
    width: 100% !important;
}

.select-filter-With-full select.slct-ncg:not(.select2-hidden-accessible) {
    min-width: 300px;
    max-width: 350px;
    width: 100% !important;
}

.select-filter-With-lg select.slct-ncg:not(.select2-hidden-accessible) {
    min-width: 320px;
    max-width: 460px;
    width: 100% !important;
}

/* ---------------------------------------------------------------------------
   COMBO CHICO (form-select-sm) — que el select2 mida lo MISMO que el input
   --------------------------------------------------------------------------
   El template reemplaza el <select> por un .select2-container hermano, y el
   alto lo fija Skote en 38px: al lado de un form-control-sm (~31px) el combo
   queda más alto y la fila se ve despareja. KIKA lo corrige con el bloque de
   `assets/css/app.min.css:6176` (alto, line-height del texto y flecha, todo
   `calc(1.5em + .5rem)` = el tamaño sm).

   🛑 Diferencia deliberada con KIKA: allá la regla es GLOBAL para todo select2.
   Acá va ANCLADA al hermano `.form-select-sm`, así toca SOLO los combos que se
   declararon chicos y no roza la geometría del form-floating —que en TIKO ya
   está peleada en ncg_plugin.css:856 y es la que se rompe cada vez que este
   archivo intenta "mejorarla".
   ------------------------------------------------------------------------- */
.form-select-sm + .select2-container .select2-selection--single {
    /* MISMA cuenta que `.form-control-sm` de Skote: font .875em (sobre los 13px del body) y
       height = line-height + padding + bordes. Con `.875rem` fijo daba 29px contra los 27.06px
       del input — 2px de diferencia que se ven. Medido en el probe, no calculado a ojo. */
    font-size: .875em;
    height: calc(1.5em + .5rem + (var(--bs-border-width, 1px) * 2));
    min-height: calc(1.5em + .5rem + (var(--bs-border-width, 1px) * 2));
}

.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 1em;
    line-height: calc(1.5em + .5rem);
    padding-right: 30px;
}

.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
}

    .form-select-sm + .select2-container--default .select2-selection--single .select2-selection__arrow b {
        top: 0;
    }

/* ---------------------------------------------------------------------------
   BOTONES QUE AGREGA EL EDITORTEMPLATE (buscar / agregar / limpiar del combo)
   --------------------------------------------------------------------------
   El template los mete en un `.input-group` pegados al control (ids `btnS-`,
   `btnA-`, `btnC-`, `btnX-`). Con el redondeado de TIKO (22px) Bootstrap los
   dejaba cuadrados y más bajos que el combo: se veía un recuadro suelto en el
   medio de la fila. Molde: KIKA `app.min.css:6957` («Excepción Botones
   vecinos») + su bloque de select2 en input-group (`app.min.css:7005`).
   ------------------------------------------------------------------------- */

/* El control queda RECTO del lado en que se le pega el botón. */
.input-group > .select2-container:not(:last-child) .select2-selection--single,
.input-group > .form-floating:not(:last-child) .select2-selection--single,
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Y el botón, redondeado solo del lado de AFUERA, con el alto del control. */
.input-group > [id^="btnS-"],
.input-group > [id^="btnA-"],
.input-group > [id^="btnC-"],
.input-group > [id^="btnX-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding-inline: .75rem;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--tk-r-input) !important;
    border-bottom-right-radius: var(--tk-r-input) !important;
}

/* Con VARIOS botones, redondea a la derecha solo el último BOTÓN (el ⓘ del tooltip también es hijo del grupo:
   «:last-child» lo contaba y dejaba cuadrado al último botón). */
.input-group > [id^="btnS-"]:has(~ [id^="btnS-"], ~ [id^="btnA-"], ~ [id^="btnC-"], ~ [id^="btnX-"]),
.input-group > [id^="btnA-"]:has(~ [id^="btnS-"], ~ [id^="btnA-"], ~ [id^="btnC-"], ~ [id^="btnX-"]),
.input-group > [id^="btnC-"]:has(~ [id^="btnS-"], ~ [id^="btnA-"], ~ [id^="btnC-"], ~ [id^="btnX-"]),
.input-group > [id^="btnX-"]:has(~ [id^="btnS-"], ~ [id^="btnA-"], ~ [id^="btnC-"], ~ [id^="btnX-"]) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* El ⓘ de ayuda del combo en línea (barras de filtro) va ADENTRO del combo, a la izquierda de la flecha del desplegable:
   queda pegado al borde derecho del combo y antes de los botones, no encima de ellos ni de la flecha. */
.input-group > [id^="btnS-"],
.input-group > [id^="btnA-"],
.input-group > [id^="btnC-"],
.input-group > [id^="btnX-"] {
    order: 2;
}

.input-group > span.position-absolute[id^="tooltip-"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    order: 1;
    flex: 0 0 .8125rem;
    width: .8125rem;
    margin: 0 calc(2.7rem - .8125rem) 0 -2.7rem !important;
    align-self: center;
    z-index: 5;
}

/* Combo en línea SIN botones: el ⓘ estaba medido desde el borde de la columna (que tiene el padding del gutter) y quedaba
   encima de la flecha del desplegable. Se mide desde el borde del combo, igual que con botones. */
div:not(.input-group):not(.form-floating):has(> select.slct-ncg) > span.position-absolute[id^="tooltip-"] {
    right: calc(1.9rem + var(--bs-gutter-x, 1.5rem) * .5) !important;
}

/* El texto elegido no pisa el ⓘ (solo en línea: los combos flotantes no se tocan). */
*:not(.form-floating):has(> select.slct-ncg):has(> span.position-absolute[id^="tooltip-"]) > .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 2.9rem;
}

/* ---------------------------------------------------------------------------
   LAYOUT DE REGISTRO (gemela de _LayoutF de KIKA) — sin menú
   --------------------------------------------------------------------------
   Skote le deja a `.main-content` el margen del sidebar (250px). Sin sidebar,
   ese margen deja todo corrido a la derecha.
   ------------------------------------------------------------------------- */
body.tk-registro .main-content {
    margin-left: 0 !important;
}

body.tk-registro #page-topbar {
    left: 0 !important;
}

body.tk-registro .footer {
    left: 0 !important;
}

    body.tk-registro #page-topbar .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.25rem;
    }

/* ---------------------------------------------------------------------------
   LIENZO COMPLETO (`_LayoutTikoFull`) — el editor de mapas y lo que venga igual
   --------------------------------------------------------------------------
   Mismo problema que el layout de registro, y la misma cura: Skote le deja a
   `.main-content` el margen del sidebar (250px) y al `.navbar-brand-box` su
   ancho fijo de 250px. Sin sidebar, la herramienta arranca corrida y pierde
   un cuarto de la pantalla — Norberto lo vio: «esto debe estar al ancho de la
   page».
   Va aparte de `.tk-registro` a propósito: el registro centra una tarjeta, acá
   se trata de NO desperdiciar un pixel.
   ------------------------------------------------------------------------- */
body[data-tiko-lienzo="1"] .main-content {
    margin-left: 0 !important;
}

body[data-tiko-lienzo="1"] #page-topbar,
body[data-tiko-lienzo="1"] .footer {
    left: 0 !important;
}

body[data-tiko-lienzo="1"] .navbar-brand-box {
    width: auto !important;
    padding: 0 1rem 0 1.25rem;
}

/* 🛑 El encabezado oscuro (data-topbar="dark", color del menú): las migas en claro, como los iconos
   del header (--bs-header-dark-item-color). El link al listado, en el celeste del menú. */
body[data-tiko-lienzo="1"][data-topbar="dark"] #page-topbar .page-title { color: var(--bs-header-dark-item-color, #e9ecef); }
body[data-tiko-lienzo="1"][data-topbar="dark"] #page-topbar .page-title a { color: #a6b0cf; }
body[data-tiko-lienzo="1"][data-topbar="dark"] #page-topbar .page-title a:hover { color: #fff; }

/* Y el contenedor del RenderBody: sin padding lateral ni tope de ancho.
   🛑 PERO CONSERVANDO EL PADDING DE ARRIBA, que es el que deja lugar al topbar FIJO.
      Con `padding: 0` el editor se metía DEBAJO del header: su barra de herramientas
      quedaba tapada y abajo sobraba justo esa misma altura. Norberto lo vio —«arriba
      muy pegado y abajo mucho espacio»— y no se veía ni el botón Guardar.
      El valor lo MIDE el JS (`ajustarAlto`) y lo deja en `--tk-mapa-topbar`, así no
      depende de que el header siga midiendo lo mismo para siempre. */
body[data-tiko-lienzo="1"] .page-content {
    padding: var(--tk-mapa-topbar, 70px) 0 0 0 !important;
}

body[data-tiko-lienzo="1"] #ContainerRenderBody {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   TITULO DE LA PAGE EN LA BARRA DE ARRIBA — a la misma altura que el icono de
   menu (feedback Norberto 2026-08-31).
   --------------------------------------------------------------------------
   Skote le pone `.page-title-box { padding-bottom: 24px }` porque en su plantilla
   original esa caja va DENTRO del contenido, arriba de la primera card. En TIKO
   vive en el topbar, al lado del boton del menu: ese padding de abajo empuja el
   texto hacia arriba y el titulo queda 12px mas alto que el icono.
   Medido: boton centro 35px · texto centro 23px.
   ------------------------------------------------------------------------- */
#page-topbar .page-title-box {
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   FLECHA DEL COMBO CHICO — centrada (feedback Norberto 2026-08-31).
   --------------------------------------------------------------------------
   El bloque de `.form-select-sm` de mas arriba estira el contenedor de la flecha
   a `height:100%; top:0` para que ocupe todo el alto del combo chico, y le pasaba
   el mismo `top:0` al triangulo: con eso el `top:50%` de select2 quedaba pisado y
   la flecha se pegaba al borde de arriba. Medido: 6,5px por encima del centro.
   El triangulo dibuja 6px de alto (border-width 6px 6px 0), asi que se centra con
   `top:50%` y medio triangulo de margen negativo.
   ------------------------------------------------------------------------- */
.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    margin-top: -3px;
}

/* ---------------------------------------------------------------------------
   GRILLA SEPARADA DEL CARD DE FILTROS (feedback Norberto 2026-08-31).
   --------------------------------------------------------------------------
   La grilla del drawtable no es una `.card-rounded`, asi que la regla
   `.card-rounded + .card-rounded { margin-top: .5rem }` no la alcanzaba y quedaba
   pegada al card de filtros (medido: 0px de separacion). Va el MISMO 0.5rem del
   resto del admin, no un margen propio de cada page.
   ------------------------------------------------------------------------- */
.card-rounded + div > .table-wrapper-ncgdrawtable {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   FORMULA DENTRO DE UNA GRILLA — chip monoespaciado.
   --------------------------------------------------------------------------
   Una formula en una celda es codigo, no prosa: sin este chip se mezcla con la
   descripcion y no se distingue de un texto cualquiera. Mismo alto y peso visual
   que `.kika-badge-row` para que la fila no se desnivele.
   ------------------------------------------------------------------------- */
code.tk-formula {
    display: inline-block;
    max-width: 100%;
    padding: 1px 6px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--tk-marca-dk, #4a3aff);
    background-color: var(--tk-marca-soft, #eeecff);
    border: 1px solid var(--tk-marca-line, #ddd9ff);
    border-radius: 6px;
    white-space: normal;
    word-break: break-word;
}

/* Badge del tipo de calculo «Formula»: el violeta de marca, para que no se confunda con los
   badges de clasificacion (que ya usan info/primary/warning). */
.tk-badge-formula {
    background-color: var(--tk-marca-soft, #eeecff);
    color: var(--tk-marca-dk, #4a3aff);
    border: 1px solid var(--tk-marca-line, #ddd9ff);
}

/* ---------------------------------------------------------------------------
   DESCRIPCION LARGA DENTRO DE UNA GRILLA — envuelve, NO trunca (feedback
   Norberto 2026-08-31: «no quiero truncar el texto con...; quiero un break y
   que el texto siga abajo en otra linea»).
   --------------------------------------------------------------------------
   El drawtable pinta la tabla con `text-nowrap`: sin esto una descripcion larga
   estira la columna y descuadra toda la grilla. Con esto el texto salta de linea
   dentro del ancho de la columna y se lee ENTERO — la fila crece lo que haga
   falta. ⛔ Nada de `text-truncate` ni de line-clamp: cortar la descripcion
   esconde justamente lo que explica la variable.
   ------------------------------------------------------------------------- */
.tk-desc-wrap {
    white-space: normal;
    line-height: 1.3;
    /* 🛑 Y NO SE SALE DE LA CELDA (Norberto, 2026-09-05: «me sale el texto largo»).
       `white-space: normal` corta en los espacios, pero una lista separada por `·` o un nombre
       técnico largo (`entradas_devueltas_parcial_importe`) no tiene dónde cortar y desborda la
       columna, pisando lo de al lado. `anywhere` la parte donde haga falta. */
    overflow-wrap: anywhere;
    min-width: 0;
}

.tk-desc-wrap-palabra {
    white-space: normal;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
    min-width: 0;
}

/* Una descripción larga se recorta a tres renglones y el resto vive en su `title`.
   La grilla se lee de un vistazo: el texto completo se ve al pasar el mouse o al abrir la fila. */
.tk-desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lo mismo para el renglón secundario —«La usan: …»—, que con muchos convenios se hace largo. */
.tk-desc-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   BOTON CUSTOM PEGADO A UN INPUT — redondeado como el control (feedback
   Norberto 2026-08-31: «el btn de formula esta medio cuadrado, debe estar
   rounded como el ico del input asi queda uniforme el control»).
   --------------------------------------------------------------------------
   El bloque de mas arriba redondea los botones del EditorTemplate por PREFIJO
   de id (btnS-, btnA-, btnC-, btnX-), asi que cualquier `BtnsCustom` con id
   propio —`btnFxVariable`, `btnFxEmpCargo-…`— quedaba cuadrado. El template les
   pone `input-group-append` a TODOS: anclando ahi, el redondeo alcanza tambien
   a los que vengan.
   ------------------------------------------------------------------------- */
.input-group > .btn.input-group-append {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--tk-r-input) !important;
    border-bottom-right-radius: var(--tk-r-input) !important;
}

    .input-group > .btn.input-group-append:not(:last-child) {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }


/* Varios chips en una celda angosta: bajan de renglon en vez de pisar la columna de al lado. */
.tk-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.tk-chips-wrap > code.tk-formula {
    max-width: 100%;
    overflow-wrap: anywhere;
}


/* Una fila con muchos campos adentro de un ATIC: sin esto, el ancho minimo de los
   inputs y de los select2 no deja encoger las columnas y el card se sale del contenedor. */
.tk-fila-encaja > [class*="col-"] {
    min-width: 0;
}

.tk-fila-encaja .form-control,
.tk-fila-encaja .form-select,
.tk-fila-encaja .select2-container,
.tk-fila-encaja .input-group {
    min-width: 0;
    max-width: 100%;
}

/* Columnas fraccionarias para que una fila de cálculo entre entera (Norberto, 2026-09-24):
   el combo del tipo va angosto —su menú se ensancha solo con `OpcionesDescripcion`— y el
   concepto cede lugar al valor y a su moneda. Mismo contrato que las col-md-* de Bootstrap. */
@media (min-width: 768px) {
    .col-md-2-5 { flex: 0 0 auto; width: 20.8333333%; }
    .col-md-3-5 { flex: 0 0 auto; width: 29.1666667%; }
}


/* Red de contencion: el card que se abre dentro de un ATIC no puede pasarse de su celda.
   Si la tabla llega a ser mas ancha que su contenedor, el card se iba con ella. */
td > .collapse > .ATIC-partial-card,
td > .ATIC-partial-card {
    max-width: 100%;
    box-sizing: border-box;
}


/* Un input-group cuyo boton se oculta segun el contexto: sin esto el input queda con la
   esquina derecha recta, porque el boton sigue estando (aunque no se vea) y el input no
   es el ultimo hijo. La clase la pone la page cuando esconde el boton. */
.input-group.tk-sin-boton > .form-floating:last-of-type,
.input-group.tk-sin-boton > .form-floating:last-of-type > .form-control,
.input-group.tk-sin-boton > .form-control:last-of-type {
    border-top-right-radius: var(--tk-r-input) !important;
    border-bottom-right-radius: var(--tk-r-input) !important;
}


/* -------------------------------------------------------------------------
   COMBOS DE VARIABLES — el desplegable no puede ir atado al ancho del campo
   🛑 ESTÁNDAR DE TIKO (Norberto, 2026-09-03): todo combo que liste variables
   muestra el nombre y abajo su descripción, y para eso el desplegable tiene
   que ser MÁS ANCHO que el campo. Con un combo chico la descripción queda
   cortada y no se entiende qué es cada variable.
   Se activa solo: el editor le pone `tk-dropdown-variables` cuando el combo
   define `OpcionesDescripcion`.
   ------------------------------------------------------------------------- */
.select2-container--open .select2-dropdown.tk-dropdown-variables {
    min-width: 460px;
    width: auto !important;
    max-width: min(96vw, 620px);
    box-shadow: 0 .9rem 2.2rem rgba(20, 30, 60, .24);
    border-color: rgba(85, 110, 230, .35);
}

.tk-dropdown-variables .select2-results__option {
    padding: .45rem .7rem;
    border-bottom: 1px solid rgba(85, 110, 230, .08);
}

.tk-dropdown-variables .select2-results__option:last-child {
    border-bottom: 0;
}

/* El alto también: con dos renglones por opción, 200px muestran tres y media. */
.tk-dropdown-variables .select2-results__options {
    max-height: min(60vh, 420px);
}

@media (max-width: 575.98px) {
    .select2-container--open .select2-dropdown.tk-dropdown-variables {
        min-width: 0;
        max-width: 96vw;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🛑 REGLA (Norberto, 2026-09-04): un FLAG que comparte fila con otro control va
   CENTRADO verticalmente, nunca pegado arriba. Los demás controles tienen su label
   arriba y el input abajo; el switch no, así que sin esto queda flotando al tope.
   Se le pone a la COLUMNA que contiene el switch: <div class="col-md-3 tk-flag-fila">
   ───────────────────────────────────────────────────────────────────────────── */
.tk-flag-fila {
    display: flex;
    align-items: center;
}

/* El margen de abajo del control es lo que rompe el centrado exacto. */
.tk-flag-fila > .form-check {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   🛑 EL RANGO DE FECHAS EN LA BARRA DE UNA BÚSQUEDA (Norberto, 2026-09-30: «toda fecha
   desde-hasta va con el EditorFor de daterange, como KIKA; la fecha es filtro principal»).
   `responsive-box-fecha` es la de KIKA (app.min.css:6076), que TIKO no tenía. El ⓘ va
   adentro del «Hasta», a la derecha, como el del combo en la barra.
   ───────────────────────────────────────────────────────────────────────────── */
.responsive-box-fecha {
    width: 100%;
}

@media (min-width: 768px) {
    .responsive-box-fecha {
        max-width: 250px;
    }
}

.input-daterange .tk-rango-info {
    top: 20%;
    right: .6rem;
    z-index: 5;
}

.input-daterange:has(.tk-rango-info) > input:last-of-type {
    padding-right: 1.7rem;
}

/* En una ficha (la variante con el rótulo arriba), el ⓘ va adentro del «Hasta»: que la fecha no quede debajo. */
.input-daterange .form-floating:has(.tk-rango-info-flotante) > input {
    padding-right: 2.4rem;
}

/* 🛑 LA HORA EN EL CALENDARIO (tiko-datepicker-hora.js, 30-09): la franja al pie del calendario de siempre, arriba de «Hoy» y
   «Borrar». Chica y centrada, con los combos del tamaño de un número de dos cifras; no se pinta al pasar el mouse. */
.datepicker .tk-dp-hora-fila td {
    padding: 6px 4px 2px;
    cursor: default;
    background: transparent !important;
}
.datepicker .tk-dp-hora {
    position: relative; /* ancla la lista de horas o minutos */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.datepicker .tk-dp-hora .mdi-clock-outline {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1.1rem;
    margin-right: 2px;
}
/* (30-09, 3.ª vuelta de Norberto: «tipo numeric up-down, que se pueda escribir a mano y subir o bajar de a uno») La hora y los
   minutos: recuadros que se reparten el ancho de la fila, con la letra del calendario, y sus flechas ▲▼ a la derecha. */
.datepicker .tk-dp-num {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 30px;
    border: 1px solid var(--tk-borde-control, #ced4da);
    border-radius: 10px;
    background: #fff;
    /* !important: adentro de una ficha del ATIC, su regla de las filas pone `overflow: visible` a todo. */
    overflow: hidden !important;
}
.datepicker .tk-dp-num:focus-within {
    border-color: var(--tk-marca, #556ee6);
    box-shadow: 0 0 0 .15rem var(--tk-marca-soft, rgba(85, 110, 230, .10));
}
.datepicker .tk-dp-num-valor {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    color: #495057;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}
.datepicker .tk-dp-num-flechas {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--tk-borde-control, #ced4da);
}
.datepicker .tk-dp-num-flechas button {
    flex: 1 1 50%;
    width: 22px;
    padding: 0;
    border: 0;
    background: #f8f9fa;
    color: #6c757d;
    font-size: .8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.datepicker .tk-dp-num-flechas button + button {
    border-top: 1px solid var(--tk-borde-control, #ced4da);
}
.datepicker .tk-dp-num-flechas button:hover {
    background: var(--tk-marca-soft, rgba(85, 110, 230, .10));
    color: var(--tk-marca, #556ee6);
}
/* 🐛 El plugin le da a TODO span de una celda el formato de sus meses (23 % de ancho, 54 px de alto, float): los «:» quedaban
   con un hueco grande a cada lado. */
.datepicker table tr td .tk-dp-hora span.tk-dp-dos-puntos {
    display: inline;
    float: none;
    width: auto;
    height: auto;
    line-height: normal;
    margin: 0;
    border-radius: 0;
    background: transparent !important;
    cursor: default;
    font-size: .875rem;
    color: #495057;
}
/* La fila de abajo: «Borrar» a la izquierda y «Listo» a la derecha. */
.datepicker tfoot th.clear.tk-dp-con-listo {
    text-align: left;
    padding-left: 12px;
}
.datepicker tfoot th.tk-dp-listo-celda {
    text-align: right;
    padding: 4px 6px;
    cursor: default;
    background: transparent !important;
}
.datepicker .tk-dp-listo {
    padding: 2px 14px;
    font-size: .8rem;
    border-radius: 10px;
}
/* El rango CON HORA en el celular: «30/09/2026 21:00» no entra dos veces en 375 px (la hora quedaba cortada). Debajo de sm, el
   Desde y el Hasta van uno debajo del otro, cada uno a lo ancho y con sus puntas redondeadas como cualquier campo. */
@media (max-width: 575.98px) {
    .input-daterange:has(input[data-tk-hora="true"]) {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .input-daterange:has(input[data-tk-hora="true"]) > .form-floating {
        flex: 1 1 100%;
        margin-left: 0 !important;
    }
    .input-daterange:has(input[data-tk-hora="true"]) > .form-floating > .form-control {
        border-radius: 22px !important;
    }
}

/* El rango con la forma de los demás campos de TIKO: las puntas redondeadas como cualquier campo de ficha (22 px) y el texto
   a la izquierda (bootstrap-datepicker lo centraba y dejaba las puntas en 3 px). */
.input-daterange .form-floating > .form-control {
    text-align: left;
}

.input-daterange > .form-floating:first-child > .form-control {
    border-radius: 22px 0 0 22px;
}

.input-daterange > .form-floating:last-child > .form-control {
    border-radius: 0 22px 22px 0;
}

/* Lo mismo en la barra de una búsqueda (la variante sin rótulo): puntas como el texto de al lado y fecha a la izquierda. */
.input-daterange > input.form-control {
    text-align: left;
}

.input-daterange > input.form-control:first-of-type {
    border-radius: 22px 0 0 22px;
}

/* !important: el ⓘ va después del «Hasta», así que para Bootstrap no es el último del grupo y le saca la punta
   (`.input-group:not(.has-validation) > :not(:last-child)…`, más fuerte que esta regla). */
.input-daterange > input.form-control:last-of-type {
    border-radius: 0 22px 22px 0 !important;
}

/* 🐛 (30-09, ficha de Procesos) Con el flag AL FINAL Y A LA DERECHA (`justify-content-end`), el ⓘ del switch —que va en
   posición absoluta después del rótulo y no ocupa lugar— quedaba 10 px afuera del card. Se le deja su lugar. Es el mismo
   arreglo que tenía solo el wizard (evento-wizard.css), ahora para todo TIKO. */
.tk-flag-fila.justify-content-end > .form-check:has([data-bs-toggle="tooltip"]) {
    margin-right: 1.35rem;
}

.tk-plano-wrap {
    position: relative;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 16px;
    background: #f8f9fb;
    overflow: hidden;
    min-height: 320px;
}

.tk-plano-lienzo {
    position: absolute;
    inset: 0;
    touch-action: none;
    cursor: grab;
}

    .tk-plano-lienzo svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* 🛑 El recuadro de selección (tiko-plano.js `seleccion(true)`, las butacas de cortesía del wizard): cruz para marcar,
       mano con la barra espaciadora; el recuadro es el del editor de mapas (`.tk-marco` de recinto-mapa.css), con el
       borde fijo aunque se haga zoom. */
    .tk-plano-lienzo.tk-plano-sel {
        cursor: crosshair;
        user-select: none;
    }

        .tk-plano-lienzo.tk-plano-sel.tk-plano-mano {
            cursor: grab;
        }

.tk-plano .tk-plano-marco {
    fill: rgba(85,110,230,.12);
    stroke: var(--bs-primary, #556ee6);
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.tk-plano-barra {
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.tk-plano-aviso {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: none;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    color: #6b7280;
    font-size: .85rem;
    text-align: center;
    z-index: 2;
}

/* La sala sin color propio: el mismo celeste que le pone el editor de mapas (`colorDe`: s.Color || '#bfdbfe'). */
.tk-plano .area {
    fill: #bfdbfe;
    stroke: rgba(0, 0, 0, .35);
    stroke-width: 1.5;
    cursor: pointer;
    transition: opacity .15s;
}

    .tk-plano .area.neutra {
        fill: #d8dbe0;
        cursor: default;
        stroke-dasharray: 6 4;
    }

    .tk-plano .area.apagada {
        opacity: .25;
    }

    .tk-plano .area.elegida {
        stroke: #556ee6;
        stroke-width: 3;
    }

.tk-plano .rotulo {
    font: 600 14px system-ui, sans-serif;
    fill: #1f2937;
    pointer-events: none;
}

    /* 🛑 El RÓTULO de la mesa (<text class="rotulo mesa"> del plano compilado) también tiene la clase «mesa»: le pegaba el
       relleno y el borde marrón del DIBUJO de la mesa (.tk-plano .mesa) y la letra quedaba ilegible y más ancha que la mesa
       (Norberto, 28-09: «cuando selecciono una alternativa con mesas se ve terrible el texto»). Letra oscura del tamaño de la
       mesa, con un halo claro para leerse encima del dibujo; más específica que .tk-plano .mesa. */
    .tk-plano .rotulo.mesa {
        font-size: 6px; font-weight: 700; fill: #3f352c;
        stroke: rgba(255, 255, 255, .85); stroke-width: 1.4px; stroke-linejoin: round; paint-order: stroke;
    }

.tk-plano .puerta {
    fill: #fcd34d;
    stroke: #d69c2f;
    stroke-width: 1.5;
}

.tk-plano .mesa {
    fill: #d6ccc2;
    stroke: #a89684;
    stroke-width: 1.2;
}

.tk-plano .butaca {
    fill: #94a3b8;
    stroke: rgba(0, 0, 0, .35);
    stroke-width: .6;
    cursor: pointer;
}

    .tk-plano .butaca.fuera {
        fill: #e9ecef !important;
        opacity: .45;
        cursor: default;
    }

    .tk-plano .butaca.ocupada {
        fill: #9ca3af !important;
        cursor: not-allowed;
    }

    .tk-plano .butaca.reservada {
        fill: #f59e0b !important;
    }

    .tk-plano .butaca.elegida {
        stroke: #16a34a;
        stroke-width: 1.6;
    }

    .tk-plano .butaca.sin-precio {
        opacity: .3;
    }

/* 🛑 LAS BUTACAS DEL MOTOR (Norberto, 2026-10-07: «no quiero ver butacas redondas en ningún lugar»): la carga del evento y
   Ocupación ven las salas con el motor de tiko-plano (`butacasGrandes`), igual que la web: la butaca es un grupo y el color va
   en el asiento por herencia (los estados de arriba y los de Ocupación siguen mandando). El respaldo, apenas más oscuro; el
   tilde, solo en la elegida; las letras de fila y el escenario no toman los toques. */
.tk-plano .butaca .respaldo { fill: #000; fill-opacity: .2; stroke: none; pointer-events: none; }
.tk-plano .butaca .tilde { display: none; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tk-plano .butaca.elegida .tilde { display: inline; }
.tk-plano .filas, .tk-plano .ex-escenario { pointer-events: none; }
.tk-plano .rotulo-fila { fill: #74788d; font-weight: 700; }
.tk-plano .ex-escenario path { fill: none; stroke: #556ee6; stroke-linecap: round; }
.tk-plano .ex-escenario text { fill: #495057; font-weight: 700; letter-spacing: .18em; }
/* El mini mapa: la sala entera en chico, abajo a la izquierda, con el recuadro de lo que se ve. */
.tk-plano-mini {
    position: absolute; left: 8px; bottom: 8px; z-index: 1; width: 112px; height: 84px; overflow: hidden;
    border-radius: 10px; border: 1px solid #dee2e6; background: rgba(255, 255, 255, .94); touch-action: none; cursor: pointer;
}
.tk-plano-mini svg { width: 100%; height: 100%; display: block; }
.tk-plano-mini .tk-mini-fondo { fill: #eef1f7; stroke: none; }
.tk-plano-mini .tk-mini-butacas { fill: #94a3b8; }
.tk-plano-mini .tk-mini-vista { fill: rgba(85, 110, 230, .16); stroke: #556ee6; }


/* ==========================================================================
   BOTONES DE HERRAMIENTA — en TIKO son AZULES (la marca), no verdes.
   `btn-hover-success` es el verde de KIKA (nació para «Exportar») y lo usan las barras
   del ATIC (paginado, Agregar, ojo, custom), los contenedores viejos y el Exportar de las
   grillas. Acá manda la marca. (Norberto, 2026-09-24)
   ========================================================================== */
.btn-hover-success i { color: var(--tk-marca) !important; }
.btn-hover-success:hover,
.btn-hover-success[aria-expanded="true"] {
    color: var(--tk-marca) !important;
    background-color: var(--tk-marca-soft) !important;
    border-color: var(--tk-marca) !important;
}

/* ---------------------------------------------------------------------------
   LA FICHA DEL RECINTO: la ubicación en el mapa y el mapa de sala (2026-09-25)
   --------------------------------------------------------------------------
   Norberto: «que salga la ubicación del mapa, en su card rounded; abajo otra card con el mapa de
   la sala con su ficha» y «el buscador sobre el mapa, como si fuera Google Maps». El mapa es
   Leaflet + OpenStreetMap; el pin es un icono MDI (a la copia local de Leaflet le faltan las
   imágenes de su marcador por defecto).
   ------------------------------------------------------------------------- */
.tk-mapa-ubicacion-marco {
    position: relative;
    height: 100%;
    min-height: 330px;
    padding-bottom: .75rem;
}

.tk-mapa-ubicacion {
    height: 100%;
    min-height: 330px;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color, #eff2f7);
    z-index: 0; /* encierra los z-index propios de Leaflet: no tapan los combos ni los modales */
}

/* El buscador, flotando arriba del mapa (como Google Maps). */
.tk-mapa-buscador {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: 440px;
    z-index: 1000;
}
.tk-mapa-buscador .input-group {
    border-radius: 50rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.tk-mapa-buscador .form-control { border-radius: 50rem 0 0 50rem !important; border-right: 0; padding-left: .9rem; }
.tk-mapa-buscador .btn { border-radius: 0 50rem 50rem 0 !important; padding-left: .85rem; padding-right: .95rem; }

/* Las sugerencias, como Google Maps: un renglón por lugar, lo principal en negrita y al lado dónde queda. */
.tk-resultados-ubicacion {
    position: absolute;
    left: 0;
    right: 38px; /* el ancho del buscador, sin el ícono de ayuda */
    top: calc(100% + 6px);
    max-height: 280px;
    overflow-y: auto;
    padding: .35rem 0;
    background: #fff;
    border-radius: .9rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.tk-sugerencia {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .9rem;
    font-size: .8rem;
    color: #495057;
    cursor: pointer;
    white-space: nowrap;
}
.tk-sugerencia > i { font-size: 1.05rem; color: #74788d; flex: 0 0 auto; }
.tk-sugerencia .txt { overflow: hidden; text-overflow: ellipsis; }
.tk-sugerencia .txt b { color: #2a3042; font-weight: 600; }
.tk-sugerencia .det { color: #74788d; }
.tk-sugerencia:hover, .tk-sugerencia.activa { background: #f3f5fb; }
.tk-sugerencia:hover > i, .tk-sugerencia.activa > i { color: var(--bs-primary, #556ee6); }

/* La ayuda del mapa: el ícono de información de TIKO, en un círculo blanco al costado del buscador. */
.tk-mapa-ayuda {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f1b44c;
    font-size: 18px;
    cursor: help;
}

/* Los botones del mapa: redondos, blancos, con sombra (acercar y alejar juntos en una pastilla). */
.tk-mapa-controles { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 10px 12px 0 !important; }
.tk-mapa-controles .grupo { display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); overflow: hidden; }
.tk-mapa-controles .grupo button { box-shadow: none; border-radius: 0; }
.tk-mapa-controles .grupo button + button { border-top: 1px solid #eef0f4; }
.tk-mapa-controles button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #495057;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}
.tk-mapa-controles button:hover { color: var(--bs-primary, #556ee6); background: #f8f9ff; }
.tk-mapa-controles button.quitar { color: #f46a6a; }

/* La cita de OpenStreetMap (la pide su licencia): chica y discreta, sin link. */
.tk-mapa-ubicacion .leaflet-control-attribution {
    font-size: 9px;
    line-height: 1.4;
    color: #74788d;
    background: rgba(255, 255, 255, .55) !important;
    border-radius: 0 6px 0 0;
    padding: 0 6px;
    margin: 0 !important;
}

.tk-pin-recinto { background: transparent; border: 0; }
.tk-pin-recinto i {
    display: block;
    font-size: 34px;
    line-height: 34px;
    color: #f46a6a;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

/* El plano de la sala, dibujado desde la base. 🛑 Del mismo alto que la ficha de al lado: el dibujo va ENCIMA
   (absoluto) y no empuja la fila; la altura la pone la ficha. */
.tk-plano-recinto {
    position: relative;
    height: 100%;
    min-height: 220px;
    border-radius: 1rem;
    background: #f8f9fa;
    border: 1px solid var(--bs-border-color, #eff2f7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tk-plano-recinto svg { position: absolute; inset: .75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); display: block; }

/* 🛑 El card del mapa de sala no tiene campos (que traen su propio aire abajo): el cuerpo lleva el MISMO aire arriba y
   abajo, y los costados de siempre, así el plano y la ficha quedan alineados con el mapa de la ubicación (Norberto,
   2026-09-25: «acomodá los padding del mapa de sala»). */
.card-rounded > .card-body.tk-cuerpo-mapa-sala { padding: .75rem .5rem; }

/* La ficha informativa del mapa de sala: sin aire propio, pegada a los bordes de su columna como el plano. */
.tk-ficha-mapa { padding: 0; }
.tk-ficha-aforo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(85, 110, 230, .10), rgba(85, 110, 230, .03));
    border: 1px solid rgba(85, 110, 230, .18);
}
.tk-ficha-aforo .t { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #556ee6; font-weight: 600; }
.tk-ficha-aforo .n { font-size: 2rem; font-weight: 700; color: #2a3042; line-height: 1.1; }
.tk-ficha-aforo .d { font-size: .8rem; color: #495057; text-align: right; line-height: 1.7; }
.tk-ficha-aforo .d i { color: #556ee6; }
.tk-ficha-cifras { display: flex; gap: .5rem; margin: .6rem 0 .9rem; }
.tk-ficha-cifras > div {
    flex: 1;
    padding: .45rem .75rem;
    border-radius: .8rem;
    background: #f8f9fa;
    font-size: .8rem;
    color: #495057;
}
.tk-ficha-cifras .n { font-size: 1.05rem; font-weight: 700; color: #2a3042; margin-right: .2rem; }
.tk-ficha-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #74788d; font-weight: 600; margin-bottom: .35rem; }
/* Los clasificadores, en tarjetas como las de salas y puertas: el color del clasificador en el borde, el nombre
   arriba, los lugares grandes y su parte del total. Sin barras («parecía un progress bar»). */
.tk-ficha-clasifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.tk-ficha-clasif {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nom nom" "cant pct";
    align-items: baseline;
    row-gap: .1rem;
    padding: .5rem .75rem .5rem .8rem;
    border-radius: .8rem;
    background: #f8f9fa;
    border-left: 4px solid var(--tk-clasif, #adb5bd);
    min-width: 0;
}
.tk-ficha-clasif .nom { grid-area: nom; font-size: .75rem; color: #495057; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ficha-clasif .cant { grid-area: cant; font-size: 1.05rem; font-weight: 700; color: #2a3042; }
.tk-ficha-clasif .pct { grid-area: pct; font-size: .72rem; color: #74788d; }
.tk-ficha-clasif.vacio { background: #fbfbfc; border-left-color: #dee2e6; }
.tk-ficha-clasif.vacio .nom, .tk-ficha-clasif.vacio .cant, .tk-ficha-clasif.vacio .pct { color: #b5bac1; }

/* «Próximamente»: lo que por ahora es solo menú (HOME/Proximamente). Centrado, con el ícono del ítem en grande. */
.tk-proximamente { max-width: 560px; margin: 0 auto; padding: 3rem 1rem; text-align: center; }
.tk-proximamente-icono {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: var(--bs-primary, #556ee6);
    background: rgba(85, 110, 230, .10);
}

/* ============================================================================
   WIZARD — LA BARRA DE PASOS de `jquery.step.ncg.js` (WizardManager)  (2026-09-25)
   ----------------------------------------------------------------------------
   TIKO no tenía estilos de `.wizard-progress`: los pasos salían como texto suelto y se veían TODOS los
   `.step-content` a la vez. Se PORTAN los de Públicas (WebProducers `assets/css/app.min.css`, bloque
   «Mi Wizard Styles») con la misma geometría. Cambian tres cosas:
     1) los colores, a los de TIKO (marca #556ee6 · éxito #34c38f · error #f46a6a);
     2) todo va ANCLADO a `.wizard-progress` / `.wizard-content`: Públicas deja `.step`, `.circle`, `.line`
        y `.step-content` globales, y son nombres demasiado genéricos para un admin entero;
     3) los estados de los PASOS CLICABLES (opción `pasosClicables: true` del WizardManager);
     4) la GEOMETRÍA del paso (ver `.step` y `.line`): la de Públicas desborda con rótulos largos.
   🛑 Norberto (2026-09-25): «los steps que ya navegué, arriba, deben ser como botones que al darles clic me
      llevan a ese step; si nunca entré, no está activo».
   ========================================================================== */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* permite que baje en móviles */
    gap: 10px;
}

    /* 🛑 EL PASO MIDE LO QUE SU CONTENIDO; LA LÍNEA SE LLEVA EL RESTO. Públicas le da `flex: 1` a pasos y
       líneas por igual (se reparten el ancho en partes iguales) y un rótulo largo se sale de su paso y queda
       debajo de la línea. Medido en el banco con los 4 pasos del evento: «Difusión y publicación» no entraba
       ni en 1200px. Acá el paso toma su ancho natural y, si no alcanza, el rótulo baja de renglón. */
    .wizard-progress .step {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 1 auto;
        min-width: 0;
        z-index: 10;
    }

    .wizard-progress .circle {
        position: relative; /* ancla el tilde / la cruz de los pasos clicables */
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 2px solid var(--tk-borde-control);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #74788d;
        background: #fff;
        font-weight: bold;
        flex-shrink: 0;
        transition: box-shadow .15s ease;
    }

        .wizard-progress .circle.active {
            border-color: var(--tk-marca);
            color: var(--tk-marca);
        }

    .wizard-progress .label-box {
        padding: 6px 12px;
        border-left: 4px solid var(--tk-borde-control);
        border-radius: 6px;
        background: #f8f9fa;
        color: #495057;
        font-size: 14px;
        white-space: normal; /* Públicas: nowrap — acá, si no entra, baja de renglón en vez de desbordar */
        line-height: 1.25;
        flex-grow: 1;
        min-width: 0;
    }

        .wizard-progress .label-box.active {
            border-left-color: var(--tk-marca);
            background: var(--tk-marca-soft);
            color: var(--tk-marca);
            font-weight: bold;
        }

    .wizard-progress .line {
        flex: 1 1 16px;
        min-width: 16px;
        height: 2px;
        background: var(--tk-borde-control);
        margin: 0 5px;
    }

/* Solo se ve el contenido del paso activo. */
.wizard-content .step-content {
    display: none;
}

    .wizard-content .step-content.active {
        display: block;
    }

/* 🛑 EN EL CELULAR, EL PASO ACTUAL EN EL MEDIO (Norberto, 2026-09-30: «que se vea el step principal en el medio, a la izquierda
   el número del anterior y a la derecha el del siguiente; no uno debajo del otro»). Antes los pasos se apilaban y ocupaban
   media pantalla. Ahora es una fila de cinco columnas: [anterior] — [ACTUAL con su nombre] — [siguiente]. El actual va
   SIEMPRE en la columna del medio (también en el primero y el último, donde falta un costado); los de los costados muestran
   solo el número y siguen siendo botones (visitado) o apagados (bloqueado), como en la barra grande. El actual lo marca el
   WizardManager con `.circle.active` en todo wizard (con o sin pasos clicables), así que vale para todos. */
@media (max-width: 768px) {
    /* Los costados, nunca más angostos que su círculo (con un nombre largo en el medio, el círculo se salía de la ficha). */
    .wizard-progress {
        display: grid;
        grid-template-columns: minmax(30px, 1fr) 16px minmax(0, auto) 16px minmax(30px, 1fr);
        align-items: center;
        column-gap: 6px;
        row-gap: 0;
    }

        .wizard-progress .circle {
            width: 30px;
            height: 30px;
        }

        .wizard-progress > .step,
        .wizard-progress > .line {
            display: none;
            grid-row: 1;
        }

        .wizard-progress > .line {
            flex: none;
            min-width: 0;
            width: 100%;
            margin: 0;
        }

        /* El actual: número y nombre, en el medio. */
        .wizard-progress > .step:has(> .circle.active) {
            display: flex;
            grid-column: 3;
            min-width: 0;
        }

            /* Si el nombre no entra, baja de renglón (no se corta ni empuja a los costados). */
            .wizard-progress > .step:has(> .circle.active) > .label-box {
                white-space: normal;
                font-size: 13px;
                padding: 4px 10px;
                line-height: 1.15;
            }

        /* El anterior y su línea, a la izquierda. */
        .wizard-progress > .step:has(+ .line + .step > .circle.active) {
            display: flex;
            grid-column: 1;
            justify-self: end;
        }

        .wizard-progress > .line:has(+ .step > .circle.active) {
            display: block;
            grid-column: 2;
        }

        /* El siguiente y su línea, a la derecha. */
        .wizard-progress > .step:has(> .circle.active) + .line {
            display: block;
            grid-column: 4;
        }

        .wizard-progress > .step:has(> .circle.active) + .line + .step {
            display: flex;
            grid-column: 5;
            justify-self: start;
        }

        /* Los de los costados, solo el número. */
        .wizard-progress > .step:not(:has(> .circle.active)) > .label-box {
            display: none;
        }
}

/* --- PASOS CLICABLES: los estados de la barra (las clases las pone el WizardManager) -----------------
   · actual    → el paso que se está viendo: el círculo LLENO con la marca.
   · visitado  → ya se entró: es un BOTÓN (mano, hover) y lleva el tilde verde.
   · bloqueado → nunca se entró: apagado; no se puede saltar hacia adelante.
   · con-error → no pasó su validación (o lo rechazó el servidor): rojo con una cruz, hasta que valide.
   🛑 Los `!important` de color son a propósito: el WizardManager de siempre (el de KIKA y Públicas) deja
      `text-success` y `text-danger` de Bootstrap en el círculo y el rótulo, que vienen con !important y
      mezclarían los colores. Con los pasos clicables manda el ESTADO del paso.
   🛑 El ORDEN de las reglas importa: el error va después del visitado para ganarle con el mismo peso. */
.wizard-progress .step.visitado {
    cursor: pointer;
    user-select: none;
}

    .wizard-progress .step.visitado:focus-visible {
        outline: none; /* el foco con Tab lo muestra el halo del círculo */
    }

    .wizard-progress .step.visitado:not(.actual) .circle {
        border-color: #34c38f;
        color: #34c38f !important;
    }

    .wizard-progress .step.visitado:not(.actual) .label-box {
        border-left-color: #34c38f;
        color: #495057 !important;
    }

    /* Hover y foco: se nota que es un botón. */
    .wizard-progress .step.visitado:not(.actual):hover .circle,
    .wizard-progress .step.visitado:not(.actual):focus-visible .circle {
        background: rgba(52, 195, 143, .12);
        box-shadow: 0 0 0 .2rem rgba(52, 195, 143, .18);
    }

    .wizard-progress .step.visitado:not(.actual):hover .label-box,
    .wizard-progress .step.visitado:not(.actual):focus-visible .label-box {
        background: rgba(52, 195, 143, .12);
        color: #2a3042 !important;
    }

    /* La línea entre dos pasos visitados, verde: se lee el camino ya recorrido. */
    .wizard-progress .step.visitado + .line:has(+ .step.visitado) {
        background: rgba(52, 195, 143, .55);
    }

    /* El tilde del visitado (y la cruz del que tiene error), en una pastilla sobre el borde del círculo. */
    .wizard-progress .step.visitado:not(.actual) .circle::after,
    .wizard-progress .step.con-error .circle::after {
        content: "\2713";
        position: absolute;
        right: -5px;
        bottom: -5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid #fff;
        background: #34c38f;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        line-height: 12px;
        text-align: center;
    }

/* El paso que se está viendo. */
.wizard-progress .step.actual .circle {
    background: var(--tk-marca);
    border-color: var(--tk-marca);
    color: #fff !important;
    box-shadow: 0 0 0 .2rem var(--tk-marca-soft);
}

.wizard-progress .step.actual .label-box {
    border-left-color: var(--tk-marca);
    background: var(--tk-marca-soft);
    color: var(--tk-marca) !important;
}

/* Nunca se entró: no se puede saltar hacia adelante. */
.wizard-progress .step.bloqueado {
    cursor: not-allowed;
    opacity: .45;
}

/* Con error (después del visitado, para ganarle con el mismo peso). */
.wizard-progress .step.visitado.con-error:not(.actual) .circle {
    border-color: #f46a6a;
    color: #f46a6a !important;
}

.wizard-progress .step.visitado.con-error:not(.actual) .label-box {
    border-left-color: #f46a6a;
    background: rgba(244, 106, 106, .10);
    color: #f46a6a !important;
}

.wizard-progress .step.visitado.con-error:not(.actual):hover .circle,
.wizard-progress .step.visitado.con-error:not(.actual):focus-visible .circle {
    background: rgba(244, 106, 106, .12);
    box-shadow: 0 0 0 .2rem rgba(244, 106, 106, .18);
}

.wizard-progress .step.visitado.con-error:not(.actual):hover .label-box,
.wizard-progress .step.visitado.con-error:not(.actual):focus-visible .label-box {
    background: rgba(244, 106, 106, .16);
    color: #f46a6a !important;
}

.wizard-progress .step.actual.con-error .circle {
    background: #f46a6a;
    border-color: #f46a6a;
    box-shadow: 0 0 0 .2rem rgba(244, 106, 106, .18);
}

.wizard-progress .step.actual.con-error .label-box {
    border-left-color: #f46a6a;
    background: rgba(244, 106, 106, .10);
    color: #f46a6a !important;
}

.wizard-progress .step.visitado.con-error .circle::after {
    content: "\2715";
    background: #f46a6a;
}

/* ══════════════════════════════════════════════════════════════════════════════
   🛑 LA OCUPACIÓN v1 (/VTA/Ocupacion, plan de la compra etapa 2): SOLO el plano butaca por butaca y su leyenda (lo que no
   tiene molde; los números y los cupos usan las piezas estándar desde el 29-09). Colores fijos (verde libre, amarilla
   reservada, roja vendida, violeta cortesía, gris bloqueada): son los que se nombran en la ayuda y en la prueba («la
   butaca amarilla», «vuelve a verde»). Con !important: el plano pinta cada butaca con el color de su clasificador y acá
   manda el estado.
   ══════════════════════════════════════════════════════════════════════════════ */
#tk-ocup-plano .tk-plano .butaca.tk-b-libre { fill: #22c55e !important; }
#tk-ocup-plano .tk-plano .butaca.tk-b-reservada { fill: #f59e0b !important; }
#tk-ocup-plano .tk-plano .butaca.tk-b-vendida { fill: #dc2626 !important; }
#tk-ocup-plano .tk-plano .butaca.tk-b-cortesia { fill: #8b5cf6 !important; }
#tk-ocup-plano .tk-plano .butaca.tk-b-bloqueada { fill: #4b5563 !important; }
.tk-ocup-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.tk-ocup-punto.tk-b-libre { background: #22c55e; }
.tk-ocup-punto.tk-b-reservada { background: #f59e0b; }
.tk-ocup-punto.tk-b-vendida { background: #dc2626; }
.tk-ocup-punto.tk-b-cortesia { background: #8b5cf6; }
.tk-ocup-punto.tk-b-bloqueada { background: #4b5563; }

/* 🛑 LEGIBILIDAD DE LAS PÍLDORAS VERDES (Norberto, 29-09: «el badge verde claro con el texto verde es difícil de leer»).
   Toda píldora con fondo verde claro lleva la letra en el verde OSCURO de su familia (Bootstrap: --bs-success-text-emphasis),
   igual que las amarillas ya usan text-warning-emphasis. Vale para los estados de ventas, eventos, «ACTIVA», etc. */
.badge.bg-success-subtle.text-success { color: var(--bs-success-text-emphasis) !important; }

.tk-medio-isotipo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: text-bottom;
}

/* 🛑 (07-10) El recuadro chico de la imagen en las grillas (MiniaturaGrillaHtml): la miniatura o las iniciales. */
.tk-miniatura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg, #f1f3f9);
    border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
    vertical-align: middle;
}

.tk-miniatura img {
    width: 100%;
    height: 100%;
    display: block;
}

.tk-miniatura-vacia {
    color: var(--bs-secondary-color, #6b7280);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .02em;
}

/* 🛑 (07-10) LOS PÍXELES (parcial _PixelesMarketing): la grilla de cards de la misma altura (la del paso Difusión del evento,
   para la solapa Difusión de la productora) y la card APAGADA, que guarda sus datos pero no se carga en la web. */
.tk-cards-iguales { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-bottom: .5rem; }
.tk-cards-iguales > .card { margin-top: 0; margin-bottom: 0; min-width: 0; }
@media (min-width: 768px) {
    .tk-cards-iguales { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
    .tk-cards-iguales > .card { height: 100%; }
}
@media (min-width: 1200px) {
    .tk-cards-iguales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tk-pixel.tk-pixel-apagado > .collapse > .card-body { opacity: .55; }
.tk-pixel.tk-pixel-apagado .tk-card-titulo > i.mdi { color: var(--bs-secondary-color, #74788d) !important; }

.tk-qr-acceso { display: block; background: #fff; border-radius: 12px; padding: 8px; line-height: 0; }
.tk-qr-acceso svg, .tk-qr-acceso img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

/* ===== MENÚS COMO KIKA (Norberto, 13-10-2026) =====
   1) KIKA anula el `overflow: hidden` que la plantilla le pone a `.main-content` (lo deja comentado en su app.min.css):
      con él, todo menú que pasa el borde de la página queda recortado y no se puede alcanzar.
   2) Todo menú desplegable (toolbars de búsqueda, Opciones, menús del drawtable, header) lleva sombra y, si no entra en la
      pantalla, scroll propio. El calendario del datepicker también es `.dropdown-menu`: queda afuera.
   3) Todos los menús se posicionan FIJOS respecto de la pantalla (popperConfig strategy fixed en el layout): ningún
      contenedor (la tabla, la card, la página) los recorta y siempre quedan por encima. */
.main-content { overflow: visible !important; }

.dropdown-menu.dropdown-menu:not(.datepicker) {
    box-shadow: 0 8px 24px rgba(18, 38, 63, .18) !important;
    border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08)) !important;
}

.dropdown-menu.dropdown-menu.show:not(.datepicker) {
    z-index: 1065 !important;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* La plantilla (Skote) le pone a todo menú abierto `top: 100%` y la animación DropDownSlide, que mueve el menú con
   `transform` y le pisa la posición que calcula Bootstrap (Popper). En los menús que ubica Popper (los que tienen
   data-popper-placement) se anulan las dos y aparecen con un fundido. */
@keyframes TikoMenuAparece { from { opacity: 0; } to { opacity: 1; } }

.dropdown-menu.dropdown-menu.show[data-popper-placement] {
    top: 0 !important;
    animation: TikoMenuAparece .15s ease-out !important;
}

/* Los menús del costado (selector de empresa/productora y «Administrar…» del pie) no flotan sobre la pantalla: se abren dentro del
   costado, con su ancho (data-bs-display="static"); los del pie, hacia ARRIBA. */
.tk-sidebar-pie > .dropdown-menu.show {
    top: auto !important;
    bottom: 100% !important;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    animation: TikoMenuAparece .15s ease-out !important;
}

/* Tooltip con scroll (14-10): el mouse puede pasar al tooltip y scrollear; se cierra al salir de él (parche de _leave en el layout). */
.tooltip.show { pointer-events: auto; }

/* ---------------------------------------------------------------------------
   FILTRO POR COLUMNA DEL DRAWTABLE (los inputs debajo de cada título): cada input ocupa EXACTAMENTE el ancho de su columna
   (dentro del padding), con el redondeado completo a los dos lados. Con `width:100%` el input medía lo que dice el `width` de la
   columna (no su contenido), se pasaba 12 px sobre la columna de al lado y el `overflow:hidden` de la celda le cortaba la punta.
   `fill-available` lo estira al espacio real de la celda. Las columnas con ancho fijo (celda con `max-width`) conservan el piso que
   siempre les dio el input (no se achican al achicar la ventana); las que se miden por su contenido (el estado con hitos)
   no tienen piso y quedan del ancho de lo que llevan.
   ------------------------------------------------------------------------- */
table.ncgdrawtable thead tr.ncgd-columnFilter > th input.ncgd-input-filter,
table.ncgdrawtable thead tr.ncgd-columnFilter > th select.ncgd-input-filter {
    display: block;
    box-sizing: border-box;
    width: 0 !important;
    min-width: -webkit-fill-available;
    min-width: stretch;
    max-width: 100%;
}

table.ncgdrawtable thead tr.ncgd-columnFilter > th[style*="max-width"] input.ncgd-input-filter,
table.ncgdrawtable thead tr.ncgd-columnFilter > th[style*="max-width"] select.ncgd-input-filter {
    width: -webkit-fill-available !important;
    width: stretch !important;
}

/* ---------------------------------------------------------------------------
   CELDA DE ESTADO CON HITOS (Eventos, Dispositivos, Ingresos): arriba la fila de círculos (un hito cada uno) y abajo la
   píldora con el estado de hoy.
   · La columna (`tk-col-estado-hitos`) mide lo que miden TODOS los círculos: no se fija en píxeles, así entran 5, 6 o 7
     hitos sin pasarse a la columna de al lado.
   · La píldora de abajo ocupa EXACTAMENTE el ancho de la fila de círculos (width:0 + min-width:100% hace que su texto no
     ensanche la celda); el texto que no entra se corta con «…» y el título la explica completa.
   ------------------------------------------------------------------------- */
.tk-col-estado-hitos {
    width: 1%;
    white-space: nowrap;
}

.tk-estado-hitos {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    vertical-align: middle;
}

.tk-estado-hitos-fila {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.tk-estado-hitos-fila > .badge:last-child {
    margin-right: 0 !important;
}

.badge.tk-estado-hitos-pildora,
table.ncgdrawtable .badge.tk-estado-hitos-pildora {
    display: block;
    width: 0;
    min-width: 100%;
    margin-top: .25rem;
    padding: 1px 4px;
    font-size: .6rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.tk-subida {
    border: 2px dashed var(--bs-border-color, #ced4da);
    border-radius: 16px;
    background: var(--bs-body-bg, #fff);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.tk-subida:hover,
.tk-subida.tk-subida-arrastre {
    border-color: var(--tk-marca);
    background: rgba(85, 110, 230, .05);
}

.tk-subida:focus-visible {
    outline: 2px solid var(--tk-marca);
    outline-offset: 2px;
}

.tk-subida-icono {
    font-size: 2.2rem;
    line-height: 1;
    color: var(--tk-marca);
}

.tk-subida-previa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tk-subida-previa img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.tk-subida-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.modal-header.tk-card-cabeza {
    min-height: 42px;
    padding: .5rem .5rem .25rem .75rem;
    border-bottom: 1px solid var(--tk-card-linea);
}

    .modal-header.tk-card-cabeza .modal-title {
        margin: 0;
        font-size: .95rem;
        line-height: 1.2;
    }

    .modal-header.tk-card-cabeza small {
        display: block;
        font-size: .75rem;
        line-height: 1.2;
    }