/* style.css - Estilos base para SincroCast (Versión Completa y Responsive) */

/* ========================================================= */
/* 1. Estilos Base y Layout (Mobile-first donde sea posible) */
/* ========================================================= */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #e9f2fb;
    color: #000000;
    margin: 0;
    padding: 0;
}

.container-old {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.container {
    /* Estilo para el contenedor principal de contenido */
    margin: 0 auto;
    max-width: 1200px;
    background-color: #ffffff;
    padding-bottom: 25px;
}

/* --- ENCABEZADO (.header) --- */
.header {
    background-color: #3C5A6A; /* Azul Oscuro - Color Principal */
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px; /* Separación entre elementos */
    flex-wrap: nowrap; /* Evita saltos de línea inesperados en escritorio */
}

.logo {
    height: 40px;
}

.header-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; /* Ocupa el espacio central */
}

.header-title h2 {
    font-size: 2.1em;
    margin: 0;
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
}

.header-title h3 {
    font-size: 0.8em;
    margin: 0;
    line-height: 1.1;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

.header-title h2 a {
    color: #ffffff;
    text-decoration: none;
}

.header-title h3 a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.nav {
    display: flex;
    gap: 15px;
}

.nav a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
    white-space: nowrap; /* Evita que el texto del enlace se rompa */
}

.nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


/* ========================================================= */
/* 2. Botones (Buttons) */
/* ========================================================= */

.btn1 {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: inline-block; /* Asegura que los 'a.btn' se comporten como botones */
    text-align: center;
}

a.btn1 {
    padding: 8px 20px;
}

button.btn , 
a.btn {
    font-size: 1em;
    border: none;
    border-radius: 5px;
    padding: 6px 10px;
    margin:  0;
    text-decoration: none;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.btn-primary {
    background-color: #00C4E4;
    color: white;
}

.btn-primary:hover {
    background-color: #00a8cc;
}

.btn-danger {
    background-color: #E64D9C;
    color: white;
}

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

.btn-warning {
    background-color: #ef9300;
    color: white;
}

.btn-warning:hover {
    background-color: #d18101;
}

.btn-confirm {
    background-color: #00c213;
    color: white;
}

.btn-confirm:hover {
    background-color: #01ac12;
}

.btn-delete {
    background-color: #c20013;
    color: white;
}

.btn-delete:hover {
    background-color: #ac0112;
}

.btn-info {
    background-color: #f6ffd0;
}


.btn-info:hover {
    background-color: #ebff91;
}


/* Botón de descarga local con gradiente animado */
#btn-descargar-local {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: white;
    font-weight: bold;
    width: 100%;
}

#btn-descargar-local:hover {
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

#btn-iniciar-grabacion , 
#btn-detener-grabacion , 
#btn-archivar-sesion , 
#btn-descargar-local {
    margin: 5px 0 !important; 
}

/* ========================================================= */
/* 3. Componentes (Cards) */
/* ========================================================= */

.card-1 {
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
}

.card {
    padding: 20px;
}

.card-alert {
    border-radius: 8px;
    padding: 20px;
    background-color: #f8d7da;
    margin: 0 20px;
}

.card-header {
    background-color: #3C5A6A;
    color: white;
    padding: 10px 15px;
    border-radius: 6px 6px 0 0;
    margin: -20px -20px 15px -20px;
}

.card h2 {
    border-bottom: 1px solid #dee2e6;
    font-size: 1.5em;
    padding-bottom: 5px;
    margin-top: 0;
    margin-bottom: 15px;
}

.contenedor-fichas{
    /* Define el contenedor como una cuadrícula */
    display: grid;
    /* Crea 4 columnas de igual ancho (1fr) */
    grid-template-columns: repeat(4, 1fr);
    /* Espacio entre las fichas */
    gap: 20px;
}

@media (max-width: 600px) {
    .contenedor-fichas {
        /* Sobrescribe la configuración del grid para tener una sola columna */
        grid-template-columns: 1fr;
        /* Puedes ajustar el padding y el gap si lo necesitas */
        padding: 15px;
        gap: 15px;
    }
}

