/* ===============================
   COLORES Y TIPOGRAFÍAS GENERALES
   =============================== */
:root>* {
    /* Fondo del footer */
    --md-footer-bg-color: rgb(248,244,227);

    /* Color principal del texto en el footer */
    --md-footer-fg-color: rgb(229, 68, 109);

    /* Fondo del footer en modo oscuro */
    --md-footer-bg-color--dark: rgb(229, 68, 109);

    /* Colores más claros del texto en el footer */
    --md-footer-fg-color--lighter:  rgb(248, 244, 227);
    --md-footer-fg-color--light:    rgb(248, 244, 227);

    /* Tipografía general del sitio */
    --mdc-typography-headline6-font-family: 'Be Vietnam', sans-serif;
    --mdc-typography-font-family: 'Be Vietnam', sans-serif;

    /* Color de los enlaces (links) */
    --md-typeset-a-color: rgb(255, 137, 102);

}

/* Cambiar color de los links al pasar el mouse en el contenido */
:root {
  --md-accent-fg-color: rgb(229, 68, 109); /* color para hover */
}


/* ===============================
   SCROLLBAR (OCULTAR BARRA)
   =============================== */
.hide-scroll-bar {
    -ms-overflow-style: none; /* IE y Edge */
    scrollbar-width: none;    /* Firefox */
}
.hide-scroll-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* ===============================
   BOTONES
   =============================== */
.md-typeset .md-button--primary {
    border-width: 1px;            /* grosor del borde */
    border-color: rgb(248, 244, 227); /* color del borde */
    border-radius: 4px;           /* esquinas redondeadas */
}

/* ===============================
   TARJETAS (estilo de bloques)
   =============================== */
.cardContent {
  padding: 16px;             /* margen interno */
  font-size: 16px;           /* tamaño de letra */
  color: rgb(255, 137, 102);
}

/* ===============================
   TITULOS (H2)
   =============================== */
.md-typeset h2 {
    font-weight: 500;  /* grosor intermedio */
}

/* ===============================
   TEXTO SECUNDARIO (BODY2)
   =============================== */
.mdc-typography--body2 {
    font-weight: 300;  /* más fino */
    font-size: 14px;   /* más chico */
}

/* ===============================
   COLORES PRINCIPALES DEL TEMA
   =============================== */
:root {
  --md-primary-fg-color:        rgb(229, 67, 107); /* color primario general */
  --md-primary-fg-color--light: rgb(248, 244, 227);   /* versión clara */
  --md-primary-fg-color--dark:  rgb(112, 108, 97); /* versión oscura */
}

/* ===============================
   FONDO Y TEXTO PRINCIPAL
   =============================== */
:root {
    /* Fondo base del sitio (contenido principal) */
    --md-default-bg-color: rgb(248, 244, 227); 

    /* Color del texto principal */
    --md-default-fg-color: rgb(43, 43, 42);
} 


/* Forzar dropdown al pasar el mouse */
.md-tabs__item:hover .md-tabs__link--active ~ .md-nav {
  display: block;
  visibility: visible;
  opacity: 1;
}