/* ============================================================================
   Panel del negocio — mismo sistema Nocturne del catálogo público (tokens
   duplicados a propósito: panel y catálogo son sitios distintos, sin imports
   cruzados entre ellos).
   ========================================================================= */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #b88e53;
  --color-divider: rgba(233, 233, 237, .16);

  --color-accent-100: #f7edd7; --color-accent-200: #eddbb9; --color-accent-300: #dbc091;
  --color-accent-400: #cca770; --color-accent-500: #b88e53; --color-accent-600: #99703d;
  --color-accent-700: #946838; --color-accent-800: #4c351f; --color-accent-900: #36271a;

  --color-neutral-400: #9a9aa6; --color-neutral-500: #7d7d89; --color-neutral-600: #62626d;
  --color-neutral-700: #4a4a53; --color-neutral-800: #34343d; --color-neutral-900: #24242c;

  --color-foto-bg: #ffffff;
  --color-danger: #d97757;

  --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px;
  --space-5: 14px;  --space-6: 16.8px; --space-7: 19.6px; --space-8: 22.4px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);

  /* Texto encima del acento sólido. NO es --color-bg: el acento-500 es de
     luminosidad media en las 6 paletas, así que el texto encima tiene que
     ser oscuro en los dos temas — con --color-bg se volvería casi blanco
     sobre dorado al prender la luz. */
  --color-sobre-acento: #161826;

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad: 14px;
  --ancho: 402px;
}

/* ─────────────────────────── Tema claro ───────────────────────────
   Mismo bloque que el del catálogo (tokens duplicados a propósito, ver la
   cabecera). Solo tokens, ningún selector de componente: la rampa del
   acento la escribe invertida acentos.js en runtime.

   Los neutrales no son un intercambio mecánico 400↔900 — se calcularon para
   dar sobre el fondo claro el mismo contraste que cada paso da hoy sobre el
   oscuro, así la jerarquía visual no cambia al prender la luz. */
:root[data-tema="claro"] {
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-text: #21212d;
  --color-divider: rgba(33, 33, 45, .14);

  --color-neutral-400: #595965;
  --color-neutral-500: #72727e;
  --color-neutral-600: #8f8f9b;
  --color-neutral-700: #aeaeba;
  --color-neutral-800: #ceceda;
  --color-neutral-900: #e6e6f2;

  --shadow-md: 0 6px 24px rgba(24, 24, 40, .10);
  --shadow-lg: 0 12px 40px rgba(24, 24, 40, .16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--color-bg); }
body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  max-width: var(--ancho);
  margin-inline: auto;
  min-height: 100dvh;
}
button, input, textarea, select { font-family: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }
[disabled] { opacity: .5; cursor: not-allowed; }

.cargando {
  min-height: 100dvh; display: grid; place-items: center;
  font-size: 12.5px; color: var(--color-neutral-500);
}

/* ─────────────────────────── Login ─────────────────────────── */

.login {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-8) var(--pad);
}
.login-marca { font-size: 18px; font-weight: 600; text-align: center; margin-bottom: var(--space-2); }
.login-sub { font-size: 12px; color: var(--color-neutral-500); text-align: center; margin-bottom: var(--space-7); line-height: 1.5; }
.login form { display: flex; flex-direction: column; gap: var(--space-3); }

/* ─────────────────────────── Campos de formulario (compartidos) ─────────────────────────── */

.campo {
  width: 100%; height: 40px; padding: 0 12px;
  font-size: 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  transition: border-color 150ms ease;
}
textarea.campo { height: auto; padding: 10px 12px; resize: vertical; }
.campo::placeholder { color: var(--color-neutral-600); }
.campo:focus { border-color: var(--color-accent-700); }
.campo-chico { height: 36px; font-size: 12.5px; }

.campo-ayuda { font-size: 10.5px; line-height: 1.5; color: var(--color-neutral-600); }
.campo-ayuda-error { color: var(--color-danger); }

.etiqueta { font-size: 11px; font-weight: 500; color: var(--color-neutral-400); margin: var(--space-2) 0 2px; display: block; }

.btn-primario {
  width: 100%; height: 46px; margin-top: var(--space-3);
  font-size: 13.5px; font-weight: 600;
  color: var(--color-sobre-acento);
  background: var(--color-accent);
  border-radius: var(--radius-md);
}
.btn-primario:hover { background: var(--color-accent-400); }
.btn-primario[disabled] { background: var(--color-neutral-700); color: var(--color-neutral-500); }