/* Opcional: Un estilo intermedio para tabletas (2 columnas) */
@media (min-width: 601px) and (max-width: 900px) {
    .contenedor-fichas {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card .ficha {
    padding: 15px;
    margin: 15px;
}

.card .ficha h3 {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    border-bottom: 1px #ccc solid;

}

.contenedor-fichas .bloque{
    margin: 0;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 8px;
    text-align: center;
}

.card-alert,
.user-card, 
.sesion-archivada, 
.sesion-activa, 
.contenedor-fichas .bloque{
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.user-card:hover, 
.sesion-archivada:hover, 
.sesion-activa:hover, 
.contenedor-fichas .bloque:hover{
    background-color: #f0f0f0;
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-alert:hover{
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


h3 span.icono {
    font-size: 2.5em; 
}

.contenedor-fichas .bloque h3 {
    border-bottom: 1px solid #adb5bd;
    font-size: 1em;
    margin: 0;
    padding: 10px;
    margin-bottom: 20px;
}

.alert-danger {
    text-align: center;
    border-radius: 8px;
    padding: 15px 0;
    background-color: #f8d7da;
    margin: 15px;
}

.estadisticas-detalle {
    text-align: center;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 8px;
    border-left: 4px solid #813181;
}


/* ========================================================= */
/* 4. Estado y Grabación (Status & Recording) */
/* ========================================================= */

@font-face {
    font-family: 'Digital Segment';
    font-display: swap;
    src: url('seven-segment-round.otf.woff2') format('woff2');
}

.timer {
    font-weight: bold;
    text-align: center;
    margin: 0;
    font-family: 'Digital Segment', monospace;
    text-align: center;
    color: #ccff00;
    text-shadow:
        0 0 8px rgba(102, 153, 0, 0.8),
        0 0 25px #ccff00;
    font-size: 6.5em;
    letter-spacing: 14px;
    background-color: #1B192E;
    border-radius: 8px;
    padding: 15px 0;
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.status-connected {
    background-color: #00C4E4;
}

.status-ready {
    background-color: #F9B74D;
}

.status-recording {
    background-color: #d32f2f;
    animation: blink-recording 1.2s infinite;
}

@keyframes blink-recording {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.status-finished {
    background-color: #3C5A6A;
}

#indicador-local {
    animation: pulse-recording 2s infinite;
}

@keyframes pulse-recording {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}


/* ========================================================= */
/* 5. Controles de Audio P2P (WebRTC) */
/* ========================================================= */

.audio-control {
    margin: 10px 0;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.audio-control:hover {
    background: #3C5A6A20 !important;
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.volume-slider {
    accent-color: #00C4E4;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    background: #00C4E4;
}

.volume-slider::-moz-range-thumb {
    background: #00C4E4;
    border: none;
}

.conexion-activa {
    border-left: 2px solid #28a745;
}

.conexion-inactiva {
    border-left: 2px solid #6c757d;
}

.conexion-error {
    border-left: 2px solid #dc3545;
}


/* ========================================================= */
/* 6. Tablas y Formularios */
/* ========================================================= */

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

th {
    background: #f0f0f0;
}

form table td {
    vertical-align: middle;
}

form table input[type="text"],
form table input[type="password"],
form table input[type="email"],
form table select,
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"],
.login-form select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1.0em;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 5px;
}

body.login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}


.login-form {
    padding: 30px 20px;
    margin: 10px auto;
    max-width: 400px;
    width: 90%;
    border-radius: 18px;
    border-radius: 8px;
    background-color: #ffffff;
}

.login-form img {
    width: 100px;
}

.login-form h1 {
    font-size: 1.6em;
    margin: 10px 0;
    padding: 0;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    margin-bottom: 0;
    border-radius: 8px;
}

.login-form .btn-primary {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: #0b3148;
    color: white;
    font-size: 1.0em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.login-form .btn-primary:hover {
    background: #14567c;

}

form table input:focus,
.login-form input:focus {
    border-color: #00C4E4;
    box-shadow: 0 0 0 3px rgba(0, 196, 228, 0.2);
    outline: none;
}

/* Estilos básicos para el editor contenteditable */
.notes-editor {
    min-height: 50px;
    padding: 20px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    line-height: 1.5;
    overflow-y: auto;
    background-color: #f5f5f5;
    color: #333;
}

.notes-editor:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
}

.notes-editor p {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

#editor-toolbar button {
    cursor: pointer;
    padding: 5px 10px;
    margin-right: 5px;
    border: 1px solid #ddd;
    background-color: #eee;
    border-radius: 3px;
}


/* descargar sesiones */
.sesion-card {
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    background: #f9f9f9;
}

.sesion-activa {
    border-left: 4px solid #28a745;
}

.sesion-archivada {
    border-left: 4px solid #6c757d;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.status-iniciado {
    background: #ffc107;
    color: #000;
}

.status-grabando {
    background: #dc3545;
    color: #fff;
}

.status-cerrado {
    background: #6c757d;
    color: #fff;
}

.status-archivado {
    background: #17a2b8;
    color: #fff;
}

.btn-limpieza {
    background-color: #dc3545;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

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


/* ========================================================= */
/* 7. Layout Principal (Flexbox) */
/* ========================================================= */

.recoder-container {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.recoder-izq {
    padding: 0;
    margin: 0;
    flex: 2; /* 2/3 del espacio */

}

.recoder-der {
    padding: 0;
    margin: 0;
    flex: 1; /* 1/3 del espacio */
    background-color: #3C5A6A90;
    border-radius: 8px;
    color: #ffffff;
}

.ancho100 {
    width: 100%;
}

.recoder-der .bloque-chat,
.recoder-der .bloque-participantes,
.recoder-der .audio-participantes,
.recoder-der .bloque-notas {
    padding: 0 10px 10px 10px;
}

.recoder-der div h3 {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    border-bottom: 1px #ffffff solid;
}

.botonera-audio {
    display: flex;
    gap: 20px;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 20px;
}

.botonera-audio-izq {
    padding: 0;
    margin: 0;
    flex: 1;
}

.botonera-audio-der {
    padding: 0;
    margin: 0;
    flex: 1;
}

.botonera-audio-izq .btn,
.botonera-audio-der .btn {
    width: 100%;
    text-align: center;
    margin: auto;
}

.timer-contadores {
    display: flex;
    gap: 20px;
    margin: 10px auto;
    padding: 5px 0;
}

.timer-izq {
    padding: 0;
    margin: 0;
    flex: 1;
}

.timer-der {
    padding: 0;
    margin: 0;
    flex: 1;
}

.bloque-titulo-sala,
.bloque-chat,
.bloque-participantes,
.audio-participantes {
    margin-bottom: 20px;
}

.bloque-titulo-sala h2 {
    margin: 10px;
    text-align: center;
    font-size: 1em;
}

#chat-mensajes {
    height: 150px;
    overflow-y: auto;
    background-color: #3C5A6A90;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
}


/* ======================================= */
/* === ESTILOS DEL REPRODUCTOR DE AUDIO === */
/* ======================================= */

#admin-audio-player {
    /* Contenedor principal del reproductor */
    background-color: #e9ecef; /* Color de fondo claro */
    border-radius: 8px;
    margin:  10px 0;
    padding: 10px;
    margin-bottom: 0;
}

.player-header {
    /* Estilo del título */
    color: #007bff; /* Azul primario */
    margin-top: 0;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* --- Lista de Pistas --- */

.player-track-list {
    max-height: 250px; /* Altura máxima para la lista */
    overflow-y: auto; /* Scroll si hay muchas pistas */
}

.track-button {
    width: 100%;
    text-align: left !important;
    margin-bottom: 1px !important;
    transition: background-color 0.2s, color 0.2s;
    background-color: #3C5A6A90;
    color: #fff;
    border: none;
    padding: 4px 8px !important;
    font-size: 0.7em !important;
    border-radius: 0 !important;
}

.track-button:hover {
    background-color: #3C5A6A;
}

.track-button.active {
    background-color: #00C4E4; 
    color: white;
    font-weight: bold;
}

.player-actions-borrar {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    background-color: #3C5A6A30;
    border-radius: 8px;
    padding: 10px;

}

.player-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    padding: 0;

}


.player-actions .btn {
    flex: 1; /* Distribuye los botones uniformemente */
    padding: 5px;
    font-size: 0.7em;
}

#btn-player-duck.active-duck {
    /* Estilo para el botón DUCK cuando está activo */
    background-color: #ffff00; /* Amarillo de advertencia */
    color: #212529;
    font-weight: bold;
}


/* --- Información y Progreso --- */
.player-container h3 {
    font-size:0.8em;
    color: #3C5A6A;
    background-color: #3C5A6A20;
    border-bottom: 2px solid #3C5A6A;
    text-align: center;
    margin:  0;
    padding: 5px 0;
    border-radius: 5px;
}


.player-info {
/*    background: #3C5A6A30; */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 10px 10px 3px 10px ;
}

/* --- Barra de Progreso (Slider) --- */
.progress-slider {
    width: 100%;
    height: 12px;
    margin-top: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: #3C5A6A50; 
    border-radius: 5px;
    cursor: pointer;
}

.progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00C4E4;
    border-radius: 50%;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 0.5em;
    color: #333333;
/*    background: #3C5A6A30; */
    padding: 0 10px;
}

/* --- Control de Volumen --- */
.volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
/*    background: #3C5A6A30; */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.7em;
}

.volume-slider {
    flex: 1;
    height: 10px;
    -webkit-appearance: none;
    appearance: none;
    background: #3C5A6A50;
    border-radius: 3px;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00C4E4;
    border-radius: 50%;
}

/* ========================================================= */
/* 8. Media Queries (Responsividad) */
/* ========================================================= */

/* Adaptación para Tabletas grandes y portátiles (hasta 992px) */
@media (max-width: 992px) {
    .timer {
        font-size: 4.5em; /* Reduce el tamaño del contador */
    }
}


/* Adaptación para Tabletas y Móviles (hasta 768px) */
@media (max-width: 768px) {
    
    /* --- Contenedor Principal --- */
    .container {
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
    
    /* --- Encabezado Responsive: Apila y Centra --- */
    .header {
        /* Fuerza la organización vertical (Logo, Título, Nav) */
        flex-direction: column;
        /* Centra horizontalmente todos los elementos apilados */
        align-items: center;
        padding: 15px 10px;
        gap: 10px;
    }

    .logo {
        display: none;
        height: 35px;
        margin-bottom: 5px;
    }

    .header-title {
        text-align: center;
        width: 100%;
        flex-grow: 0;
        margin-bottom: 5px;
    }

    .header-title h2 {
        font-size: 1.3em;
    }

    .header-title h3 {
        font-size: 0.5em;
    }

    .nav {
        /* Asegura que si hay múltiples enlaces, se centren en su propia línea */
        width: 100%;
        justify-content: center;
    }
    
    /* --- Layout Principal (Columnas a una columna) --- */
    .recoder-container {
        flex-direction: column;
        gap: 0;
    }

    .recoder-izq,
    .recoder-der {
        flex: none;
        width: 100%;
        padding-bottom: 15px;
    }

    .recoder-der  div h3 {
        text-align: center;
    }
    
    /* --- Botoneras y Timers --- */
    .botonera-audio,
    .timer-contadores {
        flex-direction: column;
        gap: 0;
    }

    .botonera-audio-izq,
    .botonera-audio-der,
    .timer-izq,
    .timer-der {
        flex: none;
        width: 100%;
        padding: 5px 0;
        margin: 0;
    }

    /* --- Detalles --- */
    .card-alert {
        margin: 0 10px;
    }

    .timer {
        font-size: 3em;
        letter-spacing: 8px;
    }
    
    /* --- Tablas Responsive (Requiere 'data-label' en el HTML) --- */
    table, thead, tbody, th, td, tr {
        display: block; 
    }
    
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    td {
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50% !important; 
        text-align: right;
    }
    
    td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        color: #3C5A6A;
    }

}


/* ========================================================= */
/* 9. Estilos para admin_usuarios.php (Gestión de Usuarios) */
/* ========================================================= */

/* --- Mensajes de estado (Éxito/Error) --- */
.status-success, .status-error {
    padding: 15px;
    margin: 15px 20px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
}

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

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



/* --- Formulario de Creación/Edición (form-grid) --- */
.form-grid {
    display: grid;
    /* Asegura 4 columnas iguales en escritorio y apilado en móvil */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: bold;
    color: #3C5A6A; /* Color principal */
    margin-bottom: 5px;
}

.form-actions {
    /* Ocupa el ancho completo en la cuadrícula si es necesario */
    grid-column: 1 / 2; 
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    padding-top: 10px;
}

.form-grid input[type="text"][readonly] {
    background-color: #f0f0f0;
    cursor: not-allowed;
}
.form-grid input , 
.form-grid select {
    padding: 10px;

}

/* --- Lista de Usuarios (user-list) --- */
.user-list {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas fluyan */
    gap: 15px;
    padding: 10px 0;
}

.user-card {
    flex: 1 1 300px; /* Base de 300px, permite crecer y encoger */
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.3s;
}

.user-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.user-card.user-self {
    /* Destaca la tarjeta del usuario actual */
    background-color: #e6f7ff;
}

.user-info {
    margin-bottom: 10px;
}

.user-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.user-name strong {
    font-size: 1.2em;
}

.user-role {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
}

.role-admin {
    background-color: #E64D9C; /* Color Danger/Warning */
    color: white;
}

.role-usuario {
    background-color: #00C4E4; /* Color Primary */
    color: white;
}

.role-superuser {
    /* Aunque el ADMIN no debe ver esto, por si acaso */
    background-color: #3C5A6A;
    color: white;
}

.user-detail {
    font-size: 0.9em;
    color: #6c757d;
    margin: 3px 0;
}

.user-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}


/* --- Media Query para adaptar el layout en móviles --- */
@media (max-width: 768px) {
    .user-list {
        flex-direction: column;
    }
    .user-card {
        flex: none;
    }
    .status-success, .status-error {
        margin: 15px 10px;
    }
    .form-actions {
        grid-column: 1 / -1; /* Ocupa todo el ancho en móviles */
    }


    /* Forzar apilamiento de botones en las fichas de sesión */
    .session-actions {
        /* Fuerza a que los elementos se apilen verticalmente */
        flex-direction: column; 
        margin-top: 15px; /* Separación de la información de la sesión */
    }
    
    
    .session-actions form .btn {
        /* Asegura que el botón dentro del formulario también sea 100% */
        margin: 0; /* Elimina márgenes innecesarios */
    }

    /* Ajuste de la ficha principal para que ocupe todo el ancho */
    .sesion-card > div:first-child {
        /* Deshace el flex horizontal de la ficha y permite que los elementos se apilen */
        flex-direction: column;
        align-items: flex-start; /* Alinea el texto a la izquierda */
        width: 100%;
    }

}


#btn-tour-help{
    width: 30px;
    height: 30px;
    text-align: center;
    border: none;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    background-color: #00C4E4;
    color: white;
}

#btn-tour-help:hover {
    background-color: #00a8cc;
}

/* ------descarga sesion------*/

.descarga {
    margin-top: 20px;
    padding: 15px;
    background: #e6ffe6;
    border-radius: 8px;
    text-align: center;
}




.archivo-item {
    padding: 10px;
    margin: 5px 0;
    background: white;
    border-radius: 4px;
    display: flex;
    justify-content: space-between; 
}

.archivo-item button, 
.archivo-item a {
padding: 5px 10px !important;
font-size: 0.8em;
}