/* ==========================================================================
   CHASQUI — informacion.css
   Dueño: módulo «gira-info» (§4.14 D). La vista /app/g/:slug/informacion.
   --------------------------------------------------------------------------
   1  La vista y sus pestañas
   2  Consideraciones: secciones con viñetas y subtítulos
   3  Regresos: la nota de cada integrante
   4  Guía de ciudad
   5  Teléfono, impresión y movimiento reducido

   Todo lo demás se reutiliza de app.css (.tarjeta, .lista, .segmentos,
   .barra-acciones, .boton-icono, .vacio…). Sin colores nuevos: las viñetas,
   la pastilla de grupo y los tintes salen de los tokens de base.css y
   app.css. Las pastillas de grupo son las de la hoja del día (§4.11), en
   versión de pantalla: Producción en tinta con borde punteado, Artistas en
   sodio, para distinguirlas de un vistazo.
   ========================================================================== */

/* ── 1 · LA VISTA Y SUS PESTAÑAS ────────────────────────────────────────── */
.informacion{display:flex;flex-direction:column;gap:1.25rem;min-width:0}

/* Tres pestañas no caben a 375 px con el relleno de .segmentos: la fila no
   se parte en dos (una píldora de dos pisos se lee mal); se desliza de lado
   si hace falta, dentro de su ancho, sin mover la página. */
.informacion__pestanas{
  display:flex;
  flex-wrap:nowrap;
  align-self:flex-start;
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.informacion__pestanas::-webkit-scrollbar{display:none}
.informacion__pestana{flex:none;white-space:nowrap}
.informacion__pestana:focus-visible{outline:2px solid var(--sodio);outline-offset:-2px}

.informacion__panel{min-width:0}
.informacion__panel:focus{outline:none}
.informacion__contenido{display:flex;flex-direction:column;gap:1rem;min-width:0}
.informacion__cab-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem 1rem;
}
.informacion__intro{flex:1 1 18rem;min-width:0;max-width:62ch;color:var(--tx-2);font-size:.95rem;line-height:1.55;text-wrap:pretty}

/* Botones de fila: los mismos de siempre, en fila y sin encogerse. */
.informacion__acciones{flex:none;display:flex;align-items:center;gap:.1rem}
.informacion .boton-icono:disabled{opacity:.35;cursor:default;background:transparent}
/* Subir y bajar: la flecha «adelante» del sprite, girada. */
.informacion__mover .icono{transition:transform var(--t-rapido) var(--ease)}
.informacion__mover--subir .icono{transform:rotate(-90deg)}
.informacion__mover--bajar .icono{transform:rotate(90deg)}

/* Texto plano siempre: si el teléfono convierte solo un número o una
   dirección en enlace, que no se vea ni se toque como tal. */
.informacion a[x-apple-data-detectors]{
  color:inherit!important;
  text-decoration:none!important;
  pointer-events:none;
}

/* ── 2 · CONSIDERACIONES ────────────────────────────────────────────────── */
.informacion__secciones{display:flex;flex-direction:column;gap:1rem;min-width:0}
.informacion__seccion{gap:.7rem}
.informacion__seccion-cab{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:.35rem .8rem;
}
/* El título y su pastilla comparten renglón y bajan juntos si no caben. */
.informacion__seccion-textos{
  flex:1 1 12rem;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.25rem .55rem;
  padding-top:.55rem;              /* alinea el título con el centro de los botones de 44 px */
}
.informacion__seccion-titulo{min-width:0;overflow-wrap:anywhere}
.informacion__seccion .informacion__acciones{margin-right:-.5rem;margin-top:-.1rem}

.informacion__grupo{
  display:inline-block;
  flex:none;
  padding:.05rem .45rem;
  border:1px dashed var(--brd-3);
  border-radius:4px;
  font-family:var(--f-mono);
  font-size:.68rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--tx-2);
}
.informacion__grupo--artistas{border-style:solid;border-color:var(--sodio-borde);background:var(--sodio-tinte);color:var(--sodio-texto)}

