/* Variables CSS para colores */
:root {
    --color-primary: #461c4b; /* Morado específico: #461c4b */
    --color-secondary: #7b4397; /* Un morado un poco más claro para subtítulos/bordes */
    --color-background: #f0f2f5; /* Gris muy claro de fondo */
    --color-text: #333333; /* Gris oscuro para texto principal */
    --color-border: #cccccc; /* Gris medio para bordes */
    --color-hover-dark: #3a163e; /* Morado más oscuro para hover */

    /* Colores para la puntuación 1-5 según tu especificación */
    --color-score-1: #ff0000; /* 1 - Muy Mal: Rojo */
    --color-score-2: #ffa500; /* 2 - Mal: Naranja */
    --color-score-3: #008000; /* 3 - Regular: Amarillo */
    --color-score-4: #90ee90; /* 4 - Bien: Verde Claro */
    --color-score-5: #008000; /* 5 - Excelente: Verde Fuerte */
}

/* Estilos Generales y Reseteo Básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
}

.container {
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Encabezado Principal */
.main-header {
    background-color: var(--color-primary);
    color: white;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Por defecto en columna para móviles */
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.main-header .logo-container {
    /* Si el logo es muy ancho, ajusta */
}

.main-header .logo {
    max-height: 80px; /* Ajusta el tamaño de tu logo */
    width: auto;
    border-radius: 5px; /* Suaviza bordes si es cuadrado */
}

.main-header h1 {
    margin: 0;
    font-size: 2em;
}

/* Sección de Campos Superiores (Fecha, Evento, Estadio, Líder, Supervisor) */
.top-fields-section {
    background-color: #e6e6ea; /* Un gris ligeramente diferente para esta sección */
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.top-fields-section h2 {
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.8em;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 1em;
    color: var(--color-text);
    background-color: white;
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 28, 75, 0.25); /* Sombra basada en el morado primario */
}


/* Títulos de Sección del Checklist */
.section-title {
    background-color: var(--color-secondary);
    color: white;
    padding: 12px 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 1.5em;
    text-align: center;
}

/* Ítems de Pregunta */
.question-item {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.question-text {
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-text);
    font-size: 1.1em;
}

/* Opciones de Radio Button para Puntuación */
.options-radio {
    display: flex;
    flex-wrap: wrap; /* Permite que las opciones se envuelvan en líneas más pequeñas */
    gap: 10px; /* Espacio entre los botones de opción */
    margin-bottom: 15px;
}

.options-radio input[type="radio"] {
    display: none; /* Oculta el radio button nativo */
}

.options-radio label {
    flex: 1; /* Permite que las etiquetas crezcan y se encojan */
    min-width: 80px; /* Ancho mínimo para cada botón */
    text-align: center;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, border-color 0.3s ease; /* Añade color y border-color a la transición */
    border: 1px solid transparent; /* Para el borde en no seleccionado */
}

/* Estilo para las opciones seleccionadas */
.options-radio input[type="radio"]:checked + label {
    background-color: var(--color-primary); /* ¡CAMBIO AQUÍ! Fondo morado al seleccionar */
    color: white; /* Texto blanco al seleccionar */
    border: 2px solid var(--color-primary); /* Borde primario al seleccionar */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.options-radio label:hover {
    opacity: 0.9;
}

/* Colores específicos para cada puntuación */
/* Estos colores se aplicarán cuando la opción NO esté seleccionada */
.option-muy-mal label {
    background-color: var(--color-score-1); /* Rojo */
    color: white;
}
.option-mal label {
    background-color: var(--color-score-2); /* Naranja */
    color: white;
}
.option-regular label {
    background-color: var(--color-score-3); /* Amarillo */
    color: var(--color-text); /* Texto oscuro para contraste en amarillo */
}
.option-bien label {
    background-color: var(--color-score-4); /* Verde Claro */
    color: var(--color-text); /* Texto oscuro para contraste en verde claro */
}
.option-excelente label {
    background-color: var(--color-score-5); /* Verde Fuerte */
    color: white;
}

/* Sección de Subida de Archivos */
.file-upload-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--color-border);
}

