/* La planificación, en esquema. Hereda de estilos.css; aquí solo lo suyo. */

.barra-buscar{ display:flex; gap:.5rem; align-items:center; margin:1rem 0 }
.barra-buscar input{ flex:1; min-height:44px }

form#nuevo{ border:1px solid var(--linea); border-radius:var(--radio);
            padding:.9rem; margin:.8rem 0 }

/* --- el esquema ---------------------------------------------------------
   La sangría es lo que hace que se lea como un esquema y no como una lista:
   proyecto › módulo › pieza. En 384 px la sangría es corta a propósito —una
   más generosa deja el texto en una columna de cuatro palabras. */
.proyecto{
  border:1px solid var(--linea); border-radius:var(--radio);
  margin:.9rem 0; padding:.8rem;
}
.proyecto--archivado{ opacity:.72 }
.proyecto__cabeza{ display:flex; align-items:flex-start; gap:.6rem; flex-wrap:wrap }
.proyecto__nombre{ font-size:1.1rem; font-weight:700; flex:1; min-width:12ch }
.proyecto__para{ display:block; font-size:.9rem; color:var(--grafito-tenue) }
.proyecto__resuelve{ margin:.4rem 0 .6rem; font-size:.95rem }

/* La barra de avance. Con su número al lado: una barra sola obliga a estimar
   a ojo, y a ojo el 40 % y el 60 % son la misma barra. */
.avance{ display:flex; align-items:center; gap:.6rem; margin:.5rem 0 }
.avance__riel{ position:relative; flex:1; height:8px; background:var(--linea);
               border-radius:999px; overflow:hidden }
