/* =========================================================================
   EL SISTEMA VISUAL DE OLIMPO ESTUDIO.

   Un archivo, y no dentro de cada pagina, porque ahora hay varias -el shell,
   videos, admin- y el dia que dos discrepen en un gris el producto parece
   hecho por dos personas distintas. Es la regla 1 del proyecto aplicada al
   aspecto: una sola verdad.

   De donde salen los valores
   --------------------------
   Los tokens de color son los mismos de ui.html a proposito: el panel viejo
   vive dentro de una pestaña de este shell, y si el fondo cambiara al cambiar
   de pestaña se veria el remiendo. Lo que SI cambia es la escala: mas aire,
   tipografia mayor y jerarquia mas marcada. El panel viejo es una cabina de
   mando -densidad maxima, todo a la vista-; esto es lo primero que ve alguien
   que no ha usado OLIMPO nunca, y ahi la densidad juega en contra.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* superficies, de mas hondo a mas cerca */
  --bg:#07090e; --p1:#0e1118; --p2:#151a24; --p3:#1e2531; --p4:#273041;
  --line:#242c3a; --line2:#323c4d; --line3:#43506800;

  /* texto */
  --tx:#eef2f8; --tx2:#98a5ba; --tx3:#6b7789;

  /* acento */
  --ac:#5b7cf6; --ac2:#38b2f2; --vio:#7145e6; --cia:#2ac0e8;
  --ok:#31d0a5; --warn:#f0a020; --err:#ff5a5f;
  --oro:#e8b45a; --oro2:#f5d79a;
  /* muestreados del anillo del isotipo (assets/marca) */
  --oro-hondo:#a3895d; --oro-claro:#fdf5d5;

  --r:10px; --r2:7px; --r3:16px;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  --sombra2:0 2px 4px rgba(0,0,0,.3), 0 18px 48px rgba(0,0,0,.45);
  --anillo:0 0 0 3px rgba(91,124,246,.20);

  --f:"Segoe UI", system-ui, -apple-system, sans-serif;
}

html, body{ height:100%; }
body{
  background:
    radial-gradient(1100px 560px at 10% -10%, rgba(113,69,230,.085), transparent 60%),
    radial-gradient(900px 480px at 94% 2%, rgba(42,192,232,.065), transparent 62%),
    var(--bg);
  color:var(--tx);
  font:15px/1.55 var(--f);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- tipografia ---------- */
h1{ font-size:27px; font-weight:800; letter-spacing:-.4px; line-height:1.2; }
h2{ font-size:19px; font-weight:750; letter-spacing:-.2px; }
h3{ font-size:15px; font-weight:700; }
.sub{ color:var(--tx2); font-size:14.5px; }
.mini{ color:var(--tx3); font-size:12.5px; line-height:1.45; }
.rotulo{
  font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--tx3);
}
/* EL DEGRADADO DE LA PALABRA SALE DEL ANILLO DEL ISOTIPO.
   Iba de violeta a cian porque el isotipo anterior era una piramide
   violeta->cian; el nuevo es una medalla dorada, y la palabra quedaba con
   otro color justo AL LADO del logo. En una cabecera de 26 px eso no se lee
   como estilo, se lee como que algo se rompio.
   Los dos tonos estan MUESTREADOS del anillo del propio archivo -el cuarto
   mas oscuro y el mas claro del aro-, no elegidos a ojo: inventar un color de
   marca es lo que ya hizo saltar al dueño una vez. */
