/* COLOR VARIABLES - PALETA UNIFICADA */

:root {
  /* Colores Primarios */
  --color-primary: #e5b359;      /* Oro - Color primario */
  --color-primary-dark: #d4a04a;  /* Oro oscuro - Hover */
  --color-primary-light: #f0c86f; /* Oro claro - Background */

  /* Colores Secundarios */
  --color-secondary: #2c3e50;     /* Gris oscuro */
  --color-secondary-light: #ecf0f1; /* Gris claro */

  /* Colores de Estado */
  --color-success: #2dce89;       /* Verde */
  --color-danger: #f5365c;        /* Rojo */
  --color-warning: #fb6340;       /* Naranja */
  --color-info: #11cdef;          /* Cyan */

  /* Colores de Texto */
  --color-text: #212529;          /* Negro oscuro */
  --color-text-light: #6c757d;    /* Gris texto */
  --color-text-white: #ffffff;    /* Blanco */

  /* Colores de Fondo */
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-dark: #2c3e50;
  --color-bg-dark-secondary: #34495e;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.2);

  /* Espaciado */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;
}

/* APLICAR VARIABLES EN ELEMENTOS COMUNES */

.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info {
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all 0.3s ease;
}

.card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.card-header {
  background-color: var(--color-bg-light);
  border-bottom: 2px solid var(--color-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

input.form-control,
select.form-control,
textarea.form-control {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(229, 179, 89, 0.1);
}

.alert {
  border-radius: var(--radius-md);
  border: none;
}