/**
 * 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 {
  /* === COLORES PRINCIPALES (BRAND) === */
  --fp-primary-blue: #1e31c7;        /* Logo, botones principales, iconos sidebar */
  --fp-primary-orange: #ff4e03;      /* Títulos, botones de acción destacados */
  --fp-primary-teal: #00a48b;        /* Estados positivos, confirmación */
  --fp-primary-cyan: #138cb9;        /* Links, botones secundarios */

  /* === COLORES DE SOPORTE === */
  --fp-purple: #8e6dda;              /* Cards métricas especiales */
  --fp-yellow: #ffce00;              /* Advertencias, reservados */
  --fp-red: #ff0000;                 /* Estados negativos, cancelar */
  --fp-red-alt: #ff0000;             /* Alternativa para badges */

  /* === CELESTE CLARO === */
  --fp-cyan-light: #0dbffa;          /* Links, enlaces de ayuda */

  /* === GRISES Y NEUTROS === */
  --fp-dark: #28314O;                /* Sidebar, navbar, headers, modales */
  --fp-light-gray: #bdc5cb;          /* BACKGROUND DE COMPONENTES - Cards, paneles, datatables, secciones */
  --fp-medium-gray: #8a9196;         /* Filas alternas oscuras, body de modales */
  --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 (lienzo) */

  /* === TEXTO === */
  --fp-text-dark: #28314O;           /* Texto sobre fondos claros */
  --fp-text-light: #ffffff;          /* Texto sobre fondos oscuros */
  --fp-text-muted: #6c757d;          /* Texto secundario */

  /* === ESTADOS === */
  --fp-success: #00a48b;             /* Verde teal - éxito */
  --fp-warning: #ffce00;             /* Amarillo - advertencia */
  --fp-danger: #ff0000;              /* Rojo - peligro */
  --fp-info: #138cb9;                /* Celeste - información */

  /* === BACKGROUNDS === */
  --fp-bg-dark: #28314O;
  --fp-bg-light: #bdc5cb;
  --fp-bg-white: #ffffff;
  --fp-bg-alternate: #8a9196;

  /* === SOMBRAS === */
  --fp-shadow-sm: 0 2px 4px rgba(40, 49, 64, 0.1);
  --fp-shadow-md: 0 4px 8px rgba(40, 49, 64, 0.15);
  --fp-shadow-lg: 0 8px 16px rgba(40, 49, 64, 0.2);

  /* === BORDES === */
  --fp-border-radius: 8px;
  --fp-border-radius-lg: 12px;
  --fp-border-color: #e9ecef;
}


/* ============================================
   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-cyan-light {
  background-color: var(--fp-cyan-light) !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-light-gray {
  background-color: var(--fp-light-gray) !important;
}

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

.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-cyan-light {
  color: var(--fp-cyan-light) !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;
}


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

.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: 600;
  transition: all 0.3s ease;
}

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

.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: 600;
  transition: all 0.3s ease;
}

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

.fp-btn-success {
  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: 600;
  transition: all 0.3s ease;
}

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

.fp-btn-secondary {
  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: 600;
  transition: all 0.3s ease;
}

.fp-btn-secondary:hover {
  background-color: #107ca2;
  transform: translateY(-2px);
  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: 600;
  transition: all 0.3s ease;
}

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

.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: 600;
  transition: all 0.3s ease;
}

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

.fp-btn-neutral {
  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: 600;
  transition: all 0.3s ease;
}

.fp-btn-neutral:hover {
  background-color: #a8b1b8;
  transform: translateY(-2px);
  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: 2.5rem;
  font-weight: 700;
  margin: 0.5rem 0;
}

.fp-metric-card .metric-label {
  font-size: 0.875rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


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

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

.fp-table thead {
  background-color: var(--fp-dark);
  color: var(--fp-text-light);
}

.fp-table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
}

.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;
}

.fp-modal .nav-tabs .nav-link.active {
  background-color: var(--fp-light-gray);
  color: var(--fp-text-dark);
  opacity: 1;
}

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


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

.fp-section-title {
  color: var(--fp-primary-orange);
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fp-section-title i {
  color: var(--fp-primary-blue);
  font-size: 1.5rem;
}


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

.fp-badge-primary {
  background-color: var(--fp-primary-blue);
  color: var(--fp-text-light);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.fp-badge-success {
  background-color: var(--fp-primary-teal);
  color: var(--fp-text-light);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.fp-badge-warning {
  background-color: var(--fp-yellow);
  color: var(--fp-text-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.fp-badge-danger {
  background-color: var(--fp-red);
  color: var(--fp-text-light);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}


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

.fp-form-control {
  border: 1px solid var(--fp-border-color);
  border-radius: var(--fp-border-radius);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease;
}

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

.fp-form-label {
  font-weight: 600;
  color: var(--fp-text-dark);
  margin-bottom: 0.5rem;
  display: block;
}


/* ============================================
   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);
}


/* ============================================
   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.0 - 2025-12-08
 * - Versión inicial del tema FriendlyPOS
 * - Paleta de colores basada en mockups de diseño
 */