.informacion__cuerpo{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.informacion__subtitulo{
  margin-top:.35rem;
  font-family:var(--f-mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sodio-texto);
}
.informacion__cuerpo > .informacion__subtitulo:first-child{margin-top:0}
.informacion__vinetas{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin:0;
  padding:0;
  list-style:none;
}
/* La viñeta es un punto de sodio, como el «●» del libro de gira. */
.informacion__vinetas li{
  position:relative;
  padding-left:1.15rem;
  color:var(--tx);
  font-size:.96rem;
  line-height:1.55;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
.informacion__vinetas li::before{
  content:"";
  position:absolute;
  left:.2rem;
  top:.62em;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--sodio);
}

/* El formulario de una sección o de un lugar, en la hoja inferior. */
.informacion__formulario textarea[name="cuerpo"]{min-height:12rem;line-height:1.5}

/* ── 3 · REGRESOS ───────────────────────────────────────────────────────── */
.informacion__regresos{min-width:0}
/* En el teléfono, el nombre arriba y la nota abajo a lo ancho; desde 720 px,
   lado a lado, como la tabla PERSONA · COMENTARIO del libro. */
.informacion__regreso{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:.45rem 1rem;
}
.informacion__persona{min-width:0}
.informacion__persona label{display:block;cursor:pointer}
.informacion__tu{font-weight:400;color:var(--tx-3)}
.informacion__campo-nota{min-width:0;display:flex;flex-direction:column;gap:.3rem}
/* textarea.… para ganarle al min-height de 6rem de los textarea de app.css:
   una nota vacía mide un renglón y crece con lo escrito donde el navegador
   sabe (field-sizing); donde no, quedan los dos renglones de rows="2". */
textarea.informacion__nota{
  width:100%;
  min-height:var(--tactil);
  max-height:12rem;
  resize:vertical;
  line-height:1.45;
  field-sizing:content;
}
.informacion__nota-texto{
  min-width:0;
  color:var(--tx);
  font-size:.95rem;
  line-height:1.5;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.informacion__sin-filas{color:var(--tx-3);font-size:.92rem;line-height:1.5}
@media (min-width:720px){
  .informacion__regreso{grid-template-columns:minmax(10rem,32%) minmax(0,1fr)}
  .informacion__regreso .informacion__persona{padding-top:.55rem}
  .informacion__regreso--lectura .informacion__persona{padding-top:0}
}

.informacion__guardar{position:static;margin-top:.25rem}
.informacion__guardar.is-pendiente{position:sticky}
.informacion__guardar .boton[aria-disabled="true"]{opacity:.55;cursor:default;box-shadow:none;transform:none}

/* ── 4 · GUÍA DE CIUDAD ─────────────────────────────────────────────────── */
.informacion__ciudades{display:flex;flex-direction:column;gap:1rem;min-width:0}
.informacion__ciudad{gap:.9rem}
.informacion__ciudad-cab{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:.6rem 1rem;
}
.informacion__ciudad-textos{flex:1 1 12rem;min-width:0}
.informacion__ciudad-textos .tarjeta__antetitulo{margin-bottom:.25rem;overflow-wrap:anywhere}
.informacion__ciudad-nombre{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem .6rem;
  font-size:1.3rem;
  overflow-wrap:anywhere;
}
.informacion__ciudad-nombre .pastilla{font-size:.68rem}
.informacion__sin-lugares{color:var(--tx-3);font-size:.9rem;line-height:1.5}

.informacion__tipo{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.informacion__tipo-titulo{
  padding-bottom:.35rem;
  border-bottom:1px solid var(--brd);
  font-family:var(--f-mono);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.informacion__lugares{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
/* Nombre y textos a la izquierda, botones arriba a la derecha y, abajo, las
   distancias a todo el ancho de la fila. */
.informacion__lugar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  column-gap:.6rem;
  padding:.7rem 0;
  border-top:1px dashed var(--brd);
}
.informacion__lugar > .informacion__acciones{grid-column:2;grid-row:1}
.informacion__lugar:first-child{border-top:0}
.informacion__lugar-textos{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.informacion__lugar-nombre{font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.informacion__lugar-detalle{font-size:.88rem;line-height:1.45;color:var(--tx-2);overflow-wrap:anywhere}
.informacion__lugar-descripcion{
  font-size:.92rem;
  line-height:1.5;
  color:var(--tx);
  white-space:pre-line;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
.informacion__distancias{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-top:.35rem}
.informacion__distancia{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  min-width:0;
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.03em;
  color:var(--tx-3);
  overflow-wrap:anywhere;
}
.informacion__distancia .icono{flex:none;color:var(--sodio-texto)}
.informacion__lugar .informacion__acciones{margin-right:-.5rem;margin-top:-.35rem}

/* ── 5 · TELÉFONO, IMPRESIÓN Y MOVIMIENTO REDUCIDO ──────────────────────── */
@media (max-width:560px){
  /* Las tres pestañas llenan el ancho (a 375 px caben justas con este
     relleno) y se reparten lo que sobra. */
  .informacion__pestanas{align-self:stretch}
  .informacion__pestana{flex:1 0 auto;padding-inline:.6rem;font-size:.86rem}
  /* Los botones de una sección bajan bajo el título: la flecha queda en la
     columna del texto, no corrida por el relleno del botón redondo. */
  .informacion__seccion .informacion__acciones{flex-basis:100%;margin:-.2rem 0 0 -.7rem}
  .informacion__ciudad-cab .boton{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .informacion__mover .icono{transition:none}
}

/* Para imprimir está el libro de gira (§4.14 E): acá solo se esconde lo que
   es de la pantalla (pestañas y botones) y sale la pestaña que se ve. */
@media print{
  .informacion__pestanas,
  .informacion__acciones,
  .informacion__guardar,
  .informacion__cab-panel .boton,
  .informacion__ciudad-cab .boton{display:none!important}
}