/* Estilos de las páginas del RSVP (los usan index.php y general.php) */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, system-ui, sans-serif; background: #F3EEFC; color: #222; }
.cabecera { background: #6C3BD1; color: #fff; padding: 28px 20px 48px; text-align: center; }
.cabecera p { margin: 0; opacity: .85; }
.cabecera h1 { margin: 6px 0 0; font-size: 26px; }
.tarjeta { background: #fff; max-width: 480px; margin: -28px auto 24px; border-radius: 16px;
  padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.dato { font-size: 17px; margin: 8px 0; }
.boton { display: block; width: 100%; padding: 14px; margin-top: 10px; border: 0; border-radius: 10px;
  font-size: 17px; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer; }
.si { background: #2E7D32; color: #fff; }
.no { background: #fff; color: #D9534F; border: 2px solid #D9534F; }
.secundario { background: #F3EEFC; color: #6C3BD1; }
.mensaje { padding: 16px; border-radius: 12px; font-size: 18px; font-weight: bold; text-align: center; }
.mensaje.si { background: #DFF5E1; color: #2E7D32; }
.mensaje.no { background: #FDECEC; color: #B03A37; }
h2 { font-size: 15px; color: #6C3BD1; margin: 22px 0 4px; }
.pie { text-align: center; color: #999; font-size: 13px; margin-bottom: 24px; }
.buscador { width: 100%; padding: 12px; font-size: 17px; border: 1px solid #ccc; border-radius: 10px; }
.resultado { display: flex; justify-content: space-between; align-items: center; padding: 12px 0;
  border-bottom: 1px solid #eee; font-size: 17px; }
.soy-yo { background: #6C3BD1; color: #fff; padding: 8px 14px; border-radius: 16px; text-decoration: none;
  font-weight: bold; font-size: 15px; white-space: nowrap; }
.nota { color: #888; font-size: 14px; }
/* Etiquetas de estado: recuadro de color con letra en negrita (igual que en la app) */
.estado { display: inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 14px;
  font-size: 14px; font-weight: bold; }
.estado.si { background: #DFF5E1; color: #2E7D32; }        /* verde: confirmado */
.estado.no { background: #FDECEC; color: #B03A37; }        /* rojo: no va */
.estado.pendiente { background: #FFF4D6; color: #8A6D00; } /* amarillo: sin confirmar */
.conteos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.conteos .estado { margin-top: 0; }
.error { color: #B03A37; }
.volver { display: block; text-align: center; margin-top: 14px; color: #6C3BD1; }