/* ============================================================
   TÚPOS — V2 Redesign System
   Basado en Claude Design "Híbrida v2"
   Cargado último para máxima prioridad en cascade.
   ============================================================ */

/* ============================================================
   1. TOKENS GLOBALES
   ============================================================ */

:root {
  /* Superficies — near white default */
  --bg:        var(--paper);
  --surface-1: var(--white);
  /* --surface-2 / --surface-3 heredados de tokens/tupos.css */

  /* Texto */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--label);

  /* Bordes */
  --border:      var(--line);
  --border-weak: var(--line-weak);
  --border-strong: var(--ink);

  /* Semánticos */
  --ok:   var(--ok-deep);
  --warn: var(--warn-deep);
  --bad:  var(--bad-deep);

  /* Acento único: Azul (marca TúPOS) */
  --accent:       var(--blue);
  --accent-dark:  var(--blue-deep);
  --accent-alpha: color-mix(in srgb, var(--blue) 15%, transparent);

  --focus: var(--blue);   /* anillo de foco = acento de marca */
  --scrim: var(--overlay);   /* velo de modal/hoja */

  /* Tinta de texto sobre tintes semánticos: en claro se oscurece con negro,
     en oscuro se aclara con blanco. Una sola regla sirve para ambos temas. */
  --tint-ink:      black;
  --tint-ink-amt:  78%;
  --tint-bg-amt:   18%;

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  /* --r-lg heredado de tokens/tupos.css */

  /* --font-display / --font-body / --font-mono heredados de tokens/tupos.css */

  /* Pesos base (antes solo existían por [data-font-weight], preset bold-headings) */
  --fw-body:    400;
  --fw-heading: 700;
  --fw-strong:  700;

  /* Layout heights */
  --navbar-h: 0px; /* Navbar global eliminado — identidad/alertas viven en "Más" y la hoja de Perfil */
  --footer-h: 76px;

  /* Retrocompatibilidad — mapear vars antiguas a nuevas */
  --surface-store:    var(--bg);
  --surface-elevated: var(--surface-1);
  --text-primary:     var(--fg-1);
  --text-secondary:   var(--fg-2);
  --text-tertiary:    var(--fg-3);
  --text-inverse:     #FFFFFF;
  --header-height:    var(--navbar-h);
  --footer-height:    var(--footer-h);
  --color-action-purple: var(--accent);
  --color-add-green:     var(--ok);
  --color-add-green-dark: var(--ok-deep);
  --color-remove-red:    var(--bad);
  --color-warning-yellow: var(--warn);
}

/* ============================================================
   4. BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-body, 400);
  color: var(--fg-1);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}

/* ============================================================
   5. TIPOGRAFÍA
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-heading, 600);
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--fg-1);
  margin: 0;
}

h1 { font-size: 32px; letter-spacing: 0; }
h2 { font-size: 22px; letter-spacing: 0; }
h3 { font-size: 18px; }
h4 { font-size: 17px; }

/* Números y datos siempre mono */
.font-mono,
[class*="price"],
[class*="stock"],
[class*="total"],
[class*="amount"],
[class*="kpi__val"],
[class*="hero__val"],
[class*="paybar__total"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   6. NAVBAR
   ============================================================ */

.navbar {
  height: var(--navbar-h) !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 20px !important;
}

.navbar-brand {
  gap: 12px !important;
}

/* Logo: punto terracota en lugar de gradiente amber */
.navbar-logo {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent) !important;
  flex-shrink: 0;
}

.navbar-logo i,
.navbar-logo svg {
  display: none !important;
}

/* Nombre tienda en Poppins */
.navbar-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: var(--fw-heading, 600) !important;
  letter-spacing: -0.015em !important;
  color: var(--fg-1) !important;
}

/* Botones circulares */
.navbar-btn,
.navbar-btn.bell-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border: none !important;
  transition: background 0.12s, transform 0.12s !important;
}

.navbar-btn:hover {
  background: var(--surface-3) !important;
}

.navbar-btn:active {
  transform: scale(0.92) !important;
}

/* iOS Safari: clicks don't bubble through SVG/icon children to their parent
   <a> or <button> unless the child has pointer-events:none.
   Global rule — covers all clickable elements in the app. */
a svg, a i,
button svg, button i {
  pointer-events: none !important;
}

/* Same fix for Alpine.js @click divs that contain icons (not <a>/<button>) */
.supplier-row svg, .supplier-row i {
  pointer-events: none !important;
}

