/* ==========================================================================
   MaxiPOS — Sistema visual v3 (Metro · Win8)
   Estilo: flat, cero sombras, cero border-radius, color por sección, dark bg.
   Inter Variable + design tokens consistentes.
   Se carga DESPUÉS de Pico CSS para que sobrescriba defaults donde aplica.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     TOKENS v3 (Metro · Win8)
     Color por sección — Microsoft Modern Palette
     -------------------------------------------------------------------- */

  --metro-pos:        #E11A2B;   /* POS — rojo MaxiPOS */
  --metro-pos-dk:     #B0091A;
  --metro-sales:      #0078D7;   /* Ventas — azul */
  --metro-sales-dk:   #005A9E;
  --metro-cash:       #107C10;   /* Caja — verde */
  --metro-cash-dk:    #0B5E0B;
  --metro-products:   #CA5010;   /* Productos — naranja */
  --metro-products-dk:#963A0A;
  --metro-methods:    #5C2D91;   /* Métodos — violeta */
  --metro-methods-dk: #432269;
  --metro-info:       #00B294;   /* Teal info */
  --metro-warning:    #FFB900;   /* Amarillo */
  --metro-teal:       #008272;   /* Teal extra */

  /* Brand = rojo MaxiPOS (sección POS es la principal) */
  --brand-50:   #FEE7E9;
  --brand-100:  #FCC5CA;
  --brand-300:  #F0747F;
  --brand-500:  var(--metro-pos);
  --brand-600:  var(--metro-pos-dk);
  --brand-700:  #8B0815;
  --brand-900:  #5E0510;
  --brand-fg:   #FFFFFF;
  --brand-gradient:      linear-gradient(135deg, var(--metro-pos) 0%, var(--metro-pos-dk) 100%);
  --brand-gradient-text: linear-gradient(135deg, var(--metro-pos) 0%, var(--metro-pos-dk) 100%);
  --brand-glow:          0 0 0 0 transparent;

  /* Accent rojo (igual al brand en Metro — CTAs críticos) */
  --accent-50:  #FEE7E9;
  --accent-100: #FCC5CA;
  --accent-500: var(--metro-pos);
  --accent-600: var(--metro-pos-dk);
  --accent-700: #8B0815;
  --accent-fg:  #FFFFFF;
  --accent-gradient: linear-gradient(135deg, var(--metro-pos) 0%, var(--metro-pos-dk) 100%);
  --accent-glow:     0 0 0 0 transparent;

  /* Ink (superficies dark — Metro background) */
  --ink-900:     #0F0F0F;
  --ink-800:     #1B1B1B;
  --ink-700:     #2A2A2A;
  --ink-fg:      #FFFFFF;
  --ink-fg-soft: #D6D3D1;
  --ink-fg-mute: #A8A29E;

  /* Surfaces — Metro dark default */
  --surface:        #1B1B1B;     /* fondo principal Metro */
  --surface-soft:   #2A2A2A;     /* tiles / cards / inputs */
  --surface-muted:  #2A2A2A;
  --surface-strong: #3A3A3A;     /* borders / divisores */
  --bg-gradient:    #1B1B1B;     /* sin gradient — Metro es plano */

  --border:        #2A2A2A;
  --border-strong: #3A3A3A;

  --text:       #FFFFFF;
  --text-soft:  #D6D3D1;
  --text-mute:  #A8A29E;
  --text-faint: #78716C;

  /* Status semánticos (alineados al palette Metro) */
  --success-500: var(--metro-cash);
  --success-50:  rgba(16, 124, 16, 0.18);
  --warning-500: var(--metro-warning);
  --warning-50:  rgba(255, 185, 0, 0.18);
  --danger-500:  var(--metro-pos);
  --danger-50:   rgba(225, 26, 43, 0.18);
  --info-500:    var(--metro-sales);
  --info-50:     rgba(0, 120, 215, 0.18);

  /* Spacing scale (4px base) */
  --s-1:  4px; --s-2:  8px; --s-3:  12px; --s-4:  16px; --s-5:  20px;
  --s-6:  24px; --s-8:  32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Radii — Metro: TODO a 0 (esquinas rectas) */
  --r-sm:   0;
  --r-md:   0;
  --r-lg:   0;
  --r-xl:   0;
  --r-2xl:  0;
  --r-3xl:  0;
  --r-full: 0;

  /* Shadows — Metro: TODO sin sombra (flat) */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-focus: 0 0 0 2px var(--metro-pos);   /* focus ring color sección por default */

  /* Typography */
  --font-sans:    'Inter var', 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter var', 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  /* Transitions */
  --t-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   220ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Tile sizes Metro (Win8 spec base = 152px) */
  --tile-s: 152px;
  --tile-gap: 12px;

  /* --------------------------------------------------------------------
     COMPAT LAYER — aliases --mp-* (legacy) → tokens Metro
     Permite que los componentes existentes (.mp-btn, .mp-topbar, etc.)
     hereden la paleta Metro sin reescribir HTML masivamente.
     -------------------------------------------------------------------- */
  --mp-brand-primary:        var(--metro-pos);
  --mp-brand-primary-dark:   var(--metro-pos-dk);
  --mp-brand-primary-light:  var(--brand-50);
  --mp-brand-accent:         var(--metro-pos);
  --mp-brand-accent-dark:    var(--metro-pos-dk);
  --mp-on-primary:           var(--brand-fg);
  --mp-on-accent:            var(--accent-fg);

  --mp-bg:                   var(--surface);
  --mp-surface:              var(--surface-soft);
  --mp-surface-soft:         var(--surface-soft);
  --mp-border:               var(--border-strong);
  --mp-border-strong:        var(--border-strong);
  --mp-text:                 var(--text);
  --mp-text-soft:            var(--text-soft);
  --mp-text-mute:            var(--text-mute);

  --mp-success:              var(--success-500);
  --mp-success-bg:           var(--success-50);
  --mp-warning:              var(--warning-500);
  --mp-warning-bg:           var(--warning-50);
  --mp-danger:               var(--danger-500);
  --mp-danger-bg:            var(--danger-50);
  --mp-info:                 var(--info-500);
  --mp-info-bg:              var(--info-50);

  --mp-pos-topbar-bg:        #000000;             /* topbar fully black Metro */
  --mp-pos-topbar-fg:        var(--ink-fg);
  --mp-pos-topbar-brand-fg:  var(--ink-fg);

  --mp-radius-sm:            0;
  --mp-radius:               0;
  --mp-radius-lg:            0;
  --mp-shadow-sm:            none;
  --mp-shadow:               none;
  --mp-shadow-lg:            none;
}

