/* Composiciones de fecha — hoja compartida.

   Vive aparte de invitacion.css porque la usan DOS sitios: la invitación del
   cliente y la pantalla /fechas del panel, donde se le enseñan al cliente
   dibujadas. Estaba dentro de invitacion.css y el panel no carga esa hoja, así
   que las seis composiciones salían como texto suelto justo en la pantalla que
   existe para verlas.

   Cargar invitacion.css entera en el panel no era opción: define body, h1 y
   medio sitio, y se llevaría por delante el estilo del panel.
/* ---------------------------------------------------------------------------
   Composiciones de fecha.

   La fecha como bloque y no como renglón: el día en grande al centro y las
   demás piezas alrededor, que es como se compone en una invitación de papel.
   Un formato de texto no llega aquí por mucho que se le den puntos y rayas —
   lo que distingue a estas es el TAMAÑO relativo de cada parte.

   Todas heredan los tokens de la plantilla, así que una composición se ve
   distinta en cada diseño sin escribir una línea más: el día toma la letra de
   los nombres y los filetes el color de acento.
   --------------------------------------------------------------------------- */
.fecha-bloque{
  margin-top:22px;color:var(--tpl-accent-soft);
  font-family:var(--tpl-body-font);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  /* CENTRADO POR MÁRGENES, no por el padre.
     El bloque es una caja de nivel bloque dentro del .wrap del encabezado, que
     centra con text-align. Eso centra texto, no cajas: en cuanto una
     composición se pone un ancho propio —"tres columnas" con sus 420px, "entre
     dos filetes" con 360— la caja se iba a la izquierda y la fecha quedaba
     descuadrada respecto al nombre y al rótulo. En el panel no se veía porque
     ahí el contenedor sí es flex y las centraba él.
     width:fit-content para que el margen automático tenga de dónde repartir. */
  width:fit-content;max-width:100%;margin-inline:auto;
}
/* El día: la pieza que manda. Toma la letra de los TÍTULOS, no la del cuerpo —
   es un número que hace de ornamento, no de dato. */
.fecha-bloque .fb-dia{
  font-family:var(--tpl-display-font),Georgia,serif;
  font-weight:var(--tpl-display-weight,600);
  font-size:clamp(44px,12vw,68px);line-height:.92;
  color:var(--tpl-title-color,var(--tpl-ink));
}
.fecha-bloque .fb-mes,
.fecha-bloque .fb-anio,
.fecha-bloque .fb-lado{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  font-weight:600;white-space:nowrap;
}
.fecha-bloque .fb-anio{letter-spacing:.24em}

/* Día en grande: mes encima, año debajo. La más sobria de las seis. */
.fecha-bloque-columna{gap:6px}

/* Con filetes a los lados: el día de la semana y la hora flanquean al día, y
   un filete los separa. Los filetes son los mismos hilos afilados del resto de
   la invitación, no una línea plana. */
.fecha-bloque-reglas .fb-fila{
  display:flex;align-items:center;justify-content:center;gap:16px;
  width:100%;max-width:420px;
}
.fecha-bloque-reglas .fb-lado{flex:1;position:relative}
.fecha-bloque-reglas .fb-lado:first-child{text-align:right}
.fecha-bloque-reglas .fb-lado:last-child{text-align:left}
.fecha-bloque-reglas .fb-lado::after{
  content:"";position:absolute;top:-12px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--tpl-accent),transparent);
}

/* En una línea: "DOM · 25 · FEB", con el día más grande que los lados. */
.fecha-bloque-linea{flex-direction:row;align-items:baseline;gap:14px}
.fecha-bloque-linea .fb-dia{font-size:clamp(34px,9vw,50px)}
.fecha-bloque-linea .fb-punto{color:var(--tpl-accent);font-size:15px}

/* Dos columnas: la fecha de un lado, la hora del otro, separadas por un filete
   vertical. Es la composición de las invitaciones de boda impresas. */
.fecha-bloque-partido{
  flex-direction:row;align-items:center;justify-content:center;gap:22px;
}
.fecha-bloque-partido .fb-col{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding-right:22px;position:relative;
}
.fecha-bloque-partido .fb-col::after{
  content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,transparent,var(--tpl-accent),transparent);
}
.fecha-bloque-partido .fb-der{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;
}
.fecha-bloque-partido .fb-regla{
  display:block;width:100%;height:1px;
  background:linear-gradient(90deg,var(--tpl-accent),transparent);
}

