/* ============================================================
   El Tiliche — Design System v2
   Capa aditiva cargada DESPUES de style.css: no edita reglas
   existentes, solo redefine tokens (:root) y agrega un set
   acotado de overrides.

   v2 (2026-08-14): paleta y tipografia unificadas con el
   dashboard "Torre de Control" (el-tiliche-frontend, proyecto
   hermano fuera de este repo) -- verde de marca mas vivo, negro
   con matiz verde en modo oscuro, tipografia Inter. Valores
   extraidos en vivo del dashboard (tokens oklch reales, no
   aproximados a ojo) vía canvas para convertir a sRGB exacto.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Paleta neutra */
  --surface-bg: #F7F8F7;
  --surface-card: #FFFFFF;
  --surface-sunken: #F0F1EF;
  --text-strong: #1F2421;
  --text-muted: #6B7280;
  --border-subtle: #E5E7E5;

  /* Verde de marca -- igualado al --primary/--chart-1 real del
     dashboard de Metricas (oklch(64% .19 149) -> #0EA254 en sRGB,
     ligeramente atenuado desde el #00AA43 exacto del dashboard para
     que el texto blanco sobre boton/pill siga siendo legible; el
     dashboard nunca pone texto sobre su verde, solo lo usa como
     acento sobre fondo oscuro, por eso puede ser mas vivo ahi). */
  --primary: #0EA254;
  --primary-hover: #0B8443;
  --rgba-primary-1: rgba(14, 162, 84, 0.1);
  --rgba-primary-2: rgba(14, 162, 84, 0.2);

  /* --green-700/--green-100 son un segundo token de verde, definido
     aparte en style.css (linea ~101) y usado por .pill-tabs/#posTabs
     y los quick-btns de Punto de Venta (Efectivo/Rewards/etc) -- se
     habian quedado con el verde viejo (#2C6B4A) porque nunca
     dependieron de --primary. Se realinean aqui para que TODO el
     verde del ERP sea el mismo. */
  --green-700: var(--primary);
  --green-100: #DCF3E5;

  /* Bootstrap ya usa estas variables en body, tablas, etc. */
  --bs-body-bg: var(--surface-bg);
  --bs-body-color: var(--text-strong);
  --bs-body-font-family: 'Inter', 'Nunito', sans-serif;

  /* Spacing — grid de 8px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Escala tipografica -- coincide con los valores reales medidos
     en el dashboard de Metricas (h1 24px/600, card-title 16px/600,
     subtitulo 14px/400). */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
}

[data-theme-version="dark"] {
  /* Negro con matiz verde -- igualado a --background/--card/--sidebar
     del dashboard de Metricas en vez del gris-carbon generico que
     tenia antes. */
  --surface-bg: #050905;
  --surface-card: #0A110C;
  --surface-sunken: #020402;
  --text-strong: #EDF4EE;
  --text-muted: #909C92;
  --border-subtle: #222C24;

  /* La plantilla original maneja fondo del body/sidebar/header con
     estas 3 variables propias (#1E1E25/#2D2D37 hardcoded) en vez de
     las nuestras -- se reconectan aqui para que TODO el chrome (no
     solo .content-body/.card) use el negro con matiz verde. */
  background: var(--surface-bg);
  --nav-headbg: var(--surface-sunken);
  --sidebar-bg: var(--surface-sunken);
  --headerbg: var(--surface-sunken);
}

[data-theme-version="dark"] .card {
  background-color: var(--surface-card);
}

/* ---- "Botones/tarjetas en blanco" en modo oscuro ----
   .pill-tabs/#posTabs (Punto de Venta, Ordenes-Compra, cualquier
   pantalla con pestanas) y las utilidades de Bootstrap .bg-white/
   .bg-light/.alert-light tienen su color de fondo hardcodeado con
   !important (nacieron pensando solo en modo claro, antes de que
   existiera el toggle) -- por eso se quedaban blancas/planas en
   medio de una pantalla negra. Se sobreescriben especificamente en
   dark en vez de tocar el --bs-white-rgb global (eso rompería
   .text-white, que SI debe seguir blanco sobre botones de color). */
