/* =============================================================================
   FILE: /app/ps_tokens.css
   -----------------------------------------------------------------------------
   LOS TOKENS DE LA PLATAFORMA, SOBRE LAS VARIABLES DE BOOTSTRAP 5.

   Bootstrap 5.3 dibuja cada componente leyendo variables CSS (--bs-*). Si se
   cambian esas variables, TODOS los botones, tarjetas, modales, menus, tablas y
   campos cambian juntos, sin tocar ninguna pantalla. Esta hoja es el lugar
   donde la plataforma dice como se ve: radios, fuente, foco, sombras y la
   paleta del modo oscuro. Carga justo despues de Bootstrap y antes de las hojas
   propias (ui.css, admin-modern.css, admin-theme.css), que siguen mandando en lo
   suyo.

   Regla de la casa: NADA CUADRADO. Los radios estan aca y en ningun otro lado;
   los cuadrados que quedan son de Bootstrap y se pisan desde aqui.

   Los colores de marca (verde, naranja) ya viven en ui.css y admin-theme.css
   como --ps-*; esta hoja no los duplica. Cuando las pantallas se migren de a
   una (paso 2), sus estilos propios van saliendo y estas variables van quedando.
   ============================================================================= */

:root {
  /* Fuente: la que ya usa el panel (ui.css la define; si no esta, la del sistema). */
  --bs-font-sans-serif: var(--ps-font, "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* Nada cuadrado. */
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-radius-xxl: 1.5rem;
  --bs-border-radius-pill: 50rem;

  /* Foco visible pero suave, del color de la marca. */
  --bs-focus-ring-width: .2rem;
  --bs-focus-ring-color: rgba(34, 217, 137, .35);

  /* Sombras: tres niveles y no mas. */
  --ps-sombra-1: 0 1px 2px rgba(15, 23, 42, .05);
  --ps-sombra-2: 0 4px 12px rgba(15, 23, 42, .08);
  --ps-sombra-3: 0 12px 32px rgba(15, 23, 42, .14);
}

/* ── Componentes: heredan el radio, con el nivel que le corresponde a cada uno ── */
.btn            { --bs-btn-border-radius: var(--bs-border-radius); }
.btn-sm         { --bs-btn-border-radius: var(--bs-border-radius-sm); }
.btn-lg         { --bs-btn-border-radius: var(--bs-border-radius-lg); }
.card           { --bs-card-border-radius: var(--bs-border-radius-lg);
                  --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px); }
.modal          { --bs-modal-border-radius: var(--bs-border-radius-xl);
                  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-xl) - 1px);
                  --bs-modal-box-shadow: var(--ps-sombra-3); }
.dropdown-menu  { --bs-dropdown-border-radius: var(--bs-border-radius);
                  --bs-dropdown-box-shadow: var(--ps-sombra-2); box-shadow: var(--bs-dropdown-box-shadow); }
.alert          { --bs-alert-border-radius: var(--bs-border-radius); }
.badge          { --bs-badge-border-radius: var(--bs-border-radius-sm); }
.toast          { --bs-toast-border-radius: var(--bs-border-radius); --bs-toast-box-shadow: var(--ps-sombra-2); }
.list-group     { --bs-list-group-border-radius: var(--bs-border-radius); }
.nav-pills      { --bs-nav-pills-border-radius: var(--bs-border-radius); }
.nav-tabs       { --bs-nav-tabs-border-radius: var(--bs-border-radius); }
.pagination     { --bs-pagination-border-radius: var(--bs-border-radius); }
.progress       { --bs-progress-border-radius: var(--bs-border-radius-pill); }
.offcanvas      { --bs-offcanvas-box-shadow: var(--ps-sombra-3); }
.popover        { --bs-popover-border-radius: var(--bs-border-radius); --bs-popover-box-shadow: var(--ps-sombra-2); }
.tooltip        { --bs-tooltip-border-radius: var(--bs-border-radius-sm); }
.accordion      { --bs-accordion-border-radius: var(--bs-border-radius);
                  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - 1px); }

.form-control, .form-select, .input-group-text { border-radius: var(--bs-border-radius); }
.form-control-sm, .form-select-sm { border-radius: var(--bs-border-radius-sm); }
.form-control-lg, .form-select-lg { border-radius: var(--bs-border-radius-lg); }
.form-check-input { border-radius: .35em; }
.form-check-input[type="radio"] { border-radius: 50%; }
.table:not(.table-borderless) > :not(caption) > * > * { vertical-align: middle; }

