/* =========================================================================
   DANNA ERP — La app con la identidad nueva («El mostrador a plena luz»)
   Va DESPUÉS de style.css y de marca.css, y solo en las pantallas que ya adoptaron la
   identidad nueva (hoy: pos.html). Hace dos cosas:
     1. Traduce las variables de style.css (--bg, --accent, --text…) a los tokens --m-* de
        marca.css, así que .btn, .field, .badge, .tbl, .modal-card… cambian de piel sin tocar
        su HTML ni el de las ventanas que arma el JS.
     2. Ajusta los componentes donde la identidad nueva difiere de «La Etiqueta» (etiquetas de
        campo en tipo oración, radios, foco, sello sin rotar, tarjeta sin ojal).
   El dashboard NO carga este archivo: sigue en kraft + teal hasta que le toque su turno.
   ========================================================================= */

/* El selector doble es a propósito: style.css redefine estas variables en `html.dark`, que pesa
   más que `:root`. Repetir los dos selectores aquí (y cargar después) hace que ganen ambos temas;
   los --m-* ya cambian solos con html.dark. */
:root, html.dark {
  --bg:            var(--m-bg-soft);
  --bg-grid:       var(--m-line);
  --surface:       var(--m-surface);
  --surface-2:     var(--m-bg-soft);
  --surface-3:     color-mix(in srgb, var(--m-line) 35%, var(--m-bg-soft));
  --field-bg:      var(--m-bg);
  --field-bg-2:    var(--m-bg-soft);

  --border:        var(--m-line);
  --border-strong: var(--m-line-strong);
  --row-hover:     var(--m-bg-soft);
  --overlay:       var(--m-overlay);

  --text:          var(--m-ink);
  --text-muted:    var(--m-muted);
  --text-subtle:   var(--m-faint);
  --text-faint:    var(--m-faint);   /* el «tenue» de La Etiqueta no pasaba AA; aquí no hay nada más claro que faint */

  --accent:        var(--m-blue);
  --accent-hover:  var(--m-blue-hover);
  --accent-press:  var(--m-blue-press);
  --accent-fg:     var(--m-on-blue);
  --accent-text:   var(--m-blue-text);
  --accent-ring:   var(--m-ring);
  --accent-2:      var(--m-warning);
  --accent-2-text: var(--m-warning);

  --success:       var(--m-success);
  --warning:       var(--m-warning);
  --danger:        var(--m-danger);
  --info:          var(--m-blue-text);

  --shadow-xs:     var(--m-shadow-xs);
  --shadow-sm:     var(--m-shadow-sm);
  --shadow-md:     var(--m-shadow-md);
  --shadow-lg:     var(--m-shadow-lg);

  --radius:        var(--m-radius-md);
  --radius-sm:     var(--m-radius-xs);
  --radius-lg:     var(--m-radius-dialog);

  /* Candado de la estación (lock.js pinta en línea con estos valores de respaldo). */
  --lock-accent:    var(--m-blue);
  --lock-accent-fg: var(--m-on-blue);
  --lock-card:      #0d1838;
}

/* ---------- Base ---------- */
body { letter-spacing: -0.004em; }
::selection { background: var(--m-blue); color: var(--m-on-blue); }
:focus-visible { outline: 2px solid var(--m-blue); outline-offset: 2px; }
.tbl, .num, [class*="amount"] { font-variant-numeric: tabular-nums; }
.font-mono, code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---------- Botones ---------- */
.btn { font-weight: 600; transition: background-color var(--m-dur-state) ease, border-color var(--m-dur-state) ease, color var(--m-dur-state) ease, box-shadow var(--m-dur-state) ease, transform var(--m-dur-press) var(--m-ease-out); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--m-ring); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-primary { box-shadow: var(--m-shadow-blue); }
.btn-primary:focus-visible { box-shadow: var(--m-shadow-blue), 0 0 0 3px var(--m-ring); }
.btn-secondary { background: var(--m-surface); color: var(--m-ink); border-color: var(--m-line-strong); box-shadow: none; }
.btn-secondary:hover:not(:disabled) { border-color: var(--m-ink); background: var(--m-surface); }
.btn-ghost { color: var(--m-ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--m-bg-soft); color: var(--m-ink); }
.btn-soft-neutral { color: var(--m-ink-2); background: var(--m-surface); border-color: var(--m-line-strong); }
.btn-soft-neutral:hover:not(:disabled) { background: var(--m-bg-soft); color: var(--m-ink); border-color: var(--m-line-strong); }
/* Rellenos sólidos de estado. El rojo y el verde quedan fijos en los dos temas: con texto blanco
   pasan AA (5.5:1 y 6.4:1), cosa que los tonos claros del tema oscuro no lograrían. */
