/* tema.css — paleta unica del portal y de la documentacion.
 *
 * Antes cada pagina llevaba sus colores escritos en su propio <style>, y por eso
 * el pie de la documentacion no se parecia al del portal aunque la cabecera si.
 * Aqui esta la unica definicion; las paginas solo usan var().
 *
 * Tres estados:
 *   sin atributo       -> lo que diga el navegador (prefers-color-scheme)
 *   data-tema="light"  -> claro forzado
 *   data-tema="dark"   -> oscuro forzado
 * La regla oscura va condicionada a :not([data-tema="light"]) para que la
 * eleccion explicita gane tambien cuando el sistema esta en oscuro.
 */
:root{
  --acc:#f5a623;        /* naranja de marca, igual en los dos temas */
  --acc-tx:#9a6212;     /* naranja legible como texto sobre fondo claro */
  --fondo:#faf9f5;
  --sup:#f0eee6;        /* code, pre, chips */
  --tarjeta:#fffdf8;
  --borde:#e5e2d9;
  --borde2:#ddd9cd;
  --tinta:#2b2a27;
  --tinta2:#5c5a54;     /* enlaces de menu */
  --gris:#73716b;
  --gris2:#8a8880;
  --nota-bg:#fdf4e3; --nota-bd:#e0b76a;
  --avi-bg:#fdecea;  --avi-bd:#e0a0a0; --avi-tx:#a02020;
  --ok-bg:#eaf5ec;   --ok-bd:#2e7d32;
  --btn-tx:#111;
  /* ⚠ NO blanco: sobre fondo casi blanco, la banda BORRA las letras a su
     paso. Un gris claramente mas claro que --gris destaca sin tragarse el
     texto. */
  --halo:#c2bfb5;
}

/* ── Oscuro ────────────────────────────────────────────────────────────────
 * El fondo es gris MUY oscuro, no negro: el negro puro da un contraste duro y
 * cansa en lectura larga, que es lo que se hace en la documentacion.
 */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="light"]){
    --acc-tx:#f5b955;
    --fondo:#1e1e1c;
    --sup:#2a2926;
    --tarjeta:#24231f;
    --borde:#37352f;
    --borde2:#403d35;
    --tinta:#e8e6e0;
    --tinta2:#b5b2aa;
    --gris:#9a968c;
    --gris2:#857f74;
    --nota-bg:#332a16; --nota-bd:#6b5220;
    --avi-bg:#3a201e;  --avi-bd:#7a3b3b; --avi-tx:#ef9a9a;
    --ok-bg:#1e2f21;   --ok-bd:#3e7d42;
    --avi-tx:#e08585;
    --halo:#d6d3ca;
  }
}
/* Repetido para la eleccion explicita: un tema no puede definirse solo dentro
 * de un @media, o el selector manual no tendria nada que aplicar. */
:root[data-tema="dark"]{
  --acc-tx:#f5b955;
  --fondo:#1e1e1c;
  --sup:#2a2926;
  --tarjeta:#24231f;
  --borde:#37352f;
  --borde2:#403d35;
  --tinta:#e8e6e0;
  --tinta2:#b5b2aa;
  --gris:#9a968c;
  --gris2:#857f74;
  --nota-bg:#332a16; --nota-bd:#6b5220;
  --avi-bg:#3a201e;  --avi-bd:#7a3b3b; --avi-tx:#ef9a9a;
  --ok-bg:#1e2f21;   --ok-bd:#3e7d42;
  --avi-tx:#e08585;
    --halo:#d6d3ca;
}

/* ── Selector de tema ──────────────────────────────────────────────────── */
#tema-btn{
  background:none;border:1px solid var(--borde);border-radius:8px;
  width:32px;height:32px;padding:0;cursor:pointer;color:var(--gris);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:color .15s,border-color .15s;
}
#tema-btn:hover{color:var(--acc);border-color:var(--acc)}
#tema-btn svg{width:17px;height:17px;display:block}

