/* ============================================================
   controlacceso_2.css — Tema V2 (Propoto-inspired) global
   White, luminoso, limpio, amplio. Hereda la paleta y estetica
   del registro_2.css y pasesalidapp.css, generalizada al resto
   del proyecto. Se carga solo cuando la cookie `theme2` esta
   activa, por eso es seguro dejarlo en produccion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============ VARIABLES ============ */
:root {
    --c-primary: #003b73;
    --c-primary-soft: #E5EEF5;
    --c-primary-strong: #002A55;
    --c-primary-deep: #001A33;
    --c-primary-bright: #0F5597;

    --c-accent: #F97316;
    --c-accent-soft: #FFF7ED;

    --c-success: #10B981;
    --c-success-soft: #ECFDF5;
    --c-warning: #F59E0B;
    --c-warning-soft: #FFFBEB;
    --c-danger: #EF4444;
    --c-danger-soft: #FEF2F2;

    --bg-base: #F5F6FB;
    --bg-blob-1: rgba(0, 59, 115, .08);
    --bg-blob-2: rgba(249, 115, 22, .05);
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --surface-3: #F1F5F9;

    --text: #0F172A;
    --text-2: #1E293B;
    --text-muted: #64748B;
    --text-soft: #94A3B8;

    --border: #E5E7EB;
    --border-soft: #F1F5F9;

    --focus-ring: rgba(0, 59, 115, .18);

    --r-xs: 10px;
    --r-sm: 14px;
    --r-md: 18px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    --sh-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --sh-sm: 0 4px 14px rgba(15, 23, 42, .07);
    --sh-md: 0 14px 36px rgba(15, 23, 42, .09);
    --sh-lg: 0 28px 64px rgba(15, 23, 42, .14);
    --sh-primary: 0 10px 24px rgba(0, 59, 115, .32);
    --sh-success: 0 10px 24px rgba(16, 185, 129, .28);
    --sh-danger: 0 10px 24px rgba(239, 68, 68, .28);
}

/* ============ BASE ============ */
* {
    box-sizing: border-box;
}

html,
body {
    overscroll-behavior-y: contain;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 100% 0%, var(--bg-blob-1), transparent 40%),
        radial-gradient(circle at 0% 100%, var(--bg-blob-2), transparent 35%),
        var(--bg-base) !important;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.005em;
    /* Sticky footer: body como flex column con altura minima del viewport.
       main toma el espacio sobrante; footer queda al fondo cuando el
       contenido es mas corto que la pantalla. */
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

html { min-height: 100vh; }

main {
    flex: 1 0 auto;
}
.logo-circle {
    width: 42px!important;
    right: -9px!important;
    box-shadow: 1px 1px 18px rgba(0, 0, 0, 0.3);
}

.ultimoAcceso {
    bottom: 20px!important;
}

footer,
footer.footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

main,
main.container,
main.container-fluid {
    padding-top: 16px;
    padding-bottom: 80px;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* Override del .container de Bootstrap (todos los breakpoints) — capped
   a 1320px para que coincida con el container general. */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 1320px !important;
}

@media (min-width: 1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1320px !important;
    }
}

@media (min-width: 1400px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1320px !important;
    }
}

/* ============ TIPOGRAFIA ============ */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
    letter-spacing: -.02em;
    font-weight: 700;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-danger {
    color: var(--c-danger) !important;
}

.text-success {
    color: var(--c-success) !important;
}

.text-warning {
    color: var(--c-warning) !important;
}

.text-primary {
    color: var(--c-primary) !important;
}

/* Forzar blanco en headers oscuros (modales con bg-dark, etc.) */
.bg-dark .modal-title,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.text-white .modal-title,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6 {
    color: #fff !important;
}

/* ============ HEADER / NAVBAR ============ */
.navbar,
header.navbar,
header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    box-shadow: var(--sh-xs);
    padding: 12px 16px;
}

header img {
    max-height: 44px;
}

.navbar-brand {
    font-weight: 700;
    color: var(--c-primary-strong) !important;
}

/* Override sticky-kit: cuando el navbar se pega al scroll, proveedores.css
   le ponia fondo navy y texto blanco. Aqui mantenemos el mismo aspecto
   claro del estado normal — solo se agrega una sombra discreta para
   marcar que esta flotando. */