/* Dentro de un recuadro de línea, sin relleno: papelería formal. */
.fecha-bloque-marco{
  border:1px solid var(--tpl-line,rgba(0,0,0,.2));
  border-radius:var(--tpl-radius,12px);
  padding:16px 30px;gap:6px;
}

/* Día de la semana arriba del número, mes y año debajo. */
.fecha-bloque-arco{gap:8px}
.fecha-bloque-arco .fb-mes{letter-spacing:.26em}


/* ---------- La composición en la pantalla de bienvenida ----------
   Es la misma pieza, en un sitio más apretado: la tarjeta de bienvenida mide
   menos que la portada de adentro y el bloque tiene que caber sin empujar al
   botón fuera de la pantalla. */
.entry-gate-fecha-bloque{margin-top:14px}
.entry-gate-fecha-bloque .fecha-bloque{margin-top:0}
.entry-gate-fecha-bloque .fecha-bloque .fb-dia{font-size:clamp(36px,9vw,52px)}
.entry-gate-fecha-bloque .fecha-bloque-linea .fb-dia{font-size:clamp(28px,7vw,40px)}
.entry-gate-fecha-bloque .fecha-bloque-marco{padding:12px 22px}
.entry-gate-fecha-bloque .fecha-bloque-reglas .fb-fila{max-width:320px;gap:12px}

/* Sobre la foto del cliente, el texto de esta pantalla va en blanco —igual que
   el nombre y el rótulo—, así que la composición lo sigue. */
.entry-gate-sheet.con-foto .fecha-bloque,
.entry-gate-sheet.con-foto .fecha-bloque .fb-dia{
  color:#fff;text-shadow:0 2px 14px rgba(10,8,7,.55);
}
.entry-gate-sheet.con-foto .fecha-bloque .fb-lado::after,
.entry-gate-sheet.con-foto .fecha-bloque .fb-col::after,
.entry-gate-sheet.con-foto .fecha-bloque .fb-regla{
  background:rgba(255,255,255,.55);
}

/* ---------- Las ocho composiciones nuevas ----------
   Mismo principio que las seis primeras: nada de figuras rellenas ni rotadas
   —esas ya se probaron y se veían mal—; aquí lo que dibuja son filetes, una
   cinta del color de acento y un círculo de línea fina. */

