/* =========================================================
   EVENTOS VIRTUALES — formulario de inscripción y creador de enlaces
   Usa los tokens de styles.css (navy, purple, mint, cream, IBM Plex Sans)
========================================================= */
[hidden]{ display:none !important; }

.ev-body{ background:var(--cream); color:var(--gray); min-height:100vh; display:flex; flex-direction:column; }

.ev-header{ background:var(--white); border-bottom:1px solid rgba(5,42,89,.08); }
.ev-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; }
.ev-logo img{ height:30px; width:auto; display:block; }
.ev-header-tag{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); opacity:.7; }

.ev-main{ flex:1; padding:clamp(32px,6vw,80px) 0; }
.ev-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,4vw,56px); align-items:start;
}
.ev-grid-builder{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); }

/* ---------- Tarjeta del evento (navy) ---------- */
.ev-card{
  background:var(--navy); color:var(--white);
  border-radius:20px; padding:clamp(28px,4vw,48px);
  position:sticky; top:32px;
}
.ev-kicker{
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mint); margin:0 0 18px;
}
.ev-title{
  font-size:clamp(28px,3.6vw,44px); font-weight:700; line-height:1.1; letter-spacing:-.01em;
  margin:0 0 18px; color:var(--white); overflow-wrap:anywhere;
}
.ev-desc{ font-size:16px; line-height:1.6; color:rgba(255,255,255,.8); margin:0 0 28px; max-width:46ch; }
.ev-facts{ margin:0; border-top:1px solid rgba(255,255,255,.14); }
.ev-facts > div{
  display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.ev-facts dt{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); padding-top:2px; }
.ev-facts dd{ margin:0; font-size:16px; font-weight:500; color:var(--white); }

/* ---------- Panel del formulario ---------- */
.ev-panel{
  background:var(--white); border-radius:20px;
  padding:clamp(28px,4vw,48px);
  box-shadow:0 1px 0 rgba(5,42,89,.06), 0 24px 60px -32px rgba(5,42,89,.25);
}
.ev-h2{ font-size:clamp(24px,2.6vw,32px); font-weight:700; line-height:1.15; color:var(--navy); margin:0 0 10px; }
.ev-lead{ font-size:16px; line-height:1.6; margin:0 0 32px; max-width:52ch; }
.ev-lead a{ color:var(--purple); text-decoration:underline; }

.ev-field{ margin-bottom:22px; min-width:0; }
.ev-field label{ display:block; font-size:14px; font-weight:600; color:var(--navy); margin-bottom:8px; }
.ev-optional{ font-weight:400; color:var(--gray); opacity:.7; font-size:13px; margin-left:4px; }
.ev-field input, .ev-field select, .ev-field textarea{
  width:100%; font:inherit; font-size:16px; color:var(--navy);
  background:var(--cream); border:1.5px solid rgba(5,42,89,.14); border-radius:12px;
  padding:13px 16px; transition:border-color .2s, background .2s;
}
.ev-field textarea{ resize:vertical; min-height:96px; }
.ev-field input:focus, .ev-field select:focus, .ev-field textarea:focus{
  outline:none; border-color:var(--purple); background:var(--white);
}
.ev-field.is-invalid input, .ev-field.is-invalid select{ border-color:#c62f4b; background:#fff; }
.ev-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }

.ev-phone{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; }

