/* SenHub · piel "Sen" · capa de integración v1.0.0
   Se carga DESPUÉS de skin-sen.css. No modifica los archivos del diseñador: corrige
   donde su CSS (pensado para un catálogo genérico) choca con el HTML real de Senhub
   Factura y con el Velzon instalado. Todo bajo body.skin-sen. */

/* ── 0 · Tokens: ajustes de contraste ─────────────────────────────────── */
body.skin-sen {
  --sen-danger: #c81e1e;
  --sen-danger-strong: #a51818;
  --sen-success-strong: #116632;
  --sen-info-ink: #1d4ed8;
}
/* Velzon usa las variables *-dark para el menú lateral y la barra superior; el diseño solo mapeó las claras */
body.skin-sen {
  --vz-vertical-menu-bg-dark: var(--sen-side-bg);
  --vz-vertical-menu-item-color-dark: var(--sen-side-ink);
  --vz-vertical-menu-item-hover-color-dark: var(--sen-side-ink-strong);
  --vz-vertical-menu-item-active-color-dark: var(--sen-side-ink-strong);
  --vz-vertical-menu-sub-item-color-dark: var(--sen-side-ink);
  --vz-vertical-menu-sub-item-hover-color-dark: var(--sen-side-ink-strong);
  --vz-vertical-menu-sub-item-active-color-dark: var(--sen-side-ink-strong);
  --vz-vertical-menu-title-color-dark: var(--sen-side-title);
  --vz-header-bg-dark: var(--sen-bg);
  --vz-header-item-color-dark: var(--sen-ink-2);
  --vz-topbar-user-bg-dark: transparent;
}
html[data-layout=vertical][data-sidebar=dark] body.skin-sen .navbar-menu { background: linear-gradient(175deg, var(--sen-side-bg-2) 0%, var(--sen-side-bg) 60%); border-right: 1px solid rgba(241, 239, 251, .06); }
html[data-layout-mode="dark"] body.skin-sen {
  --sen-danger-strong: #fca5a5;
  --sen-success-strong: #86efac;
  --sen-info-ink: #93c5fd;
}

/* Velzon (modo oscuro) superpone un velo azul con body::before; rompe la paleta morada */
body.skin-sen::before { display: none; }

