/* ============================================================
   Skeuomorphism suave (soft-UI) — sistema de diseño del proyecto
   ------------------------------------------------------------
   Cargado globalmente desde head.php: las reglas solo aplican a
   clases de Bootstrap/TomSelect que ya existen, así que no afecta
   páginas que no las usen. El piloto fue servidor_edit.php.
   ------------------------------------------------------------
   Filosofía: en vez de texturas realistas (cuero, madera, papel),
   las superficies "planas" del fondo se ven talladas hacia afuera
   (elevadas: tarjetas, botones en reposo) o hacia adentro
   (grabadas: inputs, selects, pista de los switches) mediante
   pares de sombras suaves — una clara (como si la luz viniera de
   arriba-izquierda) y una oscura (arriba-derecha/abajo), imitando
   cómo la luz incide sobre relieve físico real pero de forma sutil
   y legible, sin perder el contraste de texto del tema base.
   ============================================================ */

:root {
    --sk-surface: #eef1f6;
    --sk-shadow-light: rgba(255, 255, 255, 0.8);
    --sk-shadow-dark: rgba(163, 177, 198, 0.5);
    --sk-shadow-dark-strong: rgba(148, 163, 184, 0.55);
    --sk-primary-from: #7477ff;
    --sk-primary-to: #5f62e8;
    --sk-radius-lg: 18px;
    --sk-radius-md: 12px;
    --sk-radius-pill: 999px;
}

body {
    background-color: var(--sk-surface) !important;
}

/* ---------- Tarjetas: superficie elevada ---------- */
.card {
    background: linear-gradient(145deg, #f7f9fc, #e9edf3) !important;
    border: none !important;
    border-radius: var(--sk-radius-lg) !important;
    box-shadow:
        8px 8px 16px var(--sk-shadow-dark),
        -8px -8px 16px var(--sk-shadow-light) !important;
}

/* ---------- Botones: parecen presionables ---------- */
.btn {
    border: none;
    border-radius: var(--sk-radius-md);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.btn-primary {
    background: linear-gradient(145deg, var(--sk-primary-from), var(--sk-primary-to));
    box-shadow:
        5px 5px 10px var(--sk-shadow-dark),
        -5px -5px 10px var(--sk-shadow-light),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(145deg, #7d80ff, #6669f0);
    color: #fff;
}

.btn-primary:active {
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.25),
        inset -2px -2px 4px rgba(255, 255, 255, 0.15);
    transform: translateY(1px);
}

.btn-secondary,
.btn-label-secondary {
    background: linear-gradient(145deg, #f7f9fc, #e4e8ee);
    color: #566a7f;
    box-shadow:
        4px 4px 8px var(--sk-shadow-dark),
        -4px -4px 8px var(--sk-shadow-light);
}

.btn-secondary:hover,
.btn-label-secondary:hover {
    color: #566a7f;
}

.btn-secondary:active,
.btn-label-secondary:active {
    box-shadow:
        inset 3px 3px 6px var(--sk-shadow-dark-strong),
        inset -2px -2px 4px var(--sk-shadow-light);
    transform: translateY(1px);
}

.btn-outline-info,
.btn-outline-primary,
.btn-outline-secondary,
.btn-danger,
.btn-icon {
    box-shadow:
        3px 3px 6px var(--sk-shadow-dark),
        -3px -3px 6px var(--sk-shadow-light);
}

.btn-outline-info:active,
.btn-outline-primary:active,
.btn-outline-secondary:active,
.btn-danger:active {
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark-strong),
        inset -2px -2px 4px var(--sk-shadow-light);
}

/* ---------- Inputs y selects: grabados hacia adentro ---------- */
.form-control,
.form-select {
    background-color: var(--sk-surface) !important;
    border: none !important;
    border-radius: var(--sk-radius-md) !important;
    box-shadow:
        inset 3px 3px 6px var(--sk-shadow-dark),
        inset -3px -3px 6px var(--sk-shadow-light) !important;
    transition: box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark),
        inset -2px -2px 5px var(--sk-shadow-light),
        0 0 0 3px rgba(105, 108, 255, 0.18) !important;
}

/* El estado inválido se distingue por el tono de la sombra grabada en vez
   de un borde, para no romper la superficie lisa. */
.form-control.is-invalid,
.form-select.is-invalid {
    box-shadow:
        inset 3px 3px 6px rgba(255, 62, 29, 0.3),
        inset -3px -3px 6px var(--sk-shadow-light) !important;
}

/* ---------- Switches: pista grabada + perilla en relieve ---------- */
.form-switch .form-check-input {
    width: 2.75em;
    height: 1.5em;
    background-color: var(--sk-surface);
    border: none;
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark),
        inset -2px -2px 5px var(--sk-shadow-light);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.6' fill='%23ffffff' style='filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-color: var(--sk-primary-to);
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.25),
        inset -1px -1px 3px rgba(255, 255, 255, 0.2);
}

