/* Capa base del rediseño (05-08): lo que legado.css le daba al shell y ninguna hoja nueva reimplementaba.
   Reset, cuerpo, tipografía, enlaces, foco, botones y campos base, .wrap, .pie y #cargador.
   Solo tokens, ningún literal de color. Es la capa más baja después de tokens: shell, componentes y
   pantallas la pisan sin !important. Solo la enlaza la cabecera del shell; la clásica sigue con legado.css.
   Inventario regla por regla: docs/rediseno/08-legado-vaciado.md. */
@layer base{
  *{box-sizing:border-box}
  body{margin:0;background:var(--sup-app);color:var(--tx);font:var(--t-med)/1.55 var(--fuente)}

  a{color:var(--tx-enlace)}
  h1{color:var(--tx-titulo);font-size:30px;line-height:1.1;margin:8px 0 16px}
  h2{color:var(--tx-titulo);font-size:19px;border-bottom:3px solid var(--pri);padding-bottom:6px;margin:0 0 12px}

  /* Foco visible por defecto (2.4.7); las piezas del shell y de las vistas fijan el suyo en capas superiores. */
  :focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}

  /* Campos y botones fuera de main (en main los pisa componentes-vistas.css). */
  input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--borde-campo);border-radius:var(--r-md);background:var(--sup)}
  button{font:inherit;font-weight:700;background:var(--pri);color:var(--sobre-pri);border:0;border-radius:var(--r-md);padding:9px 16px;cursor:pointer}
  .btn-sec{background:var(--sup);color:var(--acento);border:1px solid var(--acento)}
  /* En lugar del filter:brightness(1.08) de legado, que aclaraba el verde por debajo de AA. */
  button:hover{background:var(--pri-hover)}
  .btn-sec:hover{background:var(--acento-suave);color:var(--acento)}

  .wrap{max-width:1180px;margin:0 auto;padding:24px 18px 70px}
  .pie{text-align:center;color:var(--tx-2);font-size:13px;padding:20px}
  .pie b{color:var(--tx-titulo)}

  @media (max-width:720px){
    h1{font-size:var(--t-h1)}
  }

  /* Cargador: anillo punteado como el de ecuaquimica.com.ec, con el ícono EQ al centro (lo muestra app.js). */
  #cargador{position:fixed;inset:0;background:color-mix(in srgb, var(--sup) 78%, transparent);z-index:9999;display:none;align-items:center;justify-content:center}
  #cargador.visible{display:flex}
  #cargador .anillo{position:relative;width:84px;height:84px;display:grid;place-items:center}
  #cargador .anillo::before{content:"";position:absolute;inset:0;border:7px dotted var(--pri);border-top-color:transparent;border-radius:50%;animation:giro .8s linear infinite}
  #cargador img{width:40px;height:40px}
  @keyframes giro{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){
    #cargador .anillo::before{animation-duration:2.4s}
  }
}