/* User dropdown */
.user-menu .user-dropdown {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14) !important;
}

.dropdown-header {
  background: var(--surface-2) !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
}

.dropdown-item {
  color: var(--fg-1) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--r-sm) !important;
}

.dropdown-item:hover {
  background: var(--surface-2) !important;
}

.dropdown-item-danger {
  color: var(--bad) !important;
}

.dropdown-item-danger:hover {
  background: color-mix(in srgb, var(--bad) 10%, transparent) !important;
}

.dropdown-divider {
  border-color: var(--border) !important;
}

/* Badge de notificaciones */
.notif-badge {
  background: var(--bad) !important;
  border-color: var(--bg) !important;
}

/* ============================================================
   7. STICKY FOOTER / BOTTOM NAV
   ============================================================ */

/* Cajero: botón único centrado */
.sticky-footer--single {
  justify-content: center !important;
}

.sticky-footer--single .footer-btn--pos {
  flex: 0 0 auto !important;
  min-width: 80px !important;
}

.sticky-footer {
  height: var(--footer-h) !important;
  background: var(--surface-1) !important;
  border-top: 1.5px solid var(--border-strong) !important;
  box-shadow: 0 -6px 16px rgba(24, 24, 27, 0.07) !important;
  padding: 0 4px !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important;
}

.footer-btn {
  position: relative !important;
  color: var(--fg-2) !important;
  background: transparent !important;
  padding: 8px 4px !important;
  gap: 4px !important;
  font-family: var(--font-body) !important;
  transition: color 0.15s !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer-btn:hover {
  color: var(--fg-1) !important;
  background: transparent !important;
}

.footer-btn i,
.footer-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.25 !important;
}

.footer-btn span {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Active: color de acento fuerte en ícono + texto, halo detrás del ícono
   e indicador superior más grueso — la selección debe notarse a simple vista. */
.footer-btn.active {
  color: var(--accent) !important;
  background: transparent !important;
  font-weight: var(--fw-strong, 700) !important;
}

.footer-btn.active span {
  font-weight: 700 !important;
}

.footer-btn:not(.footer-btn--pos).active i,
.footer-btn:not(.footer-btn--pos).active svg {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  border-radius: 999px !important;
  padding: 5px !important;
  box-sizing: content-box !important;
}

.footer-btn.active::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 32px !important;
  height: 4px !important;
  background: var(--accent) !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 55%, transparent) !important;
}

/* ===== POS CENTER BUTTON — círculo azul elevado ===== */
.footer-btn--pos {
  justify-content: center !important;
  padding: 0 4px 6px !important;
  overflow: visible !important;
  gap: 3px !important;
  color: var(--fg-2) !important;
}

.footer-btn--pos .footer-pos-circle {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent),
    0 2px 6px rgba(0,0,0,0.12) !important;
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1.2), box-shadow 0.2s !important;
}

.footer-btn--pos .footer-pos-circle i,
.footer-btn--pos .footer-pos-circle svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.25 !important;
}

.footer-btn--pos:hover .footer-pos-circle {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--accent) 45%, transparent),
    0 4px 10px rgba(0,0,0,0.14) !important;
}

.footer-btn--pos:active .footer-pos-circle {
  transform: scale(0.94) !important;
}

.footer-btn--pos.active::before {
  display: none !important;
}

.footer-btn--pos.active {
  color: var(--accent) !important;
}

.footer-btn--pos.active .footer-pos-circle {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
    0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent),
    0 2px 6px rgba(0,0,0,0.12) !important;
}

/* ============================================================
   8. MAIN CONTENT
   ============================================================ */

.main-content {
  margin-top: var(--navbar-h) !important;
  margin-bottom: var(--footer-h) !important;
  min-height: calc(100vh - var(--navbar-h) - var(--footer-h)) !important;
  background: var(--bg) !important;
}

/* ============================================================
   9. BOTONES
   ============================================================ */

.btn-primary {
  background: var(--accent) !important;
  color: white !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-strong, 600) !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.98) !important;
}

.btn-primary:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn-secondary {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-body, 400) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--surface-3) !important;
  border-color: var(--fg-3) !important;
}

.btn-danger {
  background: var(--bad) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-strong, 600) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--fg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body) !important;
}

.btn-ghost:hover {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
}

