/**
 * FriendlyPOS Theme - Nueva Paleta de Colores
 *
 * Basado en el rediseño de mockups 2025
 * Este archivo contiene las variables CSS y clases de utilidad para la nueva paleta
 *
 * @author Pablo Bozzolo (boctulus)
 * @date 2025-12-08
 */

/* ============================================
   CSS VARIABLES - PALETA DE COLORES
   ============================================ */

:root {
  /* ============================================================
   * DESIGN TOKENS — TIPOGRAFÍA
   * Para cambiar la fuente global: solo modificar --fp-font-family
   * ============================================================ */
  --fp-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Pesos disponibles */
  --fp-font-weight-light:    300;
  --fp-font-weight-normal:   400;
  --fp-font-weight-medium:   500;
  --fp-font-weight-semibold: 600;
  --fp-font-weight-bold:     700;

  /* Escala de tamaños */
  --fp-font-size-xs:   0.6875rem;  /* 11px */
  --fp-font-size-sm:   0.8125rem;  /* 13px */
  --fp-font-size-base: 0.9375rem;  /* 15px */
  --fp-font-size-md:   1rem;       /* 16px */
  --fp-font-size-lg:   1.125rem;   /* 18px */
  --fp-font-size-xl:   1.25rem;    /* 20px */
  --fp-font-size-2xl:  1.5rem;     /* 24px */
  --fp-font-size-3xl:  1.75rem;    /* 28px */

  /* Interlineado */
  --fp-line-height-tight:   1.25;
  --fp-line-height-normal:  1.55;
  --fp-line-height-relaxed: 1.75;

  /* Espaciado entre letras */
  --fp-letter-spacing-tight:  -0.02em;
  --fp-letter-spacing-normal:  0;
  --fp-letter-spacing-wide:    0.03em;
  --fp-letter-spacing-wider:   0.06em;
  --fp-letter-spacing-widest:  0.1em;

  /* ============================================================
   * DESIGN TOKENS — PALETA DE COLORES OFICIAL
   * Para rediseñar el tema: solo modificar valores en este bloque
   * ============================================================ */

  /* --- Colores principales (Brand) --- */
  --fp-primary-blue:    #1e31c7;  /* Iconos de títulos de módulos, botones "Nuevo", "Guardar" */
  --fp-primary-orange:  #ff4e03;  /* Botón "Ingresar" (login), botones "Buscar" */
  --fp-primary-teal:    #00a48b;  /* Barras de gráficos de barras */
  --fp-primary-cyan:    #138cb9;  /* Barras de gráficos, botones "Subir Logo", "Guardar Contraseña" */

  /* --- Colores de soporte --- */
  --fp-purple:          #8e6dda;  /* Cards de métricas (color 1 de 4) */
  --fp-orange-metric:   #ff4e03;  /* Cards de métricas (color 2 de 4) = --fp-primary-orange */
  --fp-teal-metric:     #00a48b;  /* Cards de métricas (color 3 de 4) = --fp-primary-teal */
  --fp-cyan-metric:     #138cb9;  /* Cards de métricas (color 4 de 4) = --fp-primary-cyan */
  --fp-yellow:          #ffce00;  /* Advertencias, reservados */
  --fp-red:             #ff0000;  /* Rojo puro — estados negativos, cancelar, eliminar */

  /* --- Grises y neutros --- */
  --fp-dark:            #283140;  /* <thead> de tablas/datagrids, sidebar, navbar, headers de modales */
  --fp-light-gray:      #bdc5cb;  /* BG de cards, BG de datagrids, BG de botones "Cancelar", BG de tabs no-activas en modal-tabs */
  --fp-medium-gray:     #8a9196;  /* BG de ventanas modales, BG de cards que contienen buscadores/filtros avanzados */
  --fp-very-light-gray: #d7dce0;  /* Áreas de visualización, inputs deshabilitados */
  --fp-line-gray:       #8c9397;  /* Líneas de separación en gráficos */
  --fp-white:           #ffffff;  /* Background principal de páginas */

  /* --- Tokens de texto --- */
  --fp-text-dark:       #283140;  /* Texto sobre fondos claros (usado en <thead> sobre #283140 → debe ser claro) */
  --fp-text-light:      #ffffff;  /* Texto sobre fondos oscuros */
  --fp-text-muted:      #6c757d;  /* Texto secundario */
  --fp-text-on-dark:    #bdc5cb;  /* Texto en <thead> oscuro (#283140) */

  /* --- Tokens de navegación (sidebar + navbar) ---
   * Cambiar estos dos tokens para rediseñar toda la chrome en un lugar */
  --fp-nav-bg:          var(--fp-dark);       /* Fondo unificado sidebar y navbar */
  --fp-nav-icon-color:  var(--fp-text-light); /* Iconos sobre fondo de navegación → blanco */

  /* --- Estados semánticos --- */
  --fp-success: #00a48b;
  --fp-warning: #ffce00;
  --fp-danger:  #ff0000;
  --fp-info:    #138cb9;

  /* --- Backgrounds de estructura --- */
  --fp-bg-dark:       #283140;  /* Sidebar, navbar, <thead> */
  --fp-bg-component:  #bdc5cb;  /* Cards, datagrids, botones Cancelar */
  --fp-bg-modal:      #8a9196;  /* Ventanas modales, cards de buscadores/filtros */
  --fp-bg-white:      #ffffff;  /* Background principal de páginas */
  --fp-bg-alternate:  #8a9196;  /* Filas alternas, áreas secundarias */

  /* ============================================================
   * DESIGN TOKENS — ELEVACIÓN Y FORMA
   * ============================================================ */

  /* Sombras */
  --fp-shadow-sm: 0 1px 3px rgba(40, 49, 64, 0.08), 0 1px 2px rgba(40, 49, 64, 0.06);
  --fp-shadow-md: 0 4px 8px rgba(40, 49, 64, 0.10), 0 2px 4px rgba(40, 49, 64, 0.06);
  --fp-shadow-lg: 0 10px 24px rgba(40, 49, 64, 0.12), 0 4px 8px rgba(40, 49, 64, 0.06);

  /* Bordes */
  --fp-border-radius:    8px;
  --fp-border-radius-sm: 4px;
  --fp-border-radius-lg: 12px;
  --fp-border-radius-xl: 16px;
  --fp-border-color:     #e9ecef;
  --fp-border-color-subtle: #f1f3f5;

  /* Transiciones */
  --fp-transition-fast:   all 0.15s ease;
  --fp-transition-normal: all 0.25s ease;
  --fp-transition-slow:   all 0.4s ease;

  /* ============================================================
   * ESCALA DEL CONTENIDO PRINCIPAL
   * Para ajustar el zoom global del área de contenido:
   * solo modificar --fp-content-scale (1 = 100%, 0.85 = 85%)
   * ============================================================ */
  --fp-content-scale: 0.85;
}

