/* =============================================================
   TEMA MAYORISTA DE ESENCIAS
   Refined minimalism · Sidebar fijo · Iconos Tabler · Inter
   ============================================================= */

/*
 * Iconografía: Tabler Icons (https://tabler.io/icons) bajo licencia MIT.
 * Copyright (c) 2020-2024 Paweł Kuna.
 * Este proyecto usa Tabler Icons via CDN. La licencia completa se incluye en LICENSE-tabler-icons.txt.
 */

/* ───────── VARIABLES ───────── */
:root {
  /* Paleta Mayorista de Esencias */
  --cp-primary:       #0891b2;
  --cp-primary-hover: #0e7c95;
  --cp-primary-soft:  rgba(8, 145, 178, 0.08);
  --cp-primary-strong: #064e5b;

  --cp-accent:        #fbbf24;
  --cp-accent-soft:   rgba(251, 191, 36, 0.12);
  --cp-accent-strong: #7c2d12;

  --cp-sand:          #fef9f3;
  --cp-sand-deep:     #fef3e2;

  /* Neutros */
  --cp-bg:            #f7f4ef;          /* fondo general */
  --cp-surface:       #ffffff;           /* cards */
  --cp-surface-alt:   #fbf7f1;           /* alternancia */
  --cp-border:        #e8e0d4;
  --cp-border-soft:   #f0eadf;

  --cp-text:          #1a1a1a;
  --cp-text-muted:    #6b6b6b;
  --cp-text-soft:     #9a9a9a;

  /* Estados */
  --cp-success:       #10b981;
  --cp-warning:       #f59e0b;
  --cp-danger:        #dc2626;
  --cp-info:          #0ea5e9;

  /* Color por grupo del sidebar — cada menú desplegable tiene su propio fondo para
     distinguirlos de un vistazo. Los 6 tonos están repartidos por la RUEDA DE COLOR
     (azul, verde, morado, terracota, ciruela y gris azulado), no solo por luminosidad:
     así no se confunden entre sí ni con el degradado teal del sidebar. Se evita a
     propósito la familia teal/verde-azulado, que es la del fondo.
     ⚠️ Son tonos APAGADOS a propósito (pedido de Carlos, 25-jul): la primera versión
     usaba colores saturados de paleta Tailwind 600/700 y cansaban la vista. Estos están
     desaturados (~35-45% de saturación) y aun así dan contraste ≥ 4.7:1 con el texto
     blanco. Si se cambian, recalcular ese contraste antes de subirlos.
     El "-soft" es la versión tenue del mismo color y se usa de fondo de los ítems
     cuando el grupo está desplegado. */
  --cp-grupo-operacion:           #4a6fa5;  /* azul acero    — 5.11:1 */
  --cp-grupo-operacion-soft:      rgba(74, 111, 165, 0.45);
  --cp-grupo-inventario:          #4f7d63;  /* verde salvia  — 4.72:1 */
  --cp-grupo-inventario-soft:     rgba(79, 125, 99, 0.45);
  --cp-grupo-ventas:              #6f5f96;  /* morado suave  — 5.60:1 */
  --cp-grupo-ventas-soft:         rgba(111, 95, 150, 0.45);
  --cp-grupo-finanzas:            #96603c;  /* terracota     — 5.20:1 */
  --cp-grupo-finanzas-soft:       rgba(150, 96, 60, 0.45);
  --cp-grupo-contabilidad:        #96566c;  /* ciruela       — 5.46:1 */
  --cp-grupo-contabilidad-soft:   rgba(150, 86, 108, 0.45);
  --cp-grupo-administracion:      #5b6b7d;  /* gris azulado  — 5.46:1 */
  --cp-grupo-administracion-soft: rgba(91, 107, 125, 0.50);

  /* Ítem destacado del sidebar (Estudio de precios). Es el único claro sobre el
     fondo oscuro: se lee como un botón, no como un ítem más del menú. Dorado arena
     (no el ámbar chillón anterior); el texto marrón oscuro da 6.3:1 sobre él. */
  /* Los tres accesos destacados del sidebar (Mail, Estudio de productos, Estudio de
     precios) llevan tonos PASTEL DESATURADOS, no colores plenos: sobre el teal oscuro
     del menú, un naranja o un dorado saturados vibran y cansan la vista en jornadas
     largas. Cada uno tiene su familia para distinguirlos de un vistazo, con el mismo
     nivel de luminosidad para que ninguno grite más que otro. El texto va en un tono
     oscuro de su propia familia: da contraste cómodo sin el brillo del blanco. */
  --cp-mail:            #cfe0ec;  /* azul niebla */
  --cp-mail-hover:      #bed4e4;
  --cp-mail-text:       #234055;

  --cp-productos:       #d3e3d5;  /* verde salvia */
  --cp-productos-hover: #c2d7c5;
  --cp-productos-text:  #2b4634;

  --cp-destacado:       #ecdcc4;  /* arena suave (Estudio de precios) */
  --cp-destacado-hover: #e2cfb2;
  --cp-destacado-text:  #5b4526;

  /* Layout */
  --cp-sidebar-width: 260px;
  --cp-topbar-height: 56px;
  --cp-radius-sm:     8px;
  --cp-radius:        12px;
  --cp-radius-lg:     16px;

  /* Sombras */
  --cp-shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --cp-shadow:     0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --cp-shadow-lg:  0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);

  /* Tipografía */
  --cp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ───────── BASE ───────── */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--cp-font) !important;
  background-color: var(--cp-bg);
  color: var(--cp-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cp-font);
  font-weight: 600;
  color: var(--cp-text);
  letter-spacing: -0.02em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

