/* =========================================================================
   NOEMA · Tu plan  (D7)
   Va después de noema.css y de plan.css: de plan.css reutiliza la gráfica
   del reparto (.grafica, .tramos, .lectura), el sello naranja y el bloque
   celeste. Nada de eso se vuelve a escribir aquí.

   ORDEN DEL ARCHIVO
   01 · La columna del plan
   02 · Cabecera y la intención textual
   03 · Las etapas
   04 · Prompts
   05 · Llévatelo
   06 · Puntos de corte
   07 · Impresión · el PDF que el usuario se lleva
   ========================================================================= */


/* 01 · LA COLUMNA DEL PLAN =============================================== */
/* Más angosta que el resto del sitio. Esto es un documento de trabajo, no
   una página de venta: se lee de arriba abajo y con casillas que marcar. */
.columna-plan { max-width: calc(980px + var(--margen) * 2); }

.aviso-ejemplo {
  background: var(--azul-claro);
  color: var(--grafito);
  text-align: center;
  padding: 10px var(--margen);
  font-family: var(--grot); font-size: 14px; font-weight: 500;
}
.aviso-ejemplo a { color: var(--grafito); }


/* 02 · CABECERA Y LA INTENCIÓN TEXTUAL =================================== */
.cabecera-plan { padding-top: var(--e8); }
.linea-tipo {
  margin: 0;
  font-weight: 600; letter-spacing: .10em;
  color: var(--texto-secundario);
}

/* El bloque que hace que el plan sea suyo. Fondo de papel dentro de la
   carpeta blanca: se lee como una hoja pegada, no como un campo de
   formulario que todavía se puede editar. */
.intencion {
  background: var(--papel);
  border-radius: var(--r-l);
  padding: var(--e6);
}
.intencion-lista { margin: 0; display: grid; gap: var(--e5); }
.intencion-lista > div {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--e5);
  align-items: baseline;
}
.intencion-lista dt {
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--texto-secundario);
}
/* Las palabras del usuario van en serif y en cursiva: es su voz dentro de
   un documento que en todo lo demás habla el sistema. */
.intencion-lista dd {
  margin: 0;
  font-family: var(--serif); font-size: 19px; line-height: 1.45;
  color: var(--texto-principal);
}
/* Lo que quedó sin responder se dice. No se rellena ni se esconde. */
.intencion-lista dd.abierto-aqui {
  font-family: var(--grot); font-size: 15px; font-style: normal;
  color: var(--texto-secundario);
}
.intencion-lista dd.abierto-aqui b {
  display: inline-block;
  background: var(--ambar-pleno); color: var(--grafito);
  font-weight: 600; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-s);
  margin-right: var(--e2);
}

.reparto-plan { margin-top: var(--e7); }

.caducidad {
  display: flex; align-items: flex-start; gap: var(--e3);
  margin: var(--e6) 0 0;
  padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
  background: rgba(38, 38, 38, .045);
  font-family: var(--grot); font-size: 14px; line-height: 1.5;
  color: var(--texto-secundario);
}
.caducidad b { color: var(--texto-principal); font-weight: 600; }
.caducidad .ms { margin-top: 2px; }


/* 03 · LAS ETAPAS ======================================================== */
/* --tono lo declara cada etapa en el HTML. El color no decora: dice de
   quién es la etapa. */
.etapa-plan {
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
  padding: var(--e6);
  border-left: 5px solid var(--tono);
}
.etapa-plan + .etapa-plan { margin-top: var(--e4); }

.etapa-cabeza {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e3);
  margin-bottom: var(--e4);
}
.etapa-cabeza .marca-etapa { display: none; }   /* el filete ya lo dice */
.etapa-cabeza h3 { margin: 0; }
.num-etapa {
  font-family: var(--grot); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  color: var(--tono);
}
/* El grafito de la etapa 06 sobre blanco se lee, pero como número de
   etapa queda pesado: se aclara solo para ese uso. */
.etapa-plan[data-etapa="6"] .num-etapa { color: var(--texto-secundario); }
.etapa-cabeza .apunte { margin-left: auto; }
/* Morada pleno lleva PAPEL encima, 4,47:1. El grafito que había aquí era el
   par del naranja viejo y daba 3,2:1. El texto no se decide, se consulta. */
.sello-ia {
  font-family: var(--grot); font-size: 10px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--sobre-purpura-pleno);
  background: var(--purpura-pleno);
  padding: 3px 9px; border-radius: var(--r-boton);
}
.sello-ia[hidden] { display: none; }
/* Con el sello puesto, el apunte se pega a él en vez de irse al extremo:
   dos etiquetas separadas por 400 px se leen como dos cosas distintas. */
.etapa-cabeza:has(.sello-ia:not([hidden])) .apunte { margin-left: auto; }

