:root {
  --cassiopeia-color-primary: #86b827;   /* Verdeazulado neon */
  --cassiopeia-color-hover: #a17826;     /* cafecito */
  --cassiopeia-color-secondary: #B2DFDB; /* Verde pastel */
  --cassiopeia-color-background: #FFFFFF; /* Fondo blanco */
  --cassiopeia-color-text: #000000;      /* Texto neutro oscuro */
}

/* Fondo general y texto */
body {
  background-color: var(--cassiopeia-color-background);
  color: var(--cassiopeia-color-text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Títulos */
h1, h2, h3, h4, h5 {
  color: var(--cassiopeia-color-primary);
}

/* Enlaces */
a {
  color: var(--cassiopeia-color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--cassiopeia-color-hover);
  text-decoration: underline;
}

/* Botones */
button, .btn {
  background-color: var(--cassiopeia-color-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  border: none;
  transition: background-color 0.3s ease;
}

button:hover, .btn:hover {
  background-color: var(--cassiopeia-color-hover);
}

/* Fondo blanco para el encabezado */
.header, .container-header, header {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none;
  color: var(--cassiopeia-color-text);
}

/* Títulos específicos */
body h3.card-header {
  color: #a17826 !important;
}

/* Asegura que la barra tenga fondo blanco */
.grid-child.container-nav,
.grid-child.container-nav .navbar,
.grid-child.container-nav .mod-menu {
    background-color: #ffffff !important;
}

/* Ítems del menú - solo dentro de grid-child.container-nav */
.grid-child.container-nav ul.mod-menu > li {
    display: inline-block;
    margin: 3px;
}

/* Enlaces dentro de los ítems - solo dentro de grid-child.container-nav */
.grid-child.container-nav ul.mod-menu > li > a {
    display: block;
    background-color: var(--cassiopeia-color-primary) !important;
    color: #fff !important;
    padding: 10px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover en ítems - solo dentro de grid-child.container-nav */
.grid-child.container-nav ul.mod-menu > li > a:hover {
    background-color: var(--cassiopeia-color-hover) !important;
    color: #ffffff !important;
}