.ev-hint{ font-size:13px; color:var(--gray); opacity:.8; margin:8px 0 0; }
.ev-error{ display:none; font-size:13px; font-weight:500; color:#c62f4b; margin:8px 0 0; }
.is-invalid > .ev-error, .ev-error.is-shown{ display:block; }

.ev-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ev-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.ev-consents{ border:0; padding:22px 0 0; margin:8px 0 28px; border-top:1px solid rgba(5,42,89,.1); }
.ev-check{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start; margin-bottom:14px; cursor:pointer; }
.ev-check input{ width:20px; height:20px; margin:2px 0 0; accent-color:var(--purple); cursor:pointer; }
.ev-check span{ font-size:14px; line-height:1.55; }
.ev-check a{ color:var(--purple); text-decoration:underline; }
.ev-check em{ font-style:normal; font-weight:600; color:var(--navy); }
.ev-consents .ev-error{ margin:-6px 0 14px 34px; }

.ev-form .btn[disabled]{ opacity:.75; pointer-events:none; }

/* ---------- Estados ---------- */
.ev-state{ text-align:left; outline:none; }
.ev-state .btn{ margin:4px 16px 12px 0; }
.ev-state-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--mint); color:var(--navy); font-size:24px; font-weight:700; margin-bottom:20px;
}
.ev-textlink{ display:inline-block; font-size:14px; font-weight:600; color:var(--purple); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Creador de enlaces ---------- */
.ev-result-empty{ color:rgba(255,255,255,.7); font-size:15px; line-height:1.6; margin:0; }
.ev-result-name{ font-size:22px; font-weight:700; line-height:1.2; margin:0 0 6px; overflow-wrap:anywhere; }
.ev-result-meta{ font-size:14px; color:rgba(255,255,255,.7); margin:0 0 20px; }
.ev-link-box{
  width:100%; font:inherit; font-size:13px; color:var(--white);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:10px;
  padding:12px 14px; margin-bottom:18px; text-overflow:ellipsis;
}
.ev-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ev-btn-light{ background:var(--white); color:var(--navy); }
.ev-btn-light:hover{ background:var(--mint); transform:translateY(-2px); }
.ev-textlink-light{ color:var(--mint); }

.ev-recent{ margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); }
.ev-recent ul{ list-style:none; margin:0; padding:0; }
.ev-recent li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:14px;
}
.ev-recent li span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.85); }
.ev-recent button{
  flex:none; font:inherit; font-size:13px; font-weight:600; color:var(--mint);
  background:none; border:0; cursor:pointer; text-decoration:underline; padding:4px 0;
}

/* ---------- Enlace corto ---------- */
.ev-slug{
  display:flex; align-items:stretch;
  background:var(--cream); border:1.5px solid rgba(5,42,89,.14); border-radius:12px; overflow:hidden;
  transition:border-color .2s, background .2s;
}
.ev-slug:focus-within{ border-color:var(--purple); background:var(--white); }
.ev-slug-prefix{
  display:flex; align-items:center; padding:0 2px 0 16px;
  font-size:15px; color:var(--gray); opacity:.75; white-space:nowrap;
}
.ev-field .ev-slug input{ border:0; border-radius:0; background:transparent; padding-left:2px; min-width:0; }
.ev-field .ev-slug input:focus{ background:transparent; }
.ev-field.is-invalid .ev-slug{ border-color:#c62f4b; }
.ev-form-error{ margin:-8px 0 16px; }

/* ---------- Cargando ---------- */
.ev-loading{ display:flex; align-items:center; gap:14px; }
.ev-loading .ev-lead{ margin:0; }
.ev-spinner{
  width:22px; height:22px; flex:none; border-radius:50%;
  border:2.5px solid rgba(5,42,89,.15); border-top-color:var(--purple);
  animation:ev-spin .8s linear infinite;
}
@keyframes ev-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ev-spinner{ animation-duration:2.4s; } }

/* ---------- Acceso de administradores ---------- */
.ev-header-right{ display:flex; align-items:center; gap:18px; }
.ev-logout{
  font:inherit; font-size:13px; font-weight:600; color:var(--navy);
  background:none; border:1.5px solid rgba(5,42,89,.2); border-radius:100px;
  padding:7px 16px; cursor:pointer; transition:border-color .2s, color .2s;
}
.ev-logout:hover{ border-color:var(--purple); color:var(--purple); }
.ev-login-wrap{ display:flex; justify-content:center; }
.ev-login{ width:100%; max-width:440px; }
.ev-kicker-dark{ color:var(--purple); }
.ev-login-error{ margin:-6px 0 18px; }

/* ---------- Pie ---------- */
.ev-footer{ padding:28px 0 36px; font-size:13px; color:var(--gray); }
.ev-footer p{ margin:0; }
.ev-footer a{ color:var(--navy); text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ev-grid, .ev-grid-builder{ grid-template-columns:minmax(0,1fr); }
  .ev-card{ position:static; }
}
@media (max-width:600px){
  .ev-header-tag{ display:none; }
  .ev-row{ grid-template-columns:minmax(0,1fr); gap:0; }
  .ev-facts > div{ grid-template-columns:92px minmax(0,1fr); }
  .ev-panel, .ev-card{ border-radius:16px; }
  .ev-actions .btn{ width:100%; }
}