/* «Antes de esto». Azul, que en el sistema es la estructura y los
   fundamentos. Es el vínculo A hacia B: sin él el plan es una lista de
   tareas sin formación detrás. */
.antes {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2);
  margin: 0 0 var(--e5);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-m);
  background: rgba(168, 225, 233, .16);
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
}
.antes .ms { color: var(--azul-profundo); }
.enlace-fundamento {
  font-weight: 600; color: var(--azul-profundo); text-decoration: none;
}
.enlace-fundamento:hover { text-decoration: underline; text-underline-offset: 3px; }
.minutos {
  font-size: 12px; color: var(--texto-secundario);
  padding-left: var(--e2); border-left: 1px solid var(--borde-sutil);
}

/* --- El checklist -------------------------------------------------------
   Tareas concretas, no consejos. La casilla es un input real: un div con
   role no se marca con la barra espaciadora y aquí eso importa, porque
   este documento se usa mientras se trabaja. */
.tareas { list-style: none; margin: 0; padding: 0; }
.tareas li + li { margin-top: var(--e3); }
.tareas label {
  display: grid; grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
  cursor: pointer;
  padding: 6px 0;
}
.tareas input[type="checkbox"] {
  width: 19px; height: 19px; margin: 1px 0 0;
  accent-color: var(--verde-pleno);      /* verde claro y verde pleno · confirmación */
  cursor: pointer;
}
.tareas span {
  font-family: var(--grot); font-size: 16px; line-height: 1.55;
  color: var(--texto-principal);
}
.tareas b { font-weight: 600; }
/* Marcado, la tarea no desaparece ni se tacha entera: baja de tono. Un
   tachón sobre tres líneas deja el documento ilegible a media semana. */
.tareas input:checked + span { color: var(--texto-secundario); }

/* --- De dónde sale cada tarea ------------------------------------------
   Las tareas del método y las que pidió el encargo se ven distintas, y
   tienen que verse distintas: son las dos mitades del argumento. Lo que
   trae el encargo lleva su nombre al lado; lo que trae el método no lleva
   nada, que es su forma de decir «esto no te lo pidió nadie».

   Va en la misma línea y no en una etiqueta arriba: una fila de rótulos
   sobre cada tarea convierte una lista de trabajo en un formulario. */
.de-entregable {
  font-style: normal;
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .03em;
  color: var(--texto-secundario);
  background: var(--papel);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
  white-space: nowrap;
}

/* Lo que se descartó por no aplicar sigue a la vista, atenuado. No se tacha
   ni se borra: un plan del que desaparecen tareas no se puede comparar con
   el método del que salió, y poder decir qué le quitaste es justamente el
   valor de tener uno. */
.tareas li[data-descartada="si"] { opacity: .5; }
.tareas li[data-descartada="si"] label { cursor: default; }
.tarea-descartada {
  font-style: normal;
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  color: var(--texto-secundario);
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: 6px;
  white-space: nowrap;
}

/* Lo que entró después de arrancar lleva la fecha. Es la única marca del
   documento que dice que el alcance creció, y por eso no se puede quitar
   al marcarla: se sigue viendo hecha y agregada. */
.tarea-agregada {
  font-style: normal;
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  color: var(--ambar-profundo);
  background: var(--ambar-claro);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
  white-space: nowrap;
}
.tareas li[data-agregada="si"] > label { position: relative; }

/* El enunciado del encargo, plegado bajo su tarea. Es una cita: no es texto
   del método, es de quien hizo el encargo, y distinguirlo importa porque
   todo lo demás de este documento sí lo escribió el método. */
.encargo-tarea { margin: 6px 0 0 calc(20px + var(--e4)); }
.encargo-tarea summary {
  list-style: none; cursor: pointer;
  font-family: var(--grot); font-size: 12px; font-weight: 500;
  color: var(--texto-secundario);
  padding: 4px 0;
}
.encargo-tarea summary::-webkit-details-marker { display: none; }
.encargo-tarea summary::before { content: '+ '; }
.encargo-tarea[open] summary::before { content: '– '; }
.encargo-tarea summary:hover { color: var(--texto-principal); }
.encargo-tarea .texto-encargo {
  margin: var(--e2) 0 var(--e3);
  padding: var(--e3) var(--e4);
  border-left: 2px solid var(--borde-fuerte);
  background: var(--papel);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-family: var(--grot); font-size: 13px; line-height: 1.6;
  color: var(--texto-secundario);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* La cuenta de cuánto de esta etapa lo pidió el encargo. Solo aparece si
   hay entregables declarados. */
.reparto-etapa {
  margin: var(--e4) 0 0;
  padding-left: calc(20px + var(--e4));
  color: var(--texto-secundario);
}

/* --- La puerta de cada etapa al modo guiado -----------------------------
   Es un enlace de texto y no un botón, a propósito. Seis botones primarios
   bajando por el documento convertirían el plan en un menú de seis
   opciones, y este documento se lee de arriba abajo: la acción principal
   sigue siendo la de la cabecera. */
.trabajar-etapa { margin: var(--e5) 0 0; }
.enlace-trabajar {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--grot); font-size: 13px; font-weight: 500;
  color: var(--texto-secundario);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.enlace-trabajar:hover {
  color: var(--texto-principal);
  border-bottom-color: var(--tono);
}
.enlace-trabajar:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 3px; }