/* ── Trabajo en curso ──────────────────────────────────────────────────────
 * Un halo claro que recorre el texto, para que se vea que el sistema esta
 * haciendo algo y no colgado. Es lo unico que puede tardar minutos en este
 * producto —una hora de audio no se transcribe al instante— y un texto quieto
 * se interpreta como que se ha roto.
 *
 * ⚠ El halo NO es blanco fijo: es var(--tinta) sobre var(--gris). En oscuro
 * eso ES blanco, que es el efecto que se busca; en claro, blanco sobre fondo
 * claro seria invisible, y lo que contrasta es la tinta oscura. Asi el mismo
 * codigo funciona en los dos temas sin condicionales.
 *
 * El degradado empieza y acaba en gris, y el recorrido es de 0 a -200 % sobre
 * un fondo del 200 %: un periodo exacto, asi que el bucle no da tirones.
 */
.trabajando{
  /* ⚠ inline-block a proposito: en un <span> en linea que se parte en dos
     lineas, el fondo se recorta POR FRAGMENTO y el halo sale cortado a la
     mitad. Con una sola caja el degradado recorre el texto entero. */
  display:inline-block;
  /* ⚠ La banda es BLANCA en los dos temas, no var(--tinta) como en el primer
     intento. En oscuro, blanco sobre gris es un destello evidente. En claro,
     un barrido OSCURO sobre gris tambien "funciona" tecnicamente pero se lee
     como una sombra y en un trabajo de dos segundos no se aprecia: Hugo no lo
     vio. El blanco sobre gris se nota en los dos.
     ⚠ ANCHURA. El primer intento ocupaba 40 puntos del degradado y se veia
     como un caracter y medio encendido a la vez: mas mancha que destello.
     Ahora son 10 —un tercio— con el nucleo entre 48,3 y 51,7 y caidas de 3,3
     a cada lado. Se lee como un brillo que pasa, no como una zona iluminada. */
  background:linear-gradient(90deg,
      var(--gris) 0%, var(--gris) 45%,
      var(--halo) 48.3%, var(--halo) 51.7%,
      var(--gris) 55%, var(--gris) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;   /* Safari lo necesita aparte */
  /* Velocidad a un TERCIO: 1,9 s -> 5,7 s. Con la banda ya estrecha, a la
     velocidad anterior el destello cruzaba casi sin verse. */
  animation:halo 5.7s linear infinite;
}
@keyframes halo{ to{ background-position:-200% center } }

/* ── Logo en marcha ────────────────────────────────────────────────────────
 * El logo de Uttera es un punto con un arco encima, a radio 20. Aqui se
 * anima en tres fotogramas —solo el punto, arco a 20, arco a 40— que se leen
 * como una onda saliendo del punto. Apropiado para un producto de voz, y es
 * el logo de la marca, no un icono generico de espera.
 *
 * Va FUERA del <span> del halo a proposito: ese span tiene color:transparent
 * para que se vea el degradado, y currentColor dentro de el seria invisible.
 */
/* Naranja MIENTRAS trabaja, gris cuando termina: el mismo icono dice en que
   estado esta sin necesidad de leer el texto. Se usa --acc, el naranja de marca
   que ya existe, y no uno nuevo sacado del favicon: el pixel mas vivo del icono
   es #faae51 y a 1,5em la diferencia con #f5a623 no se ve. Dos naranjas de
   marca serian peor que uno aproximado. */
.onda{ width:1.5em; height:1em; vertical-align:-.18em; margin-right:.45em;
       color:var(--acc); flex:0 0 auto }
.onda.fin{ color:var(--gris) }
.onda .o1{ animation:onda-a 1.5s steps(1,end) infinite }
.onda .o2{ animation:onda-b 1.5s steps(1,end) infinite }
@keyframes onda-a{ 0%{opacity:0} 33.3%{opacity:1} 66.6%{opacity:0} }
@keyframes onda-b{ 0%{opacity:0} 66.6%{opacity:1} }

/* La linea de trabajo NO desaparece al acabar: se queda con el logo quieto en
 * su fotograma oficial y el tiempo que ha tardado, delante de lo consumido.
 * Saber cuanto tardo lo de antes es lo que deja calibrar lo siguiente. */
.onda.fin .o1{ animation:none; opacity:1 }
.onda.fin .o2{ animation:none; opacity:0 }
.uso .onda{ margin-right:.35em }
.tardanza{ color:var(--tinta); font-weight:600 }

/* Contador de segundos. Cifras de ancho fijo: sin esto el texto da un salto
 * cada vez que pasa de 9 a 10. */
.crono{ margin-left:.5em; color:var(--gris2); font-variant-numeric:tabular-nums;
        font-size:.92em }

/* Quien pide menos movimiento no lo recibe: queda el texto en gris normal. */
@media (prefers-reduced-motion:reduce){
  .trabajando{
    animation:none;
    color:var(--gris);
    -webkit-text-fill-color:var(--gris);
  }
  /* El logo se queda en el fotograma oficial, el de siempre. */
  .onda .o1{ animation:none; opacity:1 }
  .onda .o2{ animation:none; opacity:0 }
}

/* ── Pie compartido ────────────────────────────────────────────────────── */
/* El padding de abajo NO es decoracion: sin el, la linea de copyright queda
 * pegada al borde de la ventana. Va en padding y no en margin para que no se
 * colapse con el margen de lo que haya debajo. Al estar en tema.css lo
 * heredan el portal, la documentacion y la portada de una vez. */
footer{margin:3.5rem auto 0;padding-bottom:2.5rem;font-size:.825rem;color:var(--gris);width:min(760px,100%);text-align:center}
footer .about{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--borde);font-size:.78rem;line-height:1.6;color:var(--gris)}
footer .about strong{color:var(--tinta);font-weight:600}
footer .about em{color:var(--gris);font-style:italic}
footer .contacto{margin-top:1.1rem;font-size:.8rem}
footer .copyright{margin-top:.55rem;font-size:.72rem;color:var(--gris2)}
footer a{color:var(--acc-tx)}
.seg{border:1px solid var(--nota-bd);background:var(--nota-bg);border-radius:10px;
     padding:.7rem .95rem;margin:0 0 1.2rem;font-size:.72rem;line-height:1.55;
     color:var(--gris);text-align:left}
