/* Manual UTN.BA 2012, pp. 6–9 y 14. El SVG incluye la protección de 1/3 de su altura. */
:root{
 --utn-rojo:#A31235;
 --utn-texto:#000000;
 --utn-gris:#9C9E9F;
 --utn-industrial:#BED600;
 --utn-tipografia:"Helvetica Neue",Helvetica,Arial,sans-serif;
 --utn-blanco:#FFFFFF;
 --utn-superficie:var(--utn-blanco);
 --utn-fondo:#F2F2F2;
 --utn-borde:color-mix(in srgb,var(--utn-gris) 65%,var(--utn-blanco));
 --utn-sombra:color-mix(in srgb,var(--utn-texto) 14%,transparent);
 --utn-velo:color-mix(in srgb,var(--utn-texto) 58%,transparent);
 --alto-identidad:88px;
 --alto-juego:calc(100dvh - var(--alto-identidad));
 color-scheme:light;
}
html.utn-web body{margin:0;padding-top:var(--alto-identidad);background:var(--utn-fondo);color:var(--utn-texto);font-family:var(--utn-tipografia)}
.utn-identidad{display:flex;align-items:center;justify-content:center;gap:16px;background:var(--utn-blanco);color:var(--utn-texto);box-sizing:border-box}
#identidad-institucional{position:fixed;inset:0 0 auto;height:var(--alto-identidad);z-index:200;border-bottom:3px solid var(--utn-rojo);padding:4px 24px}
.utn-identidad img{display:block;width:252px;height:auto;object-fit:contain;flex:none}
.utn-identidad .utn-departamento{font:500 15px/1.4 var(--utn-tipografia);border-left:4px solid var(--utn-industrial);padding-left:16px;max-width:260px}
.utn-identidad-dialogo{justify-content:flex-start;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--utn-rojo)}
.utn-identidad-dialogo img{width:190px;height:auto}
.utn-identidad-dialogo .utn-departamento{font-size:12px;padding-left:10px;max-width:160px}
.utn-web #root .ei-app{top:var(--alto-identidad)}
.utn-web #root :is(.dc-juego,.dc-ranking,.admin-stand){height:var(--alto-juego)}
.utn-web #root :is(.ii-portada,.ei-login,.ii-leaderboard,.di-carga){min-height:var(--alto-juego)}
.utn-web #root :is(.ei-inicio-simple,.di-final){top:var(--alto-identidad)}
.utn-web #root .ei-inicio-simple .di-final-card{max-height:calc(var(--alto-juego) - 32px)}
.utn-web #root .ei-cierre{top:var(--alto-identidad)}
.utn-web #root .ei-indicadores{max-height:calc(var(--alto-juego) - 285px)}
.utn-web #root :is(.ii-portada,.ei-login,.ii-leaderboard,.dc-ranking,.di-carga){background:var(--utn-fondo)}
.utn-web #root .ii-inicio{box-shadow:0 10px 36px var(--utn-sombra)}
.utn-web #root :is(button,a):is([aria-pressed=true],[aria-selected=true]){color:var(--utn-blanco);background:var(--utn-rojo);border-color:var(--utn-rojo)}
.utn-web #root :is(button,a):is([aria-pressed=true],[aria-selected=true]) :is(span,small,strong,b,i,em){color:inherit}
.utn-web #root :is(.di-primario,.dc-primario,.ee-primario,.ei-jugar,.ei-guia-accion,.ei-confirmar-ubicacion,.ei-ir-entregas):not(:disabled){background:var(--utn-rojo);color:var(--utn-blanco);border-color:var(--utn-rojo)}
.utn-web #root :is(.di-primario,.dc-primario,.ee-primario,.ei-jugar,.ei-guia-accion,.ei-confirmar-ubicacion,.ei-ir-entregas) :is(span,small,strong,b){color:inherit}
.utn-web #root :is(a,button):focus-visible{outline:3px solid var(--utn-rojo);outline-offset:3px}
.utn-web #root :is(button,a):is([aria-pressed=true],[aria-selected=true]):focus-visible{outline-offset:4px}
.utn-web #root .ei-control-tiempo button[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--utn-blanco)}
.utn-web #root :is(input,select,textarea){color:var(--utn-texto);accent-color:var(--utn-rojo)}
.utn-web #root .dc-historias-ranking a[aria-current=page]{color:var(--utn-rojo);text-decoration:underline;text-underline-offset:5px}
.utn-web #root .ei-navegacion button[aria-pressed=true] .ei-icono-navegacion{color:var(--utn-blanco);background:transparent}
.utn-web #root .ei-navegacion button b{background:var(--utn-rojo);color:var(--utn-blanco)}
.utn-web #root .ei-navegacion button[aria-pressed=true] b{background:var(--utn-blanco);color:var(--utn-rojo)}
.utn-web #root .ei-panel,.utn-web #root .ei-tarjeta-maquina{box-shadow:0 6px 24px var(--utn-sombra)}
.utn-web #root .ei-panel-interior{scrollbar-color:var(--utn-texto) var(--utn-fondo)}
.utn-web #root :is(.ii-elegir-modo,.ei-estrategias-oficina,.ei-catalogo) button:hover:not([aria-pressed=true]){border-color:var(--utn-rojo)}
.utn-web #root .dc-ranking tr[data-jugador=true]{outline-color:var(--utn-rojo);background:var(--utn-fondo)}
.utn-web #root :is(.dc-bicis-carga,.dc-ruta) [data-cliente="1"]{border-style:dashed}
.utn-web #root :is(.dc-bicis-carga,.dc-ruta) [data-cliente="2"]{border-style:double}
.utn-web #root .ei-cuenta{color:var(--utn-texto)}
.utn-web #root :is(.ei-indicacion-ubicar,.ei-aviso,.ei-recibo-compacto,.ei-control-tiempo,.ei-pie){color:var(--utn-texto)}
.utn-web #root .ii-marca strong{color:var(--utn-texto)}
.utn-web ::selection{background:var(--utn-rojo);color:var(--utn-blanco)}
.utn-web :is(dialog,.di-final) :focus-visible{outline-color:var(--utn-rojo)}
@media(max-width:600px){
 :root{--alto-identidad:88px}
 #identidad-institucional{padding:8px 12px;gap:12px}
 #identidad-institucional img{width:190px;height:auto}
 .utn-identidad .utn-departamento{font-size:12px;padding-left:12px}
}
.utn-web #root .ei-compra-simbolo{background:var(--utn-blanco)}
.utn-web #root .admin-stand :is(.primario,button.activo){background:var(--utn-rojo);color:var(--utn-blanco)}
.utn-web #root .admin-stand .peligro{color:var(--utn-rojo)}
.utn-web #root .di-carga button{background:var(--utn-rojo);color:var(--utn-blanco);border:0;border-radius:10px;min-height:44px;padding:12px 20px}
.utn-web #root .ii-inicio-nueva{background:var(--utn-blanco)}
.utn-web a{color:var(--utn-rojo)}
.utn-web #root .ei-cierre{top:0}
.utn-web #root :is(progress,meter){accent-color:var(--utn-rojo)}
.utn-web #root meter::-webkit-meter-bar{background:var(--utn-fondo)}
.utn-web #root meter::-webkit-meter-optimum-value,.utn-web #root meter::-webkit-meter-suboptimum-value,.utn-web #root meter::-webkit-meter-even-less-good-value{background:var(--utn-rojo)}
.utn-web #root meter::-moz-meter-bar{background:var(--utn-rojo)}
.utn-web #root .ei-pulso-barra i{background:var(--utn-rojo)}
.utn-web #root .ei-pulso-eje i{background:var(--utn-rojo)}
.utn-web #root .di-progreso i{background:var(--utn-rojo)}
.utn-web #root>button{display:block;margin:20px auto;min-height:44px;padding:10px 20px;border:0;border-radius:10px;background:var(--utn-rojo);color:var(--utn-blanco)}
.utn-web #root:not(:has(main)){text-align:center;padding-top:32px}

@media(max-width:380px){
 #identidad-institucional{padding-inline:6px;gap:6px}
 .utn-identidad .utn-departamento{font-size:11px;padding-left:8px}
 .utn-identidad-dialogo{flex-direction:column;align-items:flex-start;gap:4px}
 .utn-identidad-dialogo .utn-departamento{max-width:none}
}