/* PGI — identidad visual UTN FRSR.
   Sin fuentes externas: el servidor corre en la red interna y puede no tener
   salida a internet; una fuente que no carga rompe el diseño en el tótem. */

:root {
  --azul:        #02557B;
  --azul-hondo:  #013C58;
  --azul-noche:  #01293C;
  --naranja:     #E5652C;
  --naranja-sec: #C24E1B;

  --papel:       #F4F6F8;
  --superficie:  #FFFFFF;
  --borde:       #DCE3E9;
  --tinta:       #16232B;
  --tinta-suave: #5D7080;

  --ok:          #1E7A4C;
  --alerta:      #B3541E;

  --radio:       10px;
  --sombra:      0 1px 2px rgba(1, 41, 60, .06), 0 8px 24px rgba(1, 41, 60, .07);
  --titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --texto:  "Roboto", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* El atributo `hidden` vale `display: none` en la hoja del navegador, y
   cualquier regla propia con `display: grid` o `flex` se lo lleva puesta.
   Como las pantallas se ocultan con `hidden`, sin esto se ven todas juntas. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--papel);
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 700; margin: 0; }

/* ---------- Acceso (ingreso, recuperación, restablecer) ---------- */

.acceso {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(229,101,44,.20), transparent 60%),
    linear-gradient(160deg, var(--azul-noche), var(--azul) 65%, var(--azul-hondo));
}
.acceso-caja {
  width: min(430px, 100%);
  background: var(--superficie);
  border-radius: 14px;
  padding: 40px 36px 32px;
  box-shadow: 0 24px 60px rgba(1, 41, 60, .35);
  display: grid;
  gap: 14px;
}
.acceso-marca {
  margin: 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja);
  font-weight: 600;
}
.acceso-logo { display: block; height: 54px; width: auto; margin-bottom: 6px; }
.acceso-caja h1 { font-size: 20px; line-height: 1.2; color: var(--tinta); }
.acceso-sub {
  margin: -6px 0 10px;
  color: var(--tinta-suave);
  font-size: 13px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--naranja);
}
label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tinta-suave); }
input, select, textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }

button {
  font: inherit;
  font-family: var(--titulo);
  font-weight: 600;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  background: var(--naranja);
  color: #fff;
  transition: background .15s ease, transform .05s ease;
}
button:hover { background: var(--naranja-sec); }
button:active { transform: translateY(1px); }

/* Un botón apagado tiene que verse apagado. Sin esto queda igual de naranja que
   el que sí funciona: quien lo aprieta y no ve nada concluye que la pantalla no
   responde, y el motivo por el que no se puede —que está escrito al lado— no lo
   lee nadie. */
button:disabled,
button:disabled:hover { background: #DDE3E8; color: var(--tinta-suave); cursor: not-allowed; }
button:disabled:active { transform: none; }

.error {
  margin: 0;
  color: #A3241C;
  background: #FDECEA;
  border-left: 3px solid #A3241C;
  padding: 9px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}

.ok {
  margin: 0;
  color: #14603C;
  background: #E4F1EA;
  border-left: 3px solid var(--ok);
  padding: 9px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}

/* Campo de contraseña con botón para revelar lo escrito. */
.campo-clave { position: relative; display: block; }
.campo-clave input { width: 100%; padding-right: 56px; }
.ojito {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: transparent; color: var(--tinta-suave);
  font-family: var(--texto); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 9px; border-radius: 6px;
}
.ojito:hover { background: #EEF2F5; color: var(--azul); }
.ojito:active { transform: translateY(-50%); }
.ojito[aria-pressed="true"] { color: var(--naranja); }

.enlace-sobrio {
  background: none; color: var(--tinta-suave); padding: 4px 0;
  font-family: var(--texto); font-weight: 400; font-size: 13px; text-decoration: underline;
  justify-self: center;
}
.enlace-sobrio:hover { background: none; color: var(--azul); }

/* ---------- Panel ---------- */

.panel { display: grid; grid-template-columns: 252px 1fr; min-height: 100%; }
/* Un elemento de grilla mide por su contenido salvo que se le diga lo
   contrario. Sin esto, la tira de pestañas —que no corta línea— estira toda la
   página y aparece una barra de desplazamiento horizontal. */
.panel > * { min-width: 0; }

.lateral {
  background: linear-gradient(180deg, var(--azul) 0%, var(--azul-noche) 100%);
  color: #DCEAF2;
  display: flex;
  flex-direction: column;
  padding: 22px 0 16px;
}
.marca { padding: 0 22px 20px; display: grid; gap: 10px; }
/* El logo institucional es oscuro: sobre el azul del panel necesita un respaldo
   claro, si no se pierde. */
.marca-logo {
  height: 40px; width: auto; background: #fff;
  padding: 6px 10px; border-radius: 6px; justify-self: start;
}
.marca-texto { font-size: 11.5px; line-height: 1.3; color: #9FC0D4; }

#menu { flex: 1; overflow-y: auto; }
.menu-grupo {
  margin: 18px 22px 6px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6D9DB8;
  font-weight: 600;
}
#menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #CBE0EC;
  border-radius: 0;
  padding: 9px 22px;
  font-weight: 500;
  font-size: 14px;
  border-left: 3px solid transparent;
}
#menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
#menu button.activo {
  background: rgba(255,255,255,.11);
  border-left-color: var(--naranja);
  color: #fff;
  font-weight: 600;
}
#menu button[hidden] { display: none; }

/* Módulos previstos: dentro del alcance, todavía sin construir. Se ven, pero
   no se pueden abrir ni se confunden con los que ya funcionan. */
#menu button.previsto { color: #6D9DB8; cursor: default; font-style: italic; }
#menu button.previsto:hover { background: transparent; color: #6D9DB8; }
#menu button.previsto::after {
  content: "previsto";
  float: right;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 1px 6px;
  margin-top: 2px;
}

