/**
 * 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 (guía gráfica Friendly Component)
   * Títulos: Nunito ExtraBold | Subtítulos/cuerpo: Source Sans 3
   * (Nunito reemplaza Minork Sans trial; Source Sans 3 reemplaza Rig Sans DEMO)
   * @see public/assets/css/friendlypos-fonts.css
   * ============================================================ */
  --fp-font-family-title:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fp-font-family-subtitle: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fp-font-family:          'Source Sans 3', -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 oficiales de marca (Manual de Identidad Gráfica Friendly Component) ---
    * Tokens inmutables: NO alterar estos valores (regla restrictiva #6).
    *   tech-orange     → botón de acción / login / búsqueda / acento de marca
    *   futuristic-blue → títulos de módulos, CRUD, primary actions
    *   black           → texto base y	logotipo sobre fondos claros
    *   white           → texto/iconos/logo sobre fondos oscuros (regla de contraste #7)
    */
  --brand-tech-orange:      #FF4E03;
  --brand-futuristic-blue:  #1E31C7;
  --brand-black:            #000000;
  --brand-white:            #FFFFFF;

  /* Variantes RGB/CMYK para uso puntual (canvas, SVG, print) */
  --brand-tech-orange-rgb:     255, 78, 3;
  --brand-futuristic-blue-rgb: 30, 49, 199;
  --brand-black-rgb:           0, 0, 0;
  --brand-white-rgb:           255, 255, 255;
  --brand-tech-orange-cmyk:     0, 69, 99, 0;
  --brand-futuristic-blue-cmyk: 85, 75, 0, 22;

  /* Alias semánticos de marca → referencian los tokens inmutables.
    * Los alias legacy (--fp-primary-orange / --fp-primary-blue) pasan
    * a apuntar a los tokens oficiales para asegurar consistencia. */
  --fp-brand-primary:    var(--brand-futuristic-blue);
  --fp-brand-accent:     var(--brand-tech-orange);
  --fp-brand-on-light:   var(--brand-black);      /* logo/texto marca sobre fondos claros */
  --fp-brand-on-dark:    var(--brand-white);      /* logo/texto marca sobre fondos oscuros */

  /* --- Colores principales (Brand) --- */
  --fp-primary-blue:    var(--brand-futuristic-blue);  /* Iconos de títulos de módulos, botones "Nuevo", "Guardar" */
  --fp-primary-orange:  var(--brand-tech-orange);      /* 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> legacy, sidebar, navbar (headers de modal ya son claros) */
  --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;
  --fp-border-subtle:    #f1f3f5;
  --fp-bg-subtle:        #f8fafc;
  --fp-text-primary:     #283140;

  /* Tablas / listados admin (Fase 3b) — Opción C revisión */
  --fp-primary-blue-50:  rgba(30, 49, 199, 0.04);
  --fp-table-row-height: 56px;
  --fp-table-cell-px:    1.25rem;
  --fp-table-header-size: 0.875rem; /* sm = 14px */
  --fp-table-header-bg:  #eef1f4;
  --fp-table-header-color: #4a5568;
  --fp-table-header-border: #dde2e8;
  --fp-table-row-hover:  rgba(40, 49, 64, 0.04);
  --fp-data-surface-shadow: var(--fp-shadow-md);
  --fp-data-toolbar-gap: 1.75rem;
  --fp-space-6:          1.5rem;

  /* 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
   * Densidad orientada a laptops 1366×768 (uso típico en caja).
   * 1 = 100%, 0.85 = 85%. Ajustar solo este token.
   * ============================================================ */
  --fp-content-scale: 0.85;
}

/*
 * Escala el contenido sin afectar la columna del layout.
 * Si el zoom se aplica sobre #main-container, también reduce visualmente
 * el margin-left que reserva espacio para el sidebar y el menú termina
 * superponiéndose al contenido.
 */
#main-container .page-wrapper {
  zoom: var(--fp-content-scale);
}


/* ============================================
    CLASES DE UTILIDAD — MARCA OFICIAL (Friendly Component)
    Tokens inmutables del Manual de Identidad Gráfica.
    NO usar naranja/azul directamente sobre fondos oscuros (regla #7):
    usar siempre .fp-brand-on-dark (blanco).
    ============================================ */

.fp-brand-orange {
  background-color: var(--brand-tech-orange) !important;
  color: var(--brand-white) !important;
}

.fp-brand-blue {
  background-color: var(--brand-futuristic-blue) !important;
  color: var(--brand-white) !important;
}

