/* ==========================================================================
   Plazos en la cabecera de las landings de ADER y del EVE (inc/plazos.php).
   Diseño: boceto de JAE y Claude (05/10), con los tokens del tema.
   Se carga DESPUÉS de categoria.css y de ader.css / eve.css.

   Contrastes medidos (WCAG 2.2, colores mezclados sobre su fondo):
     tarjeta (--gi-tecnico-2)  números #fff 16,35 · unidades --gi-verde 5,31
                               etiqueta --gi-cota 9,03 · nota 9,81
     hoja (#fff)               día --gi-texto 16,71 · etiqueta y semana
                               --gi-texto-suave 6,55
                               «Faltan» --gi-verde-oscuro / --gi-verde-claro 10,97
                               mes #fff / --gi-verde 3,08: SOLO texto grande y
                               en negrita (22 px, 700). No reducirlo.
     punteada (--gi-tecnico)   estado #fff 18,23 · etiqueta 9,77 · aviso 10,74
   ========================================================================== */

/* --- La rosa de vientos: a la izquierda, tenue, fuera del flujo ------------- */
.gi-plazos-cab{position:relative;overflow:hidden}
.gi-plazos-cab .gi-cat__cabecera-int{position:relative}
.gi-plazos-cab .gi-motivo--brujula{
  position:absolute;z-index:0;pointer-events:none;
  opacity:.14;width:120px;left:-3rem;bottom:-4rem;   /* asoma por la esquina: no tapa los botones */
}
.gi-plazos-cab .gi-cat__titular,
.gi-plazos-cab .gi-cat__titular > *,
.gi-plazo{position:relative;z-index:1}

/* --- Dónde va la caja ----------------------------------------------------------
   Anchos medios y móvil: una sola columna, la caja justo DEBAJO DEL TITULAR
   (h1), antes de la entradilla. ≥ 90rem (1440 px): columna derecha, con su
   borde superior alineado con el del titular.
   El bloque del titular pasa a display:contents: sus piezas (antetítulo,
   distintivo, h1, entradilla, avisos, botones) son celdas de la rejilla, y la
   caja se coloca por filas sin medir nada. */
.gi-plazos-cab--con-caja .gi-cat__cabecera-int{
  display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
  row-gap:0;   /* el gap de la versión flex separaría las piezas del titular */
}
.gi-plazos-cab--con-caja .gi-cat__titular{display:contents}
.gi-plazos-cab--con-caja .gi-cat__titular > *{grid-column:1;justify-self:start}   /* la columna 2 es solo de la caja; sin estirar las pastillas */
.gi-plazos-cab--con-caja .gi-plazo{grid-column:1;grid-row:3;justify-self:start;margin:1.75rem 0 .25rem}
.gi-eve__cabecera.gi-plazos-cab--con-caja .gi-plazo{grid-row:4}   /* tras antetítulo, distintivo y h1 */

@media (min-width:90rem){
  .gi-plazos-cab--con-caja .gi-cat__cabecera-int{
    max-width:78rem;
    grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(2.5rem,1rem + 3vw,4.5rem);
    /* Filas para las piezas del titular y una última flexible: la altura de la
       caja va a esa fila, no abre huecos entre el titular y la entradilla. */
    grid-template-rows:repeat(6,auto) 1fr;
  }
  .gi-plazos-cab--con-caja .gi-plazo{grid-column:2;grid-row:2 / -1;margin:0}
  .gi-eve__cabecera.gi-plazos-cab--con-caja .gi-plazo{grid-row:3 / -1}
  /* En el margen libre de la izquierda: tan ancha como quepa (hasta 150 px)
     sin llegar al texto. 100% es el ancho del contenedor de la cabecera. */
  .gi-plazos-cab .gi-motivo--brujula{
    --hueco:calc((100vw - 100%) / 2);
    width:min(150px, calc(var(--hueco) + 1rem));
    left:calc(-1 * min(var(--hueco) - .75rem, 182px));
    opacity:.16;bottom:auto;top:50%;transform:translateY(-50%);
  }
}
@media (max-width:36rem){
  .gi-plazos-cab--con-caja .gi-plazo{justify-self:stretch;width:100%;max-width:none}
}

/* --- Común ------------------------------------------------------------------ */
.gi-plazo,.gi-plazo *{box-sizing:border-box}   /* sin depender de Astra */
.gi-plazo p{margin:0;max-width:none}
.gi-plazo time{font:inherit;color:inherit}

/* --- Tarjeta de cuenta atrás (ADER en curso, EVE abierta) ------------------- */
.gi-plazo--cuenta{
  width:min(100%,22rem);
  background:var(--gi-tecnico-2);border:1px solid var(--gi-verde);border-radius:6px;
  padding:1.375rem 1.5rem 1.25rem;
}
.gi-plazo .gi-plazo__etiqueta{
  font-family:var(--gi-cuerpo);font-size:var(--gi-t-s);line-height:1.4;
  color:var(--gi-cota);margin:0 0 .6rem;
}
.gi-plazo__numeros{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4rem;row-gap:.1rem}
.gi-plazo__n{
  font-family:var(--gi-titular);font-weight:700;color:#fff;
  font-size:clamp(2.25rem,1.95rem + 1vw,2.875rem);line-height:1.12;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.gi-plazo__u{
  font-family:var(--gi-titular);font-weight:600;font-size:1.0625rem;line-height:1.4;
  color:var(--gi-verde);margin-right:.45rem;
}
.gi-plazo .gi-plazo__hasta{
  margin-top:1rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--gi-titular);font-weight:600;font-size:var(--gi-t-s);line-height:1.45;color:#fff;
}
.gi-plazo .gi-plazo__nota{
  margin-top:.3rem;font-size:var(--gi-t-xs);line-height:1.45;color:rgba(233,239,236,.82);
}

