/* --- ESTILOS GENERALES Y RESETS --- */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Dancing+Script:wght@400..700&family=Parisienne&display=swap');


html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f8f9fa;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  
}

main {
    flex-grow: 1;
}

.header-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    max-width: 1200px;
    margin: 0 auto; 
    padding: 20px;
}

.title-group {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.titulo {
    font-family: "Castoro", "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    color: #333;
    font-size: 7vw;
}

.tiblog2{
	font-size: 5.5vw
	
}

.eli {
    color: #AF8C92;
}

.subtitulo {
    font-family: "josefin-sans", "jost", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-top: -7px;
    text-align: center;
    font-size: 1.25rem;
    margin-left: 0;
}

.subtitulo2 {     /*Subtítulo del blog - activo */
    font-family: "josefin-sans", "jost", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-top: 5px;
    text-align: center;
	font-size: 2vw;
    margin-left: 0;
}

svg {
    width: 8vw;
    height: auto;
}

/* Media Queries para móviles */
@media (max-width: 600px) {
    .header-container {
        flex-direction: column-reverse;
        text-align: center;
		
    }

    .title-group {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .titulo {
        font-size: 12vw;
    }

    .subtitulo {
        font-size: 4vw;
    }

    svg {
        width: 15vw;
        margin-bottom: 10px;
    }
}

* {
  box-sizing: border-box;
}

/* Contenedor principal para todo el contenido visible (abarca header, main y empuja footer) */
.main-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    flex-grow: 1;
    padding-top: 0;
	
}

/* --- ESTILOS DE LA FUENTE LORA --- */
/* (Se mantiene, pero se asume que está en el HTML) */


/* --- ESTILOS ESPECÍFICOS DE LA PÁGINA PRINCIPAL (index.html) --- */
.cabeceraindex {
    width: 100%;
    height: 230px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra el contenido verticalmente por defecto */
    margin-top: 0;
    border-bottom: 5px solid #E8D9CD;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-image: radial-gradient(circle at center, #FFFFFF 0%, #E8D9CD 35%, #A38B78 100%);
}

/* Estilo para los nuevos enlaces en cabecera de la página index.php */ 

/* Estilos para el nuevo contenedor de enlaces */
.header-actions-index {
    display: flex; /* Permite que los enlaces se coloquen uno al lado del otro */
    gap: 15px; /* Añade un espacio entre los enlaces */
    justify-content: flex-end; /* Alinea los enlaces a la derecha */
    align-items: center; /* Centra verticalmente */
    padding: 0.1rem 1rem;
    position: absolute;
    bottom: 10px;
    right: 1rem;
    z-index: 10; 
}

/* Estilos para el nuevo enlace del blog */
.blog-link {
    color: #333333;
    font-size: 1.1rem;
    font-weight: normal;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: 'Lora', serif;
	padding: 0.5rem 0;
	margin-bottom: -8px; 
}

.blog-link:hover {
    color: #E8E5E2;
}

/* Estilos para el enlace de agendar cita (ahora con la nueva clase) */
.agendar-cita-link {
    color: #333333;
    font-size: 1.1rem;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
    font-family: 'Lora', serif;
	margin-bottom: -8px;
}

.agendar-cita-link:hover {
    color: #E8E5E2;
}





/* Estilos para los Bloques de Contenido de la página principal (index.html) */
main.content-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
    width: 100%;
    margin-top: 2rem;
    justify-items: center;
}

.service-block {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    border: 1px solid #E8D9CD;
}

.service-block-link h2 {
    color: #333333;
    transition: color 0.3s ease;
}

.service-block-link:hover h2 {
    color:#AEA39A;
}

.service-block-link{
    text-decoration: none;
}

.service-block-link img {
    transition: filter 0.3s ease-in-out;
}

.service-block-link:hover img {
    filter: brightness(1.15);
}

