/* ===========================================================================
   KW — LAS PANTALLAS LEGALES
   ---------------------------------------------------------------------------
   Hoja aparte, como `kw-admin.css`: la cargan SOLO `/terminos`, `/privacidad`,
   `/aceptar` y las tres puertas de entrada (que llevan la casilla de
   consentimiento). Ninguna otra pantalla paga estos bytes.

   ⚠️ NI UN `#hex`. Todo color sale de `kw-tokens.css`, que es lo que hace que
   estas pantallas existan en los dos temas. Un color escrito a mano acá queda
   mudo en el otro tema: la regla sigue aplicando, con el valor equivocado, sin
   error y sin aviso.

   ⚠️ Por qué un ancho máximo y no `.wrap` (1560 px): un documento legal a todo
   el ancho de un monitor son renglones de 200 caracteres, y el ojo pierde el
   renglón al volver. La medida de abajo deja entre 65 y 75 caracteres, que es
   la que se lee sin esfuerzo. Un texto que nadie termina de leer es un texto
   que no informó a nadie — y el punto entero de estos dos documentos es
   informar.
   =========================================================================== */

/* ⚠️ En rem desde el 2026-11-02 (revisión de diseño, grave A18): estaba entera en px y no
   escalaba con la letra del teléfono (CLAUDE.md §4). Los bordes siguen en px a propósito. */
.legal{
  width:100%;max-width:73.75rem;margin:0 auto;padding:1.625rem 1.25rem 4rem;
  display:grid;grid-template-columns:14.375rem minmax(0,1fr);gap:2.5rem;align-items:start;
}
/* Un documento SIN índice (`/eliminar-cuenta`): una sola columna del ancho de lectura. Con la
   rejilla de arriba el texto entero caía en la columna de 230 px reservada al índice y el resto
   de la pantalla quedaba vacío (revisión de diseño, grave A3: es la página que abre el revisor
   de Google Play). */
.legal.solo{grid-template-columns:minmax(0,1fr);max-width:59.375rem}

/* ------------------------------ el índice -------------------------------- */
/* Pegajoso, porque estos documentos son largos: sin él, volver del artículo 9
   al 3 es rodar con el dedo a ciegas. */
.legal-ind{position:sticky;top:calc(var(--nav) + 1rem)}
/* ⚠️ El índice va en un `<details>` (2026-11-02, revisión de diseño A): en el
   teléfono eran 13 pastillas que llenaban la primera pantalla y el título del
   documento empezaba a 634 px. En el computador está siempre abierto y el
   `summary` es solo el rótulo «Contenido» (no se cierra); en el teléfono nace
   cerrado (lo cierra el script de la plantilla) y es una sola fila. */
