/* Estilos de la aplicación */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format("woff2");
}
:root {
  --crema: #F2F6EE;
  --nude: #E8CFC6;
  --salmon: #F5EBD0;
  --salmon-fuerte: #EADCB8;
  --salvia: #A7B89F;
  --tostado: #5C6B57;
  --carbon: #2B4426;
  --blanco: #fff;
  --borde: #DAE2D3;
  --rojo: #9E3B32;
  --enlace: #33502D;
  --radio: 5px;
  --titulos: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --texto: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Estos colores iban antes escritos en cada regla. Todos salen de los tres de la marca —el fondo
     (--crema), el texto (--carbon) y los botones (--salmon)— o son fijos. Un nombre que acaba en
     número es ese color con esa opacidad, en tanto por ciento. */

  /* Del fondo */
  --campo: #98A390;
  --crema-fuerte: #DDE8D6;
  --etiqueta: #E6EDE2;
  --secundario-claro: #FBFDFA;
  --secundario-medio: #EAF0E5;
  --secundario-oscuro: #D0DAC8;
  --secundario-borde: #AFBBA6;
  --resumen-oscuro: #D5DECD;
  --resumen-borde: #BAC6B1;
  --seccion-medio: #F4F8F1;
  --seccion-oscuro: #E4ECDD;
  --seccion-borde: #C3CEBA;
  --progreso-claro: #B9CDB1;
  --progreso-oscuro: #8FAA85;

  /* Del texto */
  --carbon-claro: #5B7D52;
  --carbon-medio: #3B5C34;
  --carbon-oscuro: #223D1E;
  --carbon-borde: #1B3217;
  --sombra-40: rgba(70, 90, 60, .4);
  --sombra-45: rgba(70, 90, 60, .45);
  --sombra-50: rgba(70, 90, 60, .5);
  --sombra-55: rgba(70, 90, 60, .55);
  --sombra-60: rgba(70, 90, 60, .6);
  --sombra-oscura-50: rgba(30, 55, 25, .5);
  --sombra-oscura-55: rgba(30, 55, 25, .55);
  --sombra-oscura-60: rgba(30, 55, 25, .6);
  --sombra-oscura-65: rgba(30, 55, 25, .65);
  --sombra-emergente-60: rgba(20, 40, 16, .6);
  --telon-55: rgba(30, 50, 26, .55);
  --penumbra-0: rgba(20, 35, 17, 0);
  --penumbra-50: rgba(20, 35, 17, .5);
  --penumbra-60: rgba(20, 35, 17, .6);

  /* De los botones */
  --boton-claro: #FDF8EA;
  --boton-oscuro: #E6D6AE;
  --boton-borde: #CDBD94;
  --boton-sombra-15: rgba(110, 90, 30, .15);
  --boton-sombra-25: rgba(110, 90, 30, .25);
  --boton-sombra-35: rgba(110, 90, 30, .35);
  --boton-sombra-50: rgba(110, 90, 30, .5);
  --boton-halo-60: rgba(150, 130, 85, .6);
  --boton-halo-65: rgba(150, 130, 85, .65);
  --destacada-clara: #FDF7E8;
  --destacada-media: #F5EACF;
  --destacada-oscura: #E8D9B3;
  --destacada-borde: #D3C49C;
  --dia-boda: #EBDDB9;
  --acento: #B99A4B;

  /* El botón principal. De fábrica es del color del tinte (--salmon), con la letra del texto y los
     brillos blancos. Una marca puede darle su propia letra: entonces su hoja trae el color del
     botón tal cual (--boton-medio), esa letra (--sobre-boton) y los brillos que la dejan leerse, y
     las --boton-… de arriba pasan a salir del color del botón. Los dos últimos son el cambio de
     brillo al pasar el ratón por encima y al pulsar. */
  --boton-medio: var(--salmon);
  --sobre-boton: var(--carbon);
  --boton-brillo: var(--blanco-70);
  --boton-reflejo: var(--blanco-39);
  --boton-filo: var(--blanco-75);
  --boton-relieve: var(--blanco-45);
  --boton-realce: brightness(1.05) saturate(1.05);
  --boton-pulsado: brightness(.97);

  /* Lo que una marca puede cambiar en todos los botones: sus esquinas, las mayúsculas y el estilo
     liso (de un color plano). Con el estilo liso, los brillos y el filo de luz se quedan sin
     tamaño, la sombra que levanta el botón sólo sale al pasar el ratón y los extremos de cada
     degradado valen lo que su centro (el botón oscuro de la boda destacada tiene aquí los suyos). */
  --radio-boton: var(--radio);
  --boton-mayusculas: none;
  --boton-espaciado: normal;
  --boton-forma-brillos: 100% 100%, 260% 100%;
  --boton-forma-filo: inset 0 1px 0;
  --boton-forma-halo: 0 8px 16px -6px;
  --boton-fuerte-claro: var(--carbon-claro);
  --boton-fuerte-oscuro: var(--carbon-oscuro);

  /* El tinte: lo que se pinta con el color del botón sin ser un botón (el día de la boda, los
     avisos de tareas, la opción elegida, la boda destacada) y lleva dentro la letra del texto. De
     fábrica vale lo mismo que el botón; con letra propia en el botón, se queda como estaba. */
  --tinte-claro: var(--boton-claro);
  --tinte-oscuro: var(--boton-oscuro);
  --tinte-borde: var(--boton-borde);
  --tinte-sombra-15: var(--boton-sombra-15);
  --tinte-sombra-25: var(--boton-sombra-25);
  --tinte-sombra-50: var(--boton-sombra-50);
  --tinte-halo-60: var(--boton-halo-60);
  --tinte-halo-65: var(--boton-halo-65);

  /* Fijos: no cambian con la marca */
  --blanco-0: rgba(255, 255, 255, 0);
  --blanco-15: rgba(255, 255, 255, .15);
  --blanco-22: rgba(255, 255, 255, .22);
  --blanco-28: rgba(255, 255, 255, .28);
  --blanco-35: rgba(255, 255, 255, .35);
  --blanco-39: rgba(255, 255, 255, .39);
  --blanco-45: rgba(255, 255, 255, .45);
  --blanco-50: rgba(255, 255, 255, .5);
  --blanco-55: rgba(255, 255, 255, .55);
  --blanco-60: rgba(255, 255, 255, .6);
  --blanco-70: rgba(255, 255, 255, .7);
  --blanco-75: rgba(255, 255, 255, .75);
  --blanco-90: rgba(255, 255, 255, .9);
  --negro-10: rgba(0, 0, 0, .1);
  --negro-12: rgba(0, 0, 0, .12);
  --negro-14: rgba(0, 0, 0, .14);
  --negro-30: rgba(0, 0, 0, .3);
  --negro-45: rgba(0, 0, 0, .45);
  --sombra-boda-45: rgba(90, 60, 50, .45);
  --error-fondo: #FBE9E6;
  --error-texto: #6E241D;
  --peligro-claro: #FFFBFA;
  --peligro-medio: #FAECE9;
  --peligro-oscuro: #EFD3CE;
  --peligro-borde: #C4756C;
  --rojo-18: rgba(158, 59, 50, .18);
  --rojo-35: rgba(158, 59, 50, .35);
  --rojo-40: rgba(158, 59, 50, .4);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--carbon);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--enlace); }
a:hover { color: var(--carbon); }

:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; }

h1 {
  font-family: var(--titulos);
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 12px;
}

p { margin: 0 0 16px; }

/* Cabecera */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}
.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--enlace);
  text-decoration: none;
  font-family: var(--titulos);
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 0;
}
.marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera form { margin: 0; flex: none; }

/* Contenido */
.contenido { margin: 0 auto; padding: 32px 16px 56px; }
.contenido.estrecho { max-width: 460px; }

.entrada { color: var(--tostado); margin-bottom: 24px; }
.nota { color: var(--tostado); font-size: .9rem; }
.opcional { color: var(--tostado); font-weight: 400; }
.miga { font-size: .95rem; margin-bottom: 20px; }
.pie-formulario { margin: 20px 0 0; }

/* Formularios */
.formulario { display: flex; flex-direction: column; }
.formulario label { font-weight: 600; margin: 14px 0 6px; }
.formulario label:first-of-type { margin-top: 0; }
.formulario input[type="email"],
.formulario input[type="password"],
.formulario input[type="text"],
.formulario input[type="date"],
.formulario input[type="time"],
.formulario select,
.miembro select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--campo);
  border-radius: var(--radio);
}
.formulario .nota { margin: 6px 0 0; }
.formulario .boton { margin-top: 24px; }

/* Botones */
.boton {
  display: inline-block;
  min-height: 50px;
  padding: 13px 24px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: var(--boton-mayusculas);
  letter-spacing: var(--boton-espaciado);
  color: var(--sobre-boton);
  background:
    radial-gradient(140% 90% at 50% -10%, var(--boton-brillo) 0%, var(--blanco-0) 62%),
    linear-gradient(112deg, var(--blanco-0) 32%, var(--boton-reflejo) 46%, var(--blanco-0) 60%),
    linear-gradient(180deg, var(--boton-claro) 0%, var(--boton-medio) 45%, var(--boton-oscuro) 100%);
  border: 1px solid var(--boton-borde);
  border-radius: var(--radio-boton);
  box-shadow: var(--boton-forma-filo) var(--boton-filo), 0 1px 2px var(--boton-sombra-25), var(--boton-forma-halo) var(--boton-halo-60);
  transition: box-shadow .15s, transform .15s, filter .15s;
  text-shadow: 0 1px 0 var(--boton-relieve);
  cursor: pointer;
}
.boton:hover { color: var(--sobre-boton); filter: var(--boton-realce); box-shadow: var(--boton-forma-filo) var(--boton-filo), 0 1px 2px var(--boton-sombra-25), 0 12px 20px -6px var(--boton-halo-65); }
.boton:active { transform: translateY(1px); filter: var(--boton-pulsado); box-shadow: inset 0 2px 5px var(--boton-sombra-35); }
.boton.secundario {
  color: var(--carbon);
  background:
    radial-gradient(140% 90% at 50% -10%, var(--blanco-90) 0%, var(--blanco-0) 62%),
    linear-gradient(112deg, var(--blanco-0) 32%, var(--blanco-50) 46%, var(--blanco-0) 60%),
    linear-gradient(180deg, var(--secundario-claro) 0%, var(--secundario-medio) 45%, var(--secundario-oscuro) 100%);
  border-color: var(--secundario-borde);
  box-shadow: var(--boton-forma-filo) var(--blanco), 0 1px 2px var(--negro-14), var(--boton-forma-halo) var(--sombra-40);
  text-shadow: 0 1px 0 var(--blanco-45);
}
.boton.secundario:hover { color: var(--carbon); box-shadow: var(--boton-forma-filo) var(--blanco), 0 1px 2px var(--negro-14), 0 12px 20px -6px var(--sombra-45); }
.enlace {
  padding: 8px 4px;
  font: inherit;
  font-size: .95rem;
  color: var(--enlace);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* Avisos */
.aviso {
  padding: 14px 16px;
  margin: 0 0 20px;
  border-radius: var(--radio);
  background: var(--crema-fuerte);
  border-left: 4px solid var(--salvia);
}
.aviso.error { background: var(--error-fondo); border-left-color: var(--rojo); color: var(--error-texto); }
.aviso p { margin: 0; }
.aviso p + p { margin-top: 6px; }

/* Tarjetas */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px 20px;
  margin: 20px 0;
}
.cuenta-atras { text-align: center; }
.cuenta-atras .numero {
  font-family: var(--titulos);
  font-size: 4rem;
  line-height: 1;
  margin: 0 0 4px;
}
.cuenta-atras .destacado { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; }
.cuenta-atras p:last-child { margin-bottom: 0; }

/* Ajustes */
h2 {
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 12px;
}
h3 { font-family: var(--titulos); font-size: 1rem; margin: 24px 0 10px; }
.cabecera nav { display: flex; align-items: center; gap: 14px; flex: none; }
.cabecera nav a { font-size: .95rem; }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta form + h3, .tarjeta p + h3 { border-top: 1px solid var(--borde); padding-top: 22px; }
.dato { font-weight: 600; overflow-wrap: anywhere; }
.fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fila form { margin: 0; }
.boton.peligro {
  color: var(--rojo);
  background:
    radial-gradient(140% 90% at 50% -10%, var(--blanco-90) 0%, var(--blanco-0) 62%),
    linear-gradient(112deg, var(--blanco-0) 32%, var(--blanco-50) 46%, var(--blanco-0) 60%),
    linear-gradient(180deg, var(--peligro-claro) 0%, var(--peligro-medio) 45%, var(--peligro-oscuro) 100%);
  border-color: var(--peligro-borde);
  box-shadow: var(--boton-forma-filo) var(--blanco), 0 1px 2px var(--rojo-18), var(--boton-forma-halo) var(--rojo-35);
  text-shadow: none;
}
.boton.peligro:hover { color: var(--rojo); box-shadow: var(--boton-forma-filo) var(--blanco), 0 1px 2px var(--rojo-18), 0 12px 20px -6px var(--rojo-40); }
.boton.pequeno { min-height: 42px; padding: 9px 16px; font-size: .95rem; }
.formulario .casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 16px; }
.formulario .casilla input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Personas con acceso */
.miembros { list-style: none; margin: 0 0 8px; padding: 0; }
.miembro { padding: 14px 0; border-top: 1px solid var(--borde); }
.miembro:first-child { border-top: 0; padding-top: 0; }
.miembro .dato { display: block; margin-bottom: 4px; }
.miembro form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.miembro select { flex: 1 1 170px; width: auto; min-height: 42px; padding: 8px 10px; }
.niveles { margin: 0 0 16px; padding: 0; list-style: none; font-size: .9rem; color: var(--tostado); }
.niveles li { margin-bottom: 6px; }
.niveles strong { color: var(--carbon); }

/* Cuenta atrás en vivo */
.reloj { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; }
.reloj[hidden] { display: none; }
.cifra { background: var(--crema); border-radius: var(--radio); padding: 14px 4px 10px; }
.cuenta-atras .cifra .numero { display: block; font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums; }
.cifra .rotulo { display: block; margin-top: 4px; font-size: .8rem; color: var(--tostado); }
@media (min-width: 420px) { .cuenta-atras .cifra .numero { font-size: 2.8rem; } }

/* Selector de boda (cuando la cuenta tiene acceso a varias) */
.selector-boda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.selector-boda label { font-size: .9rem; color: var(--tostado); flex: 1 0 100%; }
.selector-boda select {
  flex: 1 1 200px;
  min-height: 42px;
  padding: 8px 10px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--campo);
  border-radius: var(--radio);
}

/* Mis bodas: panel de quien organiza varias */
.contenido.ancho { max-width: 1120px; }
.titulo-bodas { margin-bottom: 20px; }
.titulo-bodas h1 { margin: 0; }