a {
  color: var(--cp-primary);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover {
  color: var(--cp-primary-hover);
  text-decoration: underline;
}

/* ───────── LAYOUT GENERAL ───────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  margin-left: var(--cp-sidebar-width);
  display: flex;
  flex-direction: column;
  min-width: 0; /* fix para flex shrink en tablas */
  background: var(--cp-surface);
}

.app-content {
  flex: 1;
  padding: 18px 20px;
  /* `clip` y no `hidden`: hidden computa el eje Y a `auto`, crea un contenedor de
     scroll y rompe cualquier `position: sticky` de dentro (lo pega al contenedor y
     no a la ventana). `clip` recorta igual sin crear ese contenedor. */
  overflow-x: clip;
  min-height: calc(100vh - var(--cp-topbar-height));
}

/* ───────── SIDEBAR ───────── */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--cp-sidebar-width);
  height: 100vh;
  background: linear-gradient(180deg, #064e5b 0%, #0891b2 100%);
  color: white;
  display: flex;
  flex-direction: column;
  z-index: 100;
  box-shadow: 2px 0 12px rgba(0,0,0,0.06);
}

.app-sidebar-brand {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.app-sidebar-brand-logo {
  width: 36px;
  height: 36px;
  background: white;
  color: var(--cp-primary);
  border-radius: var(--cp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.app-sidebar-brand-text {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-sidebar-brand-sub {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 2px;
  font-weight: 400;
}

.app-sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.app-sidebar-section {
  margin-bottom: 8px;
}

.app-sidebar-section-title {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
  padding: 12px 14px 6px;
}

.app-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--cp-radius-sm);
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  text-decoration: none;
}

.app-sidebar-item:hover {
  background: rgba(255,255,255,0.1);
  color: white;
  text-decoration: none;
  transform: translateX(2px);
}

.app-sidebar-item.active {
  background: rgba(255,255,255,0.15);
  color: white;
  font-weight: 600;
}

.app-sidebar-item i {
  font-size: 1.2rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.app-sidebar-item-badge {
  margin-left: auto;
  background: var(--cp-accent);
  color: var(--cp-accent-strong);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Ítem destacado del sidebar: enlace suelto (no va dentro de ningún grupo) con
   fondo sólido claro para que se distinga del resto del menú. */
.app-sidebar-item.app-sidebar-item-destacado {
  background: var(--cp-destacado);
  color: var(--cp-destacado-text);
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: var(--cp-shadow-sm);
}

.app-sidebar-item.app-sidebar-item-destacado:hover {
  background: var(--cp-destacado-hover);
  color: var(--cp-destacado-text);
}

.app-sidebar-item.app-sidebar-item-destacado.active {
  background: var(--cp-destacado-hover);
  color: var(--cp-destacado-text);
  /* Anillo tenue en lugar del blanco casi opaco de antes: sobre un pastel, un borde
     blanco fuerte crea un halo que cansa. Basta con insinuar cuál está activo. */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Grupos desplegables del sidebar (por afinidad) */
.app-sidebar-group {
  margin-bottom: 6px;
}

/* Cada grupo define su color en dos variables locales; las reglas de abajo son
   genéricas y las leen con var(). Si un grupo no trajera color, el fallback deja
   el estilo original (transparente). */
.app-sidebar-group--operacion      { --grupo-color: var(--cp-grupo-operacion);      --grupo-color-soft: var(--cp-grupo-operacion-soft); }
.app-sidebar-group--inventario     { --grupo-color: var(--cp-grupo-inventario);     --grupo-color-soft: var(--cp-grupo-inventario-soft); }
.app-sidebar-group--ventas         { --grupo-color: var(--cp-grupo-ventas);         --grupo-color-soft: var(--cp-grupo-ventas-soft); }
.app-sidebar-group--finanzas       { --grupo-color: var(--cp-grupo-finanzas);       --grupo-color-soft: var(--cp-grupo-finanzas-soft); }
.app-sidebar-group--contabilidad   { --grupo-color: var(--cp-grupo-contabilidad);   --grupo-color-soft: var(--cp-grupo-contabilidad-soft); }
.app-sidebar-group--administracion { --grupo-color: var(--cp-grupo-administracion); --grupo-color-soft: var(--cp-grupo-administracion-soft); }

/* Fondo tenue del contenido del grupo desplegado + encabezado "pegado" a él. */
.app-sidebar-group-items {
  background: var(--grupo-color-soft, transparent);
  border-radius: 0 0 var(--cp-radius-sm) var(--cp-radius-sm);
}

.app-sidebar-group.open > .app-sidebar-group-toggle {
  border-radius: var(--cp-radius-sm) var(--cp-radius-sm) 0 0;
}

.app-sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: var(--grupo-color, none);
  border: none;
  color: rgba(255,255,255,0.95);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  border-radius: var(--cp-radius-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

/* Hover: el inset aclara el fondo del grupo sea cual sea su color (y funciona
   igual cuando no tiene color propio). */
.app-sidebar-group-toggle:hover {
  background: var(--grupo-color, rgba(255,255,255,0.1));
  color: white;
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.12);
}

.app-sidebar-group-toggle i {
  font-size: 1.2rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.app-sidebar-group-chevron {
  margin-left: auto;
  font-size: 1rem !important;
  opacity: 0.6;
  transition: transform 180ms ease;
}

.app-sidebar-group.open .app-sidebar-group-chevron {
  transform: rotate(180deg);
}

.app-sidebar-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}

.app-sidebar-group.open .app-sidebar-group-items {
  max-height: 500px;
}

.app-sidebar-group-items .app-sidebar-item {
  padding: 8px 14px 8px 26px;
  font-size: 0.86rem;
}

.app-sidebar-group-items .app-sidebar-item i {
  font-size: 1.05rem;
}

/* Dentro de un grupo con color, el hover y el ítem activo se refuerzan para que
   sigan notándose sobre el fondo tenue del grupo. */
.app-sidebar-group-items .app-sidebar-item:hover {
  background: rgba(255,255,255,0.18);
}

.app-sidebar-group-items .app-sidebar-item.active {
  background: rgba(255,255,255,0.24);
}

.app-sidebar-group.open > .app-sidebar-group-items {
  padding: 4px 6px;
}

.app-sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.app-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--cp-radius-sm);
  background: rgba(255,255,255,0.06);
}

.app-sidebar-user-avatar {
  width: 32px;
  height: 32px;
  background: white;
  color: var(--cp-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.app-sidebar-user-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  color: white;
}

.app-sidebar-user-role {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* ───────── TOPBAR ───────── */
.app-topbar {
  height: var(--cp-topbar-height);
  background: var(--cp-surface);
  border-bottom: 1px solid var(--cp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-topbar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cp-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-topbar-action {
  background: transparent;
  border: 1px solid transparent;
  width: 38px;
  height: 38px;
  border-radius: var(--cp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cp-text-muted);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.app-topbar-action:hover {
  background: var(--cp-sand);
  border-color: var(--cp-border);
  color: var(--cp-primary);
}

.app-topbar-action i {
  font-size: 1.2rem;
}

/* Menú de usuario del topbar (Mi perfil / Cerrar sesión) */
.app-topbar-user {
  position: relative;
}

.app-topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--cp-radius-sm);
  padding: 3px 8px 3px 3px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.app-topbar-user-btn:hover {
  background: var(--cp-sand);
  border-color: var(--cp-border);
}

.app-topbar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cp-primary);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
}

.app-topbar-user-chevron {
  font-size: 0.9rem;
  color: var(--cp-text-muted);
  transition: transform 160ms ease;
}

.app-topbar-user.open .app-topbar-user-chevron {
  transform: rotate(180deg);
}

.app-topbar-user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  display: none;
  z-index: 200;
}

.app-topbar-user.open .app-topbar-user-dropdown {
  display: block;
}

.app-topbar-user-info {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cp-border);
  margin-bottom: 6px;
}

.app-topbar-user-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cp-text);
}

.app-topbar-user-role {
  font-size: 0.75rem;
  color: var(--cp-text-muted);
  text-transform: capitalize;
}

.app-topbar-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--cp-radius-sm);
  color: var(--cp-text);
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.app-topbar-user-item:hover {
  background: var(--cp-sand);
  color: var(--cp-primary);
  text-decoration: none;
}