nav.navbar.is_stuck {
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: var(--sh-sm) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

nav.navbar.is_stuck .nav-link,
nav.navbar.is_stuck .nav-item>a,
nav.navbar.is_stuck .nav-item>span>a,
nav.navbar.is_stuck .dropdown-toggle {
    color: var(--text) !important;
}

/* ============ NAV-LINK ESTADOS ============
   Activo: underline pill bajo el texto (limpio, sin fondo pesado, funciona
   bien tanto con nav-link simple como con dropdown-toggle).
   Hover: solo cambio de color, sin fondo.

   Usamos la misma especificidad que proveedores.css
   (.navbar-light .navbar-nav ...) para ganarle en la cascada. */
.navbar .nav-link,
.navbar-light .navbar-nav .nav-link {
    color: var(--text) !important;
    font-weight: 500;
    padding: 10px 16px !important;
    margin: 0 2px;
    background: transparent !important;
    border-radius: 0 !important;
    position: relative;
    transition: color .15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.nav-item.active>a {
    background: transparent !important;
    color: var(--c-primary-strong) !important;
}

.navbar .nav-link.active,
.navbar .nav-link.dropdown-toggle.active,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link,
nav.navbar.is_stuck .nav-link.active,
nav.navbar.is_stuck .nav-link.dropdown-toggle.active {
    background: transparent !important;
    color: var(--c-primary-strong) !important;
    font-weight: 700 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Underline pill: pseudo absoluto al fondo del link, no choca con el
   caret ::after del dropdown-toggle */
.navbar .nav-link.active::before,
.navbar .nav-link.dropdown-toggle.active::before {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-bright));
    box-shadow: 0 2px 6px rgba(0, 59, 115, .25);
}

/* Hover de inactivo: underline tenue que aparece (sutil hint) */
.navbar .nav-link:not(.active):hover::before {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: var(--border);
}

.navbar .nav-link.show,
nav.navbar.is_stuck .nav-link.show {
    color: var(--c-primary-strong) !important;
}

/* Asegurar que el caret del dropdown-toggle siga siendo visible */
.navbar .nav-link.dropdown-toggle::after {
    border-top-color: currentColor;
    margin-left: 6px;
    opacity: .7;
    vertical-align: middle;
}

/* El icono del toggler en sticky volvia blanco (menu_w.svg); aqui forzamos
   el icono normal oscuro. */
nav.navbar.is_stuck>.navbar-toggler>.navbar-toggler-icon,
nav.navbar.is_stuck .navbar-toggler-icon {
    background-image: url("../images/svg/menu.svg") !important;
}

/* El logo-circle pequeno que aparece al hacer sticky: lo mantenemos pero
   sin filtros de inversion / ajuste para fondo oscuro. */
nav.navbar.is_stuck .logo-circle {
    filter: none;
}

/* ============ BLOQUE LOGO SUPERIOR (.content-logo) ============
   El HTML ya viene con .container (max-width limitado). Para que el
   fondo blanco se extienda de borde a borde sin tocar HTML, usamos un
   pseudo-elemento absoluto que se proyecta a todo el ancho del viewport
   detras del contenido. El contenido sigue respetando el container. */
body {
    overflow-x: hidden;
}

.content-logo {
    position: relative;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 0 !important;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    text-align: left;
}

.content-logo::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
    z-index: -1;
}

.content-logo .logo,
.content-logo img.logo {
    max-height: 90px;
    margin: 0 !important;
    flex: 0 0 auto;
}

.content-logo h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-primary-strong);
    margin: 0;
    line-height: 1.25;
    flex: 1 1 auto;
}

/* Info de sesion: se empuja al extremo derecho del container */
.content-logo .ultimoAcceso {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-left: auto;
    text-align: right;
}

.content-logo .bienvenida {
    font-size: 13px;
    color: var(--text-muted);
    text-align: right;
    flex: 0 0 auto;
}

.content-logo .bienvenida b {
    color: var(--c-primary-strong);
    font-weight: 700;
}

/* En pantallas pequenas: el header se apila, sin perder el bloque blanco */
@media (max-width: 768px) {
    .content-logo {
        gap: 4px 12px;
    }

    .content-logo h4 {
        flex: 1 1 100%;
        font-size: 15px;
    }

    .content-logo .ultimoAcceso,
    .content-logo .bienvenida {
        margin-left: 0;
        text-align: left;
        flex: 1 1 100%;
    }
    .ultimoAcceso {
        bottom: -55px !important;
    }
}

@media (max-width:480px) {
    .ultimoAcceso {
        bottom: 0px !important;
    }
}


/* ============ CONTAINER / CARDS ============ */
.container.bootstrap.snippet,
.content-menu,
.content-form,
.content-manual {
    background: transparent;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
    overflow: hidden;
}

.card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700;
    color: var(--text);
    padding: 14px 20px;
}

.card-body {
    padding: 20px;
}

/* ============ TARJETA DE FORMULARIO ============
   Mismo look que .dataTables_wrapper: fondo blanco, border-radius xl,
   borde tenue, sombra media. Cubre todas las variantes de form que se
   usan en el proyecto. */
.form-signin,
.form-register,
.form-paseSalida,
form.animated,
form#form-register,
form[id^="frm-"] {
    background: var(--surface) !important;
    border-radius: var(--r-xl) !important;
    padding: 28px 24px !important;
    box-shadow: var(--sh-md) !important;
    border: 1px solid var(--border-soft) !important;
    margin-top: 16px;
    margin-bottom: 16px;
}

.form-signin {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    padding: 34px 28px;
}

.form-signin h5,
.form-register>h5,
form h5.text-center.font-weight-bold {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-bright));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
}

.form-signin>.row>div>p.text-muted.text-center,
.form-signin p.text-muted.text-center {
    color: var(--text-muted) !important;
    font-size: 14px;
    margin-bottom: 22px;
}

/* Botones del login: amplios, 50/50, gap visual claro. Anulamos el btn-sm
   visual para que tengan presencia consistente con el resto del sitio. */
.form-signin .btn-toolbar {
    gap: 12px;
    margin-top: 18px !important;
}

.form-signin .btn-toolbar>.btn {
    flex: 1;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    min-width: 0;
}

.form-signin .btn-toolbar>.btn.btn-sm {
    padding: 13px 22px;
    font-size: 15px;
    border-radius: var(--r-pill);
}

/* Links secundarios del login (solicitar usuario, olvide contrasena) */
.form-signin .btn-link,
.form-signin a.btn-link {
    color: var(--c-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 4px;
    transition: color .15s ease;
}

.form-signin .btn-link:hover,
.form-signin a.btn-link:hover {
    color: var(--c-primary-strong);
    text-decoration: underline;
}

/* ============ MENSAJES (#message) ============ */
#message:empty {
    display: none;
}

#message .alert,
.alert {
    border: 0;
    border-radius: var(--r-md);
    padding: 13px 16px;
    margin-bottom: 14px;
    box-shadow: var(--sh-sm);
    font-size: 14px;
    font-weight: 500;
    animation: slideDown .35s ease;
    border-left: 4px solid transparent;
}

.alert-success {
    background: var(--c-success-soft);
    color: #065F46;
    border-left-color: var(--c-success);
}

