/* ============================================================================
   Lado cliente del marketplace: reserva de cita y catálogo de formación
   ----------------------------------------------------------------------------
   Prefijos:  .cr-*  reserva de cita      (/servicios/reservar/{id})
              .cf-*  catálogo formación   (/formacion/catalogo)
              .cs-*  mis citas y sesiones (/servicios/mis-citas)

   Paleta alineada con la del portal: violeta DSA sobre grises fríos.
   ========================================================================== */

:root {
    --cl-text:        #1f2937;
    --cl-strong:      #0f172a;
    --cl-soft:        #6b7280;
    --cl-muted:       #9ca3af;
    --cl-bg:          #ffffff;
    --cl-bg-soft:     #f9fafb;
    --cl-line:        rgba(15, 23, 42, .07);
    --cl-line-strong: rgba(15, 23, 42, .15);
    --cl-primary:     #6d28d9;
    --cl-primary-bg:  rgba(109, 40, 217, .08);
    --cl-ok:          #047857;
    --cl-ok-bg:       rgba(4, 120, 87, .1);
    --cl-warn:        #b45309;
    --cl-warn-bg:     #fef3c7;
    --cl-danger:      #b91c1c;
    --cl-danger-bg:   #fee2e2;
    --cl-info:        #1e40af;
    --cl-info-bg:     rgba(30, 64, 175, .08);
    --cl-radius:      14px;
    --cl-shadow:      0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.05);
    --cl-shadow-hi:   0 10px 28px rgba(15,23,42,.09), 0 0 0 1px rgba(15,23,42,.06);
}

.cl-page { max-width: 1180px; margin: 0 auto; padding: 22px; color: var(--cl-text); }

.cl-head { margin-bottom: 20px; }

.cl-head h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cl-strong);
    letter-spacing: -.025em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cl-head p {
    font-size: .9rem;
    color: var(--cl-soft);
    margin: 8px 0 0;
    max-width: 680px;
    line-height: 1.6;
}

.cl-volver {
    border: 0;
    background: transparent;
    color: var(--cl-primary);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 0 8px;
}

.cl-volver:hover { text-decoration: underline; }

.cl-card {
    background: var(--cl-bg);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow);
    padding: 18px;
}

.cl-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: .85rem;
    line-height: 1.55;
    margin-bottom: 16px;
}

.cl-aviso--ok   { background: var(--cl-ok-bg);     color: var(--cl-ok); }
.cl-aviso--warn { background: var(--cl-warn-bg);   color: var(--cl-warn); }
.cl-aviso--err  { background: var(--cl-danger-bg); color: var(--cl-danger); }
.cl-aviso--info { background: var(--cl-info-bg);   color: var(--cl-info); }

.cl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}

.cl-chip--ok    { background: var(--cl-ok-bg);     color: var(--cl-ok); }
.cl-chip--warn  { background: var(--cl-warn-bg);   color: var(--cl-warn); }
.cl-chip--err   { background: var(--cl-danger-bg); color: var(--cl-danger); }
.cl-chip--info  { background: var(--cl-info-bg);   color: var(--cl-info); }
.cl-chip--prim  { background: var(--cl-primary-bg); color: var(--cl-primary); }

.cl-vacio {
    text-align: center;
    padding: 48px 20px;
    background: var(--cl-bg);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow);
    color: var(--cl-muted);
}

.cl-vacio__t { font-weight: 650; color: var(--cl-text); margin: 12px 0 5px; font-size: 1rem; }

.cl-skel {
    background: linear-gradient(90deg, var(--cl-bg-soft) 25%, var(--cl-line) 37%, var(--cl-bg-soft) 63%);
    background-size: 400% 100%;
    animation: cl-shimmer 1.3s ease infinite;
    border-radius: var(--cl-radius);
}

@keyframes cl-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ══ Reserva de cita ════════════════════════════════════════════════════ */

.cr-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 940px) { .cr-body { grid-template-columns: 1fr; } }

/* Aviso de huso. Aparece SOLO cuando difieren: uno permanente se vuelve
   invisible, y este es el que evita que alguien se pierda su propia cita. */
.cr-tz {
    display: flex;
    gap: 9px;
    align-items: center;
    background: var(--cl-info-bg);
    color: var(--cl-info);
    border-radius: 10px;
    padding: 11px 15px;
    font-size: .85rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.cr-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x proximity;
}

.cr-day {
    flex: none;
    width: 76px;
    border: 1px solid var(--cl-line);
    border-radius: 10px;
    background: var(--cl-bg);
    padding: 10px 4px 9px;
    cursor: pointer;
    text-align: center;
    scroll-snap-align: start;
    transition: all .15s ease;
}