.fp-brand-black {
  background-color: var(--brand-black) !important;
  color: var(--brand-white) !important;
}

.fp-brand-white {
  background-color: var(--brand-white) !important;
  color: var(--brand-black) !important;
}

/* Utilidades de texto de marca con contraste correcto */
.fp-brand-text-on-light {
  /* Sobre fondos claros: azul, negro o naranja (logo/texto de marca) */
  color: var(--brand-futuristic-blue) !important;
}

.fp-brand-text-on-dark {
  /* Sobre fondos oscuros: OBLIGATORIO blanco (regla #7) */
  color: var(--brand-white) !important;
}

/* Bordes de marca */
.fp-brand-border-orange { border: 1px solid var(--brand-tech-orange) !important; }
.fp-brand-border-blue   { border: 1px solid var(--brand-futuristic-blue) !important; }
.fp-brand-border-white  { border: 1px solid var(--brand-white) !important; }

/* Tinte de marca sutil (bg con opacidad baja usando RGB token) */
.fp-brand-tint-orange { background-color: rgba(var(--brand-tech-orange-rgb), 0.10) !important; }
.fp-brand-tint-blue   { background-color: rgba(var(--brand-futuristic-blue-rgb), 0.10) !important; }

/* Variantes para impresión (print) — usan CMYK conceptualmente */
@media print {
  .fp-brand-orange { background-color: var(--brand-tech-orange) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fp-brand-blue   { background-color: var(--brand-futuristic-blue) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================
    REGLA DE CONTRASTE DEL LOGOTIPO (Manual §3 y §4.#7)
    Sobre fondos oscuros el logotipo/marca se aplica en BLANCO.
    Sobre fondos claros: azul, negro o naranja.
    APLICAR a: .navbar-brand, .fp-logo, .fp-brandmark, .fp-isotype
    ============================================ */

.fp-logo,
.fp-brandmark,
.fp-isotype {
  /* Por defecto (fondos claros) → azul corporativo */
  color: var(--brand-futuristic-blue);
  /* Prohibido: outlines y shadows sobre el logo (regla #2) */
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Si el logo está dentro de un contenedor marcado como oscuro → blanco */
[data-fp-theme="dark"] .fp-logo,
[data-fp-theme="dark"] .fp-brandmark,
[data-fp-theme="dark"] .fp-isotype,
.fp-sidebar .fp-logo,
.fp-sidebar .fp-brandmark,
.fp-sidebar .fp-isotype,
.fp-navbar .fp-logo,
.fp-navbar .fp-brandmark,
.fp-navbar .fp-isotype,
.fp-modal-header .fp-logo,
.fp-modal-header .fp-brandmark,
.fp-modal-header .fp-isotype {
  color: var(--brand-white) !important;
}

/* Variante explícita por color de marca sobre fondos claros */
.fp-logo--blue   { color: var(--brand-futuristic-blue) !important; }
.fp-logo--orange { color: var(--brand-tech-orange) !important; }
.fp-logo--black  { color: var(--brand-black) !important; }
.fp-logo--white  { color: var(--brand-white) !important; } /* usar solo sobre fondos oscuros */

/* SVG: hereda currentColor para respetar reglas de marca y prohibición de alterar colores */
.fp-logo svg [data-fp-logo-fill],
.fp-brandmark svg [data-fp-logo-fill],
.fp-isotype svg [data-fp-logo-fill] {
  fill: currentColor;
}

/* ============================================
    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
   ============================================ */

/* Headers de modal claros (dashboard es theme-light; el --fp-dark era legacy) */
.fp-modal-header {
  background-color: var(--fp-white);
  color: var(--fp-text-primary);
  border-bottom: 1px solid var(--fp-border-subtle);
  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-header .modal-title {
  color: var(--fp-text-primary);
  font-weight: var(--fp-font-weight-semibold);
}

.fp-modal-header .modal-title .bi,
.fp-modal-header .modal-title i {
  color: var(--fp-primary-blue);
}

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

.fp-modal-body {
  background-color: var(--fp-white);
  color: var(--fp-text-primary);
  padding: 1.5rem;
}

.fp-modal-footer {
  background-color: var(--fp-bg-subtle);
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--fp-border-subtle);
  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-bg-subtle);
  border-bottom: 1px solid var(--fp-border-subtle);
}

.fp-modal .nav-tabs .nav-link {
  background-color: transparent;
  color: var(--fp-text-muted);
  border: none;
  opacity: 1;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.fp-modal .nav-tabs .nav-link.active {
  background-color: var(--fp-white);
  color: var(--fp-primary-blue);
  border-bottom: 2px solid var(--fp-primary-blue);
}

.fp-modal .nav-tabs .nav-link:hover {
  color: var(--fp-text-primary);
}

.fp-modal .nav-tabs .nav-link:not(.active) {
  background-color: transparent;
  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-family: var(--fp-font-family-title);
  font-weight: 800;
  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-family: var(--fp-font-family-title);
  font-weight: 800;
  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.4 - 2026-07-09
 * - DESIGN TOKENS OFICIALES DE MARCA (Manual de Identidad Gráfica Friendly Component):
 *   --brand-tech-orange (#FF4E03), --brand-futuristic-blue (#1E31C7),
 *   --brand-black (#000000), --brand-white (#FFFFFF) — tokens inmutables.
 * - Variantes RGB/CMYK para canvas/SVG/print.
 * - Alias semánticos: --fp-brand-primary, --fp-brand-accent,
 *   --fp-brand-on-light, --fp-brand-on-dark (regla de contraste logo).
 * - --fp-primary-blue y --fp-primary-orange ahora referencian los tokens oficiales.
 * - Clases de marca: .fp-brand-{orange,blue,black,white} (bg+texto),
 *   .fp-brand-text-on-{light,dark}, .fp-brand-border-*, .fp-brand-tint-*.
 * - Reglas de contraste del logotipo (.fp-logo/.fp-brandmark/.fp-isotype):
 *   azul/negro/naranja sobre fondos claros, blanco obligatorio sobre oscuros.
 *   Prohíbe outlines, shadows y transformaciones sobre el logo (reglas #1-#5).
 *
 * v1.3 - 2026-07-09
 * - Tipografías de marca: Nunito ExtraBold (títulos) + Source Sans 3 (cuerpo/subtítulos)
 * - Nunito reemplaza Minork Sans trial; Source Sans 3 reemplaza Rig Sans DEMO
 * - Ver public/assets/css/friendlypos-fonts.css
 *
 * 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;
}

/* ============================================
   COMPONENTE — TARJETA DE SUPERFICIE (config/detalle)
   Superficie blanca elevada para páginas de configuración y detalle.
   Reemplaza el .card gris legacy (#bdc5cb) por blanco + tokens.
   Uso: <div class="card fp-surface-card fp-surface-card--blue">
   ============================================ */

.card.fp-surface-card {
  background-color: var(--fp-white) !important;
  border: 1px solid var(--fp-border-color) !important;
  border-radius: var(--fp-border-radius-lg) !important;
  box-shadow: var(--fp-shadow-sm) !important;
  overflow: hidden;
  transition: var(--fp-transition-fast);
}

.card.fp-surface-card:hover {
  box-shadow: var(--fp-shadow-md) !important;
}

.card.fp-surface-card > .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--fp-border-subtle);
  padding: 1rem 1.25rem;
}

.card.fp-surface-card .card-title {
  font-size: var(--fp-font-size-md);
  font-weight: var(--fp-font-weight-semibold);
  color: var(--fp-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.card.fp-surface-card .card-title > .bi {
  color: var(--fp-primary-blue);
  font-size: 1.1rem;
}

.card.fp-surface-card > .card-body {
  padding: 1.25rem;
}

.card.fp-surface-card > .card-footer {
  background: var(--fp-bg-subtle) !important;
  border-top: 1px solid var(--fp-border-subtle);
  padding: 0.85rem 1.25rem;
}

/* Acentos laterales opcionales por sección */
.card.fp-surface-card.fp-surface-card--blue   { border-left: 4px solid var(--fp-primary-blue) !important; }
.card.fp-surface-card.fp-surface-card--teal   { border-left: 4px solid var(--fp-primary-teal) !important; }
.card.fp-surface-card.fp-surface-card--orange { border-left: 4px solid var(--fp-primary-orange) !important; }
.card.fp-surface-card.fp-surface-card--cyan   { border-left: 4px solid var(--fp-primary-cyan) !important; }

/* Modales → superficie blanca (dashboard es theme-light; el gris #8a9196 era legacy dark) */
.modal-content {
  background-color: var(--fp-white) !important;
  border: 1px solid var(--fp-border-color) !important;
  border-radius: var(--fp-border-radius-lg) !important;
  box-shadow: var(--fp-shadow-lg) !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)
 */