/* ═══════════════════════════════════════════════════════════════════════════
 * Trabajá con Chano — hoja de estilo.
 *
 * Los tokens son los del design system `chano` del METAVERSO
 * (07_HERRAMIENTAS/design-systems/chano/tokens.css). No se inventa ningún
 * color: si hace falta uno nuevo, se agrega al design system, no acá.
 *
 * Tres decisiones de composición que vienen de la marca y hay que sostener:
 *
 *   1. FILETES, NO TARJETAS. Un listado que puede crecer a treinta entradas se
 *      separa con línea, no se mete en cajitas. Una grilla de tarjetas es lo
 *      que hace que todo marketplace se vea igual.
 *   2. EL PUNTEADO SIGNIFICA "TODAVÍA NO". Es el código de la marca para lo
 *      provisorio. Acá lo usa la ranura de cada herramienta: vacía es punteada,
 *      y cuando llega el resultado el borde se vuelve sólido. La promesa del
 *      producto, dibujada.
 *   3. EL RESULTADO CAE SOBRE PAPEL. En la marca, el hueso es el mundo del
 *      documento que presentás en una oficina. Acá es lo que le entregás al
 *      cliente. Es lo único claro en toda la app, y por eso se ve.
 *
 * Pisos de `gallery` que se respetan y no se negocian: etiqueta arriba del
 * campo y siempre visible, área táctil de 48 px, todo control con texto (no hay
 * un solo ícono sin palabra al lado), números con `tabular-nums`, borde propio
 * de campo por encima de 3:1, y estados vacíos que ofrecen una salida.
 * ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo Black';
  src: url('/fuentes/ArchivoBlack-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Un solo archivo real de Plex: el regular. NO declarar un @font-face de peso
   600 apuntando a este mismo archivo — el navegador deja de sintetizar el
   semibold y toda la jerarquía de la app se aplana sin dar error. */
@font-face {
  font-family: 'Plex';
  src: url('/fuentes/IBMPlexSans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground: #000000;
  --surface: #1A1A1A;
  --field: #0D0D0D;
  --ink: #FFFFFF;
  --muted: #999999;
  --accent: #EE2B7C;
  --accent-ink: #000000;
  --obra: #FFC13D;
  --paper: #EDE7DE;
  --paper-ink: #17120F;
  --paper-muted: #6B5E64;
  --line: rgba(255, 255, 255, .15);
  --line-strong: rgba(255, 255, 255, .30);
  /* Borde propio de los campos. Al 45 % sobre el fondo de campo da 4,2:1, por
     encima del 3:1 que pide WCAG 1.4.11 para bordes de control. Al 30 % daba
     2,2:1 y el campo se perdía contra el fondo en un teléfono al sol. */
  --borde-campo: rgba(255, 255, 255, .45);
  --gutter: clamp(1rem, 4vw, 2rem);
  --maxw: 46rem;
  --radius: 2px;
  --display: 'Archivo Black', Impact, Haettenschweiler, sans-serif;
  --body: 'Plex', ui-sans-serif, system-ui, sans-serif;
  --barra: 4.25rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* La barra de abajo es fija: sin esto, cualquier `scrollIntoView` deja el
   elemento justo debajo de la barra y el toque cae en la barra en vez de en el
   botón. Se ve como si el botón no funcionara y te mandara a otra pantalla. */
html { scroll-padding-bottom: calc(var(--barra) + 1rem); }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -.022em;
  margin: 0;
}

h1 { font-size: clamp(1.8rem, 7vw, 2.9rem); line-height: .95; }
h2 { font-size: clamp(1.35rem, 5vw, 1.9rem); line-height: 1; }
h3 { font-size: 1.05rem; line-height: 1.15; letter-spacing: -.01em; }

p { margin: 0 0 1rem; }

a { color: var(--ink); }

/* Un solo foco visible para toda la app, en el color de marca. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Al cambiar de pantalla se enfoca <main> para que un lector de pantalla
   anuncie el contenido nuevo. Ese foco NO lleva anillo: Chrome lo trata como
   `:focus-visible` por el tabindex y dibujaba un rectángulo magenta alrededor
   de toda la app en cada navegación. El anuncio se conserva, el marco no. */
#pantalla:focus,
#pantalla:focus-visible {
  outline: none;
}

.envoltorio {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.etiqueta {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  display: block;
}

/* El "volver" de las tres pantallas de detalle. Como enlace de texto corrido
   medía 18 px de alto y el piso de toque es 48: acá el alto lo da el propio
   control, no el renglón. */
.volver {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-bottom: .5rem;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--body);
  text-decoration: none;
  cursor: pointer;
}