.cr-day:hover:not(.cr-day--none) { border-color: var(--cl-primary); transform: translateY(-2px); }

.cr-day--sel {
    border-color: var(--cl-primary);
    background: var(--cl-primary-bg);
    box-shadow: 0 0 0 1px var(--cl-primary);
}

.cr-day--none { opacity: .4; cursor: not-allowed; }

.cr-day__dow  { font-size: .68rem; text-transform: uppercase; color: var(--cl-soft); letter-spacing: .05em; }
.cr-day__num  { font-size: 1.35rem; font-weight: 700; color: var(--cl-strong); line-height: 1.1; }
.cr-day__hoy  { font-size: .6rem; text-transform: uppercase; color: var(--cl-primary); font-weight: 700; }
.cr-day__dot  { width: 5px; height: 5px; border-radius: 50%; background: var(--cl-ok); margin: 5px auto 0; }
.cr-day__dot--none { background: transparent; }

.cr-franja {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cl-muted);
    font-weight: 700;
    margin: 18px 0 9px;
}

.cr-franja:first-of-type { margin-top: 4px; }

.cr-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }

.cr-slot {
    border: 1px solid var(--cl-line-strong);
    background: var(--cl-bg);
    border-radius: 10px;
    padding: 11px 6px;
    font-size: .95rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--cl-strong);
    cursor: pointer;
    transition: all .13s ease;
}

.cr-slot:hover { border-color: var(--cl-primary); color: var(--cl-primary); background: var(--cl-primary-bg); }

.cr-slot--sel { background: var(--cl-primary); border-color: var(--cl-primary); color: #fff; }

.cr-slot__alt { display: block; font-size: .68rem; font-weight: 500; opacity: .72; margin-top: 2px; }

.cr-side {
    position: sticky;
    top: 16px;
    background: var(--cl-bg);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow);
    padding: 18px;
}

.cr-linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .85rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--cl-line);
}

.cr-linea:last-of-type { border-bottom: 0; }
.cr-linea__k { color: var(--cl-soft); }
.cr-linea__v { font-weight: 650; color: var(--cl-strong); text-align: right; }

.cr-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 14px 0 4px;
    padding-top: 14px;
    border-top: 2px solid var(--cl-line);
}

.cr-total__v { font-size: 1.55rem; font-weight: 700; color: var(--cl-strong); font-variant-numeric: tabular-nums; }

/* Cuenta atrás de la retención: sin ella el cliente no sabe que tiene prisa y
   el hueco caduca mientras rellena sus datos. */
.cr-hold {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cl-warn-bg);
    color: var(--cl-warn);
    border-radius: 10px;
    padding: 12px 15px;
    font-size: .85rem;
    font-weight: 650;
    margin-bottom: 14px;
}

.cr-hold__t { font-variant-numeric: tabular-nums; font-size: 1.15rem; }

.cl-cta {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: var(--cl-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 650;
    padding: 13px;
    cursor: pointer;
    transition: filter .15s ease;
}

.cl-cta:hover:not(:disabled) { filter: brightness(1.1); }
.cl-cta:disabled { background: var(--cl-line-strong); cursor: not-allowed; }

.cr-ok { background: var(--cl-ok-bg); color: var(--cl-ok); border-radius: var(--cl-radius); padding: 26px; text-align: center; }
.cr-ok__t { font-size: 1.3rem; font-weight: 700; margin: 8px 0 6px; }

/* ══ Brechas de cumplimiento ════════════════════════════════════════════
   Es lo primero de la pantalla de formación: el responsable no entra
   buscando un curso, entra buscando cerrar un agujero que le van a auditar. */

.cf-brechas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }

.cf-br {
    background: var(--cl-bg);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 3px solid var(--cl-line-strong);
    transition: box-shadow .18s ease;
}

.cf-br:hover { box-shadow: var(--cl-shadow-hi); }

.cf-br--alta   { border-left-color: var(--cl-warn); }
.cf-br--critica{ border-left-color: var(--cl-danger); }

.cf-br__cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cf-br__mat { font-size: 1rem; font-weight: 650; color: var(--cl-strong); line-height: 1.3; }
.cf-br__ley { font-size: .72rem; color: var(--cl-soft); margin-top: 3px; display: flex; align-items: center; gap: 4px; }