.form-check-input:focus {
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark),
        inset -2px -2px 5px var(--sk-shadow-light),
        0 0 0 3px rgba(105, 108, 255, 0.18);
}

/* ---------- Stepper: pestañas laterales ---------- */
.stepper-nav .nav-link {
    background: var(--sk-surface);
    box-shadow:
        3px 3px 6px var(--sk-shadow-dark),
        -3px -3px 6px var(--sk-shadow-light);
    border: none;
}

.stepper-nav .nav-link.active {
    background: linear-gradient(145deg, var(--sk-primary-from), var(--sk-primary-to)) !important;
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.25),
        inset -1px -1px 3px rgba(255, 255, 255, 0.15) !important;
}

/* ---------- Barra de progreso ---------- */
.progress {
    background: var(--sk-surface);
    box-shadow:
        inset 2px 2px 4px var(--sk-shadow-dark),
        inset -2px -2px 4px var(--sk-shadow-light);
    border-radius: var(--sk-radius-pill);
}

.progress-bar {
    border-radius: var(--sk-radius-pill);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ---------- Badges de estado de cada pestaña ---------- */
.badge-status i {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

/* ---------- Modales ---------- */
.modal-content {
    border: none !important;
    border-radius: var(--sk-radius-lg) !important;
    box-shadow:
        10px 10px 24px rgba(100, 110, 130, 0.35),
        -6px -6px 18px var(--sk-shadow-light) !important;
}

/* ---------- Combobox con búsqueda propio (js/skeuo-select.js) ---------- */
.sk-select {
    position: relative;
}

.sk-select-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    background-color: var(--sk-surface);
    border-radius: var(--sk-radius-md);
    box-shadow:
        inset 3px 3px 6px var(--sk-shadow-dark),
        inset -3px -3px 6px var(--sk-shadow-light);
    transition: box-shadow 0.15s ease;
}

.sk-select.open .sk-select-control,
.sk-select-control:focus {
    outline: none;
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark),
        inset -2px -2px 5px var(--sk-shadow-light),
        0 0 0 3px rgba(105, 108, 255, 0.18);
}

.sk-select.disabled .sk-select-control {
    cursor: not-allowed;
    opacity: 0.6;
}

/* A diferencia de .disabled, el <select> sigue enviando su valor con el
   formulario (ver comentario de soloLectura en skeuo-select.js); solo se
   bloquea la interacción visualmente. */
.sk-select.readonly .sk-select-control {
    cursor: not-allowed;
    opacity: 0.75;
}

/* validarCamposRequeridos() en guardar_tabs.js marca .is-invalid sobre
   `select.tomselect.wrapper`, que en SkeuoSelect es este mismo .sk-select. */
.sk-select.is-invalid .sk-select-control,
/* Algunos formularios (ej. orden_add.js) marcan .is-invalid directamente
   sobre el <select> oculto en vez de sobre el wrapper — .sk-select siempre
   se inserta justo después de él, así que el selector de hermano lo cubre. */
.sk-select-source.is-invalid + .sk-select .sk-select-control {
    box-shadow:
        inset 3px 3px 6px rgba(255, 62, 29, 0.3),
        inset -3px -3px 6px var(--sk-shadow-light);
}

.sk-select-value {
    flex: 1;
    min-width: 0;
}

.sk-select-placeholder {
    color: #8592a3;
}

.sk-select-caret {
    flex-shrink: 0;
    color: #6c7784;
    transition: transform 0.15s ease;
}

