/* =============================================================================
   DISEÑO NUEVO (v2) — capa encima de marca.css / marca-ui.css. Solo se carga con Marca y diseño → Versión = Diseño nuevo
   (App\Services\Brand::v2). Todo va bajo html.ui2: con la versión anterior este archivo no se carga.
   1) Tema claro / oscuro   2) Encabezado de página (acción principal + Más acciones)   3) Tablas
   4) Formularios por pasos   5) POS para tablet y celular   6) Detalles generales
   ============================================================================= */

/* ---------- 1) Tema oscuro: mismas variables de la marca, otros valores ---------- */
html.ui2[data-tema="oscuro"] {
  --bg: #0e1016; --surface: #161922; --border: #272c38; --text: #e6e8ee; --text-muted: #9aa3b4;
  --brand-soft: rgba(var(--brand-rgb), .20); --brand-softer: rgba(var(--brand-rgb), .10);
  color-scheme: dark;
}
html.ui2[data-tema="oscuro"] body,
html.ui2[data-tema="oscuro"] .page,
html.ui2[data-tema="oscuro"] .content-inner { background: var(--bg) !important; color: var(--text); }
html.ui2[data-tema="oscuro"] .card,
html.ui2[data-tema="oscuro"] .modal-content,
html.ui2[data-tema="oscuro"] .dropdown-menu,
html.ui2[data-tema="oscuro"] header.header,
html.ui2[data-tema="oscuro"] nav.navbar,
html.ui2[data-tema="oscuro"] .main-footer,
html.ui2[data-tema="oscuro"] .list-group-item,
html.ui2[data-tema="oscuro"] .bootstrap-select .dropdown-menu { background: var(--surface) !important; color: var(--text); border-color: var(--border) !important; }
html.ui2[data-tema="oscuro"] .card-header,
html.ui2[data-tema="oscuro"] .card-footer,
html.ui2[data-tema="oscuro"] .modal-header,
html.ui2[data-tema="oscuro"] .modal-footer { background: transparent !important; border-color: var(--border) !important; color: var(--text); }
html.ui2[data-tema="oscuro"] .bg-light,
html.ui2[data-tema="oscuro"] .bg-white,
html.ui2[data-tema="oscuro"] .table-striped tbody tr:nth-of-type(odd),
html.ui2[data-tema="oscuro"] .res-box { background: rgba(255,255,255,.035) !important; color: var(--text); }
html.ui2[data-tema="oscuro"] .table,
html.ui2[data-tema="oscuro"] .table td,
html.ui2[data-tema="oscuro"] .table th { color: var(--text); border-color: var(--border) !important; }
html.ui2[data-tema="oscuro"] .table thead th { background: rgba(255,255,255,.04) !important; color: var(--text-muted) !important; }
html.ui2[data-tema="oscuro"] .table-hover tbody tr:hover { background: rgba(var(--brand-rgb), .10) !important; }
html.ui2[data-tema="oscuro"] .form-control,
html.ui2[data-tema="oscuro"] .custom-select,
html.ui2[data-tema="oscuro"] .input-group-text,
html.ui2[data-tema="oscuro"] .bootstrap-select > .dropdown-toggle,
html.ui2[data-tema="oscuro"] .dataTables_filter input,
html.ui2[data-tema="oscuro"] .dataTables_length select { background: #10131a !important; color: var(--text) !important; border-color: var(--border) !important; }
html.ui2[data-tema="oscuro"] .form-control::placeholder { color: #6b7385; }
html.ui2[data-tema="oscuro"] .dropdown-item { color: var(--text); }
html.ui2[data-tema="oscuro"] .dropdown-item:hover { background: rgba(var(--brand-rgb), .16); color: var(--text); }
html.ui2[data-tema="oscuro"] .btn-light,
html.ui2[data-tema="oscuro"] .btn-default,
html.ui2[data-tema="oscuro"] .btn-outline-secondary { background: transparent; color: var(--text); border-color: var(--border); }
html.ui2[data-tema="oscuro"] .text-dark,
html.ui2[data-tema="oscuro"] h1, html.ui2[data-tema="oscuro"] h2, html.ui2[data-tema="oscuro"] h3,
html.ui2[data-tema="oscuro"] h4, html.ui2[data-tema="oscuro"] h5, html.ui2[data-tema="oscuro"] h6,
html.ui2[data-tema="oscuro"] label, html.ui2[data-tema="oscuro"] strong { color: var(--text); }
html.ui2[data-tema="oscuro"] .text-muted, html.ui2[data-tema="oscuro"] small { color: var(--text-muted) !important; }
html.ui2[data-tema="oscuro"] .alert-info { background: rgba(14,165,233,.12); color: #bae6fd; border-color: rgba(14,165,233,.3); }
html.ui2[data-tema="oscuro"] .alert-warning { background: rgba(245,158,11,.12); color: #fde68a; border-color: rgba(245,158,11,.3); }
html.ui2[data-tema="oscuro"] .alert-danger { background: rgba(239,68,68,.12); color: #fecaca; border-color: rgba(239,68,68,.3); }
html.ui2[data-tema="oscuro"] .alert-success { background: rgba(34,197,94,.12); color: #bbf7d0; border-color: rgba(34,197,94,.3); }
html.ui2[data-tema="oscuro"] .alert-secondary { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--border); }
html.ui2[data-tema="oscuro"] hr { border-color: var(--border); }
html.ui2[data-tema="oscuro"] .nav-pills .nav-link:not(.active) { color: var(--text-muted); }
html.ui2[data-tema="oscuro"] .rd-task, html.ui2[data-tema="oscuro"] .pr-store, html.ui2[data-tema="oscuro"] .ship-card { background: var(--surface); border-color: var(--border); }
html.ui2[data-tema="oscuro"] img { opacity: .94; }

/* Inicio (radar) en oscuro: avisos con fondo oscuro y texto legible */
html.ui2[data-tema="oscuro"] .rd-alert.rojo { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.35); }
html.ui2[data-tema="oscuro"] .rd-alert.naranja { background: rgba(234,122,12,.14); border-color: rgba(234,122,12,.35); }
html.ui2[data-tema="oscuro"] .rd-alert.amarillo { background: rgba(202,138,4,.14); border-color: rgba(202,138,4,.35); }
html.ui2[data-tema="oscuro"] .rd-alert .btn { background: transparent; color: var(--text); }
html.ui2[data-tema="oscuro"] .rd-allgood, html.ui2[data-tema="oscuro"] .rd-task.done { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.35); color: #bbf7d0; }
html.ui2[data-tema="oscuro"] .rd-progress, html.ui2[data-tema="oscuro"] .rd-badge { background: rgba(255,255,255,.08); }
html.ui2[data-tema="oscuro"] .rd-seg a:hover { background: rgba(255,255,255,.06); }
html.ui2[data-tema="oscuro"] .menu-btn, html.ui2[data-tema="oscuro"] #toggle-btn { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
html.ui2[data-tema="oscuro"] .pr-alerts .warn { background: rgba(234,122,12,.14); color: #fed7aa; border-color: rgba(234,122,12,.35); }
html.ui2[data-tema="oscuro"] .pr-alerts .bad { background: rgba(220,38,38,.14); color: #fecaca; border-color: rgba(220,38,38,.35); }

/* Botón de tema (🌙 / ☀️) en la barra de arriba */
html.ui2 .nav-menu > li.ui2-theme-li { display: flex; align-items: center; align-self: center; }
html.ui2 .ui2-theme-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
  color: var(--text, #111827); display: inline-grid; place-items: center; cursor: pointer; font-size: 16px; margin: 0 6px 0 0; padding: 0; line-height: 1; }
html.ui2 .ui2-theme-btn:hover { border-color: var(--brand); }

/* ---------- 2) Encabezado de página: una acción principal + "Más acciones" ---------- */
html.ui2 .ui2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
html.ui2 .ui2-toolbar .ui2-toolbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; }
html.ui2 .ui2-toolbar .ui2-primary { font-weight: 650; padding: 8px 16px; }
html.ui2 .ui2-toolbar .form-inline { float: none !important; }
html.ui2 .ui2-toolbar .form-inline label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
html.ui2 .ui2-more .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; }
html.ui2 .ui2-more .dropdown-item i { width: 16px; text-align: center; color: var(--text-muted); }
html.ui2 .ui2-hr-hidden { display: none; }

/* ---------- 3) Tablas: filas más aireadas, acciones como ⋮ ---------- */
html.ui2 table.dataTable tbody td, html.ui2 .table tbody td { padding-top: 11px; padding-bottom: 11px; }
html.ui2 table.dataTable thead th { position: sticky; top: 0; z-index: 2; }
html.ui2 .ui2-kebab.btn { width: 34px; height: 34px; padding: 0 !important; border-radius: 9px !important; display: inline-grid; place-items: center;
  background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; }
html.ui2 .ui2-kebab.btn::after { display: none !important; }
html.ui2 .ui2-kebab.btn:hover { border-color: var(--brand) !important; color: var(--brand) !important; }
html.ui2 .dataTables_wrapper .dt-buttons .btn, html.ui2 .dataTables_wrapper .dt-buttons button { font-size: 12.5px; }

/* ---------- 4) Formularios por pasos: índice fijo con las secciones ---------- */
html.ui2 .ui2-steps { position: sticky; top: 8px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px; margin: 0 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); scrollbar-width: none; }
html.ui2 .ui2-steps::-webkit-scrollbar { display: none; }
html.ui2 .ui2-steps a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; color: var(--text-muted);
  font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
html.ui2 .ui2-steps a b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--border); color: var(--text); font-size: 11.5px; }
html.ui2 .ui2-steps a:hover { background: var(--brand-softer); color: var(--text); }
html.ui2 .ui2-steps a.on { background: var(--brand-soft); color: var(--brand-ink, var(--brand)); }
html.ui2 .ui2-steps a.on b { background: var(--brand); color: var(--brand-contrast); }
html.ui2 .ui2-steps a.done b { background: #16a34a; color: #fff; }
html.ui2 .form-section-col { scroll-margin-top: 80px; }

/* ---------- 5) POS para tablet y celular ---------- */
html.ui2 .pos-section .btn { min-height: 42px; }
html.ui2 .pos-section .payment-btn, html.ui2 .pos-section #reserve-btn, html.ui2 .pos-section .btn-lg { min-height: 54px; font-size: 16px; font-weight: 700; border-radius: 14px; }
html.ui2 .pos-section .qty, html.ui2 .pos-section .input-number { min-height: 40px; font-size: 16px; text-align: center; }
html.ui2 .pos-section .input-group-btn .btn { min-width: 40px; }
html.ui2 .pos-section #product-table td { padding: 6px; }
html.ui2 .pos-section #product-table td > * { border-radius: 12px; }
@media (max-width: 991px) {
  html.ui2 .pos-section > .row > .col-md-8, html.ui2 .pos-section > .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; padding: 0 8px !important; }
}
@media (max-width: 767px) {
  html.ui2 .pos-section .totals, html.ui2 .pos-section .payment-amount { font-size: 15px; }
  /* En el celular la guía es un botón redondo pequeño para no tapar los botones de cobro */
  html.ui2 .guide-fab span { display: none; }
  html.ui2 .guide-fab { padding: 12px; }
}

/* ---------- 6) Detalles generales ---------- */
html.ui2 .card { border-radius: var(--radius); }
html.ui2 .btn { border-radius: var(--radius-sm); }
html.ui2 .nav-pills .nav-link { border-radius: 10px; font-weight: 600; }
html.ui2 .page-head h1, html.ui2 .page-title { letter-spacing: -.02em; }
html.ui2 :focus-visible { outline: 3px solid rgba(var(--brand-rgb), .35); outline-offset: 2px; }

/* ---------- 3b) Tablas limpias ---------- */
html.ui2 .ui2-noselect table.dataTable thead th:first-child,
html.ui2 .ui2-noselect table.dataTable tbody td:first-child,
html.ui2 .ui2-noselect table.dataTable tfoot th:first-child { display: none; }
html.ui2 .ui2-noselect .buttons-delete { display: none !important; }
html.ui2 .dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px !important; align-items: center; }
html.ui2 .dt-buttons > .btn, html.ui2 .dt-buttons > .btn-group > .btn { border-radius: 10px !important; }
html.ui2 .ui2-export .dropdown-menu .dropdown-item { border: 0 !important; border-radius: 0 !important; height: auto !important; padding: 8px 14px !important; text-align: left; width: 100%; background: transparent; }
html.ui2 .ui2-select-btn.active { background: var(--brand-soft) !important; border-color: var(--brand) !important; }
html.ui2 tr.ui2-rowlink { cursor: pointer; }
html.ui2 tr.ui2-rowlink:hover td { background: var(--brand-softer) !important; }
html.ui2 table .badge { text-transform: lowercase; }
html.ui2 table .badge::first-letter { text-transform: uppercase; }
html.ui2 .ui2-noimg { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink, var(--brand)); font-weight: 750; font-size: 17px; }
/* Celular vertical: cada fila es una tarjeta que cabe completa en la pantalla (en horizontal y en computadora sigue la tabla normal) */
@media (max-width: 767px) {
  html.ui2 table.ui2-cards { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  html.ui2 table.ui2-cards thead { display: none; }
  html.ui2 table.ui2-cards, html.ui2 table.ui2-cards tbody, html.ui2 table.ui2-cards tr, html.ui2 table.ui2-cards td { display: block; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  html.ui2 table.ui2-cards tr { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; padding: 8px 6px; background: var(--surface); }
  html.ui2 table.ui2-cards td { border: 0 !important; padding: 4px 10px !important; text-align: left !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; white-space: normal !important; overflow-wrap: anywhere; font-size: 14px; }
  html.ui2 table.ui2-cards td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-muted); flex: 0 1 auto; }
  html.ui2 table.ui2-cards td.dataTables_empty { display: block; }
  html.ui2 table.ui2-cards td.dataTables_empty::before { content: none; }
  html.ui2 .dataTables_wrapper .table-responsive, html.ui2 .dt-scroll { overflow: visible !important; }
}

