/* =============================================================================
   KOMANDESK · REDESIGN
   Capa nueva de diseño. Convive con ops-premium-tokens.css (legacy) y se enlaza
   DESPUÉS. No toca los estilos antiguos: cada pantalla se migra a este sistema
   cuando la rehacemos. Tema = solo variables (claro por defecto, oscuro abajo).

   Estética base: template dashboard de Nuxt (superficies claras, aireado,
   bordes suaves). Color de marca: granate.

   Índice
   -----------------------------------------------------------------------------
   1. Tokens (paleta granate + neutros + roles de superficie/texto)
   2. Tema oscuro (solo redefine roles)
   3. Componentes: auth / login
   ========================================================================== */

/* =============================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* --- Granate (color de marca; re-tinta todo lo que consuma --primary) --- */
  --granate-50:  #fdf2f4;
  --granate-100: #fce7eb;
  --granate-200: #f7c9d3;
  --granate-300: #ee9bad;
  --granate-400: #e06584;
  --granate-500: #c73e63;
  --granate-600: #9d2449;
  --granate-700: #7f1d3c;
  --granate-800: #6b1a34;
  --granate-900: #5c1a30;

  /* --- Neutros (escala slate, estilo Nuxt) ------------------------------- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* --- Intención (semánticos) ------------------------------------------- */
  --ok:     #16a34a;
  --ok-soft:   #dcfce7;
  --warn:   #d97706;
  --warn-soft: #fef3c7;
  --bad:    #dc2626;
  --bad-soft:  #fee2e2;

  /* --- Roles de superficie y texto (lo que consumen los componentes) ----- */
  --bg:            var(--slate-50);
  --surface:       #ffffff;
  --surface-2:     var(--slate-100);
  --surface-hover: var(--slate-100);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --fg:            var(--slate-900);
  --fg-soft:       var(--slate-600);
  --fg-muted:      var(--slate-400);

  /* --- Primario (derivado del granate) ---------------------------------- */
  --primary:       var(--granate-600);
  --primary-hover: var(--granate-700);
  --primary-soft:  var(--granate-50);
  --primary-fg:    #ffffff;
  --ring:          color-mix(in srgb, var(--primary) 40%, transparent);

  /* --- Sidebar (roles propios; claro estilo Nuxt) ----------------------- */
  --nav-bg:         var(--surface);
  --nav-fg:         var(--fg-soft);
  --nav-fg-strong:  var(--fg);
  --nav-muted:      var(--fg-muted);
  --nav-hover-bg:   var(--surface-2);
  --nav-active-bg:  var(--primary-soft);
  --nav-active-fg:  var(--primary);
  --nav-border:     var(--border);
  --nav-icon-bg:    var(--surface-2);
  --nav-icon-fg:    var(--fg-muted);

  /* --- Radios y sombras (suaves, Nuxt) ---------------------------------- */
  --k-r-sm: 6px;
  --k-r-md: 8px;
  --k-r-lg: 12px;
  --k-r-xl: 16px;
  --k-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --k-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05);
  --k-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* =============================================================================
   2 · TEMA OSCURO — solo redefine roles; ningún componente se toca.
   Aplica al tema oscuro del rediseño (nuxt-dark) y también al legacy "dark",
   para que los componentes ya migrados se vean oscuros bajo ambos.
   ========================================================================== */
