/* =========================================================================== themes.css — Temas del dashboard (además del "actual" de AdminLTE) --------------------------------------------------------------------------- Se activa por una clase en gestionada por theme.js: - (sin clase) → tema ACTUAL (AdminLTE dark-mode + azul). No se toca. - .theme-dark → OSCURO corporativo (dark-mode + acento ROJO) - .theme-light → CLARO corporativo (sin dark-mode: blanco roto + texto negro + rojo) Persistencia y conmutación: theme.js. =========================================================================== */ :root { --tt-red: #dc3545; --tt-red-dark: #b02a37; --tt-red-on: #ffffff; /* Claro corporativo */ --tt-light-bg: #f5f5f3; /* blanco roto */ --tt-light-card: #ffffff; --tt-light-text: #1a1a1a; --tt-light-muted: #6c757d; --tt-light-border: #e3e3df; } /* ========================================================================== SUPERFICIE por tema — .tt-surface sustituye a bg-dark. El color lo decide una variable CSS que cambia con la clase de tema del . Así una sola clase sirve para los 3 temas (y para el HTML inyectado dinámicamente). ========================================================================== */ body { --tt-surface: #343a40; --tt-surface-text: #e6e6e6; --tt-surface-border: #333; } /* actual (medium) */ body.theme-dark { --tt-surface: #262b34; --tt-surface-text: #e6e6e6; --tt-surface-border: #313742; } /* oscuro corporativo */ body.theme-light { --tt-surface: #ffffff; --tt-surface-text: #1a1a1a; --tt-surface-border: #e3e3df; } /* claro corporativo */ .tt-surface { background-color: var(--tt-surface) !important; color: var(--tt-surface-text) !important; } .small-box.tt-surface { border: 1px solid var(--tt-surface-border) !important; } /* ========================================================================== ACENTO ROJO — común a oscuro y claro (sustituye el azul/teal de AdminLTE) ========================================================================== */ body.theme-dark .bg-primary, body.theme-light .bg-primary, body.theme-dark .bg-info, body.theme-light .bg-info, body.theme-dark .bg-gradient-primary, body.theme-light .bg-gradient-primary, body.theme-dark .bg-gradient-info, body.theme-light .bg-gradient-info { background-color: var(--tt-red) !important; border-color: var(--tt-red) !important; color: var(--tt-red-on) !important; } body.theme-dark .btn-primary, body.theme-light .btn-primary, body.theme-dark .btn-info, body.theme-light .btn-info { background-color: var(--tt-red) !important; border-color: var(--tt-red-dark) !important; color: #fff !important; } body.theme-dark .btn-primary:hover, body.theme-light .btn-primary:hover, body.theme-dark .btn-info:hover, body.theme-light .btn-info:hover { background-color: var(--tt-red-dark) !important; border-color: var(--tt-red-dark) !important; } body.theme-dark .btn-outline-info, body.theme-light .btn-outline-info, body.theme-dark .btn-outline-primary, body.theme-light .btn-outline-primary { color: var(--tt-red) !important; border-color: var(--tt-red) !important; } body.theme-dark .text-primary, body.theme-light .text-primary, body.theme-dark .text-info, body.theme-light .text-info { color: var(--tt-red) !important; } /* Cabeceras y bordes de cards de color */ body.theme-dark .card-primary:not(.card-outline)>.card-header, body.theme-light .card-primary:not(.card-outline)>.card-header, body.theme-dark .card-info:not(.card-outline)>.card-header, body.theme-light .card-info:not(.card-outline)>.card-header { background-color: var(--tt-red) !important; border-color: var(--tt-red) !important; color: #fff !important; } body.theme-dark .card-primary.card-outline, body.theme-light .card-primary.card-outline, body.theme-dark .card-info.card-outline, body.theme-light .card-info.card-outline { border-top-color: var(--tt-red) !important; } /* Sidebar: elemento activo y pills en rojo */ body.theme-dark .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, body.theme-light .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, body.theme-dark .nav-pills .nav-link.active, body.theme-light .nav-pills .nav-link.active { background-color: var(--tt-red) !important; color: #fff !important; box-shadow: none !important; } /* Acentos que en dashboard.css estaban hardcodeados en teal/azul */ body.theme-dark .spinner, body.theme-light .spinner { border-top-color: var(--tt-red) !important; } body.theme-dark .fc-day-today .fc-daygrid-day-top, body.theme-light .fc-day-today .fc-daygrid-day-top { border-top-color: var(--tt-red) !important; } body.theme-dark .daterangepicker td.active, body.theme-dark .daterangepicker td.active:hover, body.theme-light .daterangepicker td.active, body.theme-light .daterangepicker td.active:hover { background-color: var(--tt-red) !important; } body.theme-dark .violation-icon, body.theme-light .violation-icon { color: var(--tt-red) !important; } /* ========================================================================== TEMA OSCURO CORPORATIVO — carbón azulado (la paleta de la maqueta, no negro puro) Fondo #1b1f26, cards #262b34 (un punto más claras, para dar profundidad), navbar/sidebar #171a20. ========================================================================== */ body.theme-dark .content-wrapper, body.theme-dark .main-footer, body.theme-dark .content { background-color: #1b1f26 !important; } body.theme-dark .card, body.theme-dark .info-box, body.theme-dark .small-box, body.theme-dark .bg-dark, body.theme-dark .small-box.bg-dark { background-color: #262b34 !important; color: #e6e6e6 !important; border-color: #313742 !important; } body.theme-dark .card-header, body.theme-dark .card-footer { border-color: #313742 !important; } body.theme-dark .main-header.navbar { background-color: #171a20 !important; border-bottom: 1px solid #23272f !important; } body.theme-dark .main-sidebar, body.theme-dark .sidebar-dark-primary { background-color: #171a20 !important; } body.theme-dark .brand-link { border-bottom: 1px solid #23272f !important; } /* Contornos de tablas/hr para que no “brillen” en gris sobre el carbón */ body.theme-dark .table td, body.theme-dark .table th, body.theme-dark hr { border-color: #313742 !important; } /* ========================================================================== TEMA CLARO CORPORATIVO — blanco roto + texto negro (primer pase: contenido principal. Calendario/datepicker se afinan en Fase 3.) ========================================================================== */ body.theme-light .content-wrapper, body.theme-light .main-footer { background-color: var(--tt-light-bg) !important; color: var(--tt-light-text) !important; } body.theme-light .card { background-color: var(--tt-light-card) !important; color: var(--tt-light-text) !important; border: 1px solid var(--tt-light-border) !important; } body.theme-light .card-header { border-bottom-color: var(--tt-light-border) !important; } body.theme-light .content-wrapper .text-muted, body.theme-light .small-box .icon, body.theme-light .text-secondary { color: var(--tt-light-muted) !important; } /* Navbar clara: fondo blanco, texto/iconos negros (los botones btn-* mantienen su color). */ body.theme-light .main-header.navbar { background-color: #ffffff !important; border-bottom: 1px solid var(--tt-light-border) !important; } body.theme-light .main-header .nav-link, body.theme-light .main-header .navbar-nav .nav-link { color: #1a1a1a !important; } /* Sidebar (menú) claro: fondo blanco, texto negro, separador a la derecha. */ body.theme-light .main-sidebar, body.theme-light .sidebar-dark-primary { background-color: #ffffff !important; border-right: 1px solid var(--tt-light-border) !important; } body.theme-light .brand-link { border-bottom: 1px solid var(--tt-light-border) !important; } body.theme-light .brand-link, body.theme-light .brand-text, body.theme-light .sidebar-dark-primary .nav-sidebar .nav-link, body.theme-light .sidebar-dark-primary .nav-sidebar .nav-link p, body.theme-light .sidebar-dark-primary .nav-sidebar .nav-icon, body.theme-light .user-panel .info a { color: #1a1a1a !important; } body.theme-light .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link:hover { background-color: #f0f0ee !important; color: #1a1a1a !important; } body.theme-light .user-panel { border-bottom-color: var(--tt-light-border) !important; } /* El item activo del menú sigue en ROJO (regla de acento común, más arriba), con texto blanco. */ /* Datepicker (daterangepicker) CLARO. En dashboard.css está hardcodeado oscuro sin scope, así que aquí lo forzamos claro con mayor especificidad (body.theme-light). */ body.theme-light .daterangepicker, body.theme-light .daterangepicker .calendar-table { background-color: #ffffff !important; border-color: var(--tt-light-border) !important; color: var(--tt-light-text) !important; } body.theme-light .daterangepicker td.available:hover, body.theme-light .daterangepicker th.available:hover { background-color: #f0f0ee !important; } body.theme-light .daterangepicker td.off, body.theme-light .daterangepicker td.off.in-range, body.theme-light .daterangepicker td.off.start-date, body.theme-light .daterangepicker td.off.end-date { background-color: #ffffff !important; color: #c7c7c2 !important; } body.theme-light .daterangepicker td.in-range { background-color: #fdecec !important; color: #1a1a1a !important; } body.theme-light .daterangepicker td.active, body.theme-light .daterangepicker td.active:hover { background-color: var(--tt-red) !important; color: #fff !important; } body.theme-light .daterangepicker .drp-buttons { border-top: 1px solid var(--tt-light-border) !important; } body.theme-light .daterangepicker:after { border-bottom-color: #ffffff !important; } body.theme-light .daterangepicker:before { border-bottom-color: var(--tt-light-border) !important; } /* Calendario (FullCalendar) en tema CLARO. Al no haber dark-mode, FC usa su tema claro por defecto; solo neutralizamos las reglas oscuras SIN scope de dashboard.css (day-top gris + texto blanco) y damos acento rojo a botones y al día de hoy. */ body.theme-light { --fc-page-bg-color: #ffffff; --fc-border-color: var(--tt-light-border); --fc-neutral-bg-color: #f5f5f3; --fc-today-bg-color: rgba(220, 53, 69, 0.06); --fc-button-bg-color: var(--tt-red); --fc-button-border-color: var(--tt-red-dark); --fc-button-hover-bg-color: var(--tt-red-dark); --fc-button-active-bg-color: var(--tt-red-dark); } body.theme-light .fc-daygrid-day-top { background-color: transparent !important; } body.theme-light .fc-daygrid-day-top a, body.theme-light .fc-col-header-cell-cushion { color: #1a1a1a !important; } body.theme-light .fc-daygrid-day-number { color: #666 !important; } body.theme-light .fc-h-event, body.theme-light .fc-h-event .fc-event-main { background-color: var(--tt-red) !important; border-color: var(--tt-red) !important; color: #fff !important; } body.theme-light .fc-daygrid-block-event { background-color: #f0f0ee !important; border: 1px solid var(--tt-light-border) !important; color: #1a1a1a !important; } /* Calendario grande (calendar.html): la card hace de marco/cabecera gris (con el toolbar), y la REJILLA (cuerpo) va en BLANCO. */ body.theme-light #calendar .fc-scrollgrid, body.theme-light #calendar .fc-view-harness, body.theme-light #calendar .fc-daygrid-body, body.theme-light #calendar .fc-scrollgrid-sync-table { background-color: #ffffff !important; } /* ========================================================================== Paneles ".card-dark" (Análisis de sesiones / cruce de fronteras). Están construidos con estilos INLINE oscuros hardcodeados; un !important en el CSS gana al inline normal, así que los tematizamos sin tocar el HTML/JS. ========================================================================== */ /* Bordes internos de .card-dark (divisores, border-right/top/bottom, filas) según la variable de superficie de cada tema. Se pudo quitar el !important inline que antes los bloqueaba. Cubre también el tema actual (#333). */ .card-dark tr, .card-dark [class*="border"], .card-dark div[style*="border"] { border-color: var(--tt-surface-border) !important; } /* --- Oscuro corporativo: alineamos al carbón --- */ body.theme-dark .card-dark { background-color: #1b1f26 !important; border-color: #313742 !important; } body.theme-dark .card-dark .card-body { background-color: #1b1f26 !important; } body.theme-dark .card-dark thead { background-color: #171a20 !important; } body.theme-dark .card-dark tr, body.theme-dark .card-dark [class*="border"], body.theme-dark .card-dark div[style*="border"] { border-color: #313742 !important; } /* --- Claro corporativo --- */ body.theme-light .card-dark { background-color: #f5f5f3 !important; border-color: var(--tt-light-border) !important; color: var(--tt-light-text) !important; } /* Panel (frame/cabecera) en gris; card-body interno en BLANCO; recuadros KPI en gris para que resalten sobre el body blanco. */ body.theme-light .card-dark .card-body { background-color: #ffffff !important; } body.theme-light .card-dark thead { background-color: #f5f5f3 !important; } body.theme-light .card-dark .small-box.tt-surface { background-color: #f0f0ee !important; } body.theme-light .card-dark .table-dark, body.theme-light .card-dark .table-dark > tbody > tr, body.theme-light .card-dark .table-dark td, body.theme-light .card-dark .table-dark th { background-color: transparent !important; color: var(--tt-light-text) !important; } body.theme-light .card-dark .text-muted { color: var(--tt-light-muted) !important; } body.theme-light .card-dark tr, body.theme-light .card-dark [class*="border"], body.theme-light .card-dark div[style*="border"] { border-color: var(--tt-light-border) !important; } body.theme-light .card-dark td[style*="color"] { color: var(--tt-light-text) !important; } body.theme-light .badge-dark { background-color: #e9e9e6 !important; color: #1a1a1a !important; } /* ========================================================================== Timeline / bitácora (la generan las plantillas inline de activity.js) + scrolls. ========================================================================== */ body.theme-dark .timeline-item { background-color: #262b34 !important; } body.theme-light .timeline-item { background-color: #f7f7f5 !important; } body.theme-light .timeline-header[style*="#fff"] { color: #1a1a1a !important; border-bottom-color: var(--tt-light-border) !important; } /* Textos gris incrustados en los items (activity.js): horas #888/#666 y etiquetas/duraciones #aaa/#bbb. Sobre el item claro (#f7f7f5) quedaban lavados; los oscurecemos a un gris legible manteniendo la jerarquía. */ body.theme-light #timeline-content [style*="#888"], body.theme-light #timeline-content [style*="#666"] { color: #555 !important; } body.theme-light #timeline-content [style*="#aaa"], body.theme-light #timeline-content [style*="#bbb"] { color: #6c757d !important; } /* Scrolls: en dashboard.css el track va oscuro (webkit) y hay scrollbar-color inline oscuro en varios divs. En claro los aclaramos. */ body.theme-light [style*="scrollbar-color"] { scrollbar-color: #c7c7c2 #f0f0ee !important; } body.theme-light #timeline-container { scrollbar-color: #c7c7c2 #f0f0ee !important; } body.theme-light #timeline-container::-webkit-scrollbar-track { background: #f0f0ee !important; } body.theme-light #timeline-container::-webkit-scrollbar-thumb { background-color: #c7c7c2 !important; border-color: #f0f0ee !important; } /* ========================================================================== Cabeceras de panel: que sigan la superficie del tema en vez de un fondo oscuro propio. Las de color (card-primary/info y el rojo "recomendado") NO se tocan (mayor especificidad / inline rojo intencional). ========================================================================== */ body.theme-dark .card-dark > .card-header, body.theme-light .card-dark > .card-header { background-color: transparent !important; } /* border-0 (en el HTML) quita el borde inferior → lo restauramos para que la cabecera se separe del cuerpo, como en una .card normal. */ body.theme-light .card-dark > .card-header { color: var(--tt-light-text) !important; border-bottom: 1px solid var(--tt-light-border) !important; } body.theme-dark .card-dark > .card-header { border-bottom: 1px solid #313742 !important; } /* Cabeceras con gris oscuro inline (#343a40, p.ej. planes de precios) → claras. */ body.theme-light .card-header[style*="#343a40"] { background-color: #f0f0ee !important; color: var(--tt-light-text) !important; border-bottom-color: var(--tt-light-border) !important; } /* Clase bg-gray-dark de AdminLTE (p.ej. etiqueta "Bitácora" de la timeline). */ body.theme-dark .bg-gray-dark { background-color: #262b34 !important; } body.theme-light .bg-gray-dark { background-color: #e9e9e6 !important; color: #333 !important; } /* =========================================================================== Bitácora de Ruta interactiva (Timeline) — activity.html La card usa .h-100 (iguala la card vecina). La card-body (#timeline-container) hereda flex:1 1 auto de Bootstrap; la limitamos con max-height:100% para que llene la altura de la card sin desbordarla, con el scroll dentro, y el timeline ocupa el 100% de esa altura. Antes tenía max-height:850px fijo → dejaba hueco gris al fondo. Fuente única de esta regla (antes vivía en dashboard.css). =========================================================================== */ #timeline-container { max-height: 100%; } #timeline-container > #timeline-content { min-height: 100%; } /* Las tarjetas de pack `.px-card*` se han retirado con `pxRenderPacks`: las dos pantallas usan ahora el banner de venta (.sell-plan). Se van también sus clases para que no queden estilos vivos sin dueño — y porque `.px-card` chocaba con la celda del número de tarjeta de la tabla de licencias, que colgaba de `.px-view` y heredaba el estilo de tarjeta. */ .px-view .px-hero-value { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin: 0; } .px-view .px-hero-label { font-size: .85rem; color: var(--px-muted); } /* --- Tablas de la pantalla ----------------------------------------------- */ .px-view .table thead th { border-top: 0; border-bottom: 1px solid var(--px-hairline); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--px-muted); } .px-view .table td { border-top: 1px solid var(--px-hairline); vertical-align: middle; } /* ========================================================================== CABECERA — marca y chapa de plan -------------------------------------------------------------------------- Antes la marca era la palabra "TachoTools" en texto plano y el plan era un icono de estrella. Ahora los dos usan los assets reales de la marca. DOS LOGOS, NO UNO. El logo está pensado para fondo oscuro: "TOOLS", "NO TRICKS" y las rodadas son BLANCOS. Sobre el tema claro (sidebar #ffffff) se quedaban en un contorno fantasma, prácticamente ilegibles. Por eso hay una variante con esos blancos volteados a tinta, y el tema decide cuál se ve. Van los dos en el HTML y los cambia el CSS: así no hace falta que ningún JS se entere de que ha cambiado el tema. ========================================================================== */ .brand-link { display: flex !important; align-items: center; padding-top: .6rem; padding-bottom: .6rem; } .brand-logo { height: 30px; width: auto; max-width: 100%; display: block; } .brand-logo--dark { display: none; } body.theme-light .brand-logo--light { display: none; } body.theme-light .brand-logo--dark { display: block; } /* --- Chapa de plan (navbar) ----------------------------------------------- Píldora con la moneda, el estado y —solo si existe de verdad— la fecha hasta la que la tarjeta está al día. Se estiliza entera aquí en vez de apoyarse en `btn-outline-light`, que sobre el tema claro es casi invisible. */ #planBadge .plan-badge-link { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .75rem .2rem .3rem; border-radius: 999px; border: 1px solid var(--tt-surface-border, #444); background-color: rgba(255, 255, 255, .04); line-height: 1.1; white-space: nowrap; text-decoration: none !important; /* es un enlace, pero se lee como una chapa */ transition: border-color .15s, background-color .15s; } #planBadge .plan-badge-coin { width: 26px; height: 26px; display: block; flex: 0 0 26px; } #planBadge .plan-badge-text { font-weight: 600; font-size: .82rem; letter-spacing: .01em; } /* La fecha es un dato secundario: se lee si se busca, no compite con el estado. */ #planBadge .plan-badge-until { font-size: .72rem; opacity: .75; font-variant-numeric: tabular-nums; } /* Premium se nota. Es el único sitio de la cabecera con oro, y ese es el punto: el conductor tiene que poder responder "¿puedo subir?" de un vistazo. */ #planBadge.is-premium .plan-badge-link { border-color: rgba(212, 175, 55, .55); background-color: rgba(212, 175, 55, .12); color: #e3c169; } #planBadge.is-premium .plan-badge-link:hover { border-color: rgba(212, 175, 55, .9); background-color: rgba(212, 175, 55, .2); } #planBadge.is-free .plan-badge-link { color: var(--tt-surface-text, #e6e6e6); } #planBadge.is-free .plan-badge-link:hover { border-color: var(--tt-red); background-color: rgba(255, 255, 255, .08); } body.theme-light #planBadge .plan-badge-link { background-color: #f6f6f4; border-color: var(--tt-light-border, #e3e3df); } body.theme-light #planBadge.is-free .plan-badge-link { color: #1a1a1a; } body.theme-light #planBadge.is-premium .plan-badge-link { color: #7a5c12; /* el oro sobre blanco no se lee: tinta oscura */ background-color: rgba(212, 175, 55, .14); border-color: rgba(212, 175, 55, .55); } /* En móvil el navbar ya va justo: se conserva la moneda (que es la que informa de un vistazo) y se van el rótulo y la fecha. */ @media (max-width: 575.98px) { #planBadge .plan-badge-text, #planBadge .plan-badge-until { display: none; } #planBadge .plan-badge-link { padding: .2rem .3rem; gap: 0; } } /* --- La misma moneda en la caja de suscripción del dashboard --------------- */ #subsBox #subsFoot { padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .08); line-height: 1.35; } #subsBox .subs-coin { width: 76px; height: 76px; flex: 0 0 76px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); } #subsBox.sell-hero--active .subs-coin { width: 42px; height: 42px; flex: 0 0 42px; } /* La moneda PREMIUM como sello del plan recomendado. No es adorno: es exactamente lo que compra, y la misma que le saldrá en el navbar en cuanto pague. La de la cabecera dice dónde está hoy; esta, a dónde va. */ .sell-plan__seal { position: absolute; top: .8rem; right: .8rem; width: 66px; height: 66px; opacity: .95; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55)); pointer-events: none; } .sell-plan { position: relative; } /* ========================================================================== BANNER DE SUSCRIPCIÓN DEL CONDUCTOR (#subsBox) -------------------------------------------------------------------------- Antes esto era una caja gris con dos tarjetas idénticas. No vendía nada, y con razón: los dos planes costaban lo mismo (5,00 €/mes los dos), así que no había oferta que enseñar. Corregido el precio, esto sí tiene algo que contar y se pinta como lo que es. El lenguaje visual sale de `custodio.png`, el banner que ya existía: fondo oscuro profundo, acento rojo en curva, titular condensado en mayúsculas, precio en oro. Se hace en CSS y no como imagen para que se traduzca a los 15 idiomas, se adapte al móvil y el precio salga del catálogo — un PNG habría que reeditarlo cada vez que cambie cualquiera de las tres cosas. ========================================================================== */ .sell-hero { position: relative; overflow: hidden; border-radius: .5rem; border: 1px solid #2a3040; background: #0f131b; color: #eef1f6; } /* LA FOTO. Va anclada a la derecha y muy velada, igual que en custodio.png: la izquierda es para leer y la derecha da el aire de carretera. El degradado la funde con el fondo del banner en vez de recortarla con un canto, que es lo que delata a un collage. `subs-bg.webp` es un recorte del propio banner, así que es literalmente la misma foto. */ .sell-hero__photo { position: absolute; inset: 0; background-image: url("/dashboard/assets/img/subs-bg.webp"); background-repeat: no-repeat; background-position: right center; background-size: auto 135%; opacity: .8; pointer-events: none; } /* El velo: opaco a la izquierda para que el texto se lea siempre, transparente a la derecha. Sin esto la foto compite con el titular y no gana ninguno de los dos. */ .sell-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, #0f131b 0%, #0f131b 30%, rgba(15, 19, 27, .74) 55%, rgba(15, 19, 27, .42) 80%, rgba(15, 19, 27, .18) 100%), radial-gradient(90% 120% at 95% 8%, rgba(220, 53, 69, .4), rgba(220, 53, 69, 0) 60%); } /* OJO: esto NO puede ser `.sell-hero > *`. La capa de la foto es hija directa, y esa regla —misma especificidad, escrita después— le pisaba el `position: absolute` y la convertía en un div relativo de altura cero. La foto estaba ahí y no se veía por culpa de esta línea. Se nombra solo al contenido, y las capas se ordenan con z-index. */ .sell-hero > .card-body { position: relative; z-index: 1; } .sell-hero__photo { z-index: 0; } .sell-hero__title { font-size: clamp(1.35rem, 1.9vw, 1.95rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 .35rem; } .sell-hero__title em { color: var(--tt-red); font-style: normal; } .sell-hero__sub { color: #aab3c2; margin: 0; font-size: .95rem; } .sell-perks { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .sell-perks li { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: #cbd3df; } .sell-perks .bi { color: #4ade80; } /* --- Los dos planes ------------------------------------------------------- */ .sell-plan { height: 100%; display: flex; flex-direction: column; border-radius: .5rem; border: 1px solid #2f3646; /* Fondo propio, casi opaco: la foto pasa por detrás del banner, no por debajo del precio. Con `rgba(255,255,255,.035)` el camión se leía a través de las cifras. */ background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); padding: 1.15rem 1.25rem 1.25rem; } /* El plan recomendado se nota, y solo se marca cuando el ahorro es REAL: lo decide el JS comparando los dos packs, no una clase escrita a mano. */ .sell-plan--best { border-color: rgba(212, 175, 55, .5); background: linear-gradient(180deg, rgba(46, 36, 8, .86), rgba(0, 0, 0, .84)); box-shadow: 0 0 0 1px rgba(212, 175, 55, .18), 0 10px 30px -12px rgba(212, 175, 55, .35); } .sell-plan__name { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9aa5b5; margin: 0; } .sell-plan__price { font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 800; line-height: 1; margin: .35rem 0 .1rem; } .sell-plan--best .sell-plan__price { background: linear-gradient(180deg, #f7e08d 0%, #e0b13c 55%, #c8941f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .sell-plan__unit { font-size: .85rem; color: #98a2b1; } .sell-plan__desc { font-size: .85rem; color: #aab3c2; margin: .6rem 0 1rem; } .sell-plan__cta { margin-top: auto; font-weight: 700; padding: .6rem 1rem; } /* La chapa del ahorro. El texto lo escribe el JS con el número calculado. */ .sell-flag { display: inline-block; align-self: flex-start; max-width: calc(100% - 4.75rem); /* deja sitio al sello, que va en la esquina */ margin-bottom: .5rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #2a1f00; background: linear-gradient(180deg, #f7e08d, #d9ad33); } .sell-save { font-size: .82rem; font-weight: 700; color: #e3c169; } /* --- Barra compacta de "ya eres premium" ---------------------------------- */ .sell-hero--active { background: linear-gradient(135deg, #1b2331 0%, #141922 100%); } /* En la barra de "ya eres premium" la foto no cabe: son 80 px de alto y el botón de renovar se le montaba encima. A quien ya ha pagado no hay que venderle con una foto. */ .sell-hero--active .sell-hero__photo { display: none; } .sell-hero--active .sell-hero__title { font-size: 1.05rem; text-transform: none; margin: 0; } /* En móvil el arco molesta y los planes van uno debajo de otro. */ @media (max-width: 767.98px) { /* En vertical la foto queda detrás del texto por mucho velo que se le eche: se va, y el banner se apoya solo en el titular y en el oro del plan. */ .sell-hero__photo { display: none; } .sell-perks { gap: .3rem 1rem; } .sell-perks li { font-size: .84rem; } .sell-plan__seal { width: 48px; height: 48px; } #subsBox .subs-coin { width: 56px; height: 56px; flex: 0 0 56px; } } /* Tema claro: el banner se queda oscuro A PROPÓSITO. Es el único bloque de la pantalla que vende, y el contraste contra el fondo claro es justo lo que hace que se mire. Solo se recolocan los grises que se pierden. */ /* `body.theme-light .card` también pisa el FONDO, y el banner es una .card: el oscuro se aclaraba y la foto salía lavada. El banner se queda oscuro en los tres temas a propósito — es el único bloque que vende, y el contraste contra el fondo claro es lo que hace mirarlo. */ body.theme-light .sell-hero { background: #0f131b !important; border-color: #cfd4dd; } /* `body.theme-light .card` fuerza texto negro a TODA tarjeta, y el banner es una .card: el titular y el precio del plan mensual se volvían negros sobre el fondo oscuro, ilegibles. Se devuelve el color aquí, que es la única tarjeta de la pantalla que no es clara. */ body.theme-light .sell-hero, body.theme-light .sell-hero .card-body, body.theme-light .sell-hero .sell-hero__title, body.theme-light .sell-hero .sell-plan__price { color: #eef1f6 !important; } body.theme-light .sell-hero .sell-plan--best .sell-plan__price { color: transparent !important; } /* El CTA del plan recomendado en oro de verdad, no el amarillo plano de Bootstrap. */ .sell-plan__cta.sell-plan__cta--gold { background: linear-gradient(180deg, #f7d95f, #e0ad2a); border-color: #c8941f; color: #2a1f00; } .sell-plan__cta.sell-plan__cta--gold:hover { background: linear-gradient(180deg, #ffe57a, #eab72f); color: #2a1f00; } /* En móvil el plan recomendado va PRIMERO: si hay que hacer scroll para verlo, no existe. */ @media (max-width: 767.98px) { .sell-col--best { order: -1; } #subsPacks { display: flex; flex-direction: column; } } /* En la barra compacta de premium el sello no pinta nada: no hay tarjetas. */ .sell-hero--active .sell-plan__seal { display: none; } /* A partir de lg el bloque es de TRES columnas: argumento | 5 € | 50 €. Por debajo se apilan, y ahí el recomendado sube al primer puesto (regla de más abajo). */ @media (min-width: 992px) { .sell-hero__title { margin-bottom: .25rem; } .sell-perks { margin-top: 1.1rem; } }