:root {
  --fondo: #fbf8f4; --papel: #ffffff; --tinta: #3a3230; --gris: #8a7f7a; --linea: #ece4dc;
  --acento: #a8665e; --acento-osc: #8d5049; --suave: #f5eee7;
  --verde: #e3efe2; --verde-t: #3d6b41; --ambar: #fbefd6; --ambar-t: #85601a;
  --rojo: #f6e2df; --rojo-t: #99433a;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Jost", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); font-size: 15px; color: var(--tinta); background: var(--fondo); }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; }
a { color: var(--acento); }

.cabecera { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--linea); background: var(--papel); }
.marca { font-family: var(--serif); font-size: 1.5rem; font-style: italic; text-decoration: none; }
nav a { color: var(--gris); text-decoration: none; }
.contenido { max-width: 1100px; margin: 0 auto; padding: 24px; }
.aviso, .error { background: var(--rojo); color: var(--rojo-t); padding: 10px 14px; border-radius: 10px; }

button { font: inherit; cursor: pointer; border: 0; border-radius: 999px; padding: 9px 18px; }
.primario { background: var(--acento); color: #fff; font-weight: 500; }
.primario:hover { background: var(--acento-osc); }
.suave { background: var(--suave); color: var(--tinta); }
.suave:hover { background: var(--linea); }
.borrar { background: none; color: var(--rojo-t); padding-left: 0; }
input, select { font: inherit; color: inherit; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); width: 100%; }
input:focus { outline: 2px solid color-mix(in srgb, var(--acento) 40%, transparent); border-color: var(--acento); }

