/* Tic · tokens v1.0 (2026-10-27). Fuente única de color, letra, forma y espacio.
   Celular: oscuro por defecto. Panel de administración: claro, con barra lateral carbón.
   Las fuentes (OFL) se sirven desde la propia app: no se llama a Google Fonts. */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fuentes/space-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fuentes/space-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fuentes/space-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fuentes/space-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fuentes/space-mono-latin-700-normal.woff2") format("woff2")}

:root {
  /* Marca */
  --tic-verde: #22D98A;          /* acento: botón principal, pulso, foco, marca hecha */
  --tic-verde-hover: #3BE69B;
  --tic-verde-profundo: #0B7A4B; /* verde para texto y enlaces sobre claro (5,4:1) */
  --tic-verde-suave: #E3F9EF;    /* fondo de chips «a tiempo» sobre claro */
  --tic-verde-velo: rgba(34, 217, 138, .14); /* fondo de chips sobre oscuro */
  --tic-pulso-claro: #16C47C;    /* pulso del logotipo sobre claro */
  --tic-carbon: #0E1116;         /* fondo oscuro; texto de botones verdes; tinta sobre claro */
  --tic-grafito: #161B22;        /* tarjetas sobre oscuro */
  --tic-humo: #222A34;           /* superficie elevada / separadores sobre oscuro */
  --tic-niebla: #E8ECF1;         /* texto principal sobre oscuro */

  /* Oscuro (celular) */
  --osc-fondo: var(--tic-carbon);
  --osc-tarjeta: var(--tic-grafito);
  --osc-elevada: var(--tic-humo);
  --osc-linea: #2A323D;
  --osc-borde-campo: #6B7584;    /* 3,7:1 sobre grafito */
  --osc-texto: var(--tic-niebla);
  --osc-texto-2: #8B95A3;        /* 6,2:1 sobre carbón */

  /* Claro (panel de administración) */
  --cla-fondo: #F5F7F9;
  --cla-tarjeta: #FFFFFF;
  --cla-linea: #E3E7EC;
  --cla-borde-campo: #8A94A2;    /* 3,1:1 sobre blanco */
  --cla-texto: var(--tic-carbon);
  --cla-texto-2: #5B6573;        /* 5,9:1 sobre blanco */
  --cla-barra: var(--tic-carbon);
  --cla-barra-texto: #C5CCD6;

  /* Estados */
  --ok: var(--tic-verde);         --ok-claro: var(--tic-verde-profundo); --ok-suave: var(--tic-verde-suave);
  --aviso: #F5B841;               --aviso-claro: #8A5A00;                --aviso-suave: #FDF3DC;
  --error: #FF6B6B;               --error-claro: #B4232A;                --error-suave: #FDECEC;

  /* Letra */
  --letra: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-hora: 44px;    /* reloj del celular, mono 700 */
  --t-titulo: 24px;  /* 700 */
  --t-sub: 18px;     /* 500 */
  --t-cuerpo: 16px;  /* celular */
  --t-panel: 14px;   /* panel */
  --t-chico: 13px;
  --t-etiqueta: 11px; /* mayúsculas, +.08em */

  /* Forma y espacio */
  --r-boton: 14px; --r-tarjeta: 20px; --r-campo: 12px; --r-chip: 999px;
  --alto-boton: 56px;       /* celular: dedo con guante, de pie */
  --alto-boton-panel: 36px; --alto-fila-panel: 44px;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;

  /* Movimiento */
  --dur-rapida: 160ms; --dur-media: 320ms; --curva: cubic-bezier(.2, .8, .2, 1);
}

/* Logotipo en línea (macro tic_logo): el pulso late, y se vuelve ✓ al marcar. */
.tic-logo{display:block;height:auto;overflow:visible}
.tic-logo .tic-pulso circle{fill:var(--tic-verde)}
.tic-logo .tic-check{stroke:var(--tic-carbon);stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.tic-logo.sobre-claro .tic-pulso circle{fill:var(--tic-pulso-claro)}
.tic-logo.is-latido .tic-pulso{animation:tic-latido 1.6s var(--curva) infinite}
.tic-logo.is-hecho .tic-pulso{animation:tic-crece 600ms var(--curva) both}
.tic-logo.is-hecho .tic-check{opacity:1;animation:tic-trazo 600ms var(--curva) 120ms both}
@keyframes tic-latido{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}
@keyframes tic-crece{0%{transform:scale(1)}45%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes tic-trazo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mono,.hora{font-family:var(--letra-mono);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .tic-logo.is-hecho .tic-check{stroke-dashoffset:0}
}