/* Haricode — Consultorio Tecnológico Empresarial.
   Estilos propios de /consultorio, /consultorio/invitacion y la página de
   confirmación. Todo lo compartido (rejilla, botones, bandas, formulario)
   viene de site.css y home.css; aquí solo vive lo que no existe en el
   sistema: el tablero de cupos, la secuencia de tres momentos y el pase de
   invitación. Regla del sitio: ningún color literal, todo desde tokens.css. */

/* ── Tablero de cupos ─────────────────────────────────────
   Es el objeto que carga la conversión: fecha, límite y estado. Se lee
   como una hoja de citas, no como una tarjeta de marketing, porque lo
   que convence aquí es que los cupos sean verificablemente contables. */
.co-board{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;
}
.co-board-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border);
  background:var(--surface-1);
}
.co-board-when{display:grid;gap:2px}
.co-board-when .lbl{
  font-size:var(--fs-xs);color:var(--text-3);
  letter-spacing:.06em;text-transform:uppercase;
}
.co-board-when .date{font-size:var(--fs-md);font-weight:var(--fw-semibold);letter-spacing:-.02em}
.co-left{
  font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ok);
  border:1px solid var(--ok);border-radius:var(--r-pill);
  padding:4px 11px;white-space:nowrap;
}
.co-left[data-full="si"]{color:var(--text-3);border-color:var(--border-strong)}

.co-slots{list-style:none;margin:0;padding:var(--sp-2) 0}
.co-slot{
  display:grid;grid-template-columns:2.2rem 4.6rem minmax(0,1fr) auto;
  align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-6);
  font-variant-numeric:tabular-nums;
}
.co-slot + .co-slot{border-top:1px solid var(--border)}
.co-slot .n{font-size:var(--fs-xs);color:var(--text-3)}
.co-slot .hh{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.co-slot .who{font-size:var(--fs-sm);color:var(--text-3);min-width:0;overflow-wrap:anywhere}
.co-slot .st{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ok);
}
.co-slot .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.co-slot.taken .hh,.co-slot.taken .who{color:var(--text-3)}
.co-slot.taken .st{color:var(--text-3)}
.co-slot.taken .st::before{background:var(--border-strong)}

.co-board-foot{
  padding:var(--sp-4) var(--sp-6) var(--sp-5);
  border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.55;
}
.co-board-foot b{color:var(--text-2);font-weight:var(--fw-medium)}

/* ── Los tres momentos ────────────────────────────────────
   Numerar aquí sí dice algo: antes, durante y después ocurren en ese
   orden y el lector necesita saber que el trabajo grande es el primero. */
.co-steps{display:grid;gap:0;border-top:1px solid var(--border)}
.co-step{
  display:grid;grid-template-columns:10rem minmax(0,1fr);
  gap:var(--sp-3) var(--sp-7);
  padding:var(--sp-6) 0;border-bottom:1px solid var(--border);
}
.co-step-when{display:grid;gap:2px;align-content:start}
.co-step-when b{
  font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--accent);
  letter-spacing:.04em;text-transform:uppercase;
}
.co-step-when span{font-size:var(--fs-xs);color:var(--text-3)}
.co-step h3{font-size:var(--fs-md);margin-bottom:var(--sp-2)}
.co-step p{color:var(--text-2);line-height:1.65;max-width:58ch}

/* ── Listas de marcas ─────────────────────────────────────
   El guion corto en el acento reemplaza al bullet: el sistema ya usa esa
   marca en .final-points y conviene que el ojo la reconozca. */
.co-marks{list-style:none;display:grid;gap:var(--sp-4);max-width:62ch}
.co-marks li{position:relative;padding-left:var(--sp-5);color:var(--text-2);line-height:1.6}
.co-marks li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:10px;height:1px;background:var(--accent);
}
.co-marks li b{color:var(--text);font-weight:var(--fw-semibold)}

