/* Estilos comunes de las páginas de herramientas (v72; v73: capa «base», sin .tarjeta ni ancho de los campos;
   v74: sin .mal ni .mensaje, que cambian de una página a otra; v76: sin el ancho de los campos de las ventanas). Regla: aquí solo lo que es igual en TODAS las páginas. Se carga antes del <style> propio de la página:
     <link rel="stylesheet" href="/comun/base.css">
   Todo va en la capa «base»: cualquier regla del <style> propio de la página tiene prioridad sobre estas,
   aunque su selector sea menos preciso (capas CSS: Chrome 99, Safari 15.4, Firefox 97 o más recientes). */
@layer base {

  @font-face{font-family:'Raleway';font-weight:400;font-display:swap;src:url(/comun/raleway-400.woff2) format('woff2');}
  @font-face{font-family:'Raleway';font-weight:600;font-display:swap;src:url(/comun/raleway-600.woff2) format('woff2');}
  @font-face{font-family:'Raleway';font-weight:700;font-display:swap;src:url(/comun/raleway-700.woff2) format('woff2');}
  @font-face{font-family:'Raleway';font-weight:800;font-display:swap;src:url(/comun/raleway-800.woff2) format('woff2');}

  :root{--paper:#F4F6FA;--card:#FFFFFF;--ink:#1E3A4C;--ink-soft:#566476;--line:#D5DCE8;--borde:#8391A8;
        --accent:#2B4A8E;--accent-soft:#E9EFF8;--aviso:#8A5A00;--ok:#3C8A2E;--mal:#B3261E;
        --verde:#7BC144;--amarillo:#F2C14E;--celeste:#4FB3E8;}

  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:"Raleway","Segoe UI",Roboto,Arial,sans-serif;font-size:18px;line-height:1.55;padding:26px 16px 60px;}
  [hidden]{display:none !important;}

  /* Encabezado de una herramienta: título en colores silábicos y nombre de quien entró. */
  .wrap{max-width:900px;margin:0 auto;}
  header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:22px;border-bottom:4px solid var(--accent);}
  h1{font-size:30px;font-weight:800;margin:0;color:var(--accent);}
  h1 .c1{color:var(--verde);} h1 .c2{color:var(--amarillo);} h1 .c3{color:var(--celeste);}
  .quien{margin-left:auto;font-size:16px;color:var(--ink-soft);}
  .nota{color:var(--ink-soft);}

  /* Botones y campos */
  button{font:inherit;font-size:17px;font-weight:700;border-radius:10px;padding:12px 22px;min-height:44px;cursor:pointer;background:var(--accent);color:#fff;border:1px solid var(--accent);}
  button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
  input:not([type=checkbox]):not([type=radio]){font:inherit;font-size:17px;padding:10px 12px;border:1px solid var(--borde);border-radius:8px;}
  .botones{display:flex;justify-content:flex-end;margin-top:14px;}

  /* Ventanas (la del código de acceso la crea /comun/acceso.js) */
  dialog{border:0;border-radius:16px;padding:22px 24px;max-width:460px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(20,40,80,.3);}
  dialog::backdrop{background:rgba(30,58,76,.55);}
  dialog h3{margin:0 0 10px;color:var(--accent);font-size:22px;}
}