.alert-info {
    background: var(--c-primary-soft);
    color: var(--c-primary-strong);
    border-left-color: var(--c-primary);
}

.alert-warning {
    background: var(--c-warning-soft);
    color: #92400E;
    border-left-color: var(--c-warning);
}

.alert-danger {
    background: var(--c-danger-soft);
    color: #991B1B;
    border-left-color: var(--c-danger);
}

/* ============ FORM CONTROLS ============ */
.form-control,
.form-select {
    border-radius: var(--r-md) !important;
    border: 1.5px solid var(--border);
    background-color: var(--surface-2);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--c-primary);
    background-color: var(--surface);
    box-shadow: 0 0 0 4px var(--focus-ring);
    outline: 0;
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: var(--surface-3);
    color: var(--text-2);
    cursor: default;
}

.form-floating>.form-control,
.form-floating>.form-select {
    padding-left: 18px;
    padding-right: 18px;
}

/* ============ CARETS EN SELECTS (lista desplegable) ============
   Aplica a .form-select, select.form-control, y <select> vanilla. */
.form-select,
select.form-control,
select:not([multiple]):not([size]) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23475569' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
    padding-right: 38px !important;
    cursor: pointer;
}

.form-floating>.form-select,
.form-floating>select.form-control {
    background-position: right 16px center !important;
    padding-right: 40px !important;
}

/* Caret cambia a navy al hacer foco para reforzar la interaccion */
.form-select:focus,
select.form-control:focus,
select:not([multiple]):not([size]):focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* Disabled: caret atenuado */
.form-select:disabled,
select.form-control:disabled,
select:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%2394A3B8' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    cursor: not-allowed;
}

.form-floating>label {
    padding-left: 18px;
    padding-right: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-control[readonly]~label,
.form-floating>.form-control:disabled~label,
.form-floating>.form-select~label {
    color: var(--c-primary-strong);
    font-weight: 600;
    opacity: 1;
    transform: scale(.85) translateY(-.55rem) translateX(.15rem);
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

textarea.form-control {
    resize: vertical;
}

/* ============ CHECKBOXES / RADIOS ============ */
.form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: .2em;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px var(--focus-ring);
    outline: 0;
}

.form-check-input:checked {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 6px 14px rgba(0, 59, 115, .25);
}

.form-check-input:disabled {
    opacity: .55;
    background-color: var(--surface-3);
    cursor: not-allowed;
}

.form-check-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

/* ============ BOTONES ============ */
.btn {
    border-radius: var(--r-pill); /* botones tipo capsula, totalmente redondeados */
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.01em;
    padding: 11px 20px;
    border: 0;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-sm {
    padding: 9px 14px;
    font-size: 13px;
    border-radius: var(--r-pill);
}

.btn-lg {
    padding: 14px 26px;
    font-size: 16px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-strong));
    color: #fff;
    box-shadow: var(--sh-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--c-primary-strong), var(--c-primary-deep));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 59, 115, .42);
}

.btn-success {
    background: linear-gradient(135deg, var(--c-success), #059669);
    color: #fff;
    box-shadow: var(--sh-success);
}

.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(16, 185, 129, .42);
}

.btn-secondary {
    background: var(--surface-3);
    color: var(--text);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #E2E8F0;
    color: var(--text);
}

.btn-danger {
    background: linear-gradient(135deg, var(--c-danger), #DC2626);
    color: #fff;
    box-shadow: var(--sh-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(239, 68, 68, .42);
    color: #fff;
}

.btn-warning {
    background: linear-gradient(135deg, var(--c-warning), #D97706);
    color: #fff;
    box-shadow: 0 10px 24px rgba(245, 158, 11, .32);
}

.btn-warning:hover,
.btn-warning:focus {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 14px 32px rgba(245, 158, 11, .42);
}

.btn-info {
    background: linear-gradient(135deg, var(--c-primary-bright), var(--c-primary));
    color: #fff;
    box-shadow: var(--sh-primary);
}

.btn-info:hover,
.btn-info:focus {
    color: #fff;
    transform: translateY(-2px);
}

.btn-outline-primary {
    background: transparent;
    color: var(--c-primary);
    border: 1.5px solid var(--c-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--c-primary);
    color: #fff;
}

.btn-outline-secondary {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border);
}

.btn-outline-danger {
    background: transparent;
    color: var(--c-danger);
    border: 1.5px solid var(--c-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--c-danger);
    color: #fff;
}

.btn-toolbar {
    gap: 10px;
}

/* ============ MODALES ============ */
.modal-content {
    border: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border-soft);
    padding: 18px 22px 14px;
}

.modal-header.bg-dark,
.modal-header.bg-primary {
    background: linear-gradient(135deg, var(--c-primary-deep), var(--c-primary-strong)) !important;
}

.modal-title {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.01em;
}

.modal-body {
    padding: 20px 22px;
}

.modal-body.text-center .modal-title {
    margin-bottom: 8px;
}

.modal-footer {
    border-top: 1px solid var(--border-soft);
    padding: 14px 22px 18px;
    gap: 10px;
}

.btn-close {
    background-size: 14px;
    opacity: .7;
    transition: opacity .15s ease;
}

.btn-close:hover {
    opacity: 1;
}

/* Modal estilo cerrarSesion (text-center con icono y separador) */
.content-session-close {
    margin: 14px 0 6px;
}

/* ============ .session-icons — icono grande en avisos modales ============
   Reemplaza el char unicode (anulado por i.font-icon::before { display:none })
   con un SVG grande embebido. Default: warning triangle ambar.
   El badge usa look coherente con .modal-icon. */
i.session-icons,
.session-icons {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 6px auto 4px !important;
    /* Default: warning ambar */
    background-color: var(--c-warning-soft) !important;
    border: 1px solid rgba(245, 158, 11, .3) !important;
    box-shadow: var(--sh-sm) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23B45309' viewBox='0 0 16 16'%3e%3cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 34px !important;
    color: transparent !important;
    font-size: 0 !important;
    /* Anular cualquier hereda de .font-icon */
    position: relative !important;
}

i.session-icons::before,
.session-icons::before {
    content: '' !important;
    display: none !important;
}

/* Variante: flaticon-warning explicito (triangulo ambar — ya es el default) */
i.flaticon-warning.session-icons {
    background-color: var(--c-warning-soft) !important;
    border-color: rgba(245, 158, 11, .3) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23B45309' viewBox='0 0 16 16'%3e%3cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3e%3c/svg%3e") !important;
}

/* Variante: flaticon-round-help-button (signo de interrogacion navy) */
i.flaticon-round-help-button.session-icons {
    background-color: var(--c-primary-soft) !important;
    border-color: rgba(0, 59, 115, .2) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3e%3cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94'/%3e%3c/svg%3e") !important;
}

/* Variante: flaticon-info (info azul) */
i.flaticon-info.session-icons {
    background-color: #E0EAF5 !important;
    border-color: rgba(15, 85, 151, .22) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%230F5597' viewBox='0 0 16 16'%3e%3cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.286.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.082.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3e%3c/svg%3e") !important;
}

/* ============ MODAL-ICON (badge circular con SVG centrado) ============
   Usado en modales como cerrarSesion / inactividad para reemplazar el
   flaticon-round-help-button (que estaba en gris invisible). */
.modal-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 6px auto 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    box-shadow: var(--sh-sm);
    transition: transform .2s ease;
}