/* ── Nota destacada ───────────────────────────────────────*/
.co-note{
  border-left:2px solid var(--accent);background:var(--accent-quiet);
  border-radius:0 var(--r-control) var(--r-control) 0;
  padding:var(--sp-5) var(--sp-6);
  color:var(--text-2);font-size:var(--fs-sm);line-height:1.65;max-width:70ch;
}

/* ── Rejilla de públicos ──────────────────────────────────*/
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.co-grid .card{display:grid;gap:var(--sp-3);align-content:start}
.co-grid .tag{
  font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
.co-grid h3{font-size:var(--fs-md)}
.co-grid p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6}

/* ── Formulario del consultorio ───────────────────────────
   Hereda .lead-form. Las cuatro preguntas son el filtro: sin ellas media
   hora no alcanza, así que ocupan el mismo peso visual que el nombre. */
.co-form .co-q{
  font-size:var(--fs-xs);color:var(--text-3);
  border-top:1px solid var(--border);padding-top:var(--sp-4);margin-top:var(--sp-2);
}
.co-form .co-q b{display:block;color:var(--text-2);font-weight:var(--fw-medium);margin-bottom:2px}

/* ── Pase de invitación (página por invitación) ───────────*/
.co-pass{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--sp-6);display:grid;gap:var(--sp-4);
}
.co-pass-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);
}
.co-pass-org{font-size:var(--fs-xs);color:var(--text-3);line-height:1.4}
.co-pass-seal{
  font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--accent);
  border:1px solid var(--accent);border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap;
}
.co-pass-name{font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:-.02em}
.co-pass-lbl{font-size:var(--fs-xs);color:var(--text-3);display:block;margin-bottom:2px}
.co-pass-foot{font-size:var(--fs-xs);color:var(--text-3);line-height:1.55}

/* ── Confirmación ─────────────────────────────────────────*/
.co-done{max-width:64ch;display:grid;gap:var(--sp-5)}
.co-done-mark{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-quiet);border:1px solid var(--accent);
}
.co-done-mark svg{width:22px;height:22px;color:var(--accent)}
.co-done ol{margin:0;padding-left:1.15rem;display:grid;gap:var(--sp-3);color:var(--text-2);line-height:1.6}
.co-done ol li::marker{color:var(--text-3)}


/* ── Responsivo ───────────────────────────────────────────*/
@media(max-width:1000px){
  .co-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .co-step{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-5) 0}
}
@media(max-width:560px){
  .co-slot{grid-template-columns:1.8rem 4.2rem minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3) var(--sp-5)}
  .co-slot .st{grid-column:2 / -1;margin-top:2px}
  .co-board-top,.co-board-foot{padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .co-board-top{flex-wrap:wrap}
}

/* ── Firma: quién atiende ─────────────────────────────────
   Equivale al bloque de alianza.css, pero vive aquí para no cargar esa
   hoja completa en una página indexable por 12 líneas de estilo. */
.co-sign{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-6);align-items:center}
.co-sign-photo{
  width:132px;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--border);flex:none;
}
.co-sign-photo img{width:100%;height:auto;display:block}
.co-sign p{color:var(--text-2);line-height:1.7;max-width:62ch}
.co-sign p strong{color:var(--text);font-weight:var(--fw-medium)}
.co-sign .who{margin-top:var(--sp-4);font-weight:var(--fw-medium);font-size:var(--fs-sm)}
.co-sign .role{color:var(--text-3);font-size:var(--fs-xs);margin-top:var(--sp-1)}
.co-sign .links{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-4)}

@media(max-width:760px){
  .co-sign{grid-template-columns:1fr;gap:var(--sp-5)}
  .co-sign-photo{width:96px}
}

/* Nota legal al pie de la página por invitación. Portada desde alianza.css
   por la misma razón que .co-sign: no cargar esa hoja entera. */
.co-legal{
  margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--border);
  color:var(--text-3);font-size:var(--fs-xs);line-height:1.6;max-width:80ch;
}