/* Ingreso propio (maquetas v2 de Curie, docs/maquetas/ingreso/): ingresar, invitación, olvido,
   contraseña nueva y Mi cuenta. Va después de plataforma.css (sus tokens y botones).
   Ingresar empieza en A (tarjeta centrada) en pantalla grande y en B (encabezado neutro corto) en el
   celular; cuando llega la foto de la escena (el campus), acceso.js le pone `.c` y pasa a C. Con
   `.c-mover` el panel va a la izquierda (nadie estaba escribiendo); con `.c-quieto` no se mueve
   nada del formulario. Después, con buena conexión, la animación (canvas) reemplaza la foto. */

/* ---------- Formularios ---------- */
.forma-v2 { width: 100%; }
.titulo-acceso, .forma-v2 h1 { font-size: 32px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.01em; }
.sub-acceso, .forma-v2 .sub { font-size: 15px; color: var(--texto-2); margin: 0 0 28px; }
.campo-a { display: grid; gap: 6px; margin-bottom: 20px; }
.campo-a label, .campo-a .etiqueta-a { font-size: 15px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.campo-a label a { font-size: 13px; }
.entrada { position: relative; }
.entrada input { width: 100%; height: 48px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); color: var(--texto); font: inherit; font-size: 16px; padding: 0 14px; }
.entrada input:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.entrada input[aria-invalid="true"] { border-color: var(--sci-rojo, #9B2423); }
.entrada input[readonly] { background: var(--superficie); color: var(--texto-2); }
.entrada .ver { position: absolute; right: 0; top: 0; height: 48px; min-width: 48px; padding: 0 10px; border: 0; background: none; color: var(--texto-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; border-radius: var(--radio); }
.entrada .ver:hover { color: var(--texto); }
.enlace-bloque { display: inline-flex; align-items: center; min-height: 32px; }
.entrada .ver svg { width: 18px; height: 18px; }
.entrada.con-ver input { padding-right: 110px; }
.entrada.con-boton { display: flex; gap: 8px; }
.entrada.con-boton .boton { height: 48px; flex: none; }
.ayuda-c { font-size: 13px; color: var(--texto-2); }
.boton.ancho { width: 100%; height: 48px; font-size: 16px; margin-top: 4px; }
.boton[disabled], .boton.inactivo { opacity: .55; cursor: not-allowed; }
/* «Continuar con Google» (pautas de marca de Google): fondo #FFFFFF, borde #747775 y texto #1F1F1F
   en claro; #131314, #8E918F y #E3E3E3 en oscuro. La «G» oficial a 20 px, Roboto Medium (si el equipo
   la tiene; si no, la letra del sitio) y el texto aprobado. Es la única pieza en peso 500: la pide Google. */
.boton-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid #747775; border-radius: 4px; background: #FFFFFF; color: #1F1F1F; font-family: Roboto, "Open Sans", Arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .25px; text-decoration: none; }
.boton-google:hover { background: #F8F8F8; color: #1F1F1F; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.boton-google:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.boton-google .g-logo { width: 20px; height: 20px; flex: none; }
:root[data-modo="oscuro"] .boton-google { background: #131314; border-color: #8E918F; color: #E3E3E3; }
:root[data-modo="oscuro"] .boton-google:hover { background: #1F1F20; color: #E3E3E3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modo]) .boton-google { background: #131314; border-color: #8E918F; color: #E3E3E3; }
  :root:not([data-modo]) .boton-google:hover { background: #1F1F20; color: #E3E3E3; }
}
.separador-o { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--texto-2); font-size: 13px; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.entrada textarea { width: 100%; min-height: 104px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); color: var(--texto); font: inherit; font-size: 16px; padding: 10px 14px; resize: vertical; }
.entrada textarea:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.boton.secundario { background: transparent; color: var(--enlace); border-color: var(--enlace); }
.boton.secundario:hover { background: var(--superficie); color: var(--enlace-activo); }
.boton.peligro { background: #9B1D1C; border-color: #9B1D1C; }
.boton.peligro:hover { background: #7E1716; border-color: #7E1716; }
.mensaje { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radio); margin-bottom: 20px; font-size: 15px; background: var(--superficie); border-left: 3px solid var(--enlace); color: var(--texto); }
.mensaje .ico { margin-top: 2px; flex: none; width: 20px; height: 20px; }
.mensaje.error { border-left-color: var(--sci-rojo, #9B2423); }
.mensaje.error .ico { color: var(--sci-rojo, #9B2423); }
.mensaje.espera { border-left-color: var(--sci-amarillo, #F9A800); }
.mensaje.ok { border-left-color: var(--sci-verde, #237F52); }
.mensaje.ok .ico { color: var(--sci-verde, #237F52); }
.mensaje b { font-weight: 400; display: block; margin-bottom: 2px; }
.mensaje p { margin: 0; }
.otros { margin-top: 20px; font-size: 13px; color: var(--texto-2); }
.ayuda-acceso { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--texto-2); }
.ayuda-acceso p { margin: 0 0 6px; }
/* Medidor de fortaleza y reglas */
.medidor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.medidor i { height: 4px; border-radius: 2px; background: var(--linea-fuerte); }
.medidor[data-n="1"] i:nth-child(-n+1) { background: var(--sci-rojo, #9B2423); }
.medidor[data-n="2"] i:nth-child(-n+2) { background: var(--sci-naranja, #D05D29); }
.medidor[data-n="3"] i:nth-child(-n+3) { background: var(--sci-amarillo, #F9A800); }
.medidor[data-n="4"] i { background: var(--sci-verde, #237F52); }
.reglas { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--texto-2); display: grid; gap: 2px; }
.reglas li::before { content: "○"; display: inline-block; width: 18px; }
.reglas li.ok { color: var(--texto); }
.reglas li.ok::before { content: "✓"; color: var(--sci-verde, #237F52); }
.frase { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); margin: 0 0 20px; font-size: 15px; }
.frase .t2 { width: 100%; }
.frase code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; color: var(--texto); overflow-wrap: anywhere; }
.frase .acc-frase { margin-left: auto; display: flex; gap: 6px; }

/* ---------- Firma y pie ---------- */
.firma-v2 { display: block; text-decoration: none; }
.firma-v2 img { height: 100%; width: auto; display: block; }
.firma-v2 .firma-oscuro { display: none; }
:root[data-modo="oscuro"] .firma-v2 .firma-claro { display: none; }
:root[data-modo="oscuro"] .firma-v2 .firma-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modo]) .firma-v2 .firma-claro { display: none; }
  :root:not([data-modo]) .firma-v2 .firma-oscuro { display: block; }
}
.pie-v2 { font-size: 12px; color: var(--texto-2); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.pie-v2 a { color: var(--texto-2); }
.pie-v2 .credito { display: inline-flex; align-items: center; gap: 6px; }
.pie-v2 .isotipo { width: 14px; height: 16px; display: inline-block; background: currentColor; -webkit-mask: url(/static/marca/plano-base-isotipo.svg) center/contain no-repeat; mask: url(/static/marca/plano-base-isotipo.svg) center/contain no-repeat; }

/* ---------- La escena: la foto fija y, encima, la animación ---------- */
.ing-escena .foto-escena, .ing-escena .lienzo-escena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ing-escena .foto-escena { object-fit: cover; object-position: right center; }
.ing-escena .lienzo-escena { opacity: 0; transition: opacity .8s ease; }
.ing-escena .lienzo-escena.listo { opacity: 1; }
/* La atribución de OpenStreetMap (siempre que se ve la escena) y el reloj: después del formulario
   en el orden del foco, fijos abajo a la derecha. */
.escena-ui { position: fixed; right: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; font-size: 13px; }
.escena-ui > * { pointer-events: auto; }
/* Hasta 1200 px el pie llega a la derecha: el reloj y la atribución van encima de él. */
@media (min-width: 761px) and (max-width: 1200px) { .escena-ui { bottom: 72px; } }
.atribucion-osm { margin: 0; font-size: 11px; line-height: 1.4; color: #fff; background: rgba(20, 20, 19, .74); padding: 3px 8px; border-radius: 4px; max-width: 380px; text-align: right; }
.atribucion-osm a { color: #fff; }
.atribucion-osm .corta { display: none; }
.reloj { position: relative; }
.boton-reloj { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--linea) 70%, transparent); background: color-mix(in srgb, var(--elevada) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--texto); cursor: pointer; font: inherit; font-size: 13px; }
.boton-reloj .ico { width: 16px; height: 16px; }
.boton-reloj .fija { color: var(--enlace); }
.panel-reloj { position: absolute; right: 0; bottom: calc(100% + 8px); width: 320px; padding: 14px 16px; border-radius: 10px; background: var(--elevada); border: 1px solid var(--linea); box-shadow: var(--sombra); color: var(--texto); }
.panel-reloj[hidden] { display: none; }
.panel-reloj input[type=range] { width: 100%; accent-color: var(--enlace); margin: 10px 0 6px; height: 28px; }
.panel-reloj .marcas { display: flex; gap: 4px; flex-wrap: wrap; }
.panel-reloj .marcas button { border: 1px solid var(--linea-fuerte); background: none; color: var(--texto); border-radius: 14px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.panel-reloj .fila-r { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- Ingresar y la familia (invitación, olvido, contraseña nueva): A (pantalla grande) ---------- */
body.acceso-v2 { background: var(--fondo); }
/* `1fr` (no `minmax(0, 1fr)`): la fila del formulario crece con la tarjeta (medidor, frase) y la
   página se desplaza; el pie nunca queda debajo del borde. `overflow-x: clip` deja el desplazamiento vertical. */
.ing { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; position: relative; overflow-x: clip; background: var(--superficie); }
.ing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rojo); z-index: 3; transition: opacity .6s; }
.ing-marca { display: contents; }
.ing-marca > .firma-v2, .ing-marca > .texto-marca { display: none; }
/* La escena y el velo, fijos a la ventana: si la tarjeta es alta y la página se desplaza, la escena queda quieta detrás. */
.ing-escena { position: fixed; inset: 0; opacity: 0; z-index: 0; background: linear-gradient(180deg, #DCE6EC 0%, #EEF1EE 55%, #E7E4DC 100%); --mapa-tierra: #E6E3DA; transition: opacity .9s ease; }
:root[data-modo="oscuro"] .ing-escena { background: linear-gradient(180deg, #121416 0%, #1B1C1C 60%, #1D1D1B 100%); --mapa-tierra: #2A2A28; }
@media (prefers-color-scheme: dark) { :root:not([data-modo]) .ing-escena { background: linear-gradient(180deg, #121416 0%, #1B1C1C 60%, #1D1D1B 100%); --mapa-tierra: #2A2A28; } }
.ing-velo { position: fixed; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .9s ease; background: linear-gradient(90deg, color-mix(in srgb, var(--fondo) 55%, transparent) 0%, transparent 55%); }
.ing-centro { position: relative; z-index: 2; display: grid; place-items: center; padding: 56px 24px 24px; }
.ing-panel { width: 100%; max-width: 448px; background: var(--elevada); border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 64px rgba(0,0,0,.10); padding: 44px 44px 36px; transition: background-color .6s, border-color .6s, box-shadow .6s; }
:root[data-modo="oscuro"] .ing-panel { box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.ing-panel > .firma-v2 { height: 38px; margin-bottom: 40px; }
/* El pie: margen inferior seguro (y la zona segura del celular); nada se corta en ningún alto. */
.ing > .pie-v2 { position: relative; z-index: 2; justify-content: center; padding: 16px 14px max(24px, calc(env(safe-area-inset-bottom) + 16px)); }
/* El mismo relleno en A y en C (solo cambia el fondo): el pie no cambia de alto y el formulario no se mueve. */
.ing > .pie-v2 > * { padding: 4px 10px; border-radius: 12px; line-height: 1.6; transition: background-color .6s; }

/* ---------- C (la escena cargó) ---------- */
.ing.c::before { opacity: 0; }
.ing.c .ing-escena, .ing.c .ing-velo { opacity: 1; }
.ing.c .ing-panel { background: color-mix(in srgb, var(--elevada) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-color: color-mix(in srgb, var(--elevada) 60%, transparent); box-shadow: 0 30px 80px rgba(0,0,0,.18); }
.ing.c > .pie-v2 > * { background: color-mix(in srgb, var(--elevada) 70%, transparent); }
.ing.c.c-mover .ing-centro { place-items: center start; padding: 48px clamp(24px, 7vw, 120px); }
.ing.c.c-mover > .pie-v2 { justify-content: flex-start; padding-left: clamp(24px, 7vw, 120px); padding-right: clamp(24px, 7vw, 120px); }
.ing.c.c-quieto .ing-velo { background: radial-gradient(ellipse 560px 520px at 50% 48%, color-mix(in srgb, var(--fondo) 45%, transparent) 30%, transparent 100%); }
/* ---------- Celular: B, y C con la escena arriba ---------- */
@media (max-width: 760px) {
  .titulo-acceso, .forma-v2 h1 { font-size: 28px; }
  .ing { background: var(--fondo); grid-template-rows: auto 1fr auto; }
  /* Filas fijas: la atribución y el reloj van encima de la tira (fila 1), abajo. */
  .ing-marca { grid-row: 1; grid-column: 1; }
  .ing-centro { grid-row: 2; }
  .ing > .pie-v2 { grid-row: 3; }
  .ing::before { display: none; }
  .ing-marca { display: block; position: relative; overflow: hidden; background: var(--fondo); color: var(--texto); padding: 24px 16px 28px; }
  .ing-marca > .firma-v2 { display: flex; align-items: center; height: 48px; margin: -9px 0; position: relative; z-index: 2; width: max-content; }
  .ing-marca > .firma-v2 img, .ing-marca .firma-c { height: 30px; }
  .ing-marca .firma-c img { height: 100%; }
  .enlace-bloque, .campo-a label a { min-height: 48px; display: inline-flex; align-items: center; }
  .campo-a label { align-items: center; }
  .frase .boton { min-height: 48px; }
  .ing-marca > .texto-marca { display: block; position: relative; z-index: 2; margin-top: 24px; transition: opacity .5s; }
  .texto-marca .app { color: var(--texto); font-size: 28px; line-height: 1.1; margin: 0 0 6px; letter-spacing: -0.01em; }
  .texto-marca p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--texto-2); }
  /* El logo del encabezado: el de la tarjeta (rojo en claro, blanco en oscuro), antes y después de la escena. */
  .ing-marca .firma-v2 .firma-blanca { display: none; }
  .ing-marca .firma-v2 .firma-c { display: block; height: 30px; }
  .ing-escena { position: absolute; z-index: 0; }
  .ing-velo { display: none; }
  .ing-escena .foto-escena { object-position: center 70%; }
  /* El degradado del encabezado sobre la escena (la maqueta de la escena v2c). */
  .ing-marca::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 230px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .9s ease; background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 96%, transparent) 0%, color-mix(in srgb, var(--fondo) 82%, transparent) 55%, color-mix(in srgb, var(--fondo) 0%, transparent) 100%); }
  .ing.c .ing-marca::before { opacity: 1; }
  .escena-ui { position: relative; right: auto; bottom: auto; grid-row: 1; grid-column: 1; align-self: end; flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 0 10px 12px; z-index: 3; }
  .ing.c.c-mover .escena-ui { padding-bottom: 30px; }
  .atribucion-osm { max-width: 48%; text-align: left; }
  /* Al final del formulario: texto chico y sin fondo, para no tapar el campus. */
  .ing-panel .atribucion-osm { max-width: none; margin: 24px 0 0; padding: 0; background: none; color: var(--texto-2); font-size: 12px; }
  .ing-panel .atribucion-osm a { color: inherit; }
  .atribucion-osm .larga { display: none; }
  .atribucion-osm .corta { display: inline; }
  .boton-reloj { min-height: 48px; border-radius: 24px; }
  .panel-reloj { width: min(320px, calc(100vw - 20px)); }
  .panel-reloj .marcas button, .panel-reloj .fila-r .boton { min-height: 48px; }
  .ing-centro { padding: 0; place-items: start stretch; }
  .ing-panel { max-width: none; border: 0; border-radius: 0; box-shadow: none !important; padding: 28px 16px 24px; background: transparent; }
  .ing-panel > .firma-v2 { display: none; }
  .ing > .pie-v2 { justify-content: flex-start; padding: 16px 16px max(40px, calc(env(safe-area-inset-bottom) + 24px)); flex-direction: column; align-items: flex-start; gap: 6px; }
  .ing.c .ing-marca { transition: height .7s cubic-bezier(.2, .7, .2, 1), padding .7s; }
  .ing.c .ing-panel { background: var(--fondo); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.08) !important; position: relative; z-index: 2; }
  .ing > .pie-v2 > *, .ing.c > .pie-v2 > * { background: none; padding: 0; }
  .ing.c.c-mover .ing-centro { padding: 0; place-items: start stretch; margin-top: -18px; }
  .ing.c.c-mover > .pie-v2 { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ing *, .ing::before { transition: none !important; animation: none !important; }
}
@media (min-width: 1800px) {
  .titulo-acceso, .forma-v2 h1 { font-size: 35px; }
  .ing-panel { max-width: 480px; }
}

/* ---------- Mi cuenta ---------- */
.cuenta { padding-top: 28px; padding-bottom: 72px; max-width: 880px; }
.cuenta > .t2 { margin: 6px 0 20px; }
.bloque-c { padding: 28px 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px 40px; }
.bloque-c:first-of-type { border-top: 0; }
.bloque-c h2 { font-size: 19px; margin: 0 0 4px; }
.bloque-c .exp { color: var(--texto-2); font-size: 15px; margin: 0; }
.bloque-c .campos { max-width: 440px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 8px; cursor: pointer; }
.opcion input { margin-top: 4px; width: 18px; height: 18px; accent-color: #3D5AA2; flex: none; }
.opcion:has(input:checked) { border-color: var(--texto); }
.sesiones { list-style: none; padding: 0; margin: 0 0 16px; border-top: 1px solid var(--linea); }
.sesiones li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.sesiones .ico { width: 22px; height: 22px; color: var(--texto-2); }
.sesiones .actual { font-size: 13px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; }
.sesiones .actual:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sci-verde, #237F52); }
.guardar { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .bloque-c { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cuenta .boton { height: 48px; }
}

/* «Cerró su sesión» con su botón de cerrar (Mendel, 21/10/2026). */
.mensaje.con-cerrar > div { flex: 1; }
.cerrar-aviso { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -10px -8px -10px 0; border-radius: var(--radio); color: var(--texto-2); }
.cerrar-aviso:hover { color: var(--texto); }
.cerrar-aviso:focus-visible { outline: 2px solid var(--enlace); outline-offset: 1px; }
.mensaje .cerrar-aviso .ico { width: 20px; height: 20px; margin: 0; }
@media (max-width: 760px) { .cerrar-aviso { width: 48px; height: 48px; margin: -14px -12px -14px 0; } }

/* Historial de acceso en Mi cuenta. */
.hist-acceso { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--linea-fuerte); }
.hist-acceso li { display: flex; flex-direction: column; gap: 2px; padding: 0 0 14px 16px; position: relative; font-size: 15px; }
.hist-acceso li::before { content: ""; position: absolute; left: -4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-2); }
.hist-acceso li.alerta::before { background: var(--sci-rojo, #9B2423); }
.hist-acceso .cuando { font-size: 13px; color: var(--texto-2); }

/* ======================================================================================================
   US-001 · Ingreso: colores y distribución (maqueta de Lovelace II aprobada por Gus, 21/10/2026).
   Una sola propuesta: el rojo Univalle solo en el logo y en la acción principal; enlaces del color del
   texto con subrayado fino; tarjeta sólida; pie neutro de una línea. Todo cuelga de `.ing` (las páginas
   del ingreso): Mi cuenta y el hub de usuarios no cambian.
   Los colores son tokens de marca (regla 8: nada de colores de marca fijos en el código de las páginas);
   los valores por defecto son los del manual (marca-univalle/tokens/colores.css).
   ====================================================================================================== */
:root {
  --accion: #C20E1A;          /* Rojo Univalle (manual): blanco encima 6,23:1 */
  --accion-activo: #9B1D1C;   /* Rojo funcional del manual: blanco encima 8,12:1 */
  --accion-texto: #FFFFFF;
}
.ing {
  --panel: #FFFFFF;           /* tarjeta sólida: nada del mapa pasa por detrás */
  --panel-borde: #E3E3E1;
  --panel-sombra: 0 1px 2px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.20);
  --campo-fondo: #FFFFFF;
  --campo-borde: #858583;     /* 3,70:1 sobre blanco (bordes de controles: AA pide 3) */
  /* Enlaces sutiles: el color del texto; el subrayado fino y tenue se vuelve pleno al pasar el cursor. */
  --enlace: #1D1D1B; --enlace-activo: #1D1D1B; --foco: #1D1D1B;
  --subrayado: rgba(29, 29, 27, .38);
}
:root[data-modo="oscuro"] .ing {
  --panel: #1D1D1B; --panel-borde: #3A3A38;
  --panel-sombra: 0 0 0 1px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.55);
  --campo-fondo: #141413; --campo-borde: #7A7A77;   /* 3,92:1 sobre la tarjeta, 4,28:1 sobre el campo */
  --enlace: #EDEDEB; --enlace-activo: #EDEDEB; --foco: #EDEDEB;
  --subrayado: rgba(237, 237, 235, .38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modo]) .ing {
    --panel: #1D1D1B; --panel-borde: #3A3A38;
    --panel-sombra: 0 0 0 1px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.55);
    --campo-fondo: #141413; --campo-borde: #7A7A77;
    --enlace: #EDEDEB; --enlace-activo: #EDEDEB; --foco: #EDEDEB;
    --subrayado: rgba(237, 237, 235, .38);
  }
}
.ing a { text-decoration-color: var(--subrayado); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ing a:hover { text-decoration-color: currentColor; }
.ing .t2 a, .ing .ayuda-acceso a, .ing .otros a, .ing .pie-v2 a { color: inherit; }
.boton-reloj .fija { color: var(--texto-2); }

/* Una sola acción principal, en el color de la marca; Google, secundaria del mismo ancho y alto. */
.boton.accion { background: var(--accion); border-color: var(--accion); color: var(--accion-texto); }
.boton.accion:hover { background: var(--accion-activo); border-color: var(--accion-activo); color: var(--accion-texto); }
.boton.accion:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ing .boton-google { min-height: 48px; }
.ing .entrada input, .ing .entrada textarea { background: var(--campo-fondo); border-color: var(--campo-borde); }
.ing .entrada input::placeholder { color: var(--texto-2); opacity: 1; }
.ing .entrada input[readonly] { background: var(--superficie); }
.ing .separador-o { margin: 20px 0; }
.ing .separador-o::before, .ing .separador-o::after { background: var(--linea-fuerte); }

/* Orden del foco: Google, correo, contraseña, mostrar, ¿olvidó?, Ingresar, pedir invitación. El enlace va
   después del campo en el código y se pinta en la fila de la etiqueta. */
.campo-a.campo-clave { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.campo-clave > label { grid-column: 1; grid-row: 1; }
.campo-clave > .entrada { grid-column: 1 / -1; grid-row: 2; }
.campo-clave > .olvido { grid-column: 2; grid-row: 1; justify-self: end; font-size: 13px; white-space: nowrap; }
@media (max-width: 760px) { .campo-clave > .olvido { min-height: 48px; display: inline-flex; align-items: center; } .campo-a.campo-clave { align-items: center; } }

/* La firma es enlace: sin subrayado y con foco visible. La barra bajo «Universidad del Valle» es parte del
   logotipo oficial (manual, p. 2), no un subrayado de enlace. */
.firma-v2, .firma-v2:hover { text-decoration: none; }
.firma-v2:focus-visible { outline: 2px solid var(--foco); outline-offset: 6px; border-radius: 2px; }

/* El nombre de la app en la tarjeta (escritorio); «Ingresar» queda como título pequeño debajo. */
.cabeza-app { margin: 0 0 28px; }
.titulo-app { font-size: 32px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.01em; }
.sub-app { font-size: 15px; line-height: 1.5; color: var(--texto-2); margin: 0; }
.ceja-app { font-size: 15px; color: var(--texto-2); margin: 0 0 6px; }
.titulo-tarea { font-size: 19px; line-height: 1.3; margin: 0 0 16px; }

/* «Cerró su sesión.»: una línea, neutra (sin un cuarto color). */
.mensaje.aviso-neutro { align-items: center; border-left-color: var(--texto-2); }
.mensaje.aviso-neutro .ico { color: var(--texto); margin-top: 0; }
.mensaje.aviso-neutro b { margin: 0; }
.mensaje.aviso-neutro .cerrar-aviso { margin-top: -10px; margin-bottom: -10px; }

/* La tarjeta, sólida en claro y en oscuro, antes y después de la escena. */
.ing-panel { background: var(--panel); border-color: var(--panel-borde); }
.ing.c .ing-panel { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--panel-borde); box-shadow: var(--panel-sombra); }
.ing.c .ing-velo { opacity: 0; }

/* El pie: neutro, una sola línea, sin cajitas; igual antes y después de la escena. */
.ing > .pie-v2, .ing.c.c-mover > .pie-v2 { background: var(--panel); color: var(--texto-2); border-top: 1px solid var(--panel-borde); font-size: 12px; justify-content: space-between; align-items: center; gap: 4px 24px; padding: 12px clamp(24px, 7vw, 120px) max(12px, env(safe-area-inset-bottom)); }
.ing > .pie-v2 > *, .ing.c > .pie-v2 > * { background: none; padding: 0; border-radius: 0; line-height: 1.5; }
.pie-v2 .credito { white-space: nowrap; }
/* El crédito de OpenStreetMap: solo con la escena (en el celular va al final de la tarjeta). */
.ing:not(.c) .pie-osm { visibility: hidden; }
/* El reloj, sólido y encima del pie; en escritorio la atribución ya va en el pie. */
.escena-ui { bottom: 58px; }
@media (min-width: 761px) { .escena-ui .atribucion-osm { display: none; } }
@media (min-width: 761px) and (max-width: 1200px) { .escena-ui { bottom: 58px; } }
@media (min-width: 761px) and (max-width: 1000px) { .escena-ui { bottom: 82px; } }
.boton-reloj { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--panel-borde); box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* Centrado vertical y alturas cortas (1280 × 720). */
.ing-panel > .firma-v2 { margin-bottom: 28px; }
@media (min-width: 761px) {
  .ing-centro { padding: 24px; }
  .ing.c.c-mover .ing-centro { place-items: center start; padding: 24px clamp(24px, 7vw, 120px); }
  .ing-panel { padding: 32px 40px 24px; }
  .ing-panel > .firma-v2 { margin-bottom: 24px; }
  .cabeza-app { margin-bottom: 20px; }
  .titulo-tarea { margin-bottom: 14px; }
  #mensaje .mensaje { margin-bottom: 16px; }
  .ayuda-acceso { margin-top: 20px; padding-top: 16px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .ing-centro, .ing.c.c-mover .ing-centro { padding-top: 16px; padding-bottom: 16px; }
  .ing-panel { padding: 20px 32px 16px; }
  .ing-panel > .firma-v2 { height: 28px; margin-bottom: 12px; }
  .cabeza-app { margin-bottom: 10px; }
  .titulo-app { font-size: 26px; margin-bottom: 4px; }
  .sub-app { font-size: 13px; }
  .titulo-tarea { font-size: 17px; margin-bottom: 8px; }
  #mensaje .mensaje { padding: 8px 12px; margin-bottom: 12px; }
  .ing .entrada input, .ing .entrada .ver { height: 44px; }
  .ing .boton-google { min-height: 44px; }
  .ing .boton.ancho { height: 44px; }
  .campo-a { margin-bottom: 10px; gap: 4px; }
  .ing .separador-o { margin: 8px 0; }
  .ayuda-acceso { margin-top: 14px; padding-top: 12px; }
  .ayuda-acceso p { margin-bottom: 2px; }
}

/* Celular: B al instante y luego C; el encabezado (neutro, con el logo) ya dice qué app es. */
@media (max-width: 760px) {
  .cabeza-app, .ceja-app { display: none; }
  .ing-panel { background: var(--fondo); }
  .ing.c .ing-panel { background: var(--fondo); box-shadow: 0 -8px 24px rgba(0,0,0,.08) !important; border: 0; }
  .pie-v2 .pie-osm { display: none; }
  .ing > .pie-v2, .ing.c.c-mover > .pie-v2 { background: var(--fondo); flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 16px max(40px, calc(env(safe-area-inset-bottom) + 24px)); }
  .titulo-tarea { font-size: 22px; margin-bottom: 20px; }
  .escena-ui { bottom: auto; }
  .boton-reloj { box-shadow: none; }
}