.modal-icon svg {
    width: 32px;
    height: 32px;
}

.modal-icon-danger {
    background: var(--c-danger-soft);
    color: #B91C1C;
    border-color: rgba(239, 68, 68, .25);
}

.modal-icon-warning {
    background: var(--c-warning-soft);
    color: #B45309;
    border-color: rgba(245, 158, 11, .3);
}

.modal-icon-success {
    background: var(--c-success-soft);
    color: #047857;
    border-color: rgba(16, 185, 129, .25);
}

.modal-icon-primary {
    background: var(--c-primary-soft);
    color: #003b73;
    border-color: rgba(0, 59, 115, .2);
}

.modal-icon-info {
    background: #E0EAF5;
    color: #0F5597;
    border-color: rgba(15, 85, 151, .22);
}

/* ============ .font-icon — REEMPLAZO POR SVG ============
   La fuente flaticon ya no se renderiza bien (color invisible, glifos
   inconsistentes). Aqui transformamos cada .font-icon en un badge circular
   con un SVG limpio embebido como background-image. La <i> queda como
   contenedor; el caracter unicode original (::before) se anula. */

.font-icon {
    color: transparent !important;
    background-color: var(--c-primary-soft) !important;
    border: 1px solid rgba(0, 59, 115, .15) !important;
    box-shadow: var(--sh-xs);
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Default fallback: pencil-fill (cubre la mayoria de titulos de form) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z'/%3e%3c/svg%3e") !important;
    background-size: 16px !important;
}

/* Anula el char unicode original de la fuente flaticon (::before) */
i.font-icon::before {
    content: '' !important;
    display: none !important;
}

/* Tamano y posicion del badge segun contexto */
.title-icons {
    width: 36px !important;
    height: 36px !important;
    top: 4px !important;
    right: 8px !important;
    background-size: 16px !important;
}

/* Login icons: badge circular dentro del input, alineado arriba-derecha.
   El wrapper (.col-sm-9 o cualquier ancestro inmediato) toma position:
   relative para anclar el badge absoluto. El input recibe padding-right
   para que el texto no se encime con el icono. */
.form-signin .form-group .col-sm-9,
.form-signin .col-sm-9:has(> .login-icons),
.form-signin .form-group:has(.login-icons)>div,
.form-signin div:has(> .form-control + .login-icons) {
    position: relative;
}

.form-signin .form-control+.login-icons,
.form-signin .login-icons {
    position: absolute !important;
    top: 5px !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    background-size: 14px !important;
    margin: 0 !important;
}

/* Padding-right del input para que el texto no se encime con el badge */
.form-signin .form-control:has(+ .login-icons) {
    padding-right: 42px !important;
}

/* ============ ESPACIADO DEL LOGIN (proveedores) ============
   El HTML usa .form-group con clases mb-0 que dejan los campos pegados.
   Aqui aireamos lo justo para que respire sin verse separado. */
.form-signin .form-group,
.form-signin .form-group.row,
.form-signin .form-group.row.mb-0 {
    margin-bottom: 10px !important;
}

.form-signin .col-form-label {
    padding-top: 8px;
    padding-bottom: 4px;
    color: var(--text-2);
    font-weight: 600;
    font-size: 13.5px;
}

.form-signin .btn-toolbar.justify-content-between {
    margin-top: 12px;
}

.form-signin .btn-toolbar.justify-content-between.mt-2 {
    margin-top: 10px !important;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}

.form-signin .accesos_directos {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center !important;
}

.form-signin .accesos_directos .btn-icon {
    margin: 0;
}

/* ============ VARIANTES POR LA CLASE FLATICON-* ============
   Sobrescriben el SVG default segun el icono original que usaba el HTML. */

/* Email / WhatsApp (envelope) */
i.flaticon-email.font-icon,
i.flaticon-paper-plane.font-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3e%3c/svg%3e") !important;
}

/* Usuario / Perfil */
i.flaticon-user.font-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3e%3c/svg%3e") !important;
}