.legal-ind summary{
  display:block;list-style:none;font-size:0.625rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:0.625rem;pointer-events:none;
}
.legal-ind summary::-webkit-details-marker{display:none}
.legal-ind summary .n{display:none}
.legal-ind ol{list-style:none;margin:0;padding:0;counter-reset:ind}
.legal-ind li{counter-increment:ind;margin:0 0 0.125rem}
.legal-ind a{
  display:block;padding:0.3125rem 0.625rem;border-left:2px solid var(--line);
  font-size:0.75rem;line-height:1.45;color:var(--ink-3);text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.legal-ind a::before{content:counter(ind) ". ";font-family:var(--mono);opacity:.7}
.legal-ind a:hover{
  color:var(--ink);border-left-color:var(--led);background:var(--surface-2);
  text-decoration:none;
}

/* ----------------------------- el documento ------------------------------ */
.legal-doc{min-width:0}
.legal-doc h1{
  margin:0 0 0.375rem;font-size:1.6875rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.legal-doc h2{
  margin:2.125rem 0 0.625rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  padding-top:1.125rem;border-top:1px solid var(--line-soft);scroll-margin-top:calc(var(--nav) + 1.125rem);
}
.legal-doc h2 span{
  font-family:var(--mono);font-size:0.8125rem;font-weight:500;color:var(--led-bright);
  margin-right:0.5rem;
}
.legal-doc h3{margin:1.25rem 0 0.375rem;font-size:0.8438rem;font-weight:600;color:var(--ink-2)}
.legal-doc p{margin:0 0 0.75rem;font-size:0.875rem;line-height:1.78;color:var(--ink-2)}
.legal-doc b,.legal-doc strong{color:var(--ink-fuerte);font-weight:600}
.legal-doc ul,.legal-doc ol{margin:0 0 0.875rem;padding-left:1.25rem}
.legal-doc li{font-size:0.875rem;line-height:1.78;color:var(--ink-2);margin-bottom:0.375rem}
/* ⚠️ El renglón de lectura (2026-11-02, revisión de diseño A). La rejilla de arriba
   deja la columna del documento en ~870 px a 1440, o sea 124 caracteres por renglón,
   y el comentario del principio promete 65 a 75. Se acota el TEXTO, no la columna:
   las tablas, la identificación del vendedor y la franja de borrador siguen a todo
   el ancho. Es pantalla de leer, no de operar: aquí no vale «sin max-width».
   ⚠️ En `em` y no en `ch`: el «0» de Sora es ancho (1ch ≈ 0,74em), así que 70ch
   daban 110 a 119 caracteres reales; 34em son ~72 (medido con un Range por letra). */
.legal-doc>p,.legal-doc>ul,.legal-doc>ol,.legal-doc>.legal-nota,.legal-doc>h3{max-width:34em}
/* `:not(.btn)`: un botón dentro del documento (`/eliminar-cuenta`) no es un
   enlace del texto. Sin esto salía subrayado y, al pasar el mouse, con el texto
   azul sobre su fondo azul. */
.legal-doc a:not(.btn){color:var(--led-bright);text-decoration:underline;text-underline-offset:0.125rem}
.legal-doc a:not(.btn):hover{color:var(--led)}
.legal-doc code{font-family:var(--mono);font-size:0.7812rem;color:var(--led-bright)}

/* La franja de BORRADOR. Va arriba, del ancho del documento y con el color de
   advertencia: si esto se lee como una nota al pie, alguien va a tomar el
   borrador por el texto definitivo. */
.legal-borrador{
  display:flex;gap:0.6875rem;align-items:flex-start;margin:0 0 1.125rem;padding:0.8125rem 0.9375rem;
  border-radius:0.625rem;font-size:0.8125rem;line-height:1.6;
  background:rgba(var(--warn-rgb),.09);border:1px solid rgba(var(--warn-rgb),.34);
  color:var(--warn-ink);
}
.legal-borrador svg{flex:none;width:1.0625rem;height:1.0625rem;margin-top:0.0625rem;color:var(--warn)}
.legal-borrador b{color:var(--warn);font-weight:700}

/* La versión y la fecha, bajo el título. Es lo que una persona tiene que poder
   citar cuando dice «yo acepté esto». */
.legal-meta{
  display:flex;gap:0.5625rem;flex-wrap:wrap;align-items:center;
  margin:0 0 1.375rem;font-size:0.7188rem;color:var(--ink-3);
}
.legal-meta code{
  font-family:var(--mono);font-size:0.7188rem;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:0.3125rem;padding:0.125rem 0.4375rem;
}
.legal-meta .sep{opacity:.5}
/* La frase de «si aceptó una versión anterior», en su propio renglón: al lado de
   la versión el «·» quedaba colgando y la frase saltaba igual al renglón de abajo. */
.legal-doc .legal-meta-nota{margin:-0.25rem 0 1.375rem;font-size:0.7188rem;line-height:1.6;color:var(--ink-3);max-width:41em}

/* La identificación del vendedor / responsable, en dos columnas. */
.ident{
  margin:0 0 0.875rem;padding:0.875rem 1rem;border-radius:0.6875rem;
  background:var(--surface);border:1px solid var(--line);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.4375rem 1.125rem;
}
.ident dt{font-size:0.6875rem;color:var(--ink-3);line-height:1.6;white-space:nowrap}
.ident dd{margin:0;font-size:0.8125rem;color:var(--ink);line-height:1.6;word-break:break-word}

/* «Pendiente»: un dato del negocio que todavía no está. NO es un error de la
   app —por eso no es rojo— pero tampoco se esconde: se ve que falta. */
.pendiente{
  font-family:var(--mono);font-size:0.6562rem;font-weight:700;letter-spacing:.03em;
  color:var(--warn);background:rgba(var(--warn-rgb),.09);
  border:1px solid rgba(var(--warn-rgb),.4);border-radius:6.25rem;padding:0.125rem 0.5625rem;
}

/* Una caja para lo que hay que leer aunque se esté ojeando. */
.legal-nota{
  margin:0 0 0.875rem;padding:0.8125rem 0.9375rem;border-radius:0.625rem;font-size:0.8125rem;line-height:1.7;
  background:rgba(var(--led-rgb),.07);border:1px solid rgba(var(--led-rgb),.28);
  color:var(--ink-2);
}
.legal-nota b{color:var(--ink)}

/* La tabla de las causales y de los encargados. Sin bordes internos: es un
   texto, no un tablero de datos. */
.legal-tabla{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:0.8125rem}
.legal-tabla th{
  text-align:left;font-size:0.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:0 0.75rem 0.4375rem 0;border-bottom:1px solid var(--line);
}
.legal-tabla td{
  padding:0.5625rem 0.75rem 0.5625rem 0;border-bottom:1px solid var(--line-soft);
  color:var(--ink-2);line-height:1.6;vertical-align:top;
}
.legal-tabla td b{color:var(--ink)}

.legal-fin{
  margin-top:1.875rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:0.7188rem;color:var(--ink-3);line-height:1.7;
}

/* ===========================  LA CASILLA  =================================
   La misma en `/registrarse`, `/entrar`, `/entrar/celular` y `/aceptar`, para
   que la aceptación se vea igual por las cuatro puertas.
   ⚠️ SIN marcar por omisión: una casilla premarcada no es consentimiento
   (Ley 1581 de 2012 y Decreto 1377, art. 5: previo, expreso e informado).
   ========================================================================= */
.acepto{
  display:flex;gap:0.625rem;align-items:flex-start;margin:1rem 0 0.25rem;padding:0.75rem 0.8125rem;
  border-radius:0.5625rem;background:var(--surface-2);border:1px solid var(--line);
  font-size:0.7812rem;line-height:1.6;color:var(--ink-2);cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.acepto:hover{border-color:var(--led)}
.acepto input{
  flex:none;width:1.0625rem;height:1.0625rem;margin:0.0625rem 0 0;accent-color:var(--led);cursor:pointer;
}
.acepto a{color:var(--led-bright);text-decoration:underline;text-underline-offset:0.125rem}
.acepto a:hover{color:var(--led)}
.acepto .v{display:block;margin-top:0.25rem;font-size:0.6875rem;color:var(--ink-3)}

/* Los canales que esperan la casilla (`/registrarse`, `/entrar`).
   ⚠️ YA NO SE ATENÚAN (2026-11-02, revisión de diseño A). Estaban al 50 %:
   «Continuar con Google» se leía deshabilitado (3,23:1), en oscuro era una losa
   gris, y la tarjeta se quedaba sin ningún botón principal. Ahora se ven a
   pleno; el clic sin la casilla no sale, RESALTA la casilla (`.pide`), dice qué
   falta justo debajo (`.acepto-falta`, `role="alert"`) y le lleva el foco.
   La reja de verdad sigue siendo el servidor: quien entra por Google o por el
   celular sin haber aceptado la versión vigente cae en `/aceptar`. */
.acepto.pide{border-color:var(--led);box-shadow:0 0 0 0.1875rem rgba(var(--led-rgb),.2)}
.acepto-falta{margin:0.375rem 0 0;font-size:0.75rem;line-height:1.5;color:var(--led-bright);font-weight:500}
.acepto-falta[hidden]{display:none}

/* ------------------------------- teléfono -------------------------------- */
@media (max-width:900px){
  .legal{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding:1.25rem 1rem 3.5rem}
  /* El índice pegajoso no sirve en una columna: se vuelve UNA fila plegable
     arriba del texto («Contenido · 13 secciones»), cerrada al llegar. Abierta es
     la misma lista del computador, que se lee mejor que 13 pastillas. */
  .legal-ind{position:static}
  .legal-ind details{
    border:1px solid var(--line);border-radius:0.625rem;background:var(--surface);
  }
  .legal-ind summary{
    display:flex;align-items:center;gap:0.5rem;margin:0;padding:0.75rem 0.875rem;
    pointer-events:auto;cursor:pointer;border-radius:0.625rem;
    font-size:0.75rem;letter-spacing:.06em;color:var(--ink-2);
  }
  .legal-ind summary .n{display:inline;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
  .legal-ind summary::after{
    content:'';margin-left:auto;width:0.4375rem;height:0.4375rem;flex:none;
    border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:translateY(-25%) rotate(45deg);transition:transform .16s;
  }
  .legal-ind details[open] summary::after{transform:translateY(25%) rotate(-135deg)}
  .legal-ind summary:focus-visible{outline:2px solid var(--led);outline-offset:2px}
  .legal-ind details ol{padding:0 0.625rem 0.75rem}
  .legal-doc h1{font-size:1.4375rem}
  .ident{grid-template-columns:minmax(0,1fr);gap:0.125rem 0}
  .ident dt{margin-top:0.5625rem}
  .ident dd{margin-bottom:0.125rem}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .legal-ind summary::after{transition:none}
}

/* ⚠️ LA TABLA DE TRES COLUMNAS SE DESARMA EN EL TELÉFONO. A 390 px, las tres
   columnas dejaban la última en 8 caracteres de ancho: «Se ordena al / cerrar
   la / carga. / Cuánto / tarda…», una palabra por renglón. No desbordaba —la
   medición de desborde daba 390 = 390— y aun así era ilegible: el defecto se
   vio mirando la captura, no midiendo.

   Cada fila pasa a ser un bloque y cada celda un renglón con su rótulo, que
   viaja en `data-r` porque el `<thead>` deja de estar. Sin `data-r` la celda
   sale sin rótulo, que es lo correcto para la primera de cada fila (el término)
   y para las tablas de dos columnas, donde el término en negrita ya hace de
   título. */
@media (max-width:620px){
  .legal-tabla thead{display:none}
  .legal-tabla tr{display:block;padding:0.6875rem 0;border-bottom:1px solid var(--line)}
  .legal-tabla tr:last-child{border-bottom:none}
  .legal-tabla td{display:block;border:none;padding:0 0 0.4375rem}
  .legal-tabla td:last-child{padding-bottom:0}
  .legal-tabla td[data-r]::before{
    content:attr(data-r);display:block;margin-bottom:0.125rem;
    font-size:0.5938rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);
  }
}

/* ⚠️ EL PIE CON LA IDENTIFICACIÓN DEL VENDEDOR NO SE ESTILA ACÁ, y es a
   propósito. Ese pie va en `base.html`, o sea en TODAS las pantallas (Ley 1480
   de 2011, art. 50 y su parágrafo), y esta hoja la cargan solo unas pocas: una
   regla suya haría que el mismo pie se viera distinto según la pantalla. Se
   arma con lo que ya existe en `kw.css` —`.pie`, `.sep`, `.pill warn`— más
   `flex-basis` en línea para partir renglones, que es disposición y no color.
*/