.resumen { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 28px; padding: 0; }
@media (min-width: 640px) { .resumen { grid-template-columns: repeat(4, 1fr); } }
.resumen a {
  display: block;
  height: 100%;
  padding: 14px 14px 12px;
  color: var(--carbon);
  text-decoration: none;
  background:
    radial-gradient(140% 90% at 50% -10%, var(--blanco-90) 0%, var(--blanco-0) 62%),
    linear-gradient(180deg, var(--secundario-claro) 0%, var(--secundario-medio) 45%, var(--resumen-oscuro) 100%);
  border: 1px solid var(--resumen-borde);
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 var(--blanco), 0 1px 2px var(--negro-12), 0 8px 16px -8px var(--sombra-40);
  transition: box-shadow .15s, transform .15s;
}
.resumen a:hover { box-shadow: inset 0 1px 0 var(--blanco), 0 1px 2px var(--negro-12), 0 12px 20px -8px var(--sombra-50); }
.resumen a:active { transform: translateY(1px); }
.resumen a.activo {
  background:
    radial-gradient(140% 90% at 50% -10%, var(--blanco-70) 0%, var(--blanco-0) 62%),
    linear-gradient(112deg, var(--blanco-0) 32%, var(--blanco-35) 46%, var(--blanco-0) 60%),
    linear-gradient(180deg, var(--tinte-claro) 0%, var(--salmon) 45%, var(--tinte-oscuro) 100%);
  border-color: var(--tinte-borde);
  box-shadow: inset 0 1px 0 var(--blanco-75), 0 1px 2px var(--tinte-sombra-25), 0 8px 16px -6px var(--tinte-halo-60);
}
.vacio { text-align: center; color: var(--tostado); }
.resumen .numero { display: block; font-size: 1.9rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.resumen .rotulo { display: block; font-size: .85rem; line-height: 1.3; margin-top: 2px; }

.rejilla-bodas { list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 24px; padding: 0; }
@media (min-width: 640px) { .rejilla-bodas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rejilla-bodas { grid-template-columns: repeat(3, 1fr); } }

.boda { margin: 0; padding: 20px; display: flex; }
.boda form { display: flex; flex-direction: column; width: 100%; margin: 0; }
.boda h2 { margin: 0 0 14px; overflow-wrap: anywhere; }
.boda .nota { margin: 0; }
.boda .destacado { font-size: 1.15rem; font-weight: 600; margin: 0 0 6px; }
.boda .pie-boda { margin-top: auto; padding-top: 18px; flex-wrap: nowrap; }
.etiqueta {
  align-self: flex-start;
  margin: 0 0 10px;
  padding: 5px 10px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--etiqueta);
  border-radius: var(--radio);
}

.boda .reloj { margin-bottom: 10px; gap: 6px; }
.boda .cifra { padding: 10px 2px 8px; text-align: center; }
.boda .cifra .numero { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* La más cercana ocupa toda la fila y va en el color de la marca */
.boda.grande {
  background:
    radial-gradient(90% 120% at 12% -10%, var(--blanco-60) 0%, var(--blanco-0) 55%),
    linear-gradient(118deg, var(--blanco-0) 38%, var(--blanco-22) 50%, var(--blanco-0) 62%),
    linear-gradient(165deg, var(--destacada-clara) 0%, var(--destacada-media) 48%, var(--destacada-oscura) 100%);
  border-color: var(--destacada-borde);
  box-shadow: inset 0 1px 0 var(--blanco-70), 0 2px 4px var(--tinte-sombra-15), 0 14px 28px -12px var(--tinte-halo-60);
  padding: 26px 22px;
}
@media (min-width: 640px) { .boda.grande { grid-column: 1 / -1; } }
.boda.grande h2 { font-size: 1.7rem; }
.boda.grande .etiqueta { background: var(--blanco); }
.boda.grande .cifra { background: var(--blanco-55); padding: 16px 4px 12px; }
.boda.grande .cifra .numero { font-size: 2.4rem; }
.boda.grande .cifra .rotulo, .boda.grande .nota { color: var(--carbon); }
.boda.grande .reloj { max-width: 520px; }
.boda.grande .boton {
  color: var(--blanco);
  background:
    radial-gradient(140% 90% at 50% -10%, var(--blanco-28) 0%, var(--blanco-0) 62%),
    linear-gradient(112deg, var(--blanco-0) 32%, var(--blanco-15) 46%, var(--blanco-0) 60%),
    linear-gradient(180deg, var(--boton-fuerte-claro) 0%, var(--carbon-medio) 45%, var(--boton-fuerte-oscuro) 100%);
  border-color: var(--carbon-borde);
  box-shadow: var(--boton-forma-filo) var(--blanco-35), 0 1px 2px var(--negro-30), var(--boton-forma-halo) var(--sombra-oscura-60);
  text-shadow: 0 -1px 0 var(--negro-45);
}
.boda.grande .boton:hover { color: var(--blanco); box-shadow: var(--boton-forma-filo) var(--blanco-35), 0 1px 2px var(--negro-30), 0 12px 20px -6px var(--sombra-oscura-65); }
@media (min-width: 640px) { .boda.grande .cifra .numero { font-size: 3.2rem; } }

.celebradas { margin: 8px 0 0; }
.celebradas summary { cursor: pointer; font-weight: 600; padding: 10px 0; margin-bottom: 8px; }

.tarjeta ul { margin: 0 0 16px; padding-left: 20px; }
.tarjeta ul.miembros, .tarjeta ul.niveles { padding-left: 0; }
.miembro .enlace { padding: 8px 0; }

/* El cursor de mano clásico sobre todo lo que se puede pulsar */
a, button, summary, select, .boton, label.casilla, input[type="checkbox"], input[type="date"], input[type="time"] {
  cursor: pointer;
}

/* Movimiento: los botones flotan al pasar por encima y su reflejo se desliza */
.boton, .boton.secundario, .boton.peligro, .boda.grande .boton, .resumen a.activo {
  background-size: 100% 100%, 260% 100%, 100% 100%;
  background-position: 0 0, 62% 0, 0 0;
  background-repeat: no-repeat;
}
/* Los brillos de los botones tienen el tamaño que diga la marca: con el estilo liso, ninguno */
.boton, .boton.secundario, .boton.peligro, .boda.grande .boton { background-size: var(--boton-forma-brillos), 100% 100%; }
.boton { transition: box-shadow .2s, transform .2s, filter .2s, background-position .6s ease; }
.boton:hover, .boton.secundario:hover, .boton.peligro:hover, .boda.grande .boton:hover {
  transform: translateY(-3px);
  background-position: 0 0, 18% 0, 0 0;
}
.boton:active, .boton.secundario:active, .boton.peligro:active, .boda.grande .boton:active { transform: translateY(1px); }

.resumen a { transition: box-shadow .2s, transform .2s, background-position .6s ease; }
.resumen a:hover { transform: translateY(-3px); }
.resumen a.activo:hover { background-position: 0 0, 18% 0, 0 0; }
.resumen a:active { transform: translateY(1px); }

.boda { transition: transform .25s, box-shadow .25s; }
.boda:hover { transform: translateY(-4px); box-shadow: 0 14px 26px -14px var(--sombra-boda-45); }
.boda.grande:hover { box-shadow: inset 0 1px 0 var(--blanco-70), 0 2px 4px var(--tinte-sombra-15), 0 22px 34px -14px var(--tinte-halo-65); }

.cabecera nav a, .miga a, .pie-formulario a { transition: color .2s; }

/* Entrada suave del contenido al abrir cada pantalla */
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.contenido > * { animation: entrar .45s ease backwards; }
.contenido > :nth-child(2) { animation-delay: .05s; }
.contenido > :nth-child(3) { animation-delay: .1s; }
.contenido > :nth-child(n+4) { animation-delay: .15s; }
.rejilla-bodas > li { animation: entrar .45s ease backwards; }
.rejilla-bodas > li:nth-child(2) { animation-delay: .06s; }
.rejilla-bodas > li:nth-child(3) { animation-delay: .12s; }
.rejilla-bodas > li:nth-child(4) { animation-delay: .18s; }
.rejilla-bodas > li:nth-child(n+5) { animation-delay: .24s; }

/* Los segundos dan un pequeño latido en cada cambio */
@keyframes tic { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
.numero.tic { animation: tic .35s ease-out; }
.reloj .numero { display: block; }

/* Quien tiene el movimiento reducido en su sistema no ve animaciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .boton:hover, .resumen a:hover, .boda:hover { transform: none; }
}

/* Pie con los enlaces legales */
.pie { padding: 20px 16px 28px; border-top: 1px solid var(--borde); text-align: center; }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.pie a { font-size: .85rem; color: var(--tostado); }
.pie a:hover { color: var(--carbon); }

/* Páginas legales */
.contenido.medio { max-width: 720px; }
.legal h2 { margin: 32px 0 10px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }

.formulario select {
  appearance: auto;
}
.formulario .casilla span { flex: 1; }

/* Publicidad: banner fijo en el back office de cada boda. Una imagen de extremo a extremo que se queda
   arriba aunque se baje por la página. Si hay varios, se turnan con un fundido. */
.franja-anuncios {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--borde);
  box-shadow: 0 8px 18px -10px var(--sombra-oscura-55);
}
.carrusel { position: relative; height: clamp(110px, 15vw, 260px); overflow: hidden; }
.anuncio {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease-in-out;
}
.anuncio.activo { z-index: 2; opacity: 1; pointer-events: auto; }
/* La foto que sale se queda entera debajo de la que entra mientras dura el fundido */
.anuncio.sale { z-index: 1; opacity: 1; transition: none; }
.anuncio img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anuncio picture { display: block; width: 100%; height: 100%; }
.rotulo-publi { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tostado); }
.anuncio .rotulo-publi {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  color: var(--blanco);
  background: var(--penumbra-60);
  border-radius: 3px;
}
.miniatura-banner { display: block; width: 100%; max-width: 420px; height: auto; margin: 8px 0; border: 1px solid var(--borde); border-radius: var(--radio); }

/* Aviso emergente */
.emergente {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--telon-55);
  animation: entrar .3s ease backwards;
}
.emergente-caja {
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow: auto;
  padding: 24px 22px;
  text-align: center;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 24px 50px -16px var(--sombra-emergente-60);
}
.emergente-caja img { max-width: 160px; max-height: 160px; margin: 8px auto 12px; display: block; }
.emergente-caja .rotulo-publi { margin-bottom: 6px; }
.emergente-caja .botones { justify-content: center; margin: 18px 0 0; }

/* Panel máster */
.resumen.estatico { grid-template-columns: repeat(3, 1fr); }
.resumen.estatico li { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.tabla { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.tabla th, .tabla td { text-align: left; padding: 9px 4px; border-bottom: 1px solid var(--borde); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.miembro .nota { display: block; }
.formulario input[type="file"] { font: inherit; padding: 8px 0; }
.provincias { margin: 22px 0 4px; padding: 14px 14px 6px; border: 1px solid var(--borde); border-radius: var(--radio); }
.provincias legend { padding: 0 6px; font-weight: 600; }
.provincias .casilla { margin-top: 8px; }
.rejilla-provincias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; margin-top: 8px; }
@media (min-width: 640px) { .rejilla-provincias { grid-template-columns: repeat(3, 1fr); } }

/* Cabecera en pantallas estrechas: el menú baja a una segunda línea para que quepan todos los enlaces */
.hamburguesa { display: none; }
@media (max-width: 760px) {
  .cabecera { flex-wrap: wrap; row-gap: 6px; }
  /* Sin JavaScript el menú se queda a la vista en una segunda línea. */
  .cabecera nav { flex: 1 0 100%; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; }

  .cabecera.con-js .hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    background: none;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
  }
  .hamburguesa span { display: block; height: 2px; background: var(--carbon); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .cabecera.abierto .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cabecera.abierto .hamburguesa span:nth-child(2) { opacity: 0; }
  .cabecera.abierto .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Cerrado no ocupa nada; abierto se despliega debajo y empuja la página hacia abajo. */
  .cabecera.con-js nav { display: none; }
  .cabecera.con-js.abierto nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 6px;
    animation: entrar .25s ease backwards;
  }
  .cabecera.con-js nav a, .cabecera.con-js nav .enlace {
    display: block;
    width: 100%;
    padding: 14px 4px;
    font-size: 1.05rem;
    text-align: left;
    text-decoration: none;
    border-top: 1px solid var(--borde);
  }
  .cabecera.con-js nav form { width: 100%; }
}

/* Máster: lista de bodas para marcar una a una */
.lista-marcar { list-style: none; margin: 0 0 8px; padding: 0; }
.lista-marcar li { border-top: 1px solid var(--borde); padding: 4px 0 12px; }
.lista-marcar li:first-child { border-top: 0; }
.lista-marcar .casilla { margin-top: 10px; }
.lista-marcar .nota { display: block; margin: 2px 0 0; }
.formulario input[type="radio"] { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }

/* Panel máster a todo el ancho en escritorio */
.contenido.ancho { max-width: 1400px; }
@media (min-width: 640px) { .contenido.ancho { padding-left: 28px; padding-right: 28px; } }
.dos-columnas > div > .tarjeta:first-child { margin-top: 0; }
@media (min-width: 1000px) {
  .dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .lista-marcar.en-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .lista-marcar.en-columnas li:nth-child(2) { border-top: 0; }
}
@media (min-width: 1300px) {
  .rejilla-bodas { grid-template-columns: repeat(4, 1fr); }
  .lista-marcar.en-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lista-marcar.en-columnas li:nth-child(3) { border-top: 0; }
}

/* Pantalla de instalar */
.icono-movil { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; }
.icono-movil img { flex: none; border-radius: 20%; box-shadow: 0 8px 18px -8px var(--sombra-oscura-50); }
.icono-movil p { margin: 0; }
.pasos { margin: 0; padding-left: 22px; }
.pasos li { margin-bottom: 8px; }

/* Menú: «Instalar en el móvil» con sus dos opciones */
.menu-grupo { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--tostado); }
@media (max-width: 760px) {
  .cabecera.con-js nav .menu-grupo { flex-wrap: wrap; gap: 8px 10px; padding: 14px 4px; font-size: 1.05rem; border-top: 1px solid var(--borde); }
  .cabecera.con-js nav .menu-grupo > span { flex: 1 0 100%; color: var(--carbon); }
  .cabecera.con-js nav .menu-grupo a {
    flex: 1;
    width: auto;
    padding: 11px 8px;
    text-align: center;
    font-weight: 600;
    text-transform: var(--boton-mayusculas);
    letter-spacing: var(--boton-espaciado);
    border: 1px solid var(--secundario-borde);
    border-radius: var(--radio-boton);
    background: linear-gradient(180deg, var(--secundario-claro) 0%, var(--secundario-medio) 45%, var(--secundario-oscuro) 100%);
    box-shadow: var(--boton-forma-filo) var(--blanco), 0 4px 8px -5px var(--sombra-50);
  }
}