.marca-txt{
  background:linear-gradient(100deg,var(--oro-hondo),var(--oro-claro) 55%,var(--oro-hondo));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* =========================================================================
   LAS PESTAÑAS. Forma de Chrome de verdad, no botones cuadrados.

   La curva que sale HACIA FUERA en la base de la pestaña activa es lo que
   hace que se lea como "esta hoja esta delante y las demas detras". Se dibuja
   con dos pseudo-elementos: un cuadrado del color de la pestaña con un
   radio invertido encima. Sin eso, una pestaña redondeada flota y no se
   entiende que es la misma superficie que el contenido de abajo.
   ========================================================================= */
.barra{
  display:flex; align-items:flex-end; gap:2px;
  padding:9px 14px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--p1);
  border-bottom:1px solid var(--line);
  flex-shrink:0; position:relative; z-index:30;
  box-shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.4);
}
.barra .sello{
  display:flex; align-items:center; gap:9px;
  padding:0 16px 11px 2px; align-self:center;
}
/* EL HALO VA DEL COLOR DEL LOGO, Y ESTE SE QUEDO VIEJO.
   Era azul -rgba(90,110,240)- porque el isotipo anterior era una piramide
   violeta->cian. El nuevo es un anillo DORADO, asi que un halo azul detras le
   pone un borde frio que no esta en el archivo y se ve como un error de
   impresion. El tono sale del propio isotipo (#C0A070 muestreado del anillo),
   que es de donde tiene que salir siempre: inventar un color de marca a ojo
   es lo que hizo saltar al dueño con los subtitulos. */
.barra .sello img{ width:26px; height:26px; filter:drop-shadow(0 2px 7px rgba(192,160,112,.45)); }
.barra .sello .nom{ font-size:17px; font-weight:800; letter-spacing:3.2px; }

.pes{
  position:relative;
  display:flex; align-items:center; gap:9px;
  padding:10px 20px 11px;
  border:none; background:transparent; cursor:pointer;
  color:var(--tx3); font:600 14px/1 var(--f);
  border-radius:11px 11px 0 0;
  transition:color .15s, background .15s;
  white-space:nowrap;
}
.pes:hover{ color:var(--tx2); background:rgba(255,255,255,.032); }
.pes .ic{ width:17px; height:17px; flex-shrink:0; opacity:.85; }