.btn-secundario {
  width: 100%; height: 38px; margin-top: var(--space-2);
  font-size: 12.5px; font-weight: 500;
  color: var(--color-accent-300);
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-md);
}
.btn-secundario:hover { background: var(--color-accent-800); }

/* ─────────────────────────── Cascarón / topbar ─────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-4)) var(--pad) var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.topbar-marca { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-cambiar {
  flex: none; max-width: 42%; height: 28px; font-size: 11.5px;
  background: var(--color-surface); color: var(--color-neutral-300);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  padding: 0 6px;
}

.btn-icono {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  color: var(--color-neutral-400);
}
.btn-icono:hover { background: var(--color-neutral-800); }
.btn-icono svg { width: 15px; height: 15px; }

.btn-texto {
  font-size: 11.5px; font-weight: 500; color: var(--color-neutral-400);
  padding: 6px 4px;
}
.btn-texto:hover { color: var(--color-text); }
.btn-cancelar { color: var(--color-danger); display: block; width: 100%; text-align: center; padding: 10px 0; }

/* ─────────────────────────── Barra de pestañas ─────────────────────────── */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 15;
  max-width: var(--ancho); margin-inline: auto;
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px;
  font-size: 10px; font-weight: 500;
  color: var(--color-neutral-500);
}
.tab svg { width: 19px; height: 19px; }
.tab.activo { color: var(--color-accent-300); }

/* El resto del contenido no debe quedar tapado por la barra fija de abajo. */
.lista-productos, .lista-pedidos, .form-producto { padding-bottom: 76px; }

/* ─────────────────────────── Buscador ─────────────────────────── */

.buscador { position: relative; margin: var(--space-4) var(--pad) 0; }
.buscador > svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--color-neutral-500); pointer-events: none;
}
.buscador input {
  width: 100%; height: 36px; padding: 0 12px 0 30px;
  font-size: 12.5px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
}
.buscador input::placeholder { color: var(--color-neutral-600); }

/* ─────────────────────────── Lista de productos ─────────────────────────── */

.lista-productos { padding: var(--space-4) var(--pad) 140px; }
.seccion-titulo {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--color-neutral-500);
  margin: var(--space-5) 0 var(--space-2);
}
.seccion-titulo:first-child { margin-top: 0; }

.fila-producto {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  cursor: pointer;
}
.fila-producto.oculto { opacity: .5; }

.fila-foto {
  width: 44px; height: 44px; flex: none;
  background: var(--color-foto-bg);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  overflow: hidden;
  color: #c7c7cc;
}
.fila-foto img { width: 100%; height: 100%; object-fit: contain; }
.fila-foto svg { width: 18px; height: 18px; }

.fila-cuerpo { flex: 1; min-width: 0; }
.fila-nombre { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-precio { font-size: 11.5px; color: var(--color-neutral-500); margin-top: 1px; }
.fila-tallas { margin-top: var(--space-2); }

/* Chips de variante: mismo componente visual que el catálogo público, pero
   aquí un tap ALTERNA disponible/agotada en vez de seleccionar para comprar. */
.tallas { display: flex; flex-wrap: wrap; gap: 5px; }
.talla {
  min-width: 26px; height: 24px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 500;
  color: var(--color-neutral-300, var(--color-neutral-400));
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-sm);
}
.talla.agotada {
  color: var(--color-neutral-600);
  background: transparent;
  border-color: var(--color-neutral-800);
  text-decoration: line-through;
}

/* Interruptor Disponible/Se acabó — mismo patrón que ya probó el punto de
   venta: área de toque grande, estado con forma (no solo color). */
.switch {
  width: 44px; height: 26px; flex: none; padding: 2px;
  border-radius: 13px; border: 1px solid var(--color-neutral-700);
  display: flex; align-items: center;
  background: transparent;
}
.switch .knob { width: 20px; height: 20px; border-radius: 50%; background: var(--color-neutral-600); transition: transform 150ms ease, background 150ms ease; }
.switch.on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 20%, transparent); justify-content: flex-end; }
.switch.on .knob { background: var(--color-accent); }

/* ─────────────────────────── Botón flotante "+" ─────────────────────────── */