/* Con el dedo (móvil y tableta) se ofrecen Android e iPhone; con ratón (ordenador), el escritorio. */
.cabecera nav .solo-escritorio { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cabecera nav .solo-escritorio { display: inline; }
  .cabecera nav .solo-tactil,
  .cabecera.con-js nav .solo-tactil { display: none; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 760px) {
  .cabecera.con-js nav .solo-escritorio { display: block; }
}

/* Menú de la boda: columna a la izquierda en escritorio; plegado bajo un botón en el móvil */
.lateral { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.lateral-lista { padding: 14px 12px 18px; }
.lateral ul { list-style: none; margin: 0 0 14px; padding: 0; }
.lateral a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radio) var(--radio) 0;
  transition: background .2s, border-color .2s, transform .2s;
}
.lateral a:hover { background: var(--crema); transform: translateX(2px); }
.lateral a[aria-current="page"] { background: var(--crema); border-left-color: var(--carbon); font-weight: 600; }
.lateral .cuenta { flex: none; min-width: 26px; padding: 1px 7px; font-size: .8rem; font-weight: 600; text-align: center; background: var(--crema-fuerte); border-radius: var(--radio); }
.lateral-boda { margin: 0 0 10px; padding: 0 12px; font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.lateral-titulo { margin: 0 0 6px; padding: 0 12px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tostado); }
.lateral-boton { display: none; }

@media (max-width: 899px) {
  .lateral.con-js .lateral-boton {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--carbon);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .lateral.con-js .lateral-boton::after { content: "▾"; float: right; transition: transform .2s; }
  .lateral.con-js.abierto .lateral-boton::after { transform: rotate(180deg); }
  .lateral.con-js .lateral-lista { display: none; }
  .lateral.con-js.abierto .lateral-lista { display: block; padding-top: 4px; animation: entrar .25s ease backwards; }
}
@media (min-width: 900px) {
  .con-lateral { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; max-width: 1650px; margin: 0 auto; }
  .lateral { border-bottom: 0; border-right: 1px solid var(--borde); min-height: 60vh; }
  .lateral-lista { padding: 28px 12px 28px 0; }
  .con-lateral .contenido { width: 100%; }
}

/* Tareas */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texto-vencido { color: var(--rojo); font-weight: 600; }
.progreso { margin: 0 0 20px; }
.progreso-barra { height: 12px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-bottom: 6px; }
.progreso-barra span { display: block; height: 100%; background: linear-gradient(180deg, var(--progreso-claro) 0%, var(--progreso-oscuro) 100%); transition: width .4s ease; }
.progreso-barra .ancho-0 { width: 0%; }
.progreso-barra .ancho-5 { width: 5%; }
.progreso-barra .ancho-10 { width: 10%; }
.progreso-barra .ancho-15 { width: 15%; }
.progreso-barra .ancho-20 { width: 20%; }
.progreso-barra .ancho-25 { width: 25%; }
.progreso-barra .ancho-30 { width: 30%; }
.progreso-barra .ancho-35 { width: 35%; }
.progreso-barra .ancho-40 { width: 40%; }
.progreso-barra .ancho-45 { width: 45%; }
.progreso-barra .ancho-50 { width: 50%; }
.progreso-barra .ancho-55 { width: 55%; }
.progreso-barra .ancho-60 { width: 60%; }
.progreso-barra .ancho-65 { width: 65%; }
.progreso-barra .ancho-70 { width: 70%; }
.progreso-barra .ancho-75 { width: 75%; }
.progreso-barra .ancho-80 { width: 80%; }
.progreso-barra .ancho-85 { width: 85%; }
.progreso-barra .ancho-90 { width: 90%; }
.progreso-barra .ancho-95 { width: 95%; }
.progreso-barra .ancho-100 { width: 100%; }

.alta-rapida { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.alta-rapida input[type="text"] { flex: 1 1 220px; }
.alta-rapida input, .filtros select, .formulario textarea {
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--campo);
  border-radius: var(--radio);
}
.formulario textarea { width: 100%; min-height: 0; resize: vertical; }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .9rem; color: var(--tostado); }
.filtros select { min-height: 42px; padding: 8px 10px; max-width: 100%; }