/* Escala el contenido principal sin afectar sidebar ni navbar */
#main-container {
  zoom: var(--fp-content-scale);
}


/* ============================================
   CLASES DE UTILIDAD - BACKGROUNDS
   ============================================ */

.fp-bg-primary-blue {
  background-color: var(--fp-primary-blue) !important;
}

.fp-bg-primary-orange {
  background-color: var(--fp-primary-orange) !important;
}

.fp-bg-primary-teal {
  background-color: var(--fp-primary-teal) !important;
}

.fp-bg-primary-cyan {
  background-color: var(--fp-primary-cyan) !important;
}

.fp-bg-purple {
  background-color: var(--fp-purple) !important;
}

.fp-bg-yellow {
  background-color: var(--fp-yellow) !important;
}

.fp-bg-red {
  background-color: var(--fp-red) !important;
}

.fp-bg-dark {
  background-color: var(--fp-dark) !important;
}

.fp-bg-component {
  background-color: var(--fp-light-gray) !important;  /* Cards, datagrids */
}

.fp-bg-medium-gray {
  background-color: var(--fp-medium-gray) !important;  /* Modales, buscadores */
}

.fp-bg-very-light-gray {
  background-color: var(--fp-very-light-gray) !important;
}


/* ============================================
   CLASES DE UTILIDAD - TEXTO
   ============================================ */

.fp-text-primary-blue {
  color: var(--fp-primary-blue) !important;
}

.fp-text-primary-orange {
  color: var(--fp-primary-orange) !important;
}

.fp-text-primary-teal {
  color: var(--fp-primary-teal) !important;
}

.fp-text-primary-cyan {
  color: var(--fp-primary-cyan) !important;
}

.fp-text-purple {
  color: var(--fp-purple) !important;
}

.fp-text-yellow {
  color: var(--fp-yellow) !important;
}