.app-topbar-user-item i {
  font-size: 1.1rem;
}

.app-topbar-user-item-danger {
  color: #c0392b;
}

.app-topbar-user-item-danger:hover {
  background: #fdecea;
  color: #c0392b;
}

.app-topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--cp-text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cp-sand);
}

.app-topbar-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cp-text-soft);
}

.app-topbar-status.online .app-topbar-status-dot {
  background: var(--cp-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.app-topbar-team {
  font-size: 0.75rem;
  color: var(--cp-text-muted);
  padding: 4px 10px;
  background: var(--cp-sand);
  border-radius: 8px;
}

/* ───────── CARDS ───────── */
.card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow-sm);
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.card:hover {
  box-shadow: var(--cp-shadow);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--cp-border-soft);
  padding: 14px 18px;
  font-weight: 600;
}

.card-body {
  padding: 18px;
}

/* ───────── BOTONES ───────── */
.btn {
  font-family: var(--cp-font);
  font-weight: 500;
  border-radius: var(--cp-radius-sm);
  padding: 8px 16px;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease, box-shadow 140ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn i { font-size: 1.05rem; }

.btn:active { transform: translateY(0); }
.btn:hover { box-shadow: var(--cp-shadow-sm); }

.btn-primary {
  background: var(--cp-primary);
  color: white;
  border-color: var(--cp-primary);
}
.btn-primary:hover {
  background: var(--cp-primary-hover);
  border-color: var(--cp-primary-hover);
  color: white;
}

.btn-outline-secondary {
  background: var(--cp-surface);
  color: var(--cp-text-muted);
  border-color: var(--cp-border);
}
.btn-outline-secondary:hover {
  background: var(--cp-sand);
  color: var(--cp-text);
  border-color: var(--cp-text-muted);
}

.btn-ghost {
  background: transparent;
  color: var(--cp-text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--cp-sand);
  color: var(--cp-text);
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.8rem;
  border-radius: 6px;
}

.btn-icon {
  padding: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ───────── BADGES ───────── */
.badge {
  font-family: var(--cp-font);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0;
}

.badge-abierto, .bg-warning {
  background: var(--cp-accent-soft) !important;
  color: var(--cp-accent-strong) !important;
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.badge-en-proceso, .badge-success-soft {
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-en-proceso-otros {
  background: #f0f0f0;
  color: #555;
  border: 1px solid #e0e0e0;
}

.badge-cerrado, .badge-archivado {
  background: #f0f0f0;
  color: #555;
}

/* ───────── TABLAS ───────── */
.table {
  width: 100%;
  background: var(--cp-surface);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--cp-radius);
  overflow: hidden;
  border: 1px solid var(--cp-border);
}

.table thead th {
  background: var(--cp-sand);
  color: var(--cp-text-muted);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--cp-border);
  white-space: nowrap;
}

.table tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--cp-border-soft);
  vertical-align: middle;
  font-size: 0.82rem;
  line-height: 1.35;
}

