/* Esto va en tu archivo CSS (ej. src/css/jsgral.css o uno nuevo) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  /* La ruta sube una carpeta y entra en font */
  src: url('../font/material-symbols.woff2') format('woff2');
}

/* Variables de color para los tiempos */
:root {
    --color-adviento: purple;
    --color-navidad: maroon;
    --color-ordinario: green;
    --color-cuaresma: #6a0dad; /* Morado fuerte */
    --color-pascua: #008fcc;  /* Azul */
    --color-santos: #007bff;   /* Azul estándar */
    --color-solemnidades: #0069d9;
    
    --fuente-portada: 'Caveat', cursive;
}

/* Reseteo total para eliminar líneas blancas en los bordes */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden;
}

body {
    font-family: var(--fuente-portada);
    /* Imagen de fondo directamente aquí */
    background-image: url('../img/BackGround.jpg'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    /* Espacio para que el contenido no quede debajo del navigator */
    padding-bottom: 70px; 
    
    /* Flexbox solo para la portada */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

body.portada-body {
    margin: 0;
    padding: 0;
    font-family: var(--fuente-portada);
    color: white; /* Texto general en blanco */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    
}

#app {
    width: 100%;
}


.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* El fondo desenfocado */
.fondo-index {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1; /* Lo manda al fondo de todo */
        }

.portada-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto centra todo el bloque de la portada */
}

/* Título Principal */
.main-title {
    font-size: 3em;
    font-weight: bold;
    color: #ffcc00; /* Dorado */
    margin-bottom: 5px;
}
.de-las {
    font-size: 0.6em;
    vertical-align: middle;
}

/* Logo */
.logo-container {
    margin-bottom: 20px;
}
.logo-image {
    max-width: 150px;
    height: auto;
}

/* Botones Grandes */
.main-buttons-container {
    display: flex;             /* Activa Flexbox */
    flex-direction: row;       /* FUERZA a que sea uno al lado del otro */
    justify-content: center;   /* Centra los botones horizontalmente */
    align-items: center;       /* Alineación vertical */
    gap: 15px;                 /* Espacio entre botones */
    
    width: 100%;               /* Usa todo el ancho disponible */
    margin: 20px 0;            /* Margen arriba y abajo */
    padding: 10px 0;
}

/* Solo si quieres que en celulares muy pequeños se apilen por falta de espacio */
@media (max-width: 480px) {
    .main-buttons-container {
        flex-wrap: wrap;       /* Si no caben, bajan, pero siguen centrados */
    }
}

.btn-main {
    background: white;
    color: black;
    border: none;
    padding: 10px 5px;
    border-radius: 5px;
    font-family: var(--fuente-portada);
    font-size: 1.3em;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

/* El botón especial con doble marco */
.special-border {
    border: 3px double black; /* Marco doble */
}

/* Sección Evangelio */
.evangelio-section {
    margin-bottom: 20px;
}
.section-title {
    color: #ffcc00;
    font-size: 2em;
    margin-bottom: 5px;
}
.liturgical-date {
    font-size: 1.1em;
    margin-bottom: 15px;
}

/* Estilo del reproductor de audio (básico) */
.audio-container {
    margin-bottom: 20px;
}
audio {
    width: 100%;
    height: 5%;
    /*display: none;*/
    /* border-radius: 0px 0px 0px 0px; */
    /* outline: none; */
    background-color: #f1f3f4;
    left: 0px;
    position: fixed;
    top: 0px;
}

/* Icono Calendario */
.calendar-icon-container {
    margin: 20px 0;
}
.icon-calendar {
    width: 40px;
    height: auto;
    filter: invert(1); /* Si el icono es negro, lo hace blanco */
}

/* Botones de Tiempos */
.tiempos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.btn-tiempo {
    background: white;
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
    font-family: var(--fuente-portada);
    font-size: 1.2em;
    cursor: pointer;
}

/* Colores dinámicos por tiempo */
.adviento { color: var(--color-adviento); }
.navidad { color: var(--color-navidad); }
.ordinario { color: var(--color-ordinario); }
.cuaresma { color: var(--color-cuaresma); }
.pascua { color: var(--color-pascua); }
.santos { color: var(--color-santos); }
.solemnidades { color: var(--color-solemnidades); }

/* Footer */
.portada-footer .final-quote {
    color: #ffcc00;
    font-size: 1.4em;
    margin: 5px 0;
}

/* El Frame del Evangelio */
.frame-container {
    margin-top: 20px;
}
#frame-evangelio {
    width: 100%;
    height: 400px;
    border: none;
    background: white;
}

/* ... (mantenemos los estilos anteriores de la Virgen y fuentes) ... */

.tiempos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    padding-bottom: 20px;
}

.btn-tiempo {
    background: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.btn-tiempo:active { transform: scale(0.95); }

/* Colores específicos según el texto */
.btn-tiempo[data-tiempo="adviento"] { color: #800080; } /* Morado */
.btn-tiempo[data-tiempo="navidad"] { color: #8B0000; }  /* Rojo oscuro */
.btn-tiempo[data-tiempo="ordinario"] { color: #008000; } /* Verde */
.btn-tiempo[data-tiempo="cuaresma"] { color: #4B0082; }  /* Indigo/Morado */
.btn-tiempo[data-tiempo="pascua"] { color: #00BFFF; }    /* Celeste/Azul */
.btn-tiempo[data-tiempo="santos"] { color: #1E90FF; }    /* DodgerBlue */
.btn-tiempo[data-tiempo="solemnidades"] { color: #0073e6; }


.db-mboton {
    width: 40%;
    position: relative;
    display: flex;
    justify-self: center;
    border-radius: 50%;
}