/* ── Modo oscuro: la paleta que el panel ya usa, sobre las variables de la 5 ──
   Los componentes de Bootstrap (modal, menu, tarjeta, tabla, campos) leen
   --bs-body-bg y compania. Con estos valores se pintan solos del mismo azul
   oscuro que footer.php y admin_theme_include.php ya usan para lo demas; asi no
   queda un modal blanco en una pagina oscura, ni dos oscuros distintos.
   Solo el selector explicito: el tema se elige en la app, no en el sistema. */
html[data-ps-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: #1b2735;
  --bs-body-bg-rgb: 27, 39, 53;
  --bs-body-color: #eef4ff;
  --bs-body-color-rgb: 238, 244, 255;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-bg: #22303f;
  --bs-secondary-bg-rgb: 34, 48, 63;
  --bs-tertiary-bg: #2b394d;
  --bs-tertiary-bg-rgb: 43, 57, 77;
  --bs-secondary-color: rgba(238, 244, 255, .75);
  --bs-secondary-color-rgb: 238, 244, 255;
  --bs-tertiary-color: rgba(238, 244, 255, .5);
  --bs-tertiary-color-rgb: 238, 244, 255;
  --bs-heading-color: inherit;
  --bs-border-color: #4b5e78;
  --bs-border-color-translucent: rgba(255, 255, 255, .12);
  --bs-link-color: #8fb8ff;
  --bs-link-color-rgb: 143, 184, 255;
  --bs-link-hover-color: #b3ceff;
  --bs-link-hover-color-rgb: 179, 206, 255;
  --bs-code-color: #f4a1ff;
  --bs-highlight-bg: #4a3b00;
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
  --ps-sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
  --ps-sombra-2: 0 4px 12px rgba(0, 0, 0, .45);
  --ps-sombra-3: 0 12px 32px rgba(0, 0, 0, .55);
}
html[data-ps-theme="dark"] .form-control,
html[data-ps-theme="dark"] .form-select,
html[data-ps-theme="dark"] .input-group-text {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
html[data-ps-theme="dark"] .form-control::placeholder { color: var(--bs-tertiary-color); }
html[data-ps-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-ps-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-ps-theme="dark"] .table { --bs-table-color: var(--bs-body-color); --bs-table-bg: transparent;
                                     --bs-table-border-color: var(--bs-border-color);
                                     --bs-table-striped-bg: rgba(255, 255, 255, .03);
                                     --bs-table-hover-bg: rgba(255, 255, 255, .06); }
html[data-ps-theme="dark"] .modal-backdrop { --bs-backdrop-opacity: .7; }

/* ═══ Barras de desplazamiento en oscuro (02/10/2026). Sin esto Chrome dibujaba la
   barra clara de Windows dentro de los paneles oscuros (el resumen del mostrador, los
   modales largos). Redondeadas, como todo lo demas. ═══ */
html[data-ps-theme="dark"] { scrollbar-color: #40536c #0f172a; }
html[data-ps-theme="dark"] * { scrollbar-color: #40536c transparent; scrollbar-width: thin; }
html[data-ps-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-ps-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-ps-theme="dark"] ::-webkit-scrollbar-thumb { background: #40536c; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
html[data-ps-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #54708f; background-clip: padding-box; }

/* ══ Botones: UNA sola forma en toda la plataforma (ps-forma-boton v2) ══════════
   Esquinas redondeadas y la esquina inferior izquierda casi recta: la "esquinita"
   de Pídelo Simple, como la cola de una burbuja de pedido. Es nuestra marca en
   cada botón, sin importar el color. Vale para <button>, .btn, los enlaces y divs
   que se visten de botón (cualquier clase con "btn", role="button", .cta-btn…).
   Marcar, pasar el mouse o apretar puede cambiar color y sombra, nunca la forma:
   nada de scale, translate ni cambios de radio; el anillo de foco sigue la esquina.
   Los botones pegados (btn-group, input-group) se separan con aire y cada uno
   conserva su forma. Afuera quedan los controles que no son botones de acción:
   cerrar (×), el flotante redondo, pestañas, menús desplegables, acordeones, la
   cabecera de las mesas cerradas, la paleta, los interruptores. Escape: .ps-sin-forma. */
:where(html) :is(#ps-pos-prioridad, .btn, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], a[class*="btn"], div[class*="btn"], span[class*="btn"], label.btn, .ps-btn, .bw-btn, .psdm__btn, .credito-flag, .btn-round, .cta-btn, .ps-bw-tab, .bw-tab):not(.btn-close):not(.btn-group):not(.btn-group-vertical):not(.btn-toolbar):not(.btn-check):not(.ps-fab):not(.nav-link):not(.dropdown-item):not(.dropdown-menu):not(.list-group-item):not(.accordion-button):not(.navbar-toggler):not(.page-link):not(.ps-paleta *):not(.form-check-input):not(.form-check):not(.form-switch):not(.leaflet-control *):not(.leaflet-popup-close-button):not(.swiper-button-prev):not(.swiper-button-next):not(.mc-cab):not(.rounded-circle):not(.psbn-x):not([class$="-x"]):not([class*="-close"]):not([aria-label="Cerrar"]):not([aria-label="Close"]):not(.ps-sin-forma):not([class*="carousel-control"]):not([class*="btn-wrap"]):not([class*="btn-box"]):not([class*="btn-row"]):not([class*="btns"]) {
  border-radius: 12px 12px 12px 4px !important;
}
:where(html) :is(#ps-pos-prioridad, .btn-sm, .btn-group-sm > .btn):not(.btn-close):not(.btn-group):not(.btn-group-vertical):not(.btn-toolbar):not(.btn-check):not(.ps-fab):not(.nav-link):not(.dropdown-item):not(.dropdown-menu):not(.list-group-item):not(.accordion-button):not(.navbar-toggler):not(.page-link):not(.ps-paleta *):not(.form-check-input):not(.form-check):not(.form-switch):not(.leaflet-control *):not(.leaflet-popup-close-button):not(.swiper-button-prev):not(.swiper-button-next):not(.mc-cab):not(.rounded-circle):not(.psbn-x):not([class$="-x"]):not([class*="-close"]):not([aria-label="Cerrar"]):not([aria-label="Close"]):not(.ps-sin-forma):not([class*="carousel-control"]):not([class*="btn-wrap"]):not([class*="btn-box"]):not([class*="btn-row"]):not([class*="btns"]) {
  border-radius: 10px 10px 10px 3px !important;
}
:where(html) :is(#ps-pos-prioridad, .btn-lg, .btn-group-lg > .btn):not(.btn-close):not(.btn-group):not(.btn-group-vertical):not(.btn-toolbar):not(.btn-check):not(.ps-fab):not(.nav-link):not(.dropdown-item):not(.dropdown-menu):not(.list-group-item):not(.accordion-button):not(.navbar-toggler):not(.page-link):not(.ps-paleta *):not(.form-check-input):not(.form-check):not(.form-switch):not(.leaflet-control *):not(.leaflet-popup-close-button):not(.swiper-button-prev):not(.swiper-button-next):not(.mc-cab):not(.rounded-circle):not(.psbn-x):not([class$="-x"]):not([class*="-close"]):not([aria-label="Cerrar"]):not([aria-label="Close"]):not(.ps-sin-forma):not([class*="carousel-control"]):not([class*="btn-wrap"]):not([class*="btn-box"]):not([class*="btn-row"]):not([class*="btns"]) {
  border-radius: 14px 14px 14px 5px !important;
}
:where(html) :is(#ps-pos-prioridad, .btn, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], a[class*="btn"], div[class*="btn"], span[class*="btn"], label.btn, .ps-btn, .bw-btn, .psdm__btn, .credito-flag, .btn-round, .cta-btn, .ps-bw-tab, .bw-tab):is(:hover, :active, :focus, :focus-visible, .active, [aria-selected="true"], [aria-pressed="true"]) {
  transform: none !important;
  scale: none !important;
  translate: none !important;
  rotate: none !important;
}
:where(html) :is(#ps-pos-prioridad, .btn, button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], a[class*="btn"], div[class*="btn"], span[class*="btn"], label.btn, .ps-btn, .bw-btn, .psdm__btn, .credito-flag, .btn-round, .cta-btn, .ps-bw-tab, .bw-tab):not(.btn-close):not(.btn-group):not(.btn-group-vertical):not(.btn-toolbar):not(.btn-check):not(.ps-fab):not(.nav-link):not(.dropdown-item):not(.dropdown-menu):not(.list-group-item):not(.accordion-button):not(.navbar-toggler):not(.page-link):not(.ps-paleta *):not(.form-check-input):not(.form-check):not(.form-switch):not(.leaflet-control *):not(.leaflet-popup-close-button):not(.swiper-button-prev):not(.swiper-button-next):not(.mc-cab):not(.rounded-circle):not(.psbn-x):not([class$="-x"]):not([class*="-close"]):not([aria-label="Cerrar"]):not([aria-label="Close"]):not(.ps-sin-forma):not([class*="carousel-control"]):not([class*="btn-wrap"]):not([class*="btn-box"]):not([class*="btn-row"]):not([class*="btns"]):is(:focus, :focus-visible) {
  outline-offset: 2px;
}
:where(html) .btn-check:checked + :is(#ps-pos-prioridad, .btn), :where(html) .btn-check:focus + :is(#ps-pos-prioridad, .btn), :where(html) .btn-check:active + :is(#ps-pos-prioridad, .btn) {
  border-radius: 12px 12px 12px 4px !important;
  transform: none !important;
}
:where(html) :is(.btn, button, .ps-btn, .bw-btn, .psdm__btn, .credito-flag, .btn-round, .cta-btn, a[class*="btn"]) {
  transition-property: color, background-color, border-color, box-shadow, opacity, filter !important;
}

/* ── Botones pegados: se separan. Cada botón con su forma y 6px de aire. ── */
:where(html) :is(.btn-group, .btn-group-vertical, .btn-toolbar) { gap: 6px; }
:where(html) :is(.btn-group, .btn-group-vertical) > :is(.btn, button) { margin-left: 0 !important; margin-top: 0 !important; }
:where(html) .input-group > :is(.btn, button) { margin-left: 6px !important; }
:where(html) .input-group > :is(.btn, button):first-child { margin-left: 0 !important; margin-right: 6px !important; }
:where(html) .input-group > :is(.btn, button):not(:last-child) { margin-right: 6px !important; }
/* El campo que venía pegado al botón recupera su esquina de ese lado. */
:where(html) .input-group > :is(.form-control, .form-select, .input-group-text):has(+ :is(.btn, button)) {
  border-top-right-radius: var(--bs-border-radius, .375rem) !important;
  border-bottom-right-radius: var(--bs-border-radius, .375rem) !important;
}
:where(html) .input-group > :is(.btn, button) + :is(.form-control, .form-select, .input-group-text) {
  border-top-left-radius: var(--bs-border-radius, .375rem) !important;
  border-bottom-left-radius: var(--bs-border-radius, .375rem) !important;
}

/* ── Botones vecinos: nunca pegados. Un pie de modal, una fila de acciones o un
   formulario con dos botones seguidos lleva 8px de aire entre ellos. Solo se
   toca el contenedor cuyo contenido directo son botones (sin campos, filas ni
   texto), para no reacomodar nada más. ── */
:where(html) .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
:where(html) .modal-footer > * { margin: 0; }
:where(html) :is(div, form, span):has(> :is(.btn, button, a[class*="btn"]) + :is(.btn, button, a[class*="btn"])):not(.btn-group):not(.btn-group-vertical):not(.btn-toolbar):not(.input-group):not(.pagination):not(.ps-android-tools-grid):not(.ps-paleta):not([class*="gap-"]):not(.d-grid):not(:has(> :is(input:not([type="hidden"]), select, textarea, .form-control, .form-select, .row, [class*="col-"], table, ul, ol, p, h1, h2, h3, h4, h5, h6))) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
:where(html) :is(.text-end, .text-right, .modal-footer form, .modal-footer div):has(> :is(.btn, button, a[class*="btn"]) + :is(.btn, button, a[class*="btn"])) { justify-content: flex-end; }
:where(html) .text-center:has(> :is(.btn, button, a[class*="btn"]) + :is(.btn, button, a[class*="btn"])) { justify-content: center; }
:where(html) .justify-content-between:has(> :is(.btn, button, a[class*="btn"]) + :is(.btn, button, a[class*="btn"])) { justify-content: space-between; }