.table tbody td .badge {
  font-size: 0.68rem;
}

.table tbody tr {
  transition: background 120ms ease;
}

/* Cebra (zebra-stripe): fila par con fondo suave para legibilidad en TODOS los
   módulos (las tablas del sistema usan la clase .table). Carga al final → gana. */
.table tbody tr:nth-child(even) {
  background: var(--cp-surface-alt);
}

.table tbody tr:hover {
  background: var(--cp-primary-soft);
  cursor: pointer;
}

.table tbody tr.recien-llegada {
  animation: slideInRow 350ms ease-out;
}

@keyframes slideInRow {
  from { opacity: 0; transform: translateY(-6px); background: var(--cp-primary-soft); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ticket ID estilo "mono" */
.ticket-id {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.72rem;
  color: var(--cp-primary);
  font-weight: 500;
  white-space: nowrap;
}

/* ───────── FORMULARIOS ───────── */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], textarea, select {
  font-family: var(--cp-font);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  padding: 9px 12px;
  font-size: 0.9rem;
  background: var(--cp-surface);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  width: 100%;
}

.form-control:focus, .form-select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}

.form-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cp-text);
  margin-bottom: 6px;
  display: block;
}

/* ───────── MODALES ───────── */
.modal-content {
  border-radius: var(--cp-radius-lg);
  border: none;
  box-shadow: var(--cp-shadow-lg);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(180deg, var(--cp-primary) 0%, var(--cp-primary-hover) 100%);
  color: white;
  border-bottom: none;
  padding: 16px 20px;
}