/* Sr-only — texto solo para screen readers (no visible) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Font + smoothing globales */
body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--surface);   /* Metro dark bg */
  color: var(--text);
  --pico-background-color: var(--surface);   /* anula bg light de Pico CSS */
  --pico-color: var(--text);
  --pico-h1-color: var(--text);
  --pico-h2-color: var(--text);
  --pico-h3-color: var(--text);
  --pico-h4-color: var(--text);
  --pico-h5-color: var(--text);
  --pico-h6-color: var(--text);
  --pico-muted-color: var(--text-mute);
  --pico-card-background-color: var(--surface-soft);
  --pico-card-sectioning-background-color: var(--surface);
  --pico-form-element-background-color: var(--surface-soft);
  --pico-form-element-color: var(--text);
  --pico-form-element-border-color: var(--border-strong);
  --pico-border-radius: 0;
  --pico-form-element-spacing-vertical: 10px;
  --pico-form-element-spacing-horizontal: 12px;
}

/* Pico CSS hooks adicionales — superficies y text */
html { background: var(--surface); color-scheme: dark; }
main, section, article, table, thead, tbody, tr, td, th {
  background-color: transparent;
  color: inherit;
}
input, textarea, select {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 0;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--metro-pos);
  box-shadow: none;
  outline: 0;
}

/* ==========================================================================
   BOTONES — usables sin tocar Pico (clase explícita .mp-btn-*)
   ========================================================================== */

.mp-btn-primary,
.mp-btn-accent,
.mp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--mp-radius);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.mp-btn-primary {
  background: var(--mp-brand-primary);
  color: var(--mp-on-primary);
}
.mp-btn-primary:hover { background: var(--mp-brand-primary-dark); }
.mp-btn-accent {
  background: var(--mp-brand-accent);
  color: var(--mp-on-accent);
}
.mp-btn-accent:hover { background: var(--mp-brand-accent-dark); }
.mp-btn-secondary {
  background: var(--mp-surface);
  color: var(--mp-text-soft);
  border-color: var(--mp-border-strong);
}
.mp-btn-secondary:hover {
  border-color: var(--mp-brand-primary);
  color: var(--mp-brand-primary);
}
.mp-btn-block { width: 100%; }
.mp-btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }

/* ==========================================================================
   BADGES — para tablas (estado venta, método de pago, etc)
   ========================================================================== */

.mp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.mp-badge-success { background: var(--metro-cash);     color: #FFFFFF; }
.mp-badge-warning { background: var(--metro-warning);  color: #1B1B1B; }
.mp-badge-danger  { background: var(--metro-pos);      color: #FFFFFF; }
.mp-badge-info    { background: var(--metro-sales);    color: #FFFFFF; }
.mp-badge-cash    { background: var(--metro-sales);    color: #FFFFFF; }
.mp-badge-other   { background: var(--metro-pos);      color: #FFFFFF; }

/* ==========================================================================
   CARDS — superficies con border y shadow tenues
   ========================================================================== */

.mp-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-sm);
  overflow: hidden;
}
.mp-card-header {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--mp-border);
  background: var(--mp-surface-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mp-card-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.mp-card-body { padding: 1.2rem; }

/* Stat card: KPI grande con label en mayúsculas */
.mp-stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.mp-stat-card::after {
  /* Metro: superficies planas, sin adornos */
  display: none;
}
.mp-stat-card .mp-stat-label {
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.mp-stat-card .mp-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mp-stat-card .mp-stat-hint {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 4px;
}
.mp-stat-card.mp-stat-featured .mp-stat-value {
  color: var(--metro-pos);
}
.mp-stat-card.mp-stat-warning .mp-stat-value { color: var(--warning-500); }
.mp-stat-card.mp-stat-danger .mp-stat-value { color: var(--accent-600); }

/* Stats grid */
.mp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

/* Toolbar con search + chips */
.mp-toolbar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.mp-toolbar-search {
  flex: 1; min-width: 220px;
  position: relative;
}
.mp-toolbar-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: var(--font-sans);
  outline: none;
  background: var(--surface-soft);
  transition: all var(--t-fast);
}
.mp-toolbar-search input:focus {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
  background: var(--surface);
}
.mp-toolbar-search .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
}
.mp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface-muted);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast);
}
.mp-chip:hover { background: var(--surface-strong); color: var(--text); }
.mp-chip.is-active {
  background: var(--brand-500);
  color: var(--brand-fg);
}
.mp-chip.is-active:hover { background: var(--brand-600); }

/* Stock pills (también usable en otras tablas) */
.mp-stock-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mp-stock-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
}
.mp-stock-pill--ok { color: var(--success-500); background: var(--success-50); }
.mp-stock-pill--ok::before { background: var(--success-500); }
.mp-stock-pill--low { color: var(--warning-500); background: var(--warning-50); }
.mp-stock-pill--low::before { background: var(--warning-500); }
.mp-stock-pill--zero {
  color: var(--accent-600); background: var(--danger-50);
}
.mp-stock-pill--zero::before { background: var(--accent-600); }

/* Page title más grande estilo v2 */
.mp-page-header h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.mp-page-header p {
  color: var(--text-mute);
  margin-top: 4px;
  font-size: 14px;
}

/* Tabla refinada estilo v2 */
.mp-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}
.mp-card .mp-table { border-radius: 0; }

/* Card cobertura — refinar para tema F */
.mp-card {
  border-radius: var(--r-xl);
}

/* Barcode chip */
.mp-barcode {
  display: inline-block; padding: 2px 8px;
  background: var(--surface-muted);
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-soft);
}

/* Estrella favoritos */
.mp-fav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.mp-fav-btn:hover { background: var(--surface-muted); color: var(--text-mute); }
.mp-fav-btn.is-favorite { color: #D97706; }
.mp-fav-btn .icon { width: 18px; height: 18px; }

/* ==========================================================================
   TABLAS — mismo look que las del mockup
   ========================================================================== */

.mp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.mp-table th {
  background: var(--mp-surface-soft);
  text-align: left;
  padding: 0.65rem 1.2rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mp-text-mute);
  font-weight: 700;
  border-bottom: 1px solid var(--mp-border);
}
.mp-table td {
  padding: 0.75rem 1.2rem;
  border-bottom: 1px solid var(--mp-surface-soft);
}
.mp-table tr:last-child td { border-bottom: 0; }
.mp-table tr:hover td { background: var(--mp-surface-soft); }
.mp-table .mp-cell-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.mp-table .mp-cell-strong { font-weight: 700; }