[data-theme-version="dark"] #posTabs.nav-tabs .nav-link,
[data-theme-version="dark"] .pill-tabs.nav-tabs .nav-link {
  background: var(--surface-card) !important;
  color: var(--text-strong) !important;
  border-color: var(--border-subtle) !important;
}

[data-theme-version="dark"] #posTabs.nav-tabs .nav-link.active,
[data-theme-version="dark"] .pill-tabs.nav-tabs .nav-link.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

[data-theme-version="dark"] .bg-white,
[data-theme-version="dark"] .bg-light {
  background-color: var(--surface-card) !important;
}

[data-theme-version="dark"] .alert-light {
  background-color: var(--surface-sunken);
  border-color: var(--border-subtle);
  color: var(--text-strong);
}

/* ---- Componentes base ---- */

.content-body {
  background-color: var(--surface-bg);
}

.card {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
  box-shadow: 0 1px 2px rgba(16, 24, 22, 0.04), 0 1px 6px rgba(16, 24, 22, 0.04);
}

/* Selector de elemento "table" (no ".table") a proposito: muchas
   tablas del ERP usan table-bordered/table-hover/table-sm/etc. SIN
   la clase base "table" (~35 pantallas) -- el selector de elemento
   cubre todos los casos sin importar que combinacion de clases tengan. */
table {
  color: var(--text-strong);
}

table > :not(caption) > * > * {
  border-bottom-color: var(--border-subtle);
}

/* ---- Tipografia unificada -- misma escala/peso que el dashboard
   de Metricas (titulo 24px/600/-0.6px, card-title 16px/600/-0.32px,
   texto secundario 14px/400). Selectores de clase compartida por
   TODAS las pantallas (heading/card-title vienen de la plantilla
   base) -- no requiere tocar el markup de cada modulo. */

.page-titles .heading {
  color: var(--text-strong);
  font-family: 'Inter', 'Nunito', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 2rem;
  letter-spacing: -0.02em;
}

.card-title,
.card-header .card-title,
.card-header h4,
.card-header h5 {
  color: var(--text-strong);
  font-family: 'Inter', 'Nunito', sans-serif;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.text-muted {
  color: var(--text-muted) !important;
}

/* ---- Panel: tarjetas de estadisticas (Caja/Ingresos/Retiros/etc.) ----
   Fondo blanco/superficie neutra con numero y etiqueta en el color
   semantico que le corresponde -- NO relleno solido de color (eso
   es justo el patron viejo de la plantilla que se estaba repitiendo). */

.panel-stat-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 2px rgba(16, 24, 22, 0.04), 0 1px 6px rgba(16, 24, 22, 0.04);
}

.panel-stat-card .title h4,
.panel-stat-card .title i,
.panel-stat-card .chart-num h2 {
  color: var(--stat-accent);
}

.panel-stat-card .title h4 small {
  color: var(--stat-accent);
  opacity: 0.75;
}

.panel-stat-card.accent-verde {
  --stat-accent: var(--primary);
  --stat-accent-tint: var(--rgba-primary-1);
}

.panel-stat-card.accent-rojo {
  --stat-accent: #D64545;
  --stat-accent-tint: rgba(214, 69, 69, 0.1);
}

.panel-stat-card.accent-azul {
  --stat-accent: #2F80B0;
  --stat-accent-tint: rgba(47, 128, 176, 0.1);
}

/* Caja/Ingresos/Retiros/Abonos/Clientes: 5 tarjetas del mismo tamano en
   una sola fila, sin carrusel -- en escritorio no deben pasar a una
   segunda fila. */
.panel-stat-row > [class^="col"] {
  display: flex;
}

.panel-stat-row .panel-stat-card {
  width: 100%;
}