/* Título en blanco explícito (Bootstrap 5.3 fija --bs-modal-color y pisaba el
   `color:white` heredado, dejando el título oscuro y con poco contraste). */
.modal-header .modal-title {
  color: #fff;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.modal-body {
  padding: 20px;
}

.modal.fade .modal-dialog {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ───────── PANEL CERRADOS (lateral derecho) ───────── */
.panel-cerrados {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  position: sticky;
  top: calc(var(--cp-topbar-height) + 24px);
  max-height: calc(100vh - var(--cp-topbar-height) - 48px);
  overflow-y: auto;
  box-shadow: var(--cp-shadow-sm);
}

.panel-cerrados-header {
  background: var(--cp-primary);
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.panel-cerrados-header .badge {
  background: white;
  color: var(--cp-primary);
}

.panel-cerrado-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cp-border-soft);
  font-size: 0.82rem;
  transition: background 120ms ease;
}

.panel-cerrado-item:hover {
  background: var(--cp-sand);
}

.panel-cerrado-item:last-child {
  border-bottom: none;
}

/* ───────── LOADER GLOBAL ───────── */
#loader-global-overlay {
  position: fixed;
  inset: 0;
  background: rgba(247, 244, 239, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  font-family: var(--cp-font);
}

#loader-global-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.loader-global-card {
  background: var(--cp-surface);
  border-radius: var(--cp-radius-lg);
  padding: 32px 40px;
  box-shadow: var(--cp-shadow-lg);
  text-align: center;
  min-width: 280px;
  border: 1px solid var(--cp-border);
}

.loader-global-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
}

.loader-global-avatar {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cp-primary) 0%, var(--cp-primary-hover) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

.loader-global-spinner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: loader-spin 1.4s linear infinite;
}

@keyframes loader-spin { to { transform: rotate(360deg); } }

.loader-global-mensaje {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cp-text);
  margin-bottom: 4px;
}

.loader-global-submensaje {
  font-size: 0.82rem;
  color: var(--cp-text-muted);
  margin-bottom: 16px;
}

.loader-global-bar {
  height: 4px;
  background: var(--cp-border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.loader-global-bar-fill {
  position: absolute;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--cp-primary), var(--cp-accent), var(--cp-primary));
  border-radius: 2px;
  animation: loader-bar-slide 1.5s ease-in-out infinite;
}

@keyframes loader-bar-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ───────── ALERTAS FLOTANTES (de Etapa 11) ───────── */
.alert {
  font-family: var(--cp-font);
  border-radius: var(--cp-radius-sm);
  border: 1px solid;
  padding: 12px 16px;
  font-size: 0.875rem;
}

.alert-warning {
  background: var(--cp-accent-soft);
  border-color: var(--cp-accent);
  color: var(--cp-accent-strong);
}

.alert-danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: var(--cp-danger);
  color: #7f1d1d;
}

.alert-success {
  background: rgba(16, 185, 129, 0.08);
  border-color: var(--cp-success);
  color: #065f46;
}

/* ───────── PÁGINA DE LOGIN (standalone, sin sidebar) ───────── */
.login-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cp-sand) 0%, var(--cp-sand-deep) 100%);
  padding: 24px;
}

.login-card {
  background: var(--cp-surface);
  border-radius: var(--cp-radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--cp-shadow-lg);
  border: 1px solid var(--cp-border);
}

