/* Paleta de colores del sistema de noticias - Consistente con Sungrow */
:root {
  /* Colores principales de Sungrow */
  --color-primary: #2d5016;      /* Verde principal de Sungrow */
  --color-secondary: #4a7c59;    /* Verde secundario de Sungrow */
  --color-accent: #6bb77b;       /* Verde acento de Sungrow */
  --color-light: #90EE90;        /* Verde claro de Sungrow */
  --color-white: #ffffff;
  --color-dark: #2d3436;
  --color-gray: #636e72;
  --color-background: #f7faf9;
  
  /* Colores del logo para elementos especiales */
  --logo-green: #004601;         /* Verde del logo */
  --logo-red: #f61030;           /* Rojo del logo */
  --logo-yellow: #ffd001;        /* Amarillo del logo */
  --logo-cream: #f7faf9;         /* Crema del logo */
  
  /* Aplicación estratégica de colores */
  --primary-color: var(--color-primary);     /* Verde principal como base */
  --secondary-color: var(--color-secondary); /* Verde secundario */
  --accent-color: var(--color-accent);       /* Verde acento */
  --background-color: var(--color-background);     /* Degradado como fondo */
  
  /* Colores derivados para mejor contraste */
  --green-light: #4a7c59;        /* Verde más claro para hover */
  --green-dark: #2d5016;         /* Verde más oscuro para sombras */
  --red-light: #ff2a4a;          /* Rojo más claro para hover */
  --red-dark: #cc0d25;           /* Rojo más oscuro para sombras */
  --yellow-light: #ffdd33;       /* Amarillo más claro */
  --yellow-dark: #e6bb00;        /* Amarillo más oscuro */
  
  /* Variaciones de grises */
  --text-dark: #2d3436;
  --text-medium: #636e72;
  --text-light: #8b9dc3;
  --border-color: #e1e8ed;
  
  /* Estados con colores de Sungrow */
  --success-color: var(--color-primary);
  --warning-color: var(--logo-yellow);
  --danger-color: var(--logo-red);
  --info-color: #3498db;
  
  /* Sombras con colores de Sungrow */
  --shadow-green: rgba(45, 80, 22, 0.15);
  --shadow-red: rgba(246, 16, 48, 0.15);
  --shadow-yellow: rgba(255, 208, 1, 0.15);
  --shadow-light: rgba(45, 80, 22, 0.1);
  --shadow-medium: rgba(45, 80, 22, 0.2);
  --shadow-dark: rgba(45, 80, 22, 0.3);
  
  /* Sombras y transiciones de Sungrow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  --border-radius-sm: 10px;
  --border-radius-md: 20px;
  --border-radius-lg: 30px;
  --border-radius-full: 50px;
}

/* Aplicación de colores a elementos principales - Consistente con Sungrow */
.btn-primary {
  background: #004601;
  border-color: #004601;
  color: white;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.btn-primary:hover {
  background: #005a01;
  border-color: #005a01;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: #f61030;
  border-color: #f61030;
  color: white;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.btn-secondary:hover {
  background: #d10029;
  border-color: #d10029;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-warning {
  background: #ffd001;
  border-color: #ffd001;
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

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

.btn-danger {
  background: #f61030;
  border-color: #f61030;
  color: white;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

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

/* Botón especial con combinación de colores del logo */
.btn-logo {
  background: #004601;
  border: none;
  color: white;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.btn-logo:hover {
  background: #005a01;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Header y navegación con colores de Sungrow */
.header, .navbar {
  background: #004601;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Cards y contenedores con acentos de Sungrow */
.card, .news-card {
  background: white;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: var(--transition-normal);
}

.card::before, .news-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #004601;
}

.card:hover, .news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #ffd001;
}

/* Formularios con colores de Sungrow */
.form-control:focus {
  border-color: #ffd001;
  box-shadow: 0 0 0 3px rgba(255, 208, 1, 0.2);
  outline: none;
  transition: var(--transition-normal);
}

.form-control.error {
  border-color: var(--logo-red);
  box-shadow: 0 0 0 3px var(--shadow-red);
}

/* Alertas con colores de Sungrow */
.alert-success {
  background: rgba(0, 70, 1, 0.1);
  border-left: 4px solid #004601;
  color: #004601;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-normal);
}

.alert-warning {
  background: rgba(255, 208, 1, 0.2);
  border-left: 4px solid var(--logo-yellow);
  color: var(--text-dark);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-normal);
}

.alert-danger {
  background: rgba(246, 16, 48, 0.1);
  border-left: 4px solid var(--logo-red);
  color: var(--logo-red);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-normal);
}

.alert-info {
  background: rgba(52, 152, 219, 0.1);
  border-left: 4px solid var(--info-color);
  color: var(--info-color);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-normal);
}

/* Estados de carga con colores de Sungrow */
.loading {
  color: #004601;
}

.spinner {
  border: 4px solid #f7faf9;
  border-top: 4px solid #004601;
  border-right: 4px solid #005a01;
  border-bottom: 4px solid #004601;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Links con colores de Sungrow */
a {
  color: #004601;
  text-decoration: none;
  transition: var(--transition-normal);
}

a:hover {
  color: #f61030;
  text-decoration: underline;
}

/* Badges y etiquetas con colores de Sungrow */
.badge {
  background: #ffd001;
  color: var(--text-dark);
  border-radius: var(--border-radius-full);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
  transition: var(--transition-normal);
}

.badge-primary {
  background: #004601;
  color: white;
}

.badge-danger {
  background: #f61030;
  color: white;
}

.badge-warning {
  background: #ffd001;
  color: var(--text-dark);
}

/* Elementos especiales con combinación de colores de Sungrow */
.logo-accent {
  color: #004601;
  font-weight: bold;
}

.highlight-green {
  background-color: rgba(0, 70, 1, 0.1);
  border-left: 3px solid #004601;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-normal);
}

.highlight-yellow {
  background-color: rgba(255, 208, 1, 0.2);
  border-left: 3px solid var(--logo-yellow);
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-normal);
}

.highlight-red {
  background-color: rgba(246, 16, 48, 0.1);
  border-left: 3px solid var(--logo-red);
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-normal);
}