/* Mes sobre una cinta del color de acento, día grande debajo. */
.fecha-bloque .fb-cinta{
  display:inline-block;
  background:var(--tpl-accent);color:var(--tpl-on-accent,#fff);
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  padding:5px 16px;border-radius:99px;white-space:nowrap;
}
.fecha-bloque-cinta{gap:10px}

/* El día dentro de un círculo de línea. El círculo es un borde, no un relleno:
   relleno se come el papel de la plantilla y pelea con la lámina. */
.fecha-bloque .fb-circulo{
  display:flex;align-items:center;justify-content:center;
  width:clamp(84px,22vw,108px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--tpl-accent);
}
.fecha-bloque-circulo{gap:9px}
.fecha-bloque-circulo .fb-dia{font-size:clamp(34px,9vw,46px)}

/* Hoja de calendario: cinta con el mes arriba, día enorme y pie con el día de
   la semana, todo dentro de un recuadro. */
.fecha-bloque-calendario{
  border:1px solid var(--tpl-line,rgba(0,0,0,.2));
  border-radius:var(--tpl-radius,12px);
  padding:0 0 12px;overflow:hidden;gap:8px;min-width:184px;
}
.fecha-bloque-calendario .fb-cinta{
  /* align-self y no width:100%: el bloque centra a sus hijos, así que un
     inline-block al 100% se queda al ancho del contenido más ancho y la cinta
     no llegaba a las orillas de la tarjeta. */
  border-radius:0;align-self:stretch;padding:7px 16px;text-align:center;
}
.fecha-bloque-calendario .fb-pie{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
}

/* Día en números romanos. Llevan más aire entre letras que una cifra. */
.fecha-bloque-romanos{gap:8px}
.fecha-bloque .fb-romano{letter-spacing:.06em;font-size:clamp(38px,10vw,56px)}

/* Tres columnas: día de la semana, día y mes, separadas por filetes
   verticales, y debajo el año o la hora según la variante elegida.

   Las dos variantes comparten TODO el dibujo; lo único que cambia es qué
   renglón va abajo, y eso lo decide la plantilla, no el CSS. Por eso los
   selectores se escriben una sola vez con las dos clases: duplicarlos a mano
   ya se hizo mal una vez y dejó ".fb-lado" sin su ":first-child", con lo que
   los tres textos se alinearon a la derecha y los filetes desaparecieron. */
.fecha-bloque-tres,
.fecha-bloque-tres-hora{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  column-gap:16px;row-gap:9px;width:min(430px,100%);
}
/* Las columnas de los lados tienen que poder encogerse: en una rejilla, una
   columna 1fr no baja de lo que mide su contenido salvo que se le diga. */
.fecha-bloque-tres > *,
.fecha-bloque-tres-hora > *{min-width:0}

.fecha-bloque-tres .fb-lado,
.fecha-bloque-tres-hora .fb-lado{position:relative}
.fecha-bloque-tres .fb-lado:first-child,
.fecha-bloque-tres-hora .fb-lado:first-child{text-align:right}
.fecha-bloque-tres .fb-lado:nth-child(3),
.fecha-bloque-tres-hora .fb-lado:nth-child(3){text-align:left}

/* Los filetes verticales, afilados por los extremos como el resto. */
.fecha-bloque-tres .fb-lado:first-child::after,
.fecha-bloque-tres-hora .fb-lado:first-child::after,
.fecha-bloque-tres .fb-lado:nth-child(3)::before,
.fecha-bloque-tres-hora .fb-lado:nth-child(3)::before{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:1px;height:30px;
  background:linear-gradient(180deg,transparent,var(--tpl-accent),transparent);
}
.fecha-bloque-tres .fb-lado:first-child::after,
.fecha-bloque-tres-hora .fb-lado:first-child::after{right:-9px}
.fecha-bloque-tres .fb-lado:nth-child(3)::before,
.fecha-bloque-tres-hora .fb-lado:nth-child(3)::before{left:-9px}

/* El año o la hora, debajo y cruzando las tres columnas. Más chico que el
   resto: es el dato de apoyo, no el que se memoriza. */
.fecha-bloque-tres .fb-hora,
.fecha-bloque-tres-hora .fb-hora{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
}
.fecha-bloque .fb-ancho{grid-column:1/-1;text-align:center}

/* En pantalla angosta se aprieta el espaciado antes que nada: el mes va SIN el
   año, así que entero cabe hasta en el teléfono más estrecho. */
@media(max-width:430px){
  .fecha-bloque-tres,
  .fecha-bloque-tres-hora{column-gap:11px}
  .fecha-bloque-tres .fb-lado,
  .fecha-bloque-tres-hora .fb-lado{font-size:9.5px;letter-spacing:.13em}
}

/* Con la hora en la cursiva de la plantilla: "a las 6:00 pm". */
.fecha-bloque-hora{gap:6px}
.fecha-bloque .fb-script{
  font-family:var(--tpl-script-font),cursive;
  font-size:clamp(17px,4.4vw,21px);letter-spacing:.01em;text-transform:none;
  color:var(--tpl-accent-soft);margin-top:2px;
}

/* Números con el día en grande entre rayas. */
.fecha-bloque-raya{flex-direction:row;align-items:baseline;gap:12px}
.fecha-bloque-raya .fb-dia{font-size:clamp(38px,10vw,56px)}
.fecha-bloque-raya .fb-punto{color:var(--tpl-accent);font-size:13px}

/* Entre dos filetes que cruzan todo el ancho. El más sobrio de todos. */
.fecha-bloque-doblefilete{gap:12px;width:min(360px,100%)}
.fecha-bloque-doblefilete .fb-regla{
  display:block;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--tpl-accent),transparent);
}

/* Partes quitadas (content.fechaPiezas, ver lib/fechas.js). La pieza vacía se
   va, y con ella el punto, la raya o el filete que la separaba: si no, «· 14 ·»
   se queda con un punto colgando. El círculo sin día tampoco tiene sentido.
   Los filetes (.fb-regla) son vacíos de nacimiento: no cuentan como pieza. */
.fecha-bloque span:empty:not(.fb-regla),
.fecha-bloque .fb-punto:has(+ span:empty:not(.fb-regla)),
.fecha-bloque span:empty:not(.fb-regla) + .fb-punto,
.fecha-bloque .fb-regla:has(+ span:empty:not(.fb-regla)),
.fecha-bloque span:empty:not(.fb-regla) + .fb-regla,
.fecha-bloque .fb-circulo:has(.fb-dia:empty){display:none}