.btn-success { background: #0f7342; color: #fff; }
.btn-success:hover:not(:disabled) { background: #0c5f37; }
.btn-danger { background: #c0362c; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #a82e25; }
.btn-outline-danger { background: var(--m-surface); color: var(--m-danger); border-color: color-mix(in srgb, var(--m-danger) 45%, transparent); }
.btn-outline-danger:hover:not(:disabled) { background: var(--m-danger-soft); border-color: var(--m-danger); }

/* ---------- Campos ---------- */
.field { border-radius: var(--m-radius-xs); }
.field:focus, .field:focus-visible { border-color: var(--m-blue); box-shadow: 0 0 0 4px var(--m-ring); background: var(--m-bg); }
select.field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235d6d8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); }
html.dark select.field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237f8fb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); }
/* Etiqueta encima del campo: tipo oración y peso 600 en la tinta media, como el landing
   (antes: 10 px en mayúsculas espaciadas y gris, que no llegaba a 3:1). */
.field-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--m-ink-2); }

/* ---------- Insignias, tablas, alertas ---------- */
.badge { font-size: 11px; padding: 4px 9px; }
.tbl thead th { background: var(--m-bg-soft); color: var(--m-faint); font-size: 11.5px; letter-spacing: 0; }
.tbl tbody td { color: var(--m-ink-2); }
.table-wrap { border-radius: var(--m-radius-sm); }

/* ---------- Ventanas ---------- */
/* Entrada más corta que en el dashboard: el cobro se abre decenas de veces por turno y la ventana
   no puede hacer esperar al cajero. Solo opacidad + un desplazamiento mínimo. */
.modal-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation-duration: .14s; }
.modal-card { border-color: var(--m-line); animation: m-modal-in .16s var(--m-ease-out); }
@keyframes m-modal-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-card h3 { font-weight: 800; letter-spacing: -.02em; }

/* ---------- Interruptor de tema ---------- */
.theme-toggle { width: 38px; height: 38px; border-radius: 999px; border-color: var(--m-line-strong); background: var(--m-surface); color: var(--m-ink-2); }
.theme-toggle:hover { border-color: var(--m-ink); background: var(--m-surface); color: var(--m-ink); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--m-ring); }

/* ---------- Barras de desplazamiento ---------- */
.scroll-elegant::-webkit-scrollbar-thumb { background: var(--m-line-strong); border-color: var(--m-surface); }
.scroll-elegant::-webkit-scrollbar-thumb:hover { background: var(--m-faint); }
.scroll-elegant { scrollbar-color: var(--m-line-strong) transparent; }

/* ---------- Gestos de «La Etiqueta» que no pasan a la identidad nueva ---------- */
/* Tarjeta-etiqueta → tarjeta plana con borde; sin ojal ni esquina recortada. */
.tag-card { background: var(--m-bg-soft); clip-path: none; border: 1px solid var(--m-line); box-shadow: none; padding: 14px 16px; border-radius: var(--m-radius-sm); }
.tag-card::before, .tag-card::after { content: none; }
/* Sello → píldora de estado, sin rotar ni «tinta gastada». */
.stamp { transform: none; opacity: 1; letter-spacing: .04em; border-width: 1px; border-radius: 999px; padding: 4px 10px; background: color-mix(in srgb, currentColor 10%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-card { animation: none; }
  .btn { transition: none; }
  .btn:active:not(:disabled) { transform: none; }
}