.seg .seg-t{color:var(--acc-tx);font-weight:700;font-size:.66rem;letter-spacing:.07em;margin-bottom:.4rem}
.seg .seg-h{color:var(--tinta);font-weight:600;margin-bottom:.3rem}
.seg p{margin:.35rem 0}
.seg b{color:var(--tinta)}
.seg .seg-f{margin:.35rem 0 0;color:var(--gris2)}

/* Pista bajo un campo: dice QUE se admite sin gritarlo. Pequena y gris, para
   que no compita con la etiqueta del campo. */
.pista{margin:.3rem 0 0;font-size:.72rem;line-height:1.5;color:var(--gris2)}
.pista code{font-size:.7rem}


/* ── Cabecera comun ────────────────────────────────────────────────────────
 * Estaba escrita en tres sitios -portal, documentacion y portada- y ya habia
 * divergido: el logotipo medía 54 px en dos de ellos y 34 en la portada. Aqui
 * una sola vez; las paginas solo ponen el ancho de su .env.
 */
header.hd{border-bottom:1px solid var(--borde2);margin-bottom:1.5rem}

/* ── La onda de audio detrás de un titular ──────────────────────────────────
 * No es un adorno generico: es la señal real de una frase dicha por nuestra voz
 * estandar. El SVG va de MASCARA y no de imagen, asi que lo que se ve es el
 * degradado animado de debajo recortado por el trazo — y el destello lo recorre.
 * De una mascara solo se usa el canal alfa: el color cocido dentro del SVG da
 * igual.
 *
 * `--onda-x` = cuanto sobresale la onda respecto al bloque del titular. Por
 * defecto 1, que no desborda nada y es lo seguro para una pagina cualquiera; la
 * portada lo sube a 3.
 *
 * ⚠ La altura NO se puede dar con `aspect-ratio`: en un elemento posicionado en
 * absoluto el navegador la resuelve por los desplazamientos y sale un trazo de
 * 33 px. El porcentaje de padding si es fiable, porque se mide siempre contra el
 * ANCHO del contenedor. La proporcion del SVG es 420/3000 = 14 %.
 *
 * ⚠ Si `--onda-x` es mayor que 1, el contenedor de la seccion necesita
 * `overflow:hidden` o aparece barra horizontal en movil. */