.cf-br__num { display: flex; gap: 20px; }
.cf-br__n { font-size: 1.5rem; font-weight: 700; color: var(--cl-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.cf-br__l { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cl-muted); font-weight: 650; }

.cf-br__pie { font-size: .75rem; color: var(--cl-soft); line-height: 1.5; }

/* Cuando hay sesión que cierra la brecha, el remate es verde y accionable.
   Cuando no la hay, se dice sin adornos en vez de dejar un botón muerto. */
.cf-br__sol {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--cl-ok-bg);
    color: var(--cl-ok);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: .76rem;
    font-weight: 600;
}

.cf-br__nada { font-size: .74rem; color: var(--cl-muted); font-style: italic; }

/* ══ Tarjeta de sesión ══════════════════════════════════════════════════ */

.cf-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }

.cf-ses {
    background: var(--cl-bg);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    transition: box-shadow .18s ease, transform .18s ease;
}

.cf-ses:hover { box-shadow: var(--cl-shadow-hi); transform: translateY(-2px); }

/* La norma va ARRIBA del todo: en cumplimiento nadie se apunta por el temario,
   se apunta porque le exigen acreditarlo. */
.cf-norma {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--cl-info-bg);
    color: var(--cl-info);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: .72rem;
    font-weight: 650;
    align-self: flex-start;
}

.cf-ses__t { font-size: 1.05rem; font-weight: 650; color: var(--cl-strong); line-height: 1.3; }
.cf-ses__p { font-size: .74rem; color: var(--cl-soft); }

.cf-ses__d {
    font-size: .84rem;
    color: var(--cl-soft);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cf-ses__cuando {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    font-weight: 650;
    color: var(--cl-strong);
    font-variant-numeric: tabular-nums;
}

.cf-ses__meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.cf-aforo { position: relative; height: 7px; border-radius: 999px; background: var(--cl-line); }
.cf-aforo__f { height: 100%; border-radius: 999px; background: var(--cl-primary); transition: width .3s ease; }
.cf-aforo__f--ok { background: var(--cl-ok); }
.cf-aforo__f--full { background: var(--cl-danger); }

/* La marca del mínimo: por debajo, la sesión puede cancelarse. Quien se apunta
   merece saberlo antes, no el día que se cancela. */
.cf-aforo__min {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 13px;
    background: var(--cl-muted);
    border-radius: 1px;
}

.cf-ses__pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--cl-line);
}

.cf-precio { font-size: 1.15rem; font-weight: 700; color: var(--cl-strong); font-variant-numeric: tabular-nums; }

.cf-btn {
    border: 0;
    border-radius: 10px;
    background: var(--cl-primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 650;
    padding: 10px 18px;
    cursor: pointer;
    transition: filter .15s ease;
}

.cf-btn:hover:not(:disabled) { filter: brightness(1.1); }
.cf-btn:disabled { background: var(--cl-line-strong); cursor: not-allowed; }
.cf-btn--espera { background: var(--cl-warn); }
.cf-btn--ya { background: var(--cl-ok); }

.cf-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }

.cf-filtro {
    border: 1px solid var(--cl-line-strong);
    background: var(--cl-bg);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: .82rem;
    color: var(--cl-text);
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cf-filtro:hover { border-color: var(--cl-primary); color: var(--cl-primary); }
.cf-filtro--on { background: var(--cl-primary); border-color: var(--cl-primary); color: #fff; }

/* ══ Mis citas y sesiones ═══════════════════════════════════════════════ */

.cs-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background: var(--cl-bg);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow);
    padding: 15px 17px;
    margin-bottom: 11px;
}

.cs-fecha { text-align: center; background: var(--cl-bg-soft); border-radius: 10px; padding: 8px 0; }
.cs-fecha__d { font-size: 1.35rem; font-weight: 700; color: var(--cl-strong); line-height: 1; }
.cs-fecha__m { font-size: .66rem; text-transform: uppercase; color: var(--cl-soft); letter-spacing: .06em; }

.cs-item__t { font-size: .95rem; font-weight: 650; color: var(--cl-strong); }
.cs-item__s { font-size: .76rem; color: var(--cl-soft); display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; align-items: center; }

.cs-acc { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* El botón de entrar a la sala solo aparece cerca de la hora: enseñarlo tres
   semanas antes invita a entrar a una sala vacía y a pensar que no funciona. */
.cs-entrar {
    border: 0;
    border-radius: 10px;
    background: var(--cl-ok);
    color: #fff;
    font-size: .82rem;
    font-weight: 650;
    padding: 9px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cs-entrar:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
    .cs-item { grid-template-columns: 54px minmax(0, 1fr); }
    .cs-acc { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-skel { animation: none; }
    .cr-day, .cr-slot, .cf-ses, .cf-aforo__f { transition: none; }
    .cf-ses:hover, .cr-day:hover { transform: none; }
}