/* --- Estilos Generales --- */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5; margin: 0; padding: 20px; color: #333; }
.container { max-width: 900px; margin: auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; }
header { background-color: #0056b3; color: white; padding: 20px; text-align: center; }
h1 { margin: 0; }
nav { display: flex; justify-content: center; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
nav button { background: transparent; border: 1px solid white; color: white; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.3s; }
nav button.active, nav button:hover { background: white; color: #0056b3; }
main { padding: 20px; }
hr { margin: 20px 0; border: 0; border-top: 1px solid #e0e0e0; }
section { display: none; }
section.active-section { display: block; }
h2, h3, h4 { color: #0056b3; border-bottom: 2px solid #f0f2f5; padding-bottom: 5px; margin-top: 0; }
h4 { border: none; margin-bottom: 10px;}
.card { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
/* --- Formularios y Botones --- */
form { display: flex; flex-direction: column; gap: 15px; }
.inline-form { display: flex; flex-direction: row; align-items: center; gap: 10px; }
input[type="text"], input[type="number"], input[type="date"], select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
button { padding: 12px 20px; border: none; background-color: #0056b3; color: white; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; }
button:hover { background-color: #004494; }
button[type="button"] { background-color: #6c757d; }
button[type="button"]:hover { background-color: #5a6268; }
#print-all-btn { background-color: #28a745; margin-bottom: 20px;}
#print-all-btn:hover { background-color: #218838; }
/* --- Listas y Vistas --- */
ul { list-style: none; padding: 0; }
ul li { background: #e9ecef; padding: 8px 12px; border-radius: 4px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
.horario-item, .op-list-item { border: 1px solid #ccc; padding: 15px; border-radius: 8px; margin-bottom: 10px; overflow: auto; }
.horario-item h3, .op-list-item h5 { margin-top: 0; }
.horario-item .actions, .op-list-item .actions { float: right; }
.actions button { padding: 5px 10px; font-size: 12px; margin-left: 5px; }
.edit-btn { background-color: #ffc107; }
.edit-btn:hover { background-color: #e0a800; }
.delete-btn, .delete-prof-btn, .delete-asig-btn, .delete-ing-btn { background-color: #dc3545; }
.delete-btn:hover, .delete-prof-btn:hover, .delete-asig-btn:hover, .delete-ing-btn:hover { background-color: #c82333; }
.delete-prof-btn, .delete-asig-btn, .delete-ing-btn { padding: 4px 8px; font-size: 12px; border: none; color: white; border-radius: 4px; cursor: pointer; }
/* --- Grupos de Asignaturas --- */
.asignatura-group { margin-bottom: 25px; border-left: 3px solid #0056b3; padding-left: 15px; }
.asignatura-group h3 { border-bottom: none; margin-bottom: 10px; }
/* --- Checkbox, Enlace y Modo Bloqueado --- */
.checkbox-container { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.checkbox-container input { width: auto; }
.nav-link { display: block; width: fit-content; margin-top: 15px; padding: 10px 15px; background-color: #28a745; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; }
.nav-link:hover { background-color: #218838; }
#config-content-wrapper.locked > .card, #config-content-wrapper.locked h3 { display: none; }
#config-content-wrapper.locked::before { content: '🔒 La sección de configuración está bloqueada. Haz clic en la pestaña "Configuración 🔒" e ingresa la clave para desbloquear.'; display: block; padding: 20px; background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; border-radius: 8px; text-align: center; font-weight: bold; }
/* --- Ventana Modal --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; }
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close-btn:hover, .close-btn:focus { color: black; text-decoration: none; cursor: pointer; }
/* --- Estilos de Impresión --- */
@media print {
    @page { size: portrait; margin: 2cm; }
    body > .container, .modal { display: none; }
    #print-area { display: block; }
    .op-print-sheet { width: 100%; padding: 20px; box-sizing: border-box; border: none; margin-bottom: 20px; page-break-after: always; }
    .op-print-sheet h2 { text-align: center; color: black; border-bottom: 2px solid black; }
    .op-print-sheet p { font-size: 14pt; margin: 8px 0; }
    .ingredientes-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 12pt; }
    .ingredientes-table th, .ingredientes-table td { border: 1px solid #333; padding: 8px; text-align: left; }
    .ingredientes-table th { background-color: #f2f2f2; }
    .checkbox-col { width: 100px; height: 40px; }
}