/**
 * Club Oficial: recuadro de las barras laterales (modulos/rsspormail.php y js/torofans-recuadro.js).
 * Invitación a unirse o, con la sesión iniciada, el saludo del socio.
 */
.tfr {
    --tfr-naranja: #fd3f00;
    position: relative;
    overflow: hidden;
    margin: 0 0 20px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(253, 63, 0, .45), 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, .18);
    font-family: "Inter", Arial, sans-serif;
    text-align: left;
}
.tfr-cabeza { display: flex; align-items: center; gap: 12px; padding: 18px 18px 0; }
.tfr-cabeza img { width: 54px; height: auto; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.tfr-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffc23d; }
.tfr-marca { display: block; font-family: var(--fuente-titulo, "Saira Condensed", "Arial Narrow", sans-serif); font-weight: 800; font-size: 34px; line-height: .95; letter-spacing: .01em; }
.tfr-marca span { color: var(--tfr-naranja); }
.tfr-cuerpo { padding: 14px 18px 18px; }
.tfr-cuerpo[hidden] { display: none; }
.tfr-lema { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.tfr-ventajas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.tfr-ventajas li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .88); }
.tfr-ventajas i { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(253, 63, 0, .18); color: var(--tfr-naranja); font-size: 13px; }
.tfr-form { display: grid; gap: 8px; margin: 0; }
.tfr-form input {
    width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border: 2px solid transparent; border-radius: 12px;
    background: #fff; color: #1d1d1b; font-size: 16px; /* 16 px: iOS no hace zoom */ outline: none; transition: border-color .15s;
}
.tfr-form input:focus { border-color: var(--tfr-naranja); }
.tfr-boton {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 16px;
    border: 0; border-radius: 12px; background: var(--tfr-naranja); color: #fff !important; text-decoration: none !important;
    font-family: var(--fuente-widget, "Rajdhani", sans-serif); font-weight: 700; font-size: 19px; letter-spacing: .03em; cursor: pointer;
    box-shadow: 0 8px 20px rgba(253, 63, 0, .35); transition: background .15s, transform .1s;
}
.tfr-boton:hover, .tfr-boton:focus { background: #ff5a1f; color: #fff; }
.tfr-boton:active { transform: scale(.98); }
.tfr-boton i { font-size: 14px; transition: transform .15s; }
.tfr-boton:hover i { transform: translateX(3px); }
.tfr-pie { margin: 12px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .65); text-align: center; }
.tfr-pie strong { color: #fff; }
.tfr-pie a { color: #ffc23d !important; font-weight: 700; }

/* Socio con sesión */
.tfr-saludo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin: 0 0 12px; }
.tfr-hola { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.tfr-numero { font-family: var(--fuente-widget, "Rajdhani", sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: #ffc23d; }
.tfr-numero:empty { display: none; }
.tfr-datos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tfr-datos li { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .07); text-align: center; }
.tfr-datos strong { font-family: var(--fuente-widget, "Rajdhani", sans-serif); font-size: 26px; line-height: 1; }
.tfr-datos span { margin-top: 3px; font-size: 11px; line-height: 1.2; color: rgba(255, 255, 255, .7); }
.tfr-datos .tfr-hay strong { color: var(--tfr-naranja); }
.tfr-pendiente {
    display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 194, 61, .12); border: 1px solid rgba(255, 194, 61, .45); color: #fff !important; text-decoration: none !important;
}
.tfr-pendiente[hidden] { display: none; }
.tfr-pendiente:hover { background: rgba(255, 194, 61, .2); }
.tfr-pendiente > i:first-child { font-size: 20px; color: #ffc23d; }
.tfr-pendiente span { flex: 1; min-width: 0; }
.tfr-pendiente strong { display: block; font-size: 14px; }
.tfr-pendiente small { display: block; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .75); }
.tfr-pendiente > i:last-child { font-size: 12px; color: rgba(255, 255, 255, .6); }
.tfr-entra { animation: tfr-entra .35s ease-out; }
@keyframes tfr-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tfr-entra { animation: none; } .tfr-boton, .tfr-boton i { transition: none; } }