/* =============================================================================
   COMPONENTES DE INTERFAZ (segunda etapa del diseño de marca)
   Un solo lenguaje visual para toda la aplicación: avisos, confirmaciones, encabezados de página, botones,
   formularios, selectores, tablas, estados, modales y carga. Solo apariencia: no cambia funciones.
   Usa las variables de la marca (App\Services\Brand) y se aplica con <body class="marca"> (POS: marca-pos).
   ============================================================================= */

/* ---------- Avisos (toasts) ---------- */
.ui-toasts { position: fixed; top: 78px; right: 18px; z-index: 3100; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; font-family: var(--font, system-ui); }
.ui-toast { pointer-events: auto; position: relative; overflow: hidden; display: grid; grid-template-columns: 36px 1fr 24px; gap: 12px; align-items: start;
  padding: 14px 14px 14px 14px; border-radius: 14px; background: #fff; color: #111827; border: 1px solid #e6e8ef;
  box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .06);
  opacity: 0; transform: translateX(24px) scale(.98); transition: opacity .22s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.ui-toast.in { opacity: 1; transform: none; }
.ui-toast.out { opacity: 0; transform: translateX(24px); }
.ui-toast-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 15px; color: #fff; }
.ui-toast--success .ui-toast-ico { background: #16a34a; }
.ui-toast--error .ui-toast-ico { background: #dc2626; }
.ui-toast--warning .ui-toast-ico { background: #f59e0b; }
.ui-toast--info .ui-toast-ico { background: var(--brand, #4338ca); }
.ui-toast--error { border-color: #fecaca; }
.ui-toast-body b { display: block; font-size: 14px; margin-bottom: 2px; letter-spacing: -.01em; }
.ui-toast-body p { margin: 0; font-size: 13px; color: #4b5563; line-height: 1.45; word-break: break-word; }
.ui-toast-x { border: 0; background: transparent; color: #9ca3af; font-size: 20px; line-height: 1; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; }
.ui-toast-x:hover { background: #f3f4f6; color: #111827; }
.ui-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: ui-toast-bar linear forwards; opacity: .55; }
.ui-toast--success .ui-toast-bar { background: #16a34a; } .ui-toast--warning .ui-toast-bar { background: #f59e0b; } .ui-toast--info .ui-toast-bar { background: var(--brand, #4338ca); }
.ui-toast.hold .ui-toast-bar { animation-play-state: paused; }
@keyframes ui-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575px) { .ui-toasts { top: auto; bottom: 34px; right: 16px; left: 16px; width: auto; } }

/* ---------- Confirmación ---------- */
.ui-confirm { position: fixed; inset: 0; z-index: 3200; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s; font-family: var(--font, system-ui); }
.ui-confirm.in { opacity: 1; }
.ui-confirm-panel { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 26px 26px 20px; text-align: center;
  box-shadow: 0 40px 80px -24px rgba(15, 23, 42, .5); transform: translateY(10px) scale(.97); transition: transform .24s cubic-bezier(.2, .7, .2, 1); }
.ui-confirm.in .ui-confirm-panel { transform: none; }
.ui-confirm-ico { width: 56px; height: 56px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 22px; margin-bottom: 12px;
  background: var(--brand-soft, #e0e7ff); color: var(--brand-ink, #4338ca); }
.ui-confirm.is-danger .ui-confirm-ico { background: #fee2e2; color: #dc2626; }
.ui-confirm-panel h3 { font-size: 18px; font-weight: 800; margin: 0 0 6px; color: #111827; letter-spacing: -.02em; }
.ui-confirm-panel p { color: #4b5563; font-size: 14px; margin: 0 0 22px; line-height: 1.5; }
.ui-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-confirm-actions .btn { height: 44px; border-radius: 12px; font-weight: 700; }
.ui-confirm-actions .btn-light { background: #fff; border: 1px solid #e5e7eb; color: #374151; }
.ui-confirm-actions .btn-light:hover { background: #f9fafb; }

/* ---------- Encabezado de página (migas + título) ---------- */
body.marca .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; padding: 14px 20px 2px; }
body.marca .page-head .crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; flex-wrap: wrap; }
body.marca .page-head .crumbs a { color: var(--text-muted); font-weight: 500; }
body.marca .page-head .crumbs a:hover { color: var(--brand-ink); }
body.marca .page-head .crumbs i { font-size: 11px; opacity: .6; }
body.marca .page-head .crumbs span { color: var(--text); font-weight: 600; }
body.marca .page-head .crumbs a[aria-current] { color: var(--text); font-weight: 600; }
body.marca .page-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 0; line-height: 1.2; }
body.marca .page-head.only-crumbs { padding-bottom: 0; }

/* ---------- Botones: jerarquía ---------- */
/* Los botones-enlace de las barras de herramientas (Añadir, Importar, Stock en cero...) no compiten entre sí:
   el principal se ve fuerte; los demás, suaves. Los botones que envían una acción peligrosa siguen en rojo sólido. */
body.marca a.btn.btn-danger, body.marca a.btn.btn-warning { box-shadow: none; }
body.marca a.btn.btn-danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
body.marca a.btn.btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
body.marca a.btn.btn-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.marca a.btn.btn-warning:hover { background: #f59e0b; border-color: #f59e0b; color: #fff; }
body.marca a.btn.btn-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
body.marca a.btn.btn-success:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
body.marca .btn-danger:not(a) { box-shadow: 0 1px 2px rgba(220, 38, 38, .2); }
body.marca .btn .fa, body.marca .btn [class^="ion-"], body.marca .btn [class*=" ion-"] { margin-right: 4px; }
body.marca .btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
body.marca .btn.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: ui-spin .7s linear infinite; }
body.marca .btn-light.is-loading::after, body.marca .btn-secondary.is-loading::after, body.marca .btn-default.is-loading::after,
body.marca .btn-info.is-loading::after, body.marca [class*="btn-outline"].is-loading::after { border-color: rgba(var(--brand-rgb), .25); border-top-color: var(--brand); }
@keyframes ui-spin { to { transform: rotate(360deg); } }
body.marca .btn:disabled, body.marca .btn.disabled { opacity: .55; cursor: not-allowed; }
/* Botón de cerrar */
body.marca .close { font-weight: 400; text-shadow: none; opacity: .5; transition: opacity .15s, background .15s; border-radius: 8px; width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0 !important; }
body.marca .close:hover { opacity: 1; background: #f3f4f6; }

/* ---------- Avisos dentro de la página ---------- */
body.marca .alert { position: relative; padding-left: 52px; text-align: left !important; line-height: 1.5; }
body.marca .alert::before { font-family: FontAwesome; font-size: 14px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; position: absolute; left: 14px; top: 10px; }
body.marca .alert-success::before { content: '\f00c'; background: #dcfce7; color: #16a34a; }
body.marca .alert-danger::before { content: '\f071'; background: #fee2e2; color: #dc2626; }
body.marca .alert-warning::before { content: '\f12a'; background: #fef3c7; color: #b45309; }
body.marca .alert-info::before { content: '\f129'; background: var(--brand-soft); color: var(--brand-ink); }
body.marca .alert.alert-dismissible { padding-right: 48px; }
body.marca .alert.alert-dismissible .close { position: absolute; top: 8px; right: 8px; }
body.marca .alert > :last-child { margin-bottom: 0; }
body.marca .alert.no-icon::before, body.marca .alert:has(> i.fa:first-child)::before, body.marca .alert:has(> .fa:first-child)::before { display: none; }
body.marca .alert.no-icon, body.marca .alert:has(> i.fa:first-child), body.marca .alert:has(> .fa:first-child) { padding-left: 16px; }
body.marca .invalid-feedback, body.marca .help-block.with-errors, body.marca label.error, body.marca .text-danger.error { color: #dc2626; font-size: 12px; font-weight: 600; margin-top: 4px; }
body.marca input.error, body.marca select.error, body.marca textarea.error, body.marca .is-invalid { border-color: #fca5a5 !important; background: #fffafa; }

/* ---------- Formularios ---------- */
body.marca form label, body.marca .form-group > label { font-weight: 600; color: #374151; font-size: 13px; }
body.marca label strong { font-weight: 600; }
body.marca form label, body.marca .modal label, body.marca .card label { display: inline-block; }
body.marca form label::first-letter, body.marca .modal label::first-letter, body.marca .card label::first-letter { text-transform: uppercase; }
body.marca .req { color: #dc2626; font-weight: 700; margin-left: 2px; }
body.marca .form-group { margin-bottom: 18px; }
body.marca .form-text, body.marca small.text-muted, body.marca .help-text { font-size: 12px; color: var(--text-muted) !important; }
body.marca select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
body.marca input[type=file].form-control { height: auto; padding: 8px; background: var(--brand-softer); border-style: dashed; cursor: pointer; }
body.marca input[type=file]::file-selector-button { border: 0; border-radius: 8px; background: var(--brand); color: var(--brand-contrast); font-weight: 600; padding: 6px 12px; margin-right: 10px; cursor: pointer; }
body.marca input[type=checkbox]:not(.toggle):not([data-toggle]), body.marca input[type=radio] { width: 16px; height: 16px; vertical-align: -3px; cursor: pointer; }
body.marca textarea.form-control { min-height: 84px; padding-top: 10px; line-height: 1.5; }
body.marca .input-group > .btn, body.marca .input-group-append > .btn, body.marca .input-group-prepend > .btn { height: 40px; }
body.marca .form-control[type=number] { font-variant-numeric: tabular-nums; }
/* Secciones de formulario (títulos que agrupan campos relacionados) */
body.marca .form-section { display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; padding-top: 6px; }
body.marca .form-section-col:not(:first-child) .form-section, body.marca .form-section:not(:first-child) { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--border); }
body.marca .form-section-col { flex: 0 0 100%; max-width: 100%; }
body.marca .form-section .num { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-size: 14px; flex-shrink: 0; }
body.marca .form-section h5 { margin: 0; font-size: 15px; }
body.marca .form-section small { display: block; color: var(--text-muted); font-size: 12px; font-weight: 400; margin-top: 1px; }
body.marca .form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--border); }
/* bootstrap-toggle (interruptores existentes) */
body.marca .toggle.btn { border-radius: 999px !important; min-width: 64px; }
body.marca .toggle .toggle-handle { border-radius: 999px; background: #fff; }
body.marca .toggle-on.btn-success, body.marca .toggle-on.btn-primary { background: var(--brand); border-color: var(--brand); }
/* Datepicker */
body.marca .datepicker.dropdown-menu { padding: 10px; border-radius: 14px; }
body.marca .datepicker table tr td.active, body.marca .datepicker table tr td.active:hover, body.marca .datepicker table tr td.active.active { background: var(--brand) !important; color: var(--brand-contrast) !important; border-radius: 8px; text-shadow: none; }
body.marca .datepicker table tr td.today { background: var(--brand-soft) !important; border-radius: 8px; }
body.marca .datepicker table tr td, body.marca .datepicker table tr th { border-radius: 8px; width: 34px; height: 32px; }
/* Selectores con buscador (bootstrap-select) */
body.marca .bootstrap-select { width: 100% !important; }
body.marca .bootstrap-select > .dropdown-toggle { padding-left: 12px; padding-right: 32px; display: flex; align-items: center; }
body.marca .bootstrap-select .filter-option { font-weight: 500; color: var(--text); }
body.marca .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option { color: #9aa1af; font-weight: 400; }
body.marca .bootstrap-select .dropdown-toggle::after { border: 0; width: 12px; height: 12px; position: absolute; right: 12px; top: 50%; margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 12px; transition: transform .2s; }
body.marca .bootstrap-select.show .dropdown-toggle::after { transform: rotate(180deg); }
body.marca .bootstrap-select .dropdown-menu { padding: 6px; border-radius: 14px; box-shadow: 0 20px 40px -14px rgba(15, 23, 42, .3); border: 1px solid var(--border); min-width: 100%; }
body.marca .bootstrap-select .bs-searchbox { padding: 4px 4px 8px; position: relative; }
body.marca .bootstrap-select .bs-searchbox::before { content: '\f002'; font-family: FontAwesome; position: absolute; left: 16px; top: 13px; color: #9aa1af; font-size: 13px; }
body.marca .bootstrap-select .bs-searchbox .form-control { padding-left: 34px; border-radius: 10px; background: #f8f9fb; }
body.marca .bootstrap-select .dropdown-menu li a { padding: 9px 12px; border-radius: 9px; font-size: 13.5px; white-space: normal; }
body.marca .bootstrap-select .dropdown-menu li a .text-muted, body.marca .bootstrap-select .dropdown-menu li small { color: var(--text-muted); font-size: 12px; }
body.marca .bootstrap-select .dropdown-menu li.selected a { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
body.marca .bootstrap-select .dropdown-menu li.selected a .check-mark { color: var(--brand); }
body.marca .bootstrap-select .no-results { background: transparent; color: var(--text-muted); padding: 12px; font-size: 13px; text-align: center; }
body.marca .bootstrap-select .dropdown-menu.inner { max-height: 320px; }

/* ---------- Tablas y listados ---------- */
body.marca .table th, body.marca .table td { border-color: var(--border); }
body.marca .table td { color: #1f2937; font-size: 13.5px; }
body.marca .table thead th:first-child, body.marca .table td:first-child { padding-left: 16px; }
body.marca .table thead th:last-child, body.marca .table td:last-child { padding-right: 16px; }
body.marca .table img { border-radius: 10px; object-fit: cover; background: #f3f4f6; border: 1px solid var(--border); max-width: 64px; height: auto; }
body.marca .table td img[width], body.marca .table td img[height] { width: 48px !important; height: 48px !important; }
body.marca .table .btn-group > .dropdown-toggle, body.marca .table .btn-group > .btn-default {
  height: 34px; padding: 0 12px; border-radius: 10px !important; background: #fff; border: 1px solid var(--border); color: var(--text); font-size: 12.5px; font-weight: 600; box-shadow: none;
}
body.marca .table .btn-group > .dropdown-toggle:hover { background: var(--brand-softer); border-color: rgba(var(--brand-rgb), .35); color: var(--brand-ink); }
body.marca .table .dropdown-menu { min-width: 200px; }
body.marca .table .dropdown-menu li .btn, body.marca .table .dropdown-menu li button, body.marca .table .dropdown-menu .btn-link {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--text); font-weight: 500; font-size: 13px; background: transparent; border: 0; text-decoration: none;
}
body.marca .table .dropdown-menu li .btn:hover, body.marca .table .dropdown-menu li button:hover { background: var(--brand-softer); color: var(--brand-ink); }
body.marca .table .dropdown-menu li .btn i, body.marca .table .dropdown-menu li button i { width: 16px; text-align: center; opacity: .75; }
body.marca .table .dropdown-menu li button[onclick*="confirmDelete"], body.marca .table .dropdown-menu li .btn[onclick*="confirmDelete"],
body.marca .table .dropdown-menu li button.remove, body.marca .table .dropdown-menu li .text-danger { color: #b91c1c !important; }
body.marca .table .dropdown-menu li button[onclick*="confirmDelete"]:hover { background: #fef2f2 !important; }
body.marca .table .dropdown-divider, body.marca .table .dropdown-menu .divider { margin: 4px 0; border-top: 1px solid var(--border); height: 0; }
body.marca td.dataTables_empty { padding: 48px 16px !important; text-align: center; color: var(--text-muted); font-size: 14px; }
body.marca td.dataTables_empty::before { content: '\f1c0'; font-family: FontAwesome; display: block; font-size: 26px; color: rgba(var(--brand-rgb), .45); margin-bottom: 10px; }
body.marca .dataTables_wrapper { padding: 2px 0; }
body.marca .dataTables_wrapper > .row:first-child, body.marca .dataTables_wrapper .dt-toolbar { align-items: center; margin-bottom: 12px; row-gap: 10px; }
body.marca .dataTables_wrapper .dataTables_filter { text-align: right; }
body.marca .dataTables_wrapper .dataTables_filter label { font-size: 0; margin: 0; width: 100%; max-width: 340px; }
body.marca .dataTables_wrapper .dataTables_filter input {
  width: 100% !important; margin: 0 !important; height: 40px; padding-left: 36px; font-size: 13.5px; border-radius: 12px; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239aa1af' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
body.marca .dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
body.marca .dataTables_wrapper .dataTables_length select { width: auto !important; padding-right: 30px; border-radius: 10px; }
body.marca .dataTables_wrapper .dataTables_info { padding-top: 14px !important; }
body.marca .dataTables_wrapper .dataTables_paginate { padding-top: 10px !important; }
body.marca .dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-end; }
body.marca .dataTables_processing { background: rgba(255, 255, 255, .9) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: var(--shadow-md); color: var(--brand-ink); font-weight: 600; padding: 14px !important; height: auto !important; }
body.marca .dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 0; }
body.marca .dt-buttons .btn { height: 38px; padding: 0 14px; font-size: 12.5px; }
body.marca .dt-buttons .buttons-delete { color: #b91c1c !important; }
body.marca .dt-buttons .buttons-delete:hover { background: #fef2f2 !important; color: #991b1b !important; }
body.marca .dt-button-collection.dropdown-menu { padding: 6px; }
body.marca table.dataTable { border-collapse: collapse !important; margin-top: 0 !important; margin-bottom: 0 !important; }
body.marca table.dataTable thead th { background: #fafbfc; }
body.marca table.dataTable thead th:first-child { border-top-left-radius: 10px; }
body.marca table.dataTable thead th:last-child { border-top-right-radius: 10px; }
body.marca table.dataTable tfoot th, body.marca table.dataTable tfoot td { background: #fafbfc; }
body.marca .table-responsive { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
body.marca .card .table-responsive { margin: 0 -2px; }
/* Totales y cifras en tablas */
body.marca .table td.text-right, body.marca .table th.text-right { font-variant-numeric: tabular-nums; }

/* ---------- Tarjetas de información ---------- */
body.marca .card-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.marca .card-header > h4:first-child, body.marca .card-header > h3:first-child { margin-right: auto; }
body.marca .card-header .btn { margin: 0; }
body.marca .card-body > h5, body.marca .card-body > h4 { margin-bottom: 12px; }
body.marca .card .card-body > .row + .row { margin-top: 2px; }
body.marca .dashboard-counts, body.marca .count-title { color: var(--text); }
/* Cuadros de información de los listados (resúmenes por tienda, etc.) */
body.marca .page > #content .container-fluid > .row > [class*="col-"] > .card > .card-body.text-center,
body.marca .info-box, body.marca .wrapper.count-title { border-radius: var(--radius); }

/* ---------- Modales ---------- */
body.marca .modal-header { align-items: center; background: #fff; }
body.marca .modal-header .modal-title { font-size: 17px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
body.marca .modal-header .modal-title::before { content: ''; width: 8px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, var(--brand), var(--accent)); flex-shrink: 0; }
body.marca .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; }
body.marca .modal-body > p.italic, body.marca .modal-body > p > small.italic, body.marca p.italic { color: var(--text-muted); font-size: 12.5px; font-style: normal; background: var(--brand-softer); border-radius: 10px; padding: 8px 12px; }
body.marca .modal-footer { gap: 8px; background: #fafbfc; }
body.marca .modal-content form > .modal-body + .modal-footer, body.marca .modal-body .form-group:last-child { margin-bottom: 0; }
body.marca .modal-body .btn[type=submit]:only-child, body.marca .modal-body > .form-group > .btn[type=submit] { min-width: 160px; }
@media (max-width: 575px) {
  body.marca .modal-dialog { margin: 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
  body.marca .modal-content { border-radius: 20px 20px 0 0; width: 100%; }
  body.marca .modal.fade .modal-dialog { transform: translateY(40px); }
  body.marca .modal.show .modal-dialog { transform: none; }
}

/* ---------- SweetAlert (mensajes del sistema) ---------- */
.swal-overlay { background-color: rgba(15, 23, 42, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.swal-modal { border-radius: 20px; padding: 10px 4px 4px; font-family: var(--font, system-ui); box-shadow: 0 40px 80px -24px rgba(15, 23, 42, .5); width: min(440px, calc(100vw - 32px)); }
.swal-title { font-size: 19px; font-weight: 800; color: #111827; letter-spacing: -.02em; }
.swal-text { color: #4b5563; font-size: 14px; text-align: center; line-height: 1.5; }
.swal-footer { text-align: center; padding: 12px 16px 18px; }
.swal-button { border-radius: 12px; font-weight: 700; padding: 11px 22px; background: var(--brand, #4338ca); box-shadow: none !important; }
.swal-button:not([disabled]):hover { background: var(--brand-hover, #3730a3); }
.swal-button--cancel { background: #fff; color: #374151; border: 1px solid #e5e7eb; }
.swal-button--cancel:not([disabled]):hover { background: #f9fafb; }
.swal-button--danger { background: #dc2626; }
.swal-icon--success__ring { border-color: rgba(22, 163, 74, .25); }
.swal-icon--success__line { background-color: #16a34a; }

/* ---------- Estados de texto comunes en tablas ---------- */
body.marca .badge { white-space: nowrap; }
body.marca .badge.badge-pill { padding-left: .8em; padding-right: .8em; }
body.marca td .badge + .badge { margin-left: 4px; }

/* ---------- Carga ---------- */
body.marca.is-busy::before { opacity: 1; width: 100%; animation: none; background: linear-gradient(90deg, transparent, var(--brand), var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: marca-progress 1s linear infinite; }
#posLoadingModal .modal-content { border-radius: 20px; }

/* ---------- Varios: contenedores de página ---------- */
body.marca .page > #content > section > .container-fluid > .card:first-child,
body.marca .page > #content > .container-fluid > .card:first-child { margin-top: 4px; }
body.marca .page > #content > section, body.marca .page > #content > .container-fluid { animation-fill-mode: backwards; }
body.marca .no-print .btn + .btn, body.marca .container-fluid > .btn + .btn { margin-left: 6px; }
@media (max-width: 767px) {
  body.marca .page-head { padding: 10px 14px 0; }
  body.marca .page-head h1 { font-size: 20px; }
  body.marca .dataTables_wrapper .dataTables_filter label { max-width: none; }
  body.marca .dataTables_wrapper .dataTables_length, body.marca .dataTables_wrapper .dataTables_filter, body.marca .dataTables_wrapper .dt-buttons { text-align: left; margin-bottom: 6px; }
  body.marca .dt-buttons { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  body.marca .dataTables_wrapper .dataTables_info, body.marca .dataTables_wrapper .dataTables_paginate { text-align: center !important; }
  body.marca .dataTables_wrapper .dataTables_paginate .pagination { justify-content: center; }
}

/* ---------- Listados: la tabla vive en una tarjeta ---------- */
body.marca .dataTables_wrapper { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); padding: 16px 16px 12px; box-shadow: var(--shadow-sm); }
body.marca .card .dataTables_wrapper, body.marca .modal .dataTables_wrapper { background: transparent; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
body.marca .table-responsive > .dataTables_wrapper { min-width: 100%; }
body.marca .table td.nw, body.marca .table th.nw { white-space: nowrap; }
body.marca .table td.num, body.marca .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.marca .table td.num { font-weight: 600; }
body.marca .table td.muted-zero { color: #9ca3af; font-weight: 500; }
/* Acción principal de la página ("Añadir…") fuerte; importar/exportar, secundarias. */
body.marca .btn.btn-info:has(> .fa-plus), body.marca .btn.btn-info:has(> .dripicons-plus) { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); box-shadow: 0 6px 16px -8px rgba(var(--brand-rgb), .7); }
body.marca .btn.btn-info:has(> .fa-plus):hover, body.marca .btn.btn-info:has(> .dripicons-plus):hover { background: var(--brand-hover); color: var(--brand-contrast); }
body.marca .btn.btn-primary:has(> [class*="fa-file"]), body.marca .btn.btn-primary:has(> [class*="fa-upload"]), body.marca .btn.btn-primary:has(> [class*="fa-download"]) { background: #fff; border-color: var(--border); color: var(--text); box-shadow: var(--shadow-xs); }
body.marca .btn.btn-primary:has(> [class*="fa-file"]):hover, body.marca .btn.btn-primary:has(> [class*="fa-upload"]):hover, body.marca .btn.btn-primary:has(> [class*="fa-download"]):hover { background: var(--brand-softer); color: var(--brand-ink); }
/* Botones de fila dentro de tablas: discretos; eliminar en rojo suave. */
body.marca .table td > .btn-danger, body.marca .table td form .btn-danger, body.marca .table td > a.btn-danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; box-shadow: none; }
body.marca .table td > .btn-danger:hover, body.marca .table td form .btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
body.marca .table td > .btn-primary, body.marca .table td > .btn-info, body.marca .table td > a.btn-success { box-shadow: none; }
body.marca .table td .btn-sm, body.marca .table td > .btn { font-size: 12px; padding: .3rem .65rem; }
body.marca .page > #content .container-fluid > hr, body.marca .page > #content > section > hr { border-top: 1px solid var(--border); margin: 14px 0; opacity: .7; }
body.marca .table td.brk { word-break: break-all; min-width: 150px; font-size: 12px; color: #4b5563; }
body.marca .dataTables_wrapper.dt-scroll { overflow-x: auto; }
body.marca .dataTables_wrapper.dt-scroll::-webkit-scrollbar { height: 8px; }

/* Los elementos flotantes (filtros a la derecha) no invaden el bloque siguiente. */
body.marca .page > #content .container-fluid { display: flow-root; }
/* Barra de herramientas de las tablas: tamaño + buscador + exportar, se acomoda en cualquier pantalla. */
body.marca .dataTables_wrapper > .row:first-child { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-left: 0; margin-right: 0; }
body.marca .dataTables_wrapper > .row:first-child > .dataTables_length { order: 1; }
body.marca .dataTables_wrapper > .row:first-child > .dataTables_filter { order: 2; flex: 1 1 240px; display: flex; justify-content: flex-end; }
body.marca .dataTables_wrapper > .row:first-child > .dt-buttons { order: 3; }
@media (max-width: 767px) {
  body.marca .dataTables_wrapper > .row:first-child > .dataTables_filter { order: 0; flex-basis: 100%; }
  body.marca .dataTables_wrapper { padding: 12px 10px 10px; }
  body.marca .page > #content .container-fluid > .btn, body.marca .page > #content .container-fluid > a.btn { margin: 0 6px 8px 0; }
  body.marca .form-inline.float-right, body.marca .form-inline.float-left { float: none !important; width: 100%; margin: 8px 0 !important; }
  body.marca .alert { padding-left: 48px; }
}
body.marca .dropdown-item.active, body.marca .dropdown-item:active, body.marca .bootstrap-select .dropdown-menu li.active > a,
body.marca .bootstrap-select .dropdown-menu li a:focus, body.marca .dropdown-menu li.active > a { background: var(--brand-soft) !important; color: var(--brand-ink) !important; }
body.marca .bootstrap-select .dropdown-menu li a span.text { white-space: normal; }