.sk-select.open .sk-select-caret {
    transform: rotate(180deg);
}

/* Panel desplegable: se ve "elevado" sobre el formulario, como una tarjeta
   flotando encima (a diferencia del control cerrado, que se ve "grabado"). */
.sk-select-dropdown {
    /* position:fixed (no absolute) a propósito: los selects dentro de
       tablas con scroll propio (ítems, personal técnico, equipo...) tenían
       el desplegable recortado/empujado por el overflow del contenedor.
       fixed lo saca de ese contexto — la posición real (top/left/width) la
       calcula JS en _abrir()/_posicionarDropdown() según dónde esté el
       control en la pantalla. */
    position: fixed;
    z-index: 1060;
    background: linear-gradient(145deg, #f7f9fc, #eef1f6);
    border-radius: var(--sk-radius-md);
    box-shadow:
        6px 6px 16px rgba(100, 110, 130, 0.3),
        -4px -4px 12px var(--sk-shadow-light);
    overflow: hidden;
    padding-bottom: 6px;
}

.sk-select-search-wrap {
    padding: 6px;
}

.sk-select-search {
    width: 100%;
    border: none;
    background-color: var(--sk-surface);
    border-radius: var(--sk-radius-md);
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark),
        inset -2px -2px 5px var(--sk-shadow-light);
    padding: 6px 10px;
    font-size: 0.9rem;
}

.sk-select-search:focus {
    outline: none;
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark),
        inset -2px -2px 5px var(--sk-shadow-light),
        0 0 0 3px rgba(105, 108, 255, 0.18);
}

.sk-select-options {
    max-height: 240px;
    overflow-y: auto;
    padding: 0 6px;
}

.sk-select-option {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #444b54;
}

.sk-select-option:hover,
.sk-select-option.is-active {
    background-color: rgba(105, 108, 255, 0.14);
    color: #4b4ec9;
}

.sk-select-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sk-select-empty {
    padding: 12px 10px;
    color: #8592a3;
    font-size: 0.85rem;
    text-align: center;
}

/* ---------- Multi-select con casillas (js/skeuo-multiselect.js) ----------
   Reutiliza .sk-select/.sk-select-control/.sk-select-dropdown/etc. de
   arriba; esto solo agrega la fila de casilla+texto y los accesos rápidos
   "Seleccionar todos"/"Limpiar". */
.sk-ms-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk-ms-checkbox {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--sk-primary-to);
}

.sk-ms-option-text {
    flex: 1;
    min-width: 0;
}

.sk-ms-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 10px 6px;
    font-size: 0.75rem;
}

.sk-ms-action {
    border: none;
    background: none;
    color: #4b4ec9;
    cursor: pointer;
    padding: 2px 4px;
    font-weight: 500;
}

.sk-ms-action:hover {
    text-decoration: underline;
}

/* ============================================================
   Etiquetas flotantes (js/skeuo-floating-label.js)
   ------------------------------------------------------------
   El JS reestructura cada  <label class="form-label"> + campo  en el
   patrón nativo .form-floating de Bootstrap (ya cargado por el tema),
   así que aplica a TODOS los formularios del proyecto sin tocar cada
   vista. En inputs/textarea la etiqueta arranca como placeholder y sube
   al enfocar/llenar; en selects (y date/time, que siempre muestran algo)
   va siempre arriba.
   ============================================================ */
.skeuo-floating {
    position: relative;
    margin-bottom: 0.85rem;
}

@media (max-width: 767.98px) {
    .skeuo-floating { margin-bottom: 1rem; }
}

/* Alto uniforme del control (override del .form-floating de Bootstrap, que
   fija 3.5rem). */
.skeuo-floating > .form-control,
.skeuo-floating > .form-select {
    height: calc(2.7rem + 2px);
    min-height: calc(2.7rem + 2px);
    padding: 0.45rem 0.7rem;
    line-height: 1.3;
}

/* Etiqueta en reposo: como un placeholder, centrada verticalmente. */
.skeuo-floating > label {
    position: absolute;
    top: 50%;
    left: 0.7rem;
    z-index: 2;
    height: auto;
    max-width: calc(100% - 1.4rem);
    padding: 0;
    margin: 0;
    border: none;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #8592a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 1;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: transform 0.14s ease, color 0.14s ease, top 0.14s ease;
}