/* Seguridad / permisos (shield-lock) */
i.flaticon-security.font-icon,
i.flaticon-password.font-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5'/%3e%3c/svg%3e") !important;
}

/* Info */
i.flaticon-info.font-icon,
i.flaticon-round-help-button.font-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.286.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.082.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3e%3c/svg%3e") !important;
}

/* Calendario / agenda */
i.flaticon-calendar.font-icon,
i.flaticon-timetable.font-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z'/%3e%3c/svg%3e") !important;
}

/* Documento / contrato / paper */
i.flaticon-paper.font-icon,
i.flaticon-contract.font-icon,
i.flaticon-bill.font-icon,
i.flaticon-survey.font-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1h5v2a2 2 0 0 0 2 2h2v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1'/%3e%3cpath d='M4.5 9a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5'/%3e%3c/svg%3e") !important;
}

/* Buscar / lupa */
i.flaticon-magnifying-glass.font-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e") !important;
}

/* Grafica / chart / pie */
i.flaticon-graph.font-icon,
i.flaticon-pie-chart.font-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M4 11H2v3h2zm5-4H7v7h2zm5-5v12h-2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z'/%3e%3c/svg%3e") !important;
}

/* Menu icon (boton hamburguesa de la navbar) */
.menu-icons {
    color: var(--c-primary-strong) !important;
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

.is_stuck>.container-fluid>.navbar-toggler>.menu-icons,
.is_stuck .menu-icons {
    color: var(--c-primary-strong) !important;
    background: transparent !important;
}

.separador {
    height: 1px;
    background: var(--border-soft);
    margin: 16px -4px 14px;
}

.btn-toolbar.justify-content-between {
    gap: 10px;
}

.btn-toolbar.justify-content-between>.btn {
    flex: 1;
}

/* ============ TABLAS / GRID ============ */
.table {
    background: var(--surface);
    border-radius: var(--r-md);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.table thead th,
.table>thead>tr>th {
    background: var(--surface-2);
    border-bottom: 1.5px solid var(--border);
    border-top: 0;
    color: var(--text-2);
    font-weight: 700;
    font-size: clamp(11px, 0.78vw, 12.5px);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 12px 10px;
    white-space: nowrap;
}

.table tbody td,
.table>tbody>tr>td {
    padding: 10px 10px;
    border-top: 0;
    border-bottom: 1px solid var(--border-soft);
    /* Reduce automaticamente con el ancho del viewport, pero con minimo
       legible (12.5px) y maximo razonable (14px). */
    font-size: clamp(12.5px, 0.95vw, 14px);
    font-weight: 500;
    color: var(--text-2);
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table-striped>tbody>tr:nth-of-type(odd)>td {
    background: var(--surface-2);
}

.table-hover>tbody>tr:hover>td,
.dataTable.table-hover>tbody>tr:hover>td {
    background: var(--c-primary-soft) !important;
    color: var(--c-primary-strong);
    transition: background .15s ease;
}

/* Filas inactivas: estilo discreto */
.dataTable tbody tr.inactivo>td,
table tbody tr.inactivo>td {
    color: var(--text-soft);
    background: var(--surface-3);
    font-style: italic;
}

/* ============ DATATABLES WRAPPER ============ */
.dataTables_wrapper {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 22px 26px 18px;
    box-shadow: var(--sh-md);
    border: 1px solid var(--border-soft);
    margin-top: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.dataTables_wrapper>.row {
    margin: 0 0 12px;
}

.dataTables_wrapper>.row:last-child {
    margin: 12px 0 0;
}

.dataTables_wrapper .table-responsive,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dt-body {
    border-radius: var(--r-md);
    overflow-x: auto;
    border: 1px solid var(--border-soft);
    margin: 0 -2px;
    /* respiro visual sin desbordar el wrapper */
}

/* La tabla interna NUNCA debe desbordar el wrapper visualmente */
.dataTables_wrapper table.dataTable {
    width: 100% !important;
    max-width: 100%;
    table-layout: auto;
}

/* Toolbar superior: length + filter */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 0 0 10px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    padding: 7px 28px 7px 12px;
    background: var(--surface-2) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748B' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") no-repeat right 10px center / 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    appearance: none;
    -webkit-appearance: none;
    min-width: 78px;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px var(--focus-ring);
    outline: 0;
    background-color: var(--surface);
}

/* Search field con icono lupa */
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border);
    padding: 9px 16px 9px 38px;
    background: var(--surface-2) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748B' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e") no-repeat 12px center / 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    min-width: 240px;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    margin-left: 8px;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
    color: var(--text-soft);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px var(--focus-ring);
    outline: 0;
    background-color: var(--surface);
    min-width: 280px;
}

/* Info footer */
.dataTables_wrapper .dataTables_info {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding-top: 12px;
}

/* Paginacion tipo pill — selector con `body` al inicio para ganar a
   datatables.css que tambien usa `color: #333 !important` con la misma
   especificidad y se carga despues de este CSS en cada vista. */
body .dataTables_wrapper .dataTables_paginate {
    padding-top: 8px;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--r-pill) !important;
    border: 1.5px solid transparent !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current>a,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current>span {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-strong)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--sh-primary);
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--c-primary-soft) !important;
    color: var(--c-primary-strong) !important;
    border-color: transparent !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .35;
    background: transparent !important;
    color: var(--text-soft) !important;
    cursor: not-allowed;
}

/* Indicadores de sorting en headers */
.dataTable thead .sorting,
.dataTable thead .sorting_asc,
.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 28px !important;
    background-image: none !important;
}

.dataTable thead .sorting::after,
.dataTable thead .sorting_asc::after,
.dataTable thead .sorting_desc::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .35;
    transition: opacity .15s;
}

