/* entrelampistas · herramientas, casos y método (13-10-2026, rediseño · dirección A)
   Mismo sistema de siempre: papel y tinta, filetes de 1px, verde solo para lo propio y la acción de herramienta, radio 0, sin sombras. */

/* ── /herramientas ── */
.herr-cab { padding-bottom: var(--s-2); }
.herr-seccion { padding: var(--s-8) var(--margen) 0; display: flex; flex-direction: column; gap: var(--s-3); }
.herr-seccion[hidden] { display: none; }
.herr-seccion__titulo { font-size: 24px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; padding-top: var(--s-3); border-top: 2px solid var(--tinta); }
.herr-seccion__lead { margin-top: calc(-1 * var(--s-1)); }
.momentos { margin: var(--s-4) 0 0; padding: 0 calc(var(--margen) - 3px); position: sticky; top: var(--cabecera); z-index: 5; background: var(--papel); border-bottom: 1px solid var(--linea); }

/* lo tuyo: lo propio de quien lee, con el cuadrado verde de los estados propios (26-09-2026) */
.lo-tuyo { margin: var(--s-5) var(--margen) 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: var(--s-3) 0 var(--s-2); }
.lo-tuyo[hidden] { display: none; }
.lo-tuyo__lista { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.lo-tuyo__item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t f" "m f"; column-gap: var(--s-3); row-gap: 2px; padding: 10px 0; min-height: var(--tactil); color: inherit; text-decoration: none; border-top: 1px solid var(--gris-pista); transition: background-color var(--dur-fast) var(--ease-out); }
.lo-tuyo__lista li:first-child .lo-tuyo__item { border-top: 0; }
.lo-tuyo__item:hover { background: var(--papel-2); }
.lo-tuyo__texto { grid-area: t; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.lo-tuyo__item .fila__estado { grid-area: m; }
.lo-tuyo__item .fila__flecha { grid-area: f; align-self: center; }
.lo-tuyo__nota { padding-top: var(--s-2); }

/* para usar: herramientas paso a paso */
.herr-lista { border-top: 1px solid var(--linea); }
.herr-fila { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "c i" "l i"; gap: 4px var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--linea); color: inherit; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out); }
.herr-fila[hidden] { display: none; }
.herr-fila:hover { background: var(--papel-2); }
.herr-fila__cab { grid-area: c; display: flex; align-items: center; gap: var(--s-2); }
.herr-fila__nombre { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.herr-fila__lema { grid-area: l; font-size: 15px; line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.herr-fila__ir { grid-area: i; align-self: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.herr-fila__ir::before { content: ""; width: 8px; height: 8px; background: var(--acento); }

/* para llevar: la pregunta de bolsillo, en retícula de dos con filetes compartidos (como Mapas) */
.bolsillos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.bolsillo { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4); min-height: 132px; padding: var(--s-3); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); color: inherit; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.bolsillo[hidden] { display: none; }
.bolsillo:hover { background: var(--tinta); color: var(--papel); }
.bolsillo:active { transform: scale(.99); }
.bolsillo__pregunta { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.005em; text-wrap: pretty; overflow-wrap: anywhere; }
.bolsillo__nombre { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); transition: color var(--dur-fast) var(--ease-out); }
.bolsillo:hover .bolsillo__nombre { color: var(--papel); opacity: .75; }
.bolsillos--pie { margin-top: var(--s-1); }
@media (max-width: 359px) { .bolsillo__pregunta { font-size: 15px; } .bolsillo { padding: 10px; } }

/* ── ficha de bolsillo ── */
.herr { display: flex; flex-direction: column; padding-bottom: var(--s-6); }
.herr-portada { margin: 0 var(--margen); padding: var(--s-8) 0 var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); border-bottom: 3px solid var(--tinta); }
.herr-portada__pregunta { font-size: 36px; font-weight: 800; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: break-word; }
.herr-portada__nombre { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.herr-cuerpo { padding: var(--s-6) var(--margen) 0; display: flex; flex-direction: column; gap: var(--s-4); font-size: 17px; line-height: 1.55; }
.herr-cuerpo b { font-weight: 700; }
.herr-entrada { font-size: 21px; line-height: 1.35; font-weight: 500; text-wrap: pretty; }
.herr-origen { padding-top: var(--s-4); border-top: 1px solid var(--linea); }
.herr-origen + .meta { margin-top: calc(-1 * var(--s-3)); }
.herr-momentos { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.herr-momentos .chip { pointer-events: none; font-size: 11px; }
.herr-cuerpo--pie { gap: var(--s-3); }
.herr-cuerpo--pie > h2 { padding-top: var(--s-4); }
.herr .cpt-nav { margin: var(--s-6) var(--margen) 0; }

/* ── herramientas interactivas ── */
.herr-portada--app { margin: 0; padding: var(--s-8) var(--margen) var(--s-6); border-bottom: 0; }
.herr-portada__titulo { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.herr-portada__lema { font-size: 18px; line-height: 1.35; font-weight: 500; opacity: .85; }
.app { display: flex; flex-direction: column; gap: var(--s-4); }
.app__pasos { padding: 0; grid-auto-flow: column; }
.app__pantalla { display: flex; flex-direction: column; gap: var(--s-4); }
.app__entrada { font-size: 17px; line-height: 1.5; }
.campo-bloque { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo-bloque textarea, .campo-bloque input[type="text"] { width: 100%; border: 1px solid var(--tinta); background: var(--papel); color: var(--tinta); font: inherit; font-size: 16px; line-height: 1.45; padding: 10px 12px; resize: vertical; min-height: 48px; }
.campo-bloque textarea::placeholder { color: var(--tinta-3); opacity: 1; }
.campo-bloque input[type="range"] { width: 100%; height: var(--tactil); accent-color: var(--tinta); cursor: pointer; }
.campo-bloque output { font-family: var(--font-mono); }
.grados__cuando { display: flex; flex-direction: column; gap: 0; }
.grados__cuando legend { margin-bottom: 4px; }
.grados__cuando label { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tactil); font-size: 16px; border-top: 1px solid var(--gris-pista); cursor: pointer; }
.grados__cuando input { width: 18px; height: 18px; accent-color: var(--tinta); }
.app__q { padding: var(--s-6) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.app__q-cab, .app__nivel-cab { opacity: .7; }
.app__q-nombre { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.app__q-texto { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.app__q-sobre { opacity: .7; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.app__q .opciones { margin-top: var(--s-2); }
.app__q .opcion { min-height: 48px; }
.app__ayuda { padding-top: var(--s-3); border-top: 1px solid rgba(243, 242, 239, .35); display: flex; flex-direction: column; gap: var(--s-2); font-size: 16px; line-height: 1.45; animation: aparece var(--dur-normal) var(--ease-out); }
.app__ayuda[hidden] { display: none; }
.app__ficha { display: inline-flex; align-items: center; min-height: var(--tactil); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: inherit; }
.app__nav { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--s-2); }
.app__nav .btn { min-height: 48px; height: auto; padding-block: var(--s-2); white-space: normal; text-align: left; line-height: 1.3; overflow-wrap: anywhere; }
.app__nav .btn--tinta { justify-content: space-between; }
.app__nav .btn[disabled] { background: var(--gris-paso); border-color: var(--gris-paso); color: var(--tinta-3); }
.app__grupo { border: 0; margin: 0; padding: 0; display: block; border-top: 1px solid var(--linea); }
.app__grupo > legend { float: left; width: 100%; padding: var(--s-3) 0 var(--s-2); }
.app__grupo > .chips { clear: both; }
.app__grupo[hidden] { display: none; }
.app__grupo-q { font-size: 19px; font-weight: 700; line-height: 1.25; padding: 0; }
.app__grupo .chip { min-height: var(--tactil); height: auto; cursor: pointer; }
.app__grupo .chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.app__nivel { padding: var(--s-5); background: var(--tinta); color: var(--papel); display: flex; flex-direction: column; gap: var(--s-3); animation: aparece var(--dur-normal) var(--ease-out); }
.app__nivel[hidden] { display: none; }
.app__nivel-nombre { font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1.05; }
.app__nivel .btn--texto { color: var(--papel); opacity: .8; }
.app__paso { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-2); }
.app__paso-n { font-size: 15px; }
.app__paso-n .meta { color: var(--tinta-3); }
.app__paso-nombre { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1; padding-bottom: var(--s-3); border-bottom: 1px solid var(--linea); }
.app__paso-texto { font-size: 19px; line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.app__paso-q { font-size: 16px; font-weight: 700; line-height: 1.3; }
.app__paso .app__q-sobre { color: var(--tinta-3); opacity: 1; }
.app__fin { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-2); animation: aparece var(--dur-slow) var(--ease-out); }
.app__fin-titulo { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.app__fin-texto { font-size: 19px; line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.app__resumen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.app__resumen li { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) 0; border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.45; }
.app__resumen-q { overflow-wrap: anywhere; }
.app__fuente { display: inline-flex; align-items: center; min-height: var(--tactil); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.app__botones { display: flex; flex-direction: column; gap: var(--s-2); }
.app-sin-js { display: flex; flex-direction: column; gap: var(--s-3); padding-left: 1.2em; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ¿Qué te pasa ahora? · situaciones */
.kit { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.kit__item { border-bottom: 1px solid var(--linea); }
.kit__situacion { display: grid; grid-template-columns: 28px 1fr 24px; align-items: center; gap: var(--s-2); min-height: 56px; padding: var(--s-2) 0; font-size: 18px; font-weight: 700; line-height: 1.25; cursor: pointer; list-style: none; transition: background-color var(--dur-fast) var(--ease-out); }
.kit__situacion::-webkit-details-marker { display: none; }
.kit__situacion:hover { background: var(--papel-2); }
.kit__n { font-size: 12px; color: var(--tinta-3); }
.kit__marca { font-size: 20px; text-align: center; transition: transform var(--dur-fast) var(--ease-out); }
.kit__det[open] .kit__marca { transform: rotate(45deg); }
.kit__respuesta { margin-bottom: var(--s-3); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); animation: aparece var(--dur-normal) var(--ease-out); }
.kit__pregunta { font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; text-wrap: balance; }
.kit__porque { font-size: 16px; line-height: 1.45; opacity: .85; }
.kit__acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kit__acciones .btn { min-height: var(--tactil); height: auto; }

/* Creer en grados · el cuaderno de creencias con su número */
.grados { margin-top: var(--s-2); padding: var(--s-5) 0; border-top: 2px solid var(--tinta); display: flex; flex-direction: column; gap: var(--s-3); }
.grados__titulo { font-size: 24px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.grados__form { display: flex; flex-direction: column; gap: var(--s-4); }
.grados__lista { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.grado { padding: var(--s-4) 0; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: var(--s-2); scroll-margin-top: calc(var(--cabecera) + var(--s-4)); }
.grado__texto { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.grado__barra { position: relative; height: 8px; background: var(--gris-pista); overflow: hidden; }
.grado__barra span { position: absolute; inset: 0; background: var(--tinta); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.grado__barra .grado__ahora { background: var(--acento); height: 4px; top: auto; }
.grado__meta { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.grado--toca .grado__texto::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--acento); margin-right: 8px; vertical-align: 2px; }
.grado--recien { animation: aparece var(--dur-slow) var(--ease-out); }
.grado__revisar summary { display: inline-flex; align-items: center; min-height: var(--tactil); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.grado__form { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-2); }
.grado__form .chip { min-height: var(--tactil); height: auto; cursor: pointer; }
.grados__calibra { padding: var(--s-4); background: var(--papel-2); display: flex; flex-direction: column; gap: var(--s-2); font-size: 16px; line-height: 1.45; }

/* ── casos ── */
.caso { display: flex; flex-direction: column; padding-bottom: var(--s-6); }
.caso-portada { margin: 0 var(--margen); padding: var(--s-8) 0 var(--s-5); border-bottom: 3px solid var(--tinta); display: flex; flex-direction: column; gap: var(--s-4); }
.caso-portada__titulo { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.caso-escena { font-size: 21px; line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.caso-solemos { padding-left: var(--s-3); border-left: 1px solid var(--tinta); }
.caso-revision__titulo { font-size: 24px; font-weight: 800; letter-spacing: -.015em; padding-top: var(--s-3); }
.caso-revision { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.caso-paso { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--linea); }
.caso-paso__n { font-size: 12px; color: var(--tinta-3); padding-top: 4px; }
.caso-paso__nombre { font-size: 15px; font-weight: 800; line-height: 1.3; }
.caso-paso__texto { font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.caso-pregunta { margin-top: var(--s-2); padding: var(--s-5); background: var(--tinta); color: var(--papel); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.caso .cpt-nav { margin: var(--s-6) var(--margen) 0; }
.caso-fila .fila__linea { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.margen-lista { margin: var(--s-5) var(--margen) 0; }

/* ── «Cómo se revisa» en pensamiento de mantenimiento ── */
.metodo { margin: var(--s-8) var(--margen) 0; padding: var(--s-6) var(--s-5); background: var(--tinta); color: var(--papel); display: flex; flex-direction: column; gap: var(--s-4); }
.metodo__titulo { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; padding-bottom: var(--s-3); border-bottom: 1px solid var(--papel); }
.metodo__lead { font-size: 17px; line-height: 1.45; opacity: .9; }
.metodo__pasos { list-style: none; margin: 0; padding: 0; }
.metodo__paso { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid rgba(243, 242, 239, .25); }
.metodo__n { font-size: 12px; opacity: .7; padding-top: 4px; }
.metodo__nombre { font-size: 18px; font-weight: 800; line-height: 1.25; }
.metodo__texto { font-size: 15px; line-height: 1.5; opacity: .85; }
.metodo__niveles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.metodo__niveles li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); padding-top: var(--s-3); border-top: 1px solid rgba(243, 242, 239, .25); }
.metodo__niveles .meta { color: inherit; opacity: .7; align-self: baseline; }
.metodo__nivel { font-weight: 700; font-size: 16px; }
.metodo__nivel-texto { grid-column: 1 / -1; font-size: 15px; line-height: 1.45; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .app__ayuda, .app__nivel, .app__fin, .kit__respuesta, .grado--recien { animation: none; }
  .grado__barra span { transition: none; }
}

/* 13-10-2026 · «Cómo se usa» en las herramientas de bolsillo: pasos numerados, sin caja */
.herr-como__pasos { list-style: none; margin: var(--s-2) 0 0; padding: 0; counter-reset: paso; border-top: 1px solid var(--linea); }
.herr-como__pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px 1fr; padding: var(--s-3) 0; border-bottom: 1px solid var(--linea); }
.herr-como__pasos li::before { content: counter(paso, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--tinta-3); padding-top: 3px; }