/* ============================================
   VARIABLES DE COLOR PERSONALIZADAS
   Modifica estos valores para cambiar todo el tema
   ============================================ */

:root {
  /* Colores principales */
  --color-primario: #2557a1;      /* Azul medio (antes primary de Bootstrap) */
  --color-primario-oscuro: #1a326e;
  --color-primario-claro: #4b83d1;

  /* Colores de secciones */
  --color-tesoros: #2a6b77;       /* Verde azulado (antes teal) */
  --color-tesoros-oscuro: #2a6b77;
  --color-tesoros-texto: #2a6b77;

  --color-mm: #9b6d17;            /* Naranja (antes gold) */
  --color-mm-oscuro: #9b6d17;
  --color-mm-texto: #9b6d17;

  --color-vc: #942926;            /* Rojo oscuro */
  --color-vc-oscuro: #942926;
  --color-vc-texto: #942926;

  --color-fijo: #546E7A;          /* Gris azulado */
  --color-fijo-oscuro: #37474F;

  /* Colores de estado */
  --color-exito: #30b337;
  --color-advertencia: #f57f17;
  --color-error: #B71C1C;
  --color-info: #46aeeb;

  /* Fondos y texto */
  --fondo-pagina: #f3f3f3;
  --fondo-tarjeta: #FFFFFF;
  --texto-principal: #212121;
  --texto-secundario: #616161;
  --borde-suave: #E0E0E0;

  /* Tipografía */
  --fuente-principal: "Google Sans Flex", 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fuente-titulos: "Google Sans Flex", 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Espaciado y bordes */
  --radio-borde: 8px;
  --sombra-tarjeta: 0 1px 3px rgba(0,0,0,0.12);

  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* ============================================
   SOBRESCRIBIR VARIABLES DE BOOTSTRAP
   Para cambiar el tema de Bootstrap
   ============================================ */

/* Reemplazar colores primarios de Bootstrap */
.bg-primary {
  background-color: var(--color-primario) !important;
}
.bg-success {
  background-color: var(--color-exito) !important;
}
.bg-warning {
  background-color: var(--color-advertencia) !important;
}
.bg-danger {
  background-color: var(--color-error) !important;
}
.bg-info {
  background-color: var(--color-info) !important;
}

/* Textos de color */
.text-primary { color: var(--color-primario) !important; }
.text-success { color: var(--color-exito) !important; }
.text-warning { color: var(--color-advertencia) !important; }
.text-danger { color: var(--color-error) !important; }
.text-info { color: var(--color-info) !important; }

/* Botones */
.btn-primary {
  background-color: var(--color-primario) !important;
  border-color: var(--color-primario-oscuro) !important;
}

.btn-primary:hover {
  background-color: var(--color-primario-oscuro) !important;
}

.btn-success {
  background-color: var(--color-exito) !important;
  border-color: var(--color-exito) !important;
}

.btn-danger {
  background-color: var(--color-error) !important;
  border-color: var(--color-error) !important;
}

/* Badges */
.badge.bg-success { background-color: var(--color-exito) !important; }
.badge.bg-warning { background-color: var(--color-advertencia) !important; }
.badge.bg-danger { background-color: var(--color-error) !important; }
.badge.bg-info { background-color: var(--color-info) !important; }


/* ============================================
   ESTILOS DE SECCIONES DEL PROGRAMA
   Usar estas clases en las tarjetas de sección
   ============================================ */

.tarjeta-tesoros {
  border-left: 4px solid var(--color-tesoros);
}

.tarjeta-tesoros .card-header {
  background-color: var(--color-tesoros) !important;
  color: white !important;
}

.tarjeta-mm {
  border-left: 4px solid var(--color-mm);
}
.tarjeta-mm .card-header {
  background-color: var(--color-mm) !important;
  color: white !important;
}

.tarjeta-vc {
  border-left: 4px solid var(--color-vc);
}
.tarjeta-vc .card-header {
  background-color: var(--color-vc) !important;
  color: white !important;
}

.tarjeta-fijo {
  border-left: 4px solid var(--color-fijo);
}
.tarjeta-fijo .card-header {
  background-color: var(--color-fijo) !important;
  color: white !important;
}

/* ============================================
   TIPOGRAFÍA Y CUERPO
   ============================================ */

body {
  font-family: var(--fuente-principal);
  color: var(--texto-principal);
  background-color: var(--fondo-pagina);
}

h1, h2, h3, h4, h5, h6, .card-header strong {
  font-family: var(--fuente-titulos);
}

.card {
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-tarjeta);
  border-color: var(--borde-suave);
}

.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ============================================
   MEJORAS DE ACCESIBILIDAD Y UX
   ============================================ */

.table-hover tbody tr:hover {
  background-color: rgba(74, 111, 165, 0.05); /* primario con opacidad */
}

.btn:focus, .form-control:focus, .form-select:focus {
  border-color: var(--color-primario-claro) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25) !important;
}

.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .navbar .container {
    flex-direction: column;
    gap: 0.5rem;
  }

  .card-body {
    padding: 0.75rem;
  }

  .table {
    font-size: 0.85rem;
  }
}