.skeuo-floating > label i { font-size: 0.85em; }

/* Etiqueta flotada: sube y queda MONTADA A LA MITAD del borde superior del
   campo (mitad dentro, mitad sobre el borde), con un respaldo del color de la
   superficie para que se lea como una muesca. Se activa al enfocar o cuando el
   campo ya tiene dato (.has-value lo pone js/skeuo-floating-label.js); en
   inputs/textarea también vale el :not(:placeholder-shown) nativo. */
.skeuo-floating:focus-within > label,
.skeuo-floating.has-value > label,
.skeuo-floating > .form-control:focus ~ label,
.skeuo-floating > .form-control:not(:placeholder-shown) ~ label {
    top: 0;
    left: 0.6rem;
    max-width: calc(100% - 1rem);
    padding: 0 0.3rem;
    font-weight: 600;
    color: #6b7686;
    background: linear-gradient(180deg, #f8fafc 40%, #eef1f6);
    border-radius: 5px;
    transform: translateY(-50%) scale(0.84);
}

/* Color de acento en la etiqueta al enfocar */
.skeuo-floating:focus-within > label {
    color: var(--sk-primary-to, #5f62e8);
}

/* Combobox propio (SkeuoSelect / SkeuoMultiSelect): a todo el ancho, con el
   texto interior centrado verticalmente. */
.skeuo-floating.is-select > .sk-select {
    display: block;
}

.skeuo-floating.is-select > .sk-select > .sk-select-control {
    min-height: calc(2.7rem + 2px);
}

/* Bootstrap (theme-default.css) obliga a flotar la etiqueta de TODO .form-select
   siempre. Aquí, si el select está vacío y sin foco, se devuelve la etiqueta a
   reposo (centrada) para que actúe como placeholder — el mismo criterio que el
   resto de campos. */
.skeuo-floating.is-select:not(.has-value):not(:focus-within) > label,
.skeuo-floating.is-select:not(.has-value):not(:focus-within) > .form-select ~ label,
.skeuo-floating.is-select:not(.has-value):not(:focus-within) > .sk-select ~ label {
    top: 50%;
    left: 0.7rem;
    padding: 0;
    background: none;
    font-weight: 500;
    color: #8592a3;
    transform: translateY(-50%);
}

/* Select vacío y sin foco: la etiqueta centrada hace de placeholder, así que
   se oculta el "Seleccionar" propio del widget para no duplicar el texto. */
.skeuo-floating.is-select:not(.has-value):not(:focus-within) .sk-select-placeholder {
    color: transparent;
}

/* Textarea */
.skeuo-floating > textarea.form-control {
    height: auto;
    min-height: 4.5rem;
    padding-top: 0.45rem;
}

.skeuo-floating > textarea.form-control:focus,
.skeuo-floating > textarea.form-control:not(:placeholder-shown) {
    padding-top: 1.1rem;
}

/* Si la validación (guardar_tabs.js) inyecta el mensaje dentro del
   contenedor flotante, que quede en flujo normal, no absoluto. */
.skeuo-floating > .invalid-feedback {
    position: static;
}

/* ============================================================
   Reemplazo visual de Sneat: navbar, menú lateral, layout, footer
   ------------------------------------------------------------
   No se toca ninguna clase que el JS de Sneat controle (menu.js
   alterna .active/.open/.menu-item-animating; bootstrap.bundle.min.js
   alterna .show/.fade en modales, dropdowns, tooltips) — todo lo de
   aquí abajo es solo apariencia sobre esas mismas clases, así que el
   comportamiento (colapsar, resaltar activo, versión móvil, modales,
   dropdowns) sigue funcionando exactamente igual.
   ============================================================ */

:root {
    --sk-sidebar-bg: #f4f6fb;
    --sk-navbar-bg: #ffffff;
}

body {
    color: #3d4552;
}

/* ---------- Layout general ---------- */
.layout-wrapper,
.layout-page,
.content-wrapper {
    background: var(--sk-surface) !important;
}

/* ---------- Menú lateral (aside.php) ---------- */
.layout-menu,
.menu-vertical.menu-bg,
.bg-menu-theme {
    background: var(--sk-sidebar-bg) !important;
    border: none !important;
    box-shadow:
        6px 0 20px rgba(100, 110, 130, 0.12),
        inset -1px 0 0 rgba(255, 255, 255, 0.6) !important;
}

.layout-menu .app-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 0.85rem 0.75rem;
    margin: 0;
}

.layout-menu .app-brand-link {
    display: flex;
    align-items: center;
    min-width: 0;
}

.layout-menu .app-brand-link img,
.layout-menu .sk-brand-logo {
    height: 48px;
    width: auto;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

.layout-menu .menu-inner {
    padding: 0.4rem 0.6rem;
}

/* Ítems del menú: alineación e interlínea uniformes (icono + texto), sin el
   "escalón" que dejaba el layout heredado de Sneat sobre el .badge. */
.menu-vertical .menu-inner > .menu-item {
    margin: 1px 0;
}

/* Sneat fija cada item/encabezado en 16.25rem (260px) sin importar el ancho
   real del aside. Con el padding lateral del .menu-inner eso deja los items ~10px
   más anchos que el aside, y el overflow:hidden del contenedor los recorta por
   la derecha (se veían "cortados"). Se ajustan al ancho disponible. El estado
   contraído (html.sk-menu-collapsed) lo vuelve a fijar en 78px más abajo con
   mayor prioridad, así que no se ve afectado. */
.menu-vertical .menu-inner > .menu-item,
.menu-vertical .menu-inner > .menu-header {
    width: 100%;
}

.menu-vertical .menu-link,
.menu-vertical .menu-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.8rem !important;
    min-height: 2.4rem;
    font-size: 0.9rem;
    line-height: 1.25;
}

/* Sneat le pone `margin: 0 1rem` a cada .menu-link con una regla más específica
   ({item} .menu-link), y sumado al width:100% eso hace que el enlace sobresalga
   ~1rem por lado del aside y se recorte. El diseño propio usa enlaces a todo el
   ancho con su propio padding, así que se anula ese margen horizontal. */
.menu-vertical .menu-inner > .menu-item .menu-link,
.menu-vertical .menu-inner > .menu-item .menu-toggle,
.menu-vertical .menu-sub .menu-link {
    margin-left: 0;
    margin-right: 0;
}

.menu-vertical .menu-icon {
    flex-shrink: 0;
    width: 1.35rem;
    margin-right: 0.7rem !important;
    font-size: 1.15rem;
    text-align: center;
}

.menu-vertical .menu-link > div,
.menu-vertical .menu-toggle > div {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Submenú: una sola sangría fija (el icono del padre marca el nivel). */
.menu-vertical .menu-sub .menu-link {
    padding-left: 2.1rem !important;
    padding-right: 0.6rem !important;
    align-items: flex-start;
}

/* Los nombres de catálogo son largos ("REGISTRO EVENTO ESTRUCTURA SERVIDOR").
   En el submenú se dejan envolver a dos líneas en vez de cortarlos con "..."
   (Sneat les pone white-space:nowrap + text-overflow:ellipsis). */
.menu-vertical .menu-sub .menu-link > div {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
}

/* Botón propio para contraer/expandir el menú en escritorio (js/sidebar.js).
   No usa la clase layout-menu-collapsed de Sneat porque esa clase queda
   deshabilitada por el propio CSS de Sneat cuando el layout es "fixed"
   (el que usa este proyecto) — por eso el mecanismo es propio de punta a punta. */
.sk-menu-collapse-btn {
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    border-radius: var(--sk-radius-pill, 50rem);
    background: linear-gradient(145deg, var(--sk-primary-from), var(--sk-primary-to));
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(95, 98, 232, 0.35);
    transition: transform 0.25s ease, box-shadow 0.15s ease;
}

.sk-menu-collapse-btn:hover {
    box-shadow: 0 3px 9px rgba(95, 98, 232, 0.6);
}

html.sk-menu-collapsed .sk-menu-collapse-btn {
    transform: rotate(180deg);
}

html.sk-menu-collapsed .layout-menu {
    width: 78px !important;
    overflow: hidden;
    transition: width 0.25s ease;
}

html.sk-menu-collapsed.layout-menu-fixed .layout-page {
    padding-left: 78px !important;
    transition: padding-left 0.25s ease;
}

html.sk-menu-collapsed .app-brand {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

html.sk-menu-collapsed .sk-menu-collapse-btn {
    margin-left: 0;
}

html.sk-menu-collapsed .app-brand-link img {
    height: 36px !important;
}

html.sk-menu-collapsed .menu-header-text,
html.sk-menu-collapsed .menu-link > div,
html.sk-menu-collapsed .menu-toggle::after,
html.sk-menu-collapsed .menu-sub,
html.sk-menu-collapsed .menu-header {
    display: none !important;
}

/* Menú contraído (78px): cada ítem ocupa todo el ancho y el enlace centra su
   ícono. Se quita el padding lateral del .menu-inner y los márgenes/anchos fijos
   que Sneat pone (16.25rem por ítem), que descuadraban y recortaban los íconos. */
html.sk-menu-collapsed .layout-menu .menu-inner {
    padding-left: 0;
    padding-right: 0;
}

html.sk-menu-collapsed .menu-vertical .menu-inner > .menu-item {
    width: 100% !important;
    margin: 1px 0 !important;
}

html.sk-menu-collapsed .menu-link,
html.sk-menu-collapsed .menu-toggle {
    justify-content: center !important;
    margin: 0 !important;
    padding: 0.6rem 0 !important;
}

html.sk-menu-collapsed .menu-icon {
    margin-right: 0 !important;
}

.layout-menu {
    /* Incluir transform: en pantallas < 1200px el menú se muestra/oculta
       moviéndose con translateX. Si la transición solo cubre width, el
       deslizamiento es instantáneo y —peor— el evento transitionend no llega,
       con lo que la lógica de Sneat que abre el menú móvil nunca se completa. */
    transition: transform 0.25s ease, width 0.25s ease;
}

.layout-menu-fixed .layout-page {
    transition: padding-left 0.25s ease;
}

.menu-vertical .menu-header {
    color: #8b95a5 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    padding: 1rem 0.75rem 0.4rem !important;
}

.menu-vertical .menu-header::before {
    display: none;
}

.menu-vertical .menu-item {
    margin: 2px 0;
}

.menu-vertical .menu-link,
.menu-vertical .menu-toggle {
    border-radius: var(--sk-radius-md) !important;
    color: #566a7f !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.menu-vertical .menu-link:hover,
.menu-vertical .menu-toggle:hover {
    background: rgba(105, 108, 255, 0.08) !important;
}

/* Ítem de página actual: la misma píldora "elevada" de gradiente que
   ya se usa en botones primarios y tabs, para que se sienta parte del
   mismo sistema visual en toda la app. */
.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item.active > .menu-toggle {
    background: linear-gradient(145deg, var(--sk-primary-from), var(--sk-primary-to)) !important;
    color: #fff !important;
    box-shadow:
        3px 3px 8px rgba(95, 98, 232, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.menu-vertical .menu-item.active > .menu-link .menu-icon,
.menu-vertical .menu-item.active > .menu-toggle::after {
    color: #fff !important;
}

/* Submenú desplegado: se ve como una hendidura leve dentro del panel,
   coherente con el resto de superficies "grabadas" del sistema. */
.menu-vertical .menu-sub {
    background: rgba(0, 0, 0, 0.025) !important;
    border-radius: var(--sk-radius-md);
    margin: 2px 4px;
}

.menu-vertical .menu-sub .menu-link {
    color: #6b7787 !important;
}

.menu-vertical .menu-item.open > .menu-toggle {
    background: rgba(105, 108, 255, 0.08) !important;
    color: #4b4ec9 !important;
}

/* La flechita de cada grupo (dibujada con dos bordes en ::after, sin
   ícono) quedaba casi invisible: 1px de borde en apenas ~6px de caja.
   Se agranda y se engrosa para que se note como el resto de los
   controles del sistema. */
.menu-vertical .menu-item .menu-toggle::after {
    width: 0.55rem !important;
    height: 0.55rem !important;
    border-width: 2px !important;
    right: 1.1rem !important;
}

/* aside.php le pone .badge (pensado para insignias chicas) al propio
   <a class="menu-link menu-toggle badge bg-label-info"> de cada grupo del
   menú. La regla genérica .badge (display:inline-block, padding chico,
   border-radius:999px — ver css/sigi-framework.css) le ganaba la cascada
   al layout de enlace completo, y eso era el menú "desordenado": esta
   regla, más específica, restaura el layout de enlace sin perder el
   look de insignia en el color de fondo. */
.menu-vertical .menu-link.badge,
.menu-vertical .menu-toggle.badge {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
    white-space: normal !important;
    border-radius: var(--sk-radius-md) !important;
}

.menu-vertical .badge.bg-label-info {
    background: rgba(105, 108, 255, 0.12) !important;
    color: #4b4ec9 !important;
}

/* ---------- Barra superior (navbar.php) ---------- */
.layout-navbar,
.bg-navbar-theme {
    background: var(--sk-navbar-bg) !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(100, 110, 130, 0.1) !important;
}

.layout-navbar .navbar-clock {
    background: linear-gradient(145deg, var(--sk-primary-from), var(--sk-primary-to)) !important;
    box-shadow: 2px 2px 6px rgba(95, 98, 232, 0.3);
}

.layout-navbar .welcome-badge {
    background: linear-gradient(145deg, var(--sk-primary-from), var(--sk-primary-to)) !important;
    box-shadow: 2px 2px 6px rgba(95, 98, 232, 0.3);
}

/* ---------- Pie de página (footer.php) ---------- */
.content-footer.footer {
    background: transparent !important;
}

.content-footer .container-xxl {
    background: var(--sk-sidebar-bg);
    border-radius: var(--sk-radius-lg);
    box-shadow:
        4px 4px 12px var(--sk-shadow-dark),
        -4px -4px 12px var(--sk-shadow-light);
    padding: 1rem 1.5rem;
}

/* ---------- Mostrar/ocultar contraseña (reemplaza el input-group viejo) ---------- */
.sk-password-wrap {
    position: relative;
}

.sk-password-wrap .form-control {
    padding-right: 2.75rem;
}

.sk-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #8592a3;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}

.sk-password-toggle:hover {
    color: #4b4ec9;
}

/* ---------- DataTables (vendor/tables/datatables.css) ---------- */
/* DataTables es una librería aparte, no parte de Sneat: se deja su CSS
   propio para no reconstruir toda la lógica de orden/responsive/plugins.
   Esto solo retematiza los controles que el usuario realmente toca
   (buscador, selector de cantidad, paginación) para que se vean parte
   del mismo sistema visual. */
div.dt-container .dt-input {
    background-color: var(--sk-surface) !important;
    border: none !important;
    border-radius: var(--sk-radius-md) !important;
    padding: 0.4rem 0.7rem !important;
    box-shadow:
        inset 2px 2px 5px var(--sk-shadow-dark),
        inset -2px -2px 5px var(--sk-shadow-light) !important;
}

div.dt-container .dt-paging .dt-paging-button {
    border: none !important;
    border-radius: var(--sk-radius-md) !important;
    background: var(--sk-surface) !important;
    color: #566a7f !important;
    box-shadow:
        2px 2px 5px var(--sk-shadow-dark),
        -2px -2px 5px var(--sk-shadow-light) !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: linear-gradient(145deg, var(--sk-primary-from), var(--sk-primary-to)) !important;
    color: #fff !important;
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.25),
        inset -1px -1px 3px rgba(255, 255, 255, 0.15) !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    opacity: 0.5;
    box-shadow: none !important;
    background: transparent !important;
}

div.dt-container .dt-info {
    color: #6c7784;
}

table.dataTable {
    border-collapse: collapse !important;
}

/* Si una celda viene de un campo de texto largo (nota, observaciones,
   etc.) que el usuario escribió con saltos de línea, que se sigan
   viendo aquí en vez de quedar todo pegado en una sola línea — el HTML
   por defecto colapsa los saltos de línea salvo que se le diga esto. No
   afecta a las demás celdas (solo hace algo si el texto ya trae \n). */
table.dataTable td {
    white-space: pre-line;
}

/* white-space se hereda a CUALQUIER descendiente: sin este reset, todo lo
   que hay dentro de una celda (formularios, botones, spans...) heredaba
   el pre-line de arriba, y los saltos de línea "en blanco" del HTML que
   genera PHP entre etiquetas (indentación, <input type="hidden"> uno
   tras otro) se volvían líneas vacías visibles — inflando la altura de
   la fila entera (más inputs ocultos = más alto). Solo el texto suelto
   de la celda (sin envolver en una etiqueta) debe respetar los saltos de
   línea reales; todo lo demás vuelve al comportamiento normal. */
table.dataTable td * {
    white-space: normal;
}

table.dataTable > thead {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c7784;
    background-color: #f7f9fc;
}

/* ---------- Barra de controles de DataTables (responsive, global) ----------
   Aplica a TODAS las tablas (usen o no el toolbar unificado de
   dt-estado-filtro.js). Sin esto, "Mostrar [25] registros" se apila en tres
   líneas (el widget sk-select es un bloque dentro de un <label> inline) y el
   buscador queda pegado a la derecha sin ocupar el ancho en móvil. */
div.dt-container .dt-length label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 500;
}

div.dt-container .dt-length .sk-select {
    display: inline-flex;
    min-width: 4.5rem;
}

div.dt-container .dt-search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

div.dt-container .dt-search input {
    width: 240px;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 767.98px) {

    /* Fila del dom "l | f": cada control a ancho completo y apilado. */
    div.dt-container .dt-length,
    div.dt-container .dt-search {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    div.dt-container .dt-search {
        flex-wrap: wrap;
    }

    div.dt-container .dt-search input {
        flex: 1 1 100%;
        width: 100%;
    }

    /* Info + paginación centradas y con aire. */
    div.dt-container .dt-info,
    div.dt-container .dt-paging {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin-top: 0.35rem;
    }

    div.dt-container .dt-paging {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ---------- Toolbar unificado de tablas (js/dt-estado-filtro.js) ----------
   Grilla de 2 columnas x 2 filas:
     Izquierda-arriba: exportar (CSV/Excel/Columnas visibles, sin PDF)
     Izquierda-abajo:  Mostrar
     Derecha-arriba:   Nuevo registro
     Derecha-abajo:    Estado + Buscar
   Ver ese archivo para cómo se arma. */
.dt-toolbar-unificada {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--sk-surface, #f4f6fb);
    border-radius: var(--sk-radius-lg, 16px);
    box-shadow:
        inset 2px 2px 5px rgba(160, 170, 190, 0.25),
        inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}

.dt-toolbar-columna {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dt-toolbar-columna-der {
    align-items: flex-end;
}

.dt-toolbar-fila:empty {
    display: none;
}

.dt-toolbar-unificada .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dt-toolbar-unificada .dt-length label,
.dt-toolbar-unificada .dt-search label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    white-space: nowrap;
    font-weight: 500;
}

.dt-toolbar-unificada .dt-length .sk-select {
    min-width: 6.5rem;
}

.dt-toolbar-unificada .dt-search input {
    min-width: 200px;
}

.dt-toolbar-fila-nuevo .dt-estado-filtro-bar,
.dt-toolbar-columna-der .dt-estado-filtro-bar {
    min-width: 8rem;
}

.dt-toolbar-columna-der .dt-estado-filtro-bar .sk-select {
    min-width: 8rem;
}

@media (max-width: 767.98px) {
    .dt-toolbar-unificada {
        justify-content: center;
    }
    .dt-toolbar-columna,
    .dt-toolbar-columna-der {
        align-items: center;
        text-align: center;
    }
}

/* ---------- Indicador de búsqueda de RUC en el SRI (orden_add.php /
   orden_edit.php) — compartido para que ambos formularios se vean igual. ---------- */
.ruc-status {
    font-size: 12px;
    margin-top: 4px;
    min-height: 18px;
}

.ruc-status.loading {
    color: #6b7280;
}

.ruc-status.success {
    color: #16a34a;
}

.ruc-status.error {
    color: #dc2626;
}

table.dataTable.table-hover > tbody > tr:hover > * {
    background-color: rgba(105, 108, 255, 0.05) !important;
}