.lateral-pie { padding: 14px 22px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; }
.lateral-pie p { margin: 0 0 4px; color: #fff; font-weight: 500; }
.enlace {
  background: none; padding: 0; color: #9FC0D4;
  font-family: var(--texto); font-weight: 400; font-size: 12.5px; text-decoration: underline;
}
.enlace:hover { background: none; color: var(--naranja); }
a.enlace { display: block; margin-bottom: 8px; font-family: var(--texto); }

main { padding: 26px 32px 48px; min-width: 0; }
.encabezado {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--borde);
}
.encabezado h2 { font-size: 25px; }
.bajada { margin: 3px 0 0; color: var(--tinta-suave); font-size: 13.5px; max-width: 68ch; }

.pastilla {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; background: #E4F1EA; color: var(--ok); white-space: nowrap;
}
.pastilla.mal { background: #FDECEA; color: #A3241C; }

/* ---------- Piezas ---------- */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 26px; }
.cifra {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px 20px; box-shadow: var(--sombra); border-top: 3px solid var(--azul);
}
.cifra:nth-child(2) { border-top-color: var(--naranja); }
.cifra-rotulo { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 600; }
.cifra-valor { font-family: var(--titulo); font-size: 33px; font-weight: 800; line-height: 1.1; margin-top: 6px; }
/* Un importe con separadores no entra a 33px y rompe la grilla de cifras. */
.cifra-valor.chico { font-size: 24px; }

/* --- La cara de la persona (avatar) ---

   El hueco con las iniciales y la foto usan LA MISMA clase y miden lo mismo: la
   foto reemplaza al hueco en el sitio, y si midieran distinto la pantalla
   pegaría un salto justo cuando la imagen termina de bajar.

   Los cuatro tonos salen del nombre y son de la paleta de la casa. No son
   decorativos: hacen que la misma persona se vea siempre igual, que es lo que
   permite reconocerla de un vistazo en una lista de puro texto. */
.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
  font-family: var(--titulo); font-weight: 700; font-size: 14px; letter-spacing: .5px;
  background: #EEF2F5; color: var(--tinta-suave);
  border: 1px solid var(--borde);
}
.avatar-grande { width: 96px; height: 96px; font-size: 32px; }