.lista-tareas { list-style: none; margin: 0 0 16px; padding: 0; }
.tarea { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); transition: transform .2s, box-shadow .2s; }
.tarea:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -12px var(--sombra-60); }
.tarjeta .tarea { background: var(--crema); }
.tarea form { margin: 0; flex: none; }
.marca-tarea {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--blanco);
  background: var(--blanco);
  border: 2px solid var(--campo);
  border-radius: var(--radio);
}
button.marca-tarea { cursor: pointer; }
.tarea.hecha .marca-tarea { background: linear-gradient(180deg, var(--carbon-claro) 0%, var(--enlace) 100%); border-color: var(--carbon-oscuro); }
.tarea-cuerpo { flex: 1; min-width: 0; }
.tarea-titulo { display: block; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.tarea-titulo:hover { text-decoration: underline; }
.tarea.hecha .tarea-titulo { text-decoration: line-through; color: var(--tostado); font-weight: 400; }
.tarea .nota { display: block; margin: 2px 0 0; }
.tarea.vencida { border-left: 4px solid var(--rojo); }

/* Calendario de tareas */
.mes-calendario { margin: 0 0 12px; }
.mes-calendario h2 { margin: 0; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 20px; }
.dia-nombre { text-align: center; font-size: .8rem; font-weight: 600; color: var(--tostado); padding: 4px 0; }
.dia { min-height: 64px; padding: 4px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.dia.vacio { background: none; border-color: transparent; }
.dia.hoy { border-color: var(--carbon); border-width: 2px; }
.dia.dia-boda { background: linear-gradient(180deg, var(--tinte-claro) 0%, var(--dia-boda) 100%); border-color: var(--tinte-borde); }
.dia-numero { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 2px; }
.chip { display: block; width: 10px; height: 10px; margin: 0 2px 3px 0; font-size: 0; background: var(--salvia); border-radius: 50%; float: left; }
.chip.vencida { background: var(--rojo); }
.chip.hecha { background: var(--borde); }
.chip.boda-chip { background: var(--acento); }
@media (min-width: 760px) {
  .dia { min-height: 104px; padding: 6px; }
  .chip { float: none; width: auto; height: auto; margin: 0 0 3px; padding: 2px 6px; font-size: .78rem; line-height: 1.3; color: var(--carbon); text-decoration: none; background: var(--crema-fuerte); border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chip.vencida { background: var(--error-fondo); color: var(--error-texto); }
  .chip.hecha { background: var(--crema); color: var(--tostado); text-decoration: line-through; }
  .chip.boda-chip { background: var(--tinte-borde); font-weight: 600; }
}

/* Máster: fotos del carrusel de un banner */
.foto-carrusel { padding: 14px 0 16px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; }
.foto-carrusel .dato { margin: 0 0 4px; }
.formulario .foto-carrusel label { margin-top: 12px; }
@media (min-width: 1000px) { .dos-columnas .fotos-carrusel { margin-top: 26px; } }

/* Menú de la boda: categorías desplegables con sus áreas dentro */
.lateral-grupo { margin: 0 0 2px; }
.lateral-grupo summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 10px 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: 0 var(--radio) var(--radio) 0;
  transition: background .2s;
}
.lateral-grupo summary::-webkit-details-marker { display: none; }
.lateral-grupo summary > span:first-child::before { content: "▸"; display: inline-block; width: 16px; color: var(--tostado); transition: transform .2s; }
.lateral-grupo[open] summary > span:first-child::before { transform: rotate(90deg); }
.lateral-grupo summary:hover { background: var(--crema); }
.lateral-grupo ul { margin: 0 0 8px; }
.lateral-grupo a { padding: 8px 12px 8px 31px; font-size: .95rem; }

/* Menú de la boda por herramientas: icono y nombre */
.icono { flex: none; }
.lateral a, .lateral-pronto { justify-content: flex-start; gap: 12px; }
.lateral a > span:nth-of-type(1), .lateral-pronto > span:nth-of-type(1) { flex: 1; }
.lateral-pronto { display: flex; align-items: center; padding: 10px 12px; border-left: 3px solid transparent; color: var(--tostado); opacity: .75; }
.pronto { flex: none; padding: 1px 7px; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tostado); border: 1px solid var(--borde); border-radius: var(--radio); }

/* Botones grandes de las herramientas en el inicio de la boda */
.botonera { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; padding: 0; }
@media (min-width: 700px) { .botonera { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .botonera { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.boton-seccion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 16px 16px;
  color: var(--carbon);
  text-decoration: none;
  background:
    radial-gradient(140% 90% at 50% -10%, var(--blanco-90) 0%, var(--blanco-0) 62%),
    linear-gradient(180deg, var(--blanco) 0%, var(--seccion-medio) 55%, var(--seccion-oscuro) 100%);
  border: 1px solid var(--seccion-borde);
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 var(--blanco), 0 1px 2px var(--negro-10), 0 10px 18px -10px var(--sombra-45);
  transition: transform .2s, box-shadow .2s;
}
a.boton-seccion:hover { color: var(--carbon); transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--blanco), 0 1px 2px var(--negro-10), 0 16px 24px -10px var(--sombra-55); }
.boton-seccion .icono { width: 30px; height: 30px; margin-bottom: 6px; }
.boton-seccion strong { font-size: 1.05rem; line-height: 1.25; }
.boton-seccion .nota { margin: 0; }
.pronto-seccion { opacity: .6; box-shadow: none; background: var(--blanco); }
.pronto-seccion .pronto { position: absolute; top: 10px; right: 10px; }
.con-lateral .cuenta-atras { max-width: 720px; }

/* Inicio de la boda: título a la izquierda y cuenta atrás discreta a su derecha, en la misma línea */
.cabecera-boda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0 0 22px; }
.cabecera-boda-titulo { min-width: 0; }
.cabecera-boda h1 { margin: 0; overflow-wrap: anywhere; }
.cabecera-boda .nota { margin: 2px 0 0; }
.con-lateral .cuenta-atras.mini, .cuenta-atras.mini { max-width: none; margin: 0; text-align: right; }
.cuenta-atras.mini .reloj { display: inline-grid; grid-template-columns: repeat(4, 58px); gap: 5px; margin: 0; }
.cuenta-atras.mini .reloj[hidden] { display: none; }
.cuenta-atras.mini .cifra { padding: 6px 2px 5px; text-align: center; background: var(--blanco); border: 1px solid var(--borde); }
.cuenta-atras.mini .cifra .numero { font-size: 1.2rem; line-height: 1.1; }
.cuenta-atras.mini .cifra .rotulo { margin-top: 1px; font-size: .68rem; }
.cuenta-atras.mini .destacado { font-size: 1rem; margin: 0; }
.cuenta-atras.mini p { margin: 4px 0 0; }
@media (max-width: 599px) {
  .cuenta-atras.mini { text-align: left; }
  .cuenta-atras.mini .reloj { grid-template-columns: repeat(4, 52px); }
}

/* Menú de la boda en el móvil: las herramientas con su icono, de dos en dos */
@media (max-width: 899px) {
  .lateral-lista { padding: 8px 12px 14px; }
  .lateral-boda { display: none; }
  .lateral ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .lateral a, .lateral-pronto {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: linear-gradient(180deg, var(--blanco) 0%, var(--seccion-medio) 100%);
  }
  .lateral a:hover { transform: none; }
  .lateral a[aria-current="page"] { border-color: var(--carbon); border-left-width: 1px; background: var(--crema); }
  .lateral .icono { width: 26px; height: 26px; }
  .lateral .cuenta, .lateral .pronto { position: absolute; top: 10px; right: 10px; }
  .lateral-pronto { background: var(--blanco); }
}

/* Porcentaje de avance: junto al título de la boda y en el botón de cada herramienta */
.cabecera-boda-titulo { flex: 1 1 200px; }
.avance { display: flex; align-items: center; gap: 10px; color: var(--carbon); text-decoration: none; }
.avance:hover { color: var(--carbon); }
.avance-numero { font-size: 1.9rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.avance-detalle { display: block; width: 130px; }
.avance .progreso-barra { height: 8px; margin: 0 0 3px; }
.avance .rotulo { display: block; font-size: .72rem; color: var(--tostado); }
.avance-seccion { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.avance-seccion .progreso-barra { flex: 1; height: 8px; margin: 0; }
.avance-seccion strong { flex: none; font-size: .9rem; font-variant-numeric: tabular-nums; }

/* Cabecera del inicio de la boda en rejilla.
   Móvil: «Mis bodas» y, a su derecha, la cuenta atrás en pequeño; debajo el nombre y el avance.
   Escritorio: «Mis bodas» arriba; debajo el nombre, el avance y la cuenta atrás en una línea. */
.cabecera-boda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "miga reloj" "titulo titulo" "avance avance";
  align-items: center;
  gap: 8px 12px;
}
.cabecera-boda .miga { grid-area: miga; margin: 0; }
.cabecera-boda-titulo { grid-area: titulo; }
.cabecera-boda .avance { grid-area: avance; }
.cabecera-boda .cuenta-atras.mini { grid-area: reloj; text-align: right; }
.linea-fecha-movil { display: block; }
.cuenta-atras.mini .linea-fecha { display: none; }
@media (max-width: 699px) {
  .cuenta-atras.mini .reloj { grid-template-columns: repeat(4, 34px); gap: 3px; }
  .cuenta-atras.mini .cifra { padding: 3px 0 2px; }
  .cuenta-atras.mini .cifra .numero { font-size: .82rem; }
  .cuenta-atras.mini .cifra .rotulo { font-size: .5rem; margin: 0; }
  .cuenta-atras.mini .destacado, .cuenta-atras.mini p { font-size: .8rem; }
}
@media (min-width: 700px) {
  .cabecera-boda {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "miga miga miga" "titulo avance reloj";
    gap: 10px 24px;
  }
  .linea-fecha-movil { display: none; }
  .cuenta-atras.mini .linea-fecha { display: block; }
}
.avance .progreso-barra, .avance-seccion .progreso-barra { display: block; }
@media (max-width: 699px) {
  .avance-numero { font-size: 1.4rem; }
  .avance-detalle { width: auto; flex: 1; max-width: 220px; }
}

/* Cada herramienta: su botón y, debajo, la opción de darla por hecha */
.casilla-seccion { display: flex; flex-direction: column; }
.casilla-seccion .boton-seccion { flex: 1; height: auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.casilla-seccion form { margin: 0; }
.marcar-seccion {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tostado);
  background: var(--blanco);
  border: 1px solid var(--seccion-borde);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.marcar-seccion:hover { background: var(--crema); color: var(--carbon); }
.casilla-seccion.hecha .marcar-seccion { color: var(--blanco); background: linear-gradient(180deg, var(--carbon-claro) 0%, var(--enlace) 100%); border-color: var(--carbon-oscuro); }
.casilla-seccion.hecha .pronto-seccion { opacity: 1; }
.pronto-seccion .avance-seccion { opacity: .9; }

/* Botón de herramienta: icono y nombre en una línea, y debajo su cifra principal */
.cabeza-seccion { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-right: 54px; }
.boton-seccion .cabeza-seccion .icono { width: 22px; height: 22px; margin: 0; }
.boton-seccion .cabeza-seccion strong { font-size: 1rem; }
.cifra-seccion { font-size: 1.9rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Personas con acceso a la boda */
.personas { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; margin: 14px 0 0; padding: 0; }
.tarjeta ul.personas { padding-left: 0; }
.personas li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  font-weight: 600;
  color: var(--blanco);
  background: linear-gradient(180deg, var(--carbon-claro) 0%, var(--enlace) 100%);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 var(--blanco-35);
}
.persona-datos { min-width: 0; }
.persona-datos .dato, .persona-datos .nota { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Avisos de hoy y de mañana en el inicio de la boda */
.avisos-tareas { display: grid; gap: 8px; margin: 0 0 18px; }
.aviso-tarea {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 12px 14px;
  color: var(--carbon);
  text-decoration: none;
  background: linear-gradient(180deg, var(--tinte-claro) 0%, var(--salmon) 100%);
  border: 1px solid var(--destacada-borde);
  border-left: 5px solid var(--acento);
  border-radius: var(--radio);
  box-shadow: 0 6px 12px -8px var(--tinte-sombra-50);
  transition: transform .2s;
}
.aviso-tarea:hover { color: var(--carbon); transform: translateY(-2px); }
.aviso-tarea.hoy { border-left-color: var(--rojo); }
.aviso-tarea strong { flex: none; }
.alta-rapida input[type="time"] { flex: 0 0 auto; }

/* Banner en proporción 21:9. Ocupa mucho alto, así que sólo se queda fijo al bajar por la página
   en pantallas verticales (móvil), donde es más bajo; en pantallas apaisadas sube con la página. */
.carrusel { height: auto; aspect-ratio: 21 / 9; }
.franja-anuncios { position: static; }
@media (max-aspect-ratio: 4/5) {
  .franja-anuncios { position: sticky; }
}

/* Rótulo «Anuncio» del banner: abajo a la izquierda, y más pequeño en el móvil */
.anuncio .rotulo-publi { top: auto; bottom: 8px; left: 8px; }
@media (max-width: 699px) {
  .anuncio .rotulo-publi { bottom: 4px; left: 4px; padding: 1px 5px; font-size: .5rem; letter-spacing: .06em; }
}

/* Aviso emergente: nace oculto y aparece con retraso */
.emergente[hidden] { display: none; }
.emergente:focus { outline: none; }

/* Aviso emergente a imagen completa, en 4:3: la foto ocupa todo el aviso y los botones van sobre ella, abajo */
.emergente-foto {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 24px 50px -16px var(--sombra-emergente-60);
}
.emergente-foto > a { display: block; width: 100%; height: 100%; }
.emergente-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.emergente-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 34px 12px 12px;
  background: linear-gradient(180deg, var(--penumbra-0) 0%, var(--penumbra-50) 100%);
  /* La sombra no intercepta los toques: fuera de los botones, pulsar lleva al anunciante. */
  pointer-events: none;
}
.emergente-pie > * { pointer-events: auto; }
.emergente-pie .rotulo-publi { padding: 3px 7px; color: var(--blanco); background: var(--penumbra-60); border-radius: 3px; }
.emergente-botones { display: flex; gap: 8px; margin: 0; }
.emergente-botones .boton { min-height: 0; padding: 8px 15px; font-size: .88rem; line-height: 1.2; }
.emergente-caja .emergente-botones { justify-content: center; margin-top: 18px; }
@media (max-width: 699px) {
  .emergente-pie { padding: 26px 8px 8px; }
  .emergente-pie .rotulo-publi { padding: 1px 5px; font-size: .5rem; letter-spacing: .06em; }
  .emergente-botones .boton { padding: 7px 12px; font-size: .8rem; }
}

/* Máster: pantalla de un anuncio y de marcar bodas */
.js .sin-js { display: none; }
[data-solo-destino][hidden] { display: none; }
.acciones-formulario { margin: 24px 0 0; }
.formulario .acciones-formulario .boton { margin-top: 0; }
.mas-huecos { border-top: 1px solid var(--borde); padding-top: 12px; }
.mas-huecos summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.cambio-provincia { flex-wrap: nowrap; }
.cambio-provincia select { flex: 1; min-width: 0; }
.tarjeta .formulario h2, .formulario .tarjeta h2 { margin-top: 22px; }

/* Sólo con JavaScript, y lo que no se imprime */
html:not(.js) .solo-js { display: none; }
.solo-impresion { display: none; }
@media print {
  .cabecera, .lateral, .franja-anuncios, .emergente, .pie, .aviso, .franja-master, .no-imprimir { display: none !important; }
  .solo-impresion { display: block; }
  body { background: var(--blanco); font-size: 12pt; }
  .con-lateral { display: block; max-width: none; }
  .contenido, .contenido.ancho, .contenido.medio, .contenido.estrecho { max-width: none; padding: 0; }
  .contenido > * { animation: none; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
  a { text-decoration: none; }
}

/* Máster: bodas y cuentas */
.franja-master { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 9px 16px; font-size: .9rem; font-weight: 500; color: var(--blanco); background: var(--carbon); }
.franja-master a { color: var(--blanco); }
.filtros input[type="search"] { flex: 1 1 200px; min-height: 42px; padding: 8px 10px; font: inherit; color: var(--carbon); background: var(--blanco); border: 1px solid var(--campo); border-radius: var(--radio); }
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lista-master { list-style: none; margin: 0; padding: 0; }
.lista-master > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--borde); }
.lista-master > li:first-child { border-top: 0; padding-top: 0; }
.lista-master .dato { font-weight: 600; overflow-wrap: anywhere; }
.lista-master .nota { display: block; margin: 0; overflow-wrap: anywhere; }
.lista-master .etiqueta { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }
@media (min-width: 760px) {
  .lista-master > li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .lista-master > li > * { grid-column: 1; }
  .lista-master > li > .boton, .lista-master > li > form { grid-column: 2; grid-row: 1 / span 4; }
  .lista-master.en-dos > li > .nota { grid-column: 2; grid-row: 1; text-align: right; }
}
.ficha-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; margin: 0 0 8px; }
.ficha-datos dt { font-size: .82rem; color: var(--tostado); margin-top: 10px; }
.ficha-datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 640px) { .ficha-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ficha-datos > div { min-width: 0; } }
.esencial { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.esencial li { padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--crema); }
.esencial li.contratado { background: var(--salmon); border-color: var(--salmon-fuerte); }
.esencial strong { display: block; font-size: .9rem; }
.esencial .nota { display: block; margin: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) { .esencial { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Máster: informes de gasto */
.filtros-informe { align-items: flex-end; }
.filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.filtro label { font-size: .85rem; }
.resumen.estatico.informe-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
@media (min-width: 640px) { .resumen.estatico.informe-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .resumen.estatico.informe-cifras { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.informe-cifras .numero { font-size: 1.45rem; overflow-wrap: anywhere; }
.informe-ayuda { margin: 0 0 20px; }
.informe-ayuda summary { display: inline-block; padding: 6px 0; color: var(--enlace); text-decoration: underline; cursor: pointer; }
.informe-ayuda p { margin: 6px 0 0; }
/* Las tablas anchas se desplazan de lado en el móvil, sin ensanchar la página. */
.tabla-desliza { overflow-x: auto; margin: 0 0 12px; }
.tabla-desliza .tabla { margin: 0; }
.tabla-desliza .tabla-informe { min-width: 560px; }
.tabla-informe th[scope="row"] { font-weight: 500; overflow-wrap: anywhere; }
.tabla-informe .num { white-space: nowrap; }
.tabla-informe .tabla-grupo th { padding-top: 16px; font-size: .85rem; font-weight: 600; color: var(--tostado); }

/* ==== HERRAMIENTAS DE LA BODA (generado con _tools/unir-css.js desde css/modulos; no editar aquí) ==== */

/* ---- invitados ---- */
/* Invitados: cifras, alta, lista y ficha */

/* Cifras de arriba: de dos en dos en el móvil y las cuatro en fila con más sitio */
.resumen.estatico.invitados-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
@media (min-width: 640px) { .resumen.estatico.invitados-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Asistentes por parte de cada uno: una tarjeta por lado, con su barra de confirmados */
.invitados-reparto { margin: 0 0 24px; }
.invitados-reparto > .nota { margin: 0; }
.invitados-lados { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 12px; padding: 0; }
@media (min-width: 640px) { .invitados-lados { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.invitados-lados li { padding: 14px; background: var(--blanco); border: 1px solid var(--borde); border-left: 4px solid var(--salvia); border-radius: var(--radio); }
.invitados-lado-nombre { display: block; font-weight: 600; overflow-wrap: anywhere; }
.invitados-lado-cifra { display: block; margin: 2px 0 8px; }
.invitados-lado-cifra strong { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.invitados-lados .progreso-barra { display: block; height: 8px; background: var(--crema); }
.invitados-lados .nota { display: block; }

/* Adultos, menores, menús y alergias */
.invitados-detalle { margin: 0 0 10px; padding: 2px 16px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
.invitados-detalle div { padding: 10px 0; border-top: 1px solid var(--borde); }
.invitados-detalle div:first-child { border-top: 0; }
.invitados-detalle dt { font-size: .9rem; color: var(--tostado); }
.invitados-detalle dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 760px) {
  .invitados-detalle div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .invitados-detalle dd { text-align: right; }
}

/* Formularios de alta: cada campo con su rótulo encima, en rejilla */
.invitados-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0; }
.invitados-campos label { display: block; margin: 0 0 6px; font-weight: 600; }
.invitados-campos input[type="text"],
.invitados-campos select,
.invitados-campos textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--tostado);
  border-color: color-mix(in srgb, var(--tostado) 60%, var(--blanco));
  border-radius: var(--radio);
}
.invitados-campos textarea { min-height: 0; resize: vertical; }
.invitados-campos .nota { margin: 6px 0 0; }
.invitados-todo, .invitados-campos > .boton { grid-column: 1 / -1; }
/* «Añadir una persona»: con sitio, nombre y apellidos van juntos; en pantallas anchas, todo en una línea */
@media (min-width: 560px) {
  .invitados-en-fila .invitados-todo { grid-column: auto; }
}
@media (min-width: 1100px) {
  .invitados-campos.invitados-en-fila { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr) minmax(8.5em, 1fr) auto; }
  .invitados-en-fila > .boton { grid-column: auto; }
}
.invitados-alta > .nota { margin: 12px 0 14px; }
/* Tras añadir a alguien se vuelve a esta tarjeta: que el anuncio fijo del móvil no la tape */
.invitados-ancla { scroll-margin-top: 12px; }
@media (max-aspect-ratio: 4/5) { .invitados-ancla { scroll-margin-top: calc(43vw + 12px); } }

/* «Añadir varios de golpe» y «Cambiar los nombres»: plegados dentro de la tarjeta del alta */
.invitados-varios, .invitados-nombres { border-top: 1px solid var(--borde); }
.invitados-varios summary, .invitados-nombres summary { padding: 12px 0; font-weight: 600; color: var(--enlace); overflow-wrap: anywhere; }
.invitados-varios .invitados-campos, .invitados-nombres .invitados-campos { padding: 4px 0 16px; }
.invitados-nombres .boton { justify-self: start; }
.invitados-nombres .invitados-campos { padding-bottom: 0; }

/* Filtros: en el móvil, el buscador ocupa su propia línea */
@media (max-width: 559px) { .invitados-filtros input[type="search"] { flex-basis: 100%; } }
.invitados-cuenta { margin: 0 0 8px; }

/* Lista: una fila por invitado. Móvil: los datos arriba y el estado debajo, a todo el ancho.
   Al cambiar un estado se vuelve a la fila de encima, que queda a un tercio de la pantalla. */
.invitados-lista { list-style: none; margin: 0 0 16px; padding: 0; scroll-margin-top: 35vh; }
.invitado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; margin-bottom: 8px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); scroll-margin-top: 35vh; }
.invitado-confirmado { border-left: 4px solid var(--salvia); }
.invitado-cuerpo { flex: 1 1 220px; min-width: 0; }
.invitado-nombre { display: block; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.invitado-nombre { padding: 4px 0; }
a.invitado-nombre:hover { text-decoration: underline; }
.invitado-no-asiste .invitado-nombre { font-weight: 400; color: var(--tostado); }
.invitado .nota { display: block; margin: 2px 0 0; overflow-wrap: anywhere; }

/* Estado: tres casillas seguidas; la del estado actual va coloreada y las otras dos son botones */
.invitado-estado { display: flex; flex: 1 1 100%; }
.invitado-estado > * {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--salvia);
  border-left-width: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.invitado-estado > :first-child { border-left-width: 1px; border-radius: var(--radio) 0 0 var(--radio); }
.invitado-estado > :last-child { border-radius: 0 var(--radio) var(--radio) 0; }
.invitado-estado button { transition: background .2s; }
.invitado-estado button:hover { background: var(--crema); }
.invitado-actual { background: var(--salmon); }
.invitado-confirmado .invitado-actual { background: var(--borde); background: color-mix(in srgb, var(--salvia) 50%, var(--blanco)); }
.invitado-no-asiste .invitado-actual { color: var(--rojo); background: var(--crema); background: color-mix(in srgb, var(--rojo) 10%, var(--blanco)); }
@media (min-width: 760px) {
  .invitado-estado { flex: 0 0 auto; }
  .invitado-estado > * { flex: 0 0 auto; min-width: 100px; }
}

/* Estado, para quien sólo mira */
.invitado-etiqueta { flex: none; padding: 5px 10px; font-size: .8rem; font-weight: 600; background: var(--salmon); border-radius: var(--radio); }
.invitado-confirmado .invitado-etiqueta { background: var(--borde); background: color-mix(in srgb, var(--salvia) 50%, var(--blanco)); }
.invitado-no-asiste .invitado-etiqueta { color: var(--rojo); background: var(--crema); background: color-mix(in srgb, var(--rojo) 10%, var(--blanco)); }

/* Ficha de un invitado: apartados dentro del formulario */
.invitado-ficha h2 { margin: 30px 0 14px; padding-top: 22px; font-size: 1.15rem; border-top: 1px solid var(--borde); }
.invitado-ficha h2 + label { margin-top: 0; }

/* Confirmaciones nuevas llegadas por la web de la boda: una línea discreta bajo el título */
.invitados-llegadas { margin: 0 0 16px; padding: 8px 12px; font-size: .9rem; background: var(--blanco); border: 1px solid var(--borde); border-left: 4px solid var(--salvia); border-radius: var(--radio); overflow-wrap: anywhere; }

/* Filtro «Llegados por la web»: una casilla con su rótulo, entre los demás filtros */
.invitados-filtro-web { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 44px; cursor: pointer; }
.invitados-filtro-web input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--enlace); }
.invitados-filtro-web span { min-width: 0; overflow-wrap: anywhere; }

/* De dónde viene cada invitado: a quién acompaña (debajo de su nombre) y la marca de quien llegó por la web */
.invitado-acompana { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.invitado-no-asiste .invitado-acompana { color: var(--tostado); }
.invitado-web { display: inline-block; max-width: 100%; margin: 6px 0 0; padding: 2px 8px; font-size: .78rem; font-weight: 600; line-height: 1.4; color: var(--tostado); background: var(--crema); border: 1px solid var(--borde); border-radius: var(--radio); overflow-wrap: anywhere; }

/* Lo mismo en la ficha, bajo el nombre, y quién viene con ella con ficha propia */
.invitado-origen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 0 20px; }
.invitado-origen .invitado-acompana { min-width: 0; font-size: .95rem; }
.invitado-origen .invitado-web { margin: 0; }
.invitado-con-ficha { overflow-wrap: anywhere; }

/* ---- mesas ---- */
/* Mesas: cifras, crear mesas, tarjetas, personas sin sentar, plano del salón y hoja para imprimir */

/* Cifras de arriba: de dos en dos en el móvil y las cuatro en fila con más sitio */
.resumen.estatico.mesas-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
@media (min-width: 640px) { .resumen.estatico.mesas-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* «Añadir mesas»: plegado bajo su título cuando ya hay mesas */
.mesas-crear:not([open]) { padding-top: 12px; padding-bottom: 12px; }
.mesas-crear summary { padding: 8px 0; }
.mesas-crear summary h2 { display: inline; margin: 0; font-size: 1.15rem; }
.mesas-crear[open] summary { margin-bottom: 12px; }
.mesas-crear .nota { margin: 12px 0 0; }

/* Formularios de crear mesas: cada campo con su rótulo encima, en rejilla */
.mesas-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0; }
.mesas-campos label { display: block; margin: 0 0 6px; font-weight: 600; }
.mesas-campos input[type="text"],
.mesas-campos input[type="number"],
.mesas-campos select {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--tostado);
  border-color: color-mix(in srgb, var(--tostado) 60%, var(--blanco));
  border-radius: var(--radio);
}
.mesas-todo, .mesas-campos > .boton { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .mesas-campos { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .mesas-campos .mesas-todo, .mesas-campos > .boton { grid-column: auto; }
}

/* Tarjetas de las mesas: una columna en el móvil y las que quepan con más sitio */
.mesas-rejilla { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; margin: 0 0 28px; padding: 0; }
.mesa-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--salvia); border-radius: var(--radio); }
.mesa-pasada { border-top-color: var(--rojo); }
.mesa-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mesa-nombre { min-width: 0; margin: 0; font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.mesa-nombre a { display: inline-block; padding: 8px 0; text-decoration: none; }
.mesa-nombre a:hover { text-decoration: underline; }
.mesa-forma { flex: none; font-size: .8rem; color: var(--tostado); }
.mesa-ocupacion { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mesa-pasada .mesa-ocupacion { color: var(--rojo); }
ul.mesa-comensales { list-style: none; margin: 4px 0 0; padding: 0; }
.mesa-comensales li { padding: 6px 0; border-top: 1px solid var(--borde); overflow-wrap: anywhere; }
.mesa-mas { font-weight: 600; color: var(--tostado); white-space: nowrap; }
.mesa-tarjeta .nota { margin: 0; }
.mesa-tarjeta .mesa-notas { padding-top: 8px; border-top: 1px solid var(--borde); overflow-wrap: anywhere; }

/* Partes de la pantalla a las que se salta tras un cambio: que el anuncio fijo del móvil no las tape */
.mesas-ancla { scroll-margin-top: 12px; }
@media (max-aspect-ratio: 4/5) { .mesas-ancla { scroll-margin-top: calc(43vw + 12px); } }

/* Personas sin sentar: casilla y nombre y, al lado (debajo en el móvil), su desplegable de mesa */
.mesas-sin-sentar { margin: 0 0 28px; }
ul.mesas-pendientes { list-style: none; margin: 0 0 14px; padding: 0; }
.tarjeta ul.mesas-pendientes, .tarjeta ul.mesa-sentados { padding-left: 0; }
.mesa-pendiente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 14px; margin-bottom: 8px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
.tarjeta .mesa-pendiente { background: var(--crema); }
.mesa-marcar { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; min-height: 44px; cursor: pointer; }
.mesa-marcar input { flex: none; width: 22px; height: 22px; margin: 0; }
.mesa-marcar-texto { min-width: 0; overflow-wrap: anywhere; }
.mesa-marcar-texto strong, .mesa-marcar-texto .nota { display: block; }
.mesa-asignar { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
.mesa-asignar select,
.mesas-varios select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--tostado);
  border-color: color-mix(in srgb, var(--tostado) 60%, var(--blanco));
  border-radius: var(--radio);
}
.mesa-asignar .boton, .mesas-varios .boton, .mesa-sentados .boton { flex: none; min-height: 44px; }
@media (min-width: 760px) { .mesa-asignar { flex: 0 1 360px; } }

/* Sentar a varios de una vez: la barra se queda a la vista, pegada abajo, mientras se recorre la lista */
.mesas-varios {
  position: sticky;
  bottom: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--salvia);
  border-radius: var(--radio);
  box-shadow: 0 -10px 16px -14px var(--tostado);
}
.mesas-varios label { flex: 1 1 100%; font-weight: 600; }
.mesas-varios .nota { flex: 1 1 100%; margin: 0; }

