/* app/assets/stylesheets/candidate_panel.css
 * Panel de candidatos (estilo Matchia unificado). Mobile first; a partir de
 * 900px pasa a layout de escritorio con pestañas arriba. Todo va prefijado
 * con .mcp- porque convive con el CSS de cada web de evento (public_event)
 * y con layouts que cargan todas las hojas de app/assets/stylesheets.
 */

.mcp {
  --mcp-purple: #6842e8;
  --mcp-purple-dark: #4d2eb7;
  --mcp-purple-50: #f4f1ff;
  --mcp-purple-100: #e8e1ff;
  --mcp-ink: #20212f;
  --mcp-muted: #6c6e7f;
  --mcp-faint: #8b8d99;
  --mcp-line: #e8e8ef;
  --mcp-line-soft: #eeeef2;
  --mcp-canvas: #f4f5f8;
  --mcp-surface: #ffffff;
  --mcp-success: #14835b;
  --mcp-success-bg: #eaf8f2;
  --mcp-amber: #9a6408;
  --mcp-amber-bg: #fff5da;
  --mcp-danger: #ba3f50;
  --mcp-danger-bg: #fdeff1;
  --mcp-shadow: 0 7px 24px rgba(37, 29, 66, .055);
  --mcp-radius: 16px;
  --mcp-hero: linear-gradient(135deg, #29213e 0%, #3a2a61 55%, #5635a2 100%);

  background: var(--mcp-canvas);
  color: var(--mcp-ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
  /* Hueco extra bajo el menú fijo de la web del evento (mcp-site-offset). */
  padding-top: var(--mcp-site-gap, 0px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

.mcp *, .mcp *::before, .mcp *::after { box-sizing: border-box; }
.mcp h1, .mcp h2, .mcp h3, .mcp p, .mcp ul, .mcp ol, .mcp dl, .mcp dd { margin: 0; }
.mcp h1, .mcp h2, .mcp h3 { font-family: inherit; color: inherit; text-transform: none; font-weight: 800; }
.mcp ul, .mcp ol { padding: 0; list-style: none; }
.mcp a { color: inherit; text-decoration: none; }
.mcp button { font-family: inherit; cursor: pointer; color: inherit; }
.mcp img, .mcp svg { max-width: 100%; }
.mcp [hidden] { display: none !important; }

.mcp-main { width: 100%; max-width: 520px; margin: 0 auto; padding: 16px 12px 24px; }
.mcp-stack { display: grid; gap: 10px; }
.mcp-grid-before, .mcp-grid-inside, .mcp-grid-profile, .mcp-col, .mcp-events-grid { display: grid; gap: 10px; min-width: 0; }

.mcp-eyebrow { margin: 0 0 4px; color: #848593; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Navegación: barra inferior (móvil) / pestañas (escritorio) ---------- */

.mcp-topbar { display: none; }

.mcp-bottomnav {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid var(--mcp-line);
  box-shadow: 0 -8px 26px rgba(37, 31, 59, .08);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.mcp-bottomnav a { display: grid; place-items: center; align-content: center; gap: 3px; color: #838590; font-size: .66rem; font-weight: 700; }
.mcp-bottomnav a svg { width: 20px; height: 20px; }
.mcp-bottomnav a[aria-current="page"] { color: var(--mcp-purple-dark); }

/* ---------- Cabecera de página ---------- */

.mcp-intro { margin-bottom: 14px; }
.mcp-intro h1 { font-size: 1.45rem; line-height: 1.12; letter-spacing: -.04em; }
.mcp-intro > div > p:last-child { margin-top: 5px; color: var(--mcp-muted); font-size: .8rem; }
.mcp-chip-ok { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 7px 10px; border-radius: 99px; background: var(--mcp-success-bg); color: var(--mcp-success); font-size: .68rem; font-weight: 800; white-space: nowrap; }

/* ---------- Tarjetas base ---------- */

.mcp-card { background: var(--mcp-surface); border: 1px solid var(--mcp-line); border-radius: var(--mcp-radius); box-shadow: var(--mcp-shadow); padding: 16px 14px; }
.mcp-card-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mcp-card-title h2 { font-size: 1.02rem; letter-spacing: -.025em; line-height: 1.25; }
.mcp-card-title > a, .mcp-card-title > span.mcp-link { font-size: .7rem; font-weight: 800; color: var(--mcp-purple-dark); white-space: nowrap; }

.mcp-status { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.mcp-status--purple { background: var(--mcp-purple-50); color: var(--mcp-purple-dark); }
.mcp-status--green { background: var(--mcp-success-bg); color: var(--mcp-success); }
.mcp-status--amber { background: var(--mcp-amber-bg); color: var(--mcp-amber); }
.mcp-status--neutral { background: #f1f1f4; color: #70727d; }
.mcp-status--danger { background: var(--mcp-danger-bg); color: var(--mcp-danger); }

.mcp-text-btn { border: 0; background: none; padding: 0; color: var(--mcp-purple-dark); font-size: .74rem; font-weight: 900; }
.mcp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 11px; border: 1px solid transparent; font-size: .8rem; font-weight: 800; transition: background .15s, transform .15s; }
.mcp-btn--primary { background: var(--mcp-purple); color: #fff !important; }
.mcp-btn--primary:hover { background: #7b56ee; }
.mcp-btn--soft { background: var(--mcp-purple-50); border-color: #d7cff1; color: var(--mcp-purple-dark) !important; }
.mcp-btn--ghost { background: #fff; border-color: var(--mcp-line); color: var(--mcp-ink) !important; }
.mcp-btn--danger { background: #fff; border-color: #f1c2c7; color: var(--mcp-danger) !important; }
.mcp-btn--block { width: 100%; }

.mcp-flash { border-radius: 12px; padding: 11px 13px; font-size: .8rem; font-weight: 700; margin-bottom: 10px; }
.mcp-flash--notice { background: var(--mcp-success-bg); color: var(--mcp-success); }
.mcp-flash--alert { background: var(--mcp-danger-bg); color: var(--mcp-danger); }

.mcp-empty { text-align: center; padding: 20px 10px; color: var(--mcp-muted); font-size: .78rem; }

/* ---------- Entrada: check-in + ticket ---------- */

.mcp-pass { overflow: hidden; background: #fff; border: 1px solid rgba(58, 43, 103, .12); border-radius: 19px; box-shadow: 0 12px 34px rgba(45, 31, 89, .12); }

.mcp-checkin { position: relative; overflow: hidden; background: var(--mcp-hero); color: #fff; padding: 18px 16px; }
.mcp-checkin::after { content: ""; position: absolute; width: 260px; height: 260px; border: 60px solid rgba(255, 255, 255, .035); border-radius: 50%; right: -120px; bottom: -130px; pointer-events: none; }
.mcp-checkin > * { position: relative; z-index: 1; }
.mcp-checkin-head { display: flex; align-items: flex-start; gap: 10px; }
.mcp-checkin-head .mcp-eyebrow { color: #c7bddc; }
.mcp-checkin-head h2 { font-size: 1.17rem; letter-spacing: -.035em; color: #fff; }
.mcp-number { flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px; background: #fff; color: var(--mcp-purple-dark); display: grid; place-items: center; font-weight: 900; box-shadow: 0 6px 15px rgba(0, 0, 0, .15); }
.mcp-checkin-lead { margin: 13px 0 !important; font-size: .82rem; line-height: 1.45; color: #eeeaf6; }
.mcp-checkin-lead strong { color: #fff; }

.mcp-state { display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; padding: 10px 11px; }
.mcp-state > div { display: grid; }
.mcp-state small { font-size: .6rem; color: #cfc8df; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mcp-state strong { font-size: .9rem; margin-top: 2px; }
.mcp-state p { font-size: .7rem; color: #d5cfe0; margin-top: 3px !important; }
.mcp-state-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; }
.mcp-state-icon svg { width: 20px; height: 20px; }
.mcp-live-ring { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(65, 224, 164, .12); display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(65, 224, 164, .05); }
.mcp-live-ring i { width: 11px; height: 11px; border-radius: 50%; background: #48d7a1; box-shadow: 0 0 0 5px rgba(72, 215, 161, .18); animation: mcp-pulse 1.7s infinite; }

.mcp-checkin-form { margin: 0; }
.mcp-checkin-btn { margin-top: 10px; width: 100%; border: 0; border-radius: 12px; min-height: 56px; background: var(--mcp-purple); color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 10px 25px rgba(12, 7, 26, .2); transition: .2s; text-align: left; }
.mcp-checkin-btn:disabled { cursor: not-allowed; background: #6d657e; color: #d5d1de; box-shadow: none; }
.mcp-checkin-btn:not(:disabled):hover { background: #7b56ee; transform: translateY(-1px); }
.mcp-checkin-btn > span:first-child { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-weight: 900; }
.mcp-checkin-btn > span:last-child { display: grid; }
.mcp-checkin-btn strong { font-size: .98rem; }
.mcp-checkin-btn small { font-size: .68rem; font-weight: 500; opacity: .8; }

.mcp-or { position: relative; text-align: center; margin: 10px 0 8px; color: #bdb7ca; font-size: .7rem; }
.mcp-or::before, .mcp-or::after { content: ""; position: absolute; top: 50%; width: 44%; height: 1px; background: rgba(255, 255, 255, .12); }
.mcp-or::before { left: 0; }
.mcp-or::after { right: 0; }
.mcp-hostess { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mcp-hostess svg { width: 20px; height: 20px; color: #d4c9ff; flex: 0 0 auto; }
.mcp-hostess p { font-size: .72rem; }
.mcp-hostess small { color: #c7c0d1; }

.mcp-ticket { padding: 13px 14px 0; border-top: 1px solid rgba(58, 43, 103, .12); }
.mcp-ticket-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid var(--mcp-line); }
.mcp-ticket-top > span:last-child { font-size: .6rem; font-weight: 900; letter-spacing: .11em; color: #898b97; }
.mcp-ticket-body { padding: 12px 0 0; display: grid; grid-template-columns: 92px 1fr; column-gap: 13px; align-items: start; }
.mcp-qr { position: relative; grid-row: 1 / 4; width: 92px; height: 92px; padding: 6px; border: 1px solid var(--mcp-line); border-radius: 11px; background: #fff; box-shadow: 0 5px 15px rgba(31, 33, 48, .05); }
.mcp-qr svg { display: block; width: 100%; height: 100%; }
.mcp-qr-expand { position: absolute; right: 4px; bottom: 4px; width: 19px; height: 19px; border-radius: 6px; background: var(--mcp-purple); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 7px rgba(31, 22, 66, .25); }
.mcp-qr-expand svg { width: 11px; height: 11px; }
.mcp-qr:focus-visible { outline: 3px solid #f4b52e; outline-offset: 3px; }
.mcp-ticket-name { align-self: end; color: var(--mcp-purple-dark); font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mcp-ticket-body h3 { font-size: .92rem; line-height: 1.2; margin: 3px 0 6px; letter-spacing: -.02em; }
.mcp-ticket-body dl { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--mcp-line); padding-top: 7px; text-align: center; }
.mcp-ticket-body dl > div:first-child { border-right: 1px solid var(--mcp-line); }
.mcp-ticket-body dt { font-size: .54rem; color: #92939e; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mcp-ticket-body dd { font-size: .68rem; font-weight: 900; margin-top: 2px; }
.mcp-ticket-stub { margin: 11px -14px 0; min-height: 34px; padding: 0 14px; background: var(--mcp-purple-50); border-top: 1px dashed #cfc7e6; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--mcp-purple-dark); font-size: .64rem; }
.mcp-ticket-stub span { font-weight: 800; letter-spacing: .08em; }
.mcp-ticket-stub strong { font-size: .72rem; }
.mcp-ticket-stub em { font-style: normal; font-weight: 600; opacity: .75; }

/* Marca */
.mcp-logo { display: block; width: auto; height: 18px; max-width: none; }

/* ---------- Recorrido ---------- */

.mcp-trip { padding: 0 15px; border-radius: 14px; overflow: hidden; }
.mcp-trip summary { min-height: 58px; list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.mcp-trip summary::-webkit-details-marker { display: none; }
.mcp-trip summary > span { display: grid; }
.mcp-trip summary small { font-size: .58rem; color: var(--mcp-faint); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mcp-trip summary strong { font-size: .8rem; }
.mcp-trip summary i { font-style: normal; font-size: .68rem; color: var(--mcp-purple-dark); font-weight: 800; }
.mcp-trip summary .mcp-when-open { display: none; }
.mcp-trip[open] summary .mcp-when-open { display: inline; }
.mcp-trip[open] summary .mcp-when-closed { display: none; }
/* Móvil: lista vertical compacta (hito a la izquierda, texto a la derecha). */
.mcp .mcp-steps { display: grid; padding: 0 0 14px; }
.mcp-steps li { position: relative; min-height: 30px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; color: #8c8e99; font-size: .74rem; font-weight: 700; }
.mcp-steps li::before { content: ""; position: absolute; left: 10px; top: -15px; width: 2px; height: 30px; background: #e2e2e9; z-index: 0; }
.mcp-steps li:first-child::before { display: none; }
.mcp-steps li i { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: #f1f1f4; border: 2px solid #fff; box-shadow: 0 0 0 1px #dcdce3; display: grid; place-items: center; font-style: normal; font-size: .6rem; font-weight: 800; }
.mcp-steps li > span { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.mcp-steps li small { font-size: .66rem; color: #a0a1ab; font-weight: 600; }
.mcp-steps li small::before { content: "·"; margin-right: 6px; }
.mcp-steps li.is-done { color: #555765; }
.mcp-steps li.is-done::before { background: var(--mcp-purple); }
.mcp-steps li.is-done i { background: var(--mcp-purple); color: #fff; box-shadow: 0 0 0 1px var(--mcp-purple); }
.mcp-steps li.is-current i { background: #fff; color: var(--mcp-purple); box-shadow: 0 0 0 3px var(--mcp-purple); }
.mcp-steps li.is-current > span { color: var(--mcp-ink); }
.mcp-steps li.is-important i { background: #29213f; color: #fff; box-shadow: 0 0 0 3px #ded7f5; }
.mcp-steps li.is-important > span { color: #302747; }
.mcp-steps li.is-skipped i { background: #f6f6f8; color: #b4b5bd; box-shadow: 0 0 0 1px #e6e6eb; }

/* ---------- Agenda (antes del evento) ---------- */

.mcp-agenda { margin-top: 10px; display: grid; }
.mcp-agenda-row { min-height: 56px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid var(--mcp-line-soft); }
.mcp-agenda-row time { font-size: .92rem; font-weight: 900; }
.mcp-agenda-row div { min-width: 0; }
.mcp-agenda-row strong { display: block; font-size: .84rem; }
.mcp-agenda-row p { color: var(--mcp-muted); font-size: .72rem; margin-top: 1px !important; }
.mcp-note { display: flex; gap: 8px; align-items: center; background: #f8f7fc; border-radius: 10px; padding: 10px 12px; color: #646274; font-size: .7rem; margin-top: 8px !important; }
.mcp-note > span { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; background: var(--mcp-purple-100); color: var(--mcp-purple-dark); display: grid; place-items: center; font-weight: 900; font-size: .65rem; }

/* ---------- Sin entrevistas ---------- */

.mcp-walkin-head { display: flex; gap: 11px; }
.mcp-walkin-head > span { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--mcp-purple), #8a6cf0); color: #fff; display: grid; place-items: center; }
.mcp-walkin-head > span svg { width: 20px; height: 20px; }
.mcp-walkin-head h2 { font-size: 1.04rem; letter-spacing: -.02em; }
.mcp-walkin-head p:last-child { margin-top: 4px !important; color: var(--mcp-muted); font-size: .74rem; }
.mcp-choices { display: grid; gap: 8px; margin-top: 14px; }
.mcp-choice { border: 1px solid var(--mcp-line); border-radius: 13px; padding: 12px; display: grid; grid-template-columns: 29px 1fr; gap: 10px; }
.mcp-choice > span { width: 29px; height: 29px; border-radius: 9px; background: #f0f0f4; color: #666875; display: grid; place-items: center; font-size: .72rem; font-weight: 900; }
.mcp-choice--primary { border-color: #d8cef6; background: linear-gradient(135deg, #faf8ff, #f5f2ff); }
.mcp-choice--primary > span { background: var(--mcp-purple); color: #fff; }
.mcp-choice div { display: grid; justify-items: start; }
.mcp-choice strong { font-size: .8rem; }
.mcp-choice p { font-size: .72rem; color: var(--mcp-muted); margin: 3px 0 !important; line-height: 1.45; }
.mcp-choice em { margin-top: 5px; padding: 4px 7px; border-radius: 7px; background: #fff0dc; color: #9a5d09; font-size: .6rem; font-style: normal; font-weight: 900; }
.mcp-choice .mcp-text-btn { margin-top: 5px; }

/* ---------- Información del evento ---------- */

.mcp-card.mcp-event { overflow: hidden; padding: 0; }
.mcp-event-visual { position: relative; overflow: hidden; min-height: 82px; background: linear-gradient(135deg, #7954ec, #49309f); color: #fff; padding: 13px 16px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; }
.mcp-event-visual::after { content: ""; position: absolute; width: 150px; height: 150px; border: 32px solid rgba(255, 255, 255, .08); border-radius: 50%; right: -45px; bottom: -85px; }
.mcp-event-visual span { font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.mcp-event-visual strong { grid-column: 1 / -1; font-size: 1.8rem; letter-spacing: -.06em; align-self: end; line-height: 1; }
.mcp-event-visual i { position: absolute; right: 18px; top: 14px; font-style: normal; font-size: .7rem; font-weight: 800; }
.mcp-event-info { padding: 15px 16px; }
.mcp-event-info h2 { font-size: 1.05rem; }
.mcp-event-info ul { margin: 10px 0 0; display: grid; gap: 9px; }
.mcp-event-info li { display: flex; gap: 10px; }
.mcp-event-info li > span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--mcp-purple-50); color: var(--mcp-purple-dark); display: grid; place-items: center; }
.mcp-event-info li > span svg { width: 14px; height: 14px; }
.mcp-event-info li div { display: grid; }
.mcp-event-info li strong { font-size: .78rem; }
.mcp-event-info li small { font-size: .7rem; color: var(--mcp-muted); }

/* ---------- Candidaturas ---------- */

.mcp-offers { margin-top: 9px; display: grid; }
.mcp-offer { min-height: 62px; padding: 10px 0; border-top: 1px solid var(--mcp-line-soft); display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 4px 11px; align-items: center; }
.mcp-offer h3 { font-size: .82rem; }
.mcp-offer p { font-size: .7rem; color: var(--mcp-muted); margin-top: 2px !important; }
.mcp-offer-status { grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mcp-offer-status .mcp-status { border-radius: 8px; font-size: .64rem; padding: 4px 7px; }
.mcp-offer-status a.mcp-btn { min-height: 32px; padding: 0 10px; font-size: .7rem; }
.mcp-offer-status small { font-size: .66rem; color: var(--mcp-muted); }
.mcp-offers-more summary { list-style: none; cursor: pointer; padding: 10px 0 0; border-top: 1px solid var(--mcp-line-soft); font-size: .74rem; font-weight: 800; color: var(--mcp-purple-dark); }
.mcp-offers-more summary::-webkit-details-marker { display: none; }

.mcp-mark { width: 37px; height: 37px; border-radius: 10px; display: grid; place-items: center; font-size: .66rem; font-weight: 900; }
.mcp-mark--blue { background: #e7f0fc; color: #2568bd; }
.mcp-mark--orange { background: #fff0e6; color: #c45f21; }
.mcp-mark--green { background: #e8f7ef; color: #147a51; }
.mcp-mark--purple { background: var(--mcp-purple-50); color: var(--mcp-purple-dark); }
.mcp-mark--gray { background: #f0f1f3; color: #656873; }

/* ---------- Dentro del evento ---------- */

.mcp-hero { position: relative; overflow: hidden; background: linear-gradient(110deg, #29213e 0%, #3b2a64 50%, #5636a3 100%); color: #fff; border-radius: 18px; padding: 17px 15px; display: grid; grid-template-columns: 1fr 132px; gap: 12px; box-shadow: 0 18px 40px rgba(45, 31, 89, .16); }
.mcp-hero-welcome { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mcp-hero-check { flex: 0 0 auto; width: 35px; height: 35px; border-radius: 50%; background: #48d7a1; color: #18382e; display: grid; place-items: center; font-weight: 900; box-shadow: 0 0 0 5px rgba(72, 215, 161, .11); }
.mcp-hero-welcome .mcp-eyebrow { color: #cfc7df; font-size: .58rem; }
.mcp-hero-welcome h1 { font-size: 1.2rem; line-height: 1.15; letter-spacing: -.035em; color: #fff; }
.mcp-hero-welcome p:last-child { color: #d7d2e1; font-size: .7rem; margin-top: 3px !important; }
.mcp-code { border-left: 1px solid rgba(255, 255, 255, .15); padding-left: 12px; text-align: center; display: grid; align-content: center; }
.mcp-code small { font-size: .52rem; color: #cfc7df; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mcp-code-id { display: flex; align-items: center; justify-content: center; gap: 7px; }
.mcp-code-id strong { font-size: 2.3rem; line-height: 1; letter-spacing: .02em; color: #fff; }
.mcp-code-qr { position: relative; flex: 0 0 43px; width: 43px; height: 43px; padding: 4px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; background: #fff; box-shadow: 0 5px 14px rgba(16, 9, 37, .22); }
.mcp-code-qr svg { display: block; width: 100%; height: 100%; }
.mcp-code-qr .mcp-qr-expand { right: -3px; bottom: -3px; width: 15px; height: 15px; }
.mcp-code-qr .mcp-qr-expand svg { width: 9px; height: 9px; }
.mcp-code p { font-size: .56rem; color: #c9c3d2; margin-top: 4px !important; }
.mcp-calls-btn { grid-column: 1 / -1; border: 1px solid rgba(255, 255, 255, .18); border-radius: 11px; background: rgba(255, 255, 255, .11); color: #fff; min-height: 49px; padding: 7px 9px; display: flex; align-items: center; text-align: left; gap: 11px; }
.mcp-calls-btn:hover { background: rgba(255, 255, 255, .17); }
.mcp-calls-btn > span:nth-child(2) { display: grid; }
.mcp-calls-btn strong { font-size: .8rem; }
.mcp-calls-btn small { font-size: .64rem; color: #d0cad9; }
.mcp-calls-btn > i { margin-left: auto; font-style: normal; font-size: 1.3rem; }
.mcp-calls-btn em { margin-left: auto; font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 7px; background: rgba(255, 255, 255, .14); color: #e6e0f2; }
.mcp-screen-icon { flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.mcp-screen-icon svg { width: 17px; height: 17px; }

.mcp-areas { display: grid; gap: 10px; }
.mcp-area-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mcp-area-head > div { min-width: 0; }
.mcp-area-head .mcp-eyebrow { font-size: .58rem; margin-bottom: 2px; }
.mcp-area-head h2 { font-size: 1rem; line-height: 1.2; letter-spacing: -.025em; }
.mcp-area-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.mcp-area-icon svg { width: 20px; height: 20px; }
.mcp-area-icon--interviews { background: #eee9ff; color: var(--mcp-purple-dark); }
.mcp-area-icon--activities { background: #fff1cc; color: #8e6209; }
.mcp-area-icon--stands { background: #e5f5f0; color: #147a58; }
.mcp-area-icon--waitlist { background: #fff5da; color: var(--mcp-amber); }

.mcp-tabs-inline { margin-top: 14px; display: flex; gap: 16px; border-bottom: 1px solid var(--mcp-line); overflow-x: auto; }
.mcp-tabs-inline button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 0 0 9px; color: #777985; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.mcp-tabs-inline button span { font-size: .62rem; background: #f0f0f3; padding: 2px 6px; border-radius: 10px; margin-left: 3px; }
.mcp-tabs-inline button[aria-selected="true"] { color: var(--mcp-purple-dark); border-color: var(--mcp-purple); }
.mcp-tabs-inline button[aria-selected="true"] span { background: var(--mcp-purple-50); }

.mcp-interviews { display: grid; padding-top: 3px; }
.mcp-interview { min-height: 70px; padding: 10px 0; display: grid; grid-template-columns: 11px 48px minmax(0, 1fr); align-items: center; gap: 4px 10px; border-bottom: 1px solid var(--mcp-line-soft); }
.mcp-interview:last-child { border-bottom: 0; }
.mcp-dot { width: 10px; height: 10px; border-radius: 50%; background: #d3d4db; box-shadow: 0 0 0 4px #f2f2f5; }
.mcp-interview.is-active .mcp-dot { background: var(--mcp-purple); box-shadow: 0 0 0 4px var(--mcp-purple-100); }
.mcp-interview.is-finished .mcp-dot { background: var(--mcp-success); box-shadow: 0 0 0 4px var(--mcp-success-bg); }
.mcp-interview time { font-size: .9rem; font-weight: 900; }
.mcp-interview strong { display: block; font-size: .84rem; }
.mcp-interview p { font-size: .72rem; color: var(--mcp-muted); margin-top: 2px !important; }
.mcp-interview-meta { grid-column: 3 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mcp-interview-meta small { font-size: .68rem; color: var(--mcp-muted); font-weight: 700; }
.mcp-interview.is-calling { background: linear-gradient(90deg, #f7f4ff, #fff 80%); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }

.mcp-walkin-box { margin-top: 14px; border: 1px solid #ddd4f7; border-radius: 13px; background: linear-gradient(135deg, #fbf9ff, #f3efff); padding: 13px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; }
.mcp-walkin-box > span { width: 38px; height: 38px; border-radius: 11px; background: #eeebf9; color: var(--mcp-purple-dark); display: grid; place-items: center; font-size: .68rem; font-weight: 900; }
.mcp-walkin-box div { display: grid; }
.mcp-walkin-box small { font-size: .6rem; font-weight: 900; color: #777386; letter-spacing: .06em; text-transform: uppercase; }
.mcp-walkin-box strong { font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.mcp-walkin-box p { font-size: .72rem; color: var(--mcp-muted); line-height: 1.45; margin-top: 4px !important; }

.mcp-activity-next { margin-top: 11px; display: grid; grid-template-columns: 58px 1fr; gap: 11px; align-items: center; border: 1px solid #efdda9; border-radius: 13px; background: #fffaf0; padding: 10px 11px; }
.mcp-activity-next time { font-size: 1rem; font-weight: 900; color: #76500b; }
.mcp-activity-next div { display: grid; min-width: 0; }
.mcp-activity-next small { font-size: .58rem; font-weight: 900; color: #987015; letter-spacing: .07em; text-transform: uppercase; }
.mcp-activity-next strong { font-size: .8rem; margin-top: 2px; }
.mcp-activity-next p { font-size: .7rem; color: #786e58; margin-top: 2px !important; }

.mcp-expand { width: 100%; min-height: 49px; margin-top: 9px; padding: 9px 0 0; border: 0; border-top: 1px solid #ececf1; background: #fff; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.mcp-expand > span { display: grid; }
.mcp-expand strong { font-size: .8rem; }
.mcp-expand small { margin-top: 1px; color: var(--mcp-muted); font-size: .68rem; }
.mcp-expand b { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px; background: var(--mcp-purple-50); color: var(--mcp-purple-dark); display: grid; place-items: center; font-size: .7rem; }

.mcp-progress { margin-top: 11px; border-radius: 13px; background: #f6f4fd; padding: 10px 11px; }
.mcp-progress > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mcp-progress strong { font-size: .8rem; }
.mcp-progress small { font-size: .66rem; color: var(--mcp-muted); }
.mcp-track { height: 6px; margin-top: 8px; border-radius: 99px; background: #e2def0; overflow: hidden; }
.mcp-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mcp-purple), #8a6cf0); transition: width .25s ease; }
.mcp-suggest { margin-top: 8px; padding: 9px 11px; border-radius: 11px; background: #f4faf7; display: grid; }
.mcp-suggest span { font-size: .56rem; font-weight: 900; letter-spacing: .08em; color: #368469; text-transform: uppercase; }
.mcp-suggest strong { font-size: .8rem; margin-top: 2px; }
.mcp-suggest small { font-size: .68rem; color: var(--mcp-muted); margin-top: 1px; }

/* Lista de espera */
.mcp-wait { padding: 10px 0; border-top: 1px solid var(--mcp-line-soft); display: grid; gap: 4px; }
.mcp-wait strong { font-size: .82rem; }
.mcp-wait p { font-size: .72rem; color: var(--mcp-muted); }
.mcp-wait-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.mcp-wait-meta small { font-size: .68rem; color: var(--mcp-muted); }
.mcp-wait-intro { margin-top: 8px !important; font-size: .72rem; color: var(--mcp-muted); }

/* ---------- Modales (QR, programa, stands) ---------- */

.mcp-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; }
.mcp-dialog::backdrop { background: rgba(23, 18, 37, .7); }
.mcp-dialog[open] { display: flex; justify-content: center; align-items: flex-end; }
.mcp-sheet { width: min(100%, 520px); height: min(88dvh, 760px); border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -18px 60px rgba(26, 20, 42, .28); display: flex; flex-direction: column; overflow: hidden; color: var(--mcp-ink); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.mcp-sheet-head { padding: 17px 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--mcp-line); }
.mcp-sheet-head h2 { font-size: 1.12rem; letter-spacing: -.03em; }
.mcp-close { flex: 0 0 auto; width: 39px; height: 39px; border: 1px solid var(--mcp-line); border-radius: 50%; background: #f7f7fa; color: #3a334b; font-size: 1.4rem; line-height: 1; display: grid; place-items: center; }
.mcp-search { height: 46px; margin: 12px 14px 8px; padding: 0 12px; border: 1px solid #dedee6; border-radius: 12px; background: #f8f8fa; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.mcp-search svg { width: 18px; height: 18px; color: #777986; flex: 0 0 auto; }
.mcp-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--mcp-ink); font-size: 1rem; box-shadow: none; padding: 0; height: auto; }
.mcp-filters { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 10px; scrollbar-width: none; flex: 0 0 auto; }
.mcp-filters::-webkit-scrollbar { display: none; }
.mcp-filters button { flex: 0 0 auto; min-height: 34px; padding: 0 11px; border: 1px solid #e1e1e8; border-radius: 99px; background: #fff; color: #696b76; font-size: .72rem; font-weight: 800; }
.mcp-filters button[aria-pressed="true"] { border-color: var(--mcp-purple); background: var(--mcp-purple-50); color: var(--mcp-purple-dark); }
.mcp-filters button span { margin-left: 3px; }
.mcp-sheet-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 22px; }
.mcp-sheet-meta { padding: 0 14px 7px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: 0 0 auto; }
.mcp-sheet-meta strong { font-size: .72rem; }
.mcp-sheet-meta small { font-size: .64rem; color: var(--mcp-muted); }
.mcp-sheet-progress { padding: 10px 14px 2px; flex: 0 0 auto; }
.mcp-sheet-progress strong { font-size: .74rem; }
.mcp-day-label { padding: 12px 0 6px; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--mcp-faint); }

.mcp-act { min-height: 65px; padding: 8px 0; display: grid; grid-template-columns: 47px minmax(0, 1fr); gap: 10px; align-items: center; border-top: 1px solid var(--mcp-line-soft); }
.mcp-act time { font-size: .8rem; font-weight: 900; color: var(--mcp-purple-dark); }
.mcp-act > div { display: grid; min-width: 0; }
.mcp-act span { margin-bottom: 2px; color: #8a6719; font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.mcp-act strong { font-size: .78rem; line-height: 1.3; }
.mcp-act small { margin-top: 2px; color: var(--mcp-muted); font-size: .66rem; }
.mcp-act.is-live time { color: var(--mcp-success); }

.mcp-stand { width: 100%; min-height: 58px; padding: 8px 0; border: 0; border-top: 1px solid var(--mcp-line-soft); background: #fff; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; color: var(--mcp-ink); }
.mcp-stand-check { width: 27px; height: 27px; border: 1px solid #d9d9e2; border-radius: 9px; background: #f8f8fa; display: grid; place-items: center; color: #fff; font-size: .75rem; font-weight: 900; }
.mcp-stand > div { display: grid; min-width: 0; }
.mcp-stand strong { font-size: .78rem; }
.mcp-stand small { font-size: .66rem; color: var(--mcp-muted); margin-top: 2px; }
.mcp-stand em { font-size: .62rem; font-style: normal; font-weight: 900; color: #8a8c96; }
.mcp-stand[aria-pressed="true"] .mcp-stand-check { border-color: var(--mcp-success); background: var(--mcp-success); }
.mcp-stand[aria-pressed="true"] em { color: var(--mcp-success); }
.mcp-stand:disabled { opacity: .6; }

.mcp-qr-card { position: relative; width: min(100% - 24px, 440px); margin: auto; padding: 25px 22px; border-radius: 24px; background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 24px 80px rgba(0, 0, 0, .42); color: var(--mcp-ink); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.mcp-qr-card .mcp-close { position: absolute; top: 15px; right: 15px; }
.mcp-qr-card .mcp-logo { position: absolute; top: 27px; left: 25px; height: 22px; }
.mcp-qr-card .mcp-eyebrow { margin-top: 40px; color: var(--mcp-purple-dark); }
.mcp-qr-card h2 { margin: 2px 0 16px; font-size: 1.3rem; letter-spacing: -.03em; }
.mcp-qr-big { width: min(76vw, 320px); aspect-ratio: 1; padding: 14px; border: 1px solid var(--mcp-line); border-radius: 22px; background: #fff; box-shadow: 0 10px 35px rgba(39, 28, 76, .12); }
.mcp-qr-big svg { display: block; width: 100%; height: 100%; }
.mcp-qr-code { margin-top: 16px; color: var(--mcp-purple-dark); font-size: 1.1rem; font-weight: 900; letter-spacing: .12em; }
.mcp-qr-help { max-width: 300px; margin-top: 7px !important; color: var(--mcp-muted); font-size: .8rem; }
.mcp-dialog--center[open] { align-items: center; }

/* ---------- Perfil ---------- */

.mcp-profile-head { display: flex; align-items: center; gap: 13px; }
.mcp-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--mcp-purple-100); color: var(--mcp-purple-dark); display: grid; place-items: center; font-size: 1rem; font-weight: 900; }
.mcp-profile-head h1 { font-size: 1.3rem; letter-spacing: -.035em; }
.mcp-profile-head p { font-size: .76rem; color: var(--mcp-muted); }
.mcp-fields { margin-top: 12px; display: grid; gap: 0; }
.mcp-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--mcp-line-soft); }
.mcp-field small { display: block; font-size: .64rem; font-weight: 800; color: var(--mcp-faint); letter-spacing: .06em; text-transform: uppercase; }
.mcp-field strong { display: block; font-size: .86rem; overflow-wrap: anywhere; margin-top: 1px; }
.mcp-verified { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 99px; background: var(--mcp-success-bg); color: var(--mcp-success); font-size: .62rem; font-weight: 800; }
.mcp-cv { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 11px; align-items: center; padding: 11px 0; border-top: 1px solid var(--mcp-line-soft); }
.mcp-cv-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--mcp-purple-50); color: var(--mcp-purple-dark); display: grid; place-items: center; font-size: .62rem; font-weight: 900; }
.mcp-cv strong { display: block; font-size: .84rem; overflow-wrap: anywhere; }
.mcp-cv small { font-size: .68rem; color: var(--mcp-muted); }
.mcp-cv-actions { grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: 6px; }
.mcp-cv-actions .mcp-btn { min-height: 32px; padding: 0 11px; font-size: .7rem; }
.mcp-cv-actions form { margin: 0; display: inline; }
.mcp-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mcp-line-soft); display: grid; gap: 10px; }
.mcp-form label { display: grid; gap: 5px; font-size: .72rem; font-weight: 800; color: #4c4e5c; }
.mcp-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dedee6; border-radius: 11px; background: #f8f8fa; color: var(--mcp-ink); font: inherit; font-size: .9rem; font-weight: 500; }
.mcp-input:focus { outline: 3px solid var(--mcp-purple-100); border-color: var(--mcp-purple); background: #fff; }
.mcp-consent-card { width: min(100% - 24px, 560px); margin: auto; padding: 20px; border-radius: 20px; background: #fff; color: var(--mcp-ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .22); display: grid; gap: 14px; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.mcp-consent-card h3 { font-size: 1.05rem; }
.mcp-consent-card p { font-size: .82rem; color: var(--mcp-muted); }
.mcp-consent-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 13px; background: #f6f4fd; font-size: .82rem; }
.mcp-consent-check input { margin-top: 3px; accent-color: var(--mcp-purple); }
.mcp-row-end { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Mis eventos ---------- */

.mcp-event-tile { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 13px; align-items: center; padding: 14px; transition: border-color .15s, transform .15s; }
.mcp-event-tile:hover { border-color: #d7cff1; transform: translateY(-1px); }
.mcp-event-date { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, #7954ec, #49309f); color: #fff; display: grid; place-items: center; align-content: center; text-align: center; line-height: 1; }
.mcp-event-date strong { font-size: 1.35rem; letter-spacing: -.04em; }
.mcp-event-date small { font-size: .58rem; font-weight: 900; letter-spacing: .1em; margin-top: 3px; }
.mcp-event-tile.is-past .mcp-event-date { background: linear-gradient(135deg, #9a9aa8, #6f6f7e); }
.mcp-event-tile h2 { font-size: .96rem; letter-spacing: -.02em; }
.mcp-event-tile p { font-size: .72rem; color: var(--mcp-muted); margin-top: 2px !important; }
.mcp-event-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--mcp-line-soft); }
.mcp-section-label { margin: 14px 2px 6px; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--mcp-faint); }

/* ---------- Accesos (login requerido / token no válido) ---------- */

.mcp-gate { max-width: 440px; margin: 24px auto; text-align: center; display: grid; justify-items: center; gap: 10px; padding: 26px 20px; }
.mcp-gate .mcp-logo { height: 34px; margin-bottom: 6px; }
.mcp-gate h1 { font-size: 1.3rem; letter-spacing: -.03em; }
.mcp-gate p { font-size: .84rem; color: var(--mcp-muted); }

@keyframes mcp-pulse { 50% { transform: scale(.75); opacity: .65; } }

@media (prefers-reduced-motion: reduce) {
  .mcp *, .mcp-dialog * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 390px) {
  .mcp-hero { grid-template-columns: 1fr 118px; }
  .mcp-code-id strong { font-size: 2rem; }
  .mcp-stand em { display: none; }
  .mcp-stand { grid-template-columns: 30px minmax(0, 1fr); }
}

@media (min-width: 560px) {
  .mcp-dialog[open] { align-items: center; padding: 24px; }
  .mcp-sheet { border-radius: 22px; }
}

/* =====================================================================
 * Escritorio
 * ===================================================================== */
@media (min-width: 900px) {
  .mcp { padding-bottom: 48px; }
  .mcp-bottomnav { display: none; }

  .mcp-topbar { display: block; position: sticky; top: var(--mcp-site-header, 0px); z-index: 40; background: #fff; border-bottom: 1px solid var(--mcp-line); }
  .mcp-topbar-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 28px; }
  .mcp-topbar .mcp-logo { height: 26px; }
  .mcp-topbar-context { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--mcp-line); padding-left: 24px; min-width: 0; }
  .mcp-topbar-context > i { width: 9px; height: 9px; border-radius: 50%; background: var(--mcp-purple); box-shadow: 0 0 0 5px var(--mcp-purple-50); flex: 0 0 auto; }
  .mcp-topbar-context div { display: grid; min-width: 0; }
  .mcp-topbar-context small { font-size: .62rem; color: var(--mcp-faint); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .mcp-topbar-context strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
  .mcp-toptabs { display: flex; gap: 4px; margin-left: auto; height: 100%; }
  .mcp-toptabs a { display: flex; align-items: center; gap: 7px; padding: 0 14px; height: 100%; border-bottom: 2px solid transparent; color: #6d6f7c; font-size: .84rem; font-weight: 700; }
  .mcp-toptabs a svg { width: 17px; height: 17px; }
  .mcp-toptabs a:hover { color: var(--mcp-ink); }
  .mcp-toptabs a[aria-current="page"] { color: var(--mcp-purple-dark); border-color: var(--mcp-purple); }
  .mcp-topbar-user { display: flex; align-items: center; gap: 9px; }
  .mcp-topbar-user > span:first-child { width: 36px; height: 36px; border-radius: 50%; background: var(--mcp-purple-100); color: var(--mcp-purple-dark); display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
  .mcp-topbar-user > span:last-child { display: grid; }
  .mcp-topbar-user strong { font-size: .8rem; }
  .mcp-topbar-user small { font-size: .66rem; color: var(--mcp-faint); }

  .mcp-main { max-width: 1180px; padding: 28px 24px 32px; }
  .mcp-stack { gap: 18px; }
  .mcp-card { padding: 22px 24px; }

  .mcp-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
  .mcp-intro h1 { font-size: 2rem; }
  .mcp-intro > div > p:last-child { font-size: .92rem; margin-top: 8px; }
  .mcp-chip-ok { margin-top: 0; font-size: .74rem; padding: 9px 13px; }

  .mcp-pass { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .85fr); border-radius: 24px; }
  .mcp-checkin { padding: 30px; }
  .mcp-checkin-head h2 { font-size: 1.55rem; }
  .mcp-number { width: 36px; height: 36px; border-radius: 11px; }
  .mcp-checkin-lead { font-size: 1rem; margin: 22px 0 !important; max-width: 600px; }
  .mcp-state { padding: 14px 16px; border-radius: 15px; }
  .mcp-state strong { font-size: 1.05rem; }
  .mcp-checkin-btn { min-height: 66px; border-radius: 14px; margin-top: 15px; }
  .mcp-ticket { border-top: 0; border-left: 1px solid rgba(58, 43, 103, .12); padding: 0; display: flex; flex-direction: column; }
  .mcp-ticket-top { height: 55px; padding: 0 21px; border-bottom: 1px dashed #d5d5df; }
  .mcp-ticket-body { display: block; text-align: center; padding: 22px 25px 18px; }
  .mcp-qr { width: 150px; height: 150px; padding: 9px; margin: 0 auto 14px; border-radius: 14px; }
  .mcp-ticket-name { font-size: .68rem; }
  .mcp-ticket-body h3 { font-size: 1.18rem; margin: 5px 0 17px; }
  .mcp-ticket-body dl { padding-top: 14px; }
  .mcp-ticket-body dd { font-size: .8rem; }
  .mcp-ticket-stub { margin: auto 0 0; min-height: 43px; padding: 0 21px; }

  .mcp-trip { padding: 0 25px; border-radius: var(--mcp-radius); }
  .mcp-trip summary { min-height: 64px; }
  .mcp-trip summary strong { font-size: .92rem; }
  /* Escritorio: fila horizontal. Padding (no margin) abajo: el margen se
     escapaba del <details> y el texto quedaba pegado al borde. */
  .mcp .mcp-steps { grid-template-columns: repeat(7, 1fr); padding: 6px 0 22px; }
  .mcp-steps li { min-height: 0; grid-template-columns: none; justify-items: center; align-items: start; text-align: center; gap: 8px; font-size: .76rem; }
  .mcp-steps li::before { left: auto; right: 50%; top: 15px; width: 100%; height: 2px; }
  .mcp-steps li i { width: 31px; height: 31px; font-size: .7rem; }
  .mcp-steps li > span { display: block; }
  .mcp-steps li small { display: block; font-size: .64rem; }
  .mcp-steps li small::before { content: none; }

  .mcp-grid-before { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 18px; align-items: start; }
  .mcp-grid-before > .mcp-col { display: grid; gap: 18px; }
  .mcp-card-title h2 { font-size: 1.18rem; }
  .mcp-event-visual { min-height: 130px; padding: 18px 21px; }
  .mcp-event-visual strong { font-size: 2.7rem; }
  .mcp-event-info { padding: 20px 21px; }

  .mcp-offers { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .mcp-offer { grid-template-columns: 39px minmax(0, 1fr) auto; }
  .mcp-offer-status { grid-column: auto; justify-content: flex-end; }
  .mcp-offers-more { grid-column: 1 / -1; }
  .mcp-offers-more .mcp-offers { margin-top: 0; }

  .mcp-hero { grid-template-columns: 1.25fr .72fr .85fr; align-items: center; gap: 22px; padding: 24px 26px; border-radius: 24px; }
  .mcp-hero-check { width: 45px; height: 45px; box-shadow: 0 0 0 7px rgba(72, 215, 161, .12); }
  .mcp-hero-welcome { gap: 14px; }
  .mcp-hero-welcome h1 { font-size: 1.65rem; }
  .mcp-hero-welcome p:last-child { font-size: .82rem; }
  .mcp-code { border-right: 1px solid rgba(255, 255, 255, .16); padding: 0 22px; }
  .mcp-code-id strong { font-size: 3rem; }
  .mcp-code small { font-size: .62rem; }
  .mcp-code p { font-size: .64rem; }
  .mcp-calls-btn { grid-column: auto; min-height: 64px; padding: 10px 13px; border-radius: 14px; }

  .mcp-grid-inside { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 18px; align-items: start; }
  .mcp-grid-inside > .mcp-col { display: grid; gap: 18px; }
  .mcp-areas { gap: 18px; }
  .mcp-interview.is-calling { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .mcp-interview { grid-template-columns: 11px 56px minmax(0, 1fr) auto; }
  .mcp-interview-meta { grid-column: auto; justify-content: flex-end; }

  .mcp-grid-profile { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
  .mcp-fields { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .mcp-form { grid-template-columns: 1fr 1fr; align-items: end; }
  .mcp-form > .mcp-form-wide { grid-column: 1 / -1; }

  .mcp-events-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .mcp-event-tile { padding: 18px 20px; }
}

@media (min-width: 1180px) {
  .mcp-events-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .mcp-grid-before > :only-child { grid-column: 1 / -1; }
}

/* ---------- Acceso a candidatos.matchia.es ---------- */
.mcp-login { margin-top: 8vh; }
.mcp-login .mcp-eyebrow { margin: 0; color: var(--mcp-purple-dark); }
.mcp-login-form { width: 100%; display: grid; gap: 12px; margin-top: 8px; text-align: left; }
.mcp-login-form label { display: grid; gap: 6px; font-size: .74rem; font-weight: 800; color: #4c4e5c; }
.mcp-input--code { font-size: 1.4rem; letter-spacing: .4em; text-align: center; font-weight: 800; }
.mcp-login-help { font-size: .74rem !important; }
.mcp-login-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 4px; }
.mcp .mcp-text-btn:disabled { color: #a5a6ae; cursor: default; }
.mcp-lang { display: flex; gap: 6px; margin-top: 6px; }
.mcp-lang a { padding: 5px 10px; border-radius: 99px; font-size: .7rem; font-weight: 800; color: var(--mcp-muted); border: 1px solid var(--mcp-line); }
.mcp-lang a[aria-current="true"] { color: var(--mcp-purple-dark); border-color: var(--mcp-purple); background: var(--mcp-purple-50); }

/* ---------- Pantallas heredadas (edición de datos) con estilo Matchia ---------- */
.mcp-legacy { padding: 18px 12px 40px; --text: var(--mcp-ink); --muted: var(--mcp-muted); --border: var(--mcp-line); --surface: #fff; --surface-2: #f8f8fa; --primary: var(--mcp-purple); }
.mcp-legacy .pe-section { background: transparent; padding: 0; }
.mcp-legacy .container { max-width: 980px; margin: 0 auto; padding: 0; }
.mcp-legacy .pe-stack { display: grid; gap: 12px; }
.mcp-legacy .pe-card { background: #fff; border: 1px solid var(--mcp-line); border-radius: var(--mcp-radius); box-shadow: var(--mcp-shadow); color: var(--mcp-ink); }
.mcp-legacy .pe-card--pad { padding: 18px 16px; }
.mcp-legacy .pe-title { font-family: inherit; font-weight: 800; letter-spacing: -.03em; color: var(--mcp-ink); }
.mcp-legacy h1.pe-title { font-size: 1.45rem; }
.mcp-legacy h2.pe-title { font-size: 1.02rem !important; }
.mcp-legacy p, .mcp-legacy .split__text { color: var(--mcp-muted); font-size: .84rem; }
.mcp-legacy label, .mcp-legacy .profile-label { font-size: .74rem !important; font-weight: 800 !important; color: #4c4e5c !important; }
.mcp-legacy input[type="text"], .mcp-legacy input[type="email"], .mcp-legacy input[type="tel"], .mcp-legacy input[type="date"],
.mcp-legacy input[type="number"], .mcp-legacy select, .mcp-legacy textarea, .mcp-legacy .pe-field {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dedee6; border-radius: 11px; background: #f8f8fa; color: var(--mcp-ink); font: inherit; font-size: .9rem; box-shadow: none;
}
.mcp-legacy input:focus, .mcp-legacy select:focus, .mcp-legacy textarea:focus { outline: 3px solid var(--mcp-purple-100); border-color: var(--mcp-purple); background: #fff; }
.mcp-legacy .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--mcp-line); font-family: inherit; font-size: .8rem; font-weight: 800; background: #fff; color: var(--mcp-ink); text-decoration: none; cursor: pointer; }
.mcp-legacy .btn--primary { background: var(--mcp-purple); border-color: var(--mcp-purple); color: #fff; }
.mcp-legacy .btn--primary:hover { background: #7b56ee; }
.mcp-legacy .btn--ghost { background: #fff; color: var(--mcp-ink); }
.mcp-legacy .profile-check { border-radius: 13px; background: #f6f4fd; border-color: #e5e0f6; font-size: .82rem; }
.mcp-legacy .profile-check input { accent-color: var(--mcp-purple); }
@media (min-width: 900px) {
  .mcp-legacy { padding: 32px 24px 48px; }
  .mcp-legacy .pe-card--pad { padding: 22px 24px; }
  .mcp-legacy h1.pe-title { font-size: 2rem; }
}
.mcp-flash--admin { background: #fff5da; color: #7a5208; border: 1px solid #f0d99c; }

/* =====================================================================
 * Llamadas en directo (móvil del candidato) — modo oscuro
 * ===================================================================== */
.mcp-calls-body { margin: 0; min-height: 100vh; background: #171423; color: #fff; font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.mcp-calls { --mcp-brand: #854fff; --mcp-brand-dark: #6842e8; min-height: 100vh; transition: background .4s; }
.mcp-calls *, .mcp-calls *::before, .mcp-calls *::after { box-sizing: border-box; }
.mcp-calls h1, .mcp-calls p { margin: 0; }
.mcp-calls [hidden] { display: none !important; }
.mcp-calls .mcp-eyebrow { color: #938ba3; }

.mcp-calls-header { position: sticky; top: 0; z-index: 5; height: 64px; padding: 0 16px; background: #211c31; border-bottom: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: space-between; }
.mcp-calls-back { color: #d9d5e1; font-size: .8rem; font-weight: 800; text-decoration: none; }
.mcp-calls-mycode { display: grid; text-align: left; border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 18px; }
.mcp-calls-mycode small { font-size: .58rem; letter-spacing: .1em; color: #aaa2bb; text-transform: uppercase; font-weight: 800; }
.mcp-calls-mycode strong { font-size: 1.15rem; color: #d7cbff; letter-spacing: .04em; }

.mcp-calls-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 22px 14px 48px; }
.mcp-calls-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mcp-calls-intro h1 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.04em; font-weight: 800; }
.mcp-calls-intro > div > p:last-child { margin-top: 6px; color: #aaa4b5; font-size: .86rem; line-height: 1.45; }
.mcp-calls-intro time { font-size: .9rem; color: #c9c3d3; font-variant-numeric: tabular-nums; padding-top: 2px; }

.mcp-calls-turn { margin-top: 18px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--mcp-brand), var(--mcp-brand-dark)); box-shadow: 0 0 0 4px rgba(133, 79, 255, .18), 0 20px 45px rgba(39, 20, 92, .45); animation: mcp-glow 2s ease-in-out infinite; display: grid; gap: 3px; }
.mcp-calls-turn small { font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #efe9ff; }
.mcp-calls-turn strong { font-size: 1.15rem; }
.mcp-calls-turn p { font-size: .82rem; color: #e6defb; }

.mcp-calls-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mcp-call { position: relative; min-height: 132px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 17px; background: #242033; display: grid; place-items: center; align-content: center; text-align: center; padding: 14px 8px; }
.mcp-call > span { font-size: 2.35rem; font-weight: 900; letter-spacing: .04em; line-height: 1.05; }
.mcp-call > div { display: grid; margin-top: 4px; }
.mcp-call strong { font-size: .82rem; }
.mcp-call.is-mine { grid-column: 1 / -1; min-height: 150px; background: linear-gradient(135deg, var(--mcp-brand), var(--mcp-brand-dark)); border-color: #a983ff; box-shadow: 0 0 0 4px rgba(133, 79, 255, .18), 0 20px 45px rgba(39, 20, 92, .45); animation: mcp-glow 2s ease-in-out infinite; }
.mcp-call.is-mine > span { font-size: 3rem; }
.mcp-call.is-mine > i { position: absolute; top: 12px; border-radius: 20px; background: #fff; color: var(--mcp-brand-dark); padding: 5px 10px; font-style: normal; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mcp-call.is-mine > span { margin-top: 18px; }

.mcp-calls-empty { margin-top: 20px; padding: 28px 16px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 16px; text-align: center; color: #aaa4b5; font-size: .86rem; }

.mcp-calls-tip { margin-top: 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: #211d2e; display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; }
.mcp-calls-tip > span { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #332b48; display: grid; place-items: center; }
.mcp-calls-tip strong { font-size: .84rem; }
.mcp-calls-tip p { font-size: .74rem; color: #a9a3b1; margin-top: 3px; line-height: 1.45; }
.mcp-calls-enable { margin-top: 10px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(169, 131, 255, .5); border-radius: 10px; background: rgba(133, 79, 255, .16); color: #e4d9ff; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.mcp-calls-enabled { color: #8fe3bf !important; font-weight: 700; }

.mcp-calls.is-my-turn { background: radial-gradient(120% 60% at 50% 0%, rgba(133, 79, 255, .28), transparent 70%); }

@keyframes mcp-glow { 50% { box-shadow: 0 0 0 8px rgba(133, 79, 255, .1), 0 22px 55px rgba(39, 20, 92, .55); } }

@media (min-width: 640px) {
  .mcp-calls-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .mcp-call { min-height: 150px; }
  .mcp-call > span { font-size: 2.8rem; }
  .mcp-calls-intro h1 { font-size: 2rem; }
}
@media (max-width: 340px) { .mcp-calls-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mcp-call.is-mine, .mcp-calls-turn { animation: none; } }