.service-block:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.service-block img { max-width: 100%; height: 200px; object-fit: cover; border-radius: 4px; margin-bottom: 1rem; cursor: pointer; }
.service-block h2 { font-size: 1.8rem; color: #333; margin-top: 0; margin-bottom: 0.5rem; }
.service-block p { font-size: 1rem; color: #555; line-height: 1.5; }


/* -------------------------------------------------------------------------------------- */
/* ESTILOS DE OTRAS PÁGINAS (NO MODIFICADOS) */
/* -------------------------------------------------------------------------------------- */

.page-specific-header {
	width: 100%;
    height: 230px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra el contenido verticalmente por defecto */
    margin-top: 0;
    border-bottom: 5px solid #E8D9CD;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-image: radial-gradient(circle at center, #FFFFFF 0%, #E8D9CD 35%, #A38B78 100%);
    
}

.page-specific-header::before {
    
}

/* Y el resto de estilos de tus otras páginas y media queries... */


.page-specific-header h1,
.page-specific-header .header-description {
    position: relative;
    color: #333;
    /*text-shadow: 2px 2px 4px rgba(0,0,0,0.5); */
    margin: 0.5rem 0;
}

.page-specific-header h1 {
    font-size: 4rem;
    font-family: 'Lora', serif;
	color: #333333
}

.page-specific-header .header-description {
    font-size: 1.5rem;
    font-style: normal;
}

.main-page-nav {
    width: 100%;
    background-color: #f0f0f0;
    padding: 0.8rem 0;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
    position: relative;
}

.main-page-nav .nav-toggle {
    display: none;

}

.nav-links-main {
    list-style: none;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    max-width: 100%;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;

	 
}

.nav-links-main li a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-links-main li a:hover,
.nav-links-main li a.active {
    color: #E8D9CD;
    background-color: #333;
}



.service-details-content {
    width: 100%;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    justify-items: center;
}



.massage-type-block {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    border: 1px solid #E8D9CD
}

.massage-type-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.massage-type-block h2 {
    font-size: 1.8rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: 'Lora', serif;
}




.massage-type-block p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}


/* --- ESTILOS DEL FOOTER (Común a todas las páginas) --- */
footer {
    width: 100%;
    background-color: #333;
    color: #f8f9fa;
    padding: 1.5rem 1rem;
    margin-top: 3rem;
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    box-shadow:
    0 -6px 0 0 #AEA39A,
    0 -5px 0 0 #E8D9CD;
}
footer p {
    margin: 0;
    padding: 0.2rem 0;
    width: 100%;
    text-align: center;
}


/* -------------------------------------------------------------------------------------- */
/* MEDIA QUERIES (RESPONSIVE DESIGN) */
/* -------------------------------------------------------------------------------------- */

/* Cambios para pantallas pequeñas (hasta 768px de ancho) */
@media (max-width: 768px) {
    /* Ajustes para la cabecera principal de index.html */
    .cabeceraindex {
        height: auto;
        padding-bottom: 30px;
    }
    
    /* Ajustes para el contenedor de título y mariposa de index.html */
    .header-container {
        flex-direction: column-reverse;
        text-align: center;
        padding: 10px;
    }

    .title-group {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .titulo {
        font-size: 12vw;
    }
	

    .subtitulo {
        font-size: 4vw;
        margin-left: 0;
    }

    svg {
        width: 15vw;
        margin-bottom: 10px;
    }

    /* Corrección para el enlace "Agendar cita" en móviles de index.html */
    .agendar-cita {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        right: auto;
        font-size: 1rem;
        padding: 0.5rem 1rem;
        z-index: 10;
        text-align: center;
        white-space: nowrap;
    }
    
    /* Ajustes para los bloques de contenido de index.html */
    .main-wrapper {
        padding: 0 0.5rem;
    }

    main.content-blocks {
        grid-template-columns: 1fr;
        padding: 1rem 0;
        margin-top: 1rem;
    }

    .service-block {
        padding: 1rem;
    }
    /* **FIN DE LOS CAMBIOS PARA INDEX.HTML** */

    /* Ajustes para la altura de la cabecera en pantallas pequeñas */
    .page-specific-header {
        height: 230px;
        justify-content: center;
        padding-bottom: 0;
    }

    /* Estilos para el TÍTULO (h1) en pantallas pequeñas */
    .page-specific-header h1 {
        font-size: 2.5rem;
        margin: 0;
        margin-bottom: 0.5rem;
        order: 0;
    }

    /* Estilos para el SUBTÍTULO (.header-description) en pantallas pequeñas */
    .page-specific-header .header-description {
        font-size: 1.1rem;
        margin: 0;
        margin-top: 0;
        order: 1;
    }

    /* --- ESTILOS DE LA BARRA DE NAVEGACIÓN PRINCIPAL EN MÓVILES --- */
    .main-page-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.6rem 0;
        margin-bottom: 1.5rem;
        position: relative;
        width: 100%;
    }

    .main-page-nav .nav-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        border-radius: 0;
        z-index: 1001;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .hamburger-icon {
        width: 30px;
        height: 3px;
        background-color: #333;
        border-radius: 2px;
        position: relative;
        transition: background-color 0.3s ease;
    }

    .hamburger-icon::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #333;
        border-radius: 2px;
        top: -10px;
        transition: transform 0.3s ease, top 0.3s ease;
    }

    .hamburger-icon::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #333;
        border-radius: 2px;
        top: 10px;
        transition: transform 0.3s ease, top 0.3s ease;
    }

    .main-page-nav.nav-open .hamburger-icon {
        background-color: transparent;
    }
    .main-page-nav.nav-open .hamburger-icon::before {
        top: 0;
        transform: rotate(45deg);
    }
    .main-page-nav.nav-open .hamburger-icon::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .nav-links-main {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        gap: 0.3rem;
        padding: 0 0.5rem;
        background-color: #f8f9fa;
        position: static;
        z-index: 1000;
		padding-bottom: 10px; 
		
    }

    .main-page-nav.nav-open .nav-links-main {
        max-height: 500px;
        opacity: 1;
        padding-top: 0.5rem;
    }

    /* Ajustes del contenido detallado de servicios para móviles */
    .service-details-content {
        grid-template-columns: 1fr;
        padding: 0.5rem 0;
        gap: 1.5rem;
    }
    .massage-type-block {
        padding: 1.5rem;
    }
    .massage-type-block h2 {
        font-size: 1.5rem;
    }
    .massage-type-block p {
        font-size: 0.95rem;
    }

    /* Ajustes del footer para móviles */
    footer {
        margin-top: 2rem;
        padding: 1rem 0.5rem;
        flex-direction: column;
        text-align: center;
    }
    footer p {
        padding: 0.2rem 0;
    }
}

/* Ajustes más finos para pantallas muy pequeñas (hasta 480px de ancho) */
@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    .subtitle { font-size: 1rem; }
    #butterfly-wrapper { width: 70px; height: 55px; }

    .page-specific-header h1 { font-size: 2.2rem; }
    .page-specific-header .header-description { font-size: 0.9rem; }
}



/*ESTILOS PARA LAS PÁGINAS SECUNDARIAS */

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE FACIALES --- */
.faciales-content {
    width: 100%;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    justify-items: center;
}

.faciales-content .massage-type-block {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}

.faciales-content .massage-type-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.faciales-content .massage-type-block h2 {
    font-size: 1.8rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: 'Lora', serif;
}

.faciales-content .massage-type-block p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

/* --- MEDIA QUERIES PARA FACIALES (Ajustes para móviles) --- */
@media (max-width: 768px) {
    .faciales-content {
        grid-template-columns: 1fr;
    }
}

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE DEPILACIÓN CON CERA --- */
.depilacion-content {
    width: 100%;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    justify-items: center;
}

