/* Sistemas Aloise — identidad visual compartida por todos los sistemas del sector.
   Colores tomados del logo oficial (recursos/marca/logo.png). Para reutilizar en otro sistema: copiar la
   carpeta sistemas-aloise/ y enlazar este archivo antes que los estilos propios. */

:root {
  /* marca */
  --aloise-rojo: #b10c15;          /* la "A" y LOISE del logo: acción y alertas de marca (7,2:1 sobre blanco) */
  --aloise-rojo-hover: #940a12;
  --aloise-amarillo: #f8e034;      /* contorno del logo: solo como acento, nunca de fondo de texto blanco */
  --aloise-celeste: #4fa6cc;       /* fondo del isotipo: acentos y franja (no alcanza AA con texto blanco) */
  --aloise-azul: #1d6a93;          /* celeste del logo oscurecido hasta AA: botones principales (5,9:1) */
  --aloise-azul-hover: #17577a;

  /* texto y grises */
  --aloise-texto: #1f2430;         /* 15,5:1 sobre blanco */
  --aloise-texto-medio: #3a3f4b;   /* 10,5:1 */
  --aloise-texto-suave: #5b6170;   /* 6,2:1: ayudas y textos secundarios */
  --aloise-borde: #d5d9e0;
  --aloise-borde-suave: #e8ebf0;
  --aloise-fondo: #f5f6f8;
  --aloise-blanco: #ffffff;
  --aloise-foco: #1d6a93;

  --aloise-franja-alto: 4px;
  --aloise-fuente: "Inter", system-ui, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "Inter";
  src: url("fuentes/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Franja tricolor: los tres colores del fondo de marca, en el mismo orden (amarillo, rojo, celeste).
   Uso: <div class="franja-tricolor" aria-hidden="true"></div> */
.franja-tricolor {
  display: block;
  height: var(--aloise-franja-alto);
  background: linear-gradient(90deg,
    var(--aloise-amarillo) 0 33.33%, var(--aloise-rojo) 33.33% 66.66%, var(--aloise-celeste) 66.66% 100%);
}

/* Variante animada: indicador de carga (las tres bandas corren de izquierda a derecha). */
.franja-tricolor--animada {
  background: linear-gradient(90deg,
    var(--aloise-amarillo) 0 16.66%, var(--aloise-rojo) 16.66% 33.33%, var(--aloise-celeste) 33.33% 50%,
    var(--aloise-amarillo) 50% 66.66%, var(--aloise-rojo) 66.66% 83.33%, var(--aloise-celeste) 83.33% 100%);
  background-size: 200% 100%;
  animation: aloise-franja-correr 0.9s linear infinite;
}

@keyframes aloise-franja-correr {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .franja-tricolor--animada { animation: aloise-franja-latido 1.6s ease-in-out infinite; background-size: 100% 100%; }
  @keyframes aloise-franja-latido { 50% { opacity: .45; } }
}

/* Pie de Sistemas Aloise: franja tricolor de 2 px, fondo negro, 12 px. No es fijo: va al final del contenido
   (el sistema hace que el contenido ocupe al menos el alto de la pantalla, así en páginas cortas queda abajo).
   Para alinearlo con el contenido de la página, definir --aloise-pie-ancho y --aloise-pie-margen. */
.aloise-pie {
  --aloise-pie-suave: #a3a9b4;   /* 7,9:1 sobre negro */
  flex: none;
  background: #000;
  color: var(--aloise-pie-suave);
  font: 400 12px/1.4 var(--aloise-fuente);
  font-feature-settings: "tnum" 1;
}
.aloise-pie .franja-tricolor { height: 2px; }
.aloise-pie__contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 24px;
  min-height: 38px;              /* + 2 px de franja = 40 px */
  max-width: var(--aloise-pie-ancho, none);
  margin: 0 auto;
  padding: 6px var(--aloise-pie-margen, 24px);
}
.aloise-pie__lado { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.aloise-pie__contactos { display: contents; }  /* los mails fluyen junto a "Soporte" y cortan línea entre ellos */
@media (max-width: 640px) {
  .aloise-pie__lado .aloise-pie__separador:last-of-type { display: none; }  /* sin la línea suelta antes del año */
}
.aloise-pie__isotipo { display: block; width: 16px; height: 16px; border-radius: 3px; }
.aloise-pie__familia { color: #fff; font-weight: 500; }
.aloise-pie__separador { width: 1px; height: 12px; background: #3a3f4b; }
.aloise-pie__version { color: #747b88; }  /* 4,9:1: dato secundario */
.aloise-pie a { color: var(--aloise-pie-suave); text-decoration: none; }
.aloise-pie a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.aloise-pie a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }