/* =========================================================================
   Encario — Brand theme override
   -------------------------------------------------------------------------
   El tema base (Atlantis) usa azul (#1572E8) como color "primary" en toda
   la interfaz. La identidad de Encario es VERDE (ver landing pública:
   --encario-primary #4ade80 / --encario-primary-strong #22c55e).

   Este fichero se carga DESPUÉS de atlantis.css y remapea el "primary"
   azul a verde de marca de forma global, en todas las plantillas.

   Paleta adaptada al panel (fondo claro), derivada del verde de marca:
     - base   #33C16F  rellenos (botones, badges, iconos, bg-primary)
     - strong #116B3A  texto/enlaces y hover  (AA sobre blanco)
     - bright #22c55e  brillo de degradados (verde de marca)
     - deep   #14532d  arranque de degradados
   ========================================================================= */

:root {
    --enc-green: #33C16F;
    --enc-green-strong: #116B3A;
    --enc-green-bright: #22c55e;
    --enc-green-deep: #14532d;
    --enc-green-soft: #e7f6ed;

    /* Sombras reutilizables (dos niveles) — usar en tarjetas/paneles de toda la web.
       sm: elevación sutil (tarjetas apiladas) · md: elevación media (hover/destacar). */
    --enc-shadow-sm: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    --enc-shadow-md: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

    /* Marca Encario (docs/brand): verdes emerald/forest + acentos. */
    --enc-forest-deep: #082B1C;
    --enc-amber: #F5B400;
    --enc-red: #EF4444;
}

/* ---- Tipografía de marca: Poppins (override sobre el tema) --------------- */
body, button, input, select, textarea, optgroup,
.btn, .form-control, .nav-link, .dropdown-menu, .dropdown-item,
.modal, .navbar, .sidebar, .card, .card-title, table, label,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Inter', 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ---- Navbar / sidebar de marca: VERDE PROFUNDO (#082B1C) en vez del azul del
   tema Atlantis. El texto/iconos siguen claros (legibles), y los logos oscuros se
   auto-invierten (js-logo-autocontrast). Cubre logo-header, barra superior y sidebar. */
.logo-header[data-background-color],
.main-header .navbar.navbar-header[data-background-color],
.sidebar[data-background-color] {
    background: var(--enc-forest-deep) !important;
    background-image: none !important;
}

/* ---- Enlaces y texto primary -------------------------------------------- */
a {
    color: var(--enc-green-strong);
}
a:hover,
a:focus {
    color: var(--enc-green);
}
.text-primary,
.text-primary a {
    color: var(--enc-green-strong) !important;
}
.text-primary:hover,
.text-primary a:hover {
    color: var(--enc-green) !important;
}

/* ---- Fondos sólidos y degradados primary -------------------------------- */
.bg-primary {
    background-color: var(--enc-green) !important;
}
.bg-primary2 {
    background-color: var(--enc-green-strong) !important;
}
.bg-primary-gradient {
    background: var(--enc-green) !important;
    background: -webkit-linear-gradient(legacy-direction(-45deg), var(--enc-green-deep), var(--enc-green-bright)) !important;
    background: linear-gradient(-45deg, var(--enc-green-deep), var(--enc-green-bright)) !important;
}

/* ---- Botón de acción de marca (primary) ---------------------------------
   Botón ANTRACITA (#333) en reposo → VERDE OSCURO de marca al hover, con sombra
   y leve elevación para que "tenga pinta de botón" y no cante. El verde base
   #33C16F se reserva para badges/iconos/chips activos, NO para el CTA. Se aplica
   también a .btn-success para que los CTA verdes sueltos no salgan chillones. */