/* ==========================================================================
   PAGE HEADER — título de página + acciones
   ========================================================================== */

.mp-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0 1.2rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.mp-page-header h1 {
  font-size: 1.55rem;
  margin: 0;
  color: var(--mp-text);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mp-page-header .mp-page-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   TOPBAR DE GESTIÓN — usado por _nav.html en pantallas no-POS
   Aplica solo si <nav> tiene clase .mp-topbar — Pico no se ve afectado en el resto
   ========================================================================== */

/* Topbar dark unificado — mismo lenguaje que el .pos-topbar del POS */
.mp-topbar {
  position: relative;
  background: var(--ink-900);
  color: var(--ink-fg);
  border: none;
  padding: var(--s-3) var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  box-shadow: none;
  margin-bottom: var(--s-6);
}
.mp-topbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--metro-pos);   /* default POS rojo (Welcome y otras sin sección) */
  pointer-events: none;
}
/* Borde inferior topbar color de sección activa — clase aplicada server-side */
.mp-topbar.mp-section-sales::after    { background: var(--metro-sales); }
.mp-topbar.mp-section-cash::after     { background: var(--metro-cash); }
.mp-topbar.mp-section-products::after { background: var(--metro-products); }
.mp-topbar.mp-section-methods::after  { background: var(--metro-methods); }
.mp-topbar.mp-section-pos::after      { background: var(--metro-pos); }
.mp-topbar .mp-brand {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-fg);
}
.mp-topbar .mp-brand-sub {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-fg-mute);
  margin-left: 4px;
  letter-spacing: 0;
}
.mp-topbar .mp-nav {
  display: flex;
  gap: var(--s-1);
  flex: 1;
  margin: 0 0 0 var(--s-4);
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.mp-topbar .mp-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.mp-topbar .mp-nav a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--ink-fg-soft);
  text-decoration: none;
  padding: 7px 12px;
  margin: 0;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 13px;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.mp-topbar .mp-nav a:hover {
  background: var(--ink-800);
  color: var(--ink-fg);
}
.mp-topbar .mp-nav a.mp-active {
  background: var(--metro-pos);      /* default POS rojo */
  color: var(--accent-fg);
  border-radius: 0;
}
/* Color de sección por href — Metro Win8 */
.mp-topbar .mp-nav a[href^="/pos"].mp-active            { background: var(--metro-pos); }
.mp-topbar .mp-nav a[href^="/sales"].mp-active          { background: var(--metro-sales); }
.mp-topbar .mp-nav a[href^="/cash"].mp-active           { background: var(--metro-cash); }
.mp-topbar .mp-nav a[href^="/products"].mp-active       { background: var(--metro-products); }
.mp-topbar .mp-nav a[href^="/payment-methods"].mp-active { background: var(--metro-methods); }
.mp-topbar .mp-user {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  color: var(--ink-fg-mute);
  font-size: 13px;
  margin-left: auto;
}
.mp-topbar .mp-user form { margin: 0; }
.mp-topbar .mp-logout {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: transparent;
  border: 1px solid var(--ink-700);
  padding: 6px 12px;
  border-radius: var(--r-md);
  color: var(--ink-fg-soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  transition: all var(--t-fast);
}
.mp-topbar .mp-logout:hover {
  background: var(--ink-800);
  color: var(--ink-fg);
  border-color: var(--ink-700);
}

/* ==========================================================================
   CONTAINER DE PANTALLAS NO-POS
   ========================================================================== */

.mp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}
.mp-grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   AUTH METRO — Login + Signup como split panel Win8 Phone
   Panel rojo macizo izq + form dark der. Stack en mobile.
   ========================================================================== */

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--surface);
}

.auth-panel {
  background: var(--metro-pos);
  color: #FFFFFF;
  padding: var(--s-12) var(--s-8);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
}
.auth-panel-brand {
  font-size: 88px;
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 var(--s-4);
  color: #FFFFFF;
}
.auth-panel-brand strong {
  font-weight: 800;
}
.auth-panel-sub {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.92;
  margin: 0;
}
.auth-panel-sub span {
  display: inline-block;
  margin: 0 var(--s-2);
  opacity: 0.6;
}