.dataTable thead .sorting::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748B' viewBox='0 0 16 16'%3e%3cpath d='M3.5 3.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.5.5 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 12.293zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M7.5 7.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z'/%3e%3c/svg%3e");
}

.dataTable thead .sorting_asc::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M3.5 12.5a.5.5 0 0 1-1 0V3.707L1.354 4.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.5.5 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 3.707zM7 6.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5M7 3.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5'/%3e%3c/svg%3e");
    opacity: 1;
}

.dataTable thead .sorting_desc::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M3.5 3.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.5.5 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 12.293zM7 12.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5'/%3e%3c/svg%3e");
    opacity: 1;
}

.dataTable thead .sorting:hover::after {
    opacity: .7;
}

/* Empty / no results state */
.dataTables_empty {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 40px 20px !important;
}

/* ============ BOTONES DE ACCION DEL GRID (.actions) ============
   Reemplaza los iconos flaticon por SVGs modernos sin tocar el HTML:
   oculta la <i class="flaticon-*"> interior y pinta un SVG como
   background del boton. Color segun atributo accion=""/clase. */

.actions,
a.actions,
a.actions.btn-link {
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--border-soft) !important;
    padding: 0 !important;
    margin: 0 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
    background-color: var(--surface-2);
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    /* fijo: el icono NO crece en hover */
    color: transparent !important;
    font-size: 0 !important;
    text-decoration: none !important;
    vertical-align: middle;
    line-height: 1 !important;
}

/* Solo el boton se eleva sutilmente, el icono no cambia ni la sombra. */
.actions:hover {
    transform: translateY(-1px);
}

.actions:active {
    transform: translateY(0);
}

.actions:focus {
    outline: 0;
    box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Oculta los iconos flaticon originales — los reemplazamos via background */
.actions>i,
.actions>i.flaticon-edit,
.actions>i.flaticon-cancel,
.actions>i.flaticon-ui,
.actions>i.flaticon-info,
.actions>i.flaticon-paper-plane,
.actions>i.flaticon-trash {
    display: none !important;
}

/* ESTILO SUAVE: fondo pastel del color, icono en tono oscuro, borde tenue.
   En hover, el fondo se intensifica ligeramente. */

/* Activar (verde) */
.actions[accion="activa"],
.actions.activaDesactiva[accion="activa"] {
    background-color: var(--c-success-soft);
    border-color: rgba(16, 185, 129, .25);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23047857' viewBox='0 0 16 16'%3e%3cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
}

.actions[accion="activa"]:hover,
.actions.activaDesactiva[accion="activa"]:hover {
    background-color: #D1FAE5;
    border-color: rgba(16, 185, 129, .45);
}

/* Eliminar (rojo) — icono trash, accion definitiva */
.actions[accion="elimina"],
.actions.activaDesactiva[accion="elimina"] {
    background-color: var(--c-danger-soft) !important;
    border-color: rgba(239, 68, 68, .25) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23B91C1C' viewBox='0 0 16 16'%3e%3cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/%3e%3cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3e%3c/svg%3e") !important;
}

.actions[accion="elimina"]:hover,
.actions.activaDesactiva[accion="elimina"]:hover {
    background-color: #FEE2E2 !important;
    border-color: rgba(239, 68, 68, .45) !important;
}

/* Cancelar / no se presento (rojo) — icono X-circle, distinto a trash.
   Cubre accion="novino", clase .cancelar, y .actions con .flaticon-cancel
   cuando NO se trata de eliminar (combinada con .cancelar o accion="novino"). */
.actions[accion="novino"],
.actions.cancelar {
    background-color: var(--c-danger-soft) !important;
    border-color: rgba(239, 68, 68, .25) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23B91C1C' viewBox='0 0 16 16'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e") !important;
}

.actions[accion="novino"]:hover,
.actions.cancelar:hover {
    background-color: #FEE2E2 !important;
    border-color: rgba(239, 68, 68, .45) !important;
}

/* Editar (navy) — tambien detectamos por icono flaticon-edit interior
   para cubrir casos como <a accion="info"><i class="flaticon-edit"></i></a>
   donde el atributo accion no refleja la verdadera intencion del boton. */
.actions[accion="editar"],
.actions.editarReg,
.actions:has(> i.flaticon-edit),
.actions[href*="editar" i],
.actions[href*="edita" i] {
    background-color: var(--c-primary-soft) !important;
    border-color: rgba(0, 59, 115, .2) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23003b73' viewBox='0 0 16 16'%3e%3cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.468-.325'/%3e%3c/svg%3e") !important;
}

.actions[accion="editar"]:hover,
.actions.editarReg:hover,
.actions:has(> i.flaticon-edit):hover,
.actions[href*="editar" i]:hover,
.actions[href*="edita" i]:hover {
    background-color: #D6E4F0 !important;
    border-color: rgba(0, 59, 115, .45) !important;
}

/* Info (azul brillante) — cubre .infoReg, .infoRegPrestador y accion="info" */
.actions.infoReg,
.actions.infoRegPrestador,
.actions[accion="info"] {
    background-color: #E0EAF5 !important;
    border-color: rgba(15, 85, 151, .22) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%230F5597' viewBox='0 0 16 16'%3e%3cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.286.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.082.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3e%3c/svg%3e") !important;
}

.actions.infoReg:hover,
.actions.infoRegPrestador:hover,
.actions[accion="info"]:hover {
    background-color: #CFE0EE !important;
    border-color: rgba(15, 85, 151, .45) !important;
}

/* Reenviar / Invitar (coral) — avion de papel */
.actions.reenviar,
.actions.invitacion {
    background-color: var(--c-accent-soft);
    border-color: rgba(249, 115, 22, .25);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C2410C' viewBox='0 0 16 16'%3e%3cpath d='M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z'/%3e%3c/svg%3e");
}

.actions.reenviar:hover,
.actions.invitacion:hover {
    background-color: #FFE5D0;
    border-color: rgba(249, 115, 22, .45);
}

/* Crear cuenta / alta de usuario (verde) — icono user */
.actions.crear {
    background-color: var(--c-success-soft);
    border-color: rgba(16, 185, 129, .25);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23047857' viewBox='0 0 16 16'%3e%3cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3e%3c/svg%3e");
}

.actions.crear:hover {
    background-color: #D1FAE5;
    border-color: rgba(16, 185, 129, .45);
}

/* Salir / registrar salida (gris) */
.actions.salir {
    background-color: var(--surface-3);
    border-color: var(--border);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23475569' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z'/%3e%3cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3e%3c/svg%3e");
}

.actions.salir:hover {
    background-color: #E2E8F0;
    border-color: var(--text-soft);
}

/* Boton no funcional (vista solo lectura) — atenuado */
.actions.noFunction {
    cursor: not-allowed;
    opacity: .5;
    filter: grayscale(.5);
}

.actions.noFunction:hover {
    transform: none;
    filter: grayscale(.5);
}

/* ============ NAV TABS / PILLS ============ */
.nav-tabs {
    border-bottom: 1.5px solid var(--border-soft);
    gap: 4px;
}

.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    color: var(--text-muted);
    font-weight: 600;
    padding: 10px 16px;
    transition: color .15s ease, background .15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--c-primary);
    background: var(--surface-2);
}