/* ── Tipografía: Saira (identidad del sistema) en títulos y menú; Inter en datos, tablas, formularios y números ── */
body.skin-sen { --sen-font-display: "Saira", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
body.skin-sen h1, body.skin-sen h2, body.skin-sen h3, body.skin-sen h4, body.skin-sen h5, body.skin-sen h6,
body.skin-sen .h1, body.skin-sen .h2, body.skin-sen .h3, body.skin-sen .h4, body.skin-sen .h5, body.skin-sen .h6,
body.skin-sen .page-title-box h4, body.skin-sen .card-title, body.skin-sen .modal-title, body.skin-sen .offcanvas-title, body.skin-sen .swal2-title,
body.skin-sen .velzon-invoice-section-title h2, body.skin-sen .sen-empty__title,
body.skin-sen .navbar-nav .menu-title, body.skin-sen .navbar-nav .nav-link { font-family: var(--sen-font-display); }
body.skin-sen .page-title-box h4, body.skin-sen .page-title-box h4.font-size-18 { letter-spacing: -0.015em; }
body.skin-sen .modal-title, body.skin-sen .card-title { letter-spacing: -0.005em; }

/* ── 1 · Shell ────────────────────────────────────────────────────────── */
/* Título de página: el diseño quitó el padding horizontal de Velzon y el título quedaba pegado al menú */
body.skin-sen .page-title-box { padding-left: 24px; padding-right: 24px; }

/* Título de módulo: Velzon lo fija en 15px con !important; el diseño define 28px (espacio de sobra en la cabecera) */
body.skin-sen .page-title-box h4, body.skin-sen .page-title-box h4.font-size-18 { font-size: var(--sen-text-2xl) !important; line-height: 1.15; font-weight: var(--sen-weight-semibold); letter-spacing: -0.035em; text-transform: none; }
body.skin-sen .page-title-box { padding-top: 20px; padding-bottom: 18px; align-items: center; }
body.skin-sen .page-title-box .breadcrumb { font-size: var(--sen-text-sm); }
@media (max-width: 767.98px) { body.skin-sen .page-title-box h4, body.skin-sen .page-title-box h4.font-size-18 { font-size: 22px !important; } body.skin-sen .page-title-box { padding-top: 14px; padding-bottom: 12px; } }

/* Selector de empresa (RFC activo): el diseño lo trató como buscador decorativo (pointer-events: none) */
body.skin-sen .app-search .btn-user-company-search { pointer-events: auto; cursor: pointer; z-index: 11; }
body.skin-sen .app-search #search-options { cursor: default; text-overflow: ellipsis; }
body.skin-sen .app-search.sen-company-switch #search-options { cursor: pointer; }
body.skin-sen .app-search.sen-company-switch:hover #search-options { border-color: var(--sen-primary); }
body.skin-sen .app-search #search-options[readonly] { border-style: solid; border-color: var(--sen-line-strong); background-color: var(--sen-field); }
body.skin-sen .app-search .btn-user-company-search { color: var(--sen-ink-3); }
body.skin-sen .app-search.sen-company-switch:hover .btn-user-company-search { color: var(--sen-primary-ink); }
/* El selector de empresa debe seguir disponible en pantallas angostas (el diseño lo ocultaba) */
@media (max-width: 767.98px) {
  body.skin-sen .app-search.sen-company-switch { display: block; flex: 1 1 auto; max-width: 220px; min-width: 0; }
}
@container senbar (max-width: 720px) {
  body.skin-sen .app-search.sen-company-switch { display: block; flex: 1 1 auto; max-width: 240px; }
}

/* Botón de menú (hamburguesa): el diseño fijó posiciones que deshacían la flecha del estado "abierto" de Velzon */
body.skin-sen .hamburger-icon.open span:nth-child(1) { left: 1px; top: 5px; width: 20px; transform: rotate(90deg); }
body.skin-sen .hamburger-icon.open span:nth-child(2) { left: 3px; top: 13px; width: 10px; transform: rotate(45deg); }
body.skin-sen .hamburger-icon.open span:nth-child(3) { left: 9px; top: 13px; width: 10px; transform: rotate(-45deg); }
body.skin-sen .hamburger-icon.open span { height: 2px; }
/* Topbar en pantallas angostas: el selector de empresa usa el espacio libre */
body.skin-sen .navbar-header > .d-flex:first-child { flex: 1 1 auto; min-width: 0; }
body.skin-sen .app-search.sen-company-switch { min-width: 0; }
body.skin-sen .app-search .form-control { padding-right: 12px; text-overflow: ellipsis; } /* el diseño reserva 56px para un atajo ⌘K que este sistema no tiene */

/* Sidebar expandido por hover (Velzon sm-hover): alinear a la izquierda; el centrado es solo para el modo colapsado */
html[data-sidebar-size="sm-hover"] body.skin-sen .navbar-menu:hover .navbar-nav .nav-link { justify-content: flex-start; margin: 1px 10px; }
html[data-sidebar-size="sm-hover"] body.skin-sen .navbar-menu:hover .navbar-nav .nav-sm .nav-link { margin: 1px 10px 1px 22px; padding: 7px 12px 7px 26px; }
html[data-sidebar-size="sm-hover"] body.skin-sen .navbar-menu:hover .navbar-nav .nav-sm .nav-link::before { display: block; }
html[data-sidebar-size="sm-hover"] body.skin-sen .navbar-menu:hover .navbar-nav .menu-link[data-bs-toggle="collapse"]::after { display: block; }
/* Colapsado: solo íconos, centrados, sin submenú ni guía */
html[data-sidebar-size="sm-hover"] body.skin-sen .navbar-menu:not(:hover) .navbar-nav .nav-link { justify-content: center; margin: 2px 8px; padding: 0; height: 44px; }
html[data-sidebar-size="sm-hover"] body.skin-sen .navbar-menu:not(:hover) .menu-dropdown { display: none; }
html[data-sidebar-size="sm-hover"] body.skin-sen .navbar-menu:not(:hover) .navbar-nav .nav-link > i { width: auto; }
html[data-sidebar-size="sm-hover"] body.skin-sen .navbar-menu:not(:hover) .navbar-nav > .nav-item > .nav-link.active::before { left: -8px; }
body.skin-sen .navbar-nav .menu-title { white-space: nowrap; }
/* El menú ocupa todo el alto disponible (Velzon le resta una franja fija que dejaba hueco abajo) */
body.skin-sen .app-menu { padding-bottom: 0; }
body.skin-sen .app-menu #scrollbar .simplebar-content { padding-bottom: 16px; }

/* ── 2 · Botones: estados completos (Velzon pinta el hover con su propio color) ── */
body.skin-sen .btn { box-shadow: none; }
body.skin-sen .btn-primary { box-shadow: var(--sen-shadow-1); }
body.skin-sen .btn-primary:hover, body.skin-sen .btn-primary:focus, body.skin-sen .btn-primary:active,
body.skin-sen .btn-primary:not(:disabled):not(.disabled):active { color: #fdfdff; background-color: transparent; border-color: transparent; }
body.skin-sen .btn-primary:focus-visible { box-shadow: var(--sen-focus); }

/* Secundarios (light / info / outline-primary / soft-secondary) ya definidos por el diseño: fijar sus estados */
body.skin-sen .btn-secondary:focus, body.skin-sen .btn-light:focus, body.skin-sen .btn-info:focus, body.skin-sen .btn-outline-primary:focus,
body.skin-sen .btn-secondary:active, body.skin-sen .btn-light:active, body.skin-sen .btn-info:active, body.skin-sen .btn-outline-primary:active,
body.skin-sen .btn-soft-secondary:active, body.skin-sen .btn-soft-info:active { color: var(--sen-primary-ink); background: var(--sen-primary-soft-2); border-color: var(--sen-primary); }

body.skin-sen .btn-success { color: #fdfdff; border: 0; background: var(--sen-success); }
body.skin-sen .btn-success:hover, body.skin-sen .btn-success:focus, body.skin-sen .btn-success:active { color: #fdfdff; background: var(--sen-success-strong); border: 0; transform: translateY(-1px); }
html[data-layout-mode="dark"] body.skin-sen .btn-success, html[data-layout-mode="dark"] body.skin-sen .btn-success:hover { color: #0d1f14; }
body.skin-sen .btn-danger:hover, body.skin-sen .btn-danger:focus, body.skin-sen .btn-danger:active { color: #fdfdff; background: var(--sen-danger-strong); border: 0; transform: translateY(-1px); }
html[data-layout-mode="dark"] body.skin-sen .btn-danger { color: #2a0a0a; }
html[data-layout-mode="dark"] body.skin-sen .btn-danger:hover { color: #2a0a0a; background: #fca5a5; }
body.skin-sen .btn-warning { color: #2a1a00; border: 0; background: #fbbf24; }
body.skin-sen .btn-warning:hover, body.skin-sen .btn-warning:focus, body.skin-sen .btn-warning:active { color: #2a1a00; background: #f59e0b; border: 0; transform: translateY(-1px); }
body.skin-sen .btn-dark { color: #fdfdff; border: 0; background: var(--sen-ink); }
body.skin-sen .btn-dark:hover, body.skin-sen .btn-dark:focus, body.skin-sen .btn-dark:active { color: #fdfdff; background: #2c2f44; border: 0; }
html[data-layout-mode="dark"] body.skin-sen .btn-dark { color: #16112e; background: var(--sen-ink); }
html[data-layout-mode="dark"] body.skin-sen .btn-dark:hover { color: #16112e; background: #ddd8f3; }

body.skin-sen .btn-outline-danger { color: var(--sen-danger); background: transparent; border: 1px solid var(--sen-danger); }
body.skin-sen .btn-outline-danger:hover, body.skin-sen .btn-outline-danger:focus, body.skin-sen .btn-outline-danger:active { color: #fdfdff; background: var(--sen-danger); border-color: var(--sen-danger); }
html[data-layout-mode="dark"] body.skin-sen .btn-outline-danger:hover { color: #2a0a0a; }
body.skin-sen .btn-outline-success { color: var(--sen-success); background: transparent; border: 1px solid var(--sen-success); }
body.skin-sen .btn-outline-success:hover, body.skin-sen .btn-outline-success:active { color: #fdfdff; background: var(--sen-success); border-color: var(--sen-success); }

body.skin-sen .btn-soft-primary { color: var(--sen-primary-ink); background: var(--sen-primary-soft); border: 1px solid transparent; }
body.skin-sen .btn-soft-primary:hover, body.skin-sen .btn-soft-primary:focus, body.skin-sen .btn-soft-primary:active { color: var(--sen-primary-strong); background: var(--sen-primary-soft-2); border-color: var(--sen-primary); }
html[data-layout-mode="dark"] body.skin-sen .btn-soft-primary:hover, html[data-layout-mode="dark"] body.skin-sen .btn-soft-primary:active { color: #ddd6fe; }
body.skin-sen .btn-soft-success { color: var(--sen-success); background: var(--sen-success-soft); border: 1px solid transparent; }
body.skin-sen .btn-soft-success:hover, body.skin-sen .btn-soft-success:focus, body.skin-sen .btn-soft-success:active { color: var(--sen-success-strong); background: color-mix(in srgb, var(--sen-success) 18%, var(--sen-surface)); border-color: var(--sen-success); }
body.skin-sen .btn-soft-danger { color: var(--sen-danger); background: var(--sen-danger-soft); border: 1px solid transparent; }
body.skin-sen .btn-soft-danger:hover, body.skin-sen .btn-soft-danger:focus, body.skin-sen .btn-soft-danger:active { color: var(--sen-danger-strong); background: color-mix(in srgb, var(--sen-danger) 18%, var(--sen-surface)); border-color: var(--sen-danger); }
body.skin-sen .btn-soft-warning { color: var(--sen-warning); background: var(--sen-warning-soft); border: 1px solid transparent; }
body.skin-sen .btn-soft-warning:hover, body.skin-sen .btn-soft-warning:focus, body.skin-sen .btn-soft-warning:active { color: var(--sen-warning); background: color-mix(in srgb, var(--sen-warning) 20%, var(--sen-surface)); border-color: var(--sen-warning); }
body.skin-sen .btn-ghost-secondary { color: var(--sen-ink-2); background: transparent; border: 1px solid transparent; }
body.skin-sen .btn-ghost-secondary:hover, body.skin-sen .btn-ghost-secondary:focus, body.skin-sen .btn-ghost-secondary:active, body.skin-sen .btn-ghost-secondary.show { color: var(--sen-primary-ink); background: var(--sen-primary-soft); border-color: transparent; }
body.skin-sen .btn-link:hover, body.skin-sen .btn-link:focus { color: var(--sen-primary-strong); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
html[data-layout-mode="dark"] body.skin-sen .btn-link:hover { color: #ddd6fe; }

/* Botón con ícono a la izquierda (btn-label): el ícono absoluto de Velzon se encimaba con el texto */
body.skin-sen .btn-label { padding-left: 16px; }
body.skin-sen .btn-label .label-icon { position: static; width: auto; margin: 0; padding: 0; background: transparent; border: 0; font-size: 18px; line-height: 1; }
body.skin-sen .btn-label .label-icon::after { display: none; }
/* Botón cargando (spinner de Velzon) */
body.skin-sen .btn-load .spinner-border { width: 16px; height: 16px; border-width: 2px; }
body.skin-sen .btn-load { opacity: .85; cursor: progress; }
/* Íconos de acción por fila */
body.skin-sen .btn-sm.btn-icon { width: var(--sen-control-h-sm); min-height: var(--sen-control-h-sm); padding: 0; }
body.skin-sen .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.skin-sen .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.skin-sen .btn-group > .btn-primary:not(:first-child) { margin-left: 1px; }
body.skin-sen .btn.dropdown-toggle::after { margin-left: 2px; }
body.skin-sen .btn-group .btn.dropdown-toggle-split { flex: 0 0 auto; padding: 0 10px; opacity: 1; }
body.skin-sen .btn-group.w-100 > .btn:not(.dropdown-toggle-split) { flex: 1 1 auto; }
body.skin-sen .btn-close { box-shadow: none; }

/* ── 3 · Tabs: Velzon pinta una "cortina" morada en .animation-nav ─────── */
body.skin-sen .animation-nav li a::before { display: none; }
body.skin-sen .animation-nav li a { overflow: visible; z-index: auto; color: var(--sen-ink-2); transition: background var(--sen-dur) var(--sen-ease), color var(--sen-dur) var(--sen-ease), box-shadow var(--sen-dur) var(--sen-ease); }
body.skin-sen .animation-nav li a:hover { color: var(--sen-ink); background-color: color-mix(in srgb, var(--sen-surface) 70%, transparent) !important; } /* Velzon fuerza transparent con !important */
body.skin-sen .animation-nav li a.active, body.skin-sen .animation-nav li a.active:hover { color: var(--sen-primary-ink); background-color: var(--sen-surface) !important; }
body.skin-sen .nav-justified .nav-item { flex: 1 1 0; }
body.skin-sen .nav-justified .nav-link { justify-content: center; white-space: nowrap; }
body.skin-sen .nav-pills.nav-sm .nav-link { min-height: 34px; }
body.skin-sen .nav-link.disabled { opacity: .45; }
/* Tabs dentro de modales o tarjetas angostas: permitir scroll en vez de romper el layout */
body.skin-sen .modal-body .nav-tabs, body.skin-sen .modal-body .nav-pills { max-width: 100%; }

/* ── 4 · Insignias y alertas: un mismo mapa de estados ────────────────── */
body.skin-sen .badge { display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; }
body.skin-sen .badge.text-bg-success { color: var(--sen-cfdi-vigente) !important; background-color: var(--sen-cfdi-vigente-bg) !important; } /* text-bg-* usa !important */
body.skin-sen .badge.text-bg-danger { color: var(--sen-cfdi-cancelado) !important; background-color: var(--sen-cfdi-cancelado-bg) !important; }
body.skin-sen .badge.text-bg-warning { color: var(--sen-cfdi-pend-cancel) !important; background-color: var(--sen-cfdi-pend-cancel-bg) !important; }
body.skin-sen .badge.text-bg-info, body.skin-sen .badge.badge-soft-info, body.skin-sen .badge.bg-info-subtle { color: var(--sen-info-ink) !important; background-color: var(--sen-info-soft) !important; }
body.skin-sen .badge.text-bg-light { color: var(--sen-ink-2) !important; background-color: var(--sen-surface-2) !important; border: 1px solid var(--sen-line); }
body.skin-sen .badge.text-bg-primary, body.skin-sen .badge.bg-primary { color: var(--sen-primary-ink) !important; background-color: var(--sen-primary-soft) !important; }
body.skin-sen .badge.text-bg-secondary, body.skin-sen .badge.bg-secondary { color: var(--sen-ink-2) !important; background-color: var(--sen-surface-2) !important; }
body.skin-sen .badge.text-bg-dark, body.skin-sen .badge.bg-dark { color: var(--sen-surface) !important; background-color: var(--sen-ink) !important; }
/* El diseño los pintaba igual que "cancelado" pero con contraste bajo */
body.skin-sen .badge.badge-soft-dark, body.skin-sen .badge.bg-dark-subtle, body.skin-sen .badge.bg-secondary-subtle { color: var(--sen-cfdi-cancelado) !important; background-color: var(--sen-cfdi-cancelado-bg) !important; }
body.skin-sen .alert .btn-close { margin: 0; }
body.skin-sen .alert-border-left, body.skin-sen .alert-important { border-left-width: 1px; }
body.skin-sen .alert-danger a, body.skin-sen .alert-danger .alert-link { color: var(--sen-danger); text-decoration: underline; text-underline-offset: 3px; }

/* ── 5 · Formularios: utilidades de Velzon (bg-light / border-0) anulaban el estilo ── */
body.skin-sen .form-control.bg-light, body.skin-sen .form-select.bg-light { background-color: var(--sen-field) !important; } /* bg-light usa !important */
body.skin-sen .form-control.border-0, body.skin-sen .form-select.border-0 { border: 1px solid var(--sen-line-strong) !important; } /* border-0 usa !important */
body.skin-sen .form-control.border-light, body.skin-sen .form-select.border-light { border-color: var(--sen-line-strong) !important; } /* border-light usa !important */
body.skin-sen .form-control.bg-light[readonly], body.skin-sen .form-control.border-light[readonly], body.skin-sen .form-control.border-0[readonly] { border-style: solid !important; cursor: pointer; }
body.skin-sen .form-control.bg-light:focus, body.skin-sen .form-select.bg-light:focus { background-color: var(--sen-surface) !important; border-color: var(--sen-primary) !important; }
/* Campos de fecha (flatpickr los marca readonly): se ven editables, no deshabilitados */
body.skin-sen .form-control.flatpickr-input[readonly], body.skin-sen .form-control.flatpickr-input.active[readonly], body.skin-sen input.flatpickr-input[readonly].form-control, body.skin-sen .form-control.dash-filter-picker[readonly], body.skin-sen .form-control[data-provider="flatpickr"][readonly] { border-style: solid; background-color: var(--sen-field); cursor: pointer; }
body.skin-sen .form-control.flatpickr-input.active, body.skin-sen .form-control.flatpickr-input:focus { border-color: var(--sen-primary) !important; box-shadow: var(--sen-focus); background-color: var(--sen-surface) !important; }
/* El select nativo oculto de Select2 debe seguir siendo invisible (el diseño le daba 42px de alto) */
body.skin-sen .select2-hidden-accessible { min-height: 0 !important; height: 1px !important; padding: 0 !important; border: 0 !important; } /* Select2 lo oculta con !important */
/* Campos en línea en tablas de captura */
body.skin-sen .table .form-control, body.skin-sen .table .form-select { min-height: var(--sen-control-h-sm); font-size: var(--sen-text-sm); }
body.skin-sen .table .select2-container--default .select2-selection--single { height: var(--sen-control-h-sm); min-height: var(--sen-control-h-sm); }
body.skin-sen .table .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--sen-control-h-sm) - 2px); font-size: var(--sen-text-sm); }
body.skin-sen .table .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--sen-control-h-sm) - 2px); }
body.skin-sen .form-check-input:checked[type="checkbox"] { border-color: transparent; }
/* Checkboxes nativos sin clase form-check-input */
body.skin-sen input[type="checkbox"]:not(.form-check-input), body.skin-sen input[type="radio"]:not(.form-check-input) { accent-color: var(--sen-primary); }

/* Campos calculados (span.form-control): el texto se pegaba arriba; se centra verticalmente.
   Si el contenido trae varias líneas (<br>, p. ej. IVA 16% / IVA 0%) crece en alto y conserva el interlineado. */
body.skin-sen span.form-control, body.skin-sen div.form-control:not(.select2-selection):not([contenteditable]) { display: flex; align-items: center; justify-content: flex-start; height: var(--sen-control-h); min-height: var(--sen-control-h); padding-top: 0; padding-bottom: 0; line-height: 1.3; overflow: hidden; }
body.skin-sen span.form-control.text-end, body.skin-sen div.form-control.text-end { justify-content: flex-end; }
body.skin-sen .table span.form-control, body.skin-sen .table div.form-control:not(.select2-selection):not([contenteditable]) { height: var(--sen-control-h-sm); min-height: var(--sen-control-h-sm); }
body.skin-sen span.form-control:has(br), body.skin-sen div.form-control:has(br) { display: block; height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 1.55; text-align: inherit; }
body.skin-sen .table span.form-control:has(br), body.skin-sen .table div.form-control:has(br) { display: block; height: auto; min-height: var(--sen-control-h-sm); padding-top: 4px; padding-bottom: 4px; line-height: 24px; overflow: visible; }
body.skin-sen span.form-control.text-end:has(br) { text-align: right; }
body.skin-sen #txt_amount_tax_label { display: block; line-height: 24px; padding-top: 4px; }
/* Columna de impuestos algo más ancha para que quepan dos chips en una línea */
body.skin-sen #items > thead > tr > th:nth-child(8) { width: 12%; }
body.skin-sen .invoice-table td.text-right[style*="padding-top"] { padding-top: 12px !important; } /* estilo en línea de la celda de importe */

/* Select2 múltiple (impuestos y similares): chips compactos con la × a la derecha */
body.skin-sen .select2-container--default .select2-selection--multiple { display: flex !important; flex-wrap: wrap; align-items: center; height: auto; min-height: var(--sen-control-h); padding: 3px 6px; cursor: text; } /* select2.css fija display inline */
body.skin-sen .table .select2-container--default .select2-selection--multiple { min-height: var(--sen-control-h-sm); padding: 2px 5px; }
body.skin-sen .select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; min-height: calc(var(--sen-control-h) - 8px); line-height: normal; }
body.skin-sen .table .select2-container--default .select2-selection--multiple .select2-selection__rendered { min-height: calc(var(--sen-control-h-sm) - 6px); }
body.skin-sen .select2-container--default .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; gap: 1px; margin: 0; padding: 0 3px 0 7px; height: 24px; max-width: 100%; border: 1px solid var(--sen-primary-soft-2); border-radius: 8px; background: var(--sen-primary-soft); color: var(--sen-primary-ink); font-size: 12px; font-weight: var(--sen-weight-medium); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.skin-sen .select2-container--default .select2-selection--multiple .select2-selection__choice__display { padding: 0; cursor: default; overflow: hidden; text-overflow: ellipsis; }
body.skin-sen .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { order: 2; position: static; display: grid; place-items: center; width: 16px; height: 16px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sen-primary-ink); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; opacity: .7; }
body.skin-sen .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { opacity: 1; background: var(--sen-primary-soft-2); color: var(--sen-primary-strong); }
html[data-layout-mode="dark"] body.skin-sen .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #ede9fe; }
body.skin-sen .select2-container--default .select2-selection--multiple > .select2-search--inline { flex: 1 1 40px; min-width: 40px; margin: 0; }
body.skin-sen .select2-container--default .select2-selection--multiple .select2-selection__rendered { flex: 0 1 auto; max-width: 100%; }
body.skin-sen .select2-container--default:not(.select2-container--open):not(.select2-container--focus) .select2-selection--multiple:has(.select2-selection__choice) > .select2-search--inline { display: none; } /* con chips y sin foco, la caja de búsqueda no ocupa una fila vacía */
body.skin-sen .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { line-height: 24px; resize: none; overflow: hidden; height: 24px; min-height: 0; margin: 0; padding: 0 4px; font-size: var(--sen-text-sm); color: var(--sen-ink); background: transparent; border: 0; box-shadow: none; }
body.skin-sen .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder { color: var(--sen-ink-3); }
body.skin-sen .select2-container--default.select2-container--focus .select2-selection--multiple, body.skin-sen .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--sen-primary); box-shadow: var(--sen-focus); background: var(--sen-surface); }
body.skin-sen .select2-container--default .select2-selection--multiple .select2-selection__clear { float: none; margin: 0 4px 0 auto; color: var(--sen-ink-3); }
/* Opciones seleccionadas en listas múltiples: paloma a la derecha */
body.skin-sen .select2-results__options[aria-multiselectable="true"] .select2-results__option { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.skin-sen .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"] { font-weight: var(--sen-weight-semibold); }
body.skin-sen .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"]::after { content: ""; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.3' fill='none' stroke='%235d3fc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
html[data-layout-mode="dark"] body.skin-sen .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.3' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.skin-sen .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"] { background: var(--sen-primary-soft); color: var(--sen-primary-ink); }

/* Botones dentro de input-group: el diseño los forzó a 42px de ancho (pensado para un solo ícono) y los
   de texto ("Buscar", "Quitar selección…") se encimaban. Ancho según contenido, cuadrado si solo hay ícono. */
body.skin-sen .input-group > .btn { width: auto; min-width: var(--sen-control-h); padding: 0 12px; white-space: nowrap; flex: 0 0 auto; }
body.skin-sen .input-group > .btn.btn-icon, body.skin-sen .input-group > .btn:has(> i:only-child):not(:has(+ span)) { padding: 0; }
body.skin-sen .input-group { flex-wrap: nowrap; gap: 0; }
body.skin-sen .input-group > .btn + .btn { margin-left: -1px; border-radius: 0; }
body.skin-sen .input-group > .btn:last-child { border-radius: 0 var(--sen-radius-sm) var(--sen-radius-sm) 0; }
@media (max-width: 575.98px) { body.skin-sen .modal-body .input-group { flex-wrap: wrap; gap: 8px; } body.skin-sen .modal-body .input-group > .form-control { flex: 1 1 100%; border-radius: var(--sen-radius-sm); } body.skin-sen .modal-body .input-group > .btn { border-radius: var(--sen-radius-sm) !important; margin-left: 0; flex: 1 1 auto; } }

/* Botones de solo ícono: cuadrados con esquinas suaves (en el diseño quedaban casi circulares) */
body.skin-sen .btn-icon:not(.rounded-circle):not(.rounded-pill) { border-radius: var(--sen-radius-sm); }
body.skin-sen .btn-icon.btn-sm:not(.rounded-circle):not(.rounded-pill) { border-radius: 9px; }
/* Botones de búsqueda junto a los selects de los conceptos: cuadrados y compactos */
body.skin-sen .d-flex > .btn.btn-sm[class*="-search"], body.skin-sen .table .btn.btn-info.btn-sm[class*="-search"] { flex: none; width: var(--sen-control-h-sm); min-width: var(--sen-control-h-sm); height: var(--sen-control-h-sm); min-height: var(--sen-control-h-sm); padding: 0; margin-left: 6px; border-radius: 10px; }
body.skin-sen .d-flex > .btn.btn-sm[class*="-search"] i { font-size: 16px !important; } /* el HTML trae font-size inline */

/* Casillas y opciones nativas (sin clase form-check-input) con el mismo diseño que las del sistema de diseño */
body.skin-sen input[type="checkbox"]:not(.form-check-input), body.skin-sen input[type="radio"]:not(.form-check-input) { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -4px; border: 1.5px solid var(--sen-line-strong); background-color: var(--sen-surface); background-position: center; background-repeat: no-repeat; cursor: pointer; transition: background-color var(--sen-dur) var(--sen-ease), border-color var(--sen-dur) var(--sen-ease), box-shadow var(--sen-dur) var(--sen-ease); }
body.skin-sen input[type="checkbox"]:not(.form-check-input) { border-radius: 6px; background-size: 0; }
body.skin-sen input[type="radio"]:not(.form-check-input) { border-radius: 50%; }
body.skin-sen input[type="checkbox"]:not(.form-check-input):hover:not(:disabled), body.skin-sen input[type="radio"]:not(.form-check-input):hover:not(:disabled) { border-color: var(--sen-primary); box-shadow: 0 0 0 4px var(--sen-primary-soft); }
body.skin-sen input[type="checkbox"]:not(.form-check-input):checked { border-color: transparent; background-color: var(--sen-primary); background-size: 13px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.3' fill='none' stroke='%23fdfdff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.skin-sen input[type="checkbox"]:not(.form-check-input):indeterminate { border-color: transparent; background-color: var(--sen-primary); background-size: 13px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23fdfdff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.skin-sen input[type="radio"]:not(.form-check-input):checked { border: 6px solid var(--sen-primary); background-color: var(--sen-surface); }
body.skin-sen input[type="checkbox"]:not(.form-check-input):focus-visible, body.skin-sen input[type="radio"]:not(.form-check-input):focus-visible { outline: 2px solid var(--sen-primary); outline-offset: 2px; }
body.skin-sen input[type="checkbox"]:not(.form-check-input):disabled, body.skin-sen input[type="radio"]:not(.form-check-input):disabled { opacity: .45; cursor: not-allowed; }
body.skin-sen label:has(> input[type="checkbox"]:not(.form-check-input)), body.skin-sen label:has(> input[type="radio"]:not(.form-check-input)) { cursor: pointer; }
body.skin-sen .table input[type="checkbox"]:not(.form-check-input) { margin-top: 0 !important; } /* algunos traen margin-top inline */

/* ── 6 · Calendario (flatpickr real) ──────────────────────────────────── */
body.skin-sen .flatpickr-calendar { width: 316px; padding: 10px; }
body.skin-sen .flatpickr-months { background: transparent !important; border-radius: 0; } /* Velzon pinta #8c68cd */
body.skin-sen .flatpickr-months .flatpickr-month { height: 34px; color: var(--sen-ink); fill: var(--sen-ink); }
body.skin-sen .flatpickr-months .flatpickr-prev-month, body.skin-sen .flatpickr-months .flatpickr-next-month { color: var(--sen-ink-2); fill: var(--sen-ink-2); }
body.skin-sen .flatpickr-months .flatpickr-prev-month svg, body.skin-sen .flatpickr-months .flatpickr-next-month svg { fill: currentColor; }
body.skin-sen .flatpickr-months .flatpickr-prev-month:hover, body.skin-sen .flatpickr-months .flatpickr-next-month:hover { color: var(--sen-primary-ink); }
body.skin-sen .flatpickr-months .flatpickr-prev-month:hover svg, body.skin-sen .flatpickr-months .flatpickr-next-month:hover svg { fill: currentColor; }
body.skin-sen .flatpickr-current-month { display: flex; align-items: center; justify-content: center; gap: 6px; left: 0; width: 100%; height: 34px; padding: 0; }
body.skin-sen .flatpickr-current-month .flatpickr-monthDropdown-months { height: 30px; padding: 0 6px; font-weight: var(--sen-weight-semibold); color: var(--sen-ink); background: transparent; border: 0; border-radius: 8px; appearance: auto; }
body.skin-sen .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--sen-primary-soft); }
body.skin-sen .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color: var(--sen-ink); background: var(--sen-surface); }
body.skin-sen .flatpickr-current-month input.cur-year { color: var(--sen-ink); font-weight: var(--sen-weight-semibold); min-height: 0; height: 30px; padding: 0 4px; border: 0; background: transparent; }
body.skin-sen .numInputWrapper span { border-color: var(--sen-line); }
body.skin-sen .numInputWrapper span:hover { background: var(--sen-primary-soft); }
body.skin-sen .numInputWrapper span.arrowUp::after { border-bottom-color: var(--sen-ink-3); }
body.skin-sen .numInputWrapper span.arrowDown::after { border-top-color: var(--sen-ink-3); }
/* Los días de la semana van dentro de .flatpickr-weekdaycontainer (el diseño usaba grid en el contenedor equivocado) */
body.skin-sen .flatpickr-weekdays { display: block; height: 32px; background: transparent !important; border: 0; }
body.skin-sen .flatpickr-weekdays .flatpickr-weekdaycontainer { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 100%; }
body.skin-sen span.flatpickr-weekday { width: auto; line-height: 32px; color: var(--sen-ink-3) !important; background: transparent !important; } /* Velzon fija color y fondo de los días */
body.skin-sen .flatpickr-innerContainer { display: flex; width: 100%; }
body.skin-sen .flatpickr-rContainer { flex: 1 1 auto; width: 100%; padding: 0; }
body.skin-sen .flatpickr-days { width: 100%; }
body.skin-sen .flatpickr-days .dayContainer { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 100%; min-width: 0; max-width: none; padding: 0; }
body.skin-sen .flatpickr-day { flex-basis: auto; max-width: none; }
body.skin-sen .flatpickr-day.today:not(.selected) { border-color: var(--sen-primary); color: var(--sen-primary-ink); }
body.skin-sen .flatpickr-day.selected:hover, body.skin-sen .flatpickr-day.startRange:hover, body.skin-sen .flatpickr-day.endRange:hover { color: #fdfdff; background: var(--sen-primary); border-color: var(--sen-primary); }
body.skin-sen .flatpickr-day.prevMonthDay:hover, body.skin-sen .flatpickr-day.nextMonthDay:hover { background: var(--sen-surface-2); color: var(--sen-ink); }
body.skin-sen .flatpickr-time { border-top: 1px solid var(--sen-line) !important; background: transparent; margin-top: 6px; }
body.skin-sen .flatpickr-time input, body.skin-sen .flatpickr-time .flatpickr-am-pm { color: var(--sen-ink); background: transparent; min-height: 0; border: 0; font-weight: var(--sen-weight-medium); }
body.skin-sen .flatpickr-time input:hover, body.skin-sen .flatpickr-time .flatpickr-am-pm:hover, body.skin-sen .flatpickr-time input:focus, body.skin-sen .flatpickr-time .flatpickr-am-pm:focus { background: var(--sen-primary-soft); }
body.skin-sen .flatpickr-time .flatpickr-time-separator { color: var(--sen-ink-3); }
body.skin-sen .flatpickr-calendar.arrowTop::before, body.skin-sen .flatpickr-calendar.arrowTop::after, body.skin-sen .flatpickr-calendar.arrowBottom::before, body.skin-sen .flatpickr-calendar.arrowBottom::after { display: none; }
/* Rango de fechas (daterangepicker / flatpickr range en filtros) */
body.skin-sen .flatpickr-day.inRange { color: var(--sen-ink); }
body.skin-sen .flatpickr-day.startRange, body.skin-sen .flatpickr-day.endRange { border-radius: 10px; }

/* ── 7 · Tablas y listados ────────────────────────────────────────────── */
body.skin-sen .table > thead.table-light th, body.skin-sen .table-light > :not(caption) > * > * { background-color: var(--sen-surface-2) !important; color: var(--sen-ink-3); border-color: var(--sen-line); }
body.skin-sen .table > thead th:first-child { border-top-left-radius: var(--sen-radius-sm); }
body.skin-sen .table > thead th:last-child { border-top-right-radius: var(--sen-radius-sm); }
body.skin-sen .table-active, body.skin-sen .table > thead > tr.table-active > th { background-color: var(--sen-surface-2) !important; color: var(--sen-ink-3); }
body.skin-sen .table > tbody > tr > td { border-bottom: 1px solid var(--sen-line); }
body.skin-sen .table-borderless > :not(caption) > * > * { border-bottom-width: 0; }
body.skin-sen .table-hover > tbody > tr:hover > * { background-color: var(--sen-primary-soft); color: var(--sen-ink); --vz-table-accent-bg: var(--sen-primary-soft); }
body.skin-sen .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--sen-surface-2); }
body.skin-sen .table th { text-align: inherit; }
body.skin-sen .table .text-center { text-align: center !important; }
body.skin-sen .table .text-end, body.skin-sen .table .text-right { text-align: right !important; }
body.skin-sen .table .sort:after, body.skin-sen .table .sort:before { color: var(--sen-ink-3); }
body.skin-sen .table a:not(.btn):not(.dropdown-item) { color: var(--sen-primary-ink); }
body.skin-sen .table td .btn, body.skin-sen .table td .btn-sm { vertical-align: middle; }
/* Barra de filtros y contenedores de tabla con desplazamiento */
body.skin-sen .table-responsive { border-radius: var(--sen-radius-md); }
body.skin-sen .velzon-invoice-lines-scroll { border: 1px solid var(--sen-line); border-radius: var(--sen-radius-md); padding: 0; }
body.skin-sen .velzon-invoice-lines-scroll > .table { margin-bottom: 0; }
body.skin-sen .invoice-table th { white-space: nowrap; }
body.skin-sen .invoice-table td { vertical-align: top; }
/* Zona de comentarios y acciones de factura */
body.skin-sen .invoice-table textarea.form-control { width: 100%; max-width: 100%; }

/* ── 8 · Factura: secciones y línea de "Agregar" ───────────────────────── */
body.skin-sen .velzon-invoice-create-form .velzon-invoice-section-title > i { color: var(--sen-primary-ink); background: var(--sen-primary-soft); border-radius: var(--sen-radius-sm); }
body.skin-sen .velzon-invoice-create-form .velzon-invoice-section-title h2 { font-size: var(--sen-text-lg); font-weight: var(--sen-weight-semibold); letter-spacing: var(--sen-tracking-tight); color: var(--sen-ink); }
body.skin-sen .velzon-invoice-create-form .velzon-invoice-section-title p { color: var(--sen-ink-3); }
body.skin-sen .velzon-invoice-add-line { min-height: var(--sen-control-h); }
body.skin-sen .velzon-invoice-add-line-help { margin-left: 8px; font-size: var(--sen-text-sm); color: var(--sen-ink-3); }
body.skin-sen .velzon-invoice-tabs { margin-bottom: var(--sen-space-4); }

/* ── 9 · Modales ──────────────────────────────────────────────────────── */
/* La animación de entrada con fill "both" dejaba un contexto de apilamiento permanente en .container-fluid:
   los modales (que viven dentro) quedaban DETRÁS del fondo difuminado. Sin fill final no hay contexto. */
body.skin-sen .page-content > .container-fluid { animation-fill-mode: backwards; }
body.skin-sen .modal-content { overflow: hidden; }
body.skin-sen .modal-content > .modal-header { align-items: center; padding: 18px 24px; }
body.skin-sen .modal-content > .modal-footer { padding: 14px 24px 16px; }
body.skin-sen .modal-header .btn-close { margin: 0 0 0 auto; padding: 8px; }
body.skin-sen .modal-header.bg-primary, body.skin-sen .modal-header.bg-light, body.skin-sen .modal-header.p-3 { background: transparent !important; } /* Velzon usa bg-* con !important */
body.skin-sen .modal-header .modal-title { color: var(--sen-ink); }
body.skin-sen .modal-footer { justify-content: flex-end; flex-wrap: wrap; }
body.skin-sen .modal-footer > * { margin: 0; }
body.skin-sen .modal-body > .row { --bs-gutter-x: 1rem; }
body.skin-sen .modal-lg { --bs-modal-width: 800px; }
body.skin-sen .modal-icon, body.skin-sen .modal-center { text-align: center; }
body.skin-sen .modal .table { margin-bottom: 0; }

/* Botón de cierre estilo Bootstrap 4 (.close con ×): mismo aspecto que btn-close y a la derecha */
body.skin-sen .modal-header .close { order: 3; margin: 0 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sen-ink-3); font-size: 22px; font-weight: 400; line-height: 1; opacity: 1; cursor: pointer; text-shadow: none; }
body.skin-sen .modal-header .close:hover { background: var(--sen-surface-2); color: var(--sen-ink); }
/* Listas de selección múltiple nativas (select multiple): son listas, no desplegables */
body.skin-sen select[multiple].form-select, body.skin-sen select[multiple].form-control { height: auto; min-height: 104px; padding: 6px; background-image: none; cursor: default; }
body.skin-sen select[multiple] option { padding: 6px 10px; margin-bottom: 2px; border-radius: 8px; color: var(--sen-ink); }
body.skin-sen select[multiple] option:checked { background: var(--sen-primary-soft) linear-gradient(0deg, var(--sen-primary-soft), var(--sen-primary-soft)); color: var(--sen-primary-ink); font-weight: var(--sen-weight-semibold); }

/* Animaciones GIF de resultado (error/éxito de timbrado): más discretas */
body.skin-sen .modal-body img[src$=".gif"] { width: 170px !important; height: auto; margin-bottom: 4px; } /* el HTML trae width inline de 270px */

/* ── 10 · Menús desplegables y misceláneos ─────────────────────────────── */
body.skin-sen .dropdown-menu { min-width: 10rem; }
body.skin-sen .dropdown-menu .dropdown-item i { line-height: 1; }
body.skin-sen .dropdown-toggle::after { border-top-color: currentColor; }
body.skin-sen .select2-dropdown { z-index: 1061; }
body.skin-sen .select2-container--default .select2-results__option--selected { color: var(--sen-primary-ink); }
body.skin-sen .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--sen-ink-3); }
body.skin-sen hr { border-color: var(--sen-line); opacity: 1; }
body.skin-sen .border-top-dashed, body.skin-sen .border-bottom-dashed, body.skin-sen .border-dashed { border-color: var(--sen-line) !important; }
body.skin-sen .footer { color: var(--sen-ink-3); border-top: 1px solid var(--sen-line); background: transparent; }
body.skin-sen .footer a { color: var(--sen-primary-ink); }
body.skin-sen .spinner-border.text-primary { color: var(--sen-primary) !important; }
body.skin-sen .bg-soft-primary { background-color: var(--sen-primary-soft) !important; color: var(--sen-primary-ink); }
body.skin-sen .text-primary { color: var(--sen-primary-ink) !important; }
body.skin-sen .text-success { color: var(--sen-success) !important; }
body.skin-sen .text-warning { color: var(--sen-warning) !important; }
body.skin-sen .text-info { color: var(--sen-info-ink) !important; }
body.skin-sen .text-secondary { color: var(--sen-ink-2) !important; }
body.skin-sen .link-primary { color: var(--sen-primary-ink) !important; }

/* Cajas de búsqueda de Velzon (ícono a la izquierda): el diseño quitó el padding que reserva el ícono */
body.skin-sen .search-box { position: relative; }
body.skin-sen .search-box .form-control { padding-left: 40px; }
body.skin-sen .search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; line-height: 1; color: var(--sen-ink-3); pointer-events: none; }
/* Botones: nunca partir una palabra a la mitad en columnas angostas */
body.skin-sen .btn { overflow-wrap: normal; word-break: normal; }
body.skin-sen .btn:not(.btn-icon):not(.btn-wrap) { white-space: nowrap; }
@media (max-width: 575.98px) { body.skin-sen .btn:not(.btn-icon):not(.btn-wrap) { white-space: normal; text-align: center; } }
@media (max-width: 767.98px) { body.skin-sen .flex-shrink-0:has(> .d-flex.flex-wrap) { flex-shrink: 1 !important; min-width: 0; } } /* la fila de botones puede envolver en vez de empujar la página */
/* Paginación: en pantallas angostas se acomoda en varias filas en lugar de desbordar la página */
body.skin-sen .pagination { flex-wrap: wrap; row-gap: 4px; }
/* Esquinas decorativas de Velzon en tarjetas animadas (chocan con el radio de la piel) */
body.skin-sen .card:not(.card-overlay)::before, body.skin-sen .card:not(.card-overlay)::after { display: none; }

/* ── 11 · Móvil ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  body.skin-sen .card-body { padding: 16px; }
  body.skin-sen .modal-body { padding: 18px 16px; }
  body.skin-sen .modal-header, body.skin-sen .modal-footer { padding-left: 16px; padding-right: 16px; }
}