[data-theme="nuxt-dark"],
[data-theme="dark"] {
  --bg:            var(--slate-950);
  --surface:       var(--slate-900);
  --surface-2:     #0b1220;
  --surface-hover: var(--slate-800);
  --border:        color-mix(in srgb, #ffffff 9%, transparent);
  --border-strong: color-mix(in srgb, #ffffff 15%, transparent);
  --fg:            var(--slate-100);
  --fg-soft:       var(--slate-400);
  --fg-muted:      var(--slate-500);

  --primary:       var(--granate-500);
  --primary-hover: var(--granate-400);
  --primary-soft:  color-mix(in srgb, var(--granate-500) 18%, transparent);
  --ring:          color-mix(in srgb, var(--primary) 55%, transparent);

  --nav-bg:         var(--surface);
  --nav-fg:         var(--slate-400);
  --nav-fg-strong:  var(--slate-100);
  --nav-muted:      var(--slate-500);
  --nav-hover-bg:   var(--surface-hover);
  --nav-active-bg:  color-mix(in srgb, var(--granate-500) 22%, transparent);
  --nav-active-fg:  var(--granate-200);
  --nav-border:     var(--border);
  --nav-icon-bg:    var(--surface-hover);
  --nav-icon-fg:    var(--slate-400);
}

/* =============================================================================
   3 · AUTH / LOGIN
   ========================================================================== */
/* Nuestros componentes definen display propio (flex). Como el JS oculta/muestra
   con la clase .hidden, hay que garantizar que .hidden gane SOBRE esos componentes.
   Se hace con selectores de mayor especificidad, acotados a nuestras clases, para
   no tocar el .hidden global del resto de la app. */
.k-auth.hidden,
.k-form.hidden { display: none; }

.k-auth {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 55%),
    var(--bg);
  font-family: var(--font-ui);
  color: var(--fg);
}

.k-auth-card {
  width: 100%;
  max-width: 25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--k-r-xl);
  box-shadow: var(--k-shadow-lg);
  padding: 2rem 1.75rem 1.75rem;
}

.k-auth-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.k-auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--k-r-md);
  background: var(--primary);
  color: var(--primary-fg);
  flex: none;
}
.k-auth-brand-mark svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.k-auth-brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.k-auth-brand-name span {
  color: var(--fg-muted);
  font-weight: 500;
  margin-left: 0.15rem;
}

.k-auth-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 0.3rem;
}
.k-auth-subtitle {
  font-size: 0.875rem;
  color: var(--fg-soft);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.k-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.k-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.k-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg-soft);
}
.k-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--k-r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.k-input::placeholder { color: var(--fg-muted); }
.k-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  border-radius: var(--k-r-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.k-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}
.k-btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
}
.k-btn-primary:hover { background: var(--primary-hover); }

.k-btn-ghost {
  background: transparent;
  color: var(--fg-soft);
  font-weight: 500;
  height: auto;
  padding: 0.35rem;
}
.k-btn-ghost:hover { color: var(--fg); text-decoration: underline; }

.k-auth-error {
  font-size: 0.85rem;
  color: var(--bad);
  padding: 0.6rem 0.75rem;
  background: var(--bad-soft);
  border-radius: var(--k-r-md);
}
[data-theme="nuxt-dark"] .k-auth-error,
[data-theme="dark"] .k-auth-error {
  background: color-mix(in srgb, var(--bad) 16%, transparent);
  color: color-mix(in srgb, var(--bad) 60%, #ffffff);
}

.k-auth-note {
  font-size: 0.8rem;
  color: var(--fg-soft);
  text-align: center;
}

.k-invite-summary {
  padding: 0.75rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--k-r-md);
}
.k-invite-summary-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
}
.k-invite-summary-detail {
  font-size: 0.8rem;
  color: var(--fg-soft);
  margin-top: 0.2rem;
}

/* =============================================================================
   4 · BOTONES — mapea las clases legacy .btn-* al granate bajo el tema nuevo.
   Solo cambia color (la geometría viene de la base .btn-* de ops-premium-tokens).
   Va con !important porque la base también lo usa.
   ========================================================================== */
[data-theme="nuxt"] .btn-primary,
[data-theme="nuxt-dark"] .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-fg) !important;
}
[data-theme="nuxt"] .btn-primary:hover,
[data-theme="nuxt-dark"] .btn-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-fg) !important;
}
[data-theme="nuxt"] .btn-outline,
[data-theme="nuxt-dark"] .btn-outline {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
[data-theme="nuxt"] .btn-outline:hover,
[data-theme="nuxt-dark"] .btn-outline:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}

/* =============================================================================
   5 · MARCO / SHELL — topbar, barra de filtros y contenido principal.
   Se hace tematizable (variables) para que claro y oscuro sean coherentes.
   Scopeado al tema nuevo para no tocar los temas legacy.
   ========================================================================== */
[data-theme="nuxt"] body,
[data-theme="nuxt-dark"] body { background: var(--bg); }

