/* public/css/style.css */
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; }
.container { width: 80%; margin: auto; overflow: hidden; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
header { background: #cf2e34; color: #fff; padding: 1rem 0; text-align: center; }
header a { color: #fff; text-decoration: none; margin: 0 10px; }
nav { background: #444; padding: 0.5rem; text-align: center; }
nav a { color: #fff; margin: 0 15px; text-decoration: none; }
nav a:hover { text-decoration: underline; }
h1, h2, h3 { margin-bottom: 0.7em; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"], input[type="password"], textarea {
    width: calc(100% - 22px); padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px;
}
button, .button {
    background: #007bff; color: #fff; border: 0; padding: 10px 15px; cursor: pointer; border-radius: 4px; text-decoration: none; display: inline-block;
}
button:hover, .button:hover { background: #0056b3; }
.error { background: #ffdddd; border: 1px solid #f00; color: #d8000c; padding: 10px; margin-bottom: 15px; border-radius: 4px;}
.success { background: #ddffdd; border: 1px solid #008000; color: #006400; padding: 10px; margin-bottom: 15px; border-radius: 4px;}
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
th { background-color: #f0f0f0; }
.qualification-layout { display: flex; gap: 20px; margin-top: 20px; }
.pdf-viewer { flex: 1; min-width: 0; /* Permite que el iframe se encoja */ }
.criteria-form { flex: 1; }
.criteria-item { margin-bottom: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px; }
.stars { display: inline-block; } /* Para alinear estrellas */
.stars input[type="radio"] { display: none; }
.stars label {
    font-size: 2em; color: #ccc; cursor: pointer; padding: 0 0.1em;
    /* Para que se seleccionen de izquierda a derecha al pasar el mouse */
    float: right;
}
/* Selección al pasar el mouse */
.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label { color: #ffc107; }
/* Selección con click */
.stars > input:checked ~ label { color: #ffc107; }
/* Para que la primera estrella aparezca a la izquierda, revertimos el float */
.stars label:nth-child(11) { float: left; } /* 5th star */
.stars label:nth-child(9) { float: left; } /* 4th star */
.stars label:nth-child(7) { float: left; } /* 3rd star */
.stars label:nth-child(5) { float: left; } /* 2nd star */
.stars label:nth-child(3) { float: left; } /* 1st star (0.2 value) */

/* ... (tu CSS existente) ... */

.flash-message {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.flash-message.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.flash-message.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.flash-message.warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.flash-message.info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* ... (tu CSS existente) ... */

.flash-message { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.flash-message.success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.flash-message.error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.flash-message.warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.flash-message.info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/* Layout Básico Admin */
.admin-container { display: flex; min-height: calc(100vh - 100px); /* Ajusta según tus headers/footers */ }
.admin-sidebar { width: 240px; background-color: #f8f9fa; color: #fff; padding: 15px; }
.admin-sidebar h3 { margin-top: 0; color: #fff; padding-bottom: 10px; border-bottom: 1px solid #4b545c;}
.admin-sidebar ul { list-style-type: none; padding: 0; margin:0; }
.admin-sidebar ul li a { color: #4d4d4d; text-decoration: none; display: block; padding: 10px 15px; border-radius: 4px; margin-bottom: 5px; }
.admin-sidebar ul li a:hover, .admin-sidebar ul li a.active { background-color: #cf2e34; color: #fff; }
.admin-content { flex-grow: 1; padding: 20px; background-color: #f8f9fa; }
.admin-content h2 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #dee2e6; margin-bottom: 20px;}

/* Formularios Admin */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .5rem; font-weight: bold; }
.form-control { display: block; width: 100%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; box-sizing: border-box; }
.form-control:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); }
textarea.form-control { min-height: 100px; }
.button-primary, button[type="submit"] 
.button-secondary { background-color: #6c757d; border-color: #6c757d; color: #fff !important; }
.button-danger { background-color: #dc3545; border-color: #dc3545; color: #fff !important; }
.action-button, .table-actions a { margin-right: 5px; padding: 6px 12px; text-decoration: none; border-radius: 4px; font-size: 0.9em; display: inline-block; border: none; cursor:pointer; }
.action-button-edit { background-color: #ffc107; color: #212529; }
.action-button-delete { background-color: #dc3545; color: #fff; }
.action-button-create { background-color: #28a745; color: #fff; margin-bottom: 15px; }

.modal-instructions {
        display: none; /* Oculto por defecto */
        position: fixed;
        z-index: 1001; /* Por encima de otros elementos */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.6); /* Fondo oscuro semi-transparente */
    }
    .modal-instructions-content {
        background-color: #fefefe;
        margin: 10% auto; /* Centrado vertical y horizontal */
        padding: 25px;
        border: 1px solid #888;
        width: 70%;
        max-width: 800px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        position: relative;
    }
    .modal-instructions-close-btn {
        color: #aaa;
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 28px;
        font-weight: bold;
        line-height: 1;
    }
    .modal-instructions-close-btn:hover,
    .modal-instructions-close-btn:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    .modal-instructions-content h3 {
        margin-top: 0;
        color: #333;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .modal-instructions-text {
        margin-top: 15px;
        line-height: 1.7;
        max-height: 60vh; /* Para que el texto no haga el modal demasiado alto */
        overflow-y: auto; /* Scroll si el texto es muy largo */
    }
    #openInstructionsBtn { /* Estilo para el botón de abrir */
        margin-bottom: 15px;
        padding: 8px 15px;
        font-size:20px;
        background-color: #cf2e34;
        padding: 20px;
    }
    .modal-instructions-text ul,
.modal-instructions-text ol {
    margin-left: 0px; /* O padding-left, según prefieras */
    margin-top: 10px;
    margin-bottom: 10px;
}
.modal-instructions-text p {
    margin-top: 0;
    margin-bottom: 10px;
}