/* File: assets/css/auth_styles.css */
.auth-container { max-width: 450px; margin: 2rem auto; }
.auth-form { padding: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.auth-form h2 { text-align: center; margin-bottom: 2rem; color: #333; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
.form-group input { width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.auth-form .btn { width: 100%; text-align: center; }
.auth-switch { text-align: center; margin-top: 1.5rem; color: #666; }
.success-message { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; padding: 1rem; border-radius: 4px; text-align: center; }
.appointments-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.appointments-table th, .appointments-table td { padding: 0.8rem; text-align: left; border-bottom: 1px solid #eee; }
.appointments-table th { background-color: #f8f9fa; }
.status-badge { padding: 0.2rem 0.6rem; border-radius: 12px; color: white; font-size: 0.8rem; text-transform: capitalize; }
.status-scheduled { background-color: #007bff; }
.status-confirmed { background-color: #ffc107; color: #212529; }
.status-completed { background-color: #28a745; }
.status-cancelled { background-color: #dc3545; }
.btn-cancel, .btn-rebook { text-decoration: none; font-size: 0.9rem; padding: 0.3rem 0.8rem; border-radius: 4px; }
.btn-cancel { color: #dc3545; border: 1px solid #dc3545; } .btn-cancel:hover { background: #dc3545; color: white; }
.btn-rebook { color: #007bff; border: 1px solid #007bff; } .btn-rebook:hover { background: #007bff; color: white; }
/*.nav-separator::before { content: '|'; margin: 0 1rem; color: #ddd; }*/
.public-nav .nav-list {
    margin: 0;
    padding: 0;
    list-style: none; /* Quita los puntos de la lista */
    display: flex; /* ¡La magia de Flexbox! */
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea si no caben */
    align-items: center; /* Alinea verticalmente los elementos */
    justify-content: flex-end; /* Alinea los elementos a la derecha */
    gap: 0 1rem; /* Espacio horizontal entre elementos */
}

/* El separador ahora se añade con un borde a la izquierda */
.public-nav .nav-separator-item {
    padding-left: 1rem;
    border-left: 1px solid #ddd;
}

/* Para la versión móvil, quitamos el borde y centramos los enlaces */
@media (max-width: 600px) {
    .public-header .header-container {
        flex-direction: column; /* Apila el logo y la nav verticalmente */
        gap: 1rem;
    }

    .public-nav .nav-list {
        justify-content: center; /* Centra los enlaces en el móvil */
        width: 100%;
    }
    
    .public-nav .nav-separator-item {
        /* En móvil, el separador no es un borde, sino un espacio superior */
        border-left: none;
        padding-left: 0;
        margin-top: 0.5rem; 
        padding-top: 0.5rem;
        border-top: 1px solid #eee;
        width: 100%;
        text-align: center;
    }
}
/* File: assets/css/auth_styles.css (AÑADIR AL FINAL) */

/* --- ESTILOS RESPONSIVE PARA TABLAS EN 'MI CUENTA' --- */

@media (max-width: 768px) {
    .appointments-table {
        border: none; /* Quitamos el borde general de la tabla */
    }

    .appointments-table thead {
        /* Ocultamos la cabecera original en móvil, no la necesitamos */
        display: none;
    }

    .appointments-table tr {
        /* Cada fila se convierte en una 'tarjeta' */
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .appointments-table td {
        /* Cada celda ahora ocupa una línea completa */
        display: block;
        text-align: right; /* Alineamos el contenido a la derecha */
        padding: 0.8rem;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    .appointments-table td:last-child {
        border-bottom: none; /* La última celda de cada tarjeta no tiene borde inferior */
    }

    /* Aquí creamos la etiqueta usando el atributo data-label */
    .appointments-table td::before {
        content: attr(data-label); /* Muestra el texto de data-label */
        position: absolute;
        left: 0.8rem;
        font-weight: bold;
        text-align: left;
    }

    /* Estilos específicos para las acciones en móvil */
    .appointments-table td[data-label="Acciones"] {
        text-align: center; /* Centramos los botones */
    }
    .appointments-table td[data-label="Acciones"]::before {
        display: none; /* No mostramos la etiqueta "Acciones" */
    }
}
/* --- ESTILOS PARA ESTADOS DE SOLICITUDES --- */
.status-pending { background-color: #ffc107; color: #212529; }
.status-approved { background-color: #28a745; }
.status-rejected { background-color: #dc3545; }

/* File: assets/css/auth_styles.css (AÑADIR AL FINAL) */

/* --- ESTILOS PARA EL SELECTOR DE IDIOMA --- */

.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espacio entre las banderas/textos de idioma */
    margin-right: 1rem; /* Espacio antes del siguiente elemento de la nav */
}

.language-switcher a {
    text-decoration: none;
    font-weight: bold;
    color: #aaa; /* Color para los idiomas inactivos */
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    transition: color 0.2s, background-color 0.2s;
}

.language-switcher a:hover {
    color: #333; /* Color al pasar el ratón */
}

/* ESTA ES LA REGLA CLAVE */
.language-switcher a.active {
    color: #fff; /* Color del texto del idioma activo */
    background-color: #007bff; /* Color de fondo para destacarlo */
}

/* En móvil, el selector de idioma también se centra */
@media (max-width: 600px) {
    .language-switcher {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}