:root{
  --rojo:#b91c1c;
  --rojo-oscuro:#991b1b;
  --fondo:#ffe8d9;
  --blanco:#ffffff;
  --texto:#1f2933;
  --sombra:0 10px 25px rgba(0,0,0,0.12);
  --radius:18px;
  --verde:#22c55e;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(circle at top, #fff7ed 0, #fed7aa 45%, #fec89a 100%);
  color:var(--texto);
}
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 12px 40px;
  gap:16px;
}
.card{
  background:var(--blanco);
  border-radius:var(--radius);
  box-shadow:var(--sombra);
  max-width:480px;
  width:100%;
  padding:24px 20px 28px;
  text-align:center;
}
.card h1{
  margin:0 0 8px;
  font-size:1.7rem;
  color:var(--rojo-oscuro);
}
.card h2{
  margin:0 0 10px;
  font-size:1.4rem;
  color:var(--rojo-oscuro);
}
.subtitle{
  margin:0 0 18px;
  color:#52606d;
}
.actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
}
@media(min-width:600px){
  .actions{flex-direction:row;justify-content:center;}
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid #d3d3d3;
  background:#f9fafb;
  color:#111827;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  transition:background .15s,transform .05s,box-shadow .15s;
}
.btn.primary{
  background:var(--rojo);
  border-color:var(--rojo-oscuro);
  color:#fff;
}
.btn.danger{
  background:#b91c1c;
  color:#fff;
  border-color:#7f1d1d;
}
.btn.small{
  padding:6px 12px;
  font-size:0.85rem;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
}
.btn:active{
  transform:translateY(0);
  box-shadow:none;
}
.hint{
  margin:12px 0 0;
  font-size:0.8rem;
  color:#9fb3c8;
}
form{
  text-align:left;
}
label{
  display:block;
  font-size:0.9rem;
  font-weight:600;
  margin-bottom:4px;
  color:#243b53;
}
input,textarea,select{
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid #d3d3d3;
  font-size:0.95rem;
  margin-bottom:12px;
}
textarea{min-height:80px;resize:vertical;}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--rojo);
  box-shadow:0 0 0 1px rgba(185,28,28,0.25);
}
.row{
  display:flex;
  gap:10px;
}
.row > *{flex:1;}
.badge{
  display:inline-flex;
  padding:3px 8px;
  border-radius:999px;
  font-size:0.75rem;
  background:#f1f5f9;
  color:#52606d;
}
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  font-size:0.9rem;
}
.table th,.table td{
  padding:6px 8px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
}
.table th{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#6b7280;
}
.alert{
  border-radius:12px;
  padding:10px 12px;
  font-size:0.85rem;
  margin-bottom:10px;
}
.alert.info{
  background:#eff6ff;
  color:#1d4ed8;
}
.alert.warning{
  background:#fef3c7;
  color:#92400e;
}
.alert.danger{
  background:#fee2e2;
  color:#b91c1c;
}
.footer-links{
  margin-top:12px;
  font-size:0.8rem;
  color:#9fb3c8;
}
.footer-links a{
  color:#7c3aed;
}
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:30;
}
.modal{
  background:#fff;
  border-radius:16px;
  padding:20px 18px 18px;
  max-width:420px;
  width:90%;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
  text-align:left;
}
.modal h3{
  margin:0 0 8px;
  font-size:1.2rem;
}
.modal p{
  margin:4px 0;
  font-size:0.9rem;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}
.small-note{
  font-size:0.75rem;
  color:#9ca3af;
}


.participante-card {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px 16px;
  margin-top:14px;
  text-align:left;
}

.participante-card label {
  font-size:.85rem;
  font-weight:600;
  margin-bottom:3px;
  color:#374151;
}

.participante-card .dato {
  margin:0 0 10px;
  font-size:1rem;
  color:#1f2937;
}

.enlace-input {
  width:100%;
  padding:8px;
  border-radius:6px;
  font-size:.85rem;
  border:1px dashed #9ca3af;
  margin-bottom:10px;
  background:#f8fafc;
}

.botones {
  display:flex;
  gap:8px;
  margin-top:10px;
}

.delete-form {
  margin:0;
  flex:1;
}

.botones .btn {
  flex:1;
}