/**
 * Invitación al Club Oficial por sección (modulos/club-invita.php): banda oscura con el naranja del club, como el
 * recuadro lateral (torofans-recuadro.css). Para el socio, una tira con su número y lo que tiene pendiente.
 * @version 1.0
 * @date 2026-11-15
 */
.ci {
    --ci-naranja: #fd3f00;
    position: relative;
    margin: 26px 0;
    overflow: hidden;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(253, 63, 0, .5), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 12px),
        #141414;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    font-family: var(--fuente-texto, "Inter", Arial, sans-serif);
    text-align: left;
}
.ci[hidden], .ci [hidden] { display: none !important; }
.ci a { text-decoration: none; }
.ci-invitado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; }
.ci-icono { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--ci-naranja); font-size: 24px; box-shadow: 0 10px 22px rgba(253, 63, 0, .45); }
.ci-kicker { display: block; color: #ffc23d; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ci-titulo { display: block; margin: 2px 0 4px; font-family: var(--fuente-titulo, "Saira Condensed", sans-serif); font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.ci-texto p { margin: 0 0 8px; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.5; }
.ci-fundador { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: .3em .8em; border-radius: 999px; border: 1px solid rgba(255, 194, 61, .55); background: rgba(255, 194, 61, .12); color: #ffe3a3; font-size: 12px; font-weight: 700; }
.ci-fundador .fa-solid { color: #ffc23d; }
.ci-extras { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 700; }
.ci-extras i { color: var(--ci-naranja); }
.ci-accion { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ci-boton { display: inline-flex; align-items: center; gap: 8px; padding: .85em 1.4em; border-radius: 999px; background: var(--ci-naranja); color: #fff !important; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 20px rgba(253, 63, 0, .4); transition: transform .2s, background-color .2s; }
.ci-boton:hover, .ci-boton:focus { transform: translateY(-2px); background: #e13901; }
.ci-boton .fa-solid { transition: transform .2s; }
.ci-boton:hover .fa-solid { transform: translateX(3px); }
.ci-accion small { color: rgba(255, 255, 255, .62); font-size: 12px; }
.ci-accion small b { color: #fff; }
.ci-accion small a { color: #ffb08c !important; font-weight: 700; }

/* Socio: su número y lo pendiente */
.ci-socio { display: flex; align-items: center; gap: 14px; padding: 14px 20px; color: #fff !important; transition: background-color .2s; }
.ci-socio:hover, .ci-socio:focus { background: rgba(255, 255, 255, .06); }
.ci-numero { flex: none; padding: .35em .8em; border-radius: 6px; background: var(--ci-naranja); font-family: var(--fuente-titulo, "Saira Condensed", sans-serif); font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.ci-socio > .fa-solid:not(.fa-chevron-right) { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(253, 63, 0, .2); color: var(--ci-naranja); font-size: 16px; }
.ci-pendiente { flex: 1; min-width: 0; }
.ci-pendiente strong { display: block; font-size: 15px; }
.ci-pendiente small { display: block; overflow: hidden; color: rgba(255, 255, 255, .7); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.ci-socio .fa-chevron-right { color: rgba(255, 255, 255, .5); }

@media (max-width: 767px) {
    .ci-invitado { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; }
    .ci-icono { width: 46px; height: 46px; font-size: 19px; align-self: start; }
    .ci-titulo { font-size: 22px; }
    .ci-accion { grid-column: 1 / -1; }
    .ci-boton { width: 100%; justify-content: center; }
    .ci-numero { display: none; }
}