/* Ficha de una mesa: quién se sienta, con su botón de quitar */
ul.mesa-sentados { list-style: none; margin: 0 0 12px; padding: 0; }
.mesa-sentados li { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--borde); }
.mesa-sentados li:first-child { padding-top: 0; border-top: 0; }

/* Plano del salón */
.mesas-plano-foto { display: block; margin: 0 0 18px; }
.mesas-plano-foto img { display: block; max-width: 100%; height: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
.mesas-plano .pie-formulario { margin-top: 14px; }

/* Vista para imprimir: la lista por orden alfabético, en columnas */
.mesas-otra-hoja { margin-top: 8px; }
.mesas-listado { list-style: none; margin: 0 0 20px; padding: 0; columns: 3 260px; column-gap: 28px; }
.mesas-listado li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; break-inside: avoid; page-break-inside: avoid; }
.mesas-listado strong { flex: none; max-width: 50%; text-align: right; }

/* En papel: sin fondos ni colores, tres mesas por fila y la lista alfabética en su propia hoja */
@media print {
  .mesas-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8pt; margin-bottom: 14pt; }
  .mesa-tarjeta, .mesa-pasada { gap: 3pt; padding: 8pt; font-size: 10.5pt; color: var(--carbon); background: none; border: 1px solid var(--carbon); border-radius: 0; break-inside: avoid; page-break-inside: avoid; }
  .mesa-nombre { font-size: 12pt; }
  .mesa-nombre a { padding: 0; color: var(--carbon); }
  .mesa-forma, .mesa-mas, .mesa-tarjeta .nota, .mesa-pasada .mesa-ocupacion { color: var(--carbon); }
  .mesa-comensales li { padding: 2pt 0; border-top-color: var(--tostado); }
  .mesas-imprimible h1 { margin-bottom: 10pt; font-size: 20pt; }
  .mesas-otra-hoja { margin-top: 0; break-before: page; page-break-before: always; }
  .mesas-listado { columns: 2; column-gap: 24pt; }
  .mesas-listado li { padding: 3pt 0; color: var(--carbon); border-bottom-color: var(--tostado); }
  .mesas-plano-foto img { border: 0; }
}

/* ---- proveedores ---- */
/* Espacios y proveedores */

/* Lo esencial del evento: una casilla por tipo, de dos en dos en el móvil y de cuatro en cuatro en escritorio */
.tarjeta .proveedor-casillas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) { .tarjeta .proveedor-casillas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proveedor-casilla {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 12px 4px;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--borde);
  border-radius: var(--radio);
}
.proveedor-casilla-tipo {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tostado);
  overflow-wrap: anywhere;
}
.proveedor-casilla-situacion { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.proveedor-casilla-enlaces { display: flex; flex-wrap: wrap; gap: 0 16px; margin: auto 0 0; }
.proveedor-casilla-enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
/* Sin enlaces debajo (quien sólo mira), la casilla cierra con el mismo aire que abre. */
.proveedor-casilla > :last-child:not(.proveedor-casilla-enlaces) { margin-bottom: 8px; }
.proveedor-casilla-contratado {
  background: var(--salmon);
  border-color: var(--salmon-fuerte);
  border-left-color: var(--carbon);
}
.proveedor-casilla-contratado .proveedor-casilla-tipo { color: var(--carbon); }
.proveedor-casilla-contratado .proveedor-casilla-situacion::before { content: "✓ "; }
.proveedor-casilla-valorando { background: var(--blanco); border-left-color: var(--salvia); }
.proveedor-casilla-sin-buscar .proveedor-casilla-situacion { font-weight: 400; color: var(--tostado); }

/* Alta rápida y cambio de estado: desplegables con el mismo aspecto que los demás campos */
.proveedor-alta, .proveedor-filtros { scroll-margin-top: 16px; }
/* En pantallas verticales el anuncio se queda fijo arriba (21:9 del ancho): que no tape el destino del enlace */
@media (max-aspect-ratio: 4/5) { .proveedor-alta, .proveedor-filtros { scroll-margin-top: calc(43vw + 16px); } }
.proveedor-alta select,
.proveedor-cambio select {
  max-width: 100%;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--salvia);
  border-color: color-mix(in srgb, var(--tostado) 60%, var(--blanco));
  border-radius: var(--radio);
}
.proveedor-alta select { flex: 1 1 200px; min-height: 50px; padding: 12px 14px; }
.proveedor-cambio select { min-height: 44px; padding: 8px 10px; }
.proveedor-filtros a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 4px; }

/* Lista agrupada por tipo */
.proveedor-grupo { margin: 0 0 24px; }
.proveedor-grupo-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: 1.15rem;
  border-bottom: 1px solid var(--borde);
}
.proveedor-grupo-titulo .nota { font-weight: 400; }
.proveedor-lista { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.proveedor-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 16px;
  min-width: 0;
  padding: 10px 14px 12px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
@media (min-width: 760px) {
  .proveedor-item { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .proveedor-cambio { padding-top: 4px; }
}
.proveedor-item-contratado { border-left: 4px solid var(--carbon); }
.proveedor-item-descartado { background: var(--crema); }
.proveedor-item-descartado .proveedor-nombre { font-weight: 400; color: var(--tostado); }
.proveedor-cuerpo { min-width: 0; }
.proveedor-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 44px; }
.proveedor-nombre { font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
a.proveedor-nombre { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
a.proveedor-nombre:hover { text-decoration: underline; }

/* El estado, como etiqueta: «Contratado» destaca y «Descartado» se apaga */
.proveedor-estado { align-self: center; margin: 0; white-space: nowrap; }
.proveedor-estado-contratado { color: var(--blanco); background: var(--carbon); }
.proveedor-estado-presupuesto { background: var(--salmon); }
.proveedor-estado-descartado { color: var(--tostado); background: none; box-shadow: inset 0 0 0 1px var(--borde); }

.proveedor-contacto {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  margin: 0;
  padding: 0;
  font-size: .95rem;
}
.proveedor-contacto li { min-width: 0; overflow-wrap: anywhere; }
.proveedor-contacto a { display: inline-flex; align-items: center; min-height: 44px; }
.proveedor-paso, .proveedor-dato { margin: 4px 0 0; overflow-wrap: anywhere; }
.proveedor-paso { font-size: .95rem; }
.proveedor-cambio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }

/* Ficha de un proveedor */
.proveedor-titulo { overflow-wrap: anywhere; }
.tarjeta .proveedor-partidas { list-style: none; margin: 0 0 8px; padding: 0; }
.proveedor-partidas a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }

/* El proveedor de la casa (sólo en las copias con la marca de una empresa): su distintivo, con
   relleno, y en su ficha los datos de la empresa, que se leen pero no se cambian */
.proveedor-casa { color: var(--carbon); background: var(--salvia); }
.proveedor-casa-distintivos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.tarjeta .proveedor-casa-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; margin: 0 0 14px; }
@media (min-width: 560px) { .tarjeta .proveedor-casa-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proveedor-casa-datos > div { min-width: 0; }
.proveedor-casa-datos dt {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tostado);
}
.proveedor-casa-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.proveedor-casa-datos a { display: inline-flex; align-items: center; min-height: 44px; }
.proveedor-casa-pie { margin: 20px 0 8px; }

/* ---- presupuesto ---- */
/* Presupuesto */

