/* =============================================================================
 *  MANUALES — lo poco que necesita de estilo propio
 *
 *  CASI TODO VIENE DE `estilos.css`, que es el cimiento del panel. Aquí solo va
 *  lo que esta pantalla tiene y ninguna otra: el índice, el recuadro de las
 *  órdenes, el aviso de lo que no se deshace, y el botón que vuelve arriba.
 *
 *  LO QUE GOBIERNA LAS DECISIONES DE AQUI, y no es el gusto
 *      Se lee en un teléfono, con el pulgar, y muchas veces con prisa porque
 *      algo se rompió. Así que: una columna, nada que se salga de lado, y todo
 *      lo que se toca de 48 px para arriba — dimensión 6 del E-044 punto 5.
 * ========================================================================== */

/* ---- la barra de buscar, pegada arriba ---------------------------------- */
/*  SE QUEDA A LA VISTA AL DESPLAZAR. Un buscador que hay que ir a buscar no se
    usa: se acaba recorriendo el manual con el dedo. */
.man__barra {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--fondo, #fff);
  padding: 0.75rem 0 0.5rem;
  border-bottom: 1px solid var(--linea, #e0e0e0);
  margin-bottom: 1rem;
}
.man__busca-caja { display: block; }
.man__busca-que {
  display: block;
  font-size: 0.85em;
  opacity: 0.75;
  margin-bottom: 0.25rem;
}
#man__busca {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--linea, #ccc);
  border-radius: 8px;
}
.man__dice { margin: 0.4rem 0 0; font-size: 0.9em; opacity: 0.8; }

/* ---- el índice ---------------------------------------------------------- */
.man__indice { margin: 0 0 2rem; }
.man__indice-lista { list-style: none; padding: 0; margin: 0; }
.man__indice-grupo { margin: 0 0 1rem; }
.man__indice-titulo {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.man__indice-temas { list-style: none; padding: 0 0 0 0.5rem; margin: 0; }
.man__indice-temas li { margin: 0; }
/*  CADA ENLACE DEL INDICE ES UNA FILA ENTERA Y ALTA. Enlaces de una línea
    pegados unos a otros se fallan con el pulgar, y fallar lleva a otro tema. */
.man__indice-enlace {
  display: block;
  padding: 0.6rem 0.25rem;
  min-height: 48px;
  box-sizing: border-box;
  line-height: 1.5;
  border-bottom: 1px solid var(--linea, #eee);
}

/* ---- los temas ---------------------------------------------------------- */
.man__grupo { margin: 0 0 2.5rem; }
.man__grupo-nombre {
  border-bottom: 2px solid var(--acento, #D97706);
  padding-bottom: 0.3rem;
}
/*  SE DEJA SITIO ARRIBA PARA QUE LA BARRA PEGAJOSA NO TAPE EL TITULO al saltar
    desde el índice. Sin esto, tocas un tema y llegas a su segunda línea. */
.man__tema {
  margin: 0 0 2rem;
  scroll-margin-top: 6rem;
}
.man__tema-titulo { margin: 0 0 0.4rem; }
.man__que { margin: 0 0 0.9rem; }

/* ---- las órdenes -------------------------------------------------------- */
.man__paso { margin: 0 0 0.9rem; }
/*  CLARO SOBRE CLARO, Y NO UN RECUADRO NEGRO.
 *
 *  La primera versión ponía la orden en blanco sobre casi negro, como una
 *  terminal. El dueño lo dijo: *«el contraste de los comandos contra el fondo
 *  blanco no ayuda»*. Y es cierto: un bloque negro en medio de una página clara
 *  no se lee mejor, deslumbra — sobre todo en un teléfono, a pleno día, que es
 *  donde se va a leer esto.
 *
 *  Así que gris muy claro con letra casi negra: dentro del recuadro el
 *  contraste sube, y contra la página baja. La franja del borde izquierdo es la
 *  que dice «esto es una orden», que era todo lo que el color negro estaba
 *  haciendo de verdad.
 */
.man__orden {
  position: relative;
  margin: 0;
  padding: 0.7rem 5.5rem 0.7rem 0.9rem;
  background: #f3f4f6;
  color: #111827;
  border-left: 4px solid var(--acento, #D97706);
  border-radius: 0 8px 8px 0;
  /*  QUE SE PUEDA DESPLAZAR DE LADO SOLO AQUI DENTRO. Una orden larga no puede
      empujar la página entera: el cuerpo no se desplaza de lado nunca. */
  overflow-x: auto;
  white-space: pre;
  font-size: 0.95rem;
}
.man__copiar {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  min-height: 48px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 6px;
  background: #374151;
  color: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
}
.man__paso-dice { margin: 0.35rem 0 0 0.2rem; font-size: 0.95em; opacity: 0.85; }

/* ---- las listas de dos columnas ----------------------------------------- */
.man__lista { margin: 0 0 1rem; }
.man__lista-que { font-weight: 700; margin-top: 0.6rem; }
.man__lista-dice { margin: 0.1rem 0 0 1rem; }

/* ---- lo que pasó de verdad, y lo que no se deshace ---------------------- */
.man__real {
  margin: 0.8rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid var(--acento, #D97706);
  background: var(--fondo-suave, #faf7f2);
  white-space: pre-line;
  font-size: 0.95em;
}
/*  EL AVISO SE VE DISTINTO A TODO LO DEMAS, y es a propósito: aquí viven los
    «esto no se deshace». Que se lea igual que el resto sería enterrarlo. */
.man__ojo {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 5px solid #c5221f;
  background: #fdf0ef;
  white-space: pre-line;
  font-weight: 500;
}

/* ---- el botón de volver al índice --------------------------------------- */
.man__subir {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  z-index: 20;
  min-height: 48px;
  padding: 0 1rem;
  border: 0;
  border-radius: 24px;
  background: #1f2430;
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}