/**
 * VARIABLES CSS GLOBALES - TAULA
 * 
 * Este archivo define las variables CSS globales con la paleta de colores de Taula:
 * - Variables CSS para uso en estilos personalizados
 * - Colores principales de la marca
 * - Gradientes y efectos
 * 
 * @author Taula Team
 * @version 1.0
 */

:root {
  /* Paleta principal de Taula */
  --taula-dark: #2b394b;        /* Azul oscuro principal */
  --taula-medium: #517081;      /* Azul medio */
  --taula-light: #C2D3E0;      /* Azul claro */
  --taula-cream: #F2EDE8;       /* Crema/off-white */
  --taula-icon-bg: #3e546a;     /* Fondo de iconos del menú lateral */
  
  /* Colores de marca (compatibilidad) */
  --brand-dark: #2b394b;
  --brand-medium: #517081;
  --brand-light: #C2D3E0;
  --brand-cream: #F2EDE8;
  
  /* Gradientes (oscuro predominante: más tramo oscuro, transición corta al medium) */
  --gradient-primary: linear-gradient(135deg, var(--taula-dark) 0%, var(--taula-dark) 85%, var(--taula-medium) 100%);
  --gradient-light: linear-gradient(135deg, var(--taula-light) 0%, var(--taula-cream) 100%);
  --gradient-card: linear-gradient(145deg, #ffffff 0%, var(--taula-cream) 100%);
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(43, 57, 75, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(43, 57, 75, 0.1), 0 2px 4px -1px rgba(43, 57, 75, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(43, 57, 75, 0.1), 0 4px 6px -2px rgba(43, 57, 75, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(43, 57, 75, 0.1), 0 10px 10px -5px rgba(43, 57, 75, 0.04);
  
  /* Bordes */
  --border-light: 1px solid var(--taula-light);
  --border-medium: 1px solid var(--taula-medium);
  --border-dark: 1px solid var(--taula-dark);
  
  /* Radios */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  
  /* Transiciones */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* Clases utilitarias globales */
.bg-taula-dark { background-color: var(--taula-dark); }
.bg-taula-medium { background-color: var(--taula-medium); }
.bg-taula-light { background-color: var(--taula-light); }
.bg-taula-cream { background-color: var(--taula-cream); }

.text-taula-dark { color: var(--taula-dark); }
.text-taula-medium { color: var(--taula-medium); }
.text-taula-light { color: var(--taula-light); }
.text-taula-cream { color: var(--taula-cream); }

.border-taula-dark { border-color: var(--taula-dark); }
.border-taula-medium { border-color: var(--taula-medium); }
.border-taula-light { border-color: var(--taula-light); }

/* Gradientes */
.bg-gradient-taula { background: var(--gradient-primary); }
.bg-gradient-taula-light { background: var(--gradient-light); }
.bg-gradient-card { background: var(--gradient-card); }

/* Sombras personalizadas */
.shadow-taula-sm { box-shadow: var(--shadow-sm); }
.shadow-taula-md { box-shadow: var(--shadow-md); }
.shadow-taula-lg { box-shadow: var(--shadow-lg); }
.shadow-taula-xl { box-shadow: var(--shadow-xl); }

/* Efectos hover */
.hover-taula-dark:hover { background-color: var(--taula-dark); }
.hover-taula-medium:hover { background-color: var(--taula-medium); }
.hover-taula-light:hover { background-color: var(--taula-light); }

/* Transiciones globales */
.transition-taula { transition: all var(--transition-normal); }
.transition-taula-fast { transition: all var(--transition-fast); }
.transition-taula-slow { transition: all var(--transition-slow); }

/* Estados de focus */
.focus-taula:focus {
  outline: 2px solid var(--taula-medium);
  outline-offset: 2px;
}

/* Estilos para botones de marca */
.btn-taula-primary {
  background-color: var(--taula-dark);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.btn-taula-primary:hover {
  background-color: var(--taula-medium);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-taula-secondary {
  background-color: var(--taula-light);
  color: var(--taula-dark);
  border: 1px solid var(--taula-medium);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: all var(--transition-normal);
}

.btn-taula-secondary:hover {
  background-color: var(--taula-medium);
  color: white;
  border-color: var(--taula-dark);
}

/* Cards con estilo de marca */
.card-taula {
  background: var(--gradient-card);
  border: var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.card-taula:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Headers con gradiente */
.header-taula {
  background: var(--gradient-primary);
  color: white;
  padding: 2rem 1rem;
  text-align: center;
}

/* Texto con colores de marca */
.text-brand { color: var(--taula-dark); }
.text-brand-light { color: var(--taula-medium); }
.text-brand-muted { color: var(--taula-light); }

/* Botones mejorados para móvil */
.btn-presupuesto-movil {
  display: block;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background-color: var(--taula-light);
  color: var(--taula-dark);
  border: 2px solid var(--taula-medium);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.btn-presupuesto-movil:hover {
  background-color: var(--taula-medium);
  color: white;
  border-color: var(--taula-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

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

/* Responsive: mejoras específicas para móvil */
@media (max-width: 768px) {
  .btn-presupuesto-movil {
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .btn-presupuesto-movil {
    padding: 1.125rem 1.75rem;
    font-size: 1rem;
    border-width: 2px;
  }
}

/* Aclaración de precios sin IVA */
.precio-sin-iva {
  position: relative;
}

.precio-sin-iva::after {
  content: " (sin IVA)";
  font-size: 0.75em;
  color: var(--taula-medium);
  font-weight: normal;
  opacity: 0.8;
}

.texto-sin-iva {
  font-size: 0.75rem;
  color: var(--taula-medium);
  font-style: italic;
  margin-top: 0.25rem;
}

.texto-sin-iva-movil {
  display: block;
  font-size: 0.75rem;
  color: var(--taula-medium);
  font-style: italic;
  margin-top: 0.5rem;
  text-align: center;
}

@media (min-width: 769px) {
  .texto-sin-iva-movil {
    text-align: left;
  }
}