.login-brand {
  text-align: center;
  margin-bottom: 32px;
}

.login-brand-logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-hover));
  color: white;
  border-radius: var(--cp-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 14px;
}

.login-brand-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cp-text);
}

.login-brand-sub {
  font-size: 0.85rem;
  color: var(--cp-text-muted);
  margin-top: 4px;
}

/* ───────── RESPONSIVE ───────── */
@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 250ms ease;
  }
  .app-sidebar.is-open {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0;
  }
  .app-sidebar-toggle-mobile {
    display: inline-flex !important;
  }
}

.app-sidebar-toggle-mobile {
  display: none;
}

@media (max-width: 1499.98px) {
  /* En pantallas medianas, colapsar panel cerrados a un toggle */
  .layout-with-cerrados .col-cerrados {
    display: none;
  }
  .layout-with-cerrados.cerrados-open .col-cerrados {
    display: block;
  }
  .btn-toggle-cerrados {
    display: inline-flex !important;
  }
}
.btn-toggle-cerrados { display: none; }

/* ───────── ACCESIBILIDAD ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Atribución Tabler Icons (requisito MIT) */
.tabler-attribution {
  font-size: 0.65rem;
  color: var(--cp-text-soft);
  text-align: center;
  padding: 8px;
}
.tabler-attribution a {
  color: var(--cp-text-soft);
}

/* ============================================================
   Etapa 17 — Tabs en /prompts + tarjetas de mensajes plantilla
   ============================================================ */
.prompts-tab {
  background: transparent; border: none; padding: 12px 20px;
  font-family: var(--cp-font); font-size: 0.92rem; font-weight: 500;
  color: var(--cp-text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 140ms ease, border-color 140ms ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.prompts-tab:hover { color: var(--cp-text); }
.prompts-tab.active { color: var(--cp-primary); border-bottom-color: var(--cp-primary); font-weight: 600; }
.prompts-tab i { font-size: 1.1rem; }

.mensaje-plantilla-card {
  background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius); padding: 16px; margin-bottom: 12px;
  transition: box-shadow 200ms ease;
}
.mensaje-plantilla-card:hover { box-shadow: var(--cp-shadow); }
.mensaje-plantilla-card h4 { margin: 0 0 4px 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.mensaje-plantilla-card .categoria-tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 6px; background: var(--cp-sand); color: var(--cp-text-muted); font-weight: 600; text-transform: uppercase; }
.mensaje-plantilla-card .preview { background: var(--cp-bg); border-radius: 6px; padding: 10px 12px; font-size: 0.85rem; color: var(--cp-text-muted); margin: 8px 0; max-height: 80px; overflow: hidden; white-space: pre-wrap; }

/* Etapa 17.5/17.6 — badge de servicio en lista y detalle de tickets */
.badge-servicio {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
  letter-spacing: 0.01em; text-transform: uppercase;
  margin-top: 4px; white-space: nowrap;
}

/* ============================================================
   Etapa 18 — Toggle Kill Switch (bot activo/pausado) en el topbar
   ============================================================ */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1; transition: 200ms; border-radius: 24px;
}
.toggle-slider:before {
  position: absolute; content: ""; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background-color: white;
  transition: 200ms; border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background-color: #10b981; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* Mail: primero del sidebar, en azul niebla. */
.app-sidebar-item.app-sidebar-item-mail {
  background: var(--cp-mail);
  color: var(--cp-mail-text);
  position: relative;
}

.app-sidebar-item.app-sidebar-item-mail:hover,
.app-sidebar-item.app-sidebar-item-mail.active {
  background: var(--cp-mail-hover);
  color: var(--cp-mail-text);
}

/* Estudio de productos: verde salvia, entre Mail y Estudio de precios. */
.app-sidebar-item.app-sidebar-item-productos {
  background: var(--cp-productos);
  color: var(--cp-productos-text);
}

.app-sidebar-item.app-sidebar-item-productos:hover,
.app-sidebar-item.app-sidebar-item-productos.active {
  background: var(--cp-productos-hover);
  color: var(--cp-productos-text);
}

/* Contador de no leídos: pastilla en el tono oscuro de la propia familia, para que
   no salte como lo haría un rojo o un blanco puro. */
.app-sidebar-mail-badge {
  margin-left: auto;
  background: var(--cp-mail-text);
  color: var(--cp-mail);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}