/* Diseño propio del ERP escolar, encima de la base común (app.css). */
:root {
  --color-primary: #1f5f8b;
  --color-primary-dark: #174a6d;
  --color-primary-light: #e3eef6;
  --acento: #e8833a;
  --ancho-menu: 250px;
  --alto-barra: 60px;
}

body { background: var(--color-bg-alt); }

/* Barra superior */
.barra-superior {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--alto-barra); padding: 0 16px;
  background: #fff; border-bottom: 3px solid var(--acento);
}
.marca { display: flex; align-items: center; gap: 10px; color: var(--color-dark); font-weight: 700; text-decoration: none; min-width: 0; }
.marca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-logo { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.barra-usuario { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 0.92rem; }
.barra-nombre small { display: block; color: var(--color-muted); font-size: 0.78rem; line-height: 1.1; }
.barra-usuario .link-button { color: var(--color-primary); }
.selector-hijo { display: flex; align-items: center; gap: 6px; margin: 0; }
.selector-hijo select { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.barra-superior .nav-toggle { display: none; }
.barra-superior .nav-toggle span { background: var(--color-dark); }

/* Menú lateral */
.marco { display: flex; min-height: calc(100vh - var(--alto-barra)); }
.menu-lateral {
  flex: 0 0 var(--ancho-menu); width: var(--ancho-menu);
  background: #12324a; color: #dbe7f1; padding: 12px 0 40px;
  position: sticky; top: var(--alto-barra); height: calc(100vh - var(--alto-barra)); overflow-y: auto;
  display: block;
}
.menu-lateral a { display: block; padding: 7px 20px 7px 30px; color: #dbe7f1; text-decoration: none; font-size: 0.93rem; }
.menu-lateral a:hover, .menu-lateral a:focus { background: rgba(255, 255, 255, 0.08); color: #fff; }
.menu-lateral a.activo { background: rgba(232, 131, 58, 0.22); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.menu-lateral .menu-seccion-enlace { padding-left: 20px; font-weight: 600; }
.menu-seccion summary { list-style: none; cursor: pointer; padding: 9px 20px; font-weight: 600; color: #fff; display: flex; justify-content: space-between; }
.menu-seccion summary::-webkit-details-marker { display: none; }
.menu-seccion summary::after { content: "›"; transition: transform 0.15s; }
.menu-seccion[open] summary::after { transform: rotate(90deg); }
.menu-lateral .menu-pronto { color: #8ea6ba; }
.menu-lateral small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.1); padding: 1px 6px; border-radius: 8px; margin-left: 4px; }

.contenido { flex: 1; min-width: 0; padding: 28px 32px 60px; max-width: 1200px; }
.sin-menu .contenido { margin: 0 auto; }

/* Bloques */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 16px 0 24px; }
.tarjeta { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px 18px; color: inherit; text-decoration: none; display: block; }
a.tarjeta:hover { border-color: var(--color-primary); box-shadow: var(--shadow); }
.tarjeta-cifra { font-size: 1.9rem; font-weight: 700; color: var(--color-dark); line-height: 1.1; display: block; }
.tarjeta-nombre { color: var(--color-muted); font-size: 0.92rem; }
.tarjeta.alerta { border-color: #f0b37e; background: #fff8f1; }
.accesos-rapidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 24px; }
.acceso-rapido { background: var(--color-primary); color: #fff; border-radius: var(--radius); padding: 18px; font-weight: 600; text-decoration: none; }
.acceso-rapido:hover, .acceso-rapido:focus { background: var(--color-primary-dark); color: #fff; }
.acceso-rapido.desactivado { background: #9fb3c2; pointer-events: none; }
.acceso-rapido small { display: block; font-weight: 400; opacity: 0.85; }
.lista-pendientes { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 6px 18px; margin: 0 0 24px; }
.lista-pendientes li { padding: 8px 0; border-bottom: 1px solid var(--color-border); list-style: none; }
.lista-pendientes li:last-child { border-bottom: 0; }
.lista-pendientes { padding-left: 18px; }
.ficha { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.ficha h2 { margin-top: 0; font-size: 1.1rem; }
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; margin: 0; }
.ficha-datos dt { color: var(--color-muted); font-size: 0.85rem; }
.ficha-datos dd { margin: 0 0 4px; color: var(--color-dark); }
.ficha-restringida { border-color: #f0b37e; background: #fffaf4; }
.credenciales { background: #fff; border: 2px dashed var(--acento); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 20px; }
.credenciales code { font-size: 1.05rem; background: var(--color-bg-alt); padding: 2px 6px; border-radius: 6px; }
.casillas { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.casillas label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.acciones-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acciones-linea form { margin: 0; }
.etiqueta-rol { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 0.82rem; }
.matriz-permisos td, .matriz-permisos th { text-align: center; }
.matriz-permisos td:first-child, .matriz-permisos th:first-child { text-align: left; }
.si { color: var(--color-success); font-weight: 700; }
.no { color: #b6bec8; }

/* Acceso */
.acceso { max-width: 420px; margin: 40px auto; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 30px 30px 24px; box-shadow: var(--shadow); }
.acceso-logo { display: block; max-height: 90px; max-width: 220px; margin: 0 auto 14px; object-fit: contain; }
.acceso h1 { text-align: center; font-size: 1.35rem; margin: 0 0 4px; }
.acceso-sub { text-align: center; color: var(--color-muted); margin: 0 0 20px; }
.acceso .btn { width: 100%; }
.acceso-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; font-size: 0.92rem; }
.acceso-pie select { padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; }

/* Móvil y tableta */
@media (max-width: 900px) {
  .barra-superior .nav-toggle { display: inline-flex; }
  .menu-lateral { display: none; position: fixed; left: 0; top: var(--alto-barra); bottom: 0; z-index: 40; width: 82vw; max-width: 320px; height: auto; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25); }
  .menu-lateral.is-open { display: block; }
  .contenido { padding: 18px 16px 50px; }
  .barra-nombre { display: none; }
  .marca-logo { height: 32px; }
  .selector-hijo label { display: none; }
}
@media (max-width: 480px) {
  .acceso { margin: 16px auto; padding: 22px 18px; border-radius: 10px; }
  .barra-usuario { gap: 8px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* En español no se pone mayúscula a cada palabra («Pendiente de documentación»). */
.badge { text-transform: none; }

/* Formación */
[hidden] { display: none !important; }
.texto-largo { white-space: pre-wrap; overflow-wrap: anywhere; }
.recurso-fila { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.recurso { flex: 1; min-width: 0; }
.recurso-icono { margin-right: 4px; }
.video-marco { position: relative; padding-top: 56.25%; margin-top: 8px; max-width: 640px; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.tarea-fila { padding: 8px 0; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.nuevo-material summary { display: inline; }
.lista-tareas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 10px 0 24px; }
.editor-entrega { width: 100%; min-height: 220px; font: inherit; line-height: 1.5; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px; }
.cuestionario li { margin-bottom: 14px; }
.botones-entrega { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn-entregar { font-size: 1.05rem; padding: 12px 26px; }

.tabla-notas td, .tabla-notas th { text-align: center; white-space: nowrap; }
.tabla-notas td:first-child, .tabla-notas th:first-child { text-align: left; }
.valoracion { border-left: 4px solid var(--color-success); }
.nota-grande { font-size: 2rem; font-weight: 700; color: var(--color-dark); }

.whatsapp-previa { background: #e7f8e6; border-radius: 10px; padding: 10px 14px; max-width: 560px; font-size: 0.95rem; }

/* Asistencia */
.tabla-lista td, .tabla-lista th { text-align: center; }
.tabla-lista td:first-child, .tabla-lista th:first-child, .tabla-lista td:last-child { text-align: left; }
.tabla-lista input[type=radio] { width: 20px; height: 20px; }
.fila-falta { background: #fff1f1; }
.fila-retraso { background: #fff8e8; }
.fila-alerta { background: #fff1f1; }

/* Tutorías y agenda */
.agenda-hoy { border-color: var(--acento); box-shadow: inset 4px 0 0 var(--acento); }
.agenda-examen strong { color: #b42318; }
.huecos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 14px; }
.hueco { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: #fff; }
.hueco summary { cursor: pointer; font-weight: 600; }
.nota-incidencia strong { color: #b42318; }
.nota-felicitacion strong { color: var(--color-success); }

/* Horarios */
.tabla-horario td, .tabla-horario th { text-align: center; vertical-align: top; min-width: 120px; }
.tabla-horario th:first-child { text-align: left; min-width: 90px; }
.tabla-horario select { width: 100%; font-size: 0.85rem; margin-bottom: 4px; }
.tabla-horario .sel-aula { font-size: 0.78rem; color: var(--color-muted); }
.fila-recreo { background: #f5f6f8; }
.col-hoy { background: #fff7ed; }
.sesion-ahora { background: #fff7ed; }

/* Economía */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.texto-mal { color: #b42323; }
.fila-inactiva { color: var(--color-muted); }
.recibo-cabecera { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.recibo-numero { text-align: right; }
.data-table tfoot th, .data-table tfoot td { border-top: 1px solid var(--color-border); }
.data-table tfoot th { text-align: right; }
.vista-previa { border-left: 3px solid var(--color-primary); padding-left: 12px; }
@media print {
  .barra-superior, .menu-lateral, .nav-toggle, .no-imprimir, .form-status, footer { display: none !important; }
  .marco, .contenido { margin: 0 !important; padding: 0 !important; display: block !important; }
  .ficha { border: none !important; box-shadow: none !important; }
  .table-wrap { overflow: visible !important; }
}

/* Servicios escolares */
.solo-imprimir { display: none; }
.tabla-menus input { width: 100%; min-width: 130px; }
.fila-lunes th, .fila-lunes td { border-top: 2px solid var(--color-border); }
@media print { .solo-imprimir { display: block !important; } }

/* Autorizaciones y documentos */
.ficha-pendiente { border-left: 4px solid #f59e0b; }
.ficha-recogida { break-inside: avoid; }

/* Biblioteca: etiquetas de los ejemplares */
.etiquetas { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.etiqueta { border: 1px dashed #999; padding: 8px; font-size: 0.8rem; text-align: center; break-inside: avoid; }
.etiqueta strong { font-size: 1.1rem; letter-spacing: 1px; }
@media print { .etiquetas.solo-imprimir { display: grid !important; } }

/* Informes y boletines */
.tarjetas-informes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tarjeta-informe { display: flex; flex-direction: column; gap: 4px; color: var(--color-dark); margin: 0; }
.tarjeta-informe:hover { text-decoration: none; background: var(--color-bg-alt); }
.tabla-boletin th:first-child { min-width: 160px; }
.tabla-boletin td { min-width: 90px; vertical-align: top; }
.input-nota { width: 64px; text-align: center; }
.input-obs { width: 100%; min-width: 90px; font-size: 0.78rem; margin-top: 4px; }
.tabla-boletin textarea { min-width: 200px; font-size: 0.85rem; }