.avatar-tono-0 { background: linear-gradient(150deg, #E3EEF4, #CBDFEA); color: var(--azul-hondo); }
.avatar-tono-1 { background: linear-gradient(150deg, #FBE6DA, #F5D2BE); color: var(--naranja-sec); }
.avatar-tono-2 { background: linear-gradient(150deg, #E6EDE7, #D2E0D5); color: var(--ok); }
.avatar-tono-3 { background: linear-gradient(150deg, #EDF2F5, #DBE6EC); color: var(--azul); }

/* "Mis datos": la foto grande con el nombre al lado. */
.perfil-cabeza {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--borde);
}
.perfil-nombre { font-family: var(--titulo); font-weight: 700; font-size: 18px; margin: 0; }
.perfil-cabeza .cifra-nota { margin: 2px 0 0; }
.perfil-foto-acciones {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 6px;
}
/* El campo de archivo vive escondido detrás de la etiqueta, que es lo único que
   se ve; sin esto nada indica que se pueda apretar. */
label.boton-enlace { cursor: pointer; }

/* La ficha del padrón: la misma foto, chica, pegada al nombre. */
.ficha-cabeza { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* --- Fotos de producto (buffet) --- */

/* El hueco de "sin foto" mide lo mismo que la imagen: si la fila sin foto fuera
   más angosta, la columna bailaría y costaría barrer la lista para ver a cuáles
   les falta, que es justo lo que se quiere ver de un vistazo. */
.miniatura {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  background: #EEF2F5; display: block; border: 1px solid var(--borde);
}
.miniatura.vacia {
  display: grid; place-items: center;
  color: var(--tinta-suave); font-size: 11px; border-style: dashed;
}
.miniatura.vacia.grande { width: 72px; height: 72px; font-size: 10px; }

/* Los controles de la fila, en una sola línea y pegados a la derecha. Eran
   cinco y a menos de 1400 px se partían en dos renglones dentados; ahora son
   tres —Foto, Stock, Editar— y las tres operaciones de stock viven adentro. */
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.boton-enlace.activa { background: var(--azul); color: #fff; }
.boton-enlace.activa:hover { background: var(--azul-hondo); }

.acciones-stock {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--borde);
}

/* Campos de un formulario del buffet.
   Antes usaban `.marcas`, que es una fila flexible pensada para casillas en
   línea —a qué carreras sirve una cátedra—. Con campos de texto adentro cada
   uno tomaba un ancho distinto, el nombre del producto quedaba tan angosto como
   el precio y el último campo caía solo a un segundo renglón. Una grilla da
   anchos previsibles y el nombre, que es el campo largo, ocupa toda la fila. */
.campos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px 16px;
  align-items: end;
  margin-bottom: 14px;
}
.campos .ancho { grid-column: 1 / -1; }
/* Dos columnas parejas, para los pasos donde los campos vienen de a pares
   naturales: apellido y nombre, DNI y CUIL, los dos correos. Con la grilla de
   2fr 1fr 1fr el nombre quedaba la mitad de ancho que el apellido sin ninguna
   razón. */
.campos.dos { grid-template-columns: 1fr 1fr; }
/* Una cantidad o un precio no necesitan 300 px: estirarlos hasta llenar la
   celda hace pensar que ahí va un texto largo. */
.campos .corto { max-width: 180px; }
/* Un campo que se puede dejar vacío tiene que decirlo al lado del rótulo, no en
   una nota al pie que se lee después de haber dudado. */
.campos .opcional {
  font-weight: 400; font-size: 11px; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .08em; margin-left: 6px;
}
.campos input[type="file"] { font-size: 13px; padding: 8px 10px; }
/* Sin esto el campo usa su ancho por omisión y deja aire muerto en su celda.
   La casilla queda afuera: estirada a todo el ancho deja de parecer una casilla. */
.campos input:not([type="checkbox"]), .campos select { width: 100%; }
.campos .casilla { flex-direction: row; align-items: center; gap: 8px; }
@media (max-width: 900px) {
  .campos { grid-template-columns: 1fr 1fr; }
}

.foto-editor { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.foto-actual {
  width: 120px; height: 120px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--borde); background: #EEF2F5;
}
.foto-actual.vacia {
  display: grid; place-items: center; color: var(--tinta-suave);
  font-size: 12px; border-style: dashed;
}
.foto-editor input[type="file"] { font-size: 13px; }

/* Vista previa del catálogo tal como lo va a ver el alumno. */
.vitrina { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.vitrina-item { margin: 0; width: 96px; text-align: center; }
.vitrina-item img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--borde); margin: 0 auto;
}
.vitrina-item figcaption { font-size: 11.5px; line-height: 1.3; margin-top: 5px; color: var(--tinta-suave); }
.vitrina-item figcaption strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.cifra-nota { font-size: 12px; color: var(--tinta-suave); margin-top: 2px; }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden; margin-bottom: 20px;
}
.tarjeta-cabeza {
  padding: 14px 20px; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.tarjeta-cabeza h3 { font-size: 15px; }
.tarjeta-cuerpo { padding: 18px 20px; }

.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-family: var(--titulo); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave); font-weight: 600;
  padding: 10px 20px; background: #EEF2F5; border-bottom: 1px solid var(--borde); white-space: nowrap;
}
td { padding: 11px 20px; border-bottom: 1px solid #EDF1F4; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #F7FAFC; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.barra { height: 6px; border-radius: 999px; background: #E6ECF1; overflow: hidden; min-width: 90px; }
.barra span { display: block; height: 100%; background: var(--azul); border-radius: 999px; }

.chip {
  display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: #EAF2F7; color: var(--azul); margin: 2px 4px 2px 0; white-space: nowrap;
}
.chip.tenue { background: #F0F2F4; color: var(--tinta-suave); }
/* Lo que exige atención: una incidencia que inhabilita el aula, una reserva que
   desplaza una clase. Se distingue por color y también por el texto, para que
   no dependa de verlo en color. */
.chip.mal { background: #FDECEA; color: #A3241C; }
/* Lo que todavía no falla pero está por fallar: stock que se está por agotar.
   Necesita un tercer escalón, porque en gris se pierde y en rojo grita lo mismo
   que un agotado, que sí es un problema. El texto también lo dice. */
.chip.naranja { background: #FFF4EE; color: var(--naranja-sec); }

/* Un tramo ocupado del día: una clase del horario o una reserva. Se diferencian
   por el borde de la izquierda, que es lo que se lee al recorrer la columna. */
.bloque {
  display: grid; gap: 1px; padding: 6px 10px; margin-bottom: 6px;
  border-left: 3px solid var(--azul); background: #F5F8FA; border-radius: 0 6px 6px 0;
}
.bloque.reserva { border-left-color: var(--naranja); background: #FFF6F1; }
.bloque-hora {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--tinta-suave);
}
.bloque-que { font-family: var(--titulo); font-size: 13.5px; }

.vacio { padding: 34px 20px; text-align: center; color: var(--tinta-suave); }
.vacio strong { display: block; font-family: var(--titulo); color: var(--tinta); margin-bottom: 4px; }

.aviso {
  border-left: 3px solid var(--naranja); background: #FFF4EE;
  padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 13.5px; margin-bottom: 20px;
}
.aviso strong { font-family: var(--titulo); }

.crecer { flex: 1; }

/* Visor de la imagen de constancia. Se cierra con Escape o clic afuera; el
   objeto se libera al cerrar para que no quede en la caché del navegador. */
.visor {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(1, 41, 60, .78); padding: 24px;
}
.visor-caja { margin: 0; max-width: min(900px, 92vw); }
.visor-caja img {
  display: block; max-width: 100%; max-height: 78vh; border-radius: 10px;
  background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.visor-caja figcaption, .visor-nota {
  color: #DCEAF2; font-size: 12.5px; text-align: center; margin-top: 12px; max-width: 60ch;
}

/* Un formulario largo —el de difusión— necesita más ancho que uno de alta. */
.formulario.ancho { max-width: 780px; }
.formulario .grupo {
  border: 1px solid var(--borde); border-radius: 12px; padding: 16px 18px;
  display: grid; gap: 14px; margin: 0;
}
.formulario .grupo legend {
  font-family: var(--titulo); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave);
  padding: 0 6px;
}

/* Listas de control largas: se ven completas sin empujar el resto de la página. */
.tabla-wrap.tope { max-height: 320px; overflow-y: auto; }

/* El mensaje tal como se va a mandar: los saltos de línea son parte del texto. */
pre.mensaje {
  font: inherit; white-space: pre-wrap; word-break: break-word; margin: 10px 0 0;
  background: #F7FAFC; border-left: 3px solid var(--borde);
  padding: 14px 16px; border-radius: 0 8px 8px 0;
}

/* Una contraseña que se muestra una sola vez: tiene que poder copiarse bien. */
code.clave {
  display: inline-block; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 17px; letter-spacing: .04em; background: #fff; color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 8px; padding: 5px 12px; margin: 4px 0;
  user-select: all;
}

/* Secciones dentro de un módulo. */
.subpestanas {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde); margin-bottom: 20px;
}
.subpestanas button {
  background: none; color: var(--tinta-suave); border-radius: 8px 8px 0 0;
  border-bottom: 3px solid transparent; padding: 10px 16px; font-size: 14px;
}
.subpestanas button:hover { background: #EEF2F5; color: var(--azul); }
.subpestanas button.activa {
  color: var(--azul); border-bottom-color: var(--naranja); background: #fff;
}

/* Porcentaje con barra: el número solo no se compara de un vistazo. */
.barra-dato { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.barra-dato .barra { flex: 1; }
.barra-dato .porcentaje {
  font-family: var(--titulo); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums; min-width: 46px; text-align: right;
}

/* Un enlace que se ve y se comporta como un botón secundario. */
.boton-enlace {
  display: inline-block; text-decoration: none;
  font-family: var(--titulo); font-weight: 600; font-size: 12.5px;
  padding: 5px 11px; border-radius: 8px; background: #EEF2F5; color: var(--azul);
}
.boton-enlace:hover { background: #E1E8EE; }

/* Grupo de casillas en línea (a qué carreras sirve una cátedra). */
.marcas { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 0 2px; }
.marcas .casilla { font-size: 13.5px; color: var(--tinta); }

.barra-herramientas select { min-width: 120px; }
.barra-herramientas .casilla select { margin-left: 4px; }
select[size] { padding: 4px; }

/* Tabla de revisión: se edita en la celda antes de confirmar la carga. */
input.celda, select.celda {
  padding: 5px 7px; font-size: 13px; border-radius: 5px; width: 100%;
  border: 1px solid transparent; background: transparent;
}
input.celda:hover, select.celda:hover { border-color: var(--borde); background: #fff; }
input.celda:focus, select.celda:focus { background: #fff; }
/* Lo que el analizador no pudo leer se marca: es donde hay que mirar. */
input.celda.falta, select.celda.falta { border-color: var(--naranja); background: #FFF7F3; }
tr.fila-atencion td:first-child { box-shadow: inset 3px 0 0 var(--naranja); }

.enlace-tabla {
  background: none; color: var(--azul); padding: 2px 0;
  font-family: var(--texto); font-weight: 400; font-size: 13px; text-decoration: underline;
}
.enlace-tabla:hover { background: none; color: var(--naranja); }

tr.detalle-contenidos td { background: #F7FAFC; padding: 6px 20px 14px; }
ol.contenidos { margin: 0; padding-left: 26px; columns: 2; column-gap: 32px; font-size: 13px; }
ol.contenidos li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 860px) { ol.contenidos { columns: 1; } }

input[type="file"] { padding: 8px; background: #fff; }

ul.lista-simple { margin: 0; padding-left: 20px; font-size: 13px; color: var(--tinta-suave); }
ul.lista-simple li { margin: 3px 0; }

/* Lista de contenidos mínimos editable. Se guarda al salir del campo. */
ol.contenidos-editables { margin: 0; padding-left: 22px; }
ol.contenidos-editables li {
  display: flex; gap: 8px; align-items: center; margin: 5px 0; padding-left: 4px;
}
ol.contenidos-editables input { flex: 1; min-width: 0; font-size: 13.5px; padding: 6px 9px; }

/* Campo con un texto fijo pegado (el dominio del correo, el +54 9 del celular).
   El adorno es parte de la caja, no un texto suelto al lado. */
.campo-adornado {
  display: flex; align-items: stretch;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
  overflow: hidden;
}
.campo-adornado:focus-within { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.campo-adornado input { border: 0; border-radius: 0; flex: 1; min-width: 0; }
.campo-adornado input:focus { outline: none; }
.adorno {
  display: flex; align-items: center; padding: 0 11px;
  background: #EEF2F5; color: var(--tinta-suave);
  font-size: 13px; white-space: nowrap;
}
.campo-adornado.antes .adorno { border-right: 1px solid var(--borde); }
.campo-adornado.despues .adorno { border-left: 1px solid var(--borde); }

/* Barra de búsqueda y acciones sobre una tabla */
.barra-herramientas {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
}
/* Un toolbar puesto directo en la tarjeta —entre la cabecera y la tabla— no
   está adentro de `.tarjeta-cuerpo`, así que no hereda su padding y queda
   pegado al borde izquierdo, desalineado con el título que tiene arriba.
   Los 22 toolbares que están a nivel de página no son hijos de `.tarjeta` y no
   los toca esta regla. */
.tarjeta > .barra-herramientas { padding: 14px 20px 0; }
.barra-herramientas input[type="search"] { flex: 1 1 280px; min-width: 0; }
.casilla {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--tinta-suave); white-space: nowrap;
}
.casilla input { width: auto; }

.subtitulo {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-suave); margin: 22px 0 2px;
  padding-top: 16px; border-top: 1px solid var(--borde);
}

button.chico { padding: 5px 11px; font-size: 12.5px; }

/* Filas dadas de baja: presentes pero desactivadas visualmente. */
tr.baja td { color: var(--tinta-suave); background: #FAFBFC; }
tr.baja td strong { font-weight: 500; }

/* Formularios dentro del panel */
.formulario { display: grid; gap: 14px; max-width: 560px; }
.formulario-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulario .acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.formulario .pista { font-size: 12px; color: var(--tinta-suave); margin: -6px 0 0; }
.boton-sec {
  background: #EEF2F5; color: var(--azul);
}
.boton-sec:hover { background: #E1E8EE; }

/* ---------- Pantalla angosta ----------
   La columna lateral pasa arriba como barra, y el menú se convierte en una
   tira de pestañas que se desliza en horizontal. El intento anterior de
   acomodar la misma lista vertical en fila la partía en pedazos ilegibles. */

@media (max-width: 860px) {
  .formulario-fila { grid-template-columns: 1fr; }

  .panel { grid-template-columns: 1fr; align-content: start; }

  .lateral { padding: 14px 0 0; }
  .marca { padding: 0 16px 12px; grid-template-columns: auto 1fr; align-items: center; }
  .marca-logo { height: 34px; }
  .marca-texto { font-size: 11px; }

  #menu {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .menu-grupo { display: none; }
  #menu button {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 13px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0;
  }
  #menu button.activo { border-left: 0; border-bottom-color: var(--naranja); }
  /* La etiqueta "previsto" no entra en una pestaña: alcanza con la bastardilla. */
  #menu button.previsto::after { display: none; }

  .lateral-pie {
    display: flex; align-items: baseline; gap: 14px;
    padding: 10px 16px; margin-top: 0;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .lateral-pie p { margin: 0; }

  main { padding: 18px; }
  .encabezado { flex-wrap: wrap; }
}

/* --- Ingreso institucional -------------------------------------------------
   El botón es un enlace y no un <button>: el ida y vuelta con Microsoft lo hace
   el navegador. Se le da la misma presencia que al botón de enviar para que no
   parezca un enlace secundario. */
.boton-ingreso {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--titulo);
  font-weight: 600;
  border-radius: 8px;
  padding: 13px 16px;
  background: var(--naranja);
  color: #fff;
  transition: background .15s ease, transform .05s ease;
}
.boton-ingreso:hover { background: var(--naranja-sec); }
.boton-ingreso:active { transform: translateY(1px); }
.boton-ingreso:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.acceso-nota {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 13px;
  line-height: 1.45;
}

/* El dato que el docente vino a ver: qué clase es. Va grande porque en el aula
   se lee de pasada, con el curso esperando. */
.dato-grande {
  margin: 0 0 2px;
  font-family: var(--titulo);
  font-size: 22px;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.2;
}

/* ---------- Ficha en pasos ----------
   Un formulario largo en la página obliga a recorrer todo para encontrar el
   campo que falta, y el botón de guardar queda a mil píxeles del primer error.
   La ficha de una electiva son veintiocho campos: en pasos, cada pantalla tiene
   los que se contestan de una sentada y el paso dice solo si está completo.

   Es un `<dialog>` nativo: trae el fondo, el foco atrapado adentro y el cierre
   con Escape sin una línea de JavaScript ni una biblioteca. */
dialog.ficha {
  width: min(860px, 94vw);
  max-height: 90vh;
  padding: 0;
  border: none;
  border-radius: 14px;
  box-shadow: var(--sombra);
  background: var(--superficie);
  color: var(--tinta);
  /* La caja es una columna: cabeza y pie fijos, cuerpo con su propio scroll. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
dialog.ficha::backdrop { background: rgba(1, 41, 60, .55); }
dialog.ficha[open] { animation: ficha-entra .16s ease-out; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(8px); } }

.ficha-cabeza {
  padding: 18px 22px 0;
  border-bottom: 1px solid var(--borde);
}
/* `.ficha-cabeza` se usa en dos lados: la cabecera de una tarjeta del padrón
   —donde es una fila con la foto al lado del nombre— y la cabecera del diálogo,
   que apila el título arriba y los pasos abajo. La regla de la tarjeta le pega a
   las dos y acá dejaba el título y los pasos uno al lado del otro. */
dialog.ficha > .ficha-cabeza { display: block; }
.ficha-titulo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ficha-titulo h3 { margin: 0; font-family: var(--titulo); font-size: 17px; }
/* La foto en el título del diálogo: chica y centrada con el nombre, no apoyada
   sobre la línea de base como el texto que tiene al lado. */
.ficha-titulo .avatar { width: 32px; height: 32px; font-size: 12px; align-self: center; }
.ficha-cerrar {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--tinta-suave); padding: 2px 6px;
}
.ficha-cerrar:hover { color: var(--tinta); }

/* Los pasos son navegación, no una barra de progreso: se puede saltar al que
   uno quiera. Quien vuelve a una ficha a medias sabe qué le falta y va directo. */
.pasos { display: flex; gap: 4px; margin: 14px -22px 0; padding: 0 22px; overflow-x: auto; }
.pasos button {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 8px 12px 10px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 13px; color: var(--tinta-suave);
  display: flex; align-items: center; gap: 7px;
}
.pasos button:hover { color: var(--tinta); }
.pasos button.activo { color: var(--azul); border-bottom-color: var(--naranja); font-weight: 600; }
/* La marca del paso dice de un vistazo dónde falta algo. Verde con tilde =
   listo; naranja con el número = tantos datos pendientes. */
.paso-marca {
  min-width: 20px; height: 20px; border-radius: 999px; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EEF2F5; color: var(--tinta-suave); padding: 0 6px;
}
.paso-marca.listo  { background: #E4F3EB; color: var(--ok); }
.paso-marca.falta  { background: #FBEAE1; color: var(--alerta); }

.ficha-cuerpo { padding: 20px 22px; overflow-y: auto; flex: 1; }
/* Adentro del diálogo el formulario ocupa el ancho disponible: el tope de 560px
   pensado para un formulario suelto en la página acá dejaría media caja vacía. */
.ficha-cuerpo .formulario { max-width: none; }
.ficha-cuerpo h4 {
  margin: 0 0 4px; font-family: var(--titulo); font-size: 14px;
}
.ficha-cuerpo .bajada-paso { margin: 0 0 16px; font-size: 13px; color: var(--tinta-suave); }

.ficha-pie {
  padding: 14px 22px; border-top: 1px solid var(--borde); background: #FAFCFD;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.ficha-pie .crecer { flex: 1; }
.ficha-pie .guardado { font-size: 12px; color: var(--ok); }

@media (max-width: 640px) {
  dialog.ficha { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .ficha-cuerpo .campos { grid-template-columns: 1fr; }
}

/* La contracara de `.opcional`: el campo es obligatorio Y todavía está vacío.
   Solo aparece mientras falta —una vez cargado el rótulo queda limpio—, así lo
   que se ve marcado es siempre lo que queda por hacer y no una decoración fija. */
.campos .pendiente {
  font-weight: 600; font-size: 11px; color: var(--alerta);
  background: #FBEAE1; border-radius: 999px; padding: 2px 8px;
  text-transform: uppercase; letter-spacing: .06em; margin-left: 6px;
}

/* El "por qué" de un campo que no se explica solo.
   Plegado por omisión: quien ya sabe no lo lee, quien duda lo abre ahí mismo y
   no tiene que salir a preguntar. */
.ficha-cuerpo details.por-que { margin: 4px 0 8px; font-size: 13px; }
.ficha-cuerpo details.por-que summary {
  cursor: pointer; color: var(--azul); width: fit-content;
}
.ficha-cuerpo details.por-que p {
  margin: 8px 0 0; color: var(--tinta-suave); line-height: 1.55;
  border-left: 3px solid var(--borde); padding-left: 12px;
}

/* La unidad de un campo numérico, al lado del rótulo.
   UTN distingue la hora cátedra de la hora reloj: la carga semanal se asigna en
   una y el total se informa en la otra. Sin decirlo en el rótulo, cada
   departamento carga la que supone. */
.campos .unidad {
  font-weight: 400; font-size: 11px; color: var(--tinta-suave); margin-left: 4px;
}

/* Buffet · mostrador: el catálogo para tocar a la izquierda, el ticket a la
   derecha. En un teléfono se apilan, ticket arriba porque es lo que se cobra. */
.mostrador { display: grid; grid-template-columns: 1fr 380px; gap: 14px; align-items: start; }
.mostrador-ticket { position: sticky; top: 12px; }
.mostrador-ticket table { width: 100%; }
.mostrador-ticket .acciones-fila { padding: 12px 14px; justify-content: flex-start; flex-wrap: wrap; }
.mostrador-item {
  appearance: none; background: #fff; border: 1px solid #E3E6EA; border-radius: 10px;
  padding: 8px 6px; cursor: pointer; font: inherit; color: inherit; width: 112px;
}
.mostrador-item:hover { border-color: var(--azul); background: #F5F8FB; }
.mostrador-item:active { transform: scale(.97); }
.mostrador-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.mostrador-item span { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 5px; color: var(--tinta-suave); }
.mostrador-item strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .mostrador { grid-template-columns: 1fr; }
  .mostrador-ticket { position: static; order: -1; }
}

.barra-herramientas .cifra-nota { max-width: 32em; }
.mostrador-ticket td { padding: 8px 10px; vertical-align: middle; }
.mostrador-ticket td:first-child { width: 48%; }
.mostrador-ticket td small { display: block; color: var(--tinta-suave); }
.mostrador-ticket .boton-sec { padding: 2px 9px; min-width: 0; }
.mostrador-ticket .boton-sec + strong { display: inline-block; min-width: 1.6em; text-align: center; }

textarea { width: 100%; resize: vertical; line-height: 1.45; }

/* Lista dentro de un aviso: los renglones son datos para leer y actuar
   (una venta con su importe), no viñetas decorativas. */
.aviso .lista-suelta { margin: 8px 0 0; padding-left: 18px; }
.aviso .lista-suelta li { margin: 3px 0; font-variant-numeric: tabular-nums; }

/* Resultados de una búsqueda de persona: filas para tocar, no un <select>.
   El `<select size>` que había antes no comunicaba que la elección estuviera
   hecha; esto sí, porque al elegir la lista desaparece y queda el nombre. */
.resultados {
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
  max-height: 220px; overflow-y: auto; margin-top: -2px;
}
.resultados .resultado {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-bottom: 1px solid #EEF1F4;
  background: none; font: inherit; color: var(--tinta); cursor: pointer;
}
.resultados .resultado:last-child { border-bottom: 0; }
.resultados .resultado:hover,
.resultados .resultado:focus { background: #EEF4F8; outline: none; }
.resultados .vacio-chico { margin: 0; padding: 12px; color: var(--tinta-suave); font-size: 13px; }
.elegido {
  margin: 6px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #EEF4F8; color: var(--tinta); font-size: 14px;
}
.elegido .boton-enlace { margin-left: 6px; }

/* Mapa del campus: la ilustración trae su propio fondo claro; el marco la
   contiene y deja hacer scroll horizontal en pantallas angostas. */
.mapa-campus {
  background: #FFFFFF; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px; overflow-x: auto;
}
.mapa-campus img { display: block; width: 100%; max-width: 1120px; height: auto; margin: 0 auto; }

/* Tablero de incidencias: una columna por estado (por atender, en curso,
   cerradas hace poco). La ficha es una tarjeta chica; el borde izquierdo dice la
   prioridad, como el de los bloques de la agenda dice si es clase o reserva. */
.tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
@media (max-width: 900px) { .tablero { grid-template-columns: 1fr; } }
.tablero-columna {
  background: #F5F8FA; border-radius: var(--radio); padding: 12px; min-height: 120px;
}
.tablero-columna h4 {
  margin: 0 0 10px; font-family: var(--titulo); font-size: 13.5px; color: var(--tinta-suave);
  display: flex; align-items: center; gap: 8px;
}
.tablero-columna.cerradas { background: #F3F5F3; }
.ficha {
  background: #FFFFFF; border: 1px solid var(--borde); border-left: 3px solid var(--azul);
  border-radius: 0 8px 8px 0; padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px;
}
.ficha.alta { border-left-color: #A3241C; }
.ficha.baja { border-left-color: #9AA8B2; }
.ficha.cerrada { opacity: .75; }
.ficha-donde { font-family: var(--titulo); font-size: 14px; }
.ficha-que { margin: 4px 0 6px; }
.ficha-pie { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; color: var(--tinta-suave); }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ficha .formulario { margin-top: 8px; }
.tablero-area + .tablero-area { margin-top: 10px; }
.tablero-area > h3 { font-size: 16px; margin: 0 0 12px; }

/* Mis cátedras: la cátedra en la que ya figura y las opciones para sumarse. */
.origen-propio { background: #EAF6EC; color: #1F6B36; }