/* CSS Document
 *
 * Hoja de estilos común de Encuestas FEJENO.
 *
 *  - Colores en variables (:root). Modo claro por defecto; modo oscuro si el sistema lo pide
 *    (prefers-color-scheme) o si el usuario lo elige con el selector de tema (funciones/tema.js),
 *    que pone data-tema="claro" | "oscuro" en <html>. Sin data-tema se sigue al sistema (auto).
 *  - Adaptación a pantalla: escritorio (> 1200px), tablet (<= 1200px) y móvil (<= 900px / <= 600px)
 *    al final del fichero.
 */

@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap");

/* ===================== COLORES: MODO CLARO ===================== */
:root {
  color-scheme: light;
  --fondo-pagina: #f3efea;
  --fondo-imagen: url("/imagenes/fondo.png");
  --panel: rgba(250, 245, 240, 0.7);
  --panel-solido: #faf5f0;
  --superficie: #fff;
  --superficie-suave: #f7f5f3;
  --superficie-boton: rgba(255, 255, 255, 0.5);
  --superficie-boton-hover: #fff;
  --borde: #ccc;
  --borde-fuerte: #bbb;
  --borde-tenue: #e4e4e4;
  --borde-lista: #aaa;
  --texto: #888;
  --texto-input: #666;
  --texto-fuerte: #333;
  --acento: #1a67a0;
  --acento-fondo: #1a67a0;
  --acento-borde: #3371a1;
  --acento-suave: rgba(26, 103, 160, 0.1);
  --cabecera-texto: #eee;
  --cabecera-borde-celda: #125;
  --fila-hover: #fdf1aa;
  --fila-hover-texto: #c00;
  --nota-fondo: #fff59d;
  --nota-fondo-2: #fbe96a;
  --nota-texto: #3b3520;
  --sombra: #999;
  --error: #900;
  --error-fondo: #ffe0e0;
  --exito: #070;
  --logo-fondo: transparent;
  --bajo-fondo: #fee;       --bajo-texto: #b02;
  --normal-fondo: #fec;     --normal-texto: #a70;
  --bueno-fondo: #dfc;      --bueno-texto: #093;
  --excelente-fondo: #def;  --excelente-texto: #069;
  /* Gráficos (funciones/graficos.js los lee al dibujar) */
  --grafico-texto: #444;
  --grafico-titulo: #222;
  --grafico-rejilla: rgba(0, 0, 0, 0.06);
  --titulo-cabecera: #2f4a63;
}

/* ===================== COLORES: MODO OSCURO =====================
   Mismo bloque dos veces: automático (sistema) y elegido a mano. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo-pagina: #14171b;
    --fondo-imagen: none;
    --panel: rgba(32, 36, 42, 0.94);
    --panel-solido: #20242a;
    --superficie: #1b1f24;
    --superficie-suave: #262b32;
    --superficie-boton: rgba(255, 255, 255, 0.04);
    --superficie-boton-hover: rgba(255, 255, 255, 0.10);
    --borde: #3a414b;
    --borde-fuerte: #48505c;
    --borde-tenue: #323840;
    --borde-lista: #444c57;
    --texto: #b4bcc6;
    --texto-input: #dde2e8;
    --texto-fuerte: #eef1f4;
    --acento: #7ab8ea;
    --acento-fondo: #1d5f92;
    --acento-borde: #2b72a8;
    --acento-suave: rgba(122, 184, 234, 0.16);
    --cabecera-texto: #f2f5f8;
    --cabecera-borde-celda: #2e6a99;
    --fila-hover: #3a3420;
    --fila-hover-texto: #ffb3a7;
    --nota-fondo: #eadf8a;
    --nota-fondo-2: #dccb62;
    --nota-texto: #2b2615;
    --sombra: rgba(0, 0, 0, 0.6);
    --error: #ff8f85;
    --error-fondo: #4a2326;
    --exito: #7fd69c;
    --logo-fondo: transparent;
    --bajo-fondo: rgba(220, 40, 70, 0.22);      --bajo-texto: #ff9eac;
    --normal-fondo: rgba(220, 150, 20, 0.22);   --normal-texto: #f5c66e;
    --bueno-fondo: rgba(30, 170, 80, 0.22);     --bueno-texto: #82dba0;
    --excelente-fondo: rgba(30, 130, 200, 0.25); --excelente-texto: #8fcdf3;
    --grafico-texto: #c9d0d8;
    --grafico-titulo: #eef1f4;
    --grafico-rejilla: rgba(255, 255, 255, 0.08);
    --titulo-cabecera: #d6e2ee;
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo-pagina: #14171b;
  --fondo-imagen: none;
  --panel: rgba(32, 36, 42, 0.94);
  --panel-solido: #20242a;
  --superficie: #1b1f24;
  --superficie-suave: #262b32;
  --superficie-boton: rgba(255, 255, 255, 0.04);
  --superficie-boton-hover: rgba(255, 255, 255, 0.10);
  --borde: #3a414b;
  --borde-fuerte: #48505c;
  --borde-tenue: #323840;
  --borde-lista: #444c57;
  --texto: #b4bcc6;
  --texto-input: #dde2e8;
  --texto-fuerte: #eef1f4;
  --acento: #7ab8ea;
  --acento-fondo: #1d5f92;
  --acento-borde: #2b72a8;
  --acento-suave: rgba(122, 184, 234, 0.16);
  --cabecera-texto: #f2f5f8;
  --cabecera-borde-celda: #2e6a99;
  --fila-hover: #3a3420;
  --fila-hover-texto: #ffb3a7;
  --nota-fondo: #eadf8a;
  --nota-fondo-2: #dccb62;
  --nota-texto: #2b2615;
  --sombra: rgba(0, 0, 0, 0.6);
  --error: #ff8f85;
  --error-fondo: #4a2326;
  --exito: #7fd69c;
  --logo-fondo: transparent;
  --bajo-fondo: rgba(220, 40, 70, 0.22);      --bajo-texto: #ff9eac;
  --normal-fondo: rgba(220, 150, 20, 0.22);   --normal-texto: #f5c66e;
  --bueno-fondo: rgba(30, 170, 80, 0.22);     --bueno-texto: #82dba0;
  --excelente-fondo: rgba(30, 130, 200, 0.25); --excelente-texto: #8fcdf3;
  --grafico-texto: #c9d0d8;
  --grafico-titulo: #eef1f4;
  --grafico-rejilla: rgba(255, 255, 255, 0.08);
  --titulo-cabecera: #d6e2ee;
}

/* ===================== BASE ===================== */
@-ms-viewport {
  width: device-width;
}