@media (min-width: 992px) {
  .panel-stat-row {
    flex-wrap: nowrap;
  }
}

.crypto-Swiper .swiper-slide {
  height: auto;
}

.crypto-Swiper .swiper-slide .panel-stat-card {
  height: 100%;
}

.panel-stat-card .card-body {
  padding: var(--space-3) !important;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-stat-card .chart-num h2 {
  font-size: 1.05rem;
  white-space: nowrap;
}

.panel-stat-card .title h4 {
  font-size: 0.75rem;
}

.panel-stat-card .title i {
  font-size: 26px !important;
}

.panel-cambio {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--stat-accent-tint);
  color: var(--stat-accent);
}

/* ---- "Concentrado de ventas y abonos" (Panel/Inicio) ----
   Reemplaza la dona ApexCharts (multicolor, nunca se invocaba en el JS
   -- codigo muerto) por una lista con barra de progreso, un solo color
   (verde de marca), mismo lenguaje que el widget "Mensajes por canal"
   de referencia (ConUnBOT) que Martin mostro. */
.panel-payment-row {
  margin-bottom: var(--space-4);
}
.panel-payment-row:last-child {
  margin-bottom: 0;
}
.panel-payment-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
  margin-top: var(--space-1);
}
.panel-payment-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ---- "Notas Vencidas" (Panel/Inicio) ----
   Fila simple: icono+nombre a la izquierda, monto a la derecha, todo en
   una sola linea con flex -- la primera version copiaba el ancho del
   icono (120%) de garantias_por_vencer.php, que vivia en una columna
   angosta (col-lg-4); en la tarjeta de ancho completo de Notas Vencidas
   ese mismo 120% se veia como una barra roja enorme, y el monto (en su
   propio div .text-end debajo del nombre) quedaba visualmente separado
   de su fila. */
.notas-vencidas-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.notas-vencidas-row:last-child {
  border-bottom: none;
}
.notas-vencidas-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.notas-vencidas-info i {
  color: #D64545;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.notas-vencidas-info a {
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notas-vencidas-info a:hover {
  color: var(--primary);
}
.notas-vencidas-monto {
  color: #D64545;
  font-weight: 700;
  white-space: nowrap;
}

/* Lapiz de "editar Objetivo Mes" -- mismo lenguaje "icono fantasma" que
   Editar/Eliminar en tablas (table .btn-sm mas arriba): mudo por defecto,
   color de marca solo al pasar el mouse, contorno en vez de solido. */
.panel-objetivo-edit {
  cursor: pointer;
  font-size: 0.7rem;
  margin-left: var(--space-2);
  vertical-align: middle;
  color: var(--text-muted);
  opacity: 0.6;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.panel-objetivo-edit:hover {
  color: var(--primary);
  opacity: 1;
}

/* ---- Botones de accion en tablas (Editar/Eliminar/Ver/etc.) ----
   El markup ya usa consistentemente btn-warning/btn-danger/btn-info/
   btn-success + btn-sm en ~39 pantallas (editar/eliminar/ver/aprobar).
   Se reestiliza a icono "fantasma" (sin relleno) en vez del boton
   solido de color, sin tocar el HTML/PHP de cada pantalla. */

table .btn-sm {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
}

table .btn-sm i {
  font-size: 0.95rem;
}

/* !important en el color de las 4 reglas de abajo (y sus :hover) es
   defensivo, no solo para el bug ya visto en .btn-info: cualquier
   .btn-warning/.btn-danger/.btn-success/.btn-primary global que se
   agregue despues en este archivo (p.ej. para "estandarizar" ese
   boton en todo el ERP, como ya paso con .btn-info en la linea ~605)
   y fuerce su propio color con !important le ganaria a estas reglas
   por orden de carga si no llevan !important tambien -- icono del
   mismo color que el fondo = boton invisible en la tabla. */
table .btn-warning.btn-sm {
  color: #B7791F !important;
}

table .btn-warning.btn-sm:hover {
  background-color: rgba(183, 121, 31, 0.12) !important;
  color: #92600F !important;
}

table .btn-danger.btn-sm {
  color: #D64545 !important;
}

table .btn-danger.btn-sm:hover {
  background-color: rgba(214, 69, 69, 0.12) !important;
  color: #B23434 !important;
}

table .btn-info.btn-sm {
  color: #2F80B0 !important;
}

table .btn-info.btn-sm:hover {
  background-color: rgba(47, 128, 176, 0.12) !important;
  border-color: transparent !important;
  color: #256690 !important;
}

table .btn-success.btn-sm,
table .btn-primary.btn-sm {
  color: var(--primary) !important;
}

table .btn-success.btn-sm:hover,
table .btn-primary.btn-sm:hover {
  background-color: var(--rgba-primary-1) !important;
  color: var(--primary-hover) !important;
}

/* ---- Toggle de modo oscuro (header) ---- */

/* Tema usa Boxicons, la campana usa Font Awesome -- tamanos por
   defecto distintos entre libs. Se fuerzan iguales para que los
   iconos del header se vean del mismo tamano. */
#theme-version-toggle i,
.header-right .notification_dropdown > .nav-link > i {
  font-size: 1.15rem;
  line-height: 1;
}

/* ---- Badge de estado de conexion (header) ----
   Reemplaza el boton de busqueda/estrella. Refleja si el servidor
   (y su base de datos) responde -- verde = conectado, ambar =
   intermitente (algun ping reciente fallo), rojo = sin conexion.
   Los 3 colores reutilizan los acentos semanticos ya establecidos
   (verde de marca, ambar de btn-warning, rojo de btn-danger). */

.connection-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  background: var(--conn-tint, var(--surface-sunken));
  color: var(--conn-color, var(--text-muted));
  transition: background-color 0.2s ease, color 0.2s ease;
}

.connection-status .connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--conn-color, var(--text-muted));
}