.fab {
  position: fixed; right: calc((100dvw - min(100dvw, var(--ancho))) / 2 + var(--pad));
  /* Encima de la barra de pestañas (~64px), no encima del safe-area solo. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent);
  color: var(--color-sobre-acento);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}
.fab svg { width: 22px; height: 22px; }
.fab:hover { background: var(--color-accent-400); }

/* ─────────────────────────── Formulario de producto ─────────────────────────── */

/* 90px de aire abajo: suficiente para el formulario suelto (sin barra de
   pestañas) y para Ajustes, que reusa esta misma clase y sí trae la barra. */
.form-producto { padding: var(--space-5) var(--pad) 90px; display: flex; flex-direction: column; }

.foto-preview {
  width: 100%; aspect-ratio: 1 / 1; max-width: 160px;
  background: var(--color-foto-bg);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  color: #c7c7cc;
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.foto-preview img { width: 100%; height: 100%; object-fit: contain; }
.foto-preview svg { width: 28px; height: 28px; }

#pf-variantes { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.fila-variante { display: flex; gap: var(--space-2); align-items: center; }
.fila-variante .campo { flex: 1; }
.fila-variante .btn-icono { flex: none; }

/* ─────────────────────────── Avisos y toast ─────────────────────────── */

.aviso { padding: 48px var(--space-5); text-align: center; }
.aviso-titulo { font-size: 13.5px; font-weight: 500; margin-bottom: var(--space-2); }
.aviso-texto { font-size: 11.5px; line-height: 1.6; color: var(--color-neutral-500); }

.toast {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  left: var(--pad); right: var(--pad);
  max-width: calc(var(--ancho) - var(--pad) * 2);
  margin-inline: auto;
  z-index: 60;
  padding: var(--space-4) var(--space-5);
  font-size: 11.5px; line-height: 1.45;
  color: var(--color-accent-200);
  background: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ─────────────────────────── Pedidos ─────────────────────────── */

.resumen-ventas {
  margin: var(--space-4) var(--pad) 0;
  padding: var(--space-4);
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-lg);
}
.resumen-ventas-cifra { font-size: 24px; font-weight: 700; color: var(--color-accent-200); font-variant-numeric: tabular-nums; }
.resumen-ventas-sub { font-size: 11px; color: var(--color-accent-300); margin-top: 2px; }

.lista-pedidos { padding: var(--space-4) var(--pad); }
.fila-pedido {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.fila-pedido-cabeza {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3);
}
.fila-pedido-folio { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.fila-pedido-sub { font-size: 11px; color: var(--color-neutral-500); margin-top: 3px; text-align: left; }
.fila-pedido-total { font-size: 13px; font-weight: 600; flex: none; }

.estado-chip {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 20px;
  border: 1px solid var(--color-neutral-700); color: var(--color-neutral-400);
}
.estado-chip.estado-nuevo { border-color: var(--color-accent-700); color: var(--color-accent-300); background: var(--color-accent-900); }
.estado-chip.estado-confirmado { border-color: #3d6b8f; color: #8fc1e6; background: rgba(61, 107, 143, .18); }
.estado-chip.estado-completado { border-color: var(--wa, #25d366); color: var(--wa, #25d366); background: rgba(37, 211, 102, .12); }
.estado-chip.estado-cancelado { border-color: var(--color-neutral-700); color: var(--color-neutral-600); text-decoration: line-through; }

.detalle-pedido {
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-neutral-900);
}
.detalle-renglon {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: 11.5px; padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-neutral-900);
}
.detalle-cliente { font-size: 11px; color: var(--color-neutral-500); padding: var(--space-3) 0; }

/* ─────────────────────────── Ajustes: acentos y categorías ─────────────────────────── */

.acentos { display: flex; gap: var(--space-3); margin: var(--space-2) 0; }
.acento-circulo {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.acento-circulo.activo { border-color: var(--color-text); }

.acento-personalizado {
  position: relative;
  display: block;
  cursor: pointer;
  background: conic-gradient(red, orange, yellow, green, blue, violet, red);
}
.fila-tema {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin: var(--space-2) 0;
  font-size: 12px; color: var(--color-neutral-400);
}

.acento-personalizado input[type="color"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  border: none; padding: 0;
}

.lista-categorias { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.fila-categoria {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  font-size: 12.5px;
}
.fila-categoria-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-categoria-plantilla { flex: none; max-width: 40%; height: 28px; font-size: 11.5px; }

/* ─────────────────── QR del catálogo (Ajustes) ─────────────────── */

.qr-caja {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-2);
}

/* Blanco fijo en los dos temas: un QR sobre fondo oscuro o teñido con el
   acento pierde contraste y hay lectores que dejan de leerlo. El color de
   la marca vive alrededor, nunca en el código. */
.qr-lienzo {
  width: 108px; height: 108px; flex: none;
  padding: 5px;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-800);
}
.qr-lienzo svg { width: 100%; height: 100%; display: block; }

.qr-datos {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
}
.qr-url {
  font-size: 10.5px; color: var(--color-neutral-500);
  word-break: break-all;
}
.qr-datos .btn-secundario { width: 100%; }