/* --- La entrada al modo guiado ----------------------------------------- */
.ir-a-trabajar {
  display: flex; align-items: center; gap: var(--e4);
  flex-wrap: wrap;
  margin: 0 0 var(--e8);
}
.ir-a-trabajar .micro { margin: 0; }

/* El aviso de que este navegador no guarda. Ámbar y no rojo, por lo mismo
   que la caducidad del enlace: no es un error, es una condición que hay
   que saber antes de ponerse a trabajar. */
.aviso-sin-guardado {
  background: var(--ambar-claro);
  color: var(--grafito);
}

/* --- La etapa sin prompts ----------------------------------------------
   Se declara. Una etapa sin bloque naranja, callada, se lee como un
   olvido de maquetación en vez de como la decisión que es. */
.sin-prompt {
  margin: var(--e5) 0 0;
  padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
  border: 1px dashed var(--borde-fuerte);
  font-family: var(--grot); font-size: 14px; line-height: 1.55;
  color: var(--texto-secundario);
}


/* 04 · PROMPTS =========================================================== */
.prompt {
  margin-top: var(--e5);
  padding: var(--e5);
  border-radius: var(--r-m);
  background: rgba(93, 103, 226, .12);
}
.prompt[hidden] { display: none; }
.texto-prompt {
  margin: var(--e3) 0 var(--e4);
  font-family: var(--grot); font-size: 14px; line-height: 1.6;
  color: var(--texto-principal);
  white-space: pre-wrap;
  background: var(--fondo-superficie);
  border-radius: var(--r-s);
  padding: var(--e4);
}
.copiar-prompt {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; cursor: pointer;
  border: 1px solid var(--purpura-profundo);
  border-radius: var(--r-boton);
  padding: 8px var(--e4);
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--purpura-profundo);
}
.copiar-prompt:hover { background: rgba(93, 103, 226, .18); }


/* 05 · LLÉVATELO ========================================================= */
.acciones-plan { display: flex; gap: var(--e3); flex-wrap: wrap; }
.abierto .bloque-cliente { margin-top: 0; }


/* 06 · PUNTOS DE CORTE =================================================== */
@media (max-width: 1023px) {
  .intencion-lista > div { grid-template-columns: 1fr; gap: var(--e2); }
}
@media (max-width: 767px) {
  .etapa-plan { padding: var(--e5); }
  .etapa-cabeza .apunte { margin-left: 0; width: 100%; }
  .intencion { padding: var(--e5); }
  .acciones-plan .boton { width: 100%; }
}


/* 07 · IMPRESIÓN =========================================================
   El PDF es la mitad de la promesa del sistema, así que no puede salir
   como una captura de la página. Fuera el chrome, fuera los botones, y la
   casilla se imprime vacía para poder marcarla a mano. */
@media print {
  @page { margin: 16mm 14mm; }

  body { background: none !important; font-size: 11pt; }
  .papel-reticulado { background-image: none !important; }

  /* Las puertas al modo guiado no se imprimen: en papel no llevan a ningún
     lado, y la hoja impresa es justamente la que se usa lejos de la
     pantalla. */
  .nav, .hoja-menu, .salto, .llevatelo, .pie,
  .copiar-prompt, .aviso-ejemplo,
  .ir-a-trabajar, .trabajar-etapa { display: none !important; }

  .seccion, .seccion-corta { padding-block: 0 !important; }
  .contenido, .columna-plan { max-width: none; padding-inline: 0; }

  /* Ninguna etapa se parte entre dos hojas: media etapa en una página no
     sirve para trabajar. */
  .etapa-plan {
    break-inside: avoid;
    border: 1px solid #999;
    border-left: 4px solid var(--tono);
    padding: 10pt;
    box-shadow: none;
  }
  .etapa-plan + .etapa-plan { margin-top: 8pt; }
  .carpeta > .cuerpo { box-shadow: none; border: 1px solid #999; }
  .prompt, .antes, .intencion, .caducidad, .bloque-cliente {
    border: 1px solid #ccc; background: none !important;
  }
  .display-l { font-size: 22pt; }
  .titular-s { font-size: 13pt; }
  .tareas input[type="checkbox"] { -webkit-appearance: none; appearance: none;
    border: 1px solid #333; border-radius: 2px; }

  /* La dirección de cada enlace, escrita: en papel un enlace azul no
     lleva a ningún lado. */
  .enlace-fundamento::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 9pt; }
}