/* Cifras de un vistazo: de dos en dos en el móvil y de tres en tres en pantallas más anchas */
.presupuesto-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
@media (min-width: 640px) { .presupuesto-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.presupuesto-cifra {
  min-width: 0;
  padding: 12px;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.presupuesto-cifra dt { font-size: .85rem; line-height: 1.3; color: var(--tostado); }
.presupuesto-cifra dd {
  margin: 2px 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) { .presupuesto-cifra dd { font-size: 1.45rem; } }
.presupuesto-cifra-total { background: var(--salmon); border-color: var(--salmon-fuerte); }
.presupuesto-cifra-total dt { color: var(--carbon); }
.presupuesto-cifra-pasado { background: var(--blanco); border-color: var(--rojo); }
.presupuesto-cifra-pasado dt, .presupuesto-cifra-pasado dd { color: var(--rojo); }

/* Fijar o cambiar el presupuesto total: plegado hasta que hace falta */
.presupuesto-cambiar { margin: 0; border-top: 1px solid var(--borde); }
.presupuesto-cambiar summary { padding: 12px 0; font-weight: 600; }
.presupuesto-cambiar .formulario { padding: 4px 0 8px; }

/* Alta rápida de una partida */
.presupuesto-titulo { margin: 28px 0 12px; }
.presupuesto-alta { scroll-margin-top: 16px; }
.presupuesto-alta select {
  flex: 1 1 200px;
  max-width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--salvia);
  border-color: color-mix(in srgb, var(--tostado) 60%, var(--blanco));
  border-radius: var(--radio);
}
.presupuesto-alta input[type="text"].presupuesto-corto { flex: 1 1 130px; min-width: 0; }

/* Partidas por categoría. En el móvil cada partida es una tarjeta con sus cifras en renglones;
   en pantallas anchas las cifras se ponen en columnas. */
.presupuesto-grupo { margin: 0 0 24px; }
.presupuesto-grupo-cabeza { align-items: baseline; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borde); }
.presupuesto-grupo-cabeza h3 { margin: 0; font-size: 1.1rem; }
.presupuesto-subtotal { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.presupuesto-subtotal .nota { font-weight: 400; }
.presupuesto-partidas { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.presupuesto-partida {
  min-width: 0;
  padding: 8px 14px 10px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.presupuesto-partida-cabeza { min-width: 0; }
.presupuesto-partida-nombre {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.presupuesto-partida-nombre:hover { text-decoration: underline; }
.presupuesto-partida-cabeza .nota { display: block; margin: 0 0 8px; overflow-wrap: anywhere; }
.presupuesto-importes { margin: 0; }
.presupuesto-importes > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid var(--borde);
}
.presupuesto-importes dt { font-size: .9rem; color: var(--tostado); }
.presupuesto-importes dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* La cifra que cuenta para las cuentas (la más firme de las tres) va marcada. */
.presupuesto-importes .presupuesto-vigente dt { font-weight: 600; color: var(--carbon); }
.presupuesto-importes .presupuesto-vigente dd { font-weight: 600; }
@media (min-width: 640px) {
  .presupuesto-importes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--borde); }
  .presupuesto-importes > div { display: block; padding: 6px 0 0; text-align: right; border-top: 0; }
  .presupuesto-importes dt { font-size: .78rem; }
  .presupuesto-importes dd { white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 1200px) {
  .presupuesto-partida { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 16px; align-items: center; }
  .presupuesto-partida-cabeza .nota { margin-bottom: 4px; }
  .presupuesto-importes { border-top: 0; }
  .presupuesto-importes > div { padding-top: 0; }
}

/* Tras apuntar, corregir o marcar un pago se vuelve a la tarjeta de los pagos: que el anuncio fijo del móvil no la tape */
.presupuesto-ancla { scroll-margin-top: 16px; }
@media (max-aspect-ratio: 4/5) { .presupuesto-ancla { scroll-margin-top: calc(43vw + 16px); } }

/* Pagos: los próximos (en el presupuesto) y los de una partida (en su ficha) */
.tarjeta .presupuesto-pagos { list-style: none; margin: 0 0 16px; padding: 0; }
.presupuesto-pago {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--borde);
}
.presupuesto-pago:first-child { border-top: 0; padding-top: 0; }
.presupuesto-pago form { margin: 0; }
.presupuesto-pago-datos { min-width: 0; overflow-wrap: anywhere; }
.presupuesto-pago-datos .nota { display: block; margin: 0; }
.presupuesto-pago-datos a { display: inline-block; padding: 6px 0; }
.presupuesto-pago-importe { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.presupuesto-pago-hecho .presupuesto-pago-importe { font-weight: 400; color: var(--tostado); }
.presupuesto-pago-accion, .presupuesto-pago-editar { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .presupuesto-pago { grid-template-columns: minmax(0, 1fr) auto auto; }
  .presupuesto-pago-accion { grid-column: auto; }
}
.presupuesto-pago-editar summary { display: inline-block; padding: 11px 4px 11px 0; font-size: .95rem; color: var(--enlace); text-decoration: underline; }
.presupuesto-pago-editar .formulario { padding: 6px 0 10px; }
.presupuesto-pago-botones { margin: 0; }
.formulario .presupuesto-pago-botones .boton { margin-top: 18px; }

/* Varios campos en una misma línea dentro de un formulario: uno debajo de otro en el móvil
   y de tres en tres en pantallas más anchas */
.presupuesto-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.presupuesto-campos-juntos { margin-top: 0; }
.presupuesto-campos > div { min-width: 0; }
.presupuesto-campos label { display: block; margin: 0 0 6px; }
@media (min-width: 640px) {
  .presupuesto-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
}

/* Ficha de una partida */
.presupuesto-nombre { overflow-wrap: anywhere; }
.tarjeta .presupuesto-pagos + h3 { border-top: 1px solid var(--borde); padding-top: 22px; }

/* ---- itinerario ---- */
/* Itinerario: la boda paso a paso, por días y horas */
.titulo-bodas .itinerario-acciones { margin: 0; }
.itinerario-boda { margin: -8px 0 16px; color: var(--tostado); overflow-wrap: anywhere; }
.itinerario-boda strong { color: var(--carbon); }
.itinerario-resumen { margin: 0 0 14px; }

/* Alta rápida: el desplegable del día y la casilla «Se ve en la web de la boda» */
.alta-rapida .itinerario-dia-campo {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 50px;
  padding: 12px 10px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--salvia);
  border-color: color-mix(in srgb, var(--tostado) 60%, var(--blanco));
  border-radius: var(--radio);
}
.itinerario-casilla { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 6px 0 2px; font-size: .95rem; cursor: pointer; }
.alta-rapida .itinerario-casilla input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; }

/* Título de cada día («El día antes», «El día de la boda»…), cuando hay momentos en más de un día */
.itinerario-dia { max-width: 860px; margin: 0 0 14px; padding-bottom: 6px; font-size: 1.15rem; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.itinerario-linea + .itinerario-dia { margin-top: 30px; }

/* Línea de tiempo: una raya vertical con una marca por momento. En el móvil la hora va encima de cada ficha. */
.itinerario-linea { list-style: none; max-width: 860px; margin: 0 0 20px; padding: 0; }
.itinerario-momento { position: relative; margin-left: 6px; padding: 0 0 18px 20px; border-left: 3px solid var(--salvia); }
.itinerario-momento:last-child { padding-bottom: 2px; }
.itinerario-momento::before { content: ""; position: absolute; top: 5px; left: -8px; width: 13px; height: 13px; background: var(--carbon); border-radius: 3px; }
.itinerario-momento.itinerario-interno::before { background: var(--blanco); border: 2px solid var(--tostado); }

.itinerario-hora { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 6px; font-size: 1.2rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.itinerario-fin, .itinerario-madrugada { font-size: .82rem; font-weight: 400; color: var(--tostado); }
.itinerario-madrugada { padding: 1px 6px; font-weight: 600; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
/* Lo que no tiene una hora concreta («Del 3 al 15 de mayo»): su texto, siempre encima de la ficha */
.itinerario-cuando { min-width: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }

.itinerario-ficha { padding: 14px 16px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
.itinerario-interno .itinerario-ficha { background: var(--salmon); background: color-mix(in srgb, var(--salmon) 45%, var(--blanco)); border-color: var(--salmon-fuerte); }
.itinerario-titulo { display: block; font-size: 1.1rem; font-weight: 600; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
a.itinerario-titulo { padding: 4px 0; }
a.itinerario-titulo:hover { text-decoration: underline; }
/* El sitio, su dirección y el enlace «Cómo llegar» */
.itinerario-lugar, .itinerario-direccion { margin: 2px 0 0; font-size: .95rem; color: var(--tostado); overflow-wrap: anywhere; }
.itinerario-mapa { margin: -4px 0 -6px; font-size: .95rem; }
.itinerario-mapa a { display: inline-block; padding: 10px 0; font-weight: 600; }
.itinerario-descripcion { margin: 8px 0 0; overflow-wrap: anywhere; }

/* Lo que sólo ve quien organiza: responsable, contacto y notas */
.itinerario-datos { margin: 12px 0 0; padding: 10px 0 0; font-size: .95rem; border-top: 1px solid var(--borde); }
.itinerario-interno .itinerario-datos { border-top-color: var(--salmon-fuerte); }
.itinerario-datos div { display: flex; gap: 10px; margin: 0 0 4px; }
.itinerario-datos dt { flex: none; width: 100px; color: var(--tostado); }
.itinerario-datos dd { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.itinerario-datos a { font-weight: 600; }

/* Marcas de cada momento para quien organiza: si se enseña a los invitados o es interno, qué pueden
   subir los invitados a su galería y cuántas fotos y vídeos lleva ya */
.itinerario-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; }
.itinerario-marca { display: inline-block; padding: 3px 8px; font-size: .78rem; font-weight: 600; background: var(--borde); background: color-mix(in srgb, var(--salvia) 35%, var(--blanco)); border-radius: var(--radio); }
.itinerario-marca.itinerario-reservado { background: var(--blanco); border: 1px solid var(--salmon-fuerte); }
.itinerario-galeria { margin: -9px 0; padding: 12px 2px; font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }

/* Ficha de un momento: separación de los apartados «En la web de la boda» y «Sólo para vosotros» */
.itinerario-apartado { margin: 30px 0 4px; padding-top: 22px; border-top: 1px solid var(--borde); }

/* Ficha de un momento: el bloque «Fotos y vídeos de este momento», con lo que ya tiene su galería
   y el formulario para subir varias a la vez */
.itinerario-fotos { margin: 0 0 28px; }
.itinerario-fotos .itinerario-apartado { margin-bottom: 12px; }
.itinerario-fotos > p { margin: 0 0 10px; overflow-wrap: anywhere; }
.itinerario-fotos-hay a { font-weight: 600; }
.itinerario-fotos .formulario { margin-top: 16px; padding: 16px 14px; background: var(--blanco); border: 1px solid var(--borde); border-left: 3px solid var(--salvia); border-radius: var(--radio); }

/* Con sitio (y en papel), la hora pasa a la izquierda de la raya. Lo que no tiene hora deja su
   texto encima de la ficha, porque en esa columna estrecha no cabría. */
@media print, screen and (min-width: 700px) {
  .itinerario-linea { padding-left: 106px; }
  .itinerario-momento { min-height: 84px; }
  .itinerario-momento:last-child { min-height: 0; }
  .itinerario-momento:not(.itinerario-sin-hora) > .itinerario-hora { position: absolute; top: 0; right: calc(100% + 19px); flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 3px; width: 94px; margin: 0; text-align: right; }
}

/* La hoja del día en papel: sin cajas ni fondos, una línea por momento */
@media print {
  .itinerario-boda { margin-top: 0; font-size: 1.05rem; }
  .itinerario-dia { max-width: none; break-after: avoid; page-break-after: avoid; }
  .itinerario-linea { max-width: none; }
  .itinerario-momento { padding-bottom: 12px; break-inside: avoid; page-break-inside: avoid; }
  .itinerario-ficha, .itinerario-interno .itinerario-ficha { padding: 0 0 10px; background: none; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; }
  .itinerario-titulo, .itinerario-datos a { color: var(--carbon); text-decoration: none; }
  a.itinerario-titulo { padding: 0; }
  .itinerario-marcas { margin-top: 8px; }
  .itinerario-marca, .itinerario-marca.itinerario-reservado { padding: 0; font-weight: 400; color: var(--tostado); background: none; border: 0; }
}

/* ---- notas ---- */
/* Notas: ideas y apuntes de la organización */
.titulo-bodas .notas-cuenta { margin: 0; }

/* Búsqueda por texto */
.notas-buscar input[type="search"] {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 420px;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 1rem;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--tostado);
  border-color: color-mix(in srgb, var(--tostado) 60%, var(--blanco));
  border-radius: var(--radio);
  -webkit-appearance: none;
  appearance: none;
}
.notas-buscar a { padding: 10px 4px; font-size: .95rem; }

/* Lista de notas: una columna en el móvil y dos cuando hay sitio */
.notas-lista { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 20px; padding: 0; }
@media (min-width: 1100px) {
  .notas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.notas-nota { padding: 18px 18px 14px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
.notas-nota.notas-fijada { border-left: 4px solid var(--tostado); }
.notas-marca { margin: 0 0 8px; }
.notas-marca .etiqueta { display: inline-block; margin: 0; }
.notas-titulo { margin: 0 0 8px; font-size: 1.15rem; overflow-wrap: anywhere; }
.notas-titulo a { text-decoration: none; }
.notas-titulo a:hover { text-decoration: underline; }
.notas-texto { margin: 0 0 10px; overflow-wrap: anywhere; }
.notas-mas { margin: 0 0 10px; font-size: .95rem; }
.notas-mas a { display: inline-block; padding: 6px 0; }

/* Pie de cada nota: quién y cuándo, y sus botones */
.notas-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.notas-pie .nota { flex: 1 1 200px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.notas-pie form { margin: 0; }

/* ---- despues ---- */
/* Después de la boda: cosas por cerrar, regalos y agradecimientos, y pagos pendientes */
.despues-entrada { margin: 0 0 4px; }

/* Cosas por cerrar: la lista de casillas dentro de su tarjeta */
.tarjeta ul.despues-lista { padding-left: 0; }
.despues-borrar { min-height: 44px; margin: -7px -6px -7px 0; }

/* Regalos y agradecimientos: contador y filtro */
.despues-cuenta { margin: 0 0 8px; }
.despues-cuenta .botones { margin: 0; }
.despues-contador { margin: 0; }
.despues-contador strong { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Una fila por invitado. Móvil: nombre y casilla arriba, el regalo debajo. Con sitio, todo en una línea. */
.tarjeta ul.despues-invitados { list-style: none; margin: 0; padding: 0; }
.despues-invitado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nombre casilla" "regalo regalo";
  align-items: center;
  gap: 6px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--borde);
}
.despues-nombre { grid-area: nombre; font-weight: 600; overflow-wrap: anywhere; }
.despues-nombre .nota { font-weight: 400; white-space: nowrap; }
.despues-agradecido .despues-nombre { color: var(--tostado); }
.despues-regalo {
  grid-area: regalo;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--tostado);
  border-color: color-mix(in srgb, var(--tostado) 60%, var(--blanco));
  border-radius: var(--radio);
}
.despues-casilla { grid-area: casilla; display: flex; align-items: center; gap: 8px; min-height: 44px; padding-left: 4px; cursor: pointer; }
.despues-casilla input { flex: none; width: 22px; height: 22px; margin: 0; }
@media (min-width: 700px) {
  .despues-invitado { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto; grid-template-areas: "nombre regalo casilla"; gap: 12px 16px; }
}

/* Paso entre tandas de invitados, cuando son muchos */
.despues-paginas { padding-top: 12px; border-top: 1px solid var(--borde); }
.despues-paginas p { margin: 0; }

/* El botón «Guardar» se queda a la vista, pegado abajo, mientras se recorre la lista */
.despues-guardar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 16px -20px -24px;
  padding: 12px 20px;
  background: var(--blanco);
  border-top: 1px solid var(--borde);
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: 0 -10px 16px -14px var(--tostado);
}
.despues-guardar .boton { flex: 0 1 240px; }
.despues-guardar .nota { font-weight: 600; color: var(--rojo); }

/* Pagos pendientes: cada uno lleva a su partida del presupuesto */
.tarjeta ul.despues-pagos { list-style: none; margin: 0 0 12px; padding: 0; }
.despues-pago { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 44px; padding: 12px 0; color: var(--carbon); text-decoration: none; border-top: 1px solid var(--borde); }
.despues-pagos li:first-child .despues-pago { padding-top: 4px; border-top: 0; }
a.despues-pago:hover strong { text-decoration: underline; }
.despues-pago-que { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.despues-pago-que strong, .despues-pago-que > .nota { display: block; }
.despues-pago-importe { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.despues-total { margin: 0; padding-top: 12px; text-align: right; border-top: 1px solid var(--borde); }

/* ---- web ---- */
/* Web de la boda: pantalla de gestión dentro de la aplicación (/app/web).
   La página pública que ven los invitados tiene su propia hoja: boda-publica.css. */

/* Estado y dirección */
.etiqueta.web-publicada { background: color-mix(in srgb, var(--salvia) 38%, var(--blanco)); }
.etiqueta.web-pendiente { background: var(--salmon); }
.etiqueta.web-no { color: var(--rojo); background: color-mix(in srgb, var(--rojo) 12%, var(--blanco)); }
.web-direccion {
  margin: 0 0 14px;
  padding: 12px 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.web-nota-suelta { margin: 14px 0 0; }
.web-cambiar { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid var(--borde); }
.web-cambiar summary { padding: 10px 0; font-weight: 600; cursor: pointer; }
.web-cambiar .formulario { margin-top: 8px; }
.web-campo-direccion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.web-prefijo { font-size: .95rem; color: var(--tostado); overflow-wrap: anywhere; }
.formulario .web-campo-direccion input[type="text"] { flex: 1 1 200px; width: auto; min-width: 0; }

/* Índice de lo que han enviado los invitados */
.web-indice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 20px 0; }
.web-indice a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--carbon);
  text-decoration: none;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: transform .2s, box-shadow .2s;
}
.web-indice a:hover { color: var(--carbon); transform: translateY(-2px); box-shadow: 0 8px 16px -12px var(--sombra-60); }
.web-numero { flex: none; font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.web-rotulo { font-size: .85rem; line-height: 1.3; color: var(--tostado); }
@media (min-width: 600px) {
  .web-indice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .web-indice a { display: block; }
  .web-rotulo { display: block; margin-top: 2px; }
}

/* Contenido: foto de portada */
.web-portada-mini { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 0 14px; border: 1px solid var(--borde); border-radius: var(--radio); }

/* El día, paso a paso: qué momentos se ven en la web y qué se puede subir a la galería de cada uno */
.tarjeta ul.web-lista-momentos { list-style: none; margin: 0; padding: 0; }
.web-momentos .web-dia { margin: 20px 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tostado); }
.web-momento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; border-top: 1px solid var(--borde); }
.web-momento-que { margin: 0; overflow-wrap: anywhere; }
.web-momento-cuando { margin-right: 4px; color: var(--tostado); font-variant-numeric: tabular-nums; }
.formulario .web-momento .casilla { align-items: center; min-height: 44px; margin: 0; }
.formulario .web-momento .casilla input { margin: 0; }
.web-momento-subidas { min-width: 0; }
.formulario .web-momento-subidas label { display: block; margin: 0 0 4px; font-size: .85rem; font-weight: 400; color: var(--tostado); }
.formulario .web-momento-subidas select { min-height: 44px; padding: 8px 10px; }
.formulario .web-momentos-nota { margin: 0; padding-top: 14px; border-top: 1px solid var(--borde); }
@media (min-width: 700px) {
  .web-momento { grid-template-columns: minmax(0, 1fr) auto 200px; align-items: center; gap: 8px 22px; }
}

/* Contenido: si lo que suben los invitados se aprueba antes o se ve al momento */
.formulario .web-aprobacion { margin-top: 22px; }
.formulario .web-aprobacion + .nota { margin-top: 8px; }

/* Después de confirmar: la página de gracias */
.web-opciones { min-width: 0; margin: 0; padding: 0; border: 0; }
.web-opciones legend { padding: 0; font-weight: 600; }
.formulario .web-opciones .casilla { align-items: center; min-height: 44px; margin: 4px 0 0; }
.formulario .web-opciones .casilla input { margin: 0; }
.web-gracias h3 { margin: 26px 0 6px; padding-top: 22px; border-top: 1px solid var(--borde); }
.formulario.web-gracias h3 + .nota { margin: 0; }
.formulario.web-gracias h3 + .nota + label { margin-top: 14px; }
.formulario.web-gracias h3 + label { margin-top: 6px; }

/* Listas de confirmaciones y de mensajes */
.tarjeta ul.web-lista, .tarjeta ul.web-fotos { list-style: none; margin: 0; padding: 0; }
.web-lista { margin-top: 4px; }
.web-elemento { padding: 16px 0; border-top: 1px solid var(--borde); scroll-margin-top: 12px; }
/* Tras guardar se vuelve al bloque que se ha tocado: que el anuncio fijo del móvil no lo tape */
.web-ancla { scroll-margin-top: 16px; }
@media (max-aspect-ratio: 4/5) { .web-ancla, .web-elemento { scroll-margin-top: calc(43vw + 16px); } }
.web-elemento:last-child { padding-bottom: 0; }
.web-elemento .etiqueta { align-self: center; margin: 0; }
.web-elemento .nota { margin: 8px 0 0; }
.web-detalle { margin: 6px 0 0; overflow-wrap: anywhere; }
.web-cita {
  margin: 10px 0 0;
  padding: 10px 14px;
  overflow-wrap: anywhere;
  background: var(--crema);
  border-left: 3px solid var(--salvia);
  border-radius: var(--radio);
}
.web-acciones { margin: 12px 0 0; }
.web-acciones form { margin: 0; }
.web-acciones .boton { min-height: 44px; }
.formulario .web-acciones .boton { margin-top: 0; }
.web-enlazar { margin: 14px 0 0; padding: 14px; background: var(--crema); border: 1px solid var(--borde); border-radius: var(--radio); }
.web-contador { margin: 0 0 12px; font-weight: 600; }
.web-todas { margin: 0 0 14px; }

/* Confirmaciones: los acompañantes de cada respuesta, y si ya está en la lista de invitados o por qué no */
.tarjeta ul.web-acompanantes { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 3px solid var(--borde); }
.web-acompanantes li { padding: 3px 0; overflow-wrap: anywhere; }
.web-en-lista { font-weight: 600; }
.web-porque { margin-top: 10px; padding: 8px 12px; background: var(--salmon); background: color-mix(in srgb, var(--salmon) 55%, var(--blanco)); border-radius: var(--radio); }

/* Fotos y vídeos: cómo se ven los de los invitados y el bloque para subir los de la pareja, a un
   momento del día (cada uno lleva a su ficha) o a la galería general */
.web-modo { margin: 0 0 16px; }
.web-subir { margin: 0 0 18px; padding: 16px 14px; background: var(--crema); border: 1px solid var(--borde); border-left: 3px solid var(--salvia); border-radius: var(--radio); }
.tarjeta .web-subir h3 { margin: 0 0 10px; padding: 0; font-size: 1.1rem; border: 0; }
.web-subir > p { margin: 0 0 10px; overflow-wrap: anywhere; }
.web-subir h4 { margin: 20px 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tostado); }
.tarjeta ul.web-subir-momentos { list-style: none; margin: 0 0 8px; padding: 0; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
.web-subir-momentos li + li { border-top: 1px solid var(--borde); }
.web-subir-momentos a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-height: 48px; padding: 12px; color: var(--carbon); text-decoration: none; transition: background .2s; }
.web-subir-momentos a:hover { color: var(--carbon); background: var(--salmon); background: color-mix(in srgb, var(--salmon) 45%, var(--blanco)); }
.web-subir-que { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.web-subir-cuantas { flex: 1 1 auto; font-size: .85rem; color: var(--tostado); }
.web-subir-ir { flex: none; font-size: .9rem; font-weight: 600; color: var(--enlace); text-decoration: underline; }
.web-subir .web-subir-nota { margin: 0 0 12px; }
.web-subir .formulario { padding: 14px 12px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
/* El campo para elegir varios archivos no puede ensanchar la pantalla en el móvil */
.formulario.web-subida input[type="file"] { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; }
.web-lleno { margin: 0 0 14px; }
@media (min-width: 600px) {
  .web-subir { padding: 20px; }
  .web-subir-que { flex: 1 1 0; }
  .web-subir-cuantas { flex: none; }
  .web-subir .formulario { padding: 18px 16px; }
}

/* Fotos y vídeos, juntos los de cada momento */
.tarjeta h3.web-galeria { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 22px 0 10px; padding-top: 16px; font-size: 1.05rem; overflow-wrap: anywhere; border-top: 1px solid var(--borde); }
.web-galeria .nota { font-weight: 400; }
.web-galeria-subir { margin: -12px 0 -12px auto; padding: 12px 2px; font-size: .9rem; font-weight: 600; }
.web-galeria-nota { margin: -4px 0 10px; }
.tarjeta ul.web-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .tarjeta ul.web-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.web-foto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  scroll-margin-top: 12px;
}
.web-foto a { display: block; }
.web-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--borde); border-radius: 3px; }
/* Los vídeos, enteros (sin recortar) y con sus mandos; en el móvil ocupan la fila entera para que los mandos quepan */
.web-foto video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--borde); border-radius: 3px; }
@media (max-width: 599px) {
  .web-foto.web-video { grid-column: 1 / -1; }
  .web-foto.web-video video { aspect-ratio: 16 / 9; }
}
.web-foto .etiqueta { margin: 0; }
.web-foto .nota { margin: 0; overflow-wrap: anywhere; }
.web-foto .web-acciones { margin-top: auto; padding-top: 4px; gap: 6px; }
.web-foto .web-acciones form { flex: 1 1 auto; }
.web-foto .web-acciones .boton { width: 100%; padding-right: 8px; padding-left: 8px; }

