/* hola Swift · Gestión — tokens. Tomados de holaswift.com/assets/css/base.css (comprobado el 10 de noviembre de 2026). */

@font-face{font-family:"Inter";src:url(../marca/fuentes/Inter-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../marca/fuentes/Inter-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(../marca/fuentes/Inter-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Display";src:url(../marca/fuentes/InterDisplay-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Display";src:url(../marca/fuentes/InterDisplay-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* Superficies y texto */
  --pagina:#F7F7F7; --superficie:#FFFFFF; --linea:#E3E3E8; --linea-2:#ECECF0; --punto:#C9C9D1;
  --texto:#111111; --texto-2:#55555F; --texto-3:#6E6E78;

  /* Azul: la interfaz (enlaces, foco). Naranja: Swift y el botón principal. */
  --enlace:#0066CC; --interfaz:#007AFF;
  --cta:#F05138; --cta-press:#DE4529;          /* botón principal, con el relieve de arcilla */
  --boton:#D24020; --boton-press:#B83519;      /* naranja profundo: texto blanco a 4,7:1, para botones planos y texto naranja */
  --swift:#FF6B4D;                             /* solo decorativo: no lleva texto blanco encima */

  /* Estados */
  --hecho:#1F8A44; --hecho-fondo:#E6F4EA;
  --aviso:#8A6100; --aviso-fondo:#FFF7E0; --aviso-borde:#F2D27A;
  --pendiente:#C2321B; --pendiente-fondo:#FFF1F3; --pendiente-borde:#FFC2D0;

  /* Colores del «hola», solo para acentos de sección y gráficos */
  --celeste:#4C8DFF; --verde:#1F8A44; --amarillo:#F5B400; --rosa:#FF4F8B; --morado:#6D5FF0;

  /* Relieve de arcilla del logo 3D: luz desde arriba; al pulsar, la luz se invierte */
  --arcilla:radial-gradient(90% 70% at 50% 18%,rgba(255,255,255,.2),transparent 70%),linear-gradient(rgba(255,255,255,.08),transparent 40%,transparent 62%,rgba(90,20,0,.14));
  --arcilla-borde:inset 0 1.5px 1px rgba(255,255,255,.3),inset 0 -2px 4px rgba(110,25,0,.2),inset 0 0 0 1px rgba(150,40,10,.14),0 3px 8px -3px rgba(200,60,20,.45);
  --arcilla-dentro:linear-gradient(rgba(90,20,0,.2),transparent 45%,transparent 72%,rgba(255,255,255,.1));
  --arcilla-dentro-borde:inset 0 2px 5px rgba(100,20,0,.38),inset 0 -1px 1px rgba(255,255,255,.22),inset 0 0 0 1px rgba(150,40,10,.18),0 1px 2px -1px rgba(200,60,20,.4);

  /* Tipografía */
  --f-titulos:"Inter Display","Inter",system-ui,sans-serif;
  --f-texto:"Inter",system-ui,sans-serif;
  --f-codigo:ui-monospace,SFMono-Regular,Menlo,monospace;   /* el editor */
  --f-documento:"Courier","Courier New",monospace;          /* los documentos generados */

  /* Forma y movimiento */
  --r-tarjeta:28px; --r-panel:20px; --r-campo:14px; --r-pill:999px;
  --sombra:0 1px 2px rgba(17,17,17,.04),0 8px 24px -12px rgba(17,17,17,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --paso:8px;   /* espaciado en múltiplos de 8; la retícula de puntos va a 24 */

  color-scheme:light;
}

*{box-sizing:border-box}
body{margin:0;background:var(--pagina);color:var(--texto);font:400 16px/1.5 var(--f-texto);-webkit-font-smoothing:antialiased}

/* Retícula de puntos del fondo, desvanecida hacia abajo */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 1.5px 1.5px,var(--punto) 1.3px,transparent 1.6px);background-size:24px 24px;background-position:center top;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}

/* Botón principal: uno por pantalla */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:var(--r-pill);border:0;background:var(--arcilla),var(--cta);box-shadow:var(--arcilla-borde);color:#fff;text-shadow:0 1px 1px rgba(120,25,0,.25);
  font:600 15px/1 var(--f-texto);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s,box-shadow .12s}
.btn:hover{background-color:var(--cta-press)}
.btn:active:not(:disabled){background:var(--arcilla-dentro),var(--cta-press);box-shadow:var(--arcilla-dentro-borde);transform:translateY(1px) scale(.98)}
.btn.sec{background:var(--superficie);color:var(--texto);box-shadow:inset 0 0 0 1px var(--linea);text-shadow:none}
.btn.fantasma{background:transparent;color:var(--enlace);box-shadow:none;text-shadow:none}
:focus-visible{outline:2px solid var(--interfaz);outline-offset:2px}

/* Documento generado */
.documento{font:400 12pt/1.5 var(--f-documento);color:#000;background:#fff;max-width:72ch}
.documento h1{font-size:14pt;font-weight:700;text-transform:uppercase;text-align:center;margin:0 0 2em}
.documento h2{font-size:12pt;font-weight:700;text-transform:uppercase;margin:2em 0 1em}
.documento h3{font-size:12pt;font-weight:700;margin:1.5em 0 .5em}
.documento p{margin:0 0 1em;text-align:left}
.documento table{border-collapse:collapse;width:100%}
.documento th,.documento td{border:1px solid #000;padding:4pt 6pt;text-align:left;vertical-align:top}
@page{size:A4;margin:25mm}