/*
 * El brief de ICP — `/icp/nuevo` y `/icp/{id}`.
 *
 * SUPERFICIE B2B de mancii.com, la misma que
 * `/para-instituciones/calculadora`: `mancii.css` con `.product-page`,
 * `.b2b-nav`, `.container` y los botones `button--pink`. Esta hoja solo agrega
 * lo propio del formulario largo, que esa superficie no tiene.
 *
 * VA A MANO Y NO AL BUNDLE: `landing.css` y `taker.css` se GENERAN podando
 * contra el DOM de unas pocas URLs, y un formulario de dieciocho campos
 * obligaría a regenerar con puppeteer cada vez que se toca un detalle — un
 * olvido lo deja sin estilos. `mancii.css` no se poda, y esta tampoco.
 */

.icp-brief { padding: 2rem 0 4rem; }
.icp-wrap { max-width: 760px; padding-bottom: 0; }

/* El hero dice qué es un ICP antes de pedir nada: quien llega acá puede no
   haber oído la sigla nunca. */
.icp-hero { padding: 2.25rem 0 1.75rem; }
.icp-hero h1 { font-size: clamp(1.6rem, 4.5vw, 2.35rem); margin: .35rem 0 .7rem; line-height: 1.15; }
.icp-lead { color: var(--muted, #6b6470); margin: 0; font-size: 1rem; line-height: 1.6; max-width: 60ch; }
.icp-lead b { color: var(--wine, #631f52); }

.icp-hero-notas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .85rem; margin-top: 1.6rem;
}
.icp-hero-notas p {
  margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted, #6b6470);
  border-left: 3px solid var(--pink, #f20087); padding-left: .7rem;
}
.icp-hero-notas b { display: block; color: var(--text-h, #2e172e); }

.icp-pie { padding: 1.5rem 0 3rem; }
.icp-pie p { margin: 0; font-size: .78rem; color: var(--muted, #6b6470); }

.icp-seccion {
  background: #fff; border: 1px solid #ece6ec; border-radius: 14px;
  padding: 1.35rem 1.25rem; margin-bottom: 1.35rem;
}
.icp-seccion > h2 { font-size: 1rem; margin: 0 0 1.1rem; color: var(--wine, #631f52); }

.icp-campo { margin-bottom: 1.35rem; }
.icp-campo > label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .2rem; }
.icp-ayuda { color: var(--muted, #6b6470); font-size: .84rem; margin: 0 0 .55rem; line-height: 1.45; }

.icp-tabla textarea, .icp-campo input, .icp-campo textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
  border: 1px solid #ddd3dd; border-radius: 9px; padding: .6rem .7rem;
  font: inherit; font-size: .92rem; background: #fff;
}
.icp-tabla textarea:focus, .icp-campo input:focus, .icp-campo textarea:focus {
  outline: 2px solid var(--pink, #f20087); outline-offset: 1px; border-color: transparent;
}

.icp-tabla { width: 100%; border-collapse: collapse; }
.icp-tabla th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #6b6470); font-weight: 600; padding: 0 .35rem .35rem;
}
/* `top` y no `middle`: cuando el comentario crece, el número y el nombre tienen
   que quedarse arriba con él, no flotando en el medio de un bloque alto. */
.icp-tabla td { padding: .25rem .35rem; vertical-align: top; }
.icp-tabla td.n { width: 1.6rem; color: var(--muted, #6b6470); font-size: .85rem; }

.icp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }

.icp-liga {
  background: #fdf4fa; border: 1px solid #f6d6e9; border-radius: 12px;
  padding: 1rem 1.1rem; margin-bottom: 1.5rem;
}
.icp-liga h2 { font-size: .95rem; margin: 0 0 .3rem; }
.icp-liga p { font-size: .85rem; color: var(--muted, #6b6470); margin: 0 0 .6rem; }
/* Ocupa el ancho: cortada al mínimo no se ve ni el dominio, que es justo lo
   que hay que reconocer antes de mandarla. */
.icp-liga-url {
  width: 100%; box-sizing: border-box; border: 1px solid #f0c4dd; border-radius: 9px;
  padding: .55rem .7rem; font-family: ui-monospace, monospace; font-size: .82rem;
  background: #fff; color: var(--wine, #631f52);
}
.icp-liga-acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .85rem; }

.icp-aviso { border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.25rem; font-size: .9rem; }
.icp-aviso.ok  { background: #eef8f2; border: 1px solid #cce8d9; }
.icp-aviso.mal { background: #fdf0ee; border: 1px solid #f3d2cc; }

/* El botón vive en el flujo, no flotando: el brief se llena en una reunión y
   guardar es el final del recorrido, no algo que se persiga con el pulgar. */
.icp-enviar { margin-top: .5rem; }

@media (max-width: 384px) {
  .icp-wrap { padding: 1.75rem .9rem 4rem; }
  .icp-seccion { padding: 1.1rem .85rem; }
}

/* Las que crecen solas: sin barra, sin tirador, y con el alto mínimo de un
   renglón para que una tabla vacía no se vea como un muro de cajas. */
textarea.icp-auto { resize: vertical; overflow: hidden; min-height: 2.6rem; line-height: 1.45; }
.icp-tabla textarea.icp-auto { min-height: 2.6rem; }

/* ── La lectura del brief (`/brief/{token}`) ─────────────────────────────────
   Es la pantalla que el prospecto abre desde su correo, así que se lee como un
   documento y no como un formulario: sin cajas de campo, con la respuesta
   ganándole en peso a la pregunta. */
.icp-firma { font-size: .86rem; color: var(--muted, #6b6470); margin: .9rem 0 1.2rem; }

.icp-respuesta { margin-bottom: 1.4rem; }
.icp-respuesta h3 {
  font-size: .78rem; margin: 0 0 .3rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted, #6b6470);
}
.icp-valor { margin: 0; white-space: pre-line; font-size: 1rem; line-height: 1.6; }

.icp-tabla--lectura td { border-bottom: 1px solid #f2ecf2; padding: .6rem .4rem; }
.icp-tabla--lectura tr:last-child td { border-bottom: 0; }
.icp-tabla--lectura td.n {
  width: 1.5rem; color: var(--pink, #f20087); font-weight: 700; font-size: .85rem;
}
.icp-tabla--lectura td.q { font-weight: 600; width: 34%; }
.icp-tabla--lectura td.c { color: var(--muted, #6b6470); font-size: .92rem; }

/* ── El recorrido por pasos ──────────────────────────────────────────────────
   Todo lo de acá es MEJORA PROGRESIVA: sin `html.js` el progreso y los botones
   de navegación siguen con su atributo `hidden` y el formulario se ve entero,
   que es como funcionaba antes. Por eso la regla que los muestra pide las dos
   cosas —la clase del documento y que el script les haya sacado `hidden`—; una
   que solo mirara la clase los destaparía antes de que nadie pueda usarlos. */
.icp-solo-js { display: none; }
html.js .icp-progreso:not([hidden]) { display: block; }
html.js .icp-nav .icp-solo-js:not([hidden]) { display: inline-flex; }

/* `.button` de `mancii.css` trae su propio `display`, que le gana al `[hidden]`
   del navegador. Es la misma trampa que ya mordió a `.m-chart-box`: esconder
   con `hidden` un elemento que tiene regla de autor no esconde nada. */
.icp-nav button[hidden], .icp-seccion[hidden] { display: none; }

.icp-progreso { margin-bottom: 1.1rem; }
.icp-progreso-n {
  margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #6b6470); font-weight: 600;
}
.icp-progreso-n b { color: var(--pink, #f20087); }

.icp-puntos { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.icp-puntos li { flex: 1 1 0; display: flex; }
/* Barra y no círculo: con siete pasos, siete puntitos no dicen cuánto falta y
   una barra partida sí — se lee de un vistazo desde el otro lado de la mesa. */
.icp-punto {
  flex: 1 1 auto; height: 5px; min-width: 0; padding: 0; border: 0; cursor: pointer;
  border-radius: 99px; background: #e9e1e9; transition: background .18s ease;
  appearance: none; -webkit-appearance: none;
}
.icp-punto.is-hecho { background: var(--pink, #f20087); }
.icp-punto:focus-visible { outline: 2px solid var(--wine, #631f52); outline-offset: 2px; }

.icp-nav { display: flex; gap: .6rem; align-items: center; margin-top: .25rem; }
/* «Atrás» a la izquierda y lo que avanza a la derecha: el empujón separa la
   salida del retroceso, para que nadie deshaga queriendo seguir. */
.icp-nav [data-icp-seguir], .icp-nav [data-icp-enviar] { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .icp-punto { transition: none; }
}

/* ── Las listas cerradas ─────────────────────────────────────────────────────
   Lo que se elige en vez de escribirse. El `<select>` va sin flecha propia: la
   nativa es la que el sistema operativo ya enseñó a reconocer, y es la misma
   regla que rige `.field-control select` en el taker. */
.icp-campo select {
  width: 100%; box-sizing: border-box; background: #fff;
  border: 1px solid #ddd3dd; border-radius: 9px; padding: .6rem .7rem;
  font: inherit; font-size: .92rem; appearance: auto;
}
.icp-campo select:focus { outline: 2px solid var(--pink, #f20087); outline-offset: 1px; }

/* El grupo de casillas reemplaza al `<label>` por una leyenda: es lo que lee un
   lector de pantalla para saber de qué pregunta son las treinta y dos casillas. */
.icp-grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
.icp-grupo > legend { padding: 0; font-weight: 600; font-size: .92rem; margin-bottom: .2rem; }

/* Columnas que se acomodan solas: con treinta y dos estados, una sola columna es
   un rollo de papel y cuatro fijas se desbordan en un teléfono. */
.icp-casillas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: .15rem .6rem;
}
.icp-casilla {
  display: flex; align-items: center; gap: .45rem; cursor: pointer;
  font-size: .88rem; padding: .3rem .2rem; border-radius: 7px; line-height: 1.3;
}
.icp-casilla:hover { background: #fbf3f8; }
/* 16px reales: por debajo de eso se falla el toque y se marca el estado vecino,
   que en este formulario es una zona de captación equivocada. */
.icp-casilla input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--pink, #f20087); }

/* El renglón de escape, atado visualmente a la lista que está aclarando. */
.icp-detalle { margin-top: .6rem; }
.icp-detalle > label {
  display: block; font-size: .8rem; color: var(--muted, #6b6470);
  margin-bottom: .2rem; font-weight: 500;
}
.icp-detalle textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #e6dde6; border-radius: 9px;
  padding: .5rem .65rem; font: inherit; font-size: .88rem; background: #fdfbfd;
}

/* El desplegable dentro de una fila del «Top 3», con su renglón de escape
   debajo. El escape va más chico y en gris: es la salida, no el camino. */
.icp-tabla td select {
  width: 100%; box-sizing: border-box; background: #fff;
  border: 1px solid #ddd3dd; border-radius: 9px; padding: .6rem .7rem;
  font: inherit; font-size: .92rem; appearance: auto;
}
.icp-tabla td select:focus { outline: 2px solid var(--pink, #f20087); outline-offset: 1px; }
.icp-otro { margin-top: .3rem; font-size: .85rem !important; background: #fdfbfd !important; }
.icp-otro::placeholder { color: #a99ba6; }

/* El área, sobre su bloque de casillas. Setenta y cinco programas seguidos no se
   leen; repartidos en nueve bloques con su título, sí. */
.icp-grupo-titulo {
  margin: .9rem 0 .25rem; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pink, #f20087);
}
.icp-grupo-titulo:first-of-type { margin-top: .35rem; }

/* El grupo plegado, para las listas largas. Lo abre y lo cierra el navegador:
   `<details>` es HTML, así que esto funciona sin una línea de JavaScript. */
.icp-plegable { border: 1px solid #efe8ef; border-radius: 10px; margin-bottom: .5rem; }
.icp-plegable > summary {
  cursor: pointer; padding: .6rem .75rem; font-size: .86rem; font-weight: 600;
  color: var(--wine, #631f52); display: flex; align-items: center; gap: .5rem;
  border-radius: 10px; list-style-position: inside;
}
.icp-plegable > summary:hover { background: #fbf3f8; }
.icp-plegable[open] > summary { border-bottom: 1px solid #efe8ef; border-radius: 10px 10px 0 0; }
.icp-plegable > .icp-casillas { padding: .5rem .75rem .7rem; }
/* La cuenta adelanta cuánto hay adentro: sin ella, plegar esconde el tamaño y
   nadie sabe si vale la pena abrir. */
.icp-cuenta {
  font-size: .72rem; font-weight: 700; color: var(--pink, #f20087);
  background: #fdeef6; border-radius: 99px; padding: .1rem .45rem;
}