* {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.025em;
}

body {
  background-color: var(--fondo-pagina);
  background-image: var(--fondo-imagen);
  margin: 0;
  min-height: 100vh;
  font-family: 'Open Sans',sans-serif;
  font-size: 11pt;
  color: var(--texto);
  overflow-y:scroll;
  display:flex;
}

p {
  margin: 6px;
}

a {
	cursor:pointer;
	text-decoration:none;
	color: var(--acento);
}

img {
  display: block;
}

table {
  border-collapse: collapse;
  margin: 0px 0px 10px 0px;
}

form {
  display: flex;
  align-items: center;
}

.form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.filtros-div {
    display: flex;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: 4px;
    padding: 0px 20px;
}

/* ===================== ESTRUCTURA DEL PANEL ===================== */
.contenedor {
  display: grid;
  height: calc(100vh - 20px);
  flex: 1;
  min-width: 0;
  margin: 10px;
  gap: 10px;
  grid-template-columns: 240px 1fr var(--right-col-width);
  grid-template-rows: minmax(58px, auto) 1fr 46px;
  --right-col-width: 0px;
  transition: grid-template-columns 0.2s ease-in-out;
}

.resultados {
  height: 98vh;
  width: 100%;
  margin: 20px 20px 40px 20px;
  padding: 10px;
 	background-color: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  overflow-y: auto;
}