.connection-status.is-online {
  --conn-color: var(--primary);
  --conn-tint: var(--rgba-primary-1);
}

.connection-status.is-online .connection-dot {
  animation: connection-pulse 2s ease-in-out infinite;
}

.connection-status.is-flaky,
.connection-status.is-session-expired {
  --conn-color: #B7791F;
  --conn-tint: rgba(183, 121, 31, 0.12);
}

.connection-status.is-offline {
  --conn-color: #D64545;
  --conn-tint: rgba(214, 69, 69, 0.12);
}

@keyframes connection-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(14, 162, 84, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(14, 162, 84, 0);
  }
}

/* ---- Campana de notificaciones y cuadro de sucursal ----
   Traian su caja blanca con borde de la plantilla original -- en
   modo claro se veian identicos a antes (por eso no se notaba
   cambio alguno). Se rediseñan planos, mismo lenguaje que los
   iconos de buscar/tema (sin caja, fondo sutil solo en hover). */

.header-right .notification_dropdown > .nav-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
}

.header-right .notification_dropdown > .nav-link:hover {
  background-color: var(--surface-sunken);
  color: var(--text-strong);
}

.header-right .search-coundry select.form-control {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  box-shadow: none !important;
}
/* Sin appearance:none, un <select disabled> se queda con el widget nativo
   del navegador por debajo del fondo transparente -- en modo oscuro
   Chromium le pinta su propio patron rayado nativo de "deshabilitado"
   (visible detras del texto "Sucursal Banquetes"). appearance:none apaga
   el widget nativo por completo, el look plano lo da 100% este CSS. */

/* El selector de arriba (.header-right .notification_dropdown > .nav-link)
   ya pone border-color:transparent, pero
   style.css trae "[data-theme-version="dark"] .header-right
   .notification_dropdown .nav-link { border-color: rgba(255,255,255,.1) }"
   con la MISMA especificidad (4 selectores simples en ambos) -- gana el
   que carga despues en el DOM, que es este archivo, pero se deja
   !important de todos modos por si el orden de carga cambia algun dia. */
