/* ==========================================================================
   MÓDULOS EN PROCESO
   --------------------------------------------------------------------------
   Cinta de peligro sobre los proyectos en standby y aviso al pulsarlos.
   El aviso lo construye /proceso.js; sin JavaScript, el enlace sigue llevando
   a /mensajes/, así que nunca se queda muerto.
   ========================================================================== */

/* ---------- cinta de peligro en la ficha ---------- */
.modulo--sby { padding-top: 7px; }

.modulo--sby::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: repeating-linear-gradient(
    45deg,
    var(--amber, #ffb000) 0 7px,
    #0b0b0b 7px 14px
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.modulo__hazard {
  position: absolute;
  z-index: 4;
  top: 47px;
  left: -22px;
  display: flex;
  width: 132px;
  justify-content: center;
  padding: 4px 0;
  transform: rotate(-35deg);
  transform-origin: center;
  background: repeating-linear-gradient(
    45deg,
    var(--amber, #ffb000) 0 6px,
    #0b0b0b 6px 12px
  );
  border-top: 1px solid rgba(255, 255, 255, .28);
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
  pointer-events: none;
}

.modulo__hazard b {
  padding: 2px 5px;
  border: 1px solid rgba(255, 176, 0, .65);
  background: #080808;
  color: var(--amber, #ffb000);
  font-family: var(--mono, "Share Tech Mono", monospace);
  font-size: .38rem;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.1;
  white-space: nowrap;
}

/* ---------- aviso modal ---------- */
.aviso-proceso {
  width: min(560px, calc(100vw - 28px));
  max-height: min(86vh, 640px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--amber, #ffb000);
  background: #080a09;
  color: var(--bone, #eae6df);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 24px 70px rgba(0, 0, 0, .7);
}

.aviso-proceso::backdrop {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    rgba(2, 4, 4, .78);
  backdrop-filter: blur(2px);
}

.aviso-proceso__caja {
  position: relative;
  padding-top: 7px;
}

.aviso-proceso__caja::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: repeating-linear-gradient(
    45deg,
    var(--amber, #ffb000) 0 7px,
    #0b0b0b 7px 14px
  );
}

.aviso-proceso__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px dashed rgba(255, 176, 0, .28);
  color: var(--amber, #ffb000);
  font-family: var(--mono, "Share Tech Mono", monospace);
  font-size: .46rem;
  letter-spacing: .13em;
}

.aviso-proceso__barra span:last-child { color: var(--steel, #7e8a87); }

.aviso-proceso__cuerpo {
  position: relative;
  padding: 26px clamp(18px, 4vw, 34px) 26px;
}

.aviso-proceso__sello {
  position: absolute;
  top: 18px;
  right: clamp(16px, 4vw, 30px);
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 176, 0, .55);
  color: var(--amber, #ffb000);
  font-family: var(--label, "Chakra Petch", sans-serif);
  font-size: 1.2rem;
  line-height: 1;
  transform: rotate(6deg);
  box-shadow: 0 0 22px -10px var(--amber, #ffb000);
}

.aviso-proceso__kicker {
  margin: 0 0 8px;
  color: var(--amber, #ffb000);
  font-family: var(--mono, "Share Tech Mono", monospace);
  font-size: .5rem;
  letter-spacing: .16em;
}

.aviso-proceso h2 {
  max-width: 15ch;
  margin: 0 0 14px;
  color: var(--bone, #eae6df);
  font-family: var(--display, "Playfair Display", serif);
  font-size: clamp(1.9rem, 5.6vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .9;
  text-transform: uppercase;
}

.aviso-proceso h2 em {
  display: block;
  color: var(--amber, #ffb000);
  font-style: normal;
}

.aviso-proceso__texto {
  max-width: 48ch;
  margin: 0 0 16px;
  color: #b8b2a7;
  font-family: var(--mono, "Share Tech Mono", monospace);
  font-size: .64rem;
  line-height: 1.75;
}

.aviso-proceso__nota {
  margin: 0 0 20px;
  padding: 8px 10px;
  border-left: 2px solid rgba(255, 176, 0, .55);
  background: rgba(255, 176, 0, .04);
  color: var(--steel, #7e8a87);
  font-family: var(--mono, "Share Tech Mono", monospace);
  font-size: .54rem;
  line-height: 1.6;
}

.aviso-proceso__nota:empty { display: none; }

.aviso-proceso__acciones {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: 10px;
}

.aviso-proceso__acciones .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

html.con-aviso { overflow: hidden; }

@media (max-width: 520px) {
  .aviso-proceso__acciones { grid-template-columns: 1fr; }
  .aviso-proceso__sello { display: none; }
  .modulo__hazard {
    top: 48px;
    left: -26px;
    width: 128px;
  }
}