/* LO MARCADO, en ámbar: es lo que alguien tachó, no lo que se ha probado. */
.avance__lleno{ position:absolute; left:0; top:0; height:100%;
                background:var(--ambar-claro,#F59E0B); width:0 }
.avance__cifra{ font-size:.9rem; font-weight:600; white-space:nowrap }

.desorden{
  border-left:3px solid var(--ambar-texto,#B45309);
  background:rgba(217,119,6,.08);
  padding:.5rem .7rem; margin:.6rem 0; font-size:.9rem;
}
.desorden b{ display:block }

.modulo{ margin:.7rem 0 .7rem .8rem; padding-left:.8rem;
         border-left:2px solid var(--linea) }
.modulo__cabeza{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.modulo__nombre{ font-weight:700; flex:1; min-width:10ch }
.modulo__que{ font-size:.9rem; color:var(--grafito-tenue); margin:.15rem 0 .3rem }
.modulo__necesita{ font-size:.85rem; color:var(--grafito-tenue) }

.pieza{ display:flex; align-items:center; gap:.5rem;
        margin:.25rem 0 .25rem 1rem; min-height:44px }
.pieza__que{ flex:1 }
.pieza--hecho .pieza__que{ text-decoration:line-through; opacity:.65 }

/* --- el estado ----------------------------------------------------------
   NO ES SOLO COLOR. Cada estado lleva su palabra: quien no distinga el verde
   del ámbar lee exactamente lo mismo — familia 5 de la experiencia. */
.estadoSel{
  min-height:44px; border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--papel); color:var(--grafito); font:inherit;
  padding:0 .5rem; cursor:pointer;
}
.estadoSel[data-estado="hecho"]{ border-color:var(--verde); color:var(--verde) }
.estadoSel[data-estado="en proceso"]{ border-color:var(--ambar-texto,#B45309);
                                      color:var(--ambar-texto,#B45309) }

.mandos-linea{ display:flex; gap:.35rem; flex-wrap:wrap; margin:.5rem 0 }
.mandos-linea .boton{ margin:0 }

.donde{ font-size:.85rem; color:var(--grafito-tenue); margin:.2rem 0 }
.donde b{ color:var(--grafito) }

/* LO COMPROBADO, DENTRO DE LO MARCADO. La barra de dentro es lo que las pruebas
   sostienen; la de fuera, lo que alguien tachó. La distancia entre las dos es
   lo que falta por respaldar, y se ve sin leer un número. */
.avance__firme{
  position:absolute; left:0; top:0; height:100%;
  background:var(--verde,#2F7A4F); border-radius:inherit;
}
.avance__cifra--ojo{ color:var(--ambar-texto,#B45309) }

/* Lo que dicen las pruebas de cada módulo. Cuatro respuestas, y «sin comprobar»
   no se pinta como si estuviera mal: no saber no es estar roto. */
.modulo__sello{
  margin-left:.5rem; padding:.1rem .45rem; border-radius:1rem;
  font-size:.72rem; border:1px solid currentColor;
}
.modulo__sello--verde{ color:var(--verde,#2F7A4F) }
.modulo__sello--en-rojo{ color:#B02A1E }
.modulo__sello--no-se-sabe{ color:var(--grafito-tenue,#616E7C) }
.modulo__sello--sin-pruebas{ color:var(--grafito-tenue,#616E7C) }

/* LO QUE SE HEREDA. Plegado por omisión: es el marco, se consulta, no se lee
   cada vez. Y no cuenta en el avance porque no es trabajo. */
.hereda{ margin:.6rem 0; font-size:.85rem; color:var(--grafito-tenue) }
.hereda summary{ cursor:pointer; min-height:44px; display:flex; align-items:center }
.hereda__uno{ padding:.35rem 0 .35rem 1rem; border-left:2px solid var(--linea) }
.hereda__uno b{ display:block }
.hereda__uno code{ font-size:.78rem; color:var(--ambar-texto) }
.hereda__uno span{ display:block; font-size:.82rem }

/* LO QUE FALTA POR DECIDIR. El que para la obra se ve distinto del que solo
   se dice: confundirlos sería estorbar de más o dejar pasar lo caro. */
.directriz{
  margin:.5rem 0; padding:.5rem .7rem; border-radius:var(--radio);
  background:rgba(217,119,6,.08); color:var(--ambar-texto); font-size:.88rem;
}
.directriz--para{
  background:rgba(176,42,30,.08); color:#B02A1E; font-weight:600;
}

/* EL MODULO CERO NO ES TRABAJO: es lo que se decide antes de empezar. */
.modulo--cero{ border-left:3px solid var(--ambar) }
.pieza__con-porque{ display:block }
.pieza__porque{
  font-size:.8rem; color:var(--grafito-tenue);
  padding:0 0 .5rem 1rem; border-left:2px solid var(--linea); margin-left:.5rem;
}
/* Las directrices, en su propio contador: decidir no es construir. */
.avance__decidir{
  font-size:.8rem; color:var(--ambar-texto); white-space:nowrap;
  padding-left:.5rem;
}

/* LA DECISION DE CADA DIRECTRIZ. Va debajo del porqué: primero por qué importa,
   después qué se decidió. Sin esto la directriz solo se podía marcar, y una
   casilla marcada no dice nada dentro de un mes. */
.pieza__decision{ margin:.3rem 0 .6rem 2.1rem }
.pieza__rotulo{
  display:block; font-size:.75rem; letter-spacing:.02em;
  color:var(--tenue,#616E7C); margin-bottom:.2rem;
}
.pieza__decidido{
  width:100%; box-sizing:border-box; min-height:44px;
  padding:.45rem .6rem; font:inherit; font-size:.86rem; line-height:1.45;
  border:1px solid var(--linea,#E4E1DC); border-radius:.4rem;
  background:var(--papel,#FFFDF9); color:inherit; resize:vertical;
}
.pieza__decidido--falta{ border-color:var(--rojo,#B3261E) }
.pieza__falta{ margin-top:.25rem; font-size:.8rem; color:var(--rojo,#B3261E) }

/* =============================================================================
   EL ESQUEMA SE PLIEGA, Y CABE EN LA PANTALLA

   Dos cosas que él pidió juntas:

     «Cada punto que tenga dependencias debe ser desplegable y enrollable,
      porque si son muchos puntos me perdería.»
     «La herramienta se sale de la pantalla, revisa la grid, debe estar a la
      medida correcta de la pantalla del dispositivo.»

   Lo segundo estaba medido: +92 px en 384 y +156 en 320, siempre por lo mismo
   —una fila con el selector, el texto y tres botones que no caben—. Se arregla
   bajando los mandos a su línea, no encogiéndolos: un botón de 30 px cabe y no
   se toca.
   ========================================================================== */

/* NADA SE SALE DE LADO. Es la red de seguridad, no el arreglo: lo que se sale
   se arregla donde se sale. Pero un desbordamiento de dos píxeles no se ve
   mirando y en el teléfono obliga a arrastrar toda la lectura. */
.contenido{ overflow-x:hidden }
.proyecto, .modulo{ max-width:100%; box-sizing:border-box }

/* --- el punto plegable --------------------------------------------------- */
.modulo > summary{ cursor:pointer; list-style:none }
.modulo > summary::-webkit-details-marker{ display:none }
.modulo > summary::marker{ content:"" }

/* La flecha se dibuja aquí y no se hereda del navegador: así gira al abrir y
   dice de un vistazo si hay algo dentro. */
.modulo__cabeza::before{
  content:"▸"; flex:0 0 auto; width:1rem;
  color:var(--grafito-tenue); transition:transform .18s ease;
}
.modulo[open] > .modulo__cabeza::before{ transform:rotate(90deg) }

/* En la cabeza va lo que se ve plegado: estado, nombre, sello y barra. Se
   permite que baje de línea —un nombre largo no puede empujar la barra fuera. */
.modulo__cabeza{ min-height:44px; padding:.2rem 0 }
.modulo__nombre{ min-width:8ch }

/* --- la barra de cada punto ---------------------------------------------- */
/* Del grosor de la barra de lectura del sitio, que es la que le gusta: fina,
   sin marco, y movida con `transform` en vez de `width` — el navegador la anima
   sin volver a maquetar la página. */
.avance--punto{ flex:1 1 7rem; min-width:5rem; margin:0; gap:.4rem }
.avance--punto .riel{ height:4px }
.avance--punto .avance__cifra{ font-size:.78rem; font-weight:600 }

.riel{
  position:relative; flex:1; height:5px; min-width:2.5rem;
  background:var(--linea); border-radius:999px; overflow:hidden;
}
.riel__lleno{
  display:block; height:100%; width:100%;
  background:var(--ambar-claro,#F59E0B);
  transform-origin:0 50%;
  transition:transform .3s ease, background-color .3s ease;
}

/* VERDE AL LLEGAR AL FINAL — «100 % verde para tareas completas». El color hace
   lo que la barra sola no puede: a ojo, un 95 % y un 100 % son la misma barra. */
.avance--entero .riel__lleno{ background:var(--verde,#2F7A4F) }
.avance--entero .avance__cifra{ color:var(--verde,#2F7A4F) }

/* --- la pieza, ya sin desbordar ------------------------------------------ */
/* Se deja bajar de línea: en 320 px el selector de estado y un texto largo no
   caben juntos, y forzarlos era lo que empujaba los botones fuera. */
.pieza{ flex-wrap:wrap; margin-left:.5rem }
.pieza__que{ flex:1 1 8rem; min-width:0; overflow-wrap:anywhere }

/* Los mandos, en su propia línea y con sitio para el dedo. Alineados a la
   derecha: así no se confunden con el contenido, que se lee por la izquierda. */
.pieza__mandos{
  display:flex; gap:.35rem; justify-content:flex-end;
  margin:0 0 .5rem .5rem;
}
.pieza__mandos .boton{ min-width:44px; margin:0 }

/* El selector no puede estirarse hasta empujar a los demás. */
.pieza .estadoSel, .modulo__cabeza .estadoSel{ flex:0 0 auto; max-width:9rem }

/* Y el campo de la decisión, con la sangría que le queda en un teléfono: 2.1rem
   dejaban el texto en una columna de cuatro palabras. */
@media (max-width: 26rem){
  .pieza__decision{ margin-left:.5rem }
  .pieza__porque{ margin-left:.25rem; padding-left:.6rem }
  .modulo{ margin-left:.35rem; padding-left:.5rem }
}