@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap');
/* --- ESTILOS GENERALES --- */
html, body {
  height: 100%;
  margin: 0;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
/* --- ¡NUEVO! --- */
/* Esta regla "empuja" el footer hacia abajo */
main {
                    /* evita colapso de márgenes */
  flex-direction: column;
}
h1, h2, h3 { color: #222; }
h2 { text-align: center; margin-top: 40px; margin-bottom: 30px; font-size: 1.8em; border-bottom: 2px solid #eee; padding-bottom: 10px; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: none; }
/* --- ESTILOS TOP BAR --- */
.top-bar { background-color:#005B6D; padding: 8px 0; color: #f1f1f1; border-bottom: solid 1px #ddd;}
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-bar .logo-container img { height: 70px; width: auto; vertical-align: middle; object-fit: cover; /* Evita que la imagen se deforme */
    vertical-align: middle;
    border-radius: 50%; /* ¡Esencial para el borde circular! */
    /* Preparamos el borde: 1px transparente para que no "salte" al hacer hover */
    border: 1px solid transparent;
    /* Transición suave para los efectos */
    transition: border-color 0.4s ease, filter 0.4s ease;}
/* Efectos al pasar el ratón (hover) o al enfocar (focus) */
.top-bar .logo-container img:hover,
.top-bar .logo-container img:focus {
       /* 2. El resplandor exterior (glow) */
    /* Usamos drop-shadow para que siga la forma circular del PNG */
    filter: drop-shadow(0 0 6px rgba(233, 233, 233, 0.7)); /* (0 0 6px = sin offset, 6px de desenfoque, color rojo al 70% opacidad) */
    cursor: pointer; /* Opcional: indica que es clicable */
}

.top-bar .contact-info { display: flex; align-items: center; }
.top-bar .contact-info a { color: #ddd; text-decoration: none; margin-left: 15px;  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease; }
.top-bar .contact-info a:hover { text-decoration: none; color: #fff; }
.top-bar .contact-info a i.fa-whatsapp { font-size: 1.6em; color: #fff;  transition: transform 0.4s cubic-bezier(0.25, 1.25, 0.5, 1);   margin-top: 10px;
  margin-bottom: 10px;  
}
.top-bar .contact-info a i.fa-whatsapp:hover { transform: scale(1.3); color: #25D366;}
.top-bar .contact-info a i.fa-envelope { font-size: 1.4em; color: #ddd; transition: color 0.4s, transform 0.4s; vertical-align: middle; }
.top-bar .contact-info a:hover i.fa-envelope { color: white; transform: scale(1.4); }
/* Botón Registrarse en Top Bar */
a.top-bar-register-btn { color: #aaa; 
    font-size: 0.9em;
    padding: 3px 8px;
    border: 1px solid #aaa;
    border-radius: 40px;
    background-color: transparent;
   
}
a.top-bar-register-btn i { margin-right: 5px;  background-color: #005B6D!important;
    color: #aaa;  padding:7px 3px; margin: -4px -1px;  transition: transform 0.4s cubic-bezier(0.25, 1.25, 0.5, 1); border-radius: 50%;}
a.top-bar-register-btn:hover {
    background-color: transparent;
    color: #fff!important;
}
a.top-bar-register-btn:hover i {
   color: #fff!important; background-color: none!important;  transform: scale(1.15);  padding:4px 2px;
}
/* --- ESTILOS NAVBAR --- */
.navbar { background-color:#1A3A43; position: relative; z-index: 50; padding-top: 3px; border-bottom: 3px solid #f33; }
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
.navbar .nav-links { display: flex; align-items: center; padding-top: 3px; padding-bottom: 3px;margin-left: 4px; margin-right: 4px;  }
/* Estilo común para links y botón dropdown */
.navbar a, .dropdown .dropbtn { 
    display: inline-block; color: white; text-align: center;
    padding: 10px 16px; text-decoration: none; line-height: normal; /* Altura reducida */
    vertical-align: middle; background-color: transparent; border: none;
    font-family: inherit; font-size: 1em; cursor: pointer;
}
.navbar a:hover, .dropdown:hover .dropbtn { background-color: none;   /* rojo 50% */; color: #FF0C37; border-radius:12px; }
/* Icono Casa (hereda tamaño de carrito) */


/* --- ESTILO ENLACE ADMIN EN NAVBAR --- */
/* --- ¡NUEVO! ESTILO ENLACE ADMIN (MOVIDO AL TOP-BAR) --- */
.top-bar .contact-info .admin-nav-link {
    /* Mismo tamaño que el botón "Registrarse" */
    font-size: 0.9em;
    padding: 4px 7px; 
    border-radius: 8px;
    font-weight: bold;
    
    /* Mismos colores que tenía */
    background-color: #c82333; 
    color: white;
    
    /* Mismos efectos */
    transition: background-color 0.2s, color 0.2s;
    
    /* Asegurar alineación de icono y texto */
    display: inline-flex;
    align-items: center;
}
.top-bar .contact-info .admin-nav-link:hover {
    background-color: red; /* Rojo más oscuro */
    color: white;
}
.top-bar .contact-info .admin-nav-link i {
    margin-right: 12px;
}
/* Dropdown */
.dropdown { display: inline-block; overflow: visible; position: relative; }
.dropdown-content { 
    display: block; 
    position: absolute; 
    background-color: #f9f9f9;
    min-width: 180px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 100; top: 100%; margin-top:6px; 
    left: 0; opacity: 0; 
    visibility: hidden; 
    transform: translateY(-10px); 
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s; 
/* --- ¡AÑADIDO! border-bottom-left-radius: 15px; --- */
    
    border-radius: 15px;
    overflow: hidden; /* Necesario para que los <a> internos respeten el redondeo */
}
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover { background-color: #eee; color:#005B6D; }
.dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }

/* Carrito */
.navbar a i.fa-cart-shopping { font-size: 1.3em; vertical-align: middle; margin-right: 5px; color: #ddd; transition: color 0.3s ease;  
  transition: transform 0.4s cubic-bezier(0.25, 1.25, 0.5, 1)}
.navbar a:hover i.fa-cart-shopping { color: #FF0C37;  transform: scale(1.30); background-color: transparent;}
/* Al pasar el ratón sobre el ENLACE <a> */
.navbar a:hover i.fa-house.fa-cart-shopping {
    color: #FF0C37; /* Asegura que el icono se ponga negro (igual que el texto) */  transform: scale(1.30); background-color: transparent;
}

/* Al hacer CLIC sobre el ENLACE <a> */
.navbar a:active i.fa-house.fa-cart-shopping {
    color: #0056b3; /* (Opcional) Un color diferente al hacer clic */
    transform: scale(0.9); /* Efecto de "pulsado" */
}
.cart-count {   display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background-color: springgreen;
  color: #000;
  font-size: 1.1rem;
  font-weight: 700; margin-left:-14px; margin-top: -4px; 
  line-height: 1;
  vertical-align: super; }



/* --- ESTILOS AVATAR HEADER (CHECKMARK CORREGIDO) --- */
.user-nav { display: flex; align-items: center; }
.navbar .user-nav a { padding: 0 10px; line-height: 40px; display: inline-block; margin-left: 2px; }
.navbar .user-nav a:hover { background-color: transparent!important;}
.user-avatar-container { display: flex; align-items: center; position: relative; padding: 0; margin-left: 15px; height: 40px; line-height: 40px; cursor: pointer;}
.user-avatar-container .avatar-img, .user-avatar-container .avatar-default-placeholder { width: 35px; height: 35px; border-radius: 50%; border: 1px solid #ccc; display: block; object-fit: cover; }
.user-avatar-container .avatar-default-placeholder { background-color: #ccc; color: #666; font-size: 1.2em; display: flex; justify-content: center; align-items: center; border-color: #aaa; transition: transform 0.4s ease, opacity 0.4s ease;}

.user-avatar-container:hover .avatar-default-placeholder { background-color: #333; color: #ddd; font-size: 1.4em; display: flex; justify-content: center; align-items: center; border-color: #aaa; }

/* Checkmark (Posición Final) */
.user-avatar-container .logged-in-checkmark {
    position: absolute;
    bottom: 3px; /* Ajustado */
    right: 4px;  /* Ajustado */
    background-color: #28a745; color: white; border-radius: 50%;
    width: 17px; height: 17px; display: flex; justify-content: center;
    align-items: center; font-size: 0.7em; border: 2px solid white;
    box-sizing: border-box; z-index: 2;
}
.navbar .user-nav a:not(.user-avatar-container) { line-height: 40px; padding: 0 16px; }

/* --- ESTILOS HERO BANNER --- */
.hero-banner { width: 100%; height: 40vh; min-height: 250px; background-color: #444; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; box-sizing: border-box; color: white; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); position: relative; z-index: 1; position: relative; /* FUNDAMENTAL para superponer capas */
    overflow: hidden; /* Evita que los orbes se salgan */}
/* --- ¡NUEVO! Capa de sombra para legibilidad --- */
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Esta es la magia: 30% de negro */
    background-color: rgba(0, 0, 0, 0.3); 
    
    /* Se sitúa en la capa 4 (debajo del texto, encima de todo lo demás) */
    z-index: 4; 
}

.hero-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Mismos estilos de fondo que el banner principal */
    background-size: cover;
    background-position: center;
    
    /* Usará una variable CSS que JavaScript definirá */
    background-image: var(--hero-next-image); 
    
    opacity: 0; /* Oculto por defecto */
    
    /* ¡Esta es la animación suave! (1.5 segundos) */
    transition: opacity 1.5s ease-in-out; 
    
    /* Se asegura de estar detrás de los puntos (z-index: 2) y el texto (z-index: 3) */
    z-index: 1; 
}

/* ¡NUEVO! Clase que JavaScript añadirá para activar el fundido */
.hero-banner.is-fading::after {
    opacity: 1; 
    transition: opacity 0.8s ease-in-out; /* <-- DE 1.5s A 0.8s */
}
.hero-banner h1, .hero-banner p { color: white !important; margin: 0; }
.hero-banner h1 { margin-bottom: 10px; }
/* El texto debe estar por encima de las animaciones */
.hero-banner h1, .hero-banner p {
    position: relative; /* Permite que z-index funcione */
z-index: 5; /* <-- CAMBIADO DE 4 A 5 */
}

.hero-banner h1 { 
    font-family: 'Mulish', sans-serif; /* <-- CAMBIADO */
    font-weight: 500;                 /* <-- AÑADIDO (Para que use la versión 'Bold') */
    font-size: 2.8em; 
    margin-bottom: 10px; 
}
.hero-banner p { 
    font-family: 'Mulish', sans-serif; /* <-- CAMBIADO */
    font-weight: 400;                 /* <-- AÑADIDO (Para que use la versión 'Regular') */
    font-size: 1.3em; 
}


.hero-banner .content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}
/* --- ESTILO PARA SECCIONES DE PRODUCTOS EN INDEX --- */
.product-section {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 20px 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Título H2 dentro de la sección */
.product-section h2.h2_titulo {
    text-align: left;
    border-bottom: 1px solid #eee;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 15px;
    font-size: 1.6em;
    /* Quitamos el borde inferior global si interfiere */
    border-bottom-style: solid; 
}

/* Ocultar el HR de index.php */
hr.separador {
    display: none;
}
hr.separador_2 {
    border:solid #ddd 1px; width: 70%; margin-top:15px; margin-bottom: 15px;
}
/* --- ESTILOS GRID PRODUCTOS --- */
.escaparate { display: grid; gap: 25px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 500px) { .escaparate { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .escaparate { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .escaparate { grid-template-columns: repeat(5, 1fr); } }

/* --- ESTILOS FICHA PRODUCTO (Con Zoom Interno) --- */
.producto-card { border: 1px solid #ddd; border-radius: 15px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; display: flex; flex-direction: column; }
.producto-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }
.producto-card > a:first-child { display: block; margin: 7px 7px 0; border-radius: 15px; overflow: hidden; height: 200px; position: relative; }
.producto-card > a:first-child img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; margin: 0; border-radius: 0; }
.producto-card > a:first-child:hover img { transform: scale(1.1); }
/* --- ESTILOS FICHA PRODUCTO (Título Corregido) --- */

.producto-card h3 {
    font-size: 1.1em;
    margin: 10px 15px 5px; /* 1. MODIFICADO: 10px de margen superior (antes 15px) */
    color: #333;
    text-align: center;

    /* --- 2. MODIFICADO: Lógica para 2 líneas de altura --- */
    line-height: 1.3em; /* Establece la altura de una línea de texto */
    height: 2.6em; /* 1.3em * 2 = 2.6em (fuerza la altura de 2 líneas) */
    overflow: hidden; /* Oculta cualquier texto que se pase de las 2 líneas */
    text-overflow: ellipsis; /* Pone "..." si el texto se corta */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limita el texto a 2 líneas */
    -webkit-box-orient: vertical;
    white-space: normal; /* Permite que el texto salte a la segunda línea */
}

.producto-card p.card-price { font-size: 1.2em; font-weight: bold; color: red; margin: 0 15px 10px; text-align: center; }
.producto-card p.card-stock-info { color: orange; font-weight: bold; font-size: 0.9em; margin: -5px 15px 10px; text-align: center; }
.producto-card .card-description { font-size: 0.85em; color: #666; margin: 0 15px 15px; height: 3.6em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex-grow: 1; text-align: center; }
.producto-card .card-actions { padding: 0 15px 15px; margin-top: auto; text-align: center; }
.producto-card .card-actions a { display: inline-block; padding: 8px 15px; font-size: 0.9em; font-weight: bold; border-radius: 5px; margin: 5px 3px 0; transition: background-color 0.2s, transform 0.1s; text-decoration: none; border: none !important; cursor: pointer; outline: none; }
.card-actions a:hover { transform: scale(1.03); text-decoration: none; }
.card-actions a:active { transform: scale(0.98); }
.card-actions a:nth-child(1) { background-color: #6c757d; color: white; }
.card-actions a:nth-child(1):hover { background-color: #5a6268; }
.card-actions a:nth-child(2) { background-color: #007bff; color: white; }
.card-actions a:nth-child(2):hover { background-color: #0056b3; }

.parrafo_producto_detalle {padding: 15px; background-color: #f0f0f0; border: 1px solid #ccc; color: #888; text-align: center; font-weight: bold; border-radius: 5px;}
.parrafo_descripcion_detalle a {color: grey; text-decoration: none;}
.parrafo_descripcion_detalle a:hover {color: #007bff; text-decoration: none;}
/* --- ESTILOS FORMULARIOS Y MODALES --- */
.form-page-container { max-width: 500px; margin: 40px auto; padding: 20px 30px; background-color: #fefefe; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.form-page-container h1 { text-align: center; margin-top: 0; }
.form-page-container form div { margin-bottom: 15px; }
.form-page-container form label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-page-container form input[type="email"], .form-page-container form input[type="password"], .form-page-container form input[type="text"], .form-page-container form input[type="number"], .form-page-container form textarea, .form-page-container form select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px; }
.form-page-container form button { background-color: #5469d4; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px; }
.form-page-container .form-message { padding: 10px; border-radius: 4px; margin-bottom: 15px; font-size: 0.9em; }
.form-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.form-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.modal-overlay {
    display: none;
    position: fixed; /* ¡Importante! Fijo al viewport (pantalla) */
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /* Cubre toda la pantalla */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo 80% opaco */
    overflow-y: auto; /* Permite scroll SI el modal es muy alto (ej. en horizontal) */
    cursor: pointer; /* Indica que se puede clicar para cerrar (gestionado por JS) */
}

.modal-close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 5px; right: 15px; cursor: pointer; }
.modal-close-btn:hover, .modal-close-btn:focus { color: black; text-decoration: none; }
.modal-content form div { margin-bottom: 15px; }
.modal-content form label { display: block; margin-bottom: 5px; font-weight: bold; }
.modal-content form input[type="email"], .modal-content form input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px; }
.modal-content form button { background-color: #5469d4; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px; }
.modal-content form button:hover { background-color: #4355a9; }
#login-error-msg { color: red; font-size: 0.9em; display: none; margin-bottom: 10px; text-align: center;}

/* --- ¡INICIO BLOQUE MODAL CORREGIDO! --- */
.modal-overlay {
    display: none;
    position: fixed; /* Fijo a la pantalla */
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /* Cubre toda la pantalla */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo 80% opaco */
    overflow-y: auto; /* Scroll si contenido es muy alto */
    cursor: pointer; /* Para cerrar al clicar fuera */
}
.modal-content,
.contact-modal-content {
    background-color: #fefefe;
    position: relative; /* Posición relativa al overlay */
    margin: 15vh auto; /* 15% desde arriba/abajo, y centrado horizontal */
    padding: 20px 30px;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%; /* Ancho base (para móviles) */
    max-width: 400px; /* Ancho máximo para login */
    box-sizing: border-box;
    animation: animatetop-v2 0.4s;
    cursor: default; /* Cursor normal */
}
.modal-content.modal_content_extra,
.contact-modal-content {
    max-width: 450px; /* Para cesta y contacto */
    text-align: center; 
}
/* Animación (ajustada para el nuevo 'margin') */
@keyframes animatetop-v2 {
    from { margin-top: 10vh; opacity: 0 }
    to { margin-top: 15vh; opacity: 1 }
}
/* Media Query para modales en móvil */
@media (max-width: 600px) {
    .modal-content, .contact-modal-content {
        width: 90%;
        max-width: 90%; /* Asegura que no se pase */
        padding: 15px 20px;
        margin: 10vh auto; /* Menos margen en pantallas pequeñas */
    }
    /* Animación para móvil */
    @keyframes animatetop-v2-mobile { /* Nombre diferente para evitar conflictos */
        from { margin-top: 5vh; opacity: 0 }
        to { margin-top: 10vh; opacity: 1 }
    }
    .modal-content, .contact-modal-content {
         animation: animatetop-v2-mobile 0.4s; /* Aplicar animación móvil */
    }
}
.modal-close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 5px; right: 15px; cursor: pointer; }
.modal-close-btn:hover, .modal-close-btn:focus { color: black; text-decoration: none; }
.modal-content form div { margin-bottom: 15px; }
.modal-content form label { display: block; margin-bottom: 5px; font-weight: bold; }
.modal-content form input[type="email"], .modal-content form input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px; }
.modal-content form button { background-color: #5469d4; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px; }
.modal-content form button:hover { background-color: #4355a9; }
/* --- FIN BLOQUE MODAL CORREGIDO --- */

.contact-modal-content h2 { margin-top: 0; }
/* ... (resto de estilos: contact-item, icon-copy-button, etc.) ... */
.contact-modal-content { background-color: #fefefe; padding: 25px 35px; border: 1px solid #ddd; width: 90%; max-width: 450px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: animatetop 0.4s;}
.contact-modal-content h2 { margin-top: 0; }
/* --- ESTILOS PÁGINA CONTACTO --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas de igual tamaño */
    gap: 40px; /* Espacio entre columnas */
    align-items: start; /* Alinear arriba */
}
.contact-details .contact-item {
    margin-bottom: 15px; /* Espacio entre items de contacto */
}
/* Hacer responsivo en móviles (una sola columna) */

.contact-item { 
    margin: 10px 0;
    padding: 10px; /* Un poco más de padding */
    background-color: #f0f0f0;
    border-radius: 5px;
    display: flex; height: fit-content; 
    justify-content: space-between;
    align-items: center; /* Centra el botón con el bloque de texto */
}
/* ¡NUEVO! Contenedor para el título y el texto */
.contact-item-info {
    display: flex;
    flex-direction: column; /* Apila el H4 y el SPAN */
    text-align: left;
    margin-right: 15px; /* Espacio antes del botón */
    flex-grow: 1; /* Ocupa el espacio */
    word-break: break-all; /* Para emails largos */
}

/* ¡NUEVO! Estilo para el H4 */
.contact-item-title {text-decoration: none; 
    margin: 0 0 3px 0; /* Sin margen superior, 4px abajo */
    font-size: 0.9em; /* Tamaño normal */
    font-weight: bold;
    color: #184CE8; /* Un gris oscuro */
    padding: 0; /* Resetea padding */
    border: none; /* Resetea borde */
}
/* Ajuste al texto de contacto */
.contact-text {text-decoration: none; 
    font-size: 1em;
    flex-grow: 0; /* Ya no necesita crecer */
    margin-right: 0; /* Ya no necesita margen */
    text-align: left;}

.icon-copy-button { background-color: transparent; border: 1px solid #ccc; color: #5469d4; padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: 1.1em; line-height: 1; transition: background-color 0.2s, color 0.2s; margin-left: 10px; }
.icon-copy-button:hover { background-color: #eef; color: #334b99; border-color: #aaa; }
.icon-copy-button i { margin: 0; padding: 0; }
.icon-copy-button i:hover { color:white; }
.icon-copy-button:hover i{ color:white;  }
#copy-feedback { color: green; font-size: 0.9em; height: 1.2em; margin-top: 15px; font-weight: bold; }
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Una columna */
        gap: 10px;
    }
    .contact-details {
        margin-top: 20px; /* Espacio extra en móvil */
    }
   
 
    
}
.modal-content.modal_content_extra {
    max-width: 450px; /* Para cesta y contacto */
    text-align: center;
}
/* Animación (ajustada para el nuevo 'margin') */
@keyframes animatetop-v2 {
    from { margin-top: 10vh; opacity: 0 }
    to { margin-top: 15vh; opacity: 1 }
}
@media (max-width: 600px) {
    .modal-content, .contact-modal-content { width: 90%; max-width: 90%; padding: 15px 20px; }
    .contact-item {  gap:2px; height: auto; }
    .contact-item-title, .contact-text {  display: flex;  flex-direction: column; /* Muestra los elementos en columna */gap:2px;  }
    .contact-text { margin-bottom: 4px; text-align: center; margin-right: 0; margin: 0.6vh auto; /* Menos margen en pantallas pequeñas */ text-decoration: none; }
    .contact-item-info {
        text-align: center; /* Centra el H4 y el Span en móvil */
        margin-right: 0;
        margin-bottom: 5px; /* Espacio antes del botón en móvil */
    }
    .icon-copy-button { width: 16%; margin-left: 0; padding: 9px; }
    .contact-text , .icon-copy-button { flex-direction: row; }
    /* Animación para móvil */
    @keyframes animatetop-v2-mobile { /* Nombre diferente para evitar conflictos */
        from { margin-top: 5vh; opacity: 0 }
        to { margin-top: 10vh; opacity: 1 }
    }
    .modal-content, .contact-modal-content {
         animation: animatetop-v2-mobile 0.4s; /* Aplicar animación móvil */
    }
}
/* --- ¡NUEVO! ESTILOS BARRA DE BÚSQUEDA --- */

/* El fondo oscuro (pantalla completa) */
#search-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro 70% */
    z-index: 1001; /* Encima de la navbar */
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: fadeIn 0.3s ease forwards; /* Animación de fundido */
}

/* Botón de cierre (X) */
/* --- #close-search-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    font-size: 40px;
    color: #aaa;
    font-weight: bold;
    cursor: pointer; /* ¡Cursor de mano! */
   /* transition: color 0.2s ease;
    z-index: 1002;  Encima del fondo */
} 
/* --- #close-search-btn:hover {
    color: white;
}

/* Contenedor del formulario (respeta 1200px) */
.search-modal-content {
    position: relative; display: flex;
    width: 100%;
    max-width: 1200px!important; /* ¡Respeta el ancho de 1200px! */
    margin: 0 auto;
    padding: 20px 15px; /* Coincide con el padding de .container */
    box-sizing: border-box;
    /* Animación de deslizamiento */
    animation: slideDown 0.4s ease-out 0.1s forwards;
    opacity: 0; /* Empezar invisible para la animación */
}

/* Formulario (input + botón) */
.search-modal-content form {    max-width: 1200px!important; /* ¡Respeta el ancho de 1200px! */

    display: flex; margin: 0 auto;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden; /* Para redondear el botón */
}

/* Campo de texto */
.search-modal-content input[type="search"] {
    flex-grow: 1; /* Ocupa todo el espacio */
    border: none;
    padding: 20px;
    font-size: 1.2em; /* Letra grande */
    color: #333;
    outline: none;
    /* Asegurarse de que hereda el font-size: 16px global */
    font-size: 16px !important;
}

/* Botón de búsqueda */
.search-modal-content button {
    border: none;
    background-color: #007bff; /* Azul (como tus botones) */
    color: white;
    padding: 0 25px;
    cursor: pointer;
    font-size: 1.3em;
    transition: background-color 0.2s ease;
}
.search-modal-content button:hover {
    background-color: #0056b3; /* Azul oscuro */
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* --- ESTILOS FOOTER --- */
footer {width: 100%; background-color: #1A3A43; color: #aaa; padding: 25px 0; text-align: center; font-size: 0.8em; margin-top: 140px; border-top: 3px solid #f33; bottom: 0; }
.footer-social-icons { margin-bottom: 20px; text-align: center; }
.footer-social-icons a { display: inline-block; color: #888; font-size: 1.5em; margin: 0 12px; transition: color 0.2s, transform 0.2s; text-decoration: none; }
.footer-social-icons a:hover { color: #fff; transform: scale(1.1); text-decoration: none; }
.footer-line-1 { margin-bottom: 10px; color: #aaa; }
.footer-line-2 a { color: #ccc; text-decoration: none; margin: 0 8px; display: inline-block; padding: 5px 0; }
.footer-line-2 a:hover { text-decoration: none; color: #fff; }

/* --- ESTILOS DE PÁGINAS ESPECIALES (CURSO, QUIZ, ETC.) --- */
/* (Aquí van los estilos que cortaste de curso_vista.php, quiz_view.php, etc.) */

/* Estilos de perfil.php */
.perfil-card { background: #fff; border: 1px solid #ddd; border-radius: 15px; padding: 25px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); margin-bottom: 30px; }
.perfil-card h2, .perfil-card h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; text-align: left; font-size: 1.5em; }
/* --- ¡NUEVO! Estilos Requisitos/FAQ en Detalle Producto --- */
.requisitos-lista {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
}
.requisitos-lista li {
    display: flex;
    align-items: center;
    font-size: 1.05em; /* Ligeramente más grande */
    margin-bottom: 12px;
    color: #333;
}
.requisito-check {
    color: #007bff; /* Azul */
    font-size: 1.2em; /* Icono más grande */
    margin-right: 12px;
    width: 20px; /* Espacio fijo para el icono */
}
.datos-avatar-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; }

/* --- ¡NUEVO! Estilos Tarjeta Instructor --- */
section.instructor-card { min-height: 140px;}
.instructor_hr {display: block; margin: 20px 0; border: none; border-top: 1px solid #eee;}
.instructor-card {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 20px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-top: 0;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.instructor-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Circular */
    object-fit: cover;
    border: 2px solid #ddd;
}
.instructor-info { 
    flex: 1;
}
.instructor-info h3, .instructor-info h4 {
    margin: 0 0 5px 0;
    text-align: left;
    border: none;
    padding: 0;
    font-size: 1.3em;
}
.instructor-info p {
    margin: 20px 10px; 
    font-size: 0.95em;
    color: #555;
    line-height: 1.3;
}
/* Responsividad para la tarjeta de instructor */
@media (max-width: 600px) {
    .instructor-card {
        flex-direction: column; /* Apilar en móvil */
        text-align: center;
    }
    .instructor-info h3, .instructor-info h4 {
        text-align: center;
    }
}

@media (max-width: 768px) { .datos-avatar-grid { grid-template-columns: 1fr; } .avatar-section { order: -1; margin-bottom: 30px;} }
.avatar-section img { display: block; margin: 0 auto 15px; }
.avatar-section label { cursor: pointer; }
.avatar-section input[type="file"] { display: block; margin: 10px auto; max-width: 280px; }
.perfil-card input[type="email"], .perfil-card input[type="text"], .perfil-card textarea { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; margin-bottom: 15px; }
.perfil-card label { display: block; margin-bottom: 5px; font-weight: bold; }
.perfil-card button, .perfil-card .btn { display: inline-block; padding: 10px 18px; font-size: 1em; border-radius: 5px; text-decoration: none; cursor: pointer; border: none; transition: background-color 0.2s; background-color: #007bff; color: white; }
.perfil-card button:hover, .perfil-card .btn:hover { background-color: #0056b3; }
.faq-item { border-bottom: 1px solid #eee; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; cursor: pointer; font-weight: bold; }
.faq-question:hover { color: #0056b3; }
.faq-answer { display: none; padding: 0 10px 15px; color: #555; }
.faq-toggle-icon { transition: transform 0.3s ease; }
.faq-item.active .faq-toggle-icon { transform: rotate(180deg); }

/* Estilos de curso_vista.php */
.vimeo-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin-bottom: 10px;}
.vimeo-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.leccion-lista { list-style: none; padding: 0; margin: 0; }
.leccion-item { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; background: #fff; }
.leccion-header { display: flex; align-items: center; padding: 15px 20px; cursor: pointer; transition: background-color 0.2s; }
.leccion-header:hover { background-color: #f5f5f5; }
.leccion-icono { font-size: 1.2em; margin-right: 15px; width: 25px; text-align: center; }
.leccion-header.visto .leccion-icono { color: green; }
.leccion-header.bloqueado .leccion-icono { color: #aaa; }
.leccion-header.actual .leccion-icono { color: #5469d4; }
.leccion-header.bloqueado { background: #f9f9f9; color: #999; cursor: not-allowed; }
.leccion-header.bloqueado:hover { background-color: #f9f9f9; }
.leccion-titulo { font-weight: bold; flex: 1; }
.leccion-contenido { display: none; padding: 20px; border-top: 1px solid #eee; }
.marcar-visto-btn { background-color: green; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; width: 100%; font-size: 16px; margin-top: 15px; }
.marcar-visto-btn:disabled { background-color: #ccc; cursor: default; }

/* Estilos de quiz_view.php */
.quiz-question { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.quiz-question p { font-weight: bold; margin-bottom: 10px; }
.quiz-answers label { display: block; margin-bottom: 8px; cursor: pointer; padding: 8px 12px; border-radius: 4px; border: 1px solid #eee; background-color: #fff;}
.quiz-answers input[type="radio"] { margin-right: 10px; vertical-align: middle; }
.quiz-answers label:hover { background-color: #f0f8ff; border-color: #cce4ff;}
.quiz-submit-btn { background-color: #28a745; color: white; padding: 12px 25px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; margin-top: 20px;}
.quiz-results { text-align: center; padding: 30px; border: 2px dashed #007bff; border-radius: 10px; background-color: #e9f5ff; margin-top: 20px;}
.quiz-results h2 { margin-top: 0; color: #0056b3; }
.quiz-results .score { font-size: 2.5em; font-weight: bold; color: green; margin: 15px 0; }
.quiz-results .fail { color: red; }
.quiz-error { color: red; background-color: #fdd; border: 1px solid red; padding: 15px; border-radius: 5px; margin-bottom: 20px; }

/* Estilos de pedido_item_detalle.php */
.galeria-producto { display: flex; flex-direction: column; max-width: 500px; }
.galeria-imagen-principal { width: 100%; height: 450px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; text-align: center; }
.galeria-imagen-principal img { width: 100%; height: 100%; object-fit: contain; }
.galeria-miniaturas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.galeria-miniaturas img { width: 80px; height: 80px; object-fit: cover; border: 2px solid #ddd; border-radius: 5px; cursor: pointer; transition: border-color 0.2s; }
.galeria-miniaturas img:hover { border-color: #555; }
.info-compra { background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 15px; border-radius: 8px; margin-top: 20px;}
.info-compra p { margin: 5px 0; }
.producto-detalle { display: flex; flex-wrap: wrap; gap: 30px; max-width: 1000px; margin: 80px auto 0; }

/* --- Clases CSS de Admin (basadas en tus estilos inline) --- */
.admin-list-table { width: 100%; border-collapse: collapse; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
.admin-list-table th { padding: 12px 15px; text-align: left; background-color: #f8f9fa; border-bottom: 2px solid #dee2e6; }
.admin-list-table td { padding: 10px 15px; border-bottom: 1px solid #eee; vertical-align: middle; }
.admin-list-table td.text-center { text-align: center; }
.admin-list-table td.text-right { text-align: right; white-space: nowrap; }
.admin-list-table img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; }
.admin-list-table .text-success { color: green; }
.admin-list-table .text-muted { color: gray; }
.admin-list-table .action-link-edit { color: #007bff; text-decoration: none; margin-right: 8px; }
.admin-list-table .action-link-toggle { color: #fd7e14; text-decoration: none; margin-right: 8px; }
.admin-list-table .action-link-quiz { color: #6f42c1; text-decoration: none; margin-right: 8px; }
.admin-list-table .action-link-delete { color: #dc3545; text-decoration: none; }
.btn { display: inline-block; padding: 10px 18px; font-size: 1em; border-radius: 5px; text-decoration: none; cursor: pointer; border: none; transition: background-color 0.2s; color: white; }
.btn-primary { background-color: #007bff; }
.btn-primary:hover { background-color: #0056b3; }
.dasboard_btn {width: 70%; text-align: left; padding: 15px;}
.btn-success { background-color: #28a745; }
.btn-success:hover { background-color: #218838; }
.btn-danger { background-color: #dc3545; }
.btn-danger:hover { background-color: #c82333; }
.btn-info { background-color: #17a2b8; }
.btn-info:hover { background-color: #117a8b; }
.btn-add-product { margin-bottom: 20px; background-color: green; }
.admin-video-form { background: #f8f9fa; border: 1px solid #dee2e6; padding: 15px; margin-bottom: 15px; border-radius: 5px; }
.admin-video-form-new { background: #e9f5ff; border: 1px solid #b8daff; padding: 15px; border-radius: 5px; }
.admin-video-grid { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 10px; align-items: end; margin-bottom: 10px; }
.admin-video-grid-simple { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } /* Para formularios más antiguos */

.stripe-button-container {margin-top: 10px; background-color: #5469d4; color: white; padding: 12px; border-radius: 5px; cursor: pointer;}
.paypal-button-container {margin-top: 10px;}
hr.separador{margin: 40px 0; border: none; border-top: 1px solid #eee;}
hr.modal_hr {margin: 25px 0; border: none; border-top: 1px solid #eee;}          
.pad8 {padding-top: 8px; }
.pad10 {padding: 10px;}
.pt20{padding-top: 20px; }	
.pb20 {padding-bottom: 20px;}

.mt0 {margin-top: 0;}
.mt1 {margin-top: 1px; }
.mt3 {margin-top: 3px;}
.mt5{margin-top: 5px;}
.mr8 {margin-right: 8px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25{margin-top: 25px;}

.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.w10 {width: 10%;}
.w20 {width: 20%;}
.w30 {width: 30%;}
.w40 {width: 40%;}
.w50 {width: 50%;}
.w60 {width: 60%;}
.w70 {width: 70%;}
.p15 {padding: 15px;}

.mb10 {margin-bottom: 10px;}
.mb15  {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb70 {margin-bottom: 70px;}
.mb80 {margin-bottom: 80px;}
.mb90 {margin-bottom: 90px;}

.br5 {border-radius: 5px;}
.br10 {border-radius: 10px;}
.br12 {border-radius: 12px;}
.br15 {border-radius: 15px;}
.b20  {border-radius: 20px;}
.br25 {border-radius: 25px;}

.hundred {width: 100%; }
.bold{font-weight:bold;}
.block {display:block;}
.fondo_claro2_producto {background-color: #f8f9fa;}
.borde_clarito {border: 1px solid #dee2e6;}
.border_box {box-sizing: border-box;}
.h2_titulo{text-align: left; border-bottom: none; margin-bottom: 20px;}
.white_bg{background-color: #f0f0f0;}
.izq{text-align: left;}
.der{text-align: right;}
.center{text-align: center;}
th.center{text-align: center;}
tr.white_bg{background-color: #f0f0f0;}
.izq{padding: 10px; text-align: left;}
th.izq {padding: 10px; text-align: left;}
.der{padding: 10px; text-align: right;}
th.der{padding: 10px; text-align: right;}
.center_th{padding: 10px; text-align: center;}
th.center_th{padding: 10px; text-align: center;}
.users_table_td{padding: 8px; border-bottom: 1px solid #ddd;}
td.users_table_td{padding: 8px; border-bottom: 1px solid #ddd;}
.text_center {text-align: center;}
td.text_center {text-align: center;}
.verde{color: green;}
span.verde{color: green;}
.naranja{color: orange;}
.naranja_2 {color: #fd7e14;}
span.naranja{color: orange;}
.rojo{color:red; text-decoration: none;}
a.rojo{color:red; text-decoration: none;}
tr td.no_user_reg{padding: 10px; text-align: center;}
.no_user_reg{padding: 10px; text-align: center;}
.admin_list_table{width: 100%; border-collapse: collapse;}
table.admin_list_table{width: 100%; border-collapse: collapse;}
.table_admin_list_product {width: 100%; border-collapse: collapse; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden;}
table.table_admin_list_product {width: 100%; border-collapse: collapse; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden;}
.table_admin_list_product_tr {background-color: #f8f9fa; border-bottom: 2px solid #dee2e6;}
table.table_admin_list_product tr.table_admin_list_product_tr {background-color: #f8f9fa; border-bottom: 2px solid #dee2e6;}
.table_admin_list_product_tr td {padding: 12px 15px; }
table.table_admin_list_product tr.table_admin_list_product_tr th.padd {padding: 12px 15px; }
.add_prod_btn{margin-bottom: 20px; background-color: green;}
a.add_prod_btn{margin-bottom: 20px; background-color: green;}
.img_list_prod{width: 50px; height: 50px; object-fit: cover; border-radius: 4px;}
img.img_list_prod{width: 50px; height: 50px; object-fit: cover; border-radius: 4px;}
.td_list_prod{padding: 10px 15px; border-bottom: 1px solid #eee;}
td.td_list_prod{padding: 10px 15px; border-bottom: 1px solid #eee;}
.tachado{text-decoration: line-through; color: #888;}
.td_list_product{padding: 15px; color: red; text-align: center;}
td.td_list_product{padding: 15px; color: red; text-align: center;}
.td_list_prodcut_2 {padding: 15px; text-align: center;}
td.td_list_prodcut_2 {padding: 15px; text-align: center;}
.delete {color: #dc3545;}
.limpio{text-decoration: none; }
.purpura{color: #6f42c1; }
.azul_medio{color: #007bff; }
.action_btn_1{padding: 10px 15px; border-bottom: 1px solid #eee; text-align: right; white-space: nowrap;}
td.action_btn_1{padding: 10px 15px; border-bottom: 1px solid #eee; text-align: right; white-space: nowrap;}
.parrafo_error{color: red; background-color: #fdd; border: 1px solid red; padding: 10px; border-radius: 5px;}
p.parrafo_error{color: red; background-color: #fdd; border: 1px solid red; padding: 10px; border-radius: 5px;}
.fnt_sz_09{font-size: 0.9em;}
.fnt_sz_08{font-size: 0.8em;} 
.fnt_sz_1_2{font-size: 1.2em;}
.checkout_btn{display: inline-block; padding: 10px 20px; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px; margin-right: 10px;}
a.checkout_btn{display: inline-block; padding: 10px 20px; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px; margin-right: 10px;}
.seguir_comprando{display: inline-block; padding: 10px 20px; background-color: #6c757d; color: white; border: none; border-radius: 5px; cursor: pointer;}
button.seguir_comprando{display: inline-block; padding: 10px 20px; background-color: #6c757d; color: white; border: none; border-radius: 5px; cursor: pointer;}
.login_error{display: none; margin-bottom: 15px; text-align: center;}
.resend_verif_btn {font-size: 0.9em; padding: 8px 15px;}
button.resend_verif_btn {font-size: 0.9em; padding: 8px 15px;}
.dp_none {display: none;}
.tabla_cesta{width: 100%; border-collapse: collapse;}
table.tabla_cesta{width: 100%; border-collapse: collapse;}
.fondo_claro {background-color: #f0f0f0;}
tr.fondo_claro {background-color: #f0f0f0;}
.borde_abajo {border-bottom: 1px solid #ddd;}
td.borde_abajo {border-bottom: 1px solid #ddd;}
.imagen_cesta {width: 60px; height: 60px; object-fit: cover;}
.resumen_pedido {width: 300px; float: right; margin-top: 20px; border: 1px solid #ccc; padding: 20px;}
.resumen_parrafo {display: flex; justify-content: space-between;}
.destacado_vista_admin {background: #ffc107; color: #333; padding: 5px 8px; border-radius: 4px; font-size: 0.8em; margin-left: 10px; font-weight: bold;}
.icon_video {color: #5469d4; margin-right: 10px;}
i.icon_video {color: #5469d4; margin-right: 10px;}
.video_holder {display: block; border-top: none; padding-top: 15px;}
.video_holder_dentro {max-width: 1000px; margin: 0 auto;}

ul.leccion-lista li.leccion-item .video_holder_dentro {max-width: 1000px; margin: 0 auto;}
.parrafo_cursos {margin-top: 15px; max-width: 1000px; margin-left: auto; margin-right: auto;}
ul.leccion-lista li.leccion-item .video_holder_dentro p.parrafo_cursos {margin-top: 15px; max-width: 1000px; margin-left: auto; margin-right: auto;}
.parrafo_completado {text-align: center; color: green; font-weight: bold;}
ul.leccion-lista li.leccion-item .leccion-contenido p.parrafo_completado {text-align: center; color: green; font-weight: bold;}
.producto-imagen {}
.disp1 {flex: 1; min-width: 300px;}
.disp2 {flex: 1; min-width: 300px;}
.error {color:red!important; text-decoration: none;}
input#precio_oferta {with:20px;}
input.precio_oferta {with:20px!important;}
.ofertas_precio {background-color: #fff3cd; padding: 2px 8px; border-radius: 10px;}

.ofertas_precio input.precio_oferta {
    width: 100%; /* Hace que el input ocupe el 100% del ancho de su div padre */
    box-sizing: border-box; /* Asegura que el padding/borde no lo hagan desbordar */
}

.precio_de_la_oferta_en_gris{font-size: 0.9em; color: #888; text-decoration: line-through; margin-top: -10px; text-align:center; margin-bottom: 10px; font-weight:bold;}
p.precio_de_la_oferta_en_gris span.mr10 {margin-right:10px; text-decoration: none!important;}
span.mr10 {margin-right:10px; text-decoration: none!important;}
.mr10 {margin-right:10px; text-decoration: none!important;}
/* Ajuste opcional para el separador HR */
hr {
    display: none; /* Ocultamos el HR, ya que el margin-bottom de la sección separa */
}
.title_h3 {padding: 15px 20px 10px; margin:0; background-color: #f9f9f9; border-bottom: 1px solid #eee;}
h3.title_h3 {padding: 15px 20px 10px; margin:0; background-color: #f9f9f9; border-bottom: 1px solid #eee;}
.mb20 {margin-bottom: 20px;}
.m20{margin: 20px 0;}
.verificacion_boton {}
.vaciar_cesta{color: red; text-decoration: none; font-size: 0.9em; display: block; text-align: center; margin-bottom: 15px;}
/* --- ¡NUEVO! Estilos del Lightbox Modal para Imágenes --- */
.lightbox-overlay {
    display: none; /* Oculto por defecto */
    position: fixed; /* Cubre toda la pantalla */
    z-index: 2000; /* Por encima de todo (incluso modales) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo negro 80% opaco */
    cursor: zoom-out; /* Cursor para cerrar */
}
.lightbox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.lightbox-content img {
    display: block;
    max-width: 90%;  /* Máx 90% ancho de pantalla */
    max-height: 90%; /* Máx 90% alto de pantalla */
    border-radius: 5px; /* Bordes suaves */
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    /* Animación de entrada */
    animation: zoomIn 0.3s ease;
}
/* Botón de cierre (X) */
.lightbox-close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    text-decoration: none;
}
.lightbox-close-btn:hover {
    color: #bbb;
}
/* Animación de zoom al abrir */
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* Hacer clicable la imagen principal de la galería */
.galeria-imagen-principal img {
    cursor: zoom-in; /* Mostrar cursor de zoom */
    transition: opacity 0.2s;
}
.galeria-imagen-principal img:hover {
    opacity: 0.85; /* Ligero efecto al pasar el ratón */
}

/* --- ESTILOS PÁGINA PERFIL --- */
.perfil-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}
.perfil-card h2, .perfil-card h3 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 1.5em;
}
.datos-avatar-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Formulario más ancho */
    gap: 30px;
    align-items: start;
}
@media (max-width: 768px) {
    .datos-avatar-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }
    .avatar-section {
        order: -1; /* Mover avatar arriba en móvil */
        margin-bottom: 30px;
    }
}
.avatar-section img {
    display: block;
    margin: 0 auto 15px;
}
.avatar-section label {
    cursor: pointer;
}
.avatar-section input[type="file"] {
    display: block;
    margin: 10px auto;
    max-width: 280px;
}
/* Estilos para inputs dentro del perfil */
.perfil-card input[type="email"], .perfil-card input[type="text"], .perfil-card input[type="tel"], .perfil-card textarea, .perfil-card select { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; margin-bottom: 15px; font-size: 16px; }
.perfil-card label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
/* Estilo unificado botones */
.perfil-card button, .perfil-card .btn {
    display: inline-block;
    padding: 10px 18px;
    font-size: 1em;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
    background-color: #007bff;
    color: white;
}
.perfil-card button:hover, .perfil-card .btn:hover {
    background-color: #0056b3;
}
/* Estilos FAQ */
.faq-item {
    border-bottom: 1px solid #eee;
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    cursor: pointer;
    font-weight: bold;
}
.faq-question:hover {
    color: #0056b3;
}
.faq-answer {
    display: none;
    padding: 0 10px 15px;
    color: #555;
}
.faq-toggle-icon {
    transition: transform 0.3s ease;
}
.faq-item.active .faq-toggle-icon {
    transform: rotate(180deg);
}
.mw720 {max-width: 700px;}
.admin-video-grid input {font-size: 16px;}
input {font-size: 16px!important;}
/* --- ¡NUEVO! Estilo para el icono de ver contraseña --- */
.password-wrapper {
    position: relative; /* Contenedor para posicionar el icono */
}
.password-wrapper .toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 1.1em;
}
.password-wrapper .toggle-password:hover {
    color: #333;
}
/* Ajusta el padding derecho del input para que no se solape con el icono */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 40px !important; /* Importante para sobreescribir otros estilos */
    box-sizing: border-box;
}


/* --- ¡NUEVO! Estilos para el Mapa de Contacto --- */
.google-map-container {
    position: relative;
    width: 100%;
    /* La altura máxima que pediste */
    height: 400px; 
    overflow: hidden; /* Para que el iframe respete el borde redondeado */
    border-radius: 10px; /* Bordes redondeados para el mapa mismo */
}

.google-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Quitar el borde feo del iframe */
}

section.perfil-card .producto-card .card-actions { padding: 0 15px 15px; margin-top: auto; text-align: center; }
section.perfil-card .producto-card .card-actions a { display: inline-block; padding: 8px 15px; font-size: 0.9em; font-weight: bold; border-radius: 5px; margin: 5px 3px 0; transition: background-color 0.2s, transform 0.1s; text-decoration: none; border: none !important; cursor: pointer; outline: none; }
section.perfil-card .card-actions a:hover { transform: scale(1.03); text-decoration: none; }
section.perfil-card .card-actions a:active { transform: scale(0.98); }
section.perfil-card .card-actions a:nth-child(1) { background-color: #6c757d; color: white; }
section.perfil-card .card-actions a:nth-child(1):hover { background-color: #5a6268; }
section.perfil-card .card-actions a:nth-child(2) { background-color: #007bff; color: white; }
section.perfil-card .card-actions a:nth-child(2):hover { background-color: #0056b3; }
section.perfil-card .producto_btn_action {padding: 12px 10px; text-align: center; border-radius: 10px; grid-gap: 1px;}
section.perfil-card .producto_btn_action_blue {padding: 12px 10px; text-align: center; border-radius: 10px; grid-gap: 1px; background-color: #007bff; color: white;}
/* --- ¡NUEVO! Estilos para Campos Repetidores (Admin) --- */
.repeater-fieldset {
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    background: #fafafa;
}
.repeater-fieldset legend {
    font-weight: bold;
    padding: 0 5px;
}
/* Contenedor para la lista de items */
.repeater-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Cada fila de item (requisito o FAQ) */
.repeater-item {
    display: flex;
    align-items: flex-start; /* Alinear arriba para textareas */
    gap: 10px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}
.repeater-item-content {
    flex-grow: 1; /* Ocupa el espacio */
    display: flex;
    flex-direction: column; /* Apila P y R en FAQ */
    gap: 5px;
}
/* Asegura que los inputs/textareas usen los estilos base */
.repeater-item-content input[type="text"],
.repeater-item-content textarea { 
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    margin-bottom: 0; /* Quitar margen extra si lo hereda */
}
.repeater-item-content textarea {
    min-height: 80px; /* Altura mínima para respuestas FAQ */
}
/* Botón de eliminar (rojo, pequeño) */
.btn-remove-repeater {
    display: inline-block;
    background-color: #dc3545; /* Rojo */
    color: white !important; /* Forzar color */
    border: none;
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    line-height: 1.5; /* Ajustar altura de línea */
}
.btn-remove-repeater:hover {
    background-color: #c82333;
    color: white !important;
}
/* Botón de añadir (verde) */
.btn-add-repeater {
    display: inline-block;
    background-color: #28a745; /* Verde */
    color: white !important; /* Forzar color */
    border: none;
    padding: 8px 15px;
    font-size: 0.9em;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s;
    text-decoration: none;
}
.btn-add-repeater:hover {
    background-color: #218838;
    color: white !important;
}
.anchito_70{width: 70%; max-width: 300px; align-items: left;}
button.anchito_70{width: 70%; max-width: 300px; align-items: left; margin-left: 18px;}
/* --- ¡NUEVO! Estilos Detalles Envío (Producto Detalle) --- */
.detalles-envio-card {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 20px 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    margin-bottom: 30px; /* Separación */
}
.detalles-envio-card h3 {
    margin-top: 0;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-size: 1.3em;
    color: #333;
}
.detalles-envio-content {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
}
/* Asegura que el HTML dentro del campo se vea bien */
.detalles-envio-content p, 
.detalles-envio-content ul {
    margin-top: 0;
    margin-bottom: 15px;
}
.detalles-envio-content ul {
    padding-left: 20px;
}
.Instructor_main_class {margin-top: 20px; border: 1px solid #ccc; border-radius: 5px; padding: 15px; background: #fafafa;}
.titulo_instructor_admin {font-weight: bold; padding: 10px 5px;  margin-top: 30px; }
.nombre_de_producto {width: 95%; border-radius: 12px; display: flex; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-size: 16px; padding: 5px 10px;}
/* --- ESTILOS LUPA DE BÚSQUEDA (CORREGIDO) --- */
.area_descripcion {width: 95%; border-radius: 12px; display: flex; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-size: 16px; padding: 10px 10px;}
.imagenes_admin_product {width: 95%; border-radius: 12px; display: flex; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-size: 16px; padding: 5px 10px; border: solid 1px #333;}
.input_admin_cant {width: 70%; border-radius: 12px; display: flex; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-size: 16px; padding: 5px 10px;}
/* 1. Estilo base del icono (lo que borramos del HTML) */
#open-search-btn .fa-magnifying-glass {
    font-size: 1.3em;
    color: #ddd; /* Color por defecto */
    transition: color 0.3s ease;  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 1.25, 0.5, 1);
}

/* 2. Estilo al pasar el ratón por el ENLACE <a> */
#open-search-btn:hover .fa-magnifying-glass {
    color: #f33; /* El color que querías en hover */  transform: scale(1.30); background-color: transparent;
}
.producto_btn_action {padding: 11px 10px; text-align: center; border-radius: 10px; grid-gap: 1px;}
.producto_btn_action_blue {padding: 11px 10px; text-align: center; border-radius: 10px; grid-gap: 1px; background-color: #007bff; color: white;}
section:last-of-type {  flex-grow: 1; /* este crece si hay espacio libre */ min-height: 40dvh; 
 /* 150px ≈ altura del header + footer */}
h3.h3_productos {font-size: 1.1em;   display: -webkit-box;        /* define contenedor flexible vertical */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; padding-bottom:30px;   }
/* --- ¡NUEVO! ESTILOS PARA ORBES DE ANIMACIÓN 3D --- */

/* 1. El contenedor de los orbes */
/* --- ¡NUEVO! ESTILOS PARA ORBES (VERSIÓN EXAGERADA Y DINÁMICA) --- */

/* --- ¡NUEVO! SUPER ANIMACIÓN (RÁPIDA Y EXAGERADA) --- */

/* 1. Orbes: Contenedor (Capa 2) */
.anim-capa-intermedia {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    overflow: hidden; 
    pointer-events: none; 
    /* ¡NUEVO! Modo de fusión para MÁXIMO impacto visual */
   /* ¡CAMBIADO! Modo de fusión a overlay */
    mix-blend-mode: overlay;
}

/* 2. Orbes: Estilo (¡Muy brillante!) */
.orb {
    position: absolute;
    border-radius: 50%;
    /* ¡NUEVO! Un gradiente de luz dura, muy brillante y visible */
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%,  /* 100% Blanco en el centro */
        rgba(255, 255, 255, 0.8) 30%, 
        rgba(255, 255, 255, 0) 60% /* Se difumina rápido */
    );
    /* Estado inicial: invisible */
    opacity: 0;
}

/* 3. Orbes: Posición y Tamaño (Sin cambios) */
.orb1 { width: 300px; height: 300px; top: -50px; left: 10%; }
.orb2 { width: 500px; height: 500px; top: 50%; left: 50%; }
.orb3 { width: 250px; height: 250px; bottom: -80px; right: 15%; }

/* 4. Puntos: Rejilla (Capa 3) */
.hero-dots-grid {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3; 
    
    /* ¡NUEVO! Puntos mucho más brillantes */
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.7) 1px, transparent 0);
    background-size: 15px 15px; 
    
    /* ¡NUEVO! Modo de fusión para que brille sobre los orbes */
    mix-blend-mode: overlay;
    
    /* Estado inicial: Invisible y estático */
    opacity: 0; 
    transform: scale(1);
}

/* --- ANIMACIONES RÁPIDAS (0.8s) --- */

/* 5. Keyframes para Orbes (Explosión rápida) */
@keyframes flash-burst {
  0%   { transform: scale(0.5); opacity: 0; }
  30%  { transform: scale(3.0); opacity: 1; } /* ¡Pico de explosión en 30% del tiempo! */
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes flash-burst-center {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(2.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.0); opacity: 0; }
}

/* 6. Keyframes para Puntos (Zoom y Rotación 3D) */
@keyframes dots-3d-zoom {
  0%   { 
    transform: scale(1.0) rotate(0deg); /* Estado inicial */
    opacity: 0;
    background-size: 15px 15px;
  }
  30%  { 
    /* ¡Pico de zoom! */
    transform: scale(2.0) rotate(10deg); /* Zoom x2 y rotación */
    opacity: 1; /* Totalmente visible */
    background-size: 40px 40px; /* Puntos gigantes */
  }
  100% { 
    transform: scale(1.0) rotate(0deg); /* Vuelve al inicio */
    opacity: 0; /* Se desvanece */
    background-size: 15px 15px;
  }
}

/* 7. El Disparador: Se aplica TODO a la vez */
.hero-banner.is-fading .orb1 {
    animation: flash-burst 0.8s ease-out 0s;
}
.hero-banner.is-fading .orb2 {
    animation: flash-burst-center 0.8s ease-out 0.05s; /* Pequeño delay */
}
.hero-banner.is-fading .orb3 {
    animation: flash-burst 0.8s ease-out 0.1s; /* Pequeño delay */
}
.hero-banner.is-fading .hero-dots-grid {
    /* ¡Aplica la animación de zoom 3D! */
    animation: dots-3d-zoom 0.8s ease-in-out 0s;
}h1, h2, h3, h4, h5 {color: #005B6D; }
.enlace_gris {color: #999; text-decoration: none;}
.enlace_gris:hover {color: #fff; text-decoration: none;}
.navbar .user-nav a:hover .avatar-default-placeholder { background-color: transparent!important; color:#f33; border-color: #f33; transform: scale(1.20) }
/* --- ESTILOS RESPONSIVE PARA NAVBAR MÓVIL --- */

/* 1. Configuración por defecto (escritorio) */
/* (Nos aseguramos de que el icono de hamburguesa esté oculto en escritorio) */
.dropbtn .dropbtn-text {
    display: inline-block; 
}
.dropbtn .dropbtn-icon {
    display: none; 
}

/* 2. Definición de la vista móvil (767px o menos) */
@media (max-width: 767px) {
    
    /* * TU PETICIÓN 1: Ocultar el enlace de "Inicio" (Home) 
     * Esto mueve el menú hamburguesa a la izquierda.
     */
    .navbar .nav-links .nav-home-link {
        display: none;
    }
    
    /* * TU PETICIÓN 2: Cambiar "Catálogo" por icono hamburguesa 
     * Ocultamos el texto y mostramos el icono.
     */
    .dropbtn .dropbtn-text {
        display: none;
    }
    .dropbtn .dropbtn-icon {
        display: inline-block;
        font-size: 1.4em; /* Hacemos el icono un poco más grande */
    }
    
    /* * SOLUCIÓN AL DESBORDAMIENTO: Ocultar el botón "Salir" 
     * Esto soluciona el problema de que la lupa se salga.
     * El usuario puede ir a "perfil.php" (desde el avatar) para cerrar sesión.
     */
   .user-nav .nav-text-link {
        display: none !important;
    }
    
    /* * (Opcional) Ajustes de espaciado para apretar todo un poco más 
     */
    .navbar a, .dropdown .dropbtn {
        padding-left: 10px;
        padding-right: 10px;
    }
    .user-avatar-container {
        margin-left: 8px; /* Reducir margen del avatar */
    }
}
.cerrar_sesion {width:95%; box-sizing: border-box;}/* --- ¡NUEVO! Estilos para el Menú Desplegable Dinámico --- */
.dropdown-divider {
    height: 1px;
    margin: 6px 12px;
    overflow: hidden;
    background-color: #e5e5e5;
}

.dropdown-subtitle {
    display: block;
    padding: 8px 16px 4px; /* Menos padding inferior */
    font-size: 0.85em;
    font-weight: bold;
    color: #888; /* Un gris para que no parezca un enlace */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* --- ¡NUEVO! Estilos para Etiquetas de Categoría y Temática --- */
.product-tags {
    margin-top: 5px;
    margin-bottom: 15px; 
    font-size: 0.9em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Alinear a la izquierda */
    gap: 8px;
}
.perfil-card .product-tags {
    justify-content: center; /* Centradas en el perfil */
    min-height: 25px; /* Para alinear tarjetas */
    margin-bottom: 10px;
    font-size: 0.85em;
}

.tag-categoria, .tag-tema {
    padding: 4px 10px;
    border-radius: 5px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none !important; /* Importante para los enlaces */
    border: 1px solid #ddd;
    display: inline-block;
}
.tag-categoria { 
    background-color: #f0f0f0; 
    color: #444 !important; 
}
.tag-tema { 
    background-color: #e6f7ff; 
    color: #0056b3 !important; 
    border-color: #b3e0ff;
}
.tag-categoria:hover, .tag-tema:hover { 
    opacity: 0.8; 
}
/* --- ¡NUEVO! Estilos para Bio Expandible --- */
.bio-expandible {
    position: relative; /* Contenedor */
}

/* --- ¡NUEVO! Ajustes Acordeón Biografía Instructor (v2) --- */

/* 3. Altura de la tarjeta ajustada */
section.instructor-card {
    min-height: auto; /* Anula la altura mínima de 140px */
}
.instructor-card {
    padding: 15px; /* Reduce el padding general (antes era 20px) */
    align-items: flex-start; /* Alinear al inicio, no al centro */
}
.instructor-info p {
    margin: 0; /* ¡Esta es la clave! Elimina el margen vertical de 20px */
    padding: 0;
    line-height: 1.5; /* Un poco más de espacio entre líneas */
}

/* 1. Estilo del botón (texto azul subrayado) */
/* Esta regla es ahora MÁS ESPECÍFICA para ganar el conflicto */
.instructor-info button.btn-leer-mas {
    background: none;
    border: none;
    color: #007bff; /* Color azul de enlace */
    padding: 8px 0 0 0; /* 8px de espacio arriba, 0 en los demás */
    font-weight: bold;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: underline; /* Siempre subrayado */
    transition: color 0.2s;
    
    /* Anulaciones explícitas de '.perfil-card button' */
    width: auto;
    display: inline-block;
    border-radius: 0; /* Quitar borde redondeado */
}
.instructor-info button.btn-leer-mas:hover {
    color: #0056b3; /* Azul más oscuro al pasar el ratón */
    text-decoration: underline;
    background: none; /* Anular hover de .perfil-card button */
}

/* 2. Animación más suave */
.bio-texto {
    /* 4 líneas * 1.5em line-height (nuevo) = 6em */
    max-height: 6em; 
    overflow: hidden;
    position: relative;
    /* Transición suave y más lenta */
    transition: max-height 0.7s ease-in-out;
}
.bio-texto.expanded {
    max-height: 1000px; /* Valor "infinito" */
    transition: max-height 0.7s ease-in-out;
}

/* --- ¡NUEVO! Barra de Búsqueda Avanzada --- */
.advanced-search-bar {
    background-color: #f8f9fa;
    padding: 20px 0;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.advanced-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto; /* Dos desplegables y un botón */
    gap: 15px;
    align-items: flex-end;
}
.search-field {
    display: flex;
    flex-direction: column;
}
.search-field label {
    font-size: 0.85em;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
}
.search-field select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #fff;
}
.btn-search-avanzado {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s;
}
.btn-search-avanzado:hover {
    background-color: #0056b3;
}

/* Responsividad para la barra de búsqueda */
@media (max-width: 768px) {
    .advanced-search-form {
        grid-template-columns: 1fr; /* Apilar todo en una columna */
        gap: 10px;
    }
    .btn-search-avanzado {
        width: 100%;
        padding: 12px;
    }
}
/* --- ¡NUEVO! Estilos para Acordeón y AJAX --- */

/* El botón que abre el acordeón */
.advanced-search-toggle {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 12px 0;
    text-align: center;
}
.btn-toggle-search {
    background: none;
    border: none;
    color: #007bff; /* Azul primario */
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
}
.btn-toggle-search:hover {
    text-decoration: underline;
}
.btn-toggle-search i {
    margin-left: 8px;
    transition: transform 0.4s ease;
}

/* El contenedor del formulario que se expande/colapsa */
.advanced-search-wrapper {
    max-height: 0; /* Oculto por defecto */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    background-color: #f8f9fa; /* Mismo fondo que la barra */
    border-bottom: 1px solid transparent; /* Para evitar un "salto" */
}

/* Estado "Abierto" */
.advanced-search-wrapper.search-is-open {
    max-height: 500px; /* Altura suficiente para mostrar el formulario */
    border-bottom-color: #dee2e6; /* Mostrar el borde inferior */
    transition: max-height 0.5s ease-in-out;
}
.btn-toggle-search.active i {
    transform: rotate(180deg);
}

/* Estilo para el desplegable de tema deshabilitado */
.search-field select:disabled,
.form-page-container select:disabled {
    background-color: #e9ecef; /* Un gris claro */
    cursor: not-allowed;
    opacity: 0.7;
}