[data-theme-version="dark"] .header-right .notification_dropdown > .nav-link {
  border-color: transparent !important;
}

/* Campana -- de icono solido FontAwesome + badge numerico grande a icono
   Boxicons fino (mismo lenguaje que lupa/tema, ya senalado como pendiente
   desde 2026-08-13) + un punto rojo chico en vez del numero, referencia
   visual de un dashboard externo (ConUnBOT) que Martin mostro. El JS
   (elements/scripts.php) sigue escribiendo el numero real adentro del
   span -- se oculta con font-size:0 en vez de tocar esa logica.

   Bug real encontrado 2026-08-21: el span original es ".badge.light.badge-danger"
   (style.css linea ~22237), una variante pensada para mostrar un NUMERO en texto
   rojo sobre un fondo apenas rosado (#ffeaea, o rgba(253,83,83,.15) en oscuro) --
   nunca fue pensada como punto solido. Al esconder el numero con font-size:0 sin
   forzar un fondo solido, el "punto" quedaba practicamente invisible (un cuadrito
   de 8px casi blanco) aunque SI hubiera notificaciones reales. Ademas, al fijar
   height/width en vez de dejar que el contenido decida, el cuadrito se veia
   siempre del mismo tamano incluso vacio (el JS pone "" cuando el contador es 0),
   sin forma de distinguir "sin notificaciones" de "hay pero no se ve". */
#contador_notificaciones {
  height: 8px !important;
  width: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  right: 8px !important;
  top: 6px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-color: #D64545 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--surface-card);
}
#contador_notificaciones:empty {
  display: none !important;
}

/* Unifica el verde de Bootstrap (.btn-success/.bg-success, #1EBA62) con el verde
   de marca (var(--primary)) -- venían de dos fuentes distintas y se notaban como
   dos verdes distintos en la misma pantalla (botones de tabla vs. pill-tabs). */
.btn-success {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-success:hover,
.btn-check:focus + .btn-success,
.btn-success:focus,
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success,
.btn-success:active,
.btn-success.active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
.btn-outline-success {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-success:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}
.bg-success,
.badge-success {
  background-color: var(--primary) !important;
}

/* .btn-secondary venía de la plantilla como un morado (#9568FF) sin relación con
   ningún color de marca -- se usa tanto para "Cancelar"/"Cerrar" como para acciones
   neutras ("Ver Pagos", "Órdenes En Espera"), así que en vez de recolorear archivo
   por archivo se reemplaza aquí por un gris neutro real, consistente en todo el ERP. */
.btn-secondary {
  color: #fff;
  background-color: #6B7280;
  border-color: #6B7280;
}
.btn-secondary:hover,
.btn-check:focus + .btn-secondary,
.btn-secondary:focus,
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary,
.btn-secondary:active,
.btn-secondary.active {
  color: #fff;
  background-color: #575E68 !important;
  border-color: #575E68 !important;
}
.btn-check:focus + .btn-secondary,
.btn-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(107, 114, 128, 0.5);
}
.btn-secondary:disabled,
.btn-secondary.disabled {
  color: #fff;
  background-color: #6B7280;
  border-color: #6B7280;
}

/* ---- Cerrar Caja (corte-caja.php) ----
   Antes: 4 columnas apiladas, un icono fa-2xl de color hardcodeado por cada
   campo (15+ iconos) + iframe fijo a 110vh -- garantizaba scroll siempre y
   mucha carga visual. Ahora: tabla compacta Concepto/Calculado/Contado/
   Diferencia (una fila por metodo de pago en vez de 3 columnas separadas)
   + panel de Retiro Final con texto explicando que hace ese campo. */
.corte-caja-table th {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-2);
}

.corte-caja-table td {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  vertical-align: middle;
}

.corte-caja-table .form-control {
  min-width: 92px;
}