.tenue { color: var(--muted); }
.numero { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* Visible sólo para lectores de pantalla. La etiqueta del selector de idioma va
   así: el propio control ya muestra el idioma elegido, y a 390 px la palabra
   "IDIOMA" al lado empujaba la firma a tres renglones. `display:none` no sirve
   acá: sacaría la etiqueta también del lector. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── cabecera ─────────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  padding: .75rem 0 0;
}

/* La firma sola arriba y los controles abajo. En una fila sola, el selector de
   idioma le comía el ancho y "TRABAJÁ CON CHANO" se partía en tres renglones a
   390 px. */
.cabecera-fila { display: block; }

.cabecera-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .55rem;
}

.firma {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .92rem;
  letter-spacing: -.01em;
  line-height: 1;
}

/* El apodo en magenta es la firma de la marca; el resto va en tinta. */
.firma b { color: var(--accent); font-weight: inherit; }

.selector-idioma {
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: .8rem;
  min-height: 3rem;
  padding: 0 .5rem;
}

/* Cambio de modo: dos palabras, no un interruptor. El modo ES la navegación. */
.modos {
  display: flex;
  gap: 1.25rem;
}

.modo {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--body);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 0 0 .55rem;
  min-height: 3rem;
  cursor: pointer;
}

.modo[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ── barra de abajo ───────────────────────────────────────────────────────── */

.barra {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ground);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.barra a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--barra);
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-top: 2px solid transparent;
  margin-top: -1px;
}

/* La sección activa se marca con tinta contra gris, no con magenta. Con el
   subrayado magenta también acá había cuatro cosas gritando en la misma
   pantalla —la firma, el botón, el modo y la sección— y cuando gritan cuatro
   no grita ninguna. El magenta se reserva para la firma, la acción principal y
   el modo, que es la decisión que de verdad cambia lo que ves. */
.barra a[aria-current="page"] {
  color: var(--ink);
  border-top-color: var(--line-strong);
}

/* ── pantalla ─────────────────────────────────────────────────────────────── */

/* `padding-block` y no el atajo `padding`: `.pantalla` va siempre junto a
   `.envoltorio`, y el atajo le borraba el margen lateral. El texto quedaba
   pegado al borde de la pantalla en el teléfono y en el escritorio no se
   notaba, porque ahí sobra ancho. */
.pantalla { padding-block: 1.5rem 2rem; }

.titulo-pantalla { margin-bottom: .35rem; }

.bajada {
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

/* ── filas: la unidad de listado ──────────────────────────────────────────── */

.lista { border-top: 1px solid var(--line); }

.fila {
  display: block;
  width: 100%;
  text-align: start;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  padding: 1.05rem 0;
  min-height: 3.5rem;
  cursor: pointer;
  transition: border-color .18s, transform .18s;
}

.fila:hover { border-bottom-color: var(--line-strong); }
.fila-titulo { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1rem; letter-spacing: -.01em; }
.fila-dato { display: block; color: var(--muted); font-size: .9rem; margin-top: .3rem; }

.fila-pie {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: .55rem;
  font-size: .78rem;
  color: var(--muted);
}

/* ── la ranura: el elemento firma ─────────────────────────────────────────── */

.ranura {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1rem 0;
  transition: border-color .2s, border-style .2s;
}

.ranura.trabajando { border-color: var(--accent); }

.ranura.llena {
  border: 2px solid var(--paper);
  background: var(--paper);
  color: var(--paper-ink);
  padding: 1.25rem;
}

.ranura.llena .resultado {
  white-space: pre-wrap;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  color: var(--paper-ink);
}

.ranura.llena .etiqueta { color: var(--paper-muted); }

.ranura-vacia {
  color: var(--muted);
  text-align: center;
  font-size: .95rem;
  margin: 0;
}

.editable {
  width: 100%;
  min-height: 12rem;
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-muted);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  padding: .75rem;
  resize: vertical;
}

/* ── formularios ──────────────────────────────────────────────────────────── */

.campo { margin-bottom: 1.15rem; }

.campo > .etiqueta { margin-bottom: .4rem; }

.campo .ayuda {
  color: var(--muted);
  font-size: .82rem;
  margin: .35rem 0 0;
}

input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  min-height: 3rem;
  padding: .7rem .75rem;
}

textarea { min-height: 6rem; resize: vertical; }

/* El selector de archivo nativo mide 21 px de alto solo. Se le da caja propia
   para que llegue al piso de toque igual que el resto de los campos. */
input[type="file"] {
  width: 100%;
  min-height: 3rem;
  padding: .7rem;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: .95rem;
}

input::placeholder, textarea::placeholder { color: var(--muted); }

/* Opciones del onboarding: botones grandes, no casillas de 12 px. */
.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }

.opcion {
  appearance: none;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: .95rem;
  min-height: 3rem;
  padding: .6rem 1rem;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}

.opcion[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--ink);
}

.opcion[aria-pressed="true"]::before { content: '✓ '; }

/* ── botones ──────────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radius);
  font-family: var(--body);
  font-weight: 600;
  font-size: .95rem;
  min-height: 3rem;
  padding: .7rem 1.15rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s, border-color .18s, background .18s;
}

.btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primario {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.btn-ancho { width: 100%; }

/* La acción principal de una pantalla larga va pegada arriba de la barra.
   Medido: sin esto el botón "Crear publicación" quedaba con su centro a 20 px
   por debajo del borde de la barra fija, y `elementFromPoint` devolvía el
   enlace del nav. Es decir: tocabas "Crear" y te ibas a Chats. La barra no se
   puede sacar y el formulario no se puede acortar, así que el botón sube. */
.btn-fijo {
  position: sticky;
  bottom: calc(var(--barra) + .75rem + env(safe-area-inset-bottom));
  z-index: 10;
  box-shadow: 0 .5rem 1.5rem var(--shadow);
}

/* Para que ningún `scrollIntoView` deje un control abajo de la barra. */
button, a, input, select, textarea { scroll-margin-bottom: calc(var(--barra) + 1.5rem); }

.btn-fila { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* ── avisos ───────────────────────────────────────────────────────────────── */

.aviso {
  border-inline-start: 3px solid var(--accent);
  background: var(--surface);
  padding: .85rem 1rem;
  margin: 1rem 0;
  font-size: .92rem;
}

.aviso-obra {
  border-inline-start-color: var(--obra);
}

.error {
  border-inline-start: 3px solid var(--obra);
  background: var(--surface);
  padding: .85rem 1rem;
  margin: 1rem 0;
  font-size: .92rem;
}

/* El punteado dice "esto todavía no existe" también fuera de la ranura. */
.vacio {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  margin: 1rem 0;
}

.marca-obra {
  display: inline-block;
  border: 1px solid var(--obra);
  color: var(--obra);
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .2rem .6rem;
}

.pastilla {
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .2rem .6rem;
  color: var(--muted);
}

/* ── chat ─────────────────────────────────────────────────────────────────── */

.charla {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin: 1rem 0 1.5rem;
}

.globo {
  max-width: 88%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .7rem .85rem;
  font-size: 1rem;
}

.globo.mio { align-self: flex-end; border-color: var(--line-strong); }

.globo-pie {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: .45rem;
  font-size: .72rem;
  color: var(--muted);
}

.ver-original {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--body);
  font-size: .72rem;
  padding: 0 0 1px;
  cursor: pointer;
  min-height: 3rem;
}

.original {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: .92rem;
}

.escribir { display: flex; gap: .5rem; align-items: flex-end; }
.escribir textarea { min-height: 3rem; }

/* ── cargando ─────────────────────────────────────────────────────────────── */

.cargando {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
  font-size: .92rem;
}

.pulso {
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  background: var(--accent);
  animation: latir 1.1s ease-in-out infinite;
}

@keyframes latir {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}

/* Esqueleto con la forma del contenido, no un spinner suelto. */
.esqueleto {
  border-bottom: 1px solid var(--line);
  padding: 1.05rem 0;
}

.esqueleto span {
  display: block;
  height: .85rem;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: .5rem;
}

.esqueleto span:nth-child(1) { width: 62%; }
.esqueleto span:nth-child(2) { width: 88%; }

/* ── árabe y otras escrituras de derecha a izquierda ──────────────────────── */

[dir="rtl"] .fila { text-align: start; }
[dir="rtl"] .globo.mio { align-self: flex-start; }
[dir="rtl"] .globo:not(.mio) { align-self: flex-end; }

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

/* ── páginas legales ──────────────────────────────────────────────────────────
   Van acá y no en un bloque de estilo adentro del HTML: la CSP declara
   style-src propio y sin hashes, así que un estilo en línea queda bloqueado.
   La página se dibujaría igual pero sin formato, y el navegador sólo lo avisa
   en la consola: nadie se entera hasta que alguien la abre. */

.legal h2 { margin: 2.25rem 0 .75rem; }
.legal h3 { margin: 1.5rem 0 .5rem; }
.legal ul { padding-inline-start: 1.15rem; }
.legal li { margin-bottom: .45rem; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .95rem;
}

.legal th,
.legal td {
  text-align: start;
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal th {
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
}

/* Sin barra de abajo, estas páginas no necesitan el hueco que deja el body. */
body:has(.legal) { padding-bottom: 3rem; }