/* «Nuestra historia» e «Información útil»: los capítulos y los apartados, en su orden, cada uno con
   lo que tiene y con sus botones (editar, subir, bajar y eliminar); debajo, el alta */
.tarjeta ul.web-apartados { list-style: none; margin: 0 0 16px; padding: 0; border-bottom: 1px solid var(--borde); }
.web-apartado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--borde); }
.web-apartado-que { min-width: 0; }
.web-apartado-que .dato { display: inline-block; text-decoration: none; }
.web-apartado-que a.dato { padding: 4px 0; }
.web-apartado-que a.dato:hover { text-decoration: underline; }
.web-apartado-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; font-size: .85rem; color: var(--tostado); overflow-wrap: anywhere; }
.web-apartado-datos .etiqueta { align-self: center; margin: 0; color: var(--carbon); }
.web-apartado .web-acciones { margin: 0; gap: 6px; }
.web-apartado-rotulo { margin: 0 0 8px; }
.web-apartado-habituales { margin: 0 0 14px; gap: 6px; }
.web-apartado-alta { margin-bottom: 0; }
.web-apartado-alta .boton { flex: 0 0 auto; }
/* Los botones van siempre debajo del título, también en pantallas anchas: con «Subir un puesto» y
   «Bajar un puesto» a su lado, al título no le quedaría sitio */

/* Subir fotos y vídeos: la declaración y la pregunta de si la empresa puede usarlos, obligatorias */
.formulario .web-permiso { margin-top: 18px; }
.formulario .web-permiso > .nota { margin: 2px 0 4px; }

/* Cada foto y cada vídeo: si la empresa puede usarlo fuera de la web (y bajar ese permiso, nunca
   subirlo) y, si alguien ha pedido desde la web que se quite, el aviso con su motivo */
.web-foto .web-permiso { color: var(--carbon); }
.web-retirada {
  margin: 0;
  padding: 8px 10px;
  font-size: .9rem;
  overflow-wrap: anywhere;
  color: var(--error-texto);
  background: var(--error-fondo);
  border-left: 3px solid var(--rojo);
  border-radius: var(--radio);
}
.web-retirada .nota { display: block; margin-top: 2px; }
.web-permiso-bajar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.web-permiso-bajar label { font-size: .85rem; color: var(--tostado); }
.web-permiso-bajar select {
  flex: 1 1 90px;
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  font: inherit;
  color: var(--carbon);
  background: var(--blanco);
  border: 1px solid var(--campo);
  border-radius: var(--radio);
}
.web-permiso-bajar .boton { flex: 1 1 100%; min-height: 40px; padding-right: 8px; padding-left: 8px; }

/* Panel máster, «Fotos que podéis usar»: las normas arriba y, en cada una, su permiso bien visible */
.normas-fotos { border-left: 3px solid var(--salvia); }
.tarjeta.normas-fotos ul { margin: 0 0 12px; padding-left: 20px; }
.normas-fotos li { margin: 6px 0; overflow-wrap: anywhere; }
.normas-fotos .nota { margin: 0; }
.admin-foto > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--borde); border-radius: 3px; }
.admin-foto .etiqueta { align-self: stretch; font-size: .8rem; text-align: center; }
.etiqueta.permiso-si { background: color-mix(in srgb, var(--salvia) 38%, var(--blanco)); }
.etiqueta.permiso-sin-caras { color: var(--error-texto); background: var(--error-fondo); }
.admin-fotos-mas { margin: 22px 0 0; }
/* En cada una, el nombre de la boda va enlazado dentro de su nota, en la misma línea que la fecha
   (lo de .web-foto a es para la foto de la pareja, que se abre entera) */
.admin-foto .nota a { display: inline; }
/* Lo descargado que ya no se puede usar, arriba, para que no pase desapercibido */
.ya-no-usables { border-left: 3px solid var(--rojo); }
.ya-no-usables > .nota { margin: 0 0 12px; }

/* ---- lugar ---- */
/* El lugar de la boda: los espacios de la empresa (panel) y su foto */

/* Marco de una foto en 4:3: la imagen lo llena recortada, nunca deformada; sin foto, un recuadro
   liso del mismo tamaño. Su ancho lo pone quien lo usa; el alto sale solo (tres cuartos del ancho). */
.lugar-marco {
  position: relative;
  overflow: hidden;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.lugar-marco::before { content: ""; display: block; padding-top: 75%; }
.lugar-marco > img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lugar-sin-foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-size: .78rem;
  line-height: 1.2;
  text-align: center;
  color: var(--tostado);
}

/* Panel, pantalla «Espacios»: la lista, cada espacio con su foto en pequeño, su nombre, sus botones
   (subir, bajar y eliminar) y, plegado, el formulario para cambiarle el nombre o la foto */
.tarjeta ul.lugar-espacios { list-style: none; margin: 0; padding: 0; }
.lugar-espacio {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "foto datos"
    "acciones acciones"
    "cambiar cambiar";
  gap: 10px 14px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--borde);
  /* Después de tocar un espacio se vuelve a él (#espacio-N): que no quede pegado al borde */
  scroll-margin-top: 12px;
}
.lugar-espacio:first-child { padding-top: 0; border-top: 0; }
.lugar-espacio:last-child { padding-bottom: 0; }
/* El aviso de lo que se acaba de hacer con un espacio va encima de él, a todo el ancho; su fila
   sólo existe en el espacio que lo lleva */
.lugar-espacio-con-aviso {
  grid-template-areas:
    "aviso aviso"
    "foto datos"
    "acciones acciones"
    "cambiar cambiar";
}
.lugar-espacio-aviso { grid-area: aviso; min-width: 0; }
.lugar-espacio-aviso .aviso { margin: 0; overflow-wrap: anywhere; }
.lugar-espacio-foto { grid-area: foto; }
.lugar-espacio-datos { grid-area: datos; min-width: 0; }
.lugar-espacio-datos .dato, .lugar-espacio-datos .nota { display: block; margin: 0; }
.lugar-espacio-acciones { grid-area: acciones; margin: 0; gap: 6px; }
.lugar-espacio-acciones form { margin: 0; }
.lugar-espacio-cambiar { grid-area: cambiar; min-width: 0; }
.lugar-espacio-cambiar summary { padding: 11px 0; font-weight: 600; color: var(--enlace); }
.lugar-espacio-cambiar .formulario { padding: 16px 14px; background: var(--crema); border: 1px solid var(--borde); border-radius: var(--radio); }
/* Los errores al cambiar un espacio salen aquí, encima de su formulario */
.lugar-espacio-cambiar > .aviso { margin: 0 0 10px; overflow-wrap: anywhere; }
.lugar-espacio-quitar { margin: 10px 0 0; }
.lugar-espacio-quitar form { margin: 0; }
/* Los de la instalación: sólo su recuadro y su nombre, sin botones */
.lugar-espacio-fijo { grid-template-areas: "foto datos"; }
.tarjeta .lugar-traer { margin: 0 0 20px; }
/* El campo de la foto no se sale de la tarjeta en el móvil */
.lugar-formulario input[type="file"] { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; }
@media (min-width: 600px) {
  .lugar-espacio {
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-areas:
      "foto datos"
      "foto acciones"
      "cambiar cambiar";
  }
  .lugar-espacio-con-aviso {
    grid-template-areas:
      "aviso aviso"
      "foto datos"
      "foto acciones"
      "cambiar cambiar";
  }
  .lugar-espacio-foto { align-self: start; }
  .lugar-espacio-datos { align-self: end; }
  .lugar-espacio-acciones { align-self: start; }
  .lugar-espacio-fijo { grid-template-areas: "foto datos"; }
  .lugar-espacio-fijo .lugar-espacio-datos { align-self: center; }
}