.corte-caja-table .corte-caja-diferencia {
  border: 0;
  background: transparent;
  font-weight: 600;
}

.corte-caja-retiro-box {
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.corte-caja-help {
  font-size: var(--text-xs);
  line-height: 1.35;
}

.corte-caja-required {
  color: #D64545;
}

/* ---- Fotos de perfil -- formato redondo en todo el ERP ----
   Antes cada lugar tenia su propio tratamiento inconsistente: el
   avatar del header usaba esquina redondeada (0.938rem, no un
   circulo real) via .header-profile2 img en style.css, la lista de
   empleados no tenia ningun redondeo (solo width fijo, alto libre
   segun el aspect ratio de cada foto), y el modal de detalle
   tampoco. Selectores mas especificos que .header-profile2 img para
   ganarle sin pelear su !important/orden de carga. */

.avatar-circle {
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}

.avatar-circle.avatar-sm {
  width: 35px;
  height: 35px;
}

.header-profile2 img.avatar-circle {
  border-radius: 50%;
  object-fit: cover;
}

.header-profile2 img.avatar-circle.avatar-lg {
  width: 96px;
  height: 96px;
  display: block;
  margin: 10px auto;
  border: 3px solid var(--primary);
}

.avatar-circle.avatar-xl {
  width: 140px;
  height: 140px;
  border: 3px solid var(--primary);
  margin: 0 auto;
}

/* Botones "Cerrar"/"Cancelar" de modales: rojo en todo el ERP,
   sin importar si el markup trae btn-secondary/btn-primary/btn-warning
   (style.css define esas clases con background-color fijo, no con
   variables de Bootstrap, por eso hace falta !important aquí).
   No toca el icono "x" de cierre (.btn-close/.close). */
button[data-bs-dismiss="modal"]:not(.btn-close):not(.close) {
  background-color: #D64545 !important;
  border-color: #D64545 !important;
  color: #fff !important;
}
/* Todo boton .btn-info del ERP (Buscar, Consultar Reporte, Mostrar
   Productos, Traspaso en Espera, etc. -- ~37 botones en ~38 archivos):
   mismo azul nuevo #2F80B0, reemplaza el teal viejo #00ADA3 de
   style.css. Cubre los mismos estados que el .btn-info original
   (hover/focus/active/disabled) para no perder ninguno. */
.btn-info {
  color: #fff !important;
  background-color: #2F80B0 !important;
  border-color: #2F80B0 !important;
}
.btn-check:focus + .btn-info,
.btn-info:hover,
.btn-info:focus {
  color: #fff !important;
  background-color: #276A93 !important;
  border-color: #276A93 !important;
}
.btn-check:checked + .btn-info,
.btn-check:active + .btn-info,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
  color: #fff !important;
  background-color: #1F5676 !important;
  border-color: #1F5676 !important;
}
.btn-info:disabled,
.btn-info.disabled {
  color: #fff !important;
  background-color: #2F80B0 !important;
  border-color: #2F80B0 !important;
  opacity: 0.65;
}

/* "Venta en Espera" (Punto de Venta): mismo azul de arriba, pero con
   su propia clase porque este boton especifico ya no trae .btn-info
   en el markup (se separo para que el reorden/retexto de los 3
   botones del checkout no dependiera de la clase compartida). */
.btn-venta-espera {
  background-color: #2F80B0 !important;
  border-color: #2F80B0 !important;
  color: #fff !important;
}
.btn-venta-espera:hover,
.btn-venta-espera:focus,
.btn-venta-espera:active {
  background-color: #276A93 !important;
  border-color: #276A93 !important;
  color: #fff !important;
}

button[data-bs-dismiss="modal"]:not(.btn-close):not(.close):hover,
button[data-bs-dismiss="modal"]:not(.btn-close):not(.close):focus,
button[data-bs-dismiss="modal"]:not(.btn-close):not(.close):active {
  background-color: #C13D3D !important;
  border-color: #C13D3D !important;
  color: #fff !important;
}