.nav-tabs .nav-link.active {
    color: var(--c-primary-strong);
    background: var(--surface);
    border-bottom: 2.5px solid var(--c-primary);
}

.nav-pills .nav-link {
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 16px;
}

.nav-pills .nav-link.active {
    background: var(--c-primary);
    color: #fff;
    box-shadow: var(--sh-primary);
}

/* ============ BADGES / LABELS ============
   Misma paleta exacta que los iconos de acciones del grid (.actions):
   fondo pastel, texto color del tema, borde tenue. Coherencia total. */
.badge,
.label {
    border-radius: var(--r-pill);
    padding: 5px 11px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .02em;
    line-height: 1.4;
    border: 1px solid transparent;
    display: inline-block;
}

/* Primary / editar (navy) — espejo de .actions[accion="editar"] */
.badge.bg-primary,
.badge.text-bg-primary,
.label.label-primary {
    background: var(--c-primary-soft) !important;
    color: #003b73 !important;
    border-color: rgba(0, 59, 115, .2) !important;
}

/* Success / activar (verde) — espejo de .actions[accion="activa"] */
.badge.bg-success,
.badge.text-bg-success,
.label.label-success {
    background: var(--c-success-soft) !important;
    color: #047857 !important;
    border-color: rgba(16, 185, 129, .25) !important;
}

/* Warning (ambar) */
.badge.bg-warning,
.badge.text-bg-warning,
.label.label-warning {
    background: var(--c-warning-soft) !important;
    color: #92400E !important;
    border-color: rgba(245, 158, 11, .25) !important;
}

/* Danger / eliminar (rojo) — espejo de .actions[accion="elimina"] */
.badge.bg-danger,
.badge.text-bg-danger,
.label.label-danger {
    background: var(--c-danger-soft) !important;
    color: #B91C1C !important;
    border-color: rgba(239, 68, 68, .25) !important;
}

/* Info — espejo de .actions.infoReg */
.badge.bg-info,
.badge.text-bg-info,
.label.label-info {
    background: #E0EAF5 !important;
    color: #0F5597 !important;
    border-color: rgba(15, 85, 151, .22) !important;
}

/* Secondary / light / default — espejo de .actions.salir */
.badge.bg-secondary,
.badge.bg-light,
.badge.text-bg-secondary,
.badge.text-bg-light,
.label.label-default,
.label.label-secondary {
    background: var(--surface-3) !important;
    color: #475569 !important;
    border-color: var(--border) !important;
}

.badge.bg-dark,
.badge.text-bg-dark {
    background: var(--text-2) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Mantener bg-* "fuertes" cuando NO son badge (ej. headers de modal con
   .bg-dark, kpi-row chips, etc): no sobreescribimos esas utilidades. */

/* ============ LIST GROUP ============ */
.list-group {
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xs);
}

.list-group-item {
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    background: var(--surface);
    color: var(--text);
    transition: background .15s ease;
}

.list-group-item:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary-strong);
    cursor: pointer;
}

.list-group-item:last-child {
    border-bottom: 0;
}

/* ============ DROPDOWN ============ */
.dropdown-menu {
    border: 0;
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    padding: 8px;
}

.dropdown-item {
    border-radius: var(--r-xs);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--c-primary-soft);
    color: var(--c-primary-strong);
}

/* ============ ANIMACIONES ============ */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated.fadeIn {
    animation: fadeInUp .35s ease-out;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   DETALLE TIPO "DOCUMENTO" (.form-factura .tg)
   Refresca las paginas de detalle que usan la tabla .tg con
   clases tg-* (generadas con tablesgenerator). Scopeado a
   .form-factura para no tocar ninguna otra tabla del sitio.
   Cubre detalleFactura.php y detalleNotaCredito.php — comparten
   exactamente la misma estructura.
   ============================================================ */

/* Tarjeta contenedora: mismo look que .dataTables_wrapper
   (blanco, redondeado, sombra media) en vez del recuadro
   semitransparente con sombra dura del tema viejo. */
.form-factura {
    width: 100%;
    background: var(--surface) !important;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md) !important;
    padding: 26px !important;
    margin-bottom: 16px;
}

/* El contenedor scroll-horizontal no debe recortar la sombra del banner */
.form-factura #contentTable,
.form-factura .table-responsive {
    overflow: visible;
}