/* La tarjeta «El lugar de vuestra boda» (Inicio y «Espacios y proveedores»): alargada, con el texto
   a un lado y la foto al otro, en 4:3 (.lugar-marco). En el móvil la foto es más estrecha y el
   desplegable o el botón van debajo, a todo el ancho; sin foto, el texto ocupa toda la tarjeta. */
.tarjeta.lugar-tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  margin: 0 0 20px;
  padding: 16px;
}
.tarjeta.lugar-con-foto { grid-template-columns: minmax(0, 1fr) 132px; }
.lugar-texto { grid-column: 1; grid-row: 1; min-width: 0; }
.lugar-foto { grid-column: 2; grid-row: 1; }
.lugar-tarjeta .lugar-pie { grid-column: 1 / -1; min-width: 0; margin: 0; }
.lugar-rotulo {
  margin: 0 0 4px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tostado);
  overflow-wrap: anywhere;
}
.lugar-titulo { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.lugar-texto .lugar-frase { margin: 4px 0 0; overflow-wrap: anywhere; }
.lugar-enlaces { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; }
.lugar-enlaces a { display: inline-flex; align-items: center; min-height: 44px; }
/* El botón de la tarjeta, a todo el ancho en el móvil */
.lugar-pie > .boton { display: block; width: 100%; }

/* El desplegable de fotos para elegir el espacio, sin JavaScript: el <summary> hace de botón
   («Elegir» o «Cambiar») y, al abrirlo, salen los espacios en rejilla (dos por fila en el móvil,
   tres en escritorio), cada uno con su foto y su nombre debajo, y el botón «Guardar» */
.lugar-elegir > summary { display: block; width: 100%; list-style: none; }
.lugar-elegir > summary::-webkit-details-marker { display: none; }
.lugar-elegir > summary::after { content: " ▾"; }
.lugar-elegir[open] > summary::after { content: " ▴"; }
.lugar-elegir form { margin: 0; }
.lugar-opciones { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.lugar-opciones legend { margin: 0 0 10px; padding: 0; font-weight: 600; }
.lugar-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 900px; }
/* Cada opción es su etiqueta entera: se marca pulsando en cualquier punto de ella. El recuadro que
   la rodea (.lugar-opcion-fondo) va justo detrás del botón de opción, para pintarse de otro color
   cuando está marcada y para enseñar el foco al recorrerlas con el teclado. */
.lugar-opcion {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-areas:
    "foto foto"
    "marca .";
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 8px 8px 10px;
  cursor: pointer;
}
.lugar-opcion-fondo {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.lugar-opcion > input {
  grid-area: marca;
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--carbon);
  cursor: pointer;
}
.lugar-opcion > .lugar-marco { grid-area: foto; z-index: 1; }
/* El nombre va debajo de la foto, a todo el ancho de la opción: comparte fila con el botón de
   opción y sólo su primera línea le deja sitio (22 px y 6 de separación). En una columna a la
   derecha del botón, en el móvil le quedarían unos 96 px y las palabras de once o doce letras
   («Restaurante») saldrían partidas; así las líneas siguientes tienen todo el ancho. La letra, un
   poco más pequeña en el móvil. Marcada, la opción se distingue por su recuadro y por el botón: el
   nombre no cambia de grosor, para que no cambie de línea al elegir. */
.lugar-opcion-nombre {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-top: 1px;
  font-size: .9rem;
  line-height: 1.3;
  text-indent: 28px;
  overflow-wrap: anywhere;
}
.lugar-opcion:hover > .lugar-opcion-fondo { border-color: var(--salvia); }
.lugar-opcion > input:checked + .lugar-opcion-fondo { background: var(--salmon); border-color: var(--carbon); box-shadow: inset 0 0 0 1px var(--carbon); }
.lugar-opcion > input:focus-visible + .lugar-opcion-fondo { outline: 3px solid var(--carbon); outline-offset: 2px; }
.lugar-elegir .lugar-guardar { margin-top: 14px; }

@media (min-width: 480px) {
  .tarjeta.lugar-con-foto { grid-template-columns: minmax(0, 1fr) 180px; }
}
/* Escritorio: la foto, más ancha y a la derecha de todo el texto. El botón queda bajo el texto; el
   desplegable, al abrirlo, pasa debajo de los dos y ocupa todo el ancho de la tarjeta. */
@media (min-width: 700px) {
  .tarjeta.lugar-tarjeta { gap: 14px 24px; padding: 20px 24px; }
  .tarjeta.lugar-con-foto { grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto 1fr; }
  .lugar-con-foto .lugar-foto { grid-row: 1 / span 2; }
  .lugar-con-foto .lugar-pie { grid-column: 1; grid-row: 2; }
  .lugar-con-foto .lugar-elegir[open] { grid-column: 1 / -1; grid-row: 3; }
  .lugar-rotulo { font-size: .78rem; }
  .lugar-titulo { font-size: 1.5rem; }
  .lugar-pie > .boton, .lugar-elegir > summary { display: inline-block; width: auto; }
  .lugar-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .lugar-opcion-nombre { padding-top: 0; font-size: 1rem; }
}
@media (min-width: 1200px) {
  .tarjeta.lugar-con-foto { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---- agenda ---- */
/* Agenda de quien lleva varias bodas: «Hoy y mañana», el calendario del mes, la lista y la ficha de una cita */

/* «Hoy y mañana»: también en la portada del panel y en «Mis bodas». Cada cosa es un aviso como los de
   las tareas (.aviso-tarea); las bodas, en el color del día de la boda. */
.agenda-avisos { margin: 0 0 22px; }
.agenda-avisos-cabeza { margin: 0 0 10px; }
.agenda-avisos-cabeza h2 { margin: 0; font-size: 1.15rem; }
.agenda-avisos-cabeza a { display: inline-block; padding: 6px 0; font-size: .95rem; }
.agenda-avisos-lista { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.agenda-avisos-lista .aviso-tarea span { min-width: 0; overflow-wrap: anywhere; }
.aviso-tarea.agenda-aviso-boda { font-weight: 600; background: linear-gradient(180deg, var(--tinte-claro) 0%, var(--dia-boda) 100%); border-color: var(--tinte-borde); border-left-color: var(--acento); }
.aviso-tarea.agenda-aviso-boda.hoy { border-left-color: var(--rojo); }
.agenda-avisos > .nota { margin: 0; }

.agenda-filtros { margin-bottom: 20px; }

/* «Apuntar una cita»: el formulario corto de arriba, plegado bajo su título (en una pantalla ancha,
   app.js lo abre). Cada campo con su rótulo encima: de uno en uno en el móvil, de dos en dos o de tres
   en tres con más sitio. */
.agenda-apuntar:not([open]) { padding-top: 12px; padding-bottom: 12px; }
.agenda-apuntar summary { padding: 8px 0; cursor: pointer; }
.agenda-apuntar summary h2 { display: inline; margin: 0; font-size: 1.15rem; }
.agenda-apuntar[open] summary { margin-bottom: 12px; }
.agenda-apuntar .aviso { margin: 0 0 14px; }
.agenda-rapida-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 640px) { .agenda-rapida-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .agenda-rapida-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.agenda-rapida-campos > div { display: flex; flex-direction: column; min-width: 0; }
.formulario .agenda-rapida-campos label, .formulario .agenda-rapida-campos label:first-of-type { margin: 12px 0 6px; }
.agenda-rapida-botones { margin: 18px 0 0; }
.formulario .agenda-rapida-botones .boton { margin-top: 0; }
.agenda-rapida > .nota { margin: 12px 0 0; }
.agenda-correo { margin: -12px 0 22px; }

/* El error de un campo, debajo de él, y el campo marcado (en «Apuntar una cita» y en la ficha de una cita) */
.campo-error { margin: 6px 0 0; font-size: .9rem; font-weight: 500; color: var(--error-texto); }
.formulario [aria-invalid="true"] { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }

/* El mes: el título y, debajo en el móvil o a sus lados en el escritorio, los botones para cambiar de mes */
.agenda-mes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; margin: 0 0 12px; }
.agenda-mes h2 { grid-column: 1 / -1; margin: 0; text-align: center; }
.agenda-mes .boton { width: 100%; padding-left: 10px; padding-right: 10px; }
.agenda-mes .agenda-siguiente { grid-column: 2; }
.agenda-mes .agenda-este-mes { grid-column: 1 / -1; justify-self: center; padding: 4px 0; font-size: .95rem; }
@media (min-width: 640px) {
  .agenda-mes { grid-template-columns: auto minmax(0, 1fr) auto; }
  .agenda-mes h2 { grid-column: 2; grid-row: 1; }
  .agenda-mes .agenda-anterior { grid-column: 1; grid-row: 1; }
  .agenda-mes .agenda-siguiente { grid-column: 3; grid-row: 1; }
  .agenda-mes .boton { width: auto; padding-left: 16px; padding-right: 16px; }
  .agenda-mes .agenda-este-mes { grid-row: 2; }
}

/* Los días: todos son un enlace a ese día (en uno sin nada, para apuntar ahí una cita). En el móvil sólo
   llevan marcas (la boda, un rectángulo; cada cita, un punto); en el escritorio, la boda y la hora y el
   tipo de cada cita. */
.agenda-rejilla { margin: 0 0 24px; }
.agenda-rejilla abbr { text-decoration: none; }
a.agenda-dia { display: block; color: var(--carbon); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.agenda-dia:hover { color: var(--carbon); border-color: var(--secundario-borde); box-shadow: 0 8px 16px -12px var(--sombra-60); transform: translateY(-2px); }
.agenda-dia.hoy.dia-boda { border-color: var(--carbon); }
.agenda-pasado .dia-numero { color: var(--tostado); font-weight: 500; }
.agenda-elegido { outline: 3px solid var(--enlace); outline-offset: 1px; }
.agenda-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.agenda-marca { display: block; flex: none; width: 8px; height: 8px; background: var(--salvia); border-radius: 4px; }
.agenda-marca-boda { width: 14px; background: var(--acento); border-radius: 2px; }
.agenda-marca-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.agenda-mas { font-size: .68rem; font-weight: 600; line-height: 1; color: var(--tostado); }
@media (min-width: 760px) {
  .agenda-marcas { display: block; }
  .agenda-marca {
    width: auto;
    height: auto;
    margin: 0 0 3px;
    padding: 2px 6px;
    font-size: .78rem;
    line-height: 1.3;
    color: var(--carbon);
    background: var(--crema-fuerte);
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .agenda-marca-boda { font-weight: 600; background: var(--tinte-borde); border-left: 3px solid var(--acento); }
  .agenda-marca-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .agenda-mas { display: block; padding: 0 6px; font-size: .78rem; line-height: 1.3; }
}

/* La lista: el día elegido o lo próximo, agrupado por día. Las bodas, delante y en el color del día de la boda. */
.agenda-lista-cabeza { margin: 0 0 6px; }
.agenda-lista-cabeza h2 { margin: 0; }
.agenda-lista-cabeza a { display: inline-block; padding: 6px 0; font-size: .95rem; }
.agenda-lista-enlaces { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; }
.agenda-lista-dias > .nota { margin: 0 0 12px; }
.agenda-dia-titulo { margin: 22px 0 8px; font-size: 1rem; }
.agenda-dia-titulo a { color: var(--carbon); text-decoration: none; }
.agenda-dia-titulo a:hover { text-decoration: underline; }
.agenda-lista { list-style: none; margin: 0 0 8px; padding: 0; }
.agenda-cita, .agenda-boda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0 0 8px;
  padding: 12px 14px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.agenda-boda {
  background: linear-gradient(180deg, var(--tinte-claro) 0%, var(--dia-boda) 100%);
  border-color: var(--tinte-borde);
  border-left: 5px solid var(--acento);
}
@media (min-width: 640px) {
  .agenda-cita, .agenda-boda { grid-template-columns: 130px minmax(0, 1fr); }
}
.agenda-hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda-cuerpo { min-width: 0; }
.agenda-que { margin: 0 0 4px; overflow-wrap: anywhere; }
.agenda-que .etiqueta { display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }
.agenda-boda .agenda-que .etiqueta { margin: 0 8px 0 0; background: var(--blanco); }
.agenda-cuerpo .nota { display: block; margin: 0; overflow-wrap: anywhere; }
.agenda-linea form { display: inline; margin: 0; }
.agenda-linea .enlace { padding: 2px 0; font-size: inherit; text-align: left; overflow-wrap: anywhere; }
.agenda-acciones { margin: 10px 0 0; }
.agenda-acciones form { margin: 0; }
/* La cita a la que se llega después de apuntarla o cambiarla (#cita-N), con su aviso («Cita apuntada.»)
   dentro, encima de todo y a todo el ancho */
.agenda-cita:target { outline: 3px solid var(--enlace); outline-offset: 2px; }
.agenda-cita > .aviso { grid-column: 1 / -1; margin: 0 0 6px; padding: 10px 14px; overflow-wrap: anywhere; }

/* «Citas de esta boda», en su ficha del panel; y en «Mis bodas», el enlace de cada boda a su agenda */
.ficha-citas .agenda-lista { margin: 0 0 14px; padding: 0; }
.ficha-citas .agenda-cita { background: var(--crema); }
.ficha-citas-cabeza { margin: 0 0 12px; }
.ficha-citas-cabeza h2 { margin: 0; }
.ficha-citas-cabeza a { display: inline-block; padding: 6px 0; font-size: .95rem; }
.boda .bodas-agenda { margin-top: auto; padding-top: 14px; }
.boda .bodas-agenda a { display: inline-block; padding: 4px 0; }
.boda .bodas-agenda + .pie-boda { margin-top: 0; padding-top: 10px; }
.bodas-botones { margin: 0; }

/* La ficha de una cita: las dos horas, una al lado de la otra */
.cita-horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: end; }
.cita-horas > div { display: flex; flex-direction: column; min-width: 0; }
.formulario .cita-horas label, .formulario .cita-horas label:first-of-type { margin: 14px 0 6px; }
.cita-encarga { margin: 16px 0 0; }
.cita-pie form { margin: 0; }