/* =========================================================================
   NOEMA · Recursos  (D15)
   Va después de noema.css. No declara colores nuevos: Recursos es ÁMBAR en
   el mapa de navegación, y aquí también.

   LA TRAMPA DE CONTRASTE DEL SISTEMA VIVE EN ESTA PÁGINA. El ámbar pleno no
   sostiene texto en papel encima. Sobre ámbar el texto va SIEMPRE en
   grafito, que da 6,99:1. Es la única excepción declarada del sistema de
   paletas, y por eso en esta hoja el ámbar aparece casi siempre como
   PROFUNDO (para texto) o como CLARO (para relleno con grafito encima). El
   pleno solo se usa donde no lleva texto: filetes y puntos.

   ORDEN DEL ARCHIVO
   01 · Cabecera
   02 · El recurso principal
   03 · Las fichas de recurso
   04 · Cierre
   05 · Puntos de corte
   06 · Impresión
   ========================================================================= */


/* 01 · CABECERA ========================================================== */
.cabecera-recursos { padding-top: var(--e9); padding-bottom: var(--e7); }
.cabecera-recursos .display-l { text-transform: uppercase; letter-spacing: .005em; }


/* 02 · EL RECURSO PRINCIPAL ==============================================
   El plan encabeza porque es la salida del sistema, no una descarga más.
   Dos columnas: el argumento a la izquierda y las dos salidas a la derecha,
   que es donde alguien decide si vale la pena. */
.recurso-principal {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--medianil);
  align-items: start;
}

/* EL FILETE ÁMBAR SE RETIRÓ EL 25-08-2026. Marcaba el bloque del plan con
   una línea vertical del pleno a la izquierda. Se quita por decisión de
   dirección de arte, y con él se va el padding que solo existía para
   separar el texto de esa línea: sin filete, la sangría dejaba el bloque
   colgado sin motivo.

   Consecuencia para el resto de la hoja: el ámbar PLENO se queda sin uso en
   la página hasta que entren los puntos de color de las fichas del kit. La
   regla no cambia, solo deja de aplicarse aquí. */

/* Las dos salidas del plan, con su asimetría. Va en tarjeta ámbar claro con
   grafito encima: 10,5:1. El claro es el escalón que sostiene texto oscuro,
   y por eso es el que se usa para rellenar en esta página. */
.dos-salidas {
  background: var(--ambar-claro);
  border-radius: var(--r-l);
  padding: var(--e6);
  color: var(--grafito);
}
.dos-salidas h3 { margin: 0 0 var(--e5); color: var(--grafito); }
.dos-salidas dl { margin: 0; display: grid; gap: var(--e5); }
.dos-salidas dt {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ambar-profundo);
  margin-bottom: var(--e2);
}
.dos-salidas dd {
  margin: 0;
  font-family: var(--grot);
  font-size: 15px; line-height: 1.55;
  color: var(--grafito);
}
.dos-salidas dd b { font-weight: 600; }
.dos-salidas > dl > div + div { padding-top: var(--e5); border-top: 1px solid rgba(38, 38, 38, .16); }


/* 03 · EL KIT ============================================================
   Reescrito el 25-08-2026. Antes eran dos fichas escritas a mano en el
   HTML; ahora son diecisiete que salen de `recursos-datos.js`.

   LOS GRUPOS SON EL ARGUMENTO. Un directorio agrupa por tipo de archivo y
   esto agrupa por el momento del proyecto. Si algún día alguien reordena
   esta rejilla por formato, la página vuelve a ser una carpeta de
   descargas, y el rótulo del grupo es lo único que lo impide. */

.grupo-momento + .grupo-momento { margin-top: var(--e9); }

/* El rótulo del grupo es discreto a propósito, igual que en el índice de
   herramientas: la jerarquía la manda la pieza, no el rótulo. Si pesara
   como un titular, el momento parecería una sección del sitio y no un
   criterio de orden. Va en tamaño de antetítulo y sobre una regla. */
.grupo-cabeza {
  padding-bottom: var(--e3);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--regla);
}
.grupo-cabeza h3 {
  font-family: var(--grot);
  font-size: 13px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--ambar-profundo);
  margin: 0;
}
.grupo-glosa {
  font-family: var(--grot);
  font-size: 16px; line-height: 1.55;
  color: var(--texto-secundario);
  max-width: 62ch;
  margin: 0 0 var(--e6);
}

.rejilla-recursos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--medianil);
  align-items: stretch;
}


/* LA FICHA -----------------------------------------------------------------
   Seis datos y ni uno más. Limpia por decisión: quien la mira está en
   medio de su proyecto y necesita saber en dos segundos si esta pieza le
   sirve ahora. */
.recurso {
  display: flex; flex-direction: column;
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
  padding: var(--e6);
  scroll-margin-top: calc(var(--alto-nav) + var(--e6));
}