/* .btn-icon-end esta pensado para botones grandes (padding 1rem) -- dentro
   de un boton .btn-sm (mucho mas chico, como el "Agregar" de filas rapidas
   Proveedor/Marca/Linea) el mismo padding lo infla mas alto que el resto
   del boton, se ve desproporcionado/alargado junto a inputs mas chicos.
   Reduce el padding/margen del icono para que escale con el boton chico. */
.btn-sm .btn-icon-end {
  margin: -0.579rem -0.25rem -0.579rem 0.75rem;
  padding: 0.579rem 0 0.579rem 0.75rem;
}

/* Switch tipo pill (Bootstrap .form-switch) en vez de casilla cuadrada --
   Martín pidió el mismo estilo de toggle verde que usa ConUnBOT (activar/
   desactivar módulo) en vez de checkbox. Bootstrap 5 ya trae el mecanismo
   (.form-switch), solo tenia el azul viejo #01A3FF de la plantilla en
   :checked -- se reconecta al verde de marca. */
.form-switch .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-switch .form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem var(--rgba-primary-2);
}

/* Variante del switch con la etiqueta a la izquierda y el pill a la
   derecha del todo (Bootstrap por defecto pone el pill primero, pegado
   a la izquierda) -- requiere el <label> ANTES que el <input> en el
   HTML para que el orden de flex quede etiqueta-izquierda/switch-derecha. */
.form-switch-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-left: 0;
}
.form-switch-end .form-check-input {
  margin-left: 0;
  flex-shrink: 0;
}

/* Variante un poco mas grande que el switch pill default de Bootstrap (2em x ~1em) --
   para cuando el switch va solo en su propia fila (ej. "Cobro en dolares" en Punto de
   Venta) y el tamano default se ve chico ahi. No reemplaza el default global a proposito,
   por si algun switch existente (Horarios.php) prefiere quedarse con el tamano chico. */
.form-switch-lg .form-check-input {
  width: 3em;
  height: 1.5em;
}

/* Boton "Buscar" junto a un select/input en la misma fila -- con solo
   .btn-sm quedaba mas bajo que el select de al lado (3rem de alto, ver
   seccion de Selects mas abajo) y angosto. Iguala la altura y le da
   mas ancho horizontal para que no se vea aplastado. */
.btn-search-inline {
  height: 3rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  display: inline-flex;
  align-items: center;
}

/* Asterisco de campo obligatorio -- la clase ya existia en 27 archivos
   (marca "Nivel *"/"Proveedor *"/etc.) pero nunca tuvo color propio,
   se veia negro identico al resto de la label. Mismo rojo #D64545 ya
   usado en todo el ERP para lo obligatorio/peligroso (Cerrar/Cancelar
   de modales, .corte-caja-required). */
.inputRequired {
  color: #D64545;
}

/* ============================================================
   Selects -- un solo tipo en todo el ERP.
   Diagnostico: la mayoria de los <select> (33/49 fuera de
   interfaz/) ya se inicializan como Select2 via la clase
   ".js-example-basic-single" (init global en elements/scripts.php).
   style.css ya traia un intento de tema para Select2 pero se quedo
   a medias -- border azul viejo #D5DFE7 (no --border-subtle) en
   claro, y en oscuro seguia con el gris viejo #1E1E25/#2D2D37 en
   vez del negro-verde real (mismo patron ya visto y corregido en
   sidebar/header/campana, ver update 2026-08-14 "v2" en memoria).
   El resto (~16 archivos, formularios de credito/facturacion/
   nomina) nunca se engancho a Select2 y se quedo con el <select>
   nativo del navegador sin ningun estilo custom.

   Se reconectan ambos casos a los mismos tokens en vez de forzar
   Select2 en los que faltan (eso es un cambio de comportamiento
   JS sobre formularios financieros en produccion, no un cambio de
   estilo -- fuera de alcance de esta pasada, ver nota en el
   backlog de mejoras). El <select> nativo re-skinneado abajo
   queda visualmente indistinguible del widget Select2, asi que la
   fila se ve uniforme aunque por debajo sean dos mecanismos
   distintos. */