/* Fuerza 2 columnas para un rango de pantallas de tablet/escritorio intermedio */
@media (min-width: 769px) and (max-width: 1024px) {
    .depilacion-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fuerza 3 columnas para pantallas de escritorio más grandes */
@media (min-width: 1025px) {
    .depilacion-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Media query para móviles (menos de 769px) */
@media (max-width: 768px) {
    .depilacion-content {
        grid-template-columns: 1fr;
        padding: 0.5rem 0;
        gap: 1.5rem;
    }
}

.depilacion-content .massage-type-block {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.depilacion-content .massage-type-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.depilacion-content .massage-type-block h2 {
    font-size: 1.8rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: 'Lora', serif;
}

.depilacion-content .massage-type-block p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE DESPIGMENTACIÓN CORPORAL --- */
.despigmentacion-content {
    width: 100%;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    justify-items: center;
}

/* Fuerza 2 columnas para un rango de pantallas de tablet/escritorio intermedio */
@media (min-width: 769px) and (max-width: 1024px) {
    .despigmentacion-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fuerza 3 columnas para pantallas de escritorio más grandes (si hay espacio para más de 2 y quieres que se distribuyan) */
@media (min-width: 1025px) {
    .despigmentacion-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Media query para móviles (menos de 769px) */
@media (max-width: 768px) {
    .despigmentacion-content {
        grid-template-columns: 1fr;
        padding: 0.5rem 0;
        gap: 1.5rem;
    }
}

.despigmentacion-content .massage-type-block {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.despigmentacion-content .massage-type-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.despigmentacion-content .massage-type-block h2 {
    font-size: 1.8rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: 'Lora', serif;
}

.despigmentacion-content .massage-type-block p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE CEJAS Y PESTAÑAS --- */
.cejas-pestanas-content {
    width: 100%;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    justify-items: center;
}

/* Fuerza 2 columnas para un rango de pantallas de tablet/escritorio intermedio */
@media (min-width: 769px) and (max-width: 1024px) {
    .cejas-pestanas-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fuerza 3 columnas para pantallas de escritorio más grandes */
@media (min-width: 1025px) {
    .cejas-pestanas-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Media query para móviles (menos de 769px) */
@media (max-width: 768px) {
    .cejas-pestanas-content {
        grid-template-columns: 1fr;
        padding: 0.5rem 0;
        gap: 1.5rem;
    }
}

.cejas-pestanas-content .massage-type-block {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.cejas-pestanas-content .massage-type-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.cejas-pestanas-content .massage-type-block h2 {
    font-size: 1.8rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: 'Lora', serif;
}

.cejas-pestanas-content .massage-type-block p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE PAQUETES ESPECIALES --- */
.paquetes-content {
    width: 100%;
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40vh;
    text-align: center;
}

.paquetes-content .placeholder-content {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 3rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.paquetes-content .placeholder-content h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1.5rem;
    font-family: 'Lora', serif;
}

.paquetes-content .placeholder-content p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.paquetes-content .placeholder-content .agendar-cita-inline {
    display: inline-block;
    background-color: #666666;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.paquetes-content .placeholder-content .agendar-cita-inline:hover {
    background-color: #4C4C4C;
}

/* Media query para móviles (ajusta el placeholder también) */
@media (max-width: 768px) {
    .paquetes-content {
        padding: 1.5rem 0.5rem;
        min-height: 30vh;
    }

    .paquetes-content .placeholder-content {
        padding: 2rem 1rem;
    }

    .paquetes-content .placeholder-content h2 {
        font-size: 2rem;
    }

    .paquetes-content .placeholder-content p {
        font-size: 1rem;
    }

    .paquetes-content .placeholder-content .agendar-cita-inline {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE CONTACTO/AGENDAR CITA --- */

.form-content {
    width: 100%;
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinea el contenido del formulario al inicio (arriba) */
    flex-grow: 1; /* Permite que este contenido empuje el footer hacia abajo */
}

.form-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 2.5rem;
    max-width: 700px; /* Ancho máximo para el formulario */
    width: 100%;
    text-align: left; /* Alinea el texto del formulario a la izquierda */
	
}

.form-container h1, .form-container h2 {
    color: #333;
    font-family: 'Lora', serif;
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-container label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
    font-size: 0.95rem;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="date"],
.form-container input[type="time"],
.form-container select {
    width: calc(100% - 20px); /* Ajusta para padding */
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-container input[type="text"]:focus,
.form-container input[type="email"]:focus,
.form-container input[type="date"]:focus,
.form-container input[type="time"]:focus,
.form-container select:focus {
    border-color: #AEA39A;
    box-shadow: 0 0 0 0.2rem rgba(232, 217, 205, 0.25);
    outline: none;
}

.form-container button[type="submit"],
.form-container button.cancelar {
    display: block;
    width: 100%;
    padding: 1rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1rem; /* Espacio superior para botones */
}

.form-container button[type="submit"]:hover {
    background-color: #E8D9CD;
}

.form-container button.cancelar {
    background-color: #dc3545; /* Rojo para cancelar */
    margin-top: 0.5rem; /* Menos espacio entre botones de cancelar */
}

.form-container button.cancelar:hover {
    background-color: #c82333;
}

.mensaje {
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 0.95rem;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease;
}

.mensaje.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    opacity: 1;
}

.mensaje.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    opacity: 1;
}

.mensaje.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    opacity: 1;
}

.lista-sugerencias {
    list-style-position: inside; 
    text-align: center;
    padding-left: 0;
	
	
	
}

.lista-sugerencias li {
    /* Asegura que el texto dentro de cada item comience a la izquierda, 
       justo al lado de su viñeta. */
    text-align: center;
}


hr {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 2rem 0;
}

/* Estilos para el listado de citas */
#listado-citas {
    margin-top: 1.5rem;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.cita-item {
    background-color: #f9f9f9;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column; /* Cambia a columna para móviles */
    justify-content: space-between;
    align-items: flex-start; /* Alinea los ítems a la izquierda */
    gap: 0.8rem; /* Espacio entre los elementos de la cita */
    font-size: 0.95rem;
    position: relative;
    overflow: hidden; /* Para animaciones futuras */
}

.cita-item.cancelada {
    background-color: #ffebeb; /* Fondo claro para citas canceladas */
    border-color: #ffc2c2;
    color: #8c0000;
    text-decoration: line-through; /* Tachar texto */
    opacity: 0.7;
    pointer-events: none; /* Desactiva interacciones si está cancelada */
}

.cita-item.cancelada button {
    display: none; /* Oculta el botón de cancelar si ya está cancelada */
}

.cita-item .cita-line {
    display: block; /* Cada detalle en su propia línea */
    margin-bottom: 0.3rem;
}

.cita-item .cita-line strong {
    color: #333;
}

.cita-item.cancelada .cita-line strong {
    color: #8c0000; /* Mantiene el color para que se vea tachado */
}

.cita-item button.cancelar {
    margin-left: auto; /* Empuja el botón a la derecha en pantallas grandes */
    margin-top: 1rem; /* Margen superior en móviles */
    width: auto; /* Elimina el width: 100% para este botón en listado */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Media Queries para responsividad del formulario */
@media (min-width: 769px) {
    .cita-item {
        flex-direction: row; /* Vuelve a fila en pantallas grandes */
        align-items: center; /* Centra verticalmente */
    }
    .cita-item button.cancelar {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .form-container {
        padding: 1.5rem;
    }

    .form-container h1, .form-container h2 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .form-container input[type="text"],
    .form-container input[type="email"],
    .form-container input[type="date"],
    .form-container input[type="time"],
    .form-container select,
    .form-container button[type="submit"],
    .form-container button.cancelar {
        padding: 0.7rem;
        font-size: 1rem;
    }

    .mensaje {
        padding: 0.8rem;
        font-size: 0.85rem;
    }

    .cita-item {
        padding: 1rem;
    }
}

/* Ajustes adicionales para la alineación del header en páginas secundarias */
.page-specific-header {
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.page-specific-header h1 {  /* TITULO PÁGINAS SECUNDARIAS */
    font-size: 2.8rem;
    color: #333;
    margin-bottom: 0.5rem;
    font-family: 'Lora', serif;
}

.page-specific-header p.header-description { /* Subtítulos PÁGINAS SECUNDARIAS */
    font-size: 1.25rem;
    color: #333;
	font-family: "josefin-sans", "jost", sans-serif;
    max-width: 700px;
    margin: 0 auto;
	
}

@media (max-width: 768px) {
    .page-specific-header h1 {
        font-size: 2.2rem;
		padding: 0 5px; 
    }
    .page-specific-header p.header-description {
        font-size: 1.10rem;
		padding: 0 5px; 
    }
}


/* --- ESTILOS PARA LAS PÁGINAS DEL BLOG --- */

/* Contenedor principal de la lista de artículos */
.blog-list-content {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}



/* Bloque individual de previsualización del artículo */
.article-preview {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 450px;
    text-align: center;
	 
}

.article-preview:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.article-preview a {
    text-decoration: none;
    color: #333;
    display: block;
}

.article-preview img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-preview h2 {
    font-size: 1.5rem;
    color: #AF8C92;
    padding: 15px 15px 5px;
    margin: 0;
}

.article-preview .summary {
    font-size: 1rem;
    color: #666;
    padding: 0 15px 15px;
}

/* Estilos para la página de artículo individual */
.article-detail-content {
    max-width: 850px;
    margin: 20px auto;
    padding: 0 20px;
	
	
	
}



.titulo-articulo-h1{
	margin-top: -10px; 
	font-family: "Castoro", "Libre Baskerville", "Lora", serif;
	
	
}

.titulo-previa{
	font-family: "Castoro", "Libre Baskerville", "Lora", serif;
}

.article-detail-content article {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    
}

.article-detail-content h1 {
    font-size: 2.5rem;
    color: #AF8C92;
    margin-bottom: 10px;
	text-align: center; 
}

.article-detail-content .meta {
    font-style: italic;
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 50px;
	text-align: center; 
	margin-top: -10px; 
}

.article-detail-content img {
    max-width: 90%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

.article-detail-content p {
    line-height: 1.6;
    color: #333;
    margin-bottom: 1rem;
    word-wrap: break-word; /* Añade esta línea */
}

/* Estilos para las etiquetas */
/* Estilos para las etiquetas */
.tags, .meta a {
    /* Mantenemos el flexbox para centrar y el gap */
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 0 15px 15px;
}

.tags span, .meta a {
    /* La clave es display: inline-block para que el fondo se ajuste al texto */
    display: inline-block; 
    background-color: #F0F0F0;
    color: #555;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.tags span:hover, .meta a:hover {
    background-color: #AF8C92;
    color: #fff;
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    .blog-list-content {
        flex-direction: column;
        align-items: center;
		
    }

    .article-preview {
        max-width: 99%;
    }
}

@media (max-width: 480px) {
    .article-detail-content h1 {
        font-size: 2rem;
    }
}

/* SEGUNDO GRUPO DE ESTILOS PARA LA PÁGINA DEL BLOG */ 

.contenedor-principal{
	width: 100%; 
	 
}


/* Estilos para la nube de etiquetas */
.tag-cloud-section {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

.tag-cloud-section h2 {
    font-size: 1.5rem;
    color: #AF8C92;
    margin-bottom: 15px;
	margin-top: -30px; 
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tag-cloud .tag-link {
    background-color: #F0F0F0;
    color: #555;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}

.tag-cloud .tag-link:hover,
.tag-cloud .tag-link.active {
    background-color: #AF8C92;
    color: #fff;
}

/* estilos para la página de administración de articulos */

/* === Estilos generales del cuerpo y fuente === */

.admin-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}



/* === Contenedor principal para centrar el contenido === */
.admin-body .admin-container {
    max-width: 800px;
    width: 100%;
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* === Encabezado === */
.admin-body .admin-title {
    text-align: center;
    color: #495057;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 2em;
}

/* === Estilos del formulario === */
.admin-body #admin-form {
    display: flex;
    flex-direction: column;
}

.admin-body .form-group {
    margin-bottom: 20px;
}

.admin-body label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
    font-size: 1.2em;
    display: block;
}

.admin-body .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.admin-body .form-control:focus {
    border-color: #f1a9a0;
    outline: none;
    box-shadow: 0 0 5px rgba(241, 169, 160, 0.5);
}


/* === Botón de guardar === */
.admin-body .btn-submit {
    background-color: #f1a9a0;
    color: #fff;
    padding: 15px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s;
    margin-top: 10px;
}

.admin-body .btn-submit:hover {
    background-color: #e58d83;
    transform: translateY(-2px);
}

/* === Estilos responsivos para dispositivos pequeños === */
@media (max-width: 768px) {
    .admin-body {
        padding: 10px;
        align-items: flex-start;
    }

    .admin-body .admin-container {
        padding: 20px;
    }

    .admin-body .admin-title {
        /* Aumento del tamaño de la fuente para el título principal en móviles */
        font-size: 2em;
    }
    
    .admin-body label {
        /* Aumento del tamaño de la fuente para las etiquetas en móviles */
        font-size: 1.2em;
    }

    .admin-body .form-control {
        padding: 10px;
        /* Aumento del tamaño de la fuente para los inputs en móviles */
        font-size: 16px;
    }

    .admin-body .btn-submit {
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* Estilos para la paginación del blog */

/* Contenedor para la paginación */
.paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
	padding-top: 20px; 
    padding-bottom: 5px;
    /* La clave es permitir que los elementos se envuelvan en varias líneas */
    flex-wrap: wrap; 
}

/* Estilos para los enlaces de paginación */
.paginacion .pag-btn {
    font-family: "Lora", serif;
    text-decoration: none;
    color: #555;
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    transition: background-color 0.3s, color 0.3s;
}

.paginacion .pag-btn:hover {
    background-color: #F0F0F0;
    color: #AF8C92;
}

.paginacion .pag-btn.active {
    background-color: #AF8C92;
    color: #fff;
    border-color: #AF8C92;
    cursor: default;
}



/* Paginación en la página del blog y mensajes de alerta y error */

.blog-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que la página siempre ocupe toda la altura de la ventana */
}



.blog-page .blog-list-content {
    flex-grow: 1; /* El contenido de los artículos se expande para empujar la paginación */
}

.blog-page .paginacion {
    margin-top: auto; /* Esta es la clave para que la paginación se pegue al fondo */
    margin-bottom: 30px; /* Para darle un poco de espacio antes del pie de página */
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px;
    margin-top: 20px;
    border-radius: 5px;
    text-align: center;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin-top: 20px;
    border-radius: 5px;
    text-align: center;
}


/* Estilos para la tabla de administración de admin_list.php */

.admin-table {
    margin-top: 20px;
}

.admin-table th {
    background-color: #f8f9fa;
    text-align: left;
}

.admin-table td {
    vertical-align: middle;
}

.btn-crear {
	margin-top: 10px; 
    margin-bottom: 20px;
    display: inline-block;
}

/* Estilos para la paginación de admin_list.php */

.paginacion {
    margin-top: 20px;
    text-align: center;
}

.paginacion .pag-btn {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
}

.paginacion .pag-btn:hover {
    background-color: #e9ecef;
}

.paginacion .pag-btn.active {
    background-color: #AF8C92;
    color: white;
    border-color: #A28E92;
}



/* Estilos para el botón de cancelar */
.btn-cancel {
    background-color: #6c757d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    
}

.btn-cancel:hover {
    background-color: #5a6268;
    color: white;
}


/* Estilos para el nuevo contenedor de los botones de navegación de admin */
.admin-header-actions {
    display: flex;
    justify-content: center; /* Esto centra los elementos horizontalmente */
    gap: 15px; /* Espacio entre los botones */
    padding: 20px;
    background-color: #f8f9fa; /* Fondo ligero para la barra de navegación */
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px; /* Separación del contenido de abajo */
}

/* Estilo base para todos los botones de navegación de admin */
.admin-nav-btn {
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    background-color: #6c757d; /* Color de fondo por defecto */
    transition: background-color 0.2s ease;
	border: 1px solid white; 
	
}

.admin-nav-btn:hover {
    color: white;
    background-color: #5a6268;
}

/* Estilo para el botón de cerrar sesión (resaltado en rojo) */
.btn-danger-nav {
    background-color: #dc3545;
	border: 1px solid white; 
}

.btn-danger-nav:hover {
    background-color: #c82333;
}

.admin-header-actions {
    background-image: url('imagenes/fondo.png');
    background-size: 150px;
    background-position: center;
    background-repeat: repeat;
	border-radius: 5px; 
    
}

/* Estilos para el botón de inicio de sesión */
.btn-login {
    display: block; /* Ocupa el ancho completo para poder centrarlo */
    margin: 0 auto; /* Centra el botón horizontalmente */
    width: 200px; /* Le damos un ancho fijo para que no ocupe toda la línea */
}



/* ---------------------------------------------------- */
/* Estilos para la sección de comentarios */
/* ---------------------------------------------------- */

 /* El "truco" para que se salga del contenedor padre */
    width: 100vw;
    position: relative;
    left: 30%;
    right: 30%;
    margin-left: -30vw;
    margin-right: -30vw;
    /* Fin del truco */
    
    margin-top: 40px;
    background-color: #f8f9fa; /* Fondo gris claro */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.comments-section-inner {
    /* Nuevo contenedor interno para manejar los márgenes de 15px a los lados */
    max-width: 800px; /* Ancho máximo para el contenido, puedes ajustarlo si lo deseas */
    margin: 0 auto;
    padding: 20px 15px; /* Padding de 20px arriba/abajo y 15px a los lados */
}
.comments-section h3 {
    font-size: 1.8em;
    color: #333;
    border-bottom: 2px solid #AF8C92;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Estilos para el formulario de comentarios */
.comment-form {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.comment-form h4 {
    font-size: 1.4em;
    color: #555;
    margin-bottom: 20px;
}

.comment-form .form-group {
    margin-bottom: 15px;
}

.comment-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #777;
}

.comment-form .form-group input,
.comment-form .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.comment-form .form-group input:focus,
.comment-form .form-group textarea:focus {
    border-color: #AF8C92;
    outline: none;
}

.comment-form .btn-submit {
    display: inline-block;
    padding: 10px 20px;
    background-color: #AF8C92;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.comment-form .btn-submit:hover {
    background-color: #9C7C83;
}

/* ---------------------------------------------------- */
/* Estilos para la sección de comentarios (Corregido)   */
/* ---------------------------------------------------- */

.comments-section {
    /* El "truco" para que se salga del contenedor padre y ocupe todo el ancho */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    margin-top: 40px;
    padding: 0; /* Aseguramos que el padding externo sea cero */
    background-color: #f8f9fa; /* Fondo gris claro */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.comments-content-wrapper {
    /* Este es el nuevo contenedor que maneja el padding interno */
    max-width: 800px; /* Ancho máximo para el contenido, puedes ajustarlo */
    margin: 0 auto;
    padding: 20px 15px; /* Padding de 20px arriba/abajo y 15px a los lados */
}

/* Estilos para los títulos */
.comments-content-wrapper h2,
.comments-content-wrapper h3 {
    text-align: left;
    font-size: 1.6em;
    color: #333;
    border-bottom: 2px solid #AF8C92;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.comments-content-wrapper .dejar{
	text-align: center; 
	 
}

/* Estilos para la lista de comentarios */
.comments-list {
    list-style: none; /* Elimina el punto negro de la lista */
    padding: 0;
	
}

/* Estilo para los comentarios en posiciones impares (1, 3, 5, etc.) */
.comments-list li:nth-child(odd) {
    background-color: #fff; /* Color de fondo claro o blanco */
}

/* Estilo para los comentarios en posiciones pares (2, 4, 6, etc.) */
.comments-list li:nth-child(even) {
    background-color: #F8F9FA; /* Un tono un poco más oscuro */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}

/* Contenedor flexible para la imagen y la información del autor */
.comment-header-row {
    display: flex;
    align-items: center; /* Centra los elementos verticalmente */
    gap: 10px; /* Espacio entre la foto y el texto */
    margin-bottom: -8px;
}

/* Estilo para la imagen de perfil */
.comment-card .comment-header-row .profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Para que la imagen sea circular */
    object-fit: cover; /* Asegura que la imagen no se distorsione */
    border: 2px solid #ddd;
}



.replies {
    list-style: none; /* Elimina las viñetas */
    padding-left: 20px; /* Sangría para las respuestas */
    margin-top: 10px;
}

.comment-card.reply {
    background-color: #f0f2f5; /* Un color de fondo diferente para las respuestas */
}







.comment-card {
    background-color: #fff;
    padding: 15px 15px 10px 15px; /* Padding: 15px arriba/lados, 10px abajo */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    border-left: 5px solid #AF8C92;
    text-align: left;
}

.comment-author {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.comment-date {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 10px;
    display: block;
}

.comment-text {
    color: #555;
    line-height: 1.6;
}

/* Estilos para el formulario de comentarios */
.comment-form-container {
    background-color: #fff;
    padding: 15px; /* Reducción de padding */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.comment-form-container h3 {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #777;
}

.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.form-group textarea:focus {
    border-color: #AF8C92;
    outline: none;
}

.btn-submit {
    display: inline-block;
    padding: 9px 12px;
    background-color: #AF8C92;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: #9C7C83;
}

/* Estilos para los mensajes de alerta */
.alert-success {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #c3e6cb;
}

.login-message {
    background-color: #e2e3e5;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #d6d8db;
}

.login-message a {
    color: #AF8C92;
    text-decoration: none;
    font-weight: bold;
}

.login-message a:hover {
    text-decoration: underline;
}

/* Ajuste de estilo para que la sección de comentarios ocupe el ancho completo */
.article-detail-content .comments-section {
    max-width: none;
}


/* ---------------------------------------------------- */
/* Estilos para las páginas de login y registro (Responsive) */
/* ---------------------------------------------------- */

/* Estilos para el cuerpo de la página de login y registro */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f8f9fa; /* Color de fondo consistente */
    font-family: Arial, sans-serif;
    padding: 20px;
}

/* Contenedor principal del formulario */
.login-container {
    width: 100%;
    max-width: 800px; /* Ancho máximo más amplio para todas las pantallas */
    padding: 40px; /* Más espacio interior para una mejor presentación */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.login-container h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    font-weight: 600;
}

.login-container .form-group {
    margin-bottom: 20px;
}

.login-container .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

.login-container .form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.login-container .form-group input:focus {
    border-color: #AF8C92; /* Color de marca en el enfoque */
    outline: none;
}

/* Estilos para el botón */
.btn-login {
    width: 100%;
    padding: 12px;
    background-color: #AF8C92; /* Color de marca */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-login:hover {
    background-color: #9C7C83; /* Tono más oscuro de la marca */
}

/* Estilos para los mensajes de alerta */
.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #c3e6cb;
}

/* Estilos para los enlaces de texto */
.login-container p.mt-3 {
    margin-top: 20px;
    text-align: center;
    color: #777;
}

.login-container p.mt-3 a {
    color: #AF8C92; /* Color de marca para los enlaces */
    text-decoration: none;
    font-weight: bold;
}

.login-container p.mt-3 a:hover {
    text-decoration: underline;
}


/* Estilo para la segunda barra de navegación debajo de admin_list.php */

.admin-header-actions2 {
	display: flex;
    justify-content: center; /* Esto centra los elementos horizontalmente */
    gap: 15px; /* Espacio entre los botones */
    padding: 20px;
    background-color: #f8f9fa; /* Fondo ligero para la barra de navegación */
    border-bottom: 1px solid #e9ecef;
	margin-top: -18px; 
    
}

.admin2-nav-btn{
	padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    background-color:#AF8C92; /**/
    transition: background-color 0.2s ease;
	border: 1px solid #584649; 
	
}

.admin1-nav-btn{
	padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    background-color:#2080D0; /**/
    transition: background-color 0.2s ease;
	border: 1px solid white; 
}

.admin3-nav-btn{
	padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    background-color:#40A040; /**/
    transition: background-color 0.2s ease;
	border: 1px solid #205020; 
}


.admin3-nav-btn:hover {
    color: white;
    background-color: #205020;
}

.admin2-nav-btn:hover {
    color: white;
    background-color: #83696E;
}
	
/* Estilos para la página de moderación de comentarios */

.card-comentario {
    background-color: #EAF4FC; /* Fondo azul claro para diferenciar cada comentario */
    border: 1px solid #B7D4F3;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card-comentario p {
    margin: 0 0 10px 0;
    line-height: 1.5;
	word-wrap: break-word; /* Para navegadores antiguos */
    overflow-wrap: break-word; /* Estándar actual */
}

.comentario-fecha {
    font-size: 0.9em;
    color: #6c757d;
    text-align: right;
    margin-top: 10px;
}

/*------------------------------------------------------------------------------------------- */
/*Estilo para los precios */
/*------------------------------------------------------------------------------------------- */
/*------------------------------------------------------------------------------------------- */
/* Estilos para los bloques de tratamientos (precios, duración, agendar) */
/*------------------------------------------------------------------------------------------- */

/* Ajustes de diseño para el bloque general de cada servicio */
.massage-type-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Contenedor principal de los detalles de servicio */
.service-details {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    margin-top: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    gap: 5px; /* Espacio entre los elementos del contenedor */
}

/* Estilos para el texto de precio y duración */
.service-details .service-price,
.service-details .service-duration {
    text-align: center;
    margin: 0;
    line-height: 1.2;
}


 /* Arreglando el asunto del margin y padding en precio y duración en la página de faciales. */
.faciales-content .service-details p {
margin: -3px; 
}

/*
* Estilo para el botón "Agendar"
*/
.agendar-btn {
    display: inline-block;
    background-color: #AF8C92;
    color: #ffffff;
    padding: 4px 12px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #AF8C92;
    transition: background-color 0.3s ease;
    margin-top: 5px; /* Pequeño margen superior para separarlo de la duración */
}

.agendar-btn:hover {
    background-color: #9C7C83;
    border-color: #9C7C83;
}



/*Estilos para el menú desplegable de agendar-cita  */ 

/* =======================================
   Estilos para los menús desplegables personalizados
   ======================================= */
.custom-select-container {
    margin-bottom: 15px;
    position: relative;
    width: 100%;
}

.custom-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    font-size: 16px;
}

.custom-select::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 12px;
    color: #555;
}

.custom-select.active::after {
    content: '▲';
}

.options-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 100;
}

.options-list.active {
    display: block;
}

.options-list .option-item {
    padding: 10px;
    cursor: pointer;
}

.options-list .option-item:hover {
    background-color: #f0f0f0;
}

.custom-select-container.disabled .custom-select {
    background-color: #f5f5f5;
    cursor: not-allowed;
    color: #aaa;
}

.custom-select-container.disabled .custom-select::after {
    color: #aaa;
}


/* Estilo del contenedor para centrar y estilizar */
.back-link-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Estilo base del enlace */
.back-link {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF; /* Texto blanco para contrastar */
    background-color: #AF8C92;
    border: 1px solid #AF8C92;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Efecto al pasar el cursor (hover) */
.back-link:hover {
    background-color: #9A777E; /* Un tono un poco más oscuro */
    border-color: #9A777E;
    color: #F8F8F8;
    transform: translateY(-2px); /* Un ligero efecto de elevación */
}

/* Efecto al hacer clic (active) */
.back-link:active {
    background-color: #85616A; /* Un tono aún más oscuro para dar la sensación de "presionado" */
    border-color: #85616A;
    transform: translateY(0);
}


/* Cambios para pantallas pequeñas (hasta 768px de ancho) */
@media (max-width: 344px) {
    /* Ajustes para la cabecera principal de index.html */
    .cabeceraindex {
        height: auto;
        padding-bottom: 2px;
		height: 230px; 
    }
	
.subtitulo{
	font-family: "josefin-sans", "jost", sans-serif;
    font-size: 5vw;
	margin-top: -5px; 
   
}


.agendar-cita-link{
	margin-bottom: -6px; 
}

.blog-link{
	margin-bottom: -6px; 
}

 svg{
	width: 16vw;
    margin-top: -16px; 
	
}
    
    /* Ajustes para el contenedor de título y mariposa de index.html */
    .header-container {
        flex-direction: column-reverse;
        text-align: center;
        padding: 0px;
    }

    .title-group {
        margin-right: 0;
        margin-bottom: 0px;
    }
	
	
    svg {
        width: 15vw;
        margin-bottom: 5px;
    }

    /* Corrección para el enlace "Agendar cita" en móviles de index.html */
    .blog-cabecera .blog-link {
        margin-bottom: -7px; 
    }
}


/* Media Querie para pantallas de 320 x 533 para los links de la cabecera del blog  */

@media (max-width: 320px) and (orientation: portrait) {
    .blog-link {
        /* Estilos para pantallas de hasta 533px de ancho en modo vertical */
		font-size: 12px;
    }
    
    .agendar-cita-link {
        /* Estilos para las mismas condiciones */
		font-size: 12px; 
		
    }

}



/* ===== BOTONES ADMIN ===== */
.admin-article-actions a {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
  color: #fff !important; /* fuerza color blanco */
  
}

/* Editar */
.admin-article-actions a.btn-warning {
  background-color: #f0ad4e;
}
.admin-article-actions a.btn-warning:hover {
  background-color: #ec971f;
  transform: translateY(-2px);
}

/* Eliminar */
.admin-article-actions a.btn-danger {
  background-color: #d9534f;
}
.admin-article-actions a.btn-danger:hover {
  background-color: #c9302c;
  transform: translateY(-2px);
}

.admin-article-actions{
	text-align: center; 
}










/* Contenido de artículos */
.article-detail-content article {
  /* font-family: 'Jost', sans-serif; */
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  display: flow-root;
}

/* Encabezados 
.article-detail-content article h1,
.article-detail-content article h2,
.article-detail-content article h3,
.article-detail-content article h4,
.article-detail-content article h5,
.article-detail-content article h6 {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  margin: 1em 0 0.5em;
} */

/* Párrafos 
.article-detail-content article p {
  margin: 0 0 1em;
} */ 






/* Listas */
.article-detail-content article ul,
.article-detail-content article ol {
  margin: 1em 0 1em 2em;
  padding: 0;

}

/* Ítems de lista */
.article-detail-content article li {
  margin-bottom: 0.5em;
}



/* Videos dentro del contenido */
.article-detail-content article iframe {
  display: block;
  margin: 20px auto;
  max-width: 100%;  /* igual, responsivo */
}

/* Clases de alineación de Quill */
.article-detail-content article .ql-align-center {
  text-align: center;
}
.article-detail-content article .ql-align-right {
  text-align: right;
}
.article-detail-content article .ql-align-justify {
  text-align: justify;
}


/* ============================
   Fuentes de Quill personalizadas
   ============================ */

/* Sans-serif */
.ql-font-roboto {
  font-family: 'Roboto', sans-serif;
}

.ql-font-open-sans {
  font-family: 'Open Sans', sans-serif;
}

.ql-font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.ql-font-lato {
  font-family: 'Lato', sans-serif;
}

.ql-font-nunito {
  font-family: 'Nunito', sans-serif;
}

/* Serif */
.ql-font-lora {
  font-family: 'Lora', serif;
}

.ql-font-castoro {
  font-family: 'Castoro', serif;
}

.ql-font-libre-baskerville {
  font-family: 'Libre Baskerville', serif;
}

.ql-font-playfair-display {
  font-family: 'Playfair Display', serif;
}

.ql-font-merriweather {
  font-family: 'Merriweather', serif;
}





/* Segunda opción de barra de compartir */
/* Barra de compartir */
.share-bar {
  display: flex;
  flex-direction: column;   /* coloca "Compartir en:" arriba y los iconos abajo */
  align-items: center;      /* centrado horizontal */
  margin: 30px 0;
  gap: 10px; /* espacio entre el texto y los iconos */
  margin-bottom: 30px; 
}

/* Texto "Compartir en:" */
.share-bar::before {
  content: "Compartir en:";
  font-weight: 600;
  color: #444;
  font-size: 16px;
  margin-bottom: 10px;
}

/* Contenedor de los iconos */
.share-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Botones base */
.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  border: none;
  cursor: pointer;
}

/* Hover efecto */
.share-btn:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Colores de cada red */
.share-btn.facebook { background: #3b5998; }
.share-btn.twitter { background: #000; }
.share-btn.whatsapp { background: #25d366; }
.share-btn.linkedin { background: #0077b5; }
.share-btn.instagram { 
  background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, #fdf497 5%, #fd5949 45%, 
    #d6249f 60%, #285AEB 90%);
}
.share-btn.copy { background: #6c757d; } /* gris neutro */



/* ============================================================= */
/* == CORRECCIÓN DEFINITIVA PARA ALINEACIÓN DE IMÁGENES QUILL == */
/* ============================================================= */

/* Anulamos el centrado forzado SÓLO para imágenes alineadas a izquierda o derecha */
.article-detail-content article .ql-align-left,
.article-detail-content article .ql-align-right {
    text-align: inherit; /* Hereda la alineación especificada */
}

.article-detail-content article .ql-align-left img,
.article-detail-content article .ql-align-right img {
    display: inline-block; /* Permite que el texto fluya alrededor */
    margin: 0; /* Reinicia el margen que forzaba el centrado */
}

/* Opcional pero recomendado: Añade espacio para que el texto no se pegue a la imagen */
.article-detail-content article .ql-align-left img {
    margin-right: 1.5em; /* Espacio a la derecha de la imagen */
    margin-bottom: 1em;
}

.article-detail-content article .ql-align-right img {
    margin-left: 1.5em; /* Espacio a la izquierda de la imagen */
    margin-bottom: 1em;
}

/* Mantenemos la regla para imágenes centradas para que sigan funcionando */
.article-detail-content article .ql-align-center {
  text-align: center;
}


/* --- VIDEOS --- */
/* Anulamos el centrado forzado SÓLO para videos (iframes) alineados */
.article-detail-content article .ql-align-left iframe,
.article-detail-content article .ql-align-right iframe {
    margin: 0; /* Esto es suficiente para anular el 'margin: auto' */
}

/* Espaciado para que el texto no se pegue al video */
.article-detail-content article .ql-align-left iframe {
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.article-detail-content article .ql-align-right iframe {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

/* --- REGLAS GENERALES DE QUILL --- */
/* Mantenemos la regla para elementos centrados para que sigan funcionando */
.article-detail-content article .ql-align-center {
  text-align: center;
}

.article-detail-content article .ql-align-justify {
  text-align: justify;
}





/* Listas alineadas a la izquierda (normal) */
.article-detail-content li.ql-align-left {
  text-align: left;
  list-style-position: outside;
}

/* Listas centradas */
.article-detail-content li.ql-align-center {
  text-align: center;
  list-style-position: inside; /* Hace que el número/viñeta se meta dentro y se centre */
}

/* Listas alineadas a la derecha */
.article-detail-content li.ql-align-right {
  text-align: right;
  list-style-position: inside;
}

/* No acumular padding por nivel */
.replies {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* Por claridad, el li a nivel 1 (top-level) no lleva margen extra */
.comments-list > li.comment-card { margin-left: 0; }

/* Nivel 1 de respuesta (hijo directo de un comentario top-level) */
.comments-list > li.comment-card > ul.replies > li.comment-card.reply {
    margin-left: 20px;
}

/* Nivel 2 de respuesta */
.comments-list ul.replies ul.replies > li.comment-card.reply {
    margin-left: 40px;
}

/* Nivel 3 O MÁS → tope a 60px */
.comments-list ul.replies ul.replies ul.replies li.comment-card.reply {
    margin-left: 60px !important;
}

/* Opcional: en móviles, aplanar (todxs alineados) para máxima legibilidad */
@media (max-width: 600px) {
    .comments-list > li.comment-card > ul.replies > li.comment-card.reply,
    .comments-list ul.replies ul.replies > li.comment-card.reply,
    .comments-list ul.replies ul.replies ul.replies li.comment-card.reply {
        margin-left: 0 !important;
        border-left: 3px solid #e0e0e0;
        padding-left: 10px;
    }
}


/* Estilo para el subtítulo y la lista de beneficios */
        .benefits-section h3 {
            margin-top: 20px;
            margin-bottom: 10px;
            color: #333;
            font-family: 'Jost', sans-serif;
            font-size: 1.1em;
        }
        .benefits-section ul {
    display: inline-block; /* <-- ESTA ES LA LÍNEA CLAVE */
    text-align: left;     /* <-- Mantenemos esta para el texto interno */

    /* El resto de estilos no cambian */
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
    color: #555;
}

.benefits-section li {
            margin-bottom: 5px;
}



/* --- Estilos Generales del Flatpickr Widget --- */
.flatpickr-calendar {
    font-family: 'Arial', sans-serif; /* O la fuente de tu marca */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra más suave */
    border-radius: 8px; /* Bordes redondeados para un look de spa */
    border: 1px solid #e0e0e0; /* Borde sutil */
    background: #ffffff; /* Fondo blanco o un color suave */
    color: #555; /* Color de texto general */
}

/* --- Estilos para el Selector de Hora --- */
.flatpickr-time {
    padding: 10px 0;
    border-top: 1px solid #eee; /* Separador */
    display: flex; /* Para alinear los elementos */
    justify-content: center; /* Centrar horas, minutos, AM/PM */
    align-items: center;
}

.flatpickr-time .numInputWrapper {
    flex: 1; /* Para que cada input ocupe el mismo espacio */
    margin: 0 5px;
    position: relative;
    height: 30px; /* Altura de los selectores */
}

.flatpickr-time .numInput {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.1em;
    text-align: center;
    background-color: #E2DFE0; /*  */
    color: #333;
    -moz-appearance: textfield; /* Para ocultar flechas en Firefox */
}

/* Ocultar las flechas de los input type number en navegadores webkit (Chrome, Safari) */
.flatpickr-time .numInput::-webkit-outer-spin-button,
.flatpickr-time .numInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.flatpickr-time .flatpickr-am-pm {
    height: 30px; /* Igual que los numInput */
    line-height: 30px;
    width: 50px; /* Ancho fijo para AM/PM */
    background-color:#C4BFC0; /* Color de acento suave */
    color: #333;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px; /* Espacio entre el minuto y AM/PM */
    border: none;
    text-align: center;
    transition: background-color 0.2s ease;
}

.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm.active {
    background-color: #aed581; /* Color de acento más fuerte al pasar el ratón o activo */
    color: #333;
}

/* Ajustes para el separador entre hora y minuto */
.flatpickr-time .flatpickr-time-separator {
    color: #555;
    font-size: 1.1em;
    margin: 0 3px;
    line-height: 30px; /* Alineado con los inputs */
}

/* Asegurarse de que el input tenga el cursor de texto normal al escribir */
.flatpickr-input[readonly] {
    cursor: pointer;
}

/* Si quieres un estilo diferente cuando está deshabilitado */
.flatpickr-input[disabled] {
    background-color: #eee;
    cursor: not-allowed;
}



/*  Estilos para el contenedor principal de la navegación */ 
.admin-header-actions {
    display: flex; /* Habilita Flexbox para un diseño flexible */
    justify-content: center; /* Empuja el contenedor de enlaces a un lado y el botón de cerrar sesión al otro */
    align-items: center; /* Alinea los elementos verticalmente al centro */
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea si no hay suficiente espacio */
    gap: 10px; /* Agrega un espacio uniforme entre todos los enlaces */
}

/* Estilos para el contenedor que agrupa los enlaces principales */
.admin-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1; /* Permite que este contenedor ocupe todo el espacio disponible */
	font-weight: 500;   /* Opción 2: Usar un valor numérico */
}

/* Asegura que los botones se adapten al tamaño de la pantalla */
.admin1-nav-btn,
.admin-nav-btn,
.admin2-nav-btn,
.btn-danger-nav {
  
    text-align: center; /* Centra el texto en los botones */
    min-width: 150px; /* Establece un ancho mínimo para que no se vean demasiado pequeños */
	
}

.admin2-nav-btn{
	background-color: #00BF00; 
}

.admin2-nav-btn:hover{
	background-color: #008F00; 
}

.admin6-nav-btn{
	padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.2s ease; 
	background-color: #806000;
	text-align: center; 
	
}

.admin6-nav-btn:hover{
	background-color: #FFC000;
	color: #fff;	 
	
}

.admin7-nav-btn{
	padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.2s ease; 
	background-color: #804080; 
}

.admin7-nav-btn:hover{
	background-color: #BF00BF;
	color: #fff;	 
}


.admin8-nav-btn{
	padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.2s ease; 
	background-color: #AC9583; 
	min-width: 150px;
    text-align: center; 	
}

.admin8-nav-btn:hover{
	background-color: #817062;
	color: #fff;	 
}

.admin0-nav-btn{
	padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.2s ease; 
	background-color: #2080D0; 
	min-width: 150px;
    text-align: center; 	
}

.admin0-nav-btn:hover{
	background-color: #58A0DC;
	color: #fff;	 
}



/* Media query para pantallas más pequeñas (recomendado para móviles) */
@media (max-width: 768px) {
    .admin-header-actions {
        flex-direction: column; /* Apila los elementos verticalmente en pantallas pequeñas */
        align-items: stretch; /* Estira los elementos para que ocupen todo el ancho */
    }

    .admin-nav-links {
        flex-direction: column;
    }
}

.admin-link,
.admin-link:visited,
.admin-link:hover,
.admin-link:active {
  color: #ffffff; /* Color blanco */
}