.recurso-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

/* EL PUNTO DE COLOR ES DE LA ETAPA, NO DE LA PÁGINA. El tono llega desde
   `metodo-datos.js` en la variable --tono, así que un cambio de paleta del
   sistema no obliga a tocar esta hoja.

   RELLENO EN EL MÉTODO, HUECO EN GESTIÓN. La etapa 06 ya es grafito, así
   que sin esta distinción una pieza de entrega y una de gestión se verían
   idénticas. El contorno separa las dos familias sin inventar un color
   nuevo, que es la regla que este sistema no rompe. */
.recurso-etapa {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  min-width: 0;
}
.recurso-etapa i {
  flex-shrink: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tono);
}
.recurso.es-gestion .recurso-etapa i {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--tono);
}

.recurso-formato {
  flex-shrink: 0;
  font-family: var(--grot);
  font-size: 10px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  border: 1px solid var(--borde-sutil);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.recurso-nombre {
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; line-height: 1.15;
  margin: 0 0 var(--e3);
}
.recurso-decide {
  font-family: var(--grot);
  font-size: 15px; line-height: 1.55;
  color: var(--texto-secundario);
  margin: 0 0 var(--e5);
}

.recurso-datos {
  margin: auto 0 0;
  display: grid; gap: var(--e3);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-sutil);
}
.recurso-datos > div {
  display: grid;
  grid-template-columns: minmax(0, 62px) minmax(0, 1fr);
  gap: var(--e3);
  align-items: baseline;
}
.recurso-datos dt {
  font-family: var(--grot);
  font-size: 10px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.recurso-datos dd {
  margin: 0;
  font-family: var(--grot); font-size: 14px; line-height: 1.45;
  color: var(--texto-principal);
}

/* EL ESTADO, EN UNA LÍNEA Y NUNCA EN UN PÁRRAFO. Con diecisiete fichas,
   diecisiete párrafos explicando por qué la pieza no existe se leen como
   diecisiete disculpas. El motivo se dice una sola vez, arriba, a nivel de
   página. Aquí solo queda el dato.

   Borde punteado, el mismo componente conceptual que la cola editorial de
   los fundamentos y la ficha del documento en Sobre: lo que no está hecho
   se declara, no se esconde detrás de un botón que no descarga. */
.recurso-estado {
  margin: var(--e5) 0 0;
  padding-top: var(--e4);
  border-top: 1px dashed var(--borde-fuerte, var(--borde-sutil));
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}


/* 04 · CIERRE ============================================================
   Aquí vivía «Por qué hay dos y no cuarenta», la franja oscura del
   criterio. Se retiró el 25-08-2026 junto con su sección en el HTML, y con
   ella se fueron `.porque-dos` y `.bloque-criterio`, que no los usaba nadie
   más. El motivo está escrito en el comentario del HTML. */
.cierre-recursos { text-align: left; }


/* 05 · PUNTOS DE CORTE =================================================== */
@media (max-width: 1023px) {
  .cabecera-recursos { padding-top: var(--e8); }
  .recurso-principal { grid-template-columns: 1fr; gap: var(--e7); }
  /* Dos columnas, no tres: con tres, la ficha baja de 300 px y el nombre en
     serif empieza a partirse en tres líneas. */
  .rejilla-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grupo-momento + .grupo-momento { margin-top: var(--e8); }
}

@media (max-width: 767px) {
  .dos-salidas { padding: var(--e5); }
  .rejilla-recursos { grid-template-columns: 1fr; }
  .recurso { padding: var(--e5); }
  .recurso-datos > div { grid-template-columns: 1fr; gap: 2px; }
  /* La cabeza de la ficha se apila: en 320 px, el rótulo de etapa y la
     píldora de formato no caben en la misma línea sin apretarse. */
  .recurso-cabeza { flex-direction: column; align-items: flex-start; gap: var(--e2); }
}


/* 06 · IMPRESIÓN =========================================================
   La tarjeta de proceso y la plantilla se imprimen, así que esta página
   tiene que poder imprimirse limpia aunque sea el índice de las dos. */
@media print {
  @page { margin: 18mm 16mm; }
  .nav, .hoja-menu, .salto, .pie, .hero-acciones, .cierre-recursos { display: none !important; }
  .papel-reticulado { background-image: none !important; }
  body { background: none !important; font-size: 11pt; }
  .inverso, .dos-salidas {
    background: none !important;
    color: #000 !important;
    border: 1px solid #ccc;
  }
  .inverso .parrafo { color: #000 !important; }
  .contenido { max-width: none; padding-inline: 0; }
  .recurso-principal { display: block; }
  .recurso, .dos-salidas { break-inside: avoid; }
  /* En papel, tres columnas de ficha quedan en 4 cm de ancho. Dos caben. */
  .rejilla-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recurso { border: 1px solid #ccc; }
}