/* Dos lineas de aire debajo: con la onda detras, el titulo y el parrafo
 * siguiente se comian el trazo si quedaban pegados.
 * ⚠ El margen COLAPSA con el del parrafo que viene detras -gana el mayor, no se
 *   suman-, asi que este valor es el hueco FINAL, no lo que se añade. Medido:
 *   21 px antes, 59 despues, o sea las dos lineas pedidas. */
.titular{position:relative;--onda-x:1;margin-bottom:3.7rem}
/* El h1 del portal es naranja, y la onda tambien: con una detras, titulo y fondo
 * compartirian color. Donde hay onda, el titulo va en tinta. Acotado a
 * `.titular h1`, asi que los h1 sin onda siguen naranjas. */
.titular h1{color:var(--tinta)}
.onda{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(var(--onda-x) * 100%);height:0;padding-top:calc(var(--onda-x) * 14%);
  pointer-events:none;user-select:none;
  -webkit-mask:url(/static/onda.svg) center/100% 100% no-repeat;
          mask:url(/static/onda.svg) center/100% 100% no-repeat;
  background:linear-gradient(105deg,
    var(--onda-b) 0%,  var(--onda-b) 22%, var(--onda-d) 25%, var(--onda-b) 28%,
    var(--onda-b) 47%, var(--onda-d) 50%, var(--onda-b) 53%,
    var(--onda-b) 72%, var(--onda-d) 75%, var(--onda-b) 78%, var(--onda-b) 100%);
  background-size:220% 100%;
  animation:brillo-uttera 20s linear infinite}
@keyframes brillo-uttera{
  0%  {background-position:    0% 50%}
  100%{background-position: -220% 50%}
}
:root{--onda-b:color-mix(in srgb,var(--acc) 42%,transparent);--onda-d:var(--acc)}
/* En oscuro el naranja pesa mas sobre el fondo: se baja un punto. */
@media(prefers-color-scheme:dark){:root:not([data-tema="light"]){
  --onda-b:color-mix(in srgb,var(--acc) 32%,transparent);
  --onda-d:color-mix(in srgb,var(--acc) 88%,transparent)}}
:root[data-tema="dark"]{
  --onda-b:color-mix(in srgb,var(--acc) 32%,transparent);
  --onda-d:color-mix(in srgb,var(--acc) 88%,transparent)}
/* Sin movimiento: trazo quieto, ni apagado ni al maximo. */
@media(prefers-reduced-motion:reduce){
  .onda{animation:none;background:color-mix(in srgb,var(--acc) 55%,transparent)}}
header.hd .env{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:.8rem}
header.hd .marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--tinta)}
header.hd .marca img{width:54px;height:54px;border-radius:12px;display:block}
header.hd .marca b{font-size:1.55rem;letter-spacing:-.02em}
header.hd .mn{display:flex;align-items:center;gap:1.35rem}
header.hd .mn a{color:var(--tinta2);text-decoration:none;font-size:.92rem}
header.hd .mn a:hover{color:var(--acc-tx)}
@media(max-width:700px){
  header.hd .marca img{width:40px;height:40px;border-radius:10px}
  header.hd .marca b{font-size:1.25rem}
  header.hd .mn{gap:.9rem}
}