/* Marca Biofast compartida por todas las herramientas. Fuente de verdad: biofast-plataforma/marca/.
   No editar la copia dentro de una herramienta: se pisa con marca/sincronizar.sh.
   Los colores salen de tokens.json (sincronizar.sh verifica que coincidan). Cada herramienta pone
   sus estilos propios en su propio .css, cargado después de este. */

@font-face {
  font-family: "Asap";
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Asap-Variable.woff2") format("woff2");
}

:root {
  --primario: #004B27;
  --primario-oscuro: #114E0C;
  --secundario: #39743B;
  --acento: #F24C2C;
  --suave: #C8E4C9;
  --fondo: #F1F7F1;
  --superficie: #FFFFFF;
  --texto: #3E4043;
  --texto-suave: #666666;
  --linea: #E0E0E0;
  --ok-fondo: #dff1e0; --ok-texto: #1f5c22;
  --mal-fondo: #fde8e3; --mal-texto: #a8300f;
  --aviso-fondo: #fff3d6; --aviso-texto: #7a5300;
  --neutro-fondo: #edeeee; --neutro-texto: #4a4c50;
  --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.5 "Asap", system-ui, sans-serif; }
h1 { color: var(--primario); font-size: 1.75rem; line-height: 1.2; font-weight: 700; margin: 0; }
h2 { color: var(--primario); font-size: 1.15rem; font-weight: 700; margin: 0 0 12px; }
a { color: var(--secundario); }
:focus-visible { outline: 3px solid var(--secundario); outline-offset: 2px; }
.meta { color: var(--texto-suave); font-size: 0.875rem; font-weight: 400; }

/* ---------- barra superior ----------
   <header class="barra"><div class="barra-adentro">
     <a class="volver-portal" href="https://app.biofast.com.uy">← Herramientas</a>
     <a class="marca" href="/"><img src="…/logo.png" alt="Biofast" height="32"><span>Nombre</span></a>
     <nav class="menu">…</nav>
     <div class="sesion">…</div>
   </div></header> */
.barra { background: var(--superficie); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5; }
.barra-adentro { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 auto; max-width: 1240px; padding: 10px 16px; }
.marca { align-items: center; color: var(--primario); display: flex; font-weight: 700; gap: 10px; text-decoration: none; }
.marca img { height: 32px; width: auto; }
.volver-portal { border-right: 1px solid var(--linea); color: var(--texto-suave); font-size: 0.875rem; padding-right: 16px; text-decoration: none; }
.volver-portal:hover { color: var(--secundario); }
.menu { display: flex; flex-wrap: wrap; gap: 4px; }
.menu a { border-radius: 8px; color: var(--texto); font-weight: 500; padding: 8px 14px; text-decoration: none; }
.menu a:hover { background: var(--fondo); }
.menu a[aria-current="page"] { background: var(--suave); color: var(--primario); font-weight: 700; }
.sesion { align-items: center; display: flex; gap: 12px; margin-left: auto; }
.sesion-mail { color: var(--texto-suave); font-size: 0.875rem; }

.pagina { margin: 0 auto; max-width: 1240px; padding: 24px 16px 64px; }

/* ---------- botones ---------- */
.btn, .btn-enlace { cursor: pointer; font: inherit; }
.btn { align-items: center; background: var(--primario); border: 1px solid var(--primario); border-radius: 8px; color: #fff;
       display: inline-flex; font-weight: 700; justify-content: center; min-height: 44px; padding: 8px 18px; text-decoration: none; }
.btn:hover { background: #003a1e; }
.btn-secundario { background: var(--superficie); color: var(--primario); }
.btn-secundario:hover { background: var(--fondo); }
.btn-enlace { background: none; border: 0; color: var(--secundario); padding: 4px; text-decoration: underline; }

/* ---------- avisos ---------- */
.aviso { border-radius: var(--radio); margin-bottom: 16px; padding: 12px 16px; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.aviso-error { background: var(--mal-fondo); color: var(--mal-texto); }
.aviso-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }

/* ---------- chips ---------- */
.chip { border-radius: 999px; display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 2px 10px; white-space: nowrap; }
.chip-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.chip-mal { background: var(--mal-fondo); color: var(--mal-texto); }
.chip-alerta { background: var(--acento); color: #fff; }
.chip-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.chip-neutro { background: var(--neutro-fondo); color: var(--neutro-texto); }

@media (max-width: 720px) {
  .sesion-mail { display: none; }
  .volver-portal { border-right: 0; padding-right: 0; width: 100%; }
  h1 { font-size: 1.45rem; }
}