/* ---------- Arreglos móviles ---------- */
/* Selectores con buscador: el contenedor no debe dibujar un segundo borde alrededor del botón. */
html.ui2 .bootstrap-select.form-control { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; height: auto !important; min-height: 0 !important; }
/* Índice de pasos: debajo de la barra superior, no detrás de ella, y cabe en una sola fila. */
html.ui2 .ui2-steps { top: calc(var(--header-h, 64px) + 8px); }
html.ui2 [id^="paso-"], html.ui2 .form-section-col { scroll-margin-top: calc(var(--header-h, 64px) + 80px); }
@media (max-width: 767px) {
  html.ui2 .ui2-steps { gap: 4px; padding: 6px; }
  html.ui2 .ui2-steps a { flex: 1 1 0; min-width: 0; justify-content: center; gap: 5px; padding: 7px 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  html.ui2 .ui2-steps a b { flex: 0 0 auto; width: 20px; height: 20px; }
  /* Fila de totales de las tablas: ancho completo, no una tarjeta angosta. */
  html.ui2 table.ui2-cards tfoot, html.ui2 table.ui2-cards tfoot tr, html.ui2 table.ui2-cards tfoot th { display: block; width: 100% !important; max-width: 100% !important; }
  html.ui2 table.ui2-cards tfoot tr { border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; background: var(--surface); }
  html.ui2 table.ui2-cards tfoot th { border: 0 !important; padding: 2px 0 !important; text-align: left !important; }
  html.ui2 table.ui2-cards tfoot th:empty { display: none; }
}
@media (max-width: 767px) {
  /* Barra de totales de compra/venta/cotización: 2 por fila en vez de una tira de 700px. */
  html.ui2 table.totals, html.ui2 table.totals tbody { display: block; width: 100% !important; max-width: 100% !important; }
  html.ui2 table.totals tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; }
  html.ui2 table.totals tr td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 6px; width: auto !important; min-width: 0; height: auto !important; padding: 6px 10px !important; font-size: 13px; line-height: 1.3; }
  html.ui2 table.totals tr td br { display: none; }
  html.ui2 table.totals tr td .btn-link { padding: 0 4px; margin: 0 auto 0 0; line-height: 1; min-height: 0; }
  html.ui2 table.totals tr td small { flex: 0 0 100%; }
  html.ui2 table.totals tr td > span, html.ui2 table.totals tr td .pull-right { float: none !important; margin-left: auto; font-size: 15px; font-weight: 700; }
}
@media (max-width: 767px) {
  /* Tablas anchas sin contenedor (guías, notas de crédito/débito, retenciones): se desplazan dentro de su caja, no la página. */
  html.ui2 .col-lg-12 > table.table:not(.dataTable):not(.totals) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Grupos de botones tipo interruptor: pasan a la línea siguiente en vez de salirse de la pantalla. */
  html.ui2 .btn-group-toggle { flex-wrap: wrap; max-width: 100%; }
}
@media (max-width: 767px) { html.ui2 .pagination { flex-wrap: wrap; justify-content: center; row-gap: 4px; } }