/* Icon buttons compactos */
.icon-button-compact {
  background: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border-radius: var(--r-sm) !important;
}

.icon-button-compact:hover {
  background: var(--surface-3) !important;
}

/* ============================================================
   10. CARDS
   ============================================================ */

.card,
.product-card,
.stat-card,
.kpi-card,
.action-card,
[class*="-card"]:not([class*="__"]):not(.km-catalog-tile):not(.more-card):not([class*="-card-inline-"]):not(.usage-card-title):not(.plans-section-title):not([class*="va-card"]):not([class*="kx-"]):not([class*="eq-"]):not([class*="prov-"]) {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, transform 0.15s !important;
}

[class*="-card"]:not([class*="__"]):not(.more-card):not([class*="-card-inline-"]):not(.usage-card-title):not([class*="va-card"]):not([class*="kx-"]):not([class*="eq-"]):not([class*="prov-"]):hover:not(:disabled) {
  border-color: var(--fg-1) !important;
  box-shadow: none !important;
}

/* ============================================================
   11. INPUTS Y FORMULARIOS
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-body, 400) !important;
  color: var(--fg-1) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--fg-3) !important;
}

/* Barras de búsqueda */
.search-input,
[class*="search"] input,
[class*="scan"] input {
  font-family: var(--font-body) !important;
}

/* ============================================================
   12. BADGES Y TAGS
   ============================================================ */

.badge-ok, .badge-success, [class*="badge-ok"], [class*="status-ok"] {
  background: color-mix(in srgb, var(--ok) var(--tint-bg-amt), var(--surface-1)) !important;
  color:      color-mix(in srgb, var(--ok) var(--tint-ink-amt), var(--tint-ink)) !important;
  border: 1.5px solid var(--ok) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.badge-warn, [class*="badge-warn"], [class*="status-warn"] {
  background: color-mix(in srgb, var(--warn) var(--tint-bg-amt), var(--surface-1)) !important;
  color:      color-mix(in srgb, var(--warn) var(--tint-ink-amt), var(--tint-ink)) !important;
  border: 1.5px solid var(--warn) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.badge-bad, .badge-error, [class*="badge-bad"], [class*="status-bad"] {
  background: color-mix(in srgb, var(--bad) var(--tint-bg-amt), var(--surface-1)) !important;
  color:      color-mix(in srgb, var(--bad) var(--tint-ink-amt), var(--tint-ink)) !important;
  border: 1.5px solid var(--bad) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ============================================================
   13. TABLAS
   ============================================================ */

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-body);
}

th {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-2);
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  padding: 12px;
}

td {
  border-bottom: 1px solid var(--border-weak);
  padding: 12px;
  color: var(--fg-1);
  font-size: 15px;
}

tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   14. MODALES
   ============================================================ */

.modal,
[class*="modal"] .modal-content,
.modal-content {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
  font-family: var(--font-body) !important;
}

.modal-backdrop,
[class*="backdrop"] {
  background: var(--scrim) !important;
  backdrop-filter: blur(6px) !important;
}

/* ============================================================
   15. TABS / PILLS
   ============================================================ */

/* Tabs de filtro en inventario y otros */
[class*="tab-btn"],
[class*="filter-btn"],
.tab,
.tab-btn {
  background: var(--surface-2) !important;
  color: var(--fg-2) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s !important;
}

[class*="tab-btn"].active,
[class*="tab-btn"][data-active="true"],
[class*="filter-btn"].active {
  background: var(--fg-1) !important;
  color: var(--surface-1) !important;
}

/* ============================================================
   16. ANIMACIONES GLOBALES
   ============================================================ */

@keyframes km-fade-up {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes km-slide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.main-content > * {
  animation: km-fade-up 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Animar opacity promueve el wrapper a su propio compositor layer y le crea un
   stacking context. Los módulos v4 (inventory, suppliers, etc) usan x-teleport
   para sacar sus modales del wrapper, pero `sales/pos_view.html` no — por eso
   sus modales (z:1000) quedaban atrapados detrás del header (z:100). */
.main-content > .pos-cashier-container {
  animation: none;
}

/* ============================================================
   17. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fg-3);
}


/* ============================================================
   PAGE BACK BUTTON — componente unificado (reemplaza .btn-back y .back-btn)
   ============================================================ */
.page-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--surface-1);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--fg-2);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.page-back-btn:hover {
    background: var(--surface-2);
    color: var(--fg-1);
}