/* ============================================================
   IDENTITY — sistema de diseño
   Dark-first. El acento es del usuario, no de la marca: por eso
   el valor por defecto es blanco y sólo se usa en highlights,
   estados activos, glow y detalles. Nunca como relleno.
   ============================================================ */

:root{
  /* ---- superficies: 5 niveles, ningún negro absoluto ------ */
  --bg-primary:   #050505;
  --bg-secondary: #090909;
  --surface:      #0E0E0E;
  --surface-2:    #151515;
  --surface-3:    #1C1C1C;
  --surface-hover:#161616;

  /* ---- bordes -------------------------------------------- */
  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.13);
  --border-loud:   rgba(255,255,255,.22);

  /* ---- texto --------------------------------------------- */
  --text-primary:   #F2F2F2;
  --text-secondary: #A3A3A3;
  --text-muted:     #6B6B6B;
  --text-faint:     #4A4A4A;

  /* ---- acento: sobrescribible por usuario ----------------- */
  --accent:      #FFFFFF;
  --accent-ink:  #050505;
  --accent-soft: rgba(255,255,255,.10);
  --accent-glow: rgba(255,255,255,.22);

  /* ---- semánticos ---------------------------------------- */
  --online:  #3BA55D;
  --idle:    #FAA81A;
  --dnd:     #ED4245;
  --offline: #747F8D;

  /* ---- tipografía ---------------------------------------- */
  --font: "Inter", "Geist", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- escala de espaciado -------------------------------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ---- radios -------------------------------------------- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;

  /* ---- sombra y desenfoque -------------------------------- */
  --shadow:    0 8px 32px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.65);
  --blur:      blur(20px) saturate(160%);

  /* ---- movimiento ---------------------------------------- */
  --transition-fast:   150ms cubic-bezier(.22,.61,.36,1);
  --transition-normal: 240ms cubic-bezier(.22,.61,.36,1);
  --transition-large:  520ms cubic-bezier(.16,1,.3,1);
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- métrica ------------------------------------------- */
  --pad:   clamp(16px,4vw,48px);
  --maxw:  1200px;
  --nav-h: 60px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--bg-primary);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;min-height:100dvh;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video,canvas{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* barras de desplazamiento discretas */
*{ scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:var(--surface-3);
  border-radius:10px;
  border:3px solid var(--bg-primary);
}
*::-webkit-scrollbar-track{ background:transparent; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.1; }

.t-display{
  font-size:clamp(40px,6.4vw,72px);
  font-weight:600;
  letter-spacing:-.042em;
  line-height:1.02;
}
.t-h1{ font-size:clamp(28px,4vw,40px); letter-spacing:-.035em; }
.t-h2{ font-size:clamp(22px,2.6vw,28px); letter-spacing:-.03em; }
.t-sub{
  font-size:clamp(17px,1.7vw,21px);
  font-weight:400;
  line-height:1.5;
  color:var(--text-secondary);
  letter-spacing:-.015em;
}
.t-body{ font-size:15px; color:var(--text-secondary); }
.t-meta{
  font-size:12px;
  color:var(--text-muted);
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.t-label{
  font-size:11px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ============================================================
   PRIMITIVAS
   ============================================================ */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---- botones --------------------------------------------- */
.btn{
  --bg:transparent;
  --fg:var(--text-primary);
  --bd:var(--border-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:10px 18px;
  border:1px solid var(--bd);
  border-radius:var(--radius-sm);
  background:var(--bg);
  color:var(--fg);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.012em;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--transition-fast),
             background var(--transition-fast),
             border-color var(--transition-fast),
             color var(--transition-fast),
             box-shadow var(--transition-normal);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

/* el primario toma el acento; en el chrome eso es blanco */
.btn--primary{
  --bg:var(--accent); --fg:var(--accent-ink); --bd:var(--accent);
}
.btn--primary:hover{ box-shadow:0 8px 28px -10px var(--accent-glow); }

.btn--ghost{ --bd:var(--border); --fg:var(--text-secondary); }
.btn--ghost:hover{ --fg:var(--text-primary); --bd:var(--border-strong); background:var(--surface); }

.btn--quiet{ --bd:transparent; --fg:var(--text-secondary); padding-inline:12px; }
.btn--quiet:hover{ --fg:var(--text-primary); background:var(--surface); }

.btn--sm{ padding:7px 13px; font-size:13px; }
.btn--lg{ padding:13px 24px; font-size:15px; border-radius:var(--radius-md); }
.btn--block{ width:100%; }

/* ---- superficies ------------------------------------------ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  border:1px solid var(--border);
  border-radius:100px;
  background:var(--bg-secondary);
  font-size:12px;
  color:var(--text-secondary);
}

.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--online); flex:none;
}

/* ---- aviso flotante ---------------------------------------- */
.toast{
  position:fixed;
  left:50%; bottom:24px;
  transform:translate(-50%,140%);
  z-index:10000;
  padding:11px 20px;
  border-radius:var(--radius-md);
  background:var(--surface-3);
  border:1px solid var(--border-strong);
  color:var(--text-primary);
  font-size:13.5px;
  font-weight:500;
  box-shadow:var(--shadow-lg);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  transition:transform var(--transition-large);
  pointer-events:none;
  max-width:min(90vw,480px);
  text-align:center;
}
.toast.on{ transform:translate(-50%,0); }
.toast.toast--warn{ border-color:var(--dnd); color:#FFD9DA; }

/* ---- entrada de página ------------------------------------- */
.view{ padding-top:var(--nav-h); min-height:100vh;min-height:100dvh; }

.rise{ animation:rise var(--transition-large) both; }
@keyframes rise{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
.d1{animation-delay:40ms}  .d2{animation-delay:90ms}
.d3{animation-delay:140ms} .d4{animation-delay:190ms}
.d5{animation-delay:240ms} .d6{animation-delay:300ms}

.fade{ animation:fade var(--transition-normal) both; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* enlace de salto para teclado */
.skip{
  position:absolute; left:-9999px; top:0; z-index:10001;
  padding:12px 18px; background:var(--accent); color:var(--accent-ink);
  border-radius:0 0 var(--radius-sm) 0; font-weight:600;
}
.skip:focus{ left:0; }


/* ============================================================
   LA MUESCA Y LA BARRA DE INICIO
   ============================================================
   `index.html` pide `viewport-fit=cover`, o sea que la pagina se
   dibuja DEBAJO de la muesca y de la barra inferior del iPhone. Eso
   es lo que se quiere para un fondo a pantalla completa... pero no
   habia ni un `env(safe-area-inset-*)` compensando, asi que el texto
   del pie quedaba pegado al borde y bajo la barra de inicio.

   La barra de navegacion crece con la muesca en vez de meterse
   debajo. Se hace subiendo `--nav-h`, no tocando `.nav`: hay quince
   `calc(100dvh - var(--nav-h))` repartidos por la hoja, y todos
   siguen cuadrando solos.
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  :root { --nav-h: calc(60px + env(safe-area-inset-top)); }
}

.toast{
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  max-width:calc(100vw - 32px);
}

/* ---- el gesto de "atras" de iOS -----------------------------
   Un desplazamiento horizontal accidental en una pagina que no lo
   necesita se siente como un fallo. Ninguna vista de IDENTITY
   requiere desplazamiento lateral del documento: el que aparezca es
   un error de maquetacion, y asi se nota en vez de deslizarse.
   ------------------------------------------------------------ */
html, body{ overflow-x:clip; }


/* ============================================================
   QUE NADA EMPUJE MAS ANCHO QUE LA PANTALLA
   ============================================================
   Medido a 320 px: la portada sacaba 49 elementos fuera. La causa
   no era ninguno de los 49 — era uno solo, arriba del todo.

   En Grid y en Flex, un hijo NO se encoge por debajo de su
   `min-content` salvo que se le diga. Un `1fr` es en realidad
   `minmax(auto,1fr)`, y ese `auto` es el suelo. El campo de la
   portada («identity.gg/» + el input + «Crear») mide unos 394 px
   juntos, asi que la columna se plantaba en 394 y arrastraba consigo
   el titulo, el parrafo y el resto.

   Los `<input>` traen ademas su propio ancho por defecto (el
   atributo `size`, unos 20 caracteres), que actua igual.

   Esto NO se arregla con media queries: no es cuestion de a partir
   de que ancho, sino de que el suelo existe a cualquier ancho.
   ============================================================ */
input, select, textarea, button{ min-width:0; }

/* Palabras muy largas —una URL, un nombre de usuario sin espacios—
   no pueden ensanchar su contenedor: se parten. */
.view, .pf{ overflow-wrap:anywhere; }

/* Ni las imagenes ni los videos pasan de su hueco. */
img, video, canvas, svg, iframe{ max-width:100%; }


/* ============================================================
   44 PIXELES, PERO SOLO DONDE HAY DEDOS
   ============================================================
   Todo esto vive dentro de `pointer: coarse`, que es «el que apunta
   es un dedo, no un raton». Con raton, 36 px sobran y agrandarlo
   estropearia una densidad ya elegida; con el dedo, 36 px se fallan.

   Medido a 375 px: 16 objetivos por debajo de 44. Aqui van los que
   no se arreglan ampliando el area de toque —esos van con un
   pseudoelemento en profile.css— sino dandoles alto de verdad,
   porque no son iconos sino botones con texto.
   ============================================================ */
@media (pointer: coarse) {
  .btn{ min-height:44px; }

  /* El logo tenia 22 px de alto: el area de toque acababa a media
     letra. Se le da alto sin moverlo de sitio. */
  .nav__mark{ display:inline-flex; align-items:center; min-height:44px; }

  /* Los botones de 1 a 10 se tratan en profile.css, no aqui: esa
     hoja se carga DESPUES y su `min-width:34px` ganaba a esta por
     ser la ultima, no por ser mas especifica. */

  /* Ningun campo por debajo de 44: ademas, en iOS un input con menos
     de 16px de letra hace que Safari haga zoom al enfocarlo y
     descoloca toda la pagina. */
  input, select, textarea{ min-height:44px; font-size:max(16px, 1em); }
}