.menu {
  grid-area: 1 / 1 / 4 / 2;
  padding: 10px;
	background-color: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.filtros {
  grid-area: 1 / 2 / 2 / 3;
  padding: 10px;
 	background-color: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px 16px;
}

/* Títulos de la cabecera superior: más pequeños, centrados en vertical y en su propio color */
.filtros h1, .filtros h2 {
  margin: 0 0 0 6px;
  color: var(--titulo-cabecera);
  font-size: 14pt;
  font-weight: 600;
  line-height: 1.2;
  gap: 10px;
}
.filtros h1 img, .filtros h2 img {
  height: 26px;
}
/* Título con una línea de texto debajo (portal, importación): apilados y centrados */
.filtros:has(> h1 + p), .filtros:has(> h2 + p) {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.filtros > p {
  margin: 0 0 0 6px;
}

.principal {
  grid-area: 2 / 2 / 3 / 3;
  padding: 10px;
	background-color: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  overflow-y: auto;
}

.paginacion {
  grid-area: 3 / 2 / 4 / 3;
  padding: 10px;
	background-color: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
}

.detalle {
  grid-area: 1 / 3 / 4 / 4;
  padding: 10px;
	background-color: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  overflow-y: scroll;
  opacity: 0;
  transition: opacity 0.2s ease-in-out 0.1s;
}

.contenedor.desplegada {
  --right-col-width: 720px;
}

.detalle.desplegada {
  opacity: 1;
  transition: opacity 0.2s;
  overflow-x: hidden;
  overflow-y: scroll;
}

.contenedor-grid {
  display: grid;
  grid-template-columns: auto 144px;
  grid-template-rows: 60px 60px;
  gap: 10px;
  margin-bottom: 10px;
}

.elemento-1 {
  grid-column: 1;
  grid-row: 1;
}
.elemento-2 {
  grid-column: 1;
  grid-row: 2;
}
.elemento-3 {
  grid-column: 2;
  grid-row: 1;
}
.elemento-4 {
  grid-column: 2;
  grid-row: 2;
}

.contenedor-grid-docente {
  display: grid;
  grid-template-columns: auto 144px 144px;
  grid-template-rows: 60px;
  gap: 10px;
  margin-bottom: 10px;
}
.elemento-1-docente {
  grid-column: 1;
  grid-row: 1;
}
.elemento-2-docente {
  grid-column: 2;
  grid-row: 1;
}
.elemento-3-docente {
  grid-column: 3;
  grid-row: 1;
}

.contenedor-grid2 {
  display: grid;
  grid-template-columns: 120px 800px 240px auto;
  grid-template-rows: auto 300px;
  gap: 0px;
}
.elemento-5 {
  grid-column: 1/5;
  grid-row: 1;
}
.elemento-6 {
  grid-column: 1;
  grid-row: 2;
}
.elemento-7 {
  grid-column: 2;
  grid-row: 2;
  padding: 20px;
}
.elemento-8 {
  grid-column: 3;
  grid-row: 2;
  padding: 20px;
}
.elemento-9 {
  grid-column: 4;
  grid-row: 2;
}

/* Gráficos del pie de las páginas de resultados (funciones/graficos.js) */
.graficos-resultados {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0px;
}
.grafico-tarjeta {
  position: relative;
  box-sizing: border-box;
  height: 360px;
  padding: 12px 16px;
  background-color: var(--superficie);
  border: 1px solid var(--borde-tenue);
  border-radius: 8px;
}
.grafico-principal {
  flex: 3 1 560px;
  min-width: 0;
}
.grafico-secundario {
  flex: 1 1 300px;
  max-width: 460px;
}

/* ===================== FORMULARIOS DE FICHA ===================== */
.form_usuario {
display: grid;
grid-template-columns: repeat(3, 180px);
grid-template-rows: 250px repeat(4, 70px) 60px;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.usuario_div1 { grid-area: 1 / 1 / 2 / 4; }
.usuario_div2 { grid-area: 2 / 1 / 3 / 2; }
.usuario_div3 { grid-area: 2 / 2 / 3 / 3; }
.usuario_div4 { grid-area: 2 / 3 / 3 / 4; }
.usuario_div5 { grid-area: 3 / 1 / 4 / 3; }
.usuario_div6 { grid-area: 3 / 3 / 4 / 4; }
.usuario_div7 { grid-area: 4 / 1 / 5 / 3; }
.usuario_div8 { grid-area: 4 / 3 / 5 / 4; }
.usuario_div9 { grid-area: 5 / 1 / 6 / 2; }
.usuario_div10 { grid-area: 5 / 2 / 6 / 3; }
.usuario_div11 { grid-area: 5 / 3 / 6 / 4; }


.form_grupo {
display: grid;
grid-template-columns: 180px 80px 280px;
grid-template-rows: 60px 60px 60px 40px;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.grupo_div1 { grid-area: 1 / 1 / 2 / 2; }
.grupo_div2 { grid-area: 1 / 2 / 2 / 4; }
.grupo_div3 { grid-area: 2 / 1 / 3 / 2; }
.grupo_div4 { grid-area: 2 / 2 / 3 / 3; }
.grupo_div5 { grid-area: 2 / 3 / 3 / 4; }
.grupo_div6 { grid-area: 3 / 1 / 4 / 2; }
.grupo_div7 { grid-area: 3 / 2 / 4 / 3; }
.grupo_div8 { grid-area: 3 / 3 / 4 / 4; }
.grupo_div9 { grid-area: 4 / 1 / 5 / 4; }

.form_materia {
display: grid;
grid-template-columns: 180px 80px 280px;
grid-template-rows: 60px 60px 40px;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.materia_div1 { grid-area: 1 / 1 / 2 / 2; }
.materia_div2 { grid-area: 1 / 2 / 2 / 4; }
.materia_div3 { grid-area: 2 / 1 / 3 / 2; }
.materia_div4 { grid-area: 2 / 2 / 3 / 3; }
.materia_div5 { grid-area: 2 / 3 / 3 / 4; }
.materia_div6 { grid-area: 3 / 1 / 4 / 4; }

.form_competencia {
display: grid;
grid-template-columns: 180px 80px 280px;
grid-template-rows: 60px 60px 40px;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.competencia_div1 { grid-area: 1 / 1 / 2 / 2; }
.competencia_div2 { grid-area: 1 / 2 / 2 / 4; }
.competencia_div3 { grid-area: 2 / 1 / 3 / 2; }
.competencia_div4 { grid-area: 2 / 2 / 3 / 3; }
.competencia_div5 { grid-area: 2 / 3 / 3 / 4; }
.competencia_div6 { grid-area: 3 / 1 / 4 / 4; }


.docente {
  margin: 10px auto 30px auto;
  display: grid;
  grid-template-columns: 1fr 800px;
  grid-template-rows: 60px 60px 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.docente_titulo {
  grid-area: 1 / 1 / 2 / 3;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background-color: var(--superficie-suave);
  padding: 10px 20px;
}

.docente_filtros {
  grid-area: 2 / 1 / 3 / 3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background-color: var(--superficie-suave);
  padding: 10px 20px;
}

.docente_tabla {
  grid-area: 3 / 1 / 4 / 2;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background-color: var(--superficie-suave);
  padding: 10px 20px;
}

.docente_graficos {
  grid-area: 3 / 2 / 4 / 3;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background-color: var(--superficie-suave);
  padding: 10px 20px;
}

fieldset {
  padding: 10px;
  margin: 10px;
  width: 100%;
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 10px;
  display: flex;
}

fieldset.horizontal {
  flex-direction: row;
  align-items: center;
}

fieldset.vertical {
  flex-direction: column;
}

legend {
  padding: 6px 12px;
  margin-bottom: 10px;
  background-color: var(--superficie);
  color: var(--acento);
  border: 1px solid var(--borde);
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

legend span {
  padding: 2px 8px;
  border: 2px solid var(--acento);
  border-radius: 20px;
  background-color: var(--superficie);
  color: var(--acento);
  text-align: center;
  margin-right: 10px;
  font-weight: 600;
}

legend img {
  height: 32px;
  margin: 0px 10px 0px 10px;
}

h1 {
  margin: 10px 0px 20px 10px;
  color: var(--acento);
  font-size: 24pt;
  font-weight: 400;
  display: flex;
  gap: 16px;
  align-items: center;
  text-transform: uppercase;
}

h1 img {
  height: 48px;
}

h2 {
  margin: 2px 0px 0px 10px;
  color: var(--acento);
  font-size: 18pt;
  font-weight: 600;
  display: flex;
  gap: 16px;
  align-items: center;
  text-transform: uppercase;
}

h2 img {
  height: 32px;
}

.w100 {
  width: 100%;
}

/* ===================== TABLAS Y LISTADOS ===================== */
.paginacion form button {
  font-size: 10pt;
  padding: 4px 12px;
  margin: 0 4px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background-color: var(--superficie);
  text-decoration: none;
  color: var(--texto);
  cursor: pointer;
}

.actual {
  background-color: var(--acento-fondo) !important;
  color: #fff !important;
  border-color: var(--acento-borde) !important;
}

.lista {
  background-color: var(--superficie);
  border: thin solid var(--borde);
}

.lista:hover {
  background-color: var(--fila-hover);
  color: var(--fila-hover-texto);
  cursor: pointer;
}

.lista td {
  padding: 6px 10px 6px 10px;
  border: 1px dotted var(--borde-lista);
}

.lista img {
  margin: 0px 10px 0px 10px;
  height: 24px;
}

.cabecera {
  background-color: var(--acento-fondo);
  border: 1px solid var(--acento-borde);
  color: var(--cabecera-texto);
  vertical-align:bottom;
  font-size: 11pt;
}

.cabecera td {
  padding: 6px 10px 6px 10px;
  border: thin dotted var(--cabecera-borde-celda);
}

.icono_accion {
  width: 40px;
  text-align: center;
}

/* ===================== BOTONES ===================== */
.boton {
  display: inline-flex;
  align-items: center;
	padding: 6px 12px 6px 12px;
	border-radius: 4px;
	border: 1px solid var(--borde-fuerte);
	background-color: var(--superficie-boton);
  cursor: pointer;
  width: 100%;
  margin: 0px 0px 10px 0px;
  text-align: left;
}

.boton label {
  cursor:pointer;
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
  font-size: 12pt;
  letter-spacing: 0.01em;
  color: var(--texto);
}

.boton:hover {
	background-color: var(--superficie-boton-hover);
}

.boton:active {
	background-color: var(--acento-suave);
}

.boton:hover label {
	color: var(--texto-fuerte);
}

.boton:active label {
	color: var(--texto-fuerte);
}

.boton img {
  height: 24px;
  margin: 0px 6px 0px 0px;
}


.boton-menu {
  display: inline-flex;
  align-items: center;
	padding: 6px 12px 6px 12px;
	border-radius: 4px;
	border: 1px solid var(--borde-fuerte);
	background-color: var(--superficie-boton);
  color: var(--texto);
  cursor: pointer;
  width: 100%;
  margin: 0px 0px 10px 0px;
  text-align: left;
}

.boton-menu label {
  cursor:pointer;
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
  font-size: 11pt;
  letter-spacing: 0.01em;
  color: var(--texto);
}

.boton-menu:hover {
	background-color: var(--superficie-boton-hover);
}

.boton-menu:active {
	background-color: var(--acento-suave);
}

.boton-menu:hover label {
	color: var(--texto-fuerte);
}

.boton-menu:active label {
	color: var(--texto-fuerte);
}

.boton-menu img {
  height: 32px;
  margin: 0px 0px 0px 0px;
}

.boton-paginacion {
  display: inline-flex;
  align-items: center;
	padding: 4px 12px 4px 12px;
	border-radius: 4px;
	border: 1px solid var(--borde-fuerte);
	background-color: var(--superficie-boton);
  cursor: pointer;
  margin: -5px 0px 10px 0px;
  text-align: left;
}

.boton-paginacion label {
  cursor:pointer;
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
  font-size: 11pt;
  letter-spacing: 0.01em;
  color: var(--texto);
}

.boton-paginacion:hover {
	background-color: var(--superficie-boton-hover);
}

.boton-paginacion:active {
	background-color: var(--acento-suave);
}

.boton-paginacion:hover label {
	color: var(--texto-fuerte);
}

.boton-paginacion:active label {
	color: var(--texto-fuerte);
}

.boton-paginacion img {
  height: 24px;
  margin: 0px 0px 0px 0px;
}

label {
  margin: 2px 10px 0px 6px;
}

/* Botón «Iniciar sesión con Microsoft» (guía de marca de Microsoft: logo de 21x21 a 12px del borde
   y del texto, Segoe UI Semibold 15px, texto #5E5E5E / #FFF), unificado con el de Google
   (css/google.css): los dos con el fondo de Microsoft (claro #FFF, oscuro #2F2F2F), el borde de
   Google (claro #747775, oscuro #8E918F, esquinas de 4px), 40px de alto y el mismo ancho
   (--ancho-boton-sso). */
:root {
  --ancho-boton-sso: 280px;
}
.boton-microsoft-sso {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: var(--ancho-boton-sso);
  max-width: 100%;
  height: 40px;
  padding: 0px 12px;
  margin: 20px 0px 10px 0px;
  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  color: #5e5e5e;
  background-color: #fff;
  border: 1px solid #747775;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: box-shadow .218s;
  transition: box-shadow .218s;
}

.boton-microsoft-sso:hover {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.boton-microsoft-sso img {
  width: 21px;
  height: 21px;
  margin: 0px;
}

.boton-microsoft-sso label {
  flex: 1;
  text-align: center;
  margin: 0px;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

a:focus-visible .boton-microsoft-sso {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .boton-microsoft-sso { color: #fff; background-color: #2f2f2f; border-color: #8e918f; }
  :root:not([data-tema="claro"]) .boton-microsoft-sso:hover { box-shadow: 0 0 0 1px #5e5e5e; }
}
:root[data-tema="oscuro"] .boton-microsoft-sso { color: #fff; background-color: #2f2f2f; border-color: #8e918f; }
:root[data-tema="oscuro"] .boton-microsoft-sso:hover { box-shadow: 0 0 0 1px #5e5e5e; }

/* ===================== CAMPOS ===================== */
#buscar {
  margin-right: 20px;
  width: 200px;
}

input:not([type]), input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="date"], input[type="datetime-local"], textarea {
  font-family: 'Open Sans', sans-serif;
	font-size: 11pt;
	background-color: var(--superficie);
  color: var(--texto-input);
	padding: 6px 12px 6px 12px;
	border: 1px solid var(--borde);
  border-radius: 4px;
  width: 180px;
}

textarea {
  width: auto;
  max-width: 100%;
}

select {
	font-family: 'Open Sans',sans-serif;
	font-size: 11pt;
	color: var(--texto-input);
	background-color: var(--superficie);
	padding: 6px 12px 6px 12px;
	border: 1px solid var(--borde);
  border-radius: 4px;
  margin-right: 10px;
  max-width: 100%;
}

input[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px 8px 16px;
	border-radius: 4px;
	border: 1px solid var(--borde-fuerte);
	background-color: var(--superficie-boton);
  cursor: pointer;
  width: 100%;
  margin: 0px 0px 10px 0px;
  text-align: left;
  cursor:pointer;
  font-family: 'Open Sans',sans-serif;
  font-weight: 400;
  font-size: 11pt;
  letter-spacing: 0.01em;
  color: var(--texto);
}

input[type="submit"]:hover {
  background-color: var(--superficie-boton-hover);
  color: var(--texto-fuerte);
}

input[type="file"] {
	font-family: 'Open Sans',sans-serif;
	font-size: 11pt;
	color: var(--texto);
	background-color: var(--superficie);
	padding: 4px;
	border: 1px solid var(--borde);
  border-radius: 4px;
  width: 400px;
  max-width: 100%;
}

input[type="file"]::file-selector-button {
  font-family: 'Open Sans',sans-serif;
  padding: 4px 12px;
 	border: 1px solid var(--borde);
	border-radius: 4px;
  background-color: var(--superficie-suave);
  color: var(--texto-fuerte);
  cursor: pointer;
  margin: 2px 10px 2px 10px;
  text-align: left;
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--acento-fondo);
  border: thin solid var(--acento-borde);
  color:#fff;
}

input[type="image"] {
  margin: 0px 10px 0px 10px;
  height: 24px;
  display: block;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* ===================== ACCESO, ENCUESTA Y AVISOS ===================== */
.login {
	width: 100vw;
	margin: 20px 20px 100px 20px;
  padding: 10px;
	text-align: center;
	border-radius:4px;
	border:thin solid var(--borde-fuerte);
	background-color: var(--panel);
}

.login form{
  flex-direction: column;
}

.titulo {
  margin: 0px auto 10px auto;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto);
  font-weight: 900;
  border-radius: 3px;
  border:thin solid var(--borde-fuerte);
  background-color: var(--superficie-suave);
}

/* Nota del acceso con aspecto de post-it pegado en la pantalla:
   papel amarillo con degradado, ligera inclinación, cinta adhesiva arriba y la esquina
   inferior derecha algo levantada (sombra más marcada en esa esquina). Sigue amarillo en modo oscuro. */
.notaalpie {
  position: relative;
  width: 440px;
  max-width: calc(100% - 24px);
  margin: 40px auto 100px auto;
  padding: 26px 28px 30px 28px;
  text-align: left;
  font-family: 'Kalam', 'Comic Sans MS', 'Segoe Print', cursive;
  font-size: 13pt;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  color: var(--nota-texto);
  background: linear-gradient(170deg, var(--nota-fondo) 0%, var(--nota-fondo) 60%, var(--nota-fondo-2) 100%);
  border-radius: 2px 2px 2px 2px / 2px 2px 14px 2px;
  /* Sombra corta de contacto + sombra larga abajo a la derecha (esquina algo levantada) */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
              0 14px 16px -12px rgba(0, 0, 0, 0.45),
              10px 16px 18px -14px rgba(0, 0, 0, 0.5);
  transform: rotate(-2deg);
  transition: transform 0.2s ease-in-out;
}

.notaalpie:hover {
  transform: rotate(-1deg) scale(1.01);
}

.notaalpie p {
  margin: 0;
}

/* Cinta adhesiva */
.notaalpie::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 110px;
  height: 26px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(255, 255, 255, 0.45);
  border-left: 1px dashed rgba(0, 0, 0, 0.06);
  border-right: 1px dashed rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}


/* Logo sin fondo en los dos modos */
.logo {
  margin: 0px auto 10px auto;
  width: 210px;
  max-width: 100%;
  display: inline;
  /* background-color: var(--logo-fondo); */
  border-radius: 6px;
}

.logo-menu {
  margin: 0px auto 20px auto;
  width: 210px;
  max-width: 100%;
  display: inline;
  background-color: var(--logo-fondo);
  border-radius: 6px;
}

.resultado-media {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 11pt;
}

.resultado-bajo {
    background: var(--bajo-fondo);
    color: var(--bajo-texto);
}

.resultado-normal {
    background: var(--normal-fondo);
    color: var(--normal-texto);
}

.resultado-bueno {
    background: var(--bueno-fondo);
    color: var(--bueno-texto);
}

.resultado-excelente {
    background: var(--excelente-fondo);
    color: var(--excelente-texto);
}

/* ===================== COLORES ESCRITOS EN LÍNEA EN LAS PÁGINAS =====================
   Algunas páginas llevan style="color:#900" y similares. En modo oscuro se reajustan
   aquí (!important gana al estilo en línea) para no tener que tocar cada página. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) [style*="#ffe0e0"] { background-color: var(--error-fondo) !important; }
  :root:not([data-tema="claro"]) [style*="#900"] { color: var(--error) !important; }
  :root:not([data-tema="claro"]) [style*="#070"],
  :root:not([data-tema="claro"]) [style*="#393"] { color: var(--exito) !important; }
  :root:not([data-tema="claro"]) [style*="#339"] { color: var(--acento) !important; }
  :root:not([data-tema="claro"]) [style*="#fffdfb"],
  :root:not([data-tema="claro"]) [style*="#f9f9f9"] { background-color: var(--superficie-suave) !important; }
  :root:not([data-tema="claro"]) [style*="border:1px solid #ccc"] { border-color: var(--borde) !important; }
}
:root[data-tema="oscuro"] [style*="#ffe0e0"] { background-color: var(--error-fondo) !important; }
:root[data-tema="oscuro"] [style*="#900"] { color: var(--error) !important; }
:root[data-tema="oscuro"] [style*="#070"],
:root[data-tema="oscuro"] [style*="#393"] { color: var(--exito) !important; }
:root[data-tema="oscuro"] [style*="#339"] { color: var(--acento) !important; }
:root[data-tema="oscuro"] [style*="#fffdfb"],
:root[data-tema="oscuro"] [style*="#f9f9f9"] { background-color: var(--superficie-suave) !important; }
:root[data-tema="oscuro"] [style*="border:1px solid #ccc"] { border-color: var(--borde) !important; }

/* Logos en modo oscuro: versión con la palabra «Jesuitas» en blanco */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) img[src$="logo.png"] { content: url("/imagenes/logo-oscuro.png"); }
  :root:not([data-tema="claro"]) img[src$="logo2.png"] { content: url("/imagenes/logo2-oscuro.png"); }
}
:root[data-tema="oscuro"] img[src$="logo.png"] { content: url("/imagenes/logo-oscuro.png"); }
:root[data-tema="oscuro"] img[src$="logo2.png"] { content: url("/imagenes/logo2-oscuro.png"); }

/* ===================== SELECTOR DE TEMA (funciones/tema.js) ===================== */
.selector-tema {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 20px;
  background-color: var(--superficie-boton);
}

.selector-tema button {
  font: inherit;
  font-size: 10pt;
  line-height: 1;
  padding: 5px 10px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
}

.selector-tema button:hover {
  color: var(--texto-fuerte);
}

.selector-tema button[aria-pressed="true"] {
  background-color: var(--acento-fondo);
  color: #fff;
}

/* Barra del menú: selector de tema (siempre) y botón para abrir el menú (solo en móvil) */
.menu-barra {
  order: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.menu-abrir {
  display: none;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 11pt;
  padding: 6px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  background-color: var(--superficie-boton);
  color: var(--texto-fuerte);
  cursor: pointer;
}

/* Páginas sin menú (acceso, encuesta): selector flotante y discreto en una esquina */
.selector-tema.flotante {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  background-color: var(--panel-solido);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0.75;
}

.selector-tema.flotante:hover,
.selector-tema.flotante:focus-within {
  opacity: 1;
}

/* Botón de cerrar la ficha de detalle (lo añade tema.js; solo se ve en pantallas estrechas) */
.detalle-cerrar {
  display: none;
}

/* ===================== TABLET (<= 1200px) =====================
   La ficha de detalle deja de ser una tercera columna y se abre por encima, desde la derecha. */
@media only screen and (max-width: 1200px) {
  .contenedor {
    grid-template-columns: 200px 1fr;
  }

  .contenedor.desplegada {
    --right-col-width: 0px;
  }

  .detalle {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(720px, 100vw);
    z-index: 900;
    border-radius: 0;
    background-color: var(--panel-solido);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.2s ease-in-out, opacity 0.2s;
  }

  .detalle.desplegada {
    transform: none;
    pointer-events: auto;
  }

  .detalle-cerrar {
    display: block;
    position: sticky;
    top: 0;
    margin: 0 0 8px auto;
    z-index: 1;
    font: inherit;
    font-size: 16pt;
    line-height: 1;
    padding: 4px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 4px;
    background-color: var(--superficie);
    color: var(--texto-fuerte);
    cursor: pointer;
  }

  .contenedor-grid2 {
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto;
  }
  .elemento-5 { grid-column: 1 / 3; grid-row: auto; }
  .elemento-6 { grid-column: 1; grid-row: auto; }
  .elemento-7 { grid-column: 2; grid-row: auto; }
  .elemento-8 { grid-column: 1 / 3; grid-row: auto; }
  .elemento-9 { grid-column: 1 / 3; grid-row: auto; }

  .docente {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .docente_titulo, .docente_filtros, .docente_tabla, .docente_graficos {
    grid-area: auto;
  }
}

/* Acceso y encuesta en vertical (tablet o móvil) */
@media only screen and (max-width: 1200px) and (orientation : portrait) {
  body {
    color: var(--texto-fuerte);
    flex-direction: column;
  }

  .login {
    width: auto;
    margin: 20px 12px 100px 12px;
  }

  .notaalpie {
    width: 440px;
  }
}

/* ===================== MÓVIL (<= 900px) =====================
   Todo en una columna: el menú se pliega arriba y la página crece con su contenido. */
@media only screen and (max-width: 900px) {
  body {
    display: block;
    font-size: 11pt;
  }

  .contenedor {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    width: auto;
    margin: 8px;
    gap: 8px;
  }

  .menu, .filtros, .principal, .paginacion {
    grid-area: auto;
  }

  /* Menú plegable: solo se ve la barra (botón Menú + tema) hasta que se abre */
  .menu {
    overflow: visible;
  }
  .menu > *:not(.menu-barra):not(script) {
    display: none;
  }
  .menu.abierto > *:not(.menu-barra):not(script) {
    display: block;
  }
  .menu-barra {
    order: -1;
    margin-top: 0;
    padding-top: 0;
    justify-content: space-between;
  }
  .menu.abierto .menu-barra {
    margin-bottom: 10px;
  }
  .menu-abrir {
    display: inline-flex;
  }
  .logo-menu {
    display: block;
    margin: 0 auto 10px auto;
  }

  .filtros {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
  }

  .filtros form, .paginacion form, .principal form {
    flex-wrap: wrap;
    gap: 6px;
  }

  #buscar,
  input:not([type]), input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="date"], input[type="datetime-local"] {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .principal {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .paginacion {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    height: auto;
  }

  .lista td, .cabecera td {
    padding: 6px;
  }

  .lista img {
    margin: 0 4px;
  }

  h1 {
    font-size: 18pt;
    margin: 6px 0 10px 4px;
  }
  h1 img {
    height: 36px;
  }
  h2 {
    font-size: 14pt;
  }

  /* Rejillas de cabecera de resultados: en una columna */
  .contenedor-grid, .contenedor-grid-docente, .contenedor-grid2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .elemento-1, .elemento-2, .elemento-3, .elemento-4,
  .elemento-1-docente, .elemento-2-docente, .elemento-3-docente,
  .elemento-5, .elemento-6, .elemento-7, .elemento-8, .elemento-9 {
    grid-column: 1;
    grid-row: auto;
  }

  /* Fichas (usuario, grupo, materia, competencia): campo a campo */
  .form_usuario, .form_grupo, .form_materia, .form_competencia {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .form_usuario > *, .form_grupo > *, .form_materia > *, .form_competencia > * {
    grid-area: auto;
  }

  fieldset {
    margin: 10px 0;
    flex-wrap: wrap;
    min-width: 0;
  }
  fieldset.horizontal {
    align-items: flex-start;
  }

  .resultados {
    height: auto;
    width: auto;
    margin: 8px;
  }

  .graficos-resultados {
    gap: 12px;
  }
  .grafico-tarjeta {
    height: 300px;
    padding: 8px;
  }
  .grafico-principal, .grafico-secundario {
    flex: 1 1 100%;
    max-width: none;
  }

  /* Encuesta del alumnado: la tabla se desplaza en horizontal si no cabe */
  body > .principal {
    padding: 10px !important;
    overflow-x: auto;
  }
}

/* ===================== MÓVIL ESTRECHO (<= 600px) ===================== */
@media only screen and (max-width: 600px) {
  body {
    font-size: 10.5pt;
  }

  .lista td, .cabecera td {
    padding: 5px 4px;
  }

  .notaalpie {
    width: auto;
    margin: 30px 16px 80px 16px;
    padding: 22px 18px 24px 18px;
    font-size: 12pt;
    transform: rotate(-1deg);
  }

  .titulo h1 {
    font-size: 15pt;
  }

  .filtros h1, .filtros h2 {
    font-size: 12pt;
  }
  .filtros h1 img, .filtros h2 img {
    height: 22px;
  }

  .selector-tema button {
    padding: 5px 8px;
  }
}

/* ===================== VENTANA MODAL (<dialog class="modal">) ===================== */
.modal {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  background-color: var(--panel-solido);
  color: var(--texto);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-family: 'Open Sans', sans-serif;
}

.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--borde-tenue);
}

.modal-cabecera h2 {
  margin: 0;
  font-size: 13pt;
  font-weight: 600;
  color: var(--texto-fuerte);
  text-transform: none; /* el código distingue mayúsculas */
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.modal-cerrar {
  flex: none;
  width: 32px;
  height: 32px;
  font: inherit;
  font-size: 18pt;
  line-height: 1;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
}

.modal-cerrar:hover {
  background-color: var(--superficie-boton-hover);
  color: var(--texto-fuerte);
}

.modal-cuerpo {
  padding: 18px;
  text-align: center;
}

.modal-cuerpo img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #fff; /* el QR necesita fondo blanco también en modo oscuro */
}

.modal-enlace {
  margin: 12px 0 0 0;
  font-size: 9pt;
  color: var(--texto);
  overflow-wrap: anywhere;
  user-select: all;
}

.modal-pie {
  display: flex;
  gap: 10px;
  padding: 0 18px 18px 18px;
}

.modal-pie .boton-menu {
  flex: 1;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font: inherit;
  font-size: 11pt;
}

/* Detalle de una pregunta en las páginas de resultados (funciones/graficos.js) */
.modal-ancho {
  width: min(760px, calc(100vw - 32px));
}
.modal-detalle {
  text-align: left;
}
.modal-pregunta {
  margin: 0 0 4px 0;
  font-size: 11pt;
  color: var(--texto-fuerte);
}
.modal-estadisticas {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.modal-estadisticas .resumen-tarjeta {
  padding: 10px 12px;
}
.modal-estadisticas .resumen-cifra {
  font-size: 16pt;
}
.modal-estadisticas .resultado-media {
  padding: 2px 12px;
  font-size: 14pt;
}
.grafico-modal {
  height: 300px;
}
tr[data-pregunta]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
@media only screen and (max-width: 600px) {
  .modal-detalle {
    padding: 12px;
  }
  .modal-estadisticas {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .grafico-modal {
    height: 240px;
    padding: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contenedor, .detalle {
    transition: none;
  }
}

@media print {
  .menu, .menu-barra, .selector-tema, .detalle-cerrar {
    display: none !important;
  }
}

/* ===================== RESUMEN DEL CURSO (portal) ===================== */
.resumen h2 {
  margin-bottom: 4px;
}
.resumen h3 {
  margin: 20px 0px 10px 0px;
  color: var(--texto-fuerte);
}
.resumen-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.resumen-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background-color: var(--superficie);
  border: 1px solid var(--borde-tenue);
  border-radius: 8px;
}
.resumen-cifra {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24pt;
  font-weight: 600;
  line-height: 1.1;
  color: var(--acento);
}
.resumen-cifra img {
  height: 24px;
}
.resumen-etiqueta {
  color: var(--texto-fuerte);
  font-weight: 600;
}
.resumen-detalle {
  font-size: 9pt;
  color: var(--texto);
}
.resumen-tabla {
  overflow-x: auto;
}
.resumen-barra {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 8px;
  margin-right: 6px;
  overflow: hidden;
  background-color: var(--superficie-suave);
  border: 1px solid var(--borde-tenue);
  border-radius: 4px;
}
.resumen-barra span {
  display: block;
  height: 100%;
  background-color: var(--acento-fondo);
}
@media only screen and (max-width: 600px) {
  .resumen-tarjetas {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .resumen-cifra {
    font-size: 18pt;
  }
  .resumen-barra {
    width: 50px;
  }
}