[data-theme="nuxt"] #global-topbar,
[data-theme="nuxt-dark"] #global-topbar,
[data-theme="nuxt"] #filter-bar,
[data-theme="nuxt-dark"] #filter-bar,
[data-theme="nuxt"] #kb-col-filter:not(.hidden),
[data-theme="nuxt-dark"] #kb-col-filter:not(.hidden) {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="nuxt"] .k-main,
[data-theme="nuxt-dark"] .k-main {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="nuxt"] #app,
[data-theme="nuxt-dark"] #app {
  background: var(--surface);
  color: var(--fg);
}

/* Texto del topbar/filtros en oscuro: los grises hardcodeados no leen sobre
   superficie oscura; los remapeamos a roles. En claro se dejan como están. */
[data-theme="nuxt-dark"] #global-topbar .text-gray-700,
[data-theme="nuxt-dark"] #filter-bar .text-gray-700 { color: var(--fg-soft) !important; }
[data-theme="nuxt-dark"] #global-topbar .text-gray-400,
[data-theme="nuxt-dark"] #filter-bar .text-gray-400 { color: var(--fg-muted) !important; }

/* =============================================================================
   6 · REMAPEO DE ROLES LEGACY (--c-*) → roles nuxt.
   Toda la capa legacy (status-badge, ops-color-chip, chips, selects, tablas…)
   consume las variables --c-*. Remapeándolas bajo el tema nuevo se re-tinta
   TODO de golpe al slate+granate, sin restyle pieza a pieza. Gana sobre el
   :root legacy por ir después (misma especificidad) y solo aplica en nuxt.
   ========================================================================== */
[data-theme="nuxt"],
[data-theme="nuxt-dark"] {
  --c-bg:            var(--bg);
  --c-surface:       var(--surface);
  --c-surface-alt:   var(--surface-2);
  --c-surface-soft:  var(--surface-2);
  --c-text:          var(--fg);
  --c-text-muted:    var(--fg-muted);
  --c-border:        var(--border);
  --c-border-strong: var(--border-strong);
  --c-accent:        var(--primary);
  --c-success:       var(--ok);
  --c-warning:       var(--warn);
  --c-danger:        var(--bad);
  --c-emphasis-bg:     var(--slate-900);
  --c-emphasis-text:   #ffffff;
  --c-emphasis-muted:  var(--slate-400);
  --c-emphasis-border: color-mix(in srgb, #ffffff 12%, transparent);
}
[data-theme="nuxt-dark"] {
  --c-emphasis-bg:     var(--slate-800);
}

/* =============================================================================
   7 · AFINADO DE PILLS/CHIPS al lenguaje Nuxt (menos peso visual)
   ========================================================================== */
/* Chips de filtro/columna: el acento es un borde izquierdo a toda la altura y a
   ras del extremo, pero RECTO. Se consigue cuadrando solo las esquinas izquierdas
   (izquierda recta, derecha redondeada) → el acento no sigue ninguna curva. */
[data-theme="nuxt"] .ops-color-chip,
[data-theme="nuxt-dark"] .ops-color-chip {
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--chip-accent, var(--c-text-muted)) !important;
  border-radius: 0 var(--k-r-md) var(--k-r-md) 0;
  padding-left: 0.55rem;
}
[data-theme="nuxt"] .ops-color-chip:hover,
[data-theme="nuxt-dark"] .ops-color-chip:hover,
[data-theme="nuxt"] .ops-color-chip.active,
[data-theme="nuxt-dark"] .ops-color-chip.active {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  border-left-color: var(--chip-accent, var(--c-text-muted)) !important;
  color: var(--fg) !important;
}

/* Selects e inputs del área de menús: superficie + borde nuxt, radio suave. */
[data-theme="nuxt"] #filter-bar select,
[data-theme="nuxt-dark"] #filter-bar select,
[data-theme="nuxt"] #filter-bar input[type="text"],
[data-theme="nuxt-dark"] #filter-bar input[type="text"],
[data-theme="nuxt"] #global-topbar select,
[data-theme="nuxt-dark"] #global-topbar select {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--k-r-md);
  color: var(--fg);
}
[data-theme="nuxt"] #filter-bar input[type="text"]:focus,
[data-theme="nuxt-dark"] #filter-bar input[type="text"]:focus,
[data-theme="nuxt"] #filter-bar select:focus,
[data-theme="nuxt-dark"] #filter-bar select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}