.auth-form-side {
  background: var(--surface);
  padding: var(--s-12) var(--s-10);
  display: flex; flex-direction: column;
  justify-content: center;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.auth-form-side h1 {
  font-size: 40px;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--s-2);
  line-height: 1.1;
}
.auth-form-side .auth-lede {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin: 0 0 var(--s-6);
}
.auth-form-side label {
  display: block;
  margin-top: var(--s-4);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.auth-form-side label small {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-mute);
  margin-top: 2px;
}
.auth-form-side input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  background: var(--surface-soft);
  color: var(--text);
  border: 2px solid var(--surface-soft);
  border-radius: 0;
  outline: none;
  font-family: var(--font-sans);
  transition: border-color var(--t-fast);
}
.auth-form-side input:focus {
  border-color: var(--metro-pos);
  box-shadow: none;
}
.auth-form-side .grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.auth-form-side .auth-error {
  background: var(--metro-pos);
  color: #FFFFFF;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  margin-bottom: var(--s-4);
  font-size: 13px;
  font-weight: 700;
}
.auth-form-side .auth-error ul {
  margin: 0; padding-left: 1.1rem;
}
.auth-form-side .auth-submit {
  width: 100%;
  padding: 18px 20px;
  margin-top: var(--s-6);
  background: var(--metro-pos);
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--t-fast);
}
.auth-form-side .auth-submit:hover { background: var(--metro-pos-dk); }
.auth-form-side .auth-submit:active { transform: scale(0.98); }
.auth-form-side .auth-footer {
  margin-top: var(--s-6);
  font-size: 13px;
  color: var(--text-mute);
}
.auth-form-side .auth-footer a {
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--metro-pos);
  text-decoration: none;
  padding-bottom: 1px;
}
.auth-form-side .auth-footer a:hover { color: var(--metro-pos); }

@media (max-width: 880px) {
  .auth-split { grid-template-columns: 1fr; min-height: auto; }
  .auth-panel { padding: var(--s-8) var(--s-4); }
  .auth-panel-brand { font-size: 56px; }
  .auth-form-side { padding: var(--s-8) var(--s-4); }
  .auth-form-side h1 { font-size: 32px; }
}

/* ==========================================================================
   TILES METRO — Launcher (Welcome) y grids tipo Win8 Start Screen
   Bloques cuadrados, plano, color de sección, hover scale(0.97).
   ========================================================================== */

.mp-launcher {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--tile-s);
  gap: var(--tile-gap);
  margin: var(--s-4) 0 var(--s-8);
  max-width: 900px;
}
.mp-launcher--narrow {
  grid-template-columns: repeat(4, 180px);
}
@media (max-width: 720px) {
  .mp-launcher { grid-template-columns: repeat(2, 1fr); }
  .mp-tile-lg { grid-column: span 2; grid-row: span 1; }
}

.mp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface-soft);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  transition: transform var(--t-fast);
  cursor: pointer;
}
.mp-tile:hover { transform: scale(0.97); }
.mp-tile:active { transform: scale(0.94); }
.mp-tile:focus-visible {
  outline: 3px solid var(--metro-pos);
  outline-offset: 3px;
}

/* Tamaños */
.mp-tile-w  { grid-column: span 2; }                /* 2x1 wide */
.mp-tile-lg { grid-column: span 2; grid-row: span 2; }  /* 2x2 */
.mp-tile-xl { grid-column: span 3; grid-row: span 2; }  /* 3x2 */