.btn-primary,
.btn-success {
    background: #333 !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18) !important;
    transition: box-shadow .15s ease, transform .15s ease, background .15s ease !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background: #14532d !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(20, 83, 45, .32) !important;
    transform: translateY(-1px) !important;
}
.btn-primary:active,
.btn-success:active {
    background: #0f3d21 !important;
    color: #fff !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 5px rgba(20, 83, 45, .28) !important;
}
.btn-primary:disabled,
.btn-primary.disabled,
.btn-success:disabled,
.btn-success.disabled {
    background: #9aa0a6 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}
/* ---- Botones "outline" → SÓLIDOS legibles (REGLA DE MARCA: NUNCA OUTLINE) --
   Decisión de UI de Encario: los botones outline (fondo transparente + borde
   fino + texto de color) tienen mal contraste sobre fondos con contenido y NO
   se leen bien. Aquí se neutralizan EN TODA LA WEB de forma central: cualquier
   .btn-outline-* se pinta como botón SÓLIDO con relleno suave (estado normal)
   y relleno fuerte de color en hover/activo. Esto, además, da a los grupos de
   filtro (chips/toggles) que usan .active un estado activo/inactivo claramente
   distinguible.
   👉 En plantillas NUEVAS no uses outline: usa .btn-primary/.btn-secondary o el
      componente .enc-toggle / .enc-seg (definidos más abajo).
   📄 Spec: docs/specs/11-ui-buttons.md
   ------------------------------------------------------------------------- */
/* Base: TODOS los outline se pintan como un botón NEUTRO (tipo btn-light). El color
   semántico va SOLO en el texto/icono, nunca como losa de fondo — así el único botón
   con relleno de color es el CTA sólido (btn-primary/success = antracita→verde).
   Los segmentados (.enc-choice-group) marcan su estado :checked con reglas propias de
   mayor especificidad, así que siguen coloreándose al seleccionar. */
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-danger,
.btn-outline-info, .btn-outline-warning, .btn-outline-dark, .btn-outline-light {
    background: #eef1f6 !important;
    border-color: #dde3ec !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-outline-info:hover, .btn-outline-info:focus,
.btn-outline-warning:hover, .btn-outline-warning:focus,
.btn-outline-dark:hover, .btn-outline-dark:focus,
.btn-outline-light:hover, .btn-outline-light:focus {
    background: #e2e7ef !important;
    border-color: #d2dae4 !important;
}
/* Color del texto/icono por variante (semántico, apagado) */
.btn-outline-primary, .btn-outline-success { color: var(--enc-green-strong) !important; }
.btn-outline-secondary, .btn-outline-light  { color: #44525f !important; }
.btn-outline-danger  { color: #c0392b !important; }
.btn-outline-info    { color: #1559b8 !important; }
.btn-outline-warning { color: #8a5d00 !important; }
.btn-outline-dark    { color: #2a2f3a !important; }
/* Estado .active (toggle con estado propio) → relleno sólido del color semántico */
.btn-outline-primary.active, .btn-outline-success.active { color:#fff !important; background: var(--enc-green) !important; border-color: var(--enc-green) !important; }
.btn-outline-secondary.active { color:#fff !important; background:#5a6b7b !important; border-color:#5a6b7b !important; }
.btn-outline-danger.active   { color:#fff !important; background:#ef4444 !important; border-color:#ef4444 !important; }
.btn-outline-info.active     { color:#fff !important; background:#1572e8 !important; border-color:#1572e8 !important; }
.btn-outline-warning.active  { color:#fff !important; background:#f59e0b !important; border-color:#f59e0b !important; }
.btn-outline-dark.active     { color:#fff !important; background:#343a40 !important; border-color:#343a40 !important; }

/* ---- Chip de TIPO/clasificación -----------------------------------------
   Para tablas con DOS ejes (p. ej. Tipo de documento + Estado): el "estado"
   se pinta como pastilla sólida de color (.badge) y el "tipo" con este chip
   NEUTRO + icono de color. Así la forma distingue el eje de un vistazo y no se
   confunde un Tipo con un Estado aunque compartan color. El icono lleva su
   color por estilo inline (style="color:#..."). */
.doc-type {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .76rem; font-weight: 600; color: #3c4a43;
    background: #eef1f5; border-radius: 6px; padding: .16rem .5rem; line-height: 1.3;
    white-space: nowrap;
}
.doc-type i { font-size: .82rem; }

/* ---- KPIs de cabecera reutilizables (listados/analíticas) ----------------
   Tarjetas de resumen "a mano sin molestar". Rejilla que se adapta al nº de
   tarjetas. Modificadores de color semántico en el número. Componente global:
   cualquier módulo usa el marcado, sin repetir CSS por página. */
.enc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.enc-kpi { background: #fff; border: 1px solid #eef0f5; border-radius: 12px; padding: .75rem .95rem; text-decoration: none; display: block; color: inherit; }
a.enc-kpi:hover { border-color: #cfe0d6; box-shadow: 0 2px 8px rgba(20,60,40,.06); text-decoration: none; }
.enc-kpi__num { font-size: 1.5rem; font-weight: 800; line-height: 1.05; color: #1f2a37; font-variant-numeric: tabular-nums; }
.enc-kpi__lbl { font-size: .76rem; color: #7a8597; font-weight: 600; margin-top: .2rem; }
.enc-kpi--verde .enc-kpi__num { color: #116B3A; }
.enc-kpi--ambar .enc-kpi__num { color: #b45309; }
.enc-kpi--rojo  .enc-kpi__num { color: #b91c1c; }
.enc-kpi--azul  .enc-kpi__num { color: #1559b8; }

/* ---- Badge de ESTADO suave (fondo pálido + texto del color) ------------- */
/* Más legible y menos chillón que las pastillas sólidas de Bootstrap. Sigue siendo
   el "eje ESTADO" (fondo tintado del color) frente al TIPO (.doc-type, fondo neutro
   + icono de color). Uso: <span class="st-badge st-green"><i…></i>Etiqueta</span>. */
.st-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; line-height: 1; padding: .35rem .58rem; border-radius: 7px; white-space: nowrap; letter-spacing: .01em; }
.st-badge > i { font-size: .85em; }
.st-green  { background: #e4f6ec; color: #157f3c; }
.st-amber  { background: #fdf0da; color: #b45309; }
.st-blue   { background: #e6f0fd; color: #1559b8; }
.st-indigo { background: #eae7fb; color: #5b47c9; }
.st-slate  { background: #e8edf2; color: #3f4b5b; }
.st-gray   { background: #eef1f5; color: #6a7686; }
.st-red    { background: #fdeaea; color: #b91c1c; }

/* ---- Banda de KPIs de dashboard (compacta, densa, auto-fit) ------------ */
/* Uso: <div class="enc-dash-kpis"> …tarjetas .enc-dash-kpi… </div>. Empaqueta el
   máximo de KPIs por fila y reflota; icono con color por variante (--verde/rojo/…). */
.enc-dash-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.enc-dash-kpi { display: flex; align-items: center; gap: .65rem; background: #fff; border: 1px solid #eef0f5; border-radius: 12px; padding: .65rem .8rem; text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s; }
a.enc-dash-kpi:hover { border-color: #cfe0d6; box-shadow: 0 2px 10px rgba(20,60,40,.08); transform: translateY(-1px); text-decoration: none; color: inherit; }
.enc-dash-kpi__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: 0 0 auto; }
.enc-dash-kpi__num { font-size: 1.4rem; font-weight: 800; line-height: 1.02; color: #1f2a37; font-variant-numeric: tabular-nums; white-space: nowrap; }
.enc-dash-kpi__lbl { font-size: .72rem; color: #7a8597; font-weight: 600; margin-top: .1rem; }
.enc-dash-kpi--verde  .enc-dash-kpi__ic { background: #e7f6ed; color: #116B3A; }
.enc-dash-kpi--rojo   .enc-dash-kpi__ic { background: #fdeaea; color: #b91c1c; }
.enc-dash-kpi--azul   .enc-dash-kpi__ic { background: #e7f0fd; color: #1559b8; }
.enc-dash-kpi--ambar  .enc-dash-kpi__ic { background: #fef3e2; color: #b45309; }
.enc-dash-kpi--gris   .enc-dash-kpi__ic { background: #eef1f5; color: #5a6577; }
.enc-dash-kpi--morado .enc-dash-kpi__ic { background: #f0e9fb; color: #6d28d9; }

/* ---- Submenú de secciones en formularios largos (pestañas) ------------- */
/* Uso: <ul class="nav enc-formtabs">…nav-link data-toggle="tab" href="#pane"…</ul>
   + <div class="tab-content"><div class="tab-pane fade [show active]" id="pane">…
   El cambio de pestaña lo gestiona un handler global en script.js (el data-api de
   Bootstrap no dispara de forma fiable en modales cargados por AJAX). */
.enc-formtabs { flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid #eef1f5; padding-bottom: .7rem; margin-bottom: 1rem; }
.enc-formtabs .nav-link { border-radius: 999px; font-weight: 600; font-size: .85rem; color: #5a6577; background: #eef1f6; padding: .38rem .95rem; transition: background .15s, color .15s; }
.enc-formtabs .nav-link:hover { background: #e2e7ef; color: #3c4a43; }
.enc-formtabs .nav-link.active { background: var(--enc-green, #2e7d46); color: #fff; }

/* ---- Estado vacío (empty state) ---------------------------------------- */
/* Uso: <div class="enc-empty"><i class="fas fa-X"></i><p>Mensaje</p>[CTA]</div>
   Dentro de tablas: <tr><td colspan="100%"><div class="enc-empty">…</div></td></tr> */
.enc-empty { text-align: center; padding: 2.5rem 1rem; color: #8a94a6; }
.enc-empty > i { display: block; font-size: 2.4rem; color: #cdd5e1; margin-bottom: .6rem; }
.enc-empty p { margin-bottom: .9rem; }
.enc-empty__title { font-weight: 600; color: #5a6577; }

/* ---- Badges primary ----------------------------------------------------- */
.badge-primary {
    background: var(--enc-green) !important;
}

/* ---- Iconos de tarjetas de estadística ---------------------------------- */
.card-stats .icon-big.icon-primary {
    background: var(--enc-green);
}

/* ---- Acentos de formulario (foco, checkbox/radio marcados) -------------- */
.form-control:focus,
.custom-select:focus {
    border-color: var(--enc-green) !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox.checkbox-primary .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio.radio-primary .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--enc-green) !important;
    border-color: var(--enc-green) !important;
}

/* ---- Select2: selección con tema por defecto ---------------------------- */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--enc-green) !important;
}

/* ---- Sidebar: indicador de elemento activo / acentos nav-primary -------- */
.sidebar .nav > .nav-item.active > a:before,
.sidebar[data-background-color="white"] .nav > .nav-item.active > a:before,
.sidebar .nav > .nav-item.active:hover > a:before,
.sidebar .nav.nav-primary > .nav-item.active a:before {
    background: var(--enc-green) !important;
}
.sidebar .nav.nav-primary > .nav-item a:hover i,
.sidebar .nav.nav-primary > .nav-item a:focus i,
.sidebar .nav.nav-primary > .nav-item a[data-toggle=collapse][aria-expanded=true] i,
.sidebar .nav.nav-primary > .nav-item.active a i {
    color: var(--enc-green) !important;
}

/* ---- Pestañas / nav-pills primary --------------------------------------- */
.nav-pills.nav-primary .nav-link.active {
    background: var(--enc-green) !important;
    border-color: var(--enc-green) !important;
}
.navbar-line .navbar-nav.page-navigation.page-navigation-primary .nav-item.active::after {
    background: var(--enc-green) !important;
}

/* ---- Bordes utilitarios primary ----------------------------------------- */
.table-bordered-bd-primary td,
.table-bordered-bd-primary th {
    border-color: var(--enc-green) !important;
}
.border-primary {
    border-color: var(--enc-green) !important;
}

/* =========================================================================
   Hero de cabecera de página (reutilizable) — estilo Encario
   -------------------------------------------------------------------------
   Banner verde de marca con placa de logo de empresa + título + subtítulo.
   Lo usa dropzone_admin/_management_header cuando se le pasa `title`.
   ========================================================================= */
.enc-hero {
    position: relative; overflow: hidden;
    border-radius: 18px; color: #fff;
    background: linear-gradient(-45deg, #14532d, #22c55e);
    padding: 1.4rem 1.6rem;
    box-shadow: 0 14px 32px rgba(20, 83, 45, .22);
    margin-bottom: 1.1rem;
}
.enc-hero::after {
    content: ''; position: absolute; right: -60px; top: -70px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
.enc-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
.enc-hero__left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.enc-hero__logo {
    width: 66px; height: 66px; flex: none; border-radius: 16px; background: #fff;
    display: flex; align-items: center; justify-content: center; padding: 9px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.enc-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.enc-hero__logo i { font-size: 1.6rem; color: #116B3A; }
.enc-hero__eyebrow { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .85; margin-bottom: .15rem; }
.enc-hero h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .15rem; line-height: 1.1; }
.enc-hero p { margin: 0; opacity: .9; font-size: .88rem; max-width: 560px; }

/* =========================================================================
   Fondo oscuro de marca (páginas de acceso: login/reset/2FA/trust-device…)
   -------------------------------------------------------------------------
   Verde-negro de la landing pública, en degradado sutil. Se usa como
   `bg-encario-dark-gradient` desde baseSimple.html.twig (colorPage por defecto).
   ========================================================================= */
.bg-encario-dark-gradient {
    background: #101412 !important;
    background: linear-gradient(135deg, #0d1310 0%, #16231b 55%, #0b110e 100%) !important;
}

/* =========================================================================
   FontAwesome 5.15.4 — forzar la fuente nueva
   -------------------------------------------------------------------------
   El tema (Atlantis) registra FA 5.2.0 con familias propias ("Font Awesome 5
   Solid/Regular") que carecen de iconos como fa-tractor. Cargamos FA 5.15.4
   (all.css) y aquí forzamos que .fas/.far/.fab usen su familia, sin depender
   del orden de carga (WebFont inyecta el CSS del tema de forma asíncrona).
   Los códigos unicode son idénticos en FA5, así que los iconos existentes no
   cambian; solo se añaden los nuevos.
   ========================================================================= */
.fa,
.fas {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}
.far {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}
.fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* =========================================================================
   Tarjetas de estadística (KPI) — iconos neutros
   -------------------------------------------------------------------------
   El tema colorea cada burbuja de icono según semántica (primary/info/
   success/warning/danger), lo que llena el dashboard de colores. Se unifica
   a un gris pizarra sobrio; el dato y la etiqueta siguen comunicando.
   ========================================================================= */
.card-stats .icon-big.icon-black,
.card-stats .icon-big.icon-primary,
.card-stats .icon-big.icon-secondary,
.card-stats .icon-big.icon-success,
.card-stats .icon-big.icon-info,
.card-stats .icon-big.icon-warning,
.card-stats .icon-big.icon-danger {
    background: #475569 !important;
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
}
.card-stats .icon-big.icon-black i,
.card-stats .icon-big.icon-primary i,
.card-stats .icon-big.icon-secondary i,
.card-stats .icon-big.icon-success i,
.card-stats .icon-big.icon-info i,
.card-stats .icon-big.icon-warning i,
.card-stats .icon-big.icon-danger i {
    color: #ffffff !important;
}

/* =========================================================================
   Cabecera del Panel de control
   ========================================================================= */
/* Más aire alrededor del título; el degradado se hace algo más alto para que
   las tarjetas (mt--5) floten con holgura sobre él. */
.enc-dash-header .page-inner {
    padding-top: 2.25rem;
    padding-bottom: 4.25rem;
}
.enc-dash-header h2 {
    font-size: 1.9rem;
    letter-spacing: .2px;
}

/* Placa blanca con el logo de la empresa (destaca sobre el verde). */
.enc-dash-logo {
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20);
}
.enc-dash-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Fallback cuando no hay logo de empresa: icono / iniciales sobre placa blanca. */
.enc-dash-header__icon {
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    color: var(--enc-green-strong);
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20);
}
.enc-dash-header__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.enc-dash-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    white-space: nowrap;
}

/* ============================================================
   Switches estilo Kaiadmin (form-switch sobre Bootstrap 4).
   Atlantis es BS4 y no estila .form-switch; lo replicamos aquí.
   ============================================================ */
.form-check.form-switch {
    display: flex;
    align-items: center;
    padding-left: 0;
    min-height: auto;
    margin-bottom: 0;
}
.form-switch .form-check-input {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 40px;
    height: 22px;
    border-radius: 22px;
    background: #e3e6ed;
    border: none;
    position: relative;
    margin: 0 8px 0 0;
    transition: background .2s ease;
    flex-shrink: 0;
}
.form-switch .form-check-input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left .2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.form-switch .form-check-input:checked {
    background: #2b7cff;
}
.form-switch .form-check-input:checked::before {
    left: 21px;
}
.form-switch .form-check-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.form-switch .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 124, 255, .2);
}
.form-switch .form-check-label {
    cursor: pointer;
    margin: 0;
    user-select: none;
}

/* =========================================================================
   Componentes de selección/filtro — SIEMPRE estado sólido activo/inactivo
   -------------------------------------------------------------------------
   Usar estos en vez de botones outline para chips de filtro y selectores de
   vista. Inactivo = relleno gris suave legible; activo = relleno de color.
   📄 Spec: docs/specs/11-ui-buttons.md
   ========================================================================= */

/* Chips de filtro (toggles). El estado activo se marca con la clase .active. */
.enc-toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; line-height: 1.2;
    border: 1px solid transparent; background: #eef1f6; color: #44525f;
    cursor: pointer; user-select: none; text-decoration: none; transition: all .15s ease;
}
.enc-toggle:hover { background: #e2e7ef; color: #2a323c; text-decoration: none; }
.enc-toggle.active { background: var(--enc-green); color: #fff; box-shadow: 0 2px 6px rgba(22,163,74,.28); }
.enc-toggle.active:hover { background: var(--enc-green-strong); color: #fff; }
.enc-toggle--blue.active { background: #1572e8; box-shadow: 0 2px 6px rgba(21,114,232,.28); }
.enc-toggle--blue.active:hover { background: #115fce; }
/* Ámbar: trámites/gestiones pendientes (p. ej. cambio de titularidad de las vendidas). */
.enc-toggle--amber.active { background: #b45309; box-shadow: 0 2px 6px rgba(180,83,9,.28); }
.enc-toggle--amber.active:hover { background: #92400e; }
.enc-toggle .badge { background: #dde3ec; color: #44525f; }
.enc-toggle.active .badge { background: rgba(255,255,255,.28); color: #fff; }

/* Selector de vista segmentado (p. ej. Grupos / Listado). */
.enc-seg { display: inline-flex; background: #eef1f6; border-radius: 10px; padding: 3px; gap: 2px; }
.enc-seg__btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .95rem; border-radius: 8px; border: 0; background: transparent;
    font-size: .82rem; font-weight: 600; color: #5a6b7b; white-space: nowrap;
    cursor: pointer; text-decoration: none; transition: all .15s ease;
}
.enc-seg__btn:hover { color: var(--enc-green-strong); text-decoration: none; }
.enc-seg__btn.active { background: var(--enc-green); color: #fff; box-shadow: 0 2px 6px rgba(22,163,74,.30); }
.enc-seg__btn.active:hover { color: #fff; }

/* =========================================================================
   Layout responsive reutilizable — toolbars y menús de módulo
   -------------------------------------------------------------------------
   Base común para listados y cabeceras con buscador/filtros/acciones. No se
   aplica sola a plantillas existentes: se adopta módulo a módulo para evitar
   regresiones de escritorio.
   📄 Spec: docs/specs/13-responsive-ui.md
   ========================================================================= */
.enc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .65rem;
    min-width: 0;
}
.enc-toolbar__main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    min-width: 0;
    flex: 1 1 280px;
}
.enc-toolbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
    flex: 0 1 auto;
}
.enc-toolbar__search {
    min-width: 220px;
    max-width: 360px;
    flex: 1 1 260px;
}
.enc-control-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
}
.enc-control-row > * {
    min-width: 0;
}

/* Logo oscuro sobre fondo oscuro (navbar): se invierte a claro. La clase la pone
   automáticamente enc-logo-contrast (JS) solo cuando detecta que el logo es oscuro,
   y SOLO en los <img class="js-logo-autocontrast"> del navbar (no en fondos claros). */
.enc-logo-inverted { filter: invert(1) brightness(1.06) contrast(1.02); }

/* El estilo del menú rápido (.enc-qmenu) vive INLINE en
   templates/components/_enc_quick_menu.html.twig, para que viaje siempre con el
   markup y no dependa de la caché de este fichero externo. No lo dupliques aquí. */

/* ---- Drawer lateral reutilizable (se solapa sobre el contenido) ---------
   Panel que entra desde un lado por encima del contenido, con overlay. Libera
   el espacio que ocuparía una columna fija. Uso: .enc-drawer.enc-drawer--left
   + .enc-drawer-overlay; alternar la clase .open por JS. */
.enc-drawer-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1045;
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.enc-drawer-overlay.open { opacity: 1; visibility: visible; }
.enc-drawer {
    position: fixed; top: 0; bottom: 0; width: 320px; max-width: 86vw; background: #fff;
    z-index: 1046; box-shadow: 0 0 30px rgba(15,23,42,.25); display: flex; flex-direction: column;
    transition: transform .22s ease;
}
.enc-drawer--left  { left: 0;  transform: translateX(-100%); }
.enc-drawer--left.open  { transform: translateX(0); }
.enc-drawer--right { right: 0; transform: translateX(100%); }
.enc-drawer--right.open { transform: translateX(0); }
.enc-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1rem; border-bottom: 1px solid #eef0f5; flex: none;
}
.enc-drawer__close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: #8a93a6; cursor: pointer; }
.enc-drawer__close:hover { color: #2a2f5b; }
.enc-drawer__body { padding: .6rem .75rem; overflow-y: auto; flex: 1 1 auto; }

/* ---- Growl notifications (Bootstrap Notify) — estilo de marca ------------ */
.enc-notify { border: 0; border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.18); padding: .8rem 2.4rem .8rem 1rem; }
.enc-notify [data-notify="title"] { font-weight: 700; }
.enc-notify .close { opacity: .7; text-shadow: none; }

/* =========================================================================
   Checklist de documentación (ficha de maquinaria) — subtabs Compra/Venta
   con contadores: 0 = apagado/claro, presente = oscuro/negrita.
   ========================================================================= */
.doc-filterbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* Contador dentro de las pastillas de filtro */
.doc-pill-count { display: inline-block; min-width: 20px; text-align: center; margin-left: .35rem;
    font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; }
.doc-pill-count.zero { background: #e7eaf0; color: #aeb6c2; }
.doc-pill-count.has { background: #1f2a37; color: #fff; }
.doc-pill-count.complete { background: #33C16F; color: #fff; }
.enc-toggle.active .doc-pill-count { background: rgba(255,255,255,.28); color: #fff; }

/* Secciones de grupo */
.doc-section { margin-bottom: 1.3rem; }
.doc-section__head { display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #eef0f5; padding-bottom: .35rem; margin-bottom: .5rem; }
.doc-section__title { font-weight: 700; color: #2a2f5b; font-size: .95rem; }
.doc-grp-count { font-size: .76rem; font-weight: 700; padding: .12rem .6rem; border-radius: 999px; }
.doc-grp-count.is-empty { background: #f0f2f7; color: #aeb6c2; }
.doc-grp-count.is-some { background: #1f2a37; color: #fff; }
.doc-grp-count.is-complete { background: #33C16F; color: #fff; }

/* Tipos (tarjetas de checklist) */
.doc-tipo { padding: .65rem .85rem; background: #fff; border: 1px solid #eef0f5; border-radius: 10px;
    box-shadow: var(--enc-shadow-sm); margin-bottom: .6rem; transition: box-shadow .15s ease; }
.doc-tipo:hover { box-shadow: var(--enc-shadow-md); }
.doc-tipo:last-child { margin-bottom: 0; }
/* El botón de subir queda SIEMPRE pegado a la derecha (posición fija, no baila con el texto). */
.doc-tipo__head { display: flex; align-items: center; gap: .5rem; }
.doc-tipo__head .ficha-form { margin-left: auto; }
.doc-status { font-size: 1rem; line-height: 1; }
.doc-status.ok { color: #33C16F; }
.doc-status.missing { color: #cdd5e0; }
.doc-tipo__name { color: #8a93a6; font-size: .9rem; }
.doc-tipo__name.present { color: #1f2a37; font-weight: 700; }
.doc-count-badge { margin-left: auto; min-width: 22px; text-align: center; font-size: .74rem;
    font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.doc-count-badge.zero { background: #f0f2f7; color: #aeb6c2; }
.doc-count-badge.has { background: #1f2a37; color: #fff; }
.doc-missing { color: #aeb6c2; font-size: .82rem; padding: .2rem 0 .1rem 1.65rem; }

/* Filas de documento — TODO en una línea: nombre (enlace) + fecha | visibilidad
   (iconos) + mover + borrar. En pantallas estrechas se permite envolver. */
.doc-item { display: flex; align-items: center; gap: .6rem;
    flex-wrap: nowrap; padding: .35rem .2rem .35rem 1.65rem; }
.doc-item__main { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.doc-item__name { font-weight: 600; color: #2a323c; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
a.doc-item__name:hover { color: var(--enc-green-strong); text-decoration: none; }
.doc-item__controls { display: flex; align-items: center; gap: .35rem; flex: none; margin-left: auto; }
.doc-move { width: auto; max-width: 170px; cursor: pointer; }

/* =========================================================================
   Resultados del buscador de máquina/material (líneas de compra/recepción/venta)
   Item limpio de 2 líneas: etiqueta a la izquierda + nombre + subtítulo con
   los datos (tipo · #código · matrícula · bastidor · año). Global para reusar
   en purchase_invoice / purchase_reception / sales_document.
   ========================================================================= */
.linea-resultados { border: 1px solid #e3e8ef; border-radius: 8px; box-shadow: 0 8px 22px rgba(30,41,59,.14); padding: .2rem; max-height: 260px; }
.linea-resultados .linea-res-item { border: 0; border-radius: 6px; padding: .4rem .55rem; }
.linea-resultados .linea-res-item:hover { background: #f2f6f9; }
.linea-res-top { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.linea-res-name { font-weight: 600; color: #2a323c; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linea-res-sub { font-size: .74rem; color: #8a93a6; margin-top: .05rem; padding-left: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linea-res-tag { flex: none; display: inline-flex; align-items: center; gap: .25rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: .1rem .42rem; border-radius: 5px; }
.linea-res-tag--maq { background: #e7f6ed; color: #116B3A; }
.linea-res-tag--mat { background: #eef1f6; color: #5a6b7b; }
@media (max-width: 767.98px) {
    .doc-item { flex-wrap: wrap; }
    .doc-item__controls { margin-left: 1.05rem; }
}

/* Visibilidad de un documento como grupo de ICONOS: todos gris salvo el estado
   actual, que va en su color (pública verde / con PIN ámbar / privada gris oscuro). */
.doc-vis { display: inline-flex; gap: 2px; }
.doc-vis__btn { border: 0; background: transparent; color: #c3cbd6; width: 27px; height: 27px;
    border-radius: 7px; font-size: .85rem; line-height: 1; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease; }
.doc-vis__btn:hover { background: #f0f2f7; color: #5a6b7b; }
.doc-vis__btn.act-publico { color: #33C16F; background: #e7f6ed; }
.doc-vis__btn.act-pin { color: #b45309; background: #fdf0dc; }
.doc-vis__btn.act-privado { color: #3f4a58; background: #e8ebf1; }

/* Botón-icono neutro compacto (subir/borrar en filas de documento) */
.doc-ibtn { border: 1px solid #e3e6ec; background: #fff; color: #5a6b7b; width: 27px; height: 27px;
    border-radius: 7px; font-size: .8rem; line-height: 1; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease; }
.doc-ibtn:hover { background: #f0f2f7; color: #2a323c; }
.doc-ibtn--danger:hover { background: #fdecec; border-color: #f5c2c7; color: #dc3545; }

/* =========================================================================
   Tablas de datos → TARJETAS apiladas en móvil (toda la web)
   -------------------------------------------------------------------------
   Por debajo de 768px, cualquier tabla marcada .enc-cards (lo hace
   automáticamente public/js/enc-responsive-tables.js leyendo las cabeceras) se
   reordena como tarjetas: cada fila = una tarjeta, cada celda muestra su
   etiqueta de columna (data-label) a la izquierda y el valor a la derecha. Así
   no hay scroll horizontal ni se pierde información en móvil/tablet pequeña.
   Opt-out: añade  data-no-cards  a la <table>.
   📄 Spec: docs/specs/11-ui-buttons.md
   ========================================================================= */
@media (max-width: 767.98px) {
    table.enc-cards { border: 0; }
    /* Cabecera oculta accesiblemente (las etiquetas van en cada celda) */
    table.enc-cards thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    table.enc-cards, table.enc-cards tbody { display: block; width: 100%; }
    table.enc-cards tbody tr {
        display: block; margin: 0 0 .75rem; padding: .3rem .25rem;
        border: 1px solid #e6eaf0; border-radius: 12px; background: #fff;
        box-shadow: 0 1px 4px rgba(30,41,59,.07);
    }
    /* Anula el "zebra" de Bootstrap dentro de las tarjetas */
    table.enc-cards.table-striped tbody tr:nth-of-type(odd) { background-color: #fff; }
    table.enc-cards tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        width: auto; text-align: right; border: 0; padding: .45rem .85rem;
        white-space: normal; word-break: break-word;
    }
    table.enc-cards tbody td + td { border-top: 1px solid #f1f3f7; }
    table.enc-cards tbody td::before {
        content: attr(data-label); flex: 0 0 40%; text-align: left;
        font-weight: 600; font-size: .78rem; color: #6b7683;
    }
    /* Celdas sin etiqueta (foto, checkbox de selección, etc.): centradas, sin label */
    table.enc-cards tbody td:not([data-label])::before { content: ""; flex: 0; }
    table.enc-cards tbody td:not([data-label]) { justify-content: center; }
    /* Fila "sin resultados" (colspan) */
    table.enc-cards tbody td[colspan] { justify-content: center; }
    table.enc-cards tbody td[colspan]::before { content: ""; flex: 0; }
}


/* =========================================================================
   Responsive — ajustes para móvil/tablet de los componentes de marca
   ========================================================================= */
@media (max-width: 575px) {
    /* Hero de cabecera de página (internas) */
    .enc-hero { padding: 1.1rem 1.1rem; border-radius: 14px; }
    .enc-hero__logo { width: 56px; height: 56px; border-radius: 13px; }
    .enc-hero h2 { font-size: 1.25rem; }
    .enc-hero p { font-size: .82rem; }
    .enc-hero__left { gap: .75rem; }

    /* Hero del dashboard */
    .enc-dash-header .page-inner { padding-top: 1.5rem; padding-bottom: 3.5rem; }
    .enc-dash-header h2 { font-size: 1.45rem; }
    .enc-dash-logo, .enc-dash-header__icon { width: 58px; height: 58px; }
}

/* En móvil, las tablas anchas del panel se desplazan en horizontal en vez de
   romper el layout (refuerzo por si alguna no está envuelta en .table-responsive). */
@media (max-width: 767px) {
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* =========================================================================
   Ergonomía táctil (móvil/tablet) — toda la web
   -------------------------------------------------------------------------
   Dos correcciones de UX móvil estándar y seguras (solo afectan a ≤768px):
   1) Inputs a 16px → evita el ZOOM automático de iOS Safari al enfocar un
      campo (ocurre con cualquier input < 16px). Mejora notable de UX.
   2) Botones pequeños (.btn-sm) con algo más de altura → objetivos táctiles
      más cómodos (~40px) sin tocar el display (no rompe .btn-block ni grupos).
   ========================================================================= */
@media (max-width: 768px) {
    .form-control,
    .form-control-sm,
    .custom-select,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }
    .btn-sm,
    .btn-group-sm > .btn {
        padding-top: .45rem;
        padding-bottom: .45rem;
    }
    .btn-xs,
    .ajax-actions a,
    .doc-ibtn,
    .doc-vis__btn {
        min-width: 38px;
        min-height: 38px;
    }
    /* Botones de solo icono redondos: que no queden demasiado pequeños al tacto */
    .btn-round.btn-sm { min-width: 38px; }

    .enc-toolbar {
        align-items: stretch;
    }
    .enc-toolbar__main,
    .enc-toolbar__actions,
    .enc-control-row {
        width: 100%;
    }
    .enc-toolbar__actions {
        justify-content: flex-start;
    }
    .enc-toolbar__search,
    .enc-toolbar .form-control,
    .enc-control-row .form-control,
    .enc-control-row .select2-container {
        max-width: none;
        width: 100% !important;
    }

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-xxl {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        margin: .5rem auto !important;
    }
    .modal-dialog-centered {
        min-height: calc(100% - 1rem);
    }
    .modal-content {
        max-height: calc(100vh - 1rem);
        background: #fff; /* en móvil el fondo se veía transparente (tema Atlantis) */
    }
    .modal-body {
        overflow-y: auto;
        background: #fff;
    }
    .enc-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .enc-sidepanel .modal-dialog {
        left: 0;
        right: 0;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .enc-sidepanel .modal-content {
        height: 100vh;
        max-height: 100vh;
    }
}

/* ---- Cabecera de modales de formulario: verde muy oscuro, alto contraste --- */
/* Los formularios CRUD abren en modal (convención del proyecto). La cabecera va
   en verde profundo con título y acciones en blanco, para separarla nítidamente
   del cuerpo. Anula los gradientes decorativos previos (.fondoModificar/…). */
.modal-header {
    background-color: var(--enc-green-deep, #14532d) !important;
    background-image: none !important;
    border-bottom: 0;
    color: #fff;
}
.modal-header .modal-title { color: #fff; font-weight: 700; }
.modal-header .modal-title i { color: #fff; }
.modal-header .close { color: #fff; opacity: .8; text-shadow: none; }
.modal-header .close:hover,
.modal-header .close:focus { color: #fff; opacity: 1; }

/* ---- Carga AJAX suave y global (usada por cargarAjax en public/js/script.js) ----
   Antes cada refresco de listado/tabla o apertura de formulario AJAX pintaba un
   overlay blanco opaco con "Cargando…" que hacía que la actualización pareciera una
   recarga completa de página. Ahora el contenido actual solo se atenúa levemente y
   aparece una barra de progreso fina en la parte superior del contenedor. Se aplica
   a TODA la web (Ventas, Compras, Terceros, CRM, Contabilidad, modales…). */
.enc-ajax-loading { position: relative; }
.enc-ajax-loading > *:not(.enc-ajax-bar) {
    opacity: .5;
    transition: opacity .15s ease;
    pointer-events: none;
}
.enc-ajax-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1055;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(22, 163, 74, .14);
    pointer-events: none;
}
.enc-ajax-bar::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 35%;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(22,163,74,0), var(--enc-green, #33C16F), rgba(22,163,74,0));
    animation: enc-ajax-bar-slide 1.05s ease-in-out infinite;
}
@keyframes enc-ajax-bar-slide {
    0%   { left: -35%; }
    100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .enc-ajax-bar::before { animation-duration: 2.4s; }
    .enc-ajax-loading > *:not(.enc-ajax-bar) { transition: none; }
}

/* =========================================================================
   Overlay de cambio de empresa: loader a pantalla completa que bloquea la UI
   mientras se conmuta de dropzone y se recarga la página. Se inyecta por JS
   (switchDropzone en base.html.twig) al hacer clic, para feedback inmediato.
   ========================================================================= */
.enc-switch-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease;
}
.enc-switch-overlay.show { opacity: 1; visibility: visible; }
.enc-switch-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 230px;
    padding: 1.7rem 2rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .35);
}
.enc-switch-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid #e2e8f0;
    border-top-color: var(--enc-green, #33C16F);
    animation: enc-spin .8s linear infinite;
}
.enc-switch-text { font-weight: 700; color: #2a2f5b; font-size: .98rem; }
.enc-switch-sub  { margin-top: -.5rem; font-size: .8rem; color: #8a93a6; }
@keyframes enc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .enc-switch-spinner { animation-duration: 2.4s; }
    .enc-switch-overlay { transition: none; }
}

/* ---- Badge de "Serie" (línea de negocio S1/S2…) --------------------------
   Cuadradito con el color del sector y su código. Vive aquí (global) porque lo
   usan los listados de Ventas/Compras y también la ficha lateral de tercero,
   que se abre desde varias pantallas. El color va inline (es dato del sector). */
.enc-sbadge { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:26px;
    padding:0 .3rem; border-radius:6px; font-weight:800; font-size:.72rem; color:#fff; letter-spacing:.02em; line-height:1; }
.enc-sbadge--sm { min-width:26px; height:20px; font-size:.66rem; }
.enc-sbadge--empty { background:#eef1f5; color:#98a2b3; font-weight:700; }

/* =========================================================================
   Panel lateral de detalle (drawer) basado en modal Bootstrap: el clic en una
   fila abre un cajón que entra desde la derecha con la info del registro +
   vista previa del documento (PDF/imagen). Ver = drawer; editar = botón
   "Modificar". Uso: <div class="modal fade enc-sidepanel" id="...">.
   Distinto de .enc-drawer (overlay genérico que se alterna con .open).
   ========================================================================= */
.enc-sidepanel .modal-dialog { position: fixed; top: 0; right: 0; margin: 0; height: 100vh; max-width: 620px; width: 94%; }
.enc-sidepanel .modal-content { height: 100vh; border: 0; border-radius: 0; box-shadow: -8px 0 34px rgba(15,23,42,.14); }
.enc-sidepanel .modal-body { overflow-y: auto; }
.enc-sidepanel.fade .modal-dialog { transform: translateX(40px); transition: transform .22s ease-out; }
.enc-sidepanel.show .modal-dialog { transform: none; }
.enc-sidepanel__data { display: grid; grid-template-columns: 110px 1fr; gap: .3rem .7rem; margin: .5rem 0 .9rem; }
.enc-sidepanel__data dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #8a93a6; font-weight: 700; margin: 0; }
.enc-sidepanel__data dd { margin: 0; color: #2a323c; font-size: .9rem; }
.enc-sidepanel__actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .7rem 0; margin-bottom: .6rem; border-top: 1px solid #eef0f5; border-bottom: 1px solid #eef0f5; }
.enc-sidepanel__preview iframe { width: 100%; height: 60vh; border: 1px solid #e7ebf1; border-radius: 8px; background: #f7f8fb; }
.enc-sidepanel__preview img { display: block; max-width: 100%; border: 1px solid #e7ebf1; border-radius: 8px; }
.enc-sidepanel__empty { padding: 2.2rem 1rem; text-align: center; color: #98a2b3; border: 1px dashed #dde3ec; border-radius: 8px; background: #fafbfc; }
.enc-sidepanel__empty i { font-size: 1.8rem; display: block; margin-bottom: .5rem; opacity: .7; }

/* ---- Paginación de listados (dataTables_paginate) -----------------------
   La página activa iba en AZUL del tema base. Aquí se fuerza al verde oscuro
   de marca en TODA la web, y los enlaces no activos pasan a verde/neutro. */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
    background-color: var(--enc-green-deep) !important;
    border-color: var(--enc-green-deep) !important;
    color: #fff !important;
}
.pagination .page-link {
    color: var(--enc-green-strong);
}
.pagination .page-link:hover {
    background-color: var(--enc-green-soft);
    border-color: #cfe6d8;
    color: var(--enc-green-deep);
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(20, 83, 45, .2);
}
.pagination .page-item.disabled .page-link {
    color: #b6bfcc;
}

/* Chip de máquina en la bandeja de mensajes (hilos de comprador kind='buyer'):
   enlaza a la ficha de la máquina (pestaña Interesados) para saber por cuál preguntan. */
.thread-machine-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: 4px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #1f7a3d;
    background: #e8f5ec;
    border: 1px solid #cfe9d8;
    border-radius: 999px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.thread-machine-chip:hover {
    color: #145c2d;
    background: #d8eede;
    text-decoration: none;
}

/* Icono de chats de interesados en el listado de maquinaria: neutro por defecto,
   verde cuando hay conversaciones PENDIENTES de responder por la empresa. */
.maq-chat-btn { position: relative; }
.maq-chat-btn i { color: #6c757d; }
.maq-chat-btn--pending { background: #e8f5ec; border-color: #cfe9d8; }
.maq-chat-btn--pending i { color: #1f7a3d; }
.maq-chat-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    color: #fff;
    background: #8a94a6;
    border-radius: 999px;
    text-align: center;
}
.maq-chat-btn--pending .maq-chat-badge { background: #1f7a3d; }

/* Filas de conversación en la pestaña Interesados de la ficha. */
.maq-chat-row { transition: background .12s ease; }
.maq-chat-row:hover { background: #f6f8fb; text-decoration: none; }
.maq-chat-row--pending { border-left: 3px solid #1f7a3d !important; background: #f3faf5; }

/* Badge "Pendiente de responder": sólido y legible (blanco sobre verde), no verde-sobre-verde. */
.badge-pendiente {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: .35rem .6rem;
    border-radius: 7px;
    white-space: nowrap;
    color: #fff;
    background: #1f7a3d;
}

/* Cajón lateral de conversación (chat de interesado) dentro de la ficha: iframe a la
   conversación en modo embed+focus, más estrecho que el cajón de la ficha. */
.enc-chat-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; z-index: 2000; }
.enc-chat-drawer-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease; }
.enc-chat-drawer { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 560px; max-width: 94vw; background: #fff; box-shadow: -12px 0 40px rgba(15,23,42,.24); transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s; z-index: 2001; display: flex; }
.enc-chat-drawer.open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform .28s cubic-bezier(.4,0,.2,1); }
.enc-chat-drawer__frame { border: 0; width: 100%; height: 100%; background: #fff; }
.enc-chat-drawer__close { position: absolute; top: 14px; left: -21px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: #334155; box-shadow: 0 4px 16px rgba(15,23,42,.22); cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: background .15s, color .15s, transform .15s; }
.enc-chat-drawer__close:hover { background: #1f7a3d; color: #fff; transform: scale(1.06); }