/* Colores de identidad visual - Paleta de 4 colores */

/* ============================================
   TIPOGRAFÍA - Roboto
   ============================================ */

/* Importar Roboto desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* Aplicar fuente a toda la plataforma */
* {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
}

/* Elementos en negrita usan Roboto Bold */
b, strong, h1, h2, h3, h4, h5, h6,
.font-bold, .font-semibold, .font-extrabold {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
}

/* Títulos con diferentes pesos */
h1, .text-4xl, .text-5xl, .text-6xl {
  font-weight: 900;
}

h2, .text-3xl {
  font-weight: 700;
}

h3, .text-2xl {
  font-weight: 700;
}

h4, h5, h6, .text-xl, .text-lg {
  font-weight: 500;
}

:root {
  /* ============================================
     PALETA DE 4 COLORES PRINCIPALES
     ============================================ */
  
  /* Color 1 - Verde Lima (Círculo Superior) */
  --color-verde-lima: #B4D232;
  --color-verde-lima-dark: #9CB32A;
  --color-verde-lima-light: #C5DB5A;
  
  /* Color 2 - Negro (Círculo Inferior) */
  --color-negro: #000000;
  --color-negro-dark: #000000;
  --color-negro-light: #1a1a1a;
  
  /* Color 3 - Blanco (Fondo Izquierdo) */
  --color-blanco: #FFFFFF;
  
  /* Color 4 - Gris Claro (Fondo Derecho) */
  --color-gris-claro: #E5E5E5;
  --color-gris-claro-dark: #D3D3D3;
  --color-gris-claro-light: #F5F5F5;
  
  /* ============================================
     VARIABLES PRINCIPALES (Compatibilidad)
     ============================================ */
  
  /* Color Principal - Negro */
  --color-primary: #000000;
  --color-primary-dark: #000000;
  --color-primary-light: #1a1a1a;
  
  /* Color Secundario - Verde Lima */
  --color-secondary: #B4D232;
  --color-secondary-dark: #9CB32A;
  --color-secondary-light: #C5DB5A;
  
  /* Colores de fondo */
  --color-bg-light: #E5E5E5; /* Gris Claro */
  --color-bg-white: #FFFFFF; /* Blanco */
  
  /* Colores de texto */
  --color-text-primary: #000000; /* Negro */
  --color-text-secondary: #666666;
  --color-text-light: #999999;
}

/* ============================================
   CLASES UTILITARIAS
   ============================================ */

.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary-dark {
  background-color: var(--color-primary-dark);
}

.bg-primary-light {
  background-color: var(--color-primary-light);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-secondary-dark {
  background-color: var(--color-secondary-dark);
}

.bg-secondary-light {
  background-color: var(--color-secondary-light);
}

/* Clases para los 4 colores principales */
.bg-verde-lima {
  background-color: var(--color-verde-lima);
}

.bg-negro {
  background-color: var(--color-negro);
}

.bg-blanco {
  background-color: var(--color-blanco);
}

.bg-gris-claro {
  background-color: var(--color-gris-claro);
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-verde-lima {
  color: var(--color-verde-lima);
}

.text-negro {
  color: var(--color-negro);
}

.border-primary {
  border-color: var(--color-primary);
}

.border-secondary {
  border-color: var(--color-secondary);
}

.border-verde-lima {
  border-color: var(--color-verde-lima);
}

.border-negro {
  border-color: var(--color-negro);
}

/* ============================================
   BOTONES
   ============================================ */

/* Botón primario - Negro */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg-white);
  border: none;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
}

/* Botón secundario - Verde Lima */
.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border: none;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
}

/* ============================================
   MODALES - Fondo Difuminado
   ============================================ */

/* Estilo global para overlays de modales con fondo difuminado */
.modal-overlay,
[class*="modal-overlay"],
.fixed.inset-0[class*="bg-gray"] {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Clase específica para modales con blur */
.modal-backdrop-blur {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}