/* --- Hoja de calendario (EVE: próxima convocatoria) -------------------------- */
.gi-plazo--hoja{
  width:min(100%,17rem);display:flex;flex-direction:column;text-align:center;
  background:#fff;border-radius:var(--gi-radio);box-shadow:0 10px 28px rgba(0,0,0,.45);
}
/* El mes va arriba a la vista, pero en el código después de «Próxima
   convocatoria»: un lector de pantalla oye primero qué es la fecha. */
.gi-plazo--hoja .gi-plazo__hoja-fecha,
.gi-plazo--hoja .gi-plazo__hoja-fecha time{display:contents}
.gi-plazo__hoja-mes{
  order:-1;display:block;background:var(--gi-verde);color:#fff;
  font-family:var(--gi-titular);font-weight:700;font-size:1.375rem;line-height:1.3;   /* 22 px: no reducir */
  padding:1.4rem .75rem .6rem;border-radius:var(--gi-radio) var(--gi-radio) 0 0;
}
.gi-plazo .gi-plazo__hoja-etq{
  font-family:var(--gi-cuerpo);font-size:var(--gi-t-s);line-height:1.4;
  color:var(--gi-texto-suave);padding:.7rem .9rem 0;
}
.gi-plazo__hoja-dia{
  display:block;font-family:var(--gi-titular);font-weight:700;color:var(--gi-texto);
  font-size:5.25rem;line-height:1.08;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.gi-plazo__hoja-sem{
  display:block;font-family:var(--gi-cuerpo);font-size:1rem;line-height:1.4;
  color:var(--gi-texto-suave);padding:0 .9rem .85rem;
}
.gi-plazo .gi-plazo__hoja-faltan{
  background:var(--gi-verde-claro);color:var(--gi-verde-oscuro);
  font-family:var(--gi-titular);font-weight:700;font-size:1.0625rem;line-height:1.4;
  padding:.75rem .75rem .8rem;border-radius:0 0 var(--gi-radio) var(--gi-radio);
}

/* Anillas: decorativas (aria-hidden), del color del fondo de la cabecera. */
.gi-plazo__anillas{
  position:absolute;top:-.5rem;left:0;right:0;z-index:2;
  display:flex;justify-content:space-between;padding:0 2.9rem;pointer-events:none;
}
.gi-plazo__anillas span{
  display:block;width:12px;height:22px;border-radius:6px;
  background:var(--gi-tecnico);box-shadow:inset 0 -3px 0 rgba(255,255,255,.18);
}

/* --- Hoja punteada: fecha POR CONFIRMAR -------------------------------------- */
.gi-plazo--pendiente{
  background:transparent;box-shadow:none;border:2px dashed var(--gi-cota);
  padding:1.4rem 1.1rem 1.25rem;
}
.gi-plazo--pendiente .gi-plazo__hoja-etq{color:var(--gi-cota);padding:0 0 .2rem}
.gi-plazo--pendiente .gi-plazo__hoja-dia{color:var(--gi-tinta-inv);font-size:4.75rem;line-height:1.1}
.gi-plazo .gi-plazo__hoja-estado{
  font-family:var(--gi-titular);font-weight:700;font-size:1.125rem;line-height:1.45;color:#fff;margin:0 0 .6rem;
}
.gi-plazo .gi-plazo__hoja-aviso{font-size:var(--gi-t-xs);line-height:1.45;color:rgba(233,239,236,.82)}
/* Lista de aviso (16/10): botón de contorno, el que va sobre fondo oscuro;
   no compite con el verde de «Preparar mi expediente». */
.gi-plazo .gi-plazo__lista{margin:1rem 0 0}
.gi-plazo__lista .gi-cta{display:block;padding:.75em .5em;line-height:1.3;white-space:nowrap}
.gi-plazo .gi-plazo__lista-nota{margin:.45rem 0 0;font-size:var(--gi-t-xs);line-height:1.45;color:rgba(233,239,236,.82)}
.gi-plazo__solo-lector{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.gi-plazo--pendiente .gi-plazo__anillas{top:-.8rem}
.gi-plazo--pendiente .gi-plazo__anillas span{
  height:20px;background:var(--gi-tecnico);box-shadow:none;border:2px dashed var(--gi-cota);
}

/* Aviso junto al botón de envío cuando el plazo vence con el formulario en
   uso (plazos.js): discreto, en el color de texto del formulario. */
main form p.gi-plazo__aviso-cierre{   /* pesa más que .gi-tecnico p */
  margin:.75rem 0 0;font-family:var(--gi-titular);font-weight:600;
  font-size:var(--gi-t-s);line-height:1.45;color:var(--gi-verde-oscuro);
}

/* Sin animación en ningún caso; por si alguna regla heredada la trajera. */
@media (prefers-reduced-motion:reduce){
  .gi-plazo,.gi-plazo *{transition:none !important;animation:none !important}
}