/* Portada e invitación */
.portada { text-align: center; max-width: 440px; margin: 48px auto; }
.portada h1 { font-size: 2.8rem; margin: 0 0 8px; color: var(--acento); }
.peque { color: var(--gris); }
.numero { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.numero input { width: 120px; font-size: 1.6rem; text-align: center; }
.formulario { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.formulario label { display: flex; flex-direction: column; gap: 4px; }
.confirmar { margin-top: 24px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.quien { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 14px; }
.sino { display: flex; gap: 6px; }
.sino input { display: none; }
.sino span { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--suave); cursor: pointer; }
.sino input:checked + span { background: var(--acento); color: #fff; }

/* Lista */
.cabeza-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cabeza-lista h1 { font-size: 2.2rem; margin: 0; }
.cifras { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.cifra { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 16px; min-width: 96px; }
.cifra b { display: block; font-family: var(--serif); font-size: 1.8rem; line-height: 1; }
.cifra span { color: var(--gris); font-size: .85rem; }
.cifra.si b { color: var(--verde-t); } .cifra.no b { color: var(--rojo-t); } .cifra.pend b { color: var(--ambar-t); }
.buscar { max-width: 320px; margin-bottom: 14px; }

.tabla-marco { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
table.lista { width: 100%; border-collapse: collapse; }
.lista th { text-align: left; font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); padding: 12px 14px; background: var(--suave); }
.lista td { padding: 10px 14px; border-top: 1px solid var(--linea); vertical-align: middle; }
.lista tbody.grupo td[rowspan] { vertical-align: top; }
.lista tbody.grupo:hover { background: #fdfaf7; }
.lista .num a { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--suave); text-decoration: none; font-weight: 500; }
.lista .inv strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.lista .inv small { display: block; color: var(--gris); }
.lista .acc { text-align: right; }
.lista .vacio { text-align: center; color: var(--gris); padding: 28px; }
.lista td.nombre.vacio { text-align: left; padding: 10px 14px; }
.chip { display: inline-block; font-size: .8rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.chip.adulto { background: var(--suave); } .chip.nino { background: var(--ambar); color: var(--ambar-t); }
.chip.si { background: var(--verde); color: var(--verde-t); } .chip.no { background: var(--rojo); color: var(--rojo-t); }
.chip.pend { background: transparent; color: var(--gris); border: 1px dashed var(--linea); }

/* Ventana emergente */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 20px 60px rgba(58, 50, 48, .25); color: var(--tinta); }
dialog::backdrop { background: rgba(58, 50, 48, .45); }
dialog form#fgrupo { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ventana-cabeza { display: flex; justify-content: space-between; align-items: center; }
.ventana-cabeza h2 { margin: 0; font-size: 1.7rem; }
.cerrar { background: none; font-size: 1.6rem; line-height: 1; padding: 4px 8px; color: var(--gris); }
.fila2 { display: flex; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.campo.corto { flex: 0 0 90px; }
.campo > span, .rotulo { font-size: .8rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
#personas { display: flex; flex-direction: column; gap: 8px; }
.persona { display: flex; gap: 6px; align-items: center; }
.persona input[name=pnombre] { flex: 1; }
.tipo { flex: 0 0 84px; padding: 9px 0; background: var(--suave); }
.tipo.nino { background: var(--ambar); color: var(--ambar-t); }
.menos { flex: 0 0 38px; height: 38px; padding: 0; background: none; color: var(--rojo-t); font-size: 1.4rem; line-height: 1; }
.menos:hover { background: var(--rojo); }
.mas { align-self: flex-start; background: none; color: var(--acento); padding-left: 0; font-weight: 500; }
.ventana-pie { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.hueco { flex: 1; }

/* Móvil: cada invitación pasa a ser una tarjeta */
@media (max-width: 720px) {
  .cabecera { padding: 12px 16px; }
  .contenido { padding: 16px; }
  .cabeza-lista h1 { font-size: 1.8rem; }
  .cifra { min-width: 0; flex: 1 1 28%; padding: 8px 12px; }
  .buscar { max-width: none; }
  .tabla-marco { background: none; border: 0; overflow: visible; }
  .lista thead { display: none; }
  .lista, .lista tbody, .lista tr, .lista td { display: block; }
  .lista tbody.grupo { position: relative; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
  .lista tbody.grupo:hover { background: var(--papel); }
  .lista tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .lista td { border: 0; padding: 0; }
  .lista td.num { order: -2; }
  .lista td.inv { order: -1; flex: 1 1 60%; padding: 4px 0 8px 6px; }
  .lista td.acc { position: absolute; top: 12px; right: 12px; }
  .lista td.nombre { flex: 1 1 100%; padding-top: 8px; border-top: 1px solid var(--linea); }
  .lista tr:first-child td.nombre { border-top: 0; }
  .fila2 { flex-direction: column; }
  .campo.corto { flex: 1; }
  .ventana-pie { flex-wrap: wrap; }
  .ventana-pie .borrar { order: 3; width: 100%; text-align: left; }
}

/* Interruptor de la web de invitados */
.botones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.botones form { margin: 0; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; background: var(--suave); color: var(--gris); }
.interruptor i { width: 30px; height: 18px; border-radius: 999px; background: #d8cec5; position: relative; transition: background .2s; }
.interruptor i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .2s; }
.interruptor.on { background: var(--verde); color: var(--verde-t); }
.interruptor.on i { background: var(--verde-t); }
.interruptor.on i::after { left: 14px; }
@media (max-width: 720px) { .cabeza-lista { flex-wrap: wrap; } }
.numero input::-webkit-outer-spin-button, .numero input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numero input { -moz-appearance: textfield; }
h1, h2, .cifra b, .lista .inv strong { font-variant-numeric: lining-nums; }

/* Filtros por confirmación */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.barra-filtros .buscar { margin: 0; flex: 1 1 220px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros button { background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); padding: 7px 14px; }
.filtros button b { font-weight: 500; color: var(--gris); margin-left: 2px; }
.filtros button.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.filtros button.activo b { color: #fff; }
.lista tr.atenuado td.nombre, .lista tr.atenuado td:not([rowspan]) .chip { opacity: .35; }
.sin-resultados { text-align: center; color: var(--gris); padding: 20px; }
@media (max-width: 720px) {
  .filtros { width: 100%; }
  .filtros button { flex: 1 1 auto; padding: 7px 10px; }
}