/* Ingreso de estudiante, docente, rector y Secretaría — diseño «más humano» (15 de octubre de 2026).
   A la izquierda la foto real del Templete de Ciénaga, con su pie de foto; en medio una franja con
   la trama de calado de balcón; a la derecha el formulario sobre color arena, con saludo según la
   hora (ingreso.js), título con letra de letrero y textos de ayuda para cada perfil.
   Sin degradados, sin sombras azules, sin partículas. Lo carga cada index.html.
   Colores: arena #F5EFE3, papel #FFFDF8, muro #EADFC9, noche #1E2B33, azul #0B4FA8 (solo botones y
   enlaces), terracota #A8482A, mangle #2E6A4E, Templete #E3B23C (resaltar, nunca texto). */
/* Letra del texto: «ED360 Texto» = Source Sans 3 (OFL), 16 de octubre de 2026. Antes: Atkinson Hyperlegible. */
@font-face { font-family: "ED360 Texto"; src: url(/fuentes/texto-400.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ED360 Texto"; src: url(/fuentes/texto-600.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "ED360 Texto"; src: url(/fuentes/texto-700.woff) format("woff"); font-weight: 700; font-display: swap; }
/* Títulos: Lora 600 (licencia OFL, ver fuentes/LICENCIA-Titulos-Lora-OFL.txt) */
@font-face{font-family:"ED360 Titulos";src:url(/fuentes/titulos-600.woff) format("woff");font-weight:600;font-display:swap}

html body .ix-ingreso,html body #loginBox.ix-ingreso,html body #vLogin.ix-ingreso{
  --ix-arena:#F5EFE3;--ix-papel:#FFFDF8;--ix-muro:#EADFC9;--ix-borde:#C9BBA0;--ix-linea:#DCCFB5;
  --ix-tinta:#1E2B33;--ix-tinta-2:#55606A;--ix-azul:#0B4FA8;--ix-terracota:#A8482A;--ix-templete:#E3B23C;
  position:fixed;inset:0;z-index:30;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(420px,560px);
  max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  background:var(--ix-arena);color:var(--ix-tinta);text-align:left;
  font-family:"ED360 Texto","Segoe UI",Verdana,sans-serif;font-size:16px;line-height:1.45}
html body .ix-ingreso *{box-sizing:border-box}

/* ---- La foto ---- */
.ix-ingreso .ix-foto{position:relative;min-height:100vh;background:#7FA3C9 url(/portada/fondo-cienaga.jpg?v=1) 52% 40%/cover no-repeat}
.ix-ingreso .ix-marca{position:absolute;left:32px;top:28px;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;
  background:var(--ix-arena);border-radius:6px;color:var(--ix-tinta)}
.ix-ingreso .ix-marca img{width:48px;height:48px;object-fit:contain}
.ix-ingreso .ix-marca b{display:block;font-family:"ED360 Titulos",Georgia,serif;font-weight:600;font-size:19px;line-height:1.15}
.ix-ingreso .ix-marca span{display:block;font-size:13px;line-height:1.2;color:var(--ix-tinta-2)}
.ix-ingreso .ix-credito{position:absolute;left:32px;bottom:28px;padding:10px 14px;border-radius:6px;
  background:rgba(30,43,51,.8);color:var(--ix-arena);font-size:13px;line-height:1.35}
.ix-ingreso .ix-credito b{display:block;font-size:14px}

/* ---- La franja de calado (balcones del centro histórico) ---- */
.ix-ingreso .ix-calado{display:block;width:40px;min-height:100vh;background:var(--ix-muro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg stroke='%23A8482A' stroke-opacity='.55' stroke-width='1.6' fill='none'%3E%3Cpath d='M20 3 L37 20 L20 37 L3 20 Z'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3C/g%3E%3Cg fill='%23A8482A' fill-opacity='.55'%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='40' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='40' r='2.4'/%3E%3Ccircle cx='40' cy='40' r='2.4'/%3E%3C/g%3E%3C/svg%3E") 0 0/40px 40px repeat}

/* ---- El formulario ---- */
.ix-ingreso .ix-form{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:48px clamp(32px,5vw,72px)}
.ix-ingreso .ix-form>*{width:100%;max-width:416px}
html body .ix-ingreso .ix-saludo{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--ix-terracota)}
html body .ix-ingreso .ix-form h1{margin:0 0 8px;font-family:"ED360 Titulos",Georgia,serif;font-weight:600;font-size:42px;line-height:1.08;letter-spacing:-.01em;color:var(--ix-tinta);text-align:left}
html body .ix-ingreso .ix-sub{margin:0 0 18px;font-size:16px;line-height:1.5;color:var(--ix-tinta-2);text-align:left}
.ix-ingreso .ix-perfil{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 20px;font-size:15px}
.ix-ingreso .ix-perfil b{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ix-tinta);color:var(--ix-arena)}
.ix-ingreso .ix-perfil b svg{width:18px;height:18px;flex:none}
html body .ix-ingreso .ix-perfil a{display:inline-flex;align-items:center;min-height:44px;color:var(--ix-azul);font-weight:700;text-decoration:underline;text-underline-offset:3px}
html body .ix-ingreso form{margin:0;text-align:left}
html body .ix-ingreso form label{display:block;margin:16px 0 6px;font-size:14px;font-weight:700;color:var(--ix-tinta)}
html body .ix-ingreso form label:first-child{margin-top:0}
html body .ix-ingreso form input{display:block;width:100%;height:50px;margin:0;padding:0 14px;border:1.5px solid var(--ix-borde);border-radius:6px;
  background:var(--ix-papel);color:var(--ix-tinta);font:inherit;font-size:17px;box-shadow:none}
html body .ix-ingreso form input::placeholder{color:#7A7466}
html body .ix-ingreso form input:focus{outline:3px solid var(--ix-templete);outline-offset:1px;border-color:var(--ix-tinta)}
html body .ix-ingreso form button[type=submit]{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin:24px 0 0;padding:0 16px;
  border:0;border-radius:6px;background:var(--ix-azul);color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer;box-shadow:none;transform:none}
html body .ix-ingreso form button[type=submit]:hover{background:#083B7E}
html body .ix-ingreso form button[type=submit]:focus-visible{outline:3px solid var(--ix-templete);outline-offset:3px}
html body .ix-ingreso form button[type=submit] svg{color:#fff}
html body .ix-ingreso .err{text-align:left;color:#10282B}
/* «¿Olvidaste tu clave?» (recuperar.js) como enlace */
html body .ix-ingreso .rc-pie,html body #loginBox.ix-ingreso .rc-pie,html body #vLogin.ix-ingreso .rc-pie{margin:10px 0 0;padding:0;border:0;text-align:left}
html body #loginBox.ix-ingreso .rc-pie button.rc-enlace,html body #vLogin.ix-ingreso .rc-pie button.rc-enlace{
  display:inline-flex;align-items:center;width:auto;min-height:44px;margin:0;padding:0!important;border:0!important;border-radius:0;
  background:transparent!important;box-shadow:none!important;color:var(--ix-azul)!important;font:inherit;font-size:15px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;transform:none}
html body .ix-ingreso .ix-ayuda{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ix-tinta-2)}
.ix-ingreso .ix-pie a{color:var(--ix-tinta-2)}
.ix-ingreso .ix-pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:36px;padding-top:14px;border-top:1px solid var(--ix-linea);
  font-size:13px;color:var(--ix-tinta-2)}

/* Mientras se ve el ingreso, sin el logo, la marca de agua ni el pie de la Secretaría (como en la portada) */
body:has(.ix-ingreso:not([style*="none"])) :is(.mc-pie,.mc-fondo,.mc-logo,.mc-cab){display:none!important}
body:has(.ix-ingreso:not([style*="none"])){overflow:hidden}

/* ---- Tableta y celular: la foto arriba, la franja de calado acostada y el formulario debajo ---- */
@media (max-width:900px){
  html body .ix-ingreso,html body #loginBox.ix-ingreso,html body #vLogin.ix-ingreso{display:flex;flex-direction:column}
  .ix-ingreso .ix-foto{flex:none;min-height:0;height:clamp(200px,32vh,320px);background-position:50% 45%}
  .ix-ingreso .ix-credito{display:none}
  .ix-ingreso .ix-marca{left:16px;top:16px;padding:6px 12px 6px 6px}
  .ix-ingreso .ix-marca img{width:40px;height:40px}
  .ix-ingreso .ix-marca span{display:none}
  .ix-ingreso .ix-calado{flex:none;width:100%;height:22px;min-height:0;background-size:22px 22px}
  .ix-ingreso .ix-form{flex:1 0 auto;min-height:0;justify-content:flex-start;align-items:center;padding:22px 20px calc(16px + env(safe-area-inset-bottom,0px))}
  .ix-ingreso .ix-form>*{max-width:440px}
  html body .ix-ingreso .ix-form h1{font-size:32px}
  .ix-ingreso .ix-pie{margin-top:auto}
}
@media (max-width:600px){
  .ix-ingreso .ix-foto{height:clamp(170px,26vh,220px)}
  html body .ix-ingreso .ix-form h1{font-size:28px;margin-bottom:4px}
  html body .ix-ingreso .ix-sub{display:none}
  .ix-ingreso .ix-perfil{margin-bottom:14px}
  html body .ix-ingreso form label{margin-top:12px}
  html body .ix-ingreso form button[type=submit]{margin-top:18px}
  .ix-ingreso .ix-pie{margin-top:20px}
}

/* ---- Pantallas bajas (16 de octubre de 2026): en computadores con poca altura (portátiles, el navegador con
   barras) el formulario cabía justo y la página se desplazaba: el saludo y el pie quedaban medio ocultos.
   Solo en computador (ancho mayor de 900 px): menos aire arriba y abajo, y títulos un poco más pequeños. ---- */
@media (min-width:901px) and (max-height:780px){
  .ix-ingreso .ix-form{padding-top:22px;padding-bottom:18px}
  html body .ix-ingreso .ix-form h1{font-size:36px;margin-bottom:6px}
  html body .ix-ingreso .ix-sub{margin-bottom:12px;font-size:15px;line-height:1.4}
  html body .ix-ingreso form label{margin-top:12px}
  html body .ix-ingreso form input{height:46px}
  html body .ix-ingreso form button[type=submit]{height:48px;margin-top:18px}
  html body .ix-ingreso .ix-ayuda{margin-top:8px;font-size:13.5px;line-height:1.4}
  .ix-ingreso .ix-pie{margin-top:18px;padding-top:10px}
}
@media (min-width:901px) and (max-height:640px){
  .ix-ingreso .ix-form{padding-top:14px;padding-bottom:12px}
  html body .ix-ingreso .ix-form h1{font-size:30px}
  html body .ix-ingreso .ix-ayuda{display:none}
}