/* --- Select2 (33+ selects ya inicializados) --- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-strong);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: var(--text-muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-muted) transparent;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--rgba-primary-1);
}
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--surface-sunken);
}
.select2-dropdown {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--surface-sunken);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary);
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
  color: var(--text-muted);
}
.select2-search--dropdown .select2-search__field {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-strong);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--rgba-primary-1);
  border-color: var(--primary);
  color: var(--primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary);
}

/* --- <select> nativo sin Select2 (~16 archivos) -- mismo look --- */
/* #swal_tipo_valor: el select del modal SweetAlert2 "Nuevo cupon de
   descuento" (Punto-Venta.php) -- un solo uso, no pasa por Select2 ni
   por .form-control originalmente (traia el .swal2-select default de
   la libreria, desalineado del resto). Se une a la misma regla via ID
   (gana por especificidad sobre el .swal2-select de la libreria, que
   no usa !important) en vez de crear un tercer mecanismo de select. */
select.form-control,
select.form-select,
#swal_tipo_valor {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--surface-card);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: 0.625rem;
  color: var(--text-strong);
  height: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9375rem center;
  padding-right: var(--space-6);
}
select.form-control:focus,
select.form-select:focus,
#swal_tipo_valor:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--rgba-primary-1);
}
select.form-control:disabled,
select.form-select:disabled,
#swal_tipo_valor:disabled {
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}
[data-theme-version="dark"] select.form-control,
[data-theme-version="dark"] select.form-select,
[data-theme-version="dark"] #swal_tipo_valor {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* El pill de sucursal en el header (.search-coundry select.form-control)
   es un caso especial ya plano/sin borde con !important propio (ver
   arriba) -- gana por especificidad sobre esta regla general, no se
   pisan. */

/* --- Formas de Pago (Punto-Venta.php, "Vender") -------------------
   Cada boton tiene su propio color (pedido explicito de Martin, uno
   distinto por forma de pago) en vez del verde/oscuro unico que traia
   la plantilla. Los botones ya NO llevan la clase .btn-dark de
   Bootstrap (que forzaba #233A2F !important en style.css y competia
   con el color inline que ponia el JS) -- ahora cada uno trae su
   propia clase .forma-pago-<tipo> sin conflicto de especificidad.
   :hover (mouse) y .forma-pago-activa (seleccionado -- tambien lo que
   se ve al tocar en iPad, donde no existe :hover real) comparten el
   mismo tratamiento "mas fuerte": oscurecido con filter, para que se
   note claramente cual esta activo sin inventar un segundo set de
   colores por boton. */
.forma-pago-btn {
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 0.625rem;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.forma-pago-btn:hover,
.forma-pago-btn:focus-visible,
.forma-pago-btn.forma-pago-activa {
  filter: brightness(0.82);
}
.forma-pago-btn:active {
  filter: brightness(0.7);
  transform: scale(0.98);
}
.forma-pago-btn.forma-pago-activa {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18) inset;
}

.forma-pago-efectivo { background-color: var(--primary); }
.forma-pago-transferencia { background-color: #6C7680; }
.forma-pago-tdd { background-color: var(--tiliche-blue); }
.forma-pago-cheque { background-color: #D2691E; }
.forma-pago-credito { background-color: #4B5A52; }
.forma-pago-varias { background-color: var(--tiliche-red); }
.forma-pago-bitcoin { background-color: var(--tiliche-amber); }

/* Amarillo real (no el ambar/dorado de Varias Formas) -- texto oscuro
   porque blanco sobre amarillo no da contraste suficiente. */
.forma-pago-tdc {
  background-color: #D9B310;
  color: var(--text-strong);
}