.fp-text-red {
  color: var(--fp-red) !important;
}

.fp-text-dark {
  color: var(--fp-text-dark) !important;
}

.fp-text-light {
  color: var(--fp-text-light) !important;
}

.fp-text-muted {
  color: var(--fp-text-muted) !important;
}

.fp-text-on-dark {
  color: var(--fp-text-on-dark) !important;  /* Texto sobre <thead> oscuro (#283140) */
}


/* ============================================
   CLASES DE UTILIDAD - BOTONES
   ============================================ */

/* Botón principal: "Nuevo", "Guardar" (CRUD) */
.fp-btn-primary {
  background-color: var(--fp-primary-blue);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}

.fp-btn-primary:hover {
  background-color: #1628a0;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Botón de acción: "Ingresar" (login), "Buscar" */
.fp-btn-action {
  background-color: var(--fp-primary-orange);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}

.fp-btn-action:hover {
  background-color: #e04502;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Botón de éxito: "Subir Logo", "Guardar Contraseña" */
.fp-btn-success {
  background-color: var(--fp-primary-cyan);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}

.fp-btn-success:hover {
  background-color: #107ca2;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Botón secundario */
.fp-btn-secondary {
  background-color: var(--fp-primary-teal);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}

.fp-btn-secondary:hover {
  background-color: #00927a;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

.fp-btn-warning {
  background-color: var(--fp-yellow);
  color: var(--fp-text-dark);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}

.fp-btn-warning:hover {
  background-color: #e6b900;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Botón de peligro: "Cancelar", "Eliminar" */
.fp-btn-danger {
  background-color: var(--fp-red);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}

.fp-btn-danger:hover {
  background-color: #cc0000;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Botón de cancelar: usa gris claro (mismo color que tabs no-activas) */
.fp-btn-cancel {
  background-color: var(--fp-light-gray);
  color: var(--fp-text-dark);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}

.fp-btn-cancel:hover {
  background-color: #a8b1b8;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}


/* ============================================
   COMPONENTES - SIDEBAR & NAVBAR
   ============================================ */

.fp-sidebar {
  background-color: var(--fp-dark);
}

.fp-sidebar .nav-link-icon i {
  color: var(--fp-primary-blue);
}

.fp-navbar {
  background-color: var(--fp-dark);
}


/* ============================================
   COMPONENTES - CARDS DE MÉTRICAS
   ============================================ */

.fp-metric-card {
  border-radius: var(--fp-border-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--fp-shadow-sm);
  transition: all 0.3s ease;
}

.fp-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fp-shadow-lg);
}

.fp-metric-card.purple {
  background: linear-gradient(135deg, var(--fp-purple) 0%, #7a5cc4 100%);
  color: var(--fp-text-light);
}

.fp-metric-card.orange {
  background: linear-gradient(135deg, var(--fp-primary-orange) 0%, #e04502 100%);
  color: var(--fp-text-light);
}

.fp-metric-card.teal {
  background: linear-gradient(135deg, var(--fp-primary-teal) 0%, #00927a 100%);
  color: var(--fp-text-light);
}

.fp-metric-card.cyan {
  background: linear-gradient(135deg, var(--fp-primary-cyan) 0%, #107ca2 100%);
  color: var(--fp-text-light);
}

.fp-metric-card .metric-value {
  font-size: var(--fp-font-size-3xl);
  font-weight: var(--fp-font-weight-light);
  letter-spacing: var(--fp-letter-spacing-tight);
  margin: 0.5rem 0;
}

.fp-metric-card .metric-label {
  font-size: var(--fp-font-size-xs);
  font-weight: var(--fp-font-weight-medium);
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: var(--fp-letter-spacing-widest);
}


/* ============================================
   COMPONENTES - TABLAS / DATAGRIDS
   ============================================ */

.fp-table {
  width: 100%;
  border-collapse: collapse;
}

.fp-table thead {
  background-color: var(--fp-dark);  /* #283140 */
  color: var(--fp-text-on-dark);     /* #bdc5cb */
}

.fp-table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: var(--fp-font-weight-medium);
  text-transform: uppercase;
  font-size: var(--fp-font-size-xs);
  letter-spacing: var(--fp-letter-spacing-widest);
}

.fp-table tbody tr:nth-child(odd) {
  background-color: var(--fp-light-gray);
}

.fp-table tbody tr:nth-child(even) {
  background-color: var(--fp-medium-gray);
}

.fp-table tbody td {
  padding: 1rem;
  color: var(--fp-text-dark);
}

.fp-table tbody tr:hover {
  background-color: #9ca5ab;
  transition: background-color 0.2s ease;
}


/* ============================================
   COMPONENTES - MODALES
   ============================================ */

.fp-modal-header {
  background-color: var(--fp-dark);
  color: var(--fp-text-light);
  border-top-left-radius: var(--fp-border-radius-lg);
  border-top-right-radius: var(--fp-border-radius-lg);
  padding: 1.25rem 1.5rem;
}

.fp-modal-body {
  background-color: var(--fp-medium-gray);
  padding: 1.5rem;
}

.fp-modal-footer {
  background-color: var(--fp-light-gray);
  padding: 1rem 1.5rem;
  border-bottom-left-radius: var(--fp-border-radius-lg);
  border-bottom-right-radius: var(--fp-border-radius-lg);
}

/* Tabs dentro de modales */
.fp-modal .nav-tabs {
  background-color: var(--fp-dark);
  border: none;
}

.fp-modal .nav-tabs .nav-link {
  background-color: var(--fp-dark);
  color: var(--fp-text-light);
  border: none;
  opacity: 0.7;
  transition: all 0.3s ease;
}

/* Tab activa → fondo claro (#bdc5cb) */
.fp-modal .nav-tabs .nav-link.active {
  background-color: var(--fp-light-gray);  /* #bdc5cb — mismo que BG de cards */
  color: var(--fp-text-dark);
  opacity: 1;
}

.fp-modal .nav-tabs .nav-link:hover {
  opacity: 1;
}

/* Tab no-activa → fondo gris claro (#bdc5cb) */
.fp-modal .nav-tabs .nav-link:not(.active) {
  background-color: var(--fp-light-gray);  /* #bdc5cb — tabs no-activas */
  color: var(--fp-text-muted);
}


/* ============================================
   COMPONENTES - TÍTULOS DE SECCIÓN
   ============================================ */

.fp-section-title {
  color: var(--fp-primary-orange);  /* #ff4e03 — títulos de módulo */
  font-weight: var(--fp-font-weight-light);
  font-size: var(--fp-font-size-3xl);
  letter-spacing: var(--fp-letter-spacing-tight);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fp-section-title i {
  color: var(--fp-primary-blue);  /* #1e31c7 — iconos que acompañan a los títulos */
  font-size: var(--fp-font-size-2xl);
}


/* ============================================
   COMPONENTES - BADGES
   ============================================ */

.fp-badge-primary {
  background-color: var(--fp-primary-blue);
  color: var(--fp-text-light);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: var(--fp-font-size-xs);
  font-weight: var(--fp-font-weight-medium);
  letter-spacing: var(--fp-letter-spacing-wide);
}

.fp-badge-success {
  background-color: var(--fp-primary-teal);
  color: var(--fp-text-light);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: var(--fp-font-size-xs);
  font-weight: var(--fp-font-weight-medium);
  letter-spacing: var(--fp-letter-spacing-wide);
}

.fp-badge-warning {
  background-color: var(--fp-yellow);
  color: var(--fp-text-dark);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: var(--fp-font-size-xs);
  font-weight: var(--fp-font-weight-medium);
  letter-spacing: var(--fp-letter-spacing-wide);
}

.fp-badge-danger {
  background-color: var(--fp-red);
  color: var(--fp-text-light);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: var(--fp-font-size-xs);
  font-weight: var(--fp-font-weight-medium);
  letter-spacing: var(--fp-letter-spacing-wide);
}


/* ============================================
   COMPONENTES - FORMULARIOS
   ============================================ */

.fp-form-control {
  border: 1px solid var(--fp-border-color);
  border-radius: var(--fp-border-radius);
  padding: 0.625rem 1rem;
  font-size: var(--fp-font-size-base);
  font-weight: var(--fp-font-weight-normal);
  transition: var(--fp-transition-fast);
}

.fp-form-control:focus {
  border-color: var(--fp-primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(30, 49, 199, 0.18);
  outline: none;
}

.fp-form-label {
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  color: var(--fp-text-dark);
  margin-bottom: 0.5rem;
  display: block;
  letter-spacing: var(--fp-letter-spacing-wide);
}


/* ============================================
   ESTADOS DE MESAS (RESTAURANTE)
   ============================================ */

.fp-table-available {
  background-color: var(--fp-primary-teal);
  color: var(--fp-text-light);
}

.fp-table-occupied {
  background-color: var(--fp-red);
  color: var(--fp-text-light);
}

.fp-table-reserved {
  background-color: var(--fp-yellow);
  color: var(--fp-text-dark);
}


/* ============================================
   UTILIDADES ADICIONALES
   ============================================ */

.fp-shadow-sm {
  box-shadow: var(--fp-shadow-sm);
}

.fp-shadow-md {
  box-shadow: var(--fp-shadow-md);
}

.fp-shadow-lg {
  box-shadow: var(--fp-shadow-lg);
}

.fp-rounded {
  border-radius: var(--fp-border-radius);
}

.fp-rounded-lg {
  border-radius: var(--fp-border-radius-lg);
}


/* ============================================
   CLASES SEMÁNTICAS — BOTONES POR INTENCIÓN
   ============================================ */

/* CRUD: Crear / Nuevo */
.fp-btn-new {
  background-color: var(--fp-primary-blue);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}
.fp-btn-new:hover {
  background-color: #1628a0;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* CRUD: Guardar */
.fp-btn-save {
  background-color: var(--fp-primary-blue);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}
.fp-btn-save:hover {
  background-color: #1628a0;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Login: Ingresar */
.fp-btn-login {
  background-color: var(--fp-primary-orange);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}
.fp-btn-login:hover {
  background-color: #e04502;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Búsqueda */
.fp-btn-search {
  background-color: var(--fp-primary-orange);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}
.fp-btn-search:hover {
  background-color: #e04502;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Subir archivo / logo */
.fp-btn-upload {
  background-color: var(--fp-primary-cyan);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}
.fp-btn-upload:hover {
  background-color: #107ca2;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Seguridad: Cambiar contraseña */
.fp-btn-change-password {
  background-color: var(--fp-primary-cyan);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}
.fp-btn-change-password:hover {
  background-color: #107ca2;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Cancelar / Cerrar sin guardar */
.fp-btn-cancel {
  background-color: var(--fp-light-gray);
  color: var(--fp-text-dark);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}
.fp-btn-cancel:hover {
  background-color: #a8b1b8;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}

/* Eliminar / Destruir */
.fp-btn-delete {
  background-color: var(--fp-red);
  color: var(--fp-text-light);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--fp-border-radius);
  font-weight: var(--fp-font-weight-medium);
  font-size: var(--fp-font-size-sm);
  letter-spacing: var(--fp-letter-spacing-wide);
  transition: var(--fp-transition-normal);
}
.fp-btn-delete:hover {
  background-color: #cc0000;
  transform: translateY(-1px);
  box-shadow: var(--fp-shadow-md);
}


/* ============================================
   CLASES SEMÁNTICAS — ICONOS DE SECCIÓN
   ============================================ */

/* Icono que acompaña al título de cada módulo → #1e31c7 */
.fp-section-icon {
  color: var(--fp-primary-blue);  /* #1e31c7 */
  font-size: var(--fp-font-size-2xl);
}

/* Título de sección → #ff4e03 */
.fp-section-title-text {
  color: var(--fp-primary-orange);  /* #ff4e03 */
  font-weight: var(--fp-font-weight-light);
  font-size: var(--fp-font-size-3xl);
  letter-spacing: var(--fp-letter-spacing-tight);
}


/* ============================================
   CLASES SEMÁNTICAS — MÉTRICAS CÍCLICAS
   Cuando hay 2+ metric cards, se rotan estos 4 colores
   ============================================ */

.fp-metric-1 {
  background: linear-gradient(135deg, var(--fp-purple) 0%, #7a5cc4 100%);
  color: var(--fp-text-light);
}

.fp-metric-2 {
  background: linear-gradient(135deg, var(--fp-primary-orange) 0%, #e04502 100%);
  color: var(--fp-text-light);
}

.fp-metric-3 {
  background: linear-gradient(135deg, var(--fp-primary-teal) 0%, #00927a 100%);
  color: var(--fp-text-light);
}

.fp-metric-4 {
  background: linear-gradient(135deg, var(--fp-primary-cyan) 0%, #107ca2 100%);
  color: var(--fp-text-light);
}


/* ============================================
   CHANGELOG
   ============================================ */

/*
 * v1.1 - 2025-12-08
 * - Agregado --fp-cyan-light (#0dbffa) para links y enlaces de ayuda
 * - Agregado --fp-very-light-gray (#d7dce0) para áreas de visualización
 * - Agregado --fp-white (#ffffff) para background principal de páginas
 * - ACLARADO: --fp-light-gray es para backgrounds de COMPONENTES (cards, paneles, tables), NO para el fondo general
 * - Background de página debe ser blanco (#ffffff)
 * - Agregadas clases de utilidad: .fp-bg-cyan-light, .fp-bg-very-light-gray, .fp-text-cyan-light
 * - Actualizados comentarios de variables para mayor claridad
 * - Basado en análisis de screenshots reales de la aplicación
 *
 * v1.2 - 2026-03-25
 * - Agregados design tokens de tipografía: --fp-font-family, pesos, escala de tamaños,
 *   interlineado, letter-spacing
 * - Agregados tokens de transición: --fp-transition-fast/normal/slow
 * - Agregados tokens de forma adicionales: --fp-border-radius-sm/xl, --fp-border-color-subtle
 * - Fuente cambiada de Inter a Plus Jakarta Sans (más delgada y elegante)
 * - Todos los font-weight numéricos reemplazados por tokens --fp-font-weight-*
 * - Corrección: --fp-dark e.g. #28314O → #283140 (la O era una letra, no cero)
 *
 * v1.1 - 2025-12-08
 * - Agregado --fp-cyan-light, --fp-very-light-gray, --fp-white
 * - ACLARADO: --fp-light-gray es para componentes, no fondo de página
 *
 * v1.0 - 2025-12-08
 * - Versión inicial del tema FriendlyPOS
 * - Paleta de colores basada en mockups de diseño
 */

/* ============================================
   OVERRIDE BOOTSTRAP / TABLER NATIVE CLASSES
   ============================================ */

/* .btn-primary → "Nuevo", "Guardar" (CRUD) → #1e31c7 */
.btn-primary {
  background-color: var(--fp-primary-blue) !important;
  border-color: var(--fp-primary-blue) !important;
  color: var(--fp-text-light) !important;
}

.btn-primary:hover {
  background-color: #1628a0 !important;
  border-color: #1628a0 !important;
}

/* .btn-outline-primary → "Buscar" → #ff4e03 */
.btn-outline-primary {
  color: var(--fp-primary-orange) !important;
  border-color: var(--fp-primary-orange) !important;
}

.btn-outline-primary:hover {
  background-color: var(--fp-primary-orange) !important;
  border-color: var(--fp-primary-orange) !important;
  color: var(--fp-text-light) !important;
}

/* .btn-danger → Eliminar/Cancelar → #ff0000 */
.btn-danger {
  background-color: var(--fp-red) !important;
  border-color: var(--fp-red) !important;
  color: var(--fp-text-light) !important;
}

.btn-danger:hover {
  background-color: #cc0000 !important;
  border-color: #cc0000 !important;
}

/* Cards → BG #bdc5cb */
.card {
  background-color: var(--fp-light-gray) !important;
}

/* Modales → BG #8a9196 */
.modal-content {
  background-color: var(--fp-medium-gray) !important;
}

/*
 * v2.1 - 2026-04-03
 * - CLASES SEMÁNTICAS añadidas (por intención, no por rol genérico):
 *   Botones: .fp-btn-new, .fp-btn-save, .fp-btn-login, .fp-btn-search,
 *            .fp-btn-upload, .fp-btn-change-password, .fp-btn-cancel, .fp-btn-delete
 *   Iconos/Títulos: .fp-section-icon, .fp-section-title-text
 *   Métricas cíclicas: .fp-metric-1, .fp-metric-2, .fp-metric-3, .fp-metric-4
 *
 * v2.0 - 2026-04-03
 * - PALETA OFICIAL DEFINIDA con comentarios de uso exacto
 * - Agregado --fp-text-on-dark (#bdc5cb) para texto en <thead>
 * - Agregado .fp-btn-cancel para botón cancelar
 * - Actualizado .fp-table thead → color: var(--fp-text-on-dark)
 * - Actualizado modal-tabs: tabs no-activas → #bdc5cb
 * - Agregados overrides de Bootstrap (.btn-primary, .btn-outline-primary, .btn-danger)
 * - Agregados overrides para .card y .modal-content
 * - Eliminados tokens no usados (--fp-cyan-light, --fp-red-alt)
 */