.pes.on{
  color:var(--tx);
  background:var(--p2);
  box-shadow:0 -1px 0 var(--line2) inset, 1px 0 0 var(--line) inset, -1px 0 0 var(--line) inset;
}
.pes.on .ic{ opacity:1; }
/* la linea de luz de arriba: marca cual manda sin gritar */
.pes.on::before{
  content:''; position:absolute; left:11px; right:11px; top:0; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--vio),var(--cia));
}
/* las dos orejas de abajo, las que la pegan al contenido */
.pes.on::after{
  content:''; position:absolute; bottom:0; left:-9px; right:-9px; height:10px;
  background:var(--p2);
  -webkit-mask:
     radial-gradient(9px 9px at 9px 0, transparent 99%, #000 100%) left bottom / 9px 10px no-repeat,
     linear-gradient(#000,#000) center bottom / calc(100% - 18px) 10px no-repeat,
     radial-gradient(9px 9px at 0 0, transparent 99%, #000 100%) right bottom / 9px 10px no-repeat;
          mask:
     radial-gradient(9px 9px at 9px 0, transparent 99%, #000 100%) left bottom / 9px 10px no-repeat,
     linear-gradient(#000,#000) center bottom / calc(100% - 18px) 10px no-repeat,
     radial-gradient(9px 9px at 0 0, transparent 99%, #000 100%) right bottom / 9px 10px no-repeat;
}

.chapa{
  font-size:9.5px; font-weight:850; letter-spacing:.9px; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; line-height:1;
  background:linear-gradient(135deg, rgba(232,180,90,.22), rgba(232,180,90,.10));
  color:var(--oro2); border:1px solid rgba(232,180,90,.4);
}
.chapa.gris{ background:var(--p3); color:var(--tx3); border-color:var(--line2); }
.chapa.ok{ background:rgba(49,208,165,.14); color:var(--ok); border-color:rgba(49,208,165,.38); }

.barra .der{ margin-left:auto; display:flex; align-items:center; gap:9px; padding:0 2px 11px; align-self:center; }

/* ---------- el cuerpo: una hoja por pestaña ---------- */
.hojas{ position:absolute; inset:0; top:0; }
.hoja{ position:absolute; inset:0; display:none; background:var(--p2); }
.hoja.on{ display:block; }
.hoja > iframe{ width:100%; height:100%; border:none; display:block; background:var(--p2); }

.marco{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.cuerpo{ flex:1; position:relative; min-height:0; }

/* =========================================================================
   PIEZAS
   ========================================================================= */
.tarjeta{
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0)), var(--p1);
  border:1px solid var(--line);
  border-radius:var(--r3);
  box-shadow:var(--sombra);
}
.tarjeta.pad{ padding:22px 24px; }

label.campo{ display:block; margin-bottom:15px; }
label.campo > .tit{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:650; color:var(--tx2); margin-bottom:6px;
}
label.campo > .tit .req{ color:var(--ac2); font-size:15px; line-height:0; }

/* OJO AL AÑADIR UN TIPO DE CAMPO NUEVO: lo que no esté en esta lista se
   dibuja con el estilo POR DEFECTO DEL NAVEGADOR, o sea fondo blanco y borde
   gris en mitad de un panel oscuro. Paso con `password` al montar la pantalla
   de claves: tres campos blancos y cantaban. Por eso la lista lleva ahora
   todos los tipos de texto, no solo los que se usan hoy. */
input[type=text], input[type=password], input[type=url], input[type=tel],
input[type=email], input[type=search], input[type=number], input[type=date],
select, textarea{
  width:100%; background:var(--p2); color:var(--tx);
  border:1px solid var(--line2); border-radius:var(--r2);
  padding:10px 12px; font:15px/1.4 var(--f);
  transition:border-color .14s, box-shadow .14s, background .14s;
}
input::placeholder, textarea::placeholder{ color:var(--tx3); }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--ac); box-shadow:var(--anillo); background:var(--p3);
}
textarea{ resize:vertical; min-height:76px; }
select{
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a5ba' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}

.b{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line2); background:var(--p3); color:var(--tx);
  border-radius:var(--r2); padding:10px 17px; cursor:pointer;
  font:650 14px/1 var(--f);
  transition:background .14s, border-color .14s, transform .07s, box-shadow .14s, color .14s;
}
.b:hover{ background:var(--p4); border-color:var(--tx3); }
.b:active{ transform:translateY(1px); }
.b:disabled{ opacity:.45; cursor:not-allowed; }
.b.pri{
  background:linear-gradient(135deg, var(--ac), var(--vio));
  border-color:transparent; color:#fff;
  box-shadow:0 3px 14px rgba(91,124,246,.34);
}
.b.pri:hover{ filter:brightness(1.09); box-shadow:0 5px 20px rgba(91,124,246,.44); }
.b.sua{ background:transparent; border-color:var(--line2); color:var(--tx2); }
.b.sua:hover{ color:var(--tx); border-color:var(--ac); background:rgba(91,124,246,.08); }
.b.gr{ padding:13px 24px; font-size:15.5px; }
.b.pel{ border-color:rgba(255,90,95,.35); color:#ff9b9e; background:transparent; }
.b.pel:hover{ background:rgba(255,90,95,.1); border-color:var(--err); }

/* elegir una cosa entre muchas, con la caja entera como blanco */
.rejilla{ display:grid; gap:11px; }
.opt{
  position:relative; display:block; cursor:pointer;
  border:1px solid var(--line2); border-radius:var(--r);
  background:var(--p2); padding:13px 15px;
  transition:border-color .14s, background .14s, box-shadow .14s, transform .1s;
}
.opt:hover{ border-color:var(--tx3); background:var(--p3); transform:translateY(-1px); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt .n{ font-weight:650; font-size:14.5px; margin-bottom:3px; }
.opt .d{ color:var(--tx3); font-size:12.5px; line-height:1.4; }
.opt:has(input:checked){
  border-color:var(--ac); background:rgba(91,124,246,.11);
  box-shadow:var(--anillo);
}
.opt:has(input:checked) .n{ color:#cfdaff; }

.aviso{
  display:flex; gap:11px; align-items:flex-start;
  border-radius:var(--r); padding:12px 14px; font-size:13.5px; line-height:1.5;
  border:1px solid var(--line2); background:var(--p2); color:var(--tx2);
}
.aviso.info{ border-color:rgba(56,178,242,.3); background:rgba(56,178,242,.07); }
.aviso.bien{ border-color:rgba(49,208,165,.32); background:rgba(49,208,165,.07); color:#a9e8d5; }
.aviso.mal{ border-color:rgba(255,90,95,.35); background:rgba(255,90,95,.07); color:#ffc0c2; }

.sep{ height:1px; background:var(--line); margin:22px 0; border:none; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:6px; border:2px solid var(--p2); }
::-webkit-scrollbar-thumb:hover{ background:var(--tx3); }

.oculto{ display:none !important; }

/* =========================================================================
   VIDA.

   El panel estaba correcto y muerto: todo aparecia de golpe, nada respondia y
   los numeros salian clavados como en una hoja de calculo. Para una
   herramienta que alguien abre cada dia a ver que ha vendido, eso es un
   problema de producto, no de gusto.

   Tres reglas para que esto no acabe siendo una feria:

   1. EL MOVIMIENTO DICE ALGO. Un numero que sube contando dice "esto acaba de
      cambiar". Un brillo que pulsa dice "mira aqui". Lo que no significa
      nada, no se mueve.
   2. NADA SE MUEVE DOS VECES. Las animaciones de entrada corren UNA vez al
      pintar; despues la pantalla se queda quieta y se deja leer.
   3. SE RESPETA A QUIEN NO LO QUIERE. Todo va dentro de
      `prefers-reduced-motion`, que es una preferencia del sistema de quien se
      marea con esto. No es opcional.
   ========================================================================= */

/* ---- el degradado que respira detras de todo ---- */
@keyframes auroraOlimpo{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.55; }
  50%    { transform:translate3d(2%,-1.5%,0) scale(1.08); opacity:.8; }
}
body::before{
  content:''; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 12%, rgba(113,69,230,.16), transparent 60%),
    radial-gradient(38% 34% at 84% 8%,  rgba(42,192,232,.13), transparent 62%),
    radial-gradient(30% 30% at 62% 92%, rgba(91,124,246,.10), transparent 64%);
  animation:auroraOlimpo 22s ease-in-out infinite;
  will-change:transform,opacity;
}

/* ---- las tarjetas entran, y solo la primera vez ---- */
@keyframes entra{
  from{ opacity:0; transform:translate3d(0,14px,0); }
  to  { opacity:1; transform:none; }
}
.animo{ animation:entra .42s cubic-bezier(.22,.9,.3,1) both; }
/* el escalonado hace que se lea como una lista que se despliega y no como un
   parpadeo de toda la pantalla a la vez */
.animo:nth-child(1){ animation-delay:.02s } .animo:nth-child(2){ animation-delay:.06s }
.animo:nth-child(3){ animation-delay:.10s } .animo:nth-child(4){ animation-delay:.14s }
.animo:nth-child(5){ animation-delay:.18s } .animo:nth-child(6){ animation-delay:.22s }
.animo:nth-child(7){ animation-delay:.26s } .animo:nth-child(8){ animation-delay:.30s }
.animo:nth-child(n+9){ animation-delay:.34s }

/* ===== EL ESCAPE, Y NO ES UN DETALLE DE ACCESIBILIDAD: ES CONTENIDO =====

   `animation: entra ... both` deja el elemento en el fotograma INICIAL -o
   sea, `opacity:0`- mientras no le llega su turno. Eso esta bien cuando la
   animacion corre. Cuando NO corre, el contenido no se atenua: **no existe**.

   Se descubrio sacandole una foto a la billetera: salia la tarjeta de Libre y
   las de Pro, Premium y Gold estaban en blanco. No era un fallo de la
   rejilla -el DOM las media, 229x420 las cuatro- ni de los datos. Era esto:
   la foto se tomo antes de que la animacion avanzara, y con `both` eso es
   una pantalla de precios con tres cuartas partes invisibles.

   Y quien tenga puesto "reducir movimiento" en su sistema estaba en el mismo
   caso que la camara. `cuenta()` ya respetaba esa preferencia para el numero
   que sube; estas tarjetas no, asi que el programa la respetaba a medias.

   La regla que sale de aqui: si una animacion decide si algo SE VE, tiene que
   haber un camino en el que se vea sin ella. */
@media (prefers-reduced-motion: reduce){
  .animo{ animation:none !important; opacity:1 !important; transform:none !important; }
  .late, .cifra.cambia{ animation:none !important; }
}

/* ---- neon: se usa donde hay que mirar, no en todo ---- */
.neon{
  position:relative;
  box-shadow:0 0 0 1px rgba(91,124,246,.30), 0 0 26px -6px rgba(91,124,246,.55);
}
.neon-oro{
  box-shadow:0 0 0 1px rgba(232,180,90,.34), 0 0 30px -8px rgba(232,180,90,.6);
}
@keyframes latido{
  0%,100%{ box-shadow:0 0 0 1px rgba(232,180,90,.30), 0 0 22px -10px rgba(232,180,90,.45); }
  50%    { box-shadow:0 0 0 1px rgba(232,180,90,.55), 0 0 34px -6px rgba(232,180,90,.8); }
}
.late{ animation:latido 2.6s ease-in-out infinite; }

/* el borde que se enciende al pasar por encima de una tarjeta de formato */
.fmt{ position:relative; overflow:hidden; }
.fmt::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(130deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .65s cubic-bezier(.22,.9,.3,1);
}
.fmt:hover::after{ transform:translateX(120%); }
.fmt:hover{ box-shadow:0 0 0 1px rgba(91,124,246,.35), 0 14px 40px -14px rgba(91,124,246,.5); }

/* ---- el numero que sube ---- */
.cifra{ font-variant-numeric:tabular-nums; }
@keyframes destello{
  0%  { color:var(--oro2); text-shadow:0 0 18px rgba(232,180,90,.9); }
  100%{ color:inherit; text-shadow:none; }
}
.cifra.cambia{ animation:destello 1.1s ease-out; }

/* ---- el botón principal, con brillo que recorre ---- */
.b.pri{ position:relative; overflow:hidden; }
.b.pri::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform:translateX(-130%);
}
.b.pri:hover::after{ transform:translateX(130%); transition:transform .7s ease; }

/* ---- barra de progreso viva ---- */
@keyframes corre{ from{ background-position:0 0 } to{ background-position:34px 0 } }
.progreso{ height:7px; border-radius:4px; background:var(--p3); overflow:hidden; }
.progreso i{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--ac),var(--cia));
  transition:width .6s cubic-bezier(.22,.9,.3,1);
  position:relative;
}
.progreso.viva i::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(115deg, rgba(255,255,255,.22) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%);
  background-size:34px 34px;
  animation:corre .8s linear infinite;
}

/* ---- el punto que respira cuando algo esta pasando ---- */
@keyframes pulso{
  0%  { box-shadow:0 0 0 0 rgba(49,208,165,.55) }
  70% { box-shadow:0 0 0 11px rgba(49,208,165,0) }
  100%{ box-shadow:0 0 0 0 rgba(49,208,165,0) }
}
.vivo{ animation:pulso 1.9s ease-out infinite; }

/* =========================================================================
   Y AQUI SE APAGA TODO PARA QUIEN LO PIDE.
   No es un detalle de accesibilidad de manual: hay gente a la que el
   movimiento en pantalla le produce mareo de verdad, y lo tiene marcado en su
   sistema operativo. Ignorarlo es echarla del producto.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  body::before{ animation:none; opacity:.6; }
}