/* Tabla base: limpia, sin bordes de celda heredados */
.form-factura .tg,
.form-factura table.tg.table {
    width: 100% !important;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
}

.form-factura .tg td,
.form-factura .tg th {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 9px 12px;
    font-size: clamp(12.5px, 0.95vw, 14px);
    font-weight: 500;
    color: var(--text-2);
    vertical-align: middle;
}

/* ---- Banner superior (logo + titulo) — tema light ---- */
.form-factura .tg th.headerFactura {
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 16px 22px !important;
    box-shadow: none;
}

.form-factura .headerFactura > h5 {
    color: var(--c-primary-strong);
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0;
}

.form-factura .headerFactura > h5 strong {
    color: var(--c-primary);
    opacity: 1;
    font-weight: 700;
}

/* Logo dentro del banner light: chip blanco para resaltar sobre el azul soft */
.form-factura .headerFactura > img {
    top: 50% !important;
    transform: translateY(-50%);
    background: #fff;
    padding: 6px 10px;
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
}

/* ---- Sub-encabezado de seccion (p.ej. "Movimientos que liquidan...") ---- */
.form-factura .tg td.tg-xxcc {
    background: var(--c-primary-soft) !important;
    color: var(--c-primary-strong) !important;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    font-weight: 700;
    border: 0 !important;
    border-radius: var(--r-sm);
    padding: 12px 16px !important;
}

/* ---- Etiquetas de campo (texto gris a la izquierda) ---- */
.form-factura .tg .tg-ly6r span {
    color: var(--text-muted) !important;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---- Valores ---- */
.form-factura .tg .tg-oagu {
    color: var(--text) !important;
    font-weight: 600;
}

/* ---- Encabezado de la tabla de lineas (Articulo, Cantidad, ...) ---- */
.form-factura .tg .tg-jao4,
.form-factura .tg .tg-85xu,
.form-factura .tg .tg-1vif {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-strong)) !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: clamp(10px, 0.7vw, 11.5px);
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .14) !important;
    padding: 11px 8px !important;
    white-space: nowrap;
}

.form-factura .tg .tg-jao4:first-child {
    border-top-left-radius: var(--r-sm);
    border-bottom-left-radius: var(--r-sm);
}

.form-factura .tg .tg-1vif:last-child {
    border-right: 0 !important;
    border-top-right-radius: var(--r-sm);
    border-bottom-right-radius: var(--r-sm);
}

/* Encabezado de la tabla de movimientos (tg-li6d como header de columna) */
.form-factura .tg .tg-li6d {
    color: var(--text-2);
}

/* ---- Links dentro del documento (Nota de Credito / Pago / detalles) ---- */
.form-factura .tg td a,
.form-factura #detailTitle {
    color: var(--c-primary) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.form-factura .tg td a:hover,
.form-factura #detailTitle:hover {
    color: var(--c-primary-strong) !important;
    text-decoration: underline;
}

.form-factura #detailTitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---- Pie con datos de la empresa ---- */
.form-factura .tg .td-footer-color {
    border: 0 !important;
    border-top: 1px solid var(--border-soft) !important;
    text-align: center !important;
    padding: 14px 12px 2px !important;
}

.form-factura .tg .td-footer-color span {
    color: var(--text-soft) !important;
    font-size: 12px;
}

/* ---- Tabla de lineas: alinear y dar aire a las 15 columnas ----
   Los importes ($0.00, $66,691.76, etc.) NO deben partirse en varias
   lineas; las celdas numericas van en una sola linea y se reduce el
   padding lateral para que quepan las columnas D1-D5 / MS/C. */
.form-factura .tg td.text-center,
.form-factura .tg td.text-right,
.form-factura .tg td.tg-oagu {
    white-space: nowrap;
}
.form-factura .tg td,
.form-factura .tg th {
    padding-left: 7px;
    padding-right: 7px;
}
/* La celda de Articulo y Descripcion si ajusta en varias lineas */
.form-factura .tg td.noFunction {
    white-space: normal;
    min-width: 170px;
}
/* Si la tabla no entra (pantallas chicas) se desplaza en horizontal
   en lugar de romper el contenido. */
.form-factura #contentTable,
.form-factura .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

/* ============ BADGE "Tema 2.4" (esquina superior derecha) ============ */
body::before {
    content: 'Tema v2.5';
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 99999;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-bright));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    letter-spacing: .08em;
    text-transform: none;
    box-shadow: var(--sh-sm);
    opacity: .9;
    pointer-events: none;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ============ Globito informativo (login): invita a sugerir mejoras ============ */
.info-bubble {
    position: relative;
    max-width: 420px;
    margin: 20px auto 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--c-accent-soft);
    border: 1px solid #FBD9B5;
    border-radius: var(--r-md);
    padding: 12px 16px;
    box-shadow: var(--sh-sm);
    color: #8a4408;
    font-size: 13.5px;
    line-height: 1.45;
    animation: infoBubbleIn .5s ease both;
}
/* Colita del globo apuntando hacia arriba (al formulario) */
.info-bubble::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 38px;
    width: 15px;
    height: 15px;
    background: var(--c-accent-soft);
    border-left: 1px solid #FBD9B5;
    border-top: 1px solid #FBD9B5;
    transform: rotate(45deg);
}
.info-bubble-icon {
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
}
.info-bubble p {
    margin: 0;
}
.info-bubble a {
    color: var(--c-accent);
    font-weight: 700;
    text-decoration: underline;
}
@keyframes infoBubbleIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 576px) {

    main,
    main.container,
    main.container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .form-signin,
    .form-register,
    form.animated {
        padding: 22px 18px;
    }

    .form-signin>h5,
    .form-register>h5,
    form h5.text-center.font-weight-bold {
        font-size: 22px;
    }
}