/* Color por sección (texto blanco encima) */
.mp-tile--pos      { background: var(--metro-pos);      color: #FFFFFF; }
.mp-tile--sales    { background: var(--metro-sales);    color: #FFFFFF; }
.mp-tile--cash     { background: var(--metro-cash);     color: #FFFFFF; }
.mp-tile--products { background: var(--metro-products); color: #FFFFFF; }
.mp-tile--methods  { background: var(--metro-methods);  color: #FFFFFF; }
.mp-tile--teal     { background: var(--metro-teal);     color: #FFFFFF; }
.mp-tile--warning  { background: var(--metro-warning);  color: #1B1B1B; }
.mp-tile--dark     { background: var(--surface-soft);   color: var(--text); }

/* Hover sombra de color ligera (sin shadow real, solo highlight inner) */
.mp-tile--pos:hover      { background: var(--metro-pos-dk); }
.mp-tile--sales:hover    { background: var(--metro-sales-dk); }
.mp-tile--cash:hover     { background: var(--metro-cash-dk); }
.mp-tile--products:hover { background: var(--metro-products-dk); }
.mp-tile--methods:hover  { background: var(--metro-methods-dk); }

/* Contenido interno */
.mp-tile-icon {
  width: 40px; height: 40px;
  stroke-width: 2;
  opacity: 0.95;
}
.mp-tile-lg .mp-tile-icon,
.mp-tile-xl .mp-tile-icon { width: 72px; height: 72px; }

.mp-tile-body {
  display: flex; flex-direction: column; gap: 2px;
}
.mp-tile-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.mp-tile-lg .mp-tile-title,
.mp-tile-xl .mp-tile-title {
  font-size: 22px;
  letter-spacing: 0.02em;
}
.mp-tile-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mp-tile-num {
  font-size: 48px;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mp-tile-lg .mp-tile-num,
.mp-tile-xl .mp-tile-num { font-size: 96px; }

/* Etiqueta de grupo arriba de un grupo de tiles */
.mp-launcher-group-title {
  margin: var(--s-5) 0 var(--s-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}

/* Status strip estilo Metro (saludo + estado caja + reloj) */
.mp-launcher-hello {
  font-size: 40px;
  font-weight: 200;
  letter-spacing: -0.02em;
  margin: var(--s-4) 0 var(--s-2);
  color: var(--text);
}
.mp-launcher-hello strong {
  font-weight: 700;
}
.mp-launcher-status {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin-bottom: var(--s-5);
}
.mp-launcher-status .sep {
  color: var(--text-faint);
}

/* ==========================================================================
   v2 OVERRIDES — Neutro premium + accent rojo en CTAs críticos
   Pisa los estilos legacy con el espíritu del tema F.
   ========================================================================== */

/* CTA primario: rojo (override del compat layer) */
.mp-btn-primary {
  background: var(--accent-500);
  color: var(--accent-fg);
  border-color: var(--accent-500);
}
.mp-btn-primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
}

/* Icon utility — usa con <svg class="icon"><use href="#i-X"/></svg> */
.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 2;
  vertical-align: -0.18em;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; }

/* ==========================================================================
   FORMS v2 — utilidades para que los <form> respiren igual en toda la app
   ========================================================================== */

.mp-form { display: flex; flex-direction: column; gap: var(--s-4); }
.mp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}
.mp-form-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  .mp-form-grid--2 { grid-template-columns: 1fr; }
}

.mp-field { display: flex; flex-direction: column; gap: 6px; }
.mp-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mp-field-hint {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: -2px;
}

.mp-input, .mp-textarea, .mp-select {
  width: 100%;
  padding: 10px 14px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  outline: none;
  transition: all var(--t-fast);
}
.mp-input:focus, .mp-textarea:focus, .mp-select:focus {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}
.mp-input::placeholder, .mp-textarea::placeholder { color: var(--text-faint); }
.mp-textarea { min-height: 80px; resize: vertical; }

.mp-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  margin-top: var(--s-2);
}
.mp-form-actions--start { justify-content: flex-start; }
.mp-form-actions--split { justify-content: space-between; }

.mp-checkbox-row {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
}
.mp-checkbox-row input[type="checkbox"] {
  margin: 0;
  margin-top: 2px;
  transform: scale(1.15);
  accent-color: var(--brand-500);
  cursor: pointer;
}
.mp-checkbox-row-text { flex: 1; }
.mp-checkbox-row-title {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.mp-checkbox-row-desc {
  font-size: 12px; color: var(--text-mute);
  margin-top: 2px;
  line-height: 1.4;
}

/* Info / warning / success boxes inline */
.mp-alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: 13px;
  border: 1px solid;
}
.mp-alert .icon { margin-top: 2px; flex-shrink: 0; }
.mp-alert--info { background: var(--info-50); color: var(--info-500); border-color: rgba(29, 78, 216, 0.2); }
.mp-alert--success { background: var(--success-50); color: var(--success-500); border-color: rgba(5, 150, 105, 0.25); }
.mp-alert--warning { background: var(--warning-50); color: var(--warning-500); border-color: rgba(180, 83, 9, 0.25); }
.mp-alert--danger { background: var(--danger-50); color: var(--accent-600); border-color: rgba(220, 38, 38, 0.25); }