.file-upload-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.file-upload-section input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: #e6e6ea; /* Ligeramente más oscuro que el fondo general */
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    border: 1px dashed #b3b3b3; /* Gris más oscuro para el borde de previsualización */
    padding: 10px;
    border-radius: 5px;
    min-height: 60px; /* Para que sea visible incluso sin imágenes */
    align-items: center;
    justify-content: flex-start;
}

.image-preview {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Área de Comentarios */
textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-top: 15px;
    font-size: 1em;
    resize: vertical; /* Permite redimensionar verticalmente */
    color: var(--color-text);
}

textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 28, 75, 0.25); /* Sombra basada en el morado primario */
}


/* Botón de Envío */
button[type="submit"] {
    background-color: var(--color-primary);
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 30px;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button[type="submit"]:hover {
    background-color: var(--color-hover-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Mensajes de Error (si los agregas en PHP) */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
}

/* Pie de Página (si usas footer.php) */
.main-footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    color: var(--color-secondary);
    font-size: 0.9em;
}


/* Media Queries para Responsividad */
@media (min-width: 768px) {
    .main-header {
        flex-direction: row; /* En fila para pantallas más grandes */
        justify-content: space-between; /* Espacio entre logo y título */
        padding: 20px 40px;
    }

    .main-header h1 {
        font-size: 2.5em;
    }

    .form-group label {
        display: inline-block;
        width: 150px; /* Ancho fijo para las etiquetas */
        margin-right: 10px;
        text-align: right;
    }

    .form-group input[type="text"],
    .form-group input[type="date"],
    .form-group select {
        width: calc(100% - 165px); /* Ajusta el ancho para el input */
        display: inline-block;
    }

    .options-radio {
        justify-content: center; /* Centrar los botones de opción en pantallas grandes */
    }

    .options-radio label {
        min-width: 100px; /* Un poco más de ancho para los botones */
    }
}

@media (max-width: 480px) {
    .container {
        margin: 10px;
        padding: 15px;
    }
    .main-header {
        padding: 15px;
    }
    .main-header .logo {
        max-height: 60px;
    }
    .main-header h1 {
        font-size: 1.8em;
    }
    .section-title {
        font-size: 1.3em;
        padding: 10px;
    }
    .question-text {
        font-size: 1em;
    }
    .options-radio label {
        padding: 8px 10px;
        font-size: 0.9em;
    }
    button[type="submit"] {
        font-size: 1em;
        padding: 12px 15px;
    }
}
/* Estilos para mensajes de alerta */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.alert-success {
    color: #155724; /* Verde oscuro */
    background-color: #d4edda; /* Verde claro */
    border-color: #c3e6cb; /* Borde verde */
}

.alert-error {
    color: #721c24; /* Rojo oscuro */
    background-color: #f8d7da; /* Rojo claro */
    border-color: #f5c6cb; /* Borde rojo */
}
/* --- Estilos para el Dashboard (dashboard.php) --- */

/* ... (mantener todos los estilos anteriores del dashboard) ... */

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center; /* Centrar verticalmente si las imágenes son de diferentes alturas */
}

/* --- CAMBIO CLAVE AQUÍ PARA LA MINIATURA --- */
.dashboard-image-thumb {
    width: 100px; /* Ancho fijo para la miniatura */
    height: 100px; /* Alto fijo para la miniatura */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    border-radius: 4px;
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0; /* Evita que la imagen se encoja más allá de su tamaño si hay poco espacio */
}

.dashboard-image-thumb:hover {
    transform: scale(1.05);
    border-color: var(--color-primary);
}

/* ... (mantener todos los estilos de media queries) ... */
/* Variables CSS para colores */
:root {
    --color-primary: #461c4b; /* Morado específico: #461c4b */
    --color-secondary: #7b4397; /* Un morado un poco más claro para subtítulos/bordes */
    --color-background: #f0f2f5; /* Gris muy claro de fondo */
    --color-text: #333333; /* Gris oscuro para texto principal */
    --color-border: #cccccc; /* Gris medio para bordes */
    --color-hover-dark: #3a163e; /* Morado más oscuro para hover */

    /* Colores para la puntuación 1-5 */
    --color-score-1: #ff0000; /* 1 - Muy Mal: Rojo */
    --color-score-2: #ffa500; /* 2 - Mal: Naranja */
    --color-score-3: #008000; /* 3 - Regular: Amarillo */
    --color-score-4: #90ee90; /* 4 - Bien: Verde Claro */
    --color-score-5: #008000; /* 5 - Excelente: Verde Fuerte */

    /* Colores para botones de acción */
    --color-action-button: #007bff; /* Azul para botones genéricos */
    --color-action-button-hover: #0056b3;
    --color-reset-button: #6c757d; /* Gris para botón de restablecer */
    --color-reset-button-hover: #5a6268;
}

/* Estilos Generales y Reseteo Básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
}

.container {
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Encabezado Principal */
.main-header {
    background-color: var(--color-primary);
    color: white;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Por defecto en columna para móviles */
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.main-header .logo-container {
    /* Si el logo es muy ancho, ajusta */
}

.main-header .logo {
    max-height: 80px; /* Ajusta el tamaño de tu logo */
    width: auto;
    border-radius: 5px; /* Suaviza bordes si es cuadrado */
}

.main-header h1 {
    margin: 0;
    font-size: 2em;
}

/* Sección de Campos Superiores (Fecha, Evento, Estadio, Líder, Supervisor) */
.top-fields-section {
    background-color: #e6e6ea; /* Un gris ligeramente diferente para esta sección */
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.top-fields-section h2 {
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.8em;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 1em;
    color: var(--color-text);
    background-color: white;
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 28, 75, 0.25); /* Sombra basada en el morado primario */
}


/* Títulos de Sección del Checklist */
.section-title {
    background-color: var(--color-secondary);
    color: white;
    padding: 12px 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 1.5em;
    text-align: center;
}

/* Ítems de Pregunta */
.question-item {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.question-text {
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-text);
    font-size: 1.1em;
}

/* Opciones de Radio Button para Puntuación */
.options-radio {
    display: flex;
    flex-wrap: wrap; /* Permite que las opciones se envuelvan en líneas más pequeñas */
    gap: 10px; /* Espacio entre los botones de opción */
    margin-bottom: 15px;
}

.options-radio input[type="radio"] {
    display: none; /* Oculta el radio button nativo */
}

.options-radio label {
    flex: 1; /* Permite que las etiquetas crezcan y se encojan */
    min-width: 80px; /* Ancho mínimo para cada botón */
    text-align: center;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, border-color 0.3s ease; /* Añade color y border-color a la transición */
    border: 1px solid transparent; /* Para el borde en no seleccionado */
}

/* Estilo para las opciones seleccionadas */
.options-radio input[type="radio"]:checked + label {
    background-color: var(--color-primary); /* Fondo morado al seleccionar */
    color: white; /* Texto blanco al seleccionar */
    border: 2px solid var(--color-primary); /* Borde primario al seleccionar */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.options-radio label:hover {
    opacity: 0.9;
}

/* Colores específicos para cada puntuación */
/* Estos colores se aplicarán cuando la opción NO esté seleccionada */
.option-muy-mal label {
    background-color: var(--color-score-1); /* Rojo */
    color: white;
}
.option-mal label {
    background-color: var(--color-score-2); /* Naranja */
    color: white;
}
.option-regular label {
    background-color: var(--color-score-3); /* Amarillo */
    color: var(--color-text); /* Texto oscuro para contraste en amarillo */
}
.option-bien label {
    background-color: var(--color-score-4); /* Verde Claro */
    color: var(--color-text); /* Texto oscuro para contraste en verde claro */
}
.option-excelente label {
    background-color: var(--color-score-5); /* Verde Fuerte */
    color: white;
}

/* Sección de Subida de Archivos */
.file-upload-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--color-border);
}

.file-upload-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.file-upload-section input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: #e6e6ea; /* Ligeramente más oscuro que el fondo general */
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    border: 1px dashed #b3b3b3; /* Gris más oscuro para el borde de previsualización */
    padding: 10px;
    border-radius: 5px;
    min-height: 60px; /* Para que sea visible incluso sin imágenes */
    align-items: center;
    justify-content: flex-start;
}

.image-preview {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Área de Comentarios */
textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-top: 15px;
    font-size: 1em;
    resize: vertical; /* Permite redimensionar verticalmente */
    color: var(--color-text);
}

textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 28, 75, 0.25); /* Sombra basada en el morado primario */
}


/* Botón de Envío */
button[type="submit"] {
    background-color: var(--color-primary);
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 30px;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button[type="submit"]:hover {
    background-color: var(--color-hover-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Mensajes de Error (si los agregas en PHP) */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.alert-success {
    color: #155724; /* Verde oscuro */
    background-color: #d4edda; /* Verde claro */
    border-color: #c3e6cb; /* Borde verde */
}

.alert-error {
    color: #721c24; /* Rojo oscuro */
    background-color: #f8d7da; /* Rojo claro */
    border-color: #f5c6cb; /* Borde rojo */
}

/* Pie de Página (si usas footer.php) */
.main-footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    color: var(--color-secondary);
    font-size: 0.9em;
}


/* --- Estilos para el Dashboard (dashboard.php) --- */

.dashboard-container {
    max-width: 1200px; /* Un poco más ancho para el dashboard */
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.dashboard-container h2 {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2em;
}

/* Sección de Botones Superiores del Dashboard */
.top-buttons-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.action-button {
    display: inline-block;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    white-space: nowrap; /* Evita que el texto se rompa */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.action-button.primary {
    background-color: var(--color-primary);
    color: white;
}

.action-button.primary:hover {
    background-color: var(--color-hover-dark);
    transform: translateY(-1px);
}

/* Sección de Filtros del Dashboard */
.filters-section {
    background-color: #e6e6ea;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre los elementos */
    align-items: flex-end; /* Alinea los elementos al final */
}

.filters-section h3 {
    color: var(--color-primary);
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espacio entre los grupos de formulario */
    width: 100%;
    justify-content: center;
}

.filters-section .form-group {
    flex: 1 1 calc(33% - 15px); /* 3 columnas en pantallas grandes */
    min-width: 200px; /* Ancho mínimo para evitar que se aplasten */
    margin-bottom: 0;
}

.filters-section select,
.filters-section input[type="text"],
.filters-section input[type="date"] { /* Añadir input[type="date"] */
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 1em;
    color: var(--color-text);
    background-color: white;
}

.filters-section select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.filter-button {
    background-color: var(--color-primary);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    flex-grow: 1;
    max-width: 200px;
    margin-top: 10px; /* Un poco de margen para el botón */
}

.filter-button:hover {
    background-color: var(--color-hover-dark);
}

.filter-button.reset-button {
    background-color: var(--color-reset-button);
}

.filter-button.reset-button:hover {
    background-color: var(--color-reset-button-hover);
}


/* Resultados del Checklist */
.checklist-results {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.checklist-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    background-color: white;
}

.card-header {
    background-color: var(--color-secondary);
    color: white;
    padding: 15px 20px;
    border-bottom: 1px solid #c2b3c7;
}

.card-header h3 {
    margin: 0 0 10px 0;
    font-size: 1.6em;
}

.card-header p {
    margin: 5px 0;
    font-size: 0.95em;
}

.card-body {
    padding: 20px;
}

.card-body h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.3em;
}

.answers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.answer-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    background-color: #fcfcfc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.question-text-dashboard {
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 10px;
    font-size: 0.95em;
}

.score-display {
    margin-bottom: 8px;
    font-size: 0.9em;
}

.score-display .score-value {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: white;
}

/* Colores para los scores en el dashboard */
.score-1 { background-color: var(--color-score-1); }
.score-2 { background-color: var(--color-score-2); }
.score-3 { background-color: var(--color-score-3); color: var(--color-text); }
.score-4 { background-color: var(--color-score-4); color: var(--color-text); }
.score-5 { background-color: var(--color-score-5); }


.comments-display {
    font-size: 0.9em;
    color: #555;
    margin-top: 10px;
    border-top: 1px dashed #eee;
    padding-top: 10px;
}

.answer-images {
    margin-top: 15px;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

.answer-images h5 {
    color: var(--color-text);
    margin-bottom: 10px;
    font-size: 1em;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center; /* Centrar verticalmente si las imágenes son de diferentes alturas */
}

/* Miniatura de imagen en el dashboard */
.dashboard-image-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.dashboard-image-thumb:hover {
    transform: scale(1.05);
    border-color: var(--color-primary);
}

.no-results {
    text-align: center;
    color: var(--color-secondary);
    font-size: 1.2em;
    padding: 30px;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background-color: #fdfdfd;
}


/* Media Queries para Responsividad */
@media (min-width: 992px) { /* Para 3 columnas en filtros */
    .filters-section .form-group {
        flex: 1 1 calc(33% - 15px);
    }
}
@media (max-width: 991px) and (min-width: 768px) { /* Para 2 columnas en filtros */
    .filters-section .form-group {
        flex: 1 1 calc(50% - 15px);
    }
    .top-buttons-section {
        justify-content: space-around;
        padding: 10px;
    }
    .action-button {
        flex-grow: 0;
    }
}

@media (max-width: 767px) { /* Para 1 columna en filtros y botones */
    .filters-section {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .filters-section .form-group {
        flex: 1 1 100%;
        min-width: unset;
    }
    .filter-form, .top-buttons-section {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-button, .action-button {
        max-width: 100%;
        flex-grow: 1;
    }
    .answers-grid {
        grid-template-columns: 1fr;
    }
}
/* Variables CSS para colores */
:root {
    --color-primary: #461c4b; /* Morado específico: #461c4b */
    --color-secondary: #7b4397; /* Un morado un poco más claro para subtítulos/bordes */
    --color-background: #f0f2f5; /* Gris muy claro de fondo */
    --color-text: #333333; /* Gris oscuro para texto principal */
    --color-border: #cccccc; /* Gris medio para bordes */
    --color-hover-dark: #3a163e; /* Morado más oscuro para hover */

    /* Colores para la puntuación 1-5 */
    --color-score-1: #ff0000; /* 1 - Muy Mal: Rojo */
    --color-score-2: #ffa500; /* 2 - Mal: Naranja */
    --color-score-3: #008000; /* 3 - Regular: Amarillo */
    --color-score-4: #90ee90; /* 4 - Bien: Verde Claro */
    --color-score-5: #008000; /* 5 - Excelente: Verde Fuerte */

    /* Colores para botones de acción */
    --color-action-button: #007bff; /* Azul para botones genéricos */
    --color-action-button-hover: #0056b3;
    --color-delete-button: #dc3545; /* Rojo para el botón de borrar */
    --color-delete-button-hover: #c82333;
}

/* Estilos Generales y Reseteo Básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
}

.container {
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Encabezado Principal */
.main-header {
    background-color: var(--color-primary);
    color: white;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Por defecto en columna para móviles */
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.main-header .logo-container {
    /* Si el logo es muy ancho, ajusta */
}

.main-header .logo {
    max-height: 80px; /* Ajusta el tamaño de tu logo */
    width: auto;
    border-radius: 5px; /* Suaviza bordes si es cuadrado */
}

.main-header h1 {
    margin: 0;
    font-size: 2em;
}

/* Sección de Campos Superiores (Fecha, Evento, Estadio, Líder, Supervisor) */
.top-fields-section {
    background-color: #e6e6ea; /* Un gris ligeramente diferente para esta sección */
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.top-fields-section h2 {
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.8em;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 1em;
    color: var(--color-text);
    background-color: white;
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 28, 75, 0.25); /* Sombra basada en el morado primario */
}


/* Títulos de Sección del Checklist */
.section-title {
    background-color: var(--color-secondary);
    color: white;
    padding: 12px 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 1.5em;
    text-align: center;
}

/* Ítems de Pregunta */
.question-item {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.question-text {
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-text);
    font-size: 1.1em;
}

/* Opciones de Radio Button para Puntuación */
.options-radio {
    display: flex;
    flex-wrap: wrap; /* Permite que las opciones se envuelvan en líneas más pequeñas */
    gap: 10px; /* Espacio entre los botones de opción */
    margin-bottom: 15px;
}

.options-radio input[type="radio"] {
    display: none; /* Oculta el radio button nativo */
}

.options-radio label {
    flex: 1; /* Permite que las etiquetas crezcan y se encojan */
    min-width: 80px; /* Ancho mínimo para cada botón */
    text-align: center;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, border-color 0.3s ease; /* Añade color y border-color a la transición */
    border: 1px solid transparent; /* Para el borde en no seleccionado */
}

/* Estilo para las opciones seleccionadas */
.options-radio input[type="radio"]:checked + label {
    background-color: var(--color-primary); /* Fondo morado al seleccionar */
    color: white; /* Texto blanco al seleccionar */
    border: 2px solid var(--color-primary); /* Borde primario al seleccionar */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.options-radio label:hover {
    opacity: 0.9;
}

/* Colores específicos para cada puntuación */
/* Estos colores se aplicarán cuando la opción NO esté seleccionada */
.option-muy-mal label {
    background-color: var(--color-score-1); /* Rojo */
    color: white;
}
.option-mal label {
    background-color: var(--color-score-2); /* Naranja */
    color: white;
}
.option-regular label {
    background-color: var(--color-score-3); /* Amarillo */
    color: var(--color-text); /* Texto oscuro para contraste en amarillo */
}
.option-bien label {
    background-color: var(--color-score-4); /* Verde Claro */
    color: var(--color-text); /* Texto oscuro para contraste en verde claro */
}
.option-excelente label {
    background-color: var(--color-score-5); /* Verde Fuerte */
    color: white;
}

/* Sección de Subida de Archivos */
.file-upload-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--color-border);
}

.file-upload-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.file-upload-section input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: #e6e6ea; /* Ligeramente más oscuro que el fondo general */
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    border: 1px dashed #b3b3b3; /* Gris más oscuro para el borde de previsualización */
    padding: 10px;
    border-radius: 5px;
    min-height: 60px; /* Para que sea visible incluso sin imágenes */
    align-items: center;
    justify-content: flex-start;
}

.image-preview {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Área de Comentarios */
textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin-top: 15px;
    font-size: 1em;
    resize: vertical; /* Permite redimensionar verticalmente */
    color: var(--color-text);
}

textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 28, 75, 0.25); /* Sombra basada en el morado primario */
}


/* Botón de Envío */
button[type="submit"] {
    background-color: var(--color-primary);
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 30px;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button[type="submit"]:hover {
    background-color: var(--color-hover-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Mensajes de Alerta (Éxito/Error) */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.alert-success {
    color: #155724; /* Verde oscuro */
    background-color: #d4edda; /* Verde claro */
    border-color: #c3e6cb; /* Borde verde */
}

.alert-error {
    color: #721c24; /* Rojo oscuro */
    background-color: #f8d7da; /* Rojo claro */
    border-color: #f5c6cb; /* Borde rojo */
}

/* Pie de Página */
.main-footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    color: var(--color-secondary);
    font-size: 0.9em;
}


/* --- Estilos Específicos del Dashboard (dashboard.php) --- */

.dashboard-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.dashboard-container h2 {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2em;
}

/* Sección de Botones Superiores del Dashboard */
.top-buttons-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.action-button {
    display: inline-block;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    white-space: nowrap; /* Evita que el texto se rompa */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.action-button.primary {
    background-color: var(--color-primary);
    color: white;
}

.action-button.primary:hover {
    background-color: var(--color-hover-dark);
    transform: translateY(-1px);
}

/* Sección de Filtros del Dashboard */
.filters-section {
    background-color: #e6e6ea;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.filters-section h3 {
    color: var(--color-primary);
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    justify-content: center;
}

.filters-section .form-group {
    flex: 1 1 calc(33% - 15px);
    min-width: 200px;
    margin-bottom: 0;
}

.filters-section select,
.filters-section input[type="text"],
.filters-section input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 1em;
    color: var(--color-text);
    background-color: white;
}

.filters-section select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.filter-button {
    display: inline-block; /* Para asegurar que el `a` se comporte como botón */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    flex-grow: 1;
    max-width: 200px;
    margin-top: 10px;
    text-align: center; /* Centrar texto/icono si es un enlace */
    text-decoration: none; /* Quitar subrayado de enlace */
}

/* Nuevo estilo para botones de filtro blancos */
.filter-button.white-button {
    background-color: white;
    color: var(--color-primary); /* Texto morado */
    border: 1px solid var(--color-primary); /* Borde morado */
}

.filter-button.white-button:hover {
    background-color: var(--color-primary); /* Fondo morado al pasar el ratón */
    color: white; /* Texto blanco al pasar el ratón */
    border-color: var(--color-primary);
}


/* Resultados del Checklist */
.checklist-results {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.checklist-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    background-color: white;
    position: relative; /* Necesario para posicionar el icono de borrar */
}

.card-header {
    background-color: var(--color-secondary);
    color: white;
    padding: 15px 20px;
    border-bottom: 1px solid #c2b3c7;
    padding-right: 60px; /* Espacio para el icono de borrar */
}

.card-header h3 {
    margin: 0 0 10px 0;
    font-size: 1.6em;
}

.card-header p {
    margin: 5px 0;
    font-size: 0.95em;
}

/* Estilos para el icono de borrar */
.delete-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    color: white; /* Color blanco para el icono */
    font-size: 1.5em; /* Tamaño del icono */
    cursor: pointer;
    text-decoration: none; /* Asegura que no tenga subrayado si es un enlace */
    transition: color 0.2s ease, transform 0.2s ease;
}

.delete-icon:hover {
    color: var(--color-delete-button); /* Rojo al pasar el ratón (var --color-delete-button) */
    transform: scale(1.1);
}


.card-body {
    padding: 20px;
}

.card-body h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.3em;
}

.answers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.answer-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    background-color: #fcfcfc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.question-text-dashboard {
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 10px;
    font-size: 0.95em;
}

.score-display {
    margin-bottom: 8px;
    font-size: 0.9em;
}

.score-display .score-value {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: white;
}

/* Colores para los scores en el dashboard */
.score-1 { background-color: var(--color-score-1); }
.score-2 { background-color: var(--color-score-2); }
.score-3 { background-color: var(--color-score-3); color: var(--color-text); }
.score-4 { background-color: var(--color-score-4); color: var(--color-text); }
.score-5 { background-color: var(--color-score-5); }


.comments-display {
    font-size: 0.9em;
    color: #555;
    margin-top: 10px;
    border-top: 1px dashed #eee;
    padding-top: 10px;
}

.answer-images {
    margin-top: 15px;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

.answer-images h5 {
    color: var(--color-text);
    margin-bottom: 10px;
    font-size: 1em;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Miniatura de imagen en el dashboard */
.dashboard-image-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.dashboard-image-thumb:hover {
    transform: scale(1.05);
    border-color: var(--color-primary);
}

.no-results {
    text-align: center;
    color: var(--color-secondary);
    font-size: 1.2em;
    padding: 30px;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background-color: #fdfdfd;
}


/* Media Queries para Responsividad */
@media (min-width: 992px) {
    .filters-section .form-group {
        flex: 1 1 calc(33% - 15px);
    }
}
@media (max-width: 991px) and (min-width: 768px) {
    .filters-section .form-group {
        flex: 1 1 calc(50% - 15px);
    }
    .top-buttons-section {
        justify-content: space-around;
        padding: 10px;
    }
    .action-button {
        flex-grow: 0;
    }
}

@media (max-width: 767px) {
    .filters-section {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .filters-section .form-group {
        flex: 1 1 100%;
        min-width: unset;
    }
    .filter-form, .top-buttons-section {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-button, .action-button {
        max-width: 100%;
        flex-grow: 1;
    }
    .answers-grid {
        grid-template-columns: 1fr;
    }
}
/* ... (mantener todos los estilos anteriores) ... */

/* Sección de Filtros del Dashboard */
.filters-section {
    /* ... (mantener estilos existentes) ... */
}

.filters-section h3 {
    /* ... (mantener estilos existentes) ... */
}

.filter-form {
    /* ... (mantener estilos existentes) ... */
}

.filters-section .form-group {
    /* ... (mantener estilos existentes) ... */
}

.filters-section select,
.filters-section input[type="text"],
.filters-section input[type="date"] {
    /* ... (mantener estilos existentes) ... */
}

.filters-section select:disabled {
    /* ... (mantener estilos existentes) ... */
}

.filter-button {
    display: inline-block; /* Para asegurar que el `a` se comporte como botón */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em; /* Un poco más grande para mejor visibilidad */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; /* Añadir transform para hover */
    flex-grow: 1;
    max-width: 200px;
    margin-top: 10px;
    text-align: center; /* Centrar texto/icono si es un enlace */
    text-decoration: none; /* Quitar subrayado de enlace */
    font-weight: bold; /* Hacer el texto más legible */
}

/* Estilo base para los botones de filtro, incluyendo el "Aplicar Filtros" */
.filter-button[type="submit"], /* Selecciona el botón submit */
.filter-button.white-button { /* Selecciona el botón borrar filtro */
    background-color: white;
    color: var(--color-primary); /* Texto morado */
    border: 1px solid var(--color-primary); /* Borde morado */
}

.filter-button[type="submit"]:hover,
.filter-button.white-button:hover {
    background-color: var(--color-primary); /* Fondo morado al pasar el ratón */
    color: white; /* Texto blanco al pasar el ratón */
    border-color: var(--color-primary);
    transform: translateY(-1px); /* Ligero efecto de elevación */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil */
}

/* Si quieres que "Aplicar Filtros" tenga un color inicial diferente (ej. morado):
.filter-button[type="submit"] {
    background-color: var(--color-primary);
    color: white;
    border: 1px solid var(--color-primary);
}
.filter-button[type="submit"]:hover {
    background-color: var(--color-hover-dark);
}
*/

/* ... (mantener el resto de tu style.css sin cambios) ... */
/*
 * =========================================================
 * Estilos actualizados para el nuevo diseño del checklist de terceros
 * (Basado en la imagen proporcionada)
 * =========================================================
 */

/* Títulos de Sección del Checklist (igual que en la imagen) */
.section-title-terceros {
    background-color: var(--color-primary); /* Morado principal */
    color: white;
    padding: 15px 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 1.5em;
    text-align: center;
}

/* Contenedor de cada pregunta, imitando el diseño de la imagen */
.question-item-terceros {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Estilo para el texto de la pregunta */
.question-text-terceros {
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-text);
    font-size: 1.1em;
}

/* Contenedor para las opciones de radio */
.options-radio-terceros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.options-radio-terceros input[type="radio"] {
    display: none;
}

/* Estilo base para las etiquetas de los radio buttons (los botones "1 - No cumple", etc.) */
.options-radio-terceros label {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    background-color: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Estilo para los botones seleccionados (cambian a morado) */
.options-radio-terceros input[type="radio"]:checked + label {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Estilo para el hover de los botones */
.options-radio-terceros label:hover {
    border-color: var(--color-primary);
    background-color: #e6e6ea;
}

/* Estilo específico para los botones según la imagen */
.options-radio-terceros .option-1 {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.options-radio-terceros .option-2,
.options-radio-terceros .option-3 {
    background-color: #ffffff;
    color: var(--color-text);
    border-color: var(--color-border);
}
/* Estilo para los checked, sobrescribe el color de fondo */
.options-radio-terceros input[type="radio"]:checked + label.option-1 {
    background-color: var(--color-primary);
}
.options-radio-terceros input[type="radio"]:checked + label.option-2 {
    background-color: var(--color-primary);
}
.options-radio-terceros input[type="radio"]:checked + label.option-3 {
    background-color: var(--color-primary);
}

/* Estilo para la sección de subir fotos */
.file-upload-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--color-border);
}
.file-upload-section label {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}
.file-upload-section .file-input-container {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    overflow: hidden;
}
.file-upload-section input[type="file"] {
    display: none;
}
.file-upload-section .file-upload-button {
    background-color: #e6e6ea;
    padding: 10px 15px;
    cursor: pointer;
    border-right: 1px solid var(--color-border);
}
.file-upload-section .file-label {
    flex-grow: 1;
    padding: 10px;
    color: #888;
}

/* Estilo para el área de comentarios */
.comments-section-terceros {
    margin-top: 20px;
}
.comments-section-terceros label {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}
.comments-section-terceros textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    resize: vertical;
}

/* Media Queries para responsividad, adaptadas a esta nueva estructura */
@media (max-width: 480px) {
    .options-radio-terceros {
        flex-direction: column;
        align-items: stretch;
    }
    .options-radio-terceros label {
        min-width: unset;
    }
}