/* asm/assets/css/asm-redesign.css */ :root { --asm-primary: #101828; --asm-primary-soft: #1d2939; --asm-accent: #e63946; --asm-accent-dark: #c92332; --asm-background: #f5f7fb; --asm-surface: #ffffff; --asm-surface-soft: #f8fafc; --asm-border: #e4e7ec; --asm-text: #101828; --asm-muted: #667085; --asm-success: #12b76a; --asm-radius-sm: 12px; --asm-radius: 18px; --asm-radius-lg: 26px; --asm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05); --asm-shadow: 0 12px 36px rgba(16, 24, 40, 0.08); --asm-transition: 180ms ease; } html { scroll-behavior: smooth; } body { background: var(--asm-background); color: var(--asm-text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } .asm-home { min-height: 100vh; background: radial-gradient( circle at 15% 5%, rgba(230, 57, 70, 0.045), transparent 28rem ), var(--asm-background); } /* * Banda de bienvenida del panel autenticado (sustituye al buscador vacío). * Fondo navy con espacio arriba para la cabecera fija; sirve además de fondo * oscuro para que el navbar transparente-al-tope se lea. */ .asm-panel-hero { padding: calc(74px + 3.5rem) 0 3.5rem; background: linear-gradient(160deg, var(--asm-navy-900, #041c3b), var(--asm-navy-950, #021129)); color: #ffffff; } .asm-panel-hero__eyebrow { display: inline-block; margin-bottom: 0.9rem; color: var(--asm-accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .asm-panel-hero__title { margin: 0 0 0.65rem; color: #ffffff !important; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; } .asm-panel-hero__lead { margin: 0 0 1.6rem; max-width: 34rem; color: rgba(255, 255, 255, 0.68); font-size: 1rem; line-height: 1.65; } /* CTA de cotización: rojo de marca, visible en escritorio y móvil. */ .asm-panel-hero__cta { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.5rem; border-radius: 0.7rem; color: #ffffff !important; background: var(--asm-accent); font-size: 0.95rem; font-weight: 700; text-decoration: none; transition: background 0.15s ease, transform 0.05s ease; } .asm-panel-hero__cta:hover { background: var(--asm-brand-600, #b0231b); } .asm-panel-hero__cta:active { transform: translateY(1px); } /* * Buscador oculto. Sus modales (Solicitar Cotización, etc.) se sacan al * en funciones.js (Buscador()), así que aquí puede ir display:none sin romper * que "Solicitar cotización" abra. */ .asm-search-stage--oculto { display: none !important; } @media (max-width: 767.98px) { .asm-panel-hero { padding: calc(70px + 2.25rem) 0 2.25rem; } } /* * Navbar autenticado sobre banda oscura: sus textos e iconos venían en color * oscuro (pensados para barra blanca) y quedaban ilegibles. Con asm-header--hero * el panel siempre tiene fondo oscuro, así que van en claro (arriba y al bajar). * El público no lleva estos elementos, así que no se ve afectado. */ .asm-main-header.asm-header--hero .asm-header-action-text small, .asm-main-header.asm-header--hero .asm-user-information small { color: rgba(255, 255, 255, 0.6) !important; } .asm-main-header.asm-header--hero .asm-header-action-text strong, .asm-main-header.asm-header--hero .asm-user-information strong, .asm-main-header.asm-header--hero .asm-dropdown-chevron { color: #ffffff !important; } /* * Carrito y avatar: sobre banda oscura no deben ser cajas blancas brillantes * (se veían como parches). Se usa el mismo tratamiento translúcido del estado * pegajoso, arriba y al bajar, para que no se pierda nada. */ .asm-main-header.asm-header--hero .asm-header-action-icon, .asm-main-header.asm-header--hero .asm-user-avatar { color: #ffffff !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; } /* * Al hacer hover o al ABRIR el carrito/perfil, la regla base pinta el botón de * gris claro (para la barra blanca). Sobre banda oscura eso lo volvía una caja * blanca con el texto blanco dentro, ilegible. Se usa el translúcido del * estado pegajoso, arriba y al bajar. */ .asm-main-header.asm-header--hero .asm-header-action:hover, .asm-main-header.asm-header--hero .asm-user-trigger:hover, .asm-main-header.asm-header--hero .asm-header-action[aria-expanded="true"], .asm-main-header.asm-header--hero .asm-user-trigger[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.18) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } .asm-dashboard-section { padding: 72px 0; } .asm-dashboard-section.pt-0 { padding-top: 0 !important; } .asm-soft-section { background: #eef2f7; } .asm-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; } .asm-section-heading h2 { margin: 5px 0 0; color: var(--asm-text); font-size: clamp(1.6rem, 2vw, 2.15rem); font-weight: 750; letter-spacing: -0.035em; } .asm-section-heading > p { max-width: 460px; margin: 0; color: var(--asm-muted); font-size: 0.95rem; line-height: 1.7; text-align: right; } .asm-section-kicker, .asm-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--asm-accent); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; } /* Buscador */ .asm-search-section { position: relative; padding: 52px 0 58px; overflow: hidden; background: radial-gradient( circle at 85% 10%, rgba(255, 255, 255, 0.12), transparent 20rem ), linear-gradient( 135deg, #101828 0%, #1d2939 52%, #111827 100% ); } .asm-search-section::before { content: ""; position: absolute; top: -180px; right: -120px; width: 420px; height: 420px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; } .asm-search-heading { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .asm-search-heading h1 { margin: 9px 0 7px; color: #ffffff; font-size: clamp(1.85rem, 3vw, 2.85rem); font-weight: 760; letter-spacing: -0.045em; } .asm-search-heading p { margin: 0; color: rgba(255, 255, 255, 0.67); } .asm-search-status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; color: rgba(255, 255, 255, 0.76); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); font-size: 0.8rem; font-weight: 650; white-space: nowrap; } .asm-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #32d583; box-shadow: 0 0 0 5px rgba(50, 213, 131, 0.12); } .asm-search-container { position: relative; z-index: 2; } .asm-search-container > * { border-radius: var(--asm-radius-lg) !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2) !important; } /* Hero público */ .asm-public-hero { position: relative; padding: 130px 0 110px; overflow: hidden; background: linear-gradient( 110deg, rgba(16, 24, 40, 0.98), rgba(16, 24, 40, 0.8) ), url("../img/bg17.jpg") center / cover no-repeat; } .asm-public-hero::after { content: ""; position: absolute; inset: auto -10% -50% auto; width: 520px; height: 520px; border-radius: 50%; background: rgba(230, 57, 70, 0.15); filter: blur(10px); } .asm-eyebrow-light { color: #fda4af; } .asm-public-hero h1 { max-width: 750px; margin: 18px 0; color: #ffffff; font-size: clamp(2.5rem, 5vw, 4.7rem); font-weight: 780; line-height: 1.02; letter-spacing: -0.06em; } .asm-public-hero p { max-width: 660px; margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 1.08rem; line-height: 1.8; } .asm-public-actions { display: flex; gap: 12px; margin-top: 32px; } .asm-btn-primary { display: inline-flex; align-items: center; gap: 11px; padding: 13px 20px; border: 0; border-radius: 12px; color: #ffffff; background: var(--asm-accent); font-weight: 700; box-shadow: 0 12px 28px rgba(230, 57, 70, 0.28); } .asm-btn-primary:hover { color: #ffffff; background: var(--asm-accent-dark); transform: translateY(-1px); } .asm-public-logo { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: min(100%, 410px); min-height: 270px; padding: 45px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 32px; background: rgba(255, 255, 255, 0.08); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22); backdrop-filter: blur(16px); } /* Flyers */ .asm-flyer-section { padding-bottom: 42px; } .asm-flyer-card { overflow: hidden; border: 1px solid var(--asm-border); border-radius: var(--asm-radius-lg); background: var(--asm-surface); box-shadow: var(--asm-shadow-sm); } .asm-flyer-card .carousel-cell { width: 100%; } /* * El alto del carrusel lo maneja Flickity con adaptiveHeight (funciones.js): * ajusta el viewport al alto natural del banner visible, así en móvil no queda * hueco blanco y en escritorio se ve completo. La imagen va a su tamaño * natural. */ .asm-flyer-card .carousel-cell { width: 100%; } .asm-flyer-card img { display: block; width: 100%; max-height: 460px; object-fit: cover; } /* * Responsive de las secciones del panel (Información destacada y demás). * En móvil: menos aire vertical, el encabezado apila (título arriba, texto * de apoyo debajo y alineado a la izquierda) y las imágenes bajan de alto. */ @media (max-width: 991.98px) { .asm-dashboard-section { padding: 52px 0; } .asm-section-heading { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; } .asm-section-heading > p { max-width: none; text-align: left; } } @media (max-width: 767.98px) { .asm-dashboard-section { padding: 40px 0; } } /* Recursos */ .asm-resource-card { position: relative; display: flex; align-items: flex-start; width: 100%; height: 100%; min-height: 205px; padding: 23px; overflow: hidden; border: 1px solid var(--asm-border); border-radius: var(--asm-radius); color: var(--asm-text); background: var(--asm-surface); box-shadow: var(--asm-shadow-sm); text-align: left; text-decoration: none; transition: transform var(--asm-transition), border-color var(--asm-transition), box-shadow var(--asm-transition); } button.asm-resource-card { appearance: none; font: inherit; } .asm-resource-card:hover { color: var(--asm-text); border-color: #d0d5dd; box-shadow: var(--asm-shadow); transform: translateY(-5px); } .asm-resource-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; font-size: 1.15rem; } .asm-resource-icon-red { color: #d92d20; background: #fef3f2; } .asm-resource-icon-blue { color: #175cd3; background: #eff8ff; } .asm-resource-icon-green { color: #027a48; background: #ecfdf3; } .asm-resource-icon-purple { color: #6941c6; background: #f4f3ff; } .asm-resource-content { display: flex; flex-direction: column; gap: 9px; padding: 4px 25px 0 15px; } .asm-resource-content strong { color: var(--asm-text); font-size: 1rem; font-weight: 750; } .asm-resource-content small { color: var(--asm-muted); font-size: 0.875rem; line-height: 1.65; } .asm-resource-arrow { position: absolute; right: 20px; bottom: 18px; display: inline-flex; align-items: center; justify-content: center; color: #98a2b3; transition: color var(--asm-transition), transform var(--asm-transition); } .asm-resource-card:hover .asm-resource-arrow { color: var(--asm-accent); transform: translateX(3px); } /* Rutas */ .asm-routes-carousel, .asm-offers-carousel { margin: 0 -10px; } .asm-routes-carousel .carousel-cell, .asm-offers-carousel .carousel-cell { width: 25%; padding: 10px; } .asm-route-card, .asm-offer-card { height: 100%; overflow: hidden; border: 1px solid var(--asm-border); border-radius: var(--asm-radius); background: var(--asm-surface); box-shadow: var(--asm-shadow-sm); transition: transform var(--asm-transition), box-shadow var(--asm-transition); } .asm-route-card:hover, .asm-offer-card:hover { box-shadow: var(--asm-shadow); transform: translateY(-5px); } .asm-route-image, .asm-offer-image { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #e4e7ec; } .asm-route-image img, .asm-offer-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; } .asm-route-card:hover .asm-route-image img, .asm-offer-card:hover .asm-offer-image img { transform: scale(1.045); } .asm-route-badge, .asm-offer-type { position: absolute; top: 14px; left: 14px; padding: 7px 10px; border-radius: 999px; color: #ffffff; background: rgba(16, 24, 40, 0.76); backdrop-filter: blur(8px); font-size: 0.7rem; font-weight: 750; } .asm-route-body { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px; } .asm-airport { min-width: 0; } .asm-airport strong { display: block; color: var(--asm-text); font-size: 1.22rem; font-weight: 800; letter-spacing: 0.025em; } .asm-airport small { display: block; max-width: 110px; overflow: hidden; color: var(--asm-muted); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; } .asm-route-line { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; color: var(--asm-accent); font-size: 0.75rem; } .asm-route-line::before, .asm-route-line::after { content: ""; flex: 1; height: 1px; background: var(--asm-border); } .asm-route-line i { margin: 0 7px; transform: rotate(5deg); } /* Ofertas */ .asm-offer-body { padding: 0 19px 19px; } .asm-offer-body > .asm-route-body { padding-right: 0; padding-left: 0; } .asm-offer-description { display: -webkit-box; min-height: 44px; margin: 0 0 17px; overflow: hidden; color: var(--asm-muted); font-size: 0.82rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .asm-offer-airline { display: flex; align-items: center; gap: 11px; padding: 14px 0; border-top: 1px solid var(--asm-border); } .asm-offer-airline img { width: 38px; height: 38px; padding: 3px; border: 1px solid var(--asm-border); border-radius: 50%; object-fit: contain; background: #ffffff; } .asm-offer-airline div { min-width: 0; } .asm-offer-airline small, .asm-offer-airline strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .asm-offer-airline small { color: var(--asm-muted); font-size: 0.72rem; } .asm-offer-airline strong { margin-top: 2px; color: var(--asm-text); font-size: 0.77rem; font-weight: 700; } .asm-offer-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid var(--asm-border); } .asm-offer-footer span { color: var(--asm-muted); font-size: 0.76rem; } .asm-offer-footer strong { color: var(--asm-text); font-size: 1.2rem; font-weight: 800; } /* SweetAlert del comunicado */ .asm-announcement-popup { width: min(92vw, 650px) !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(16, 24, 40, 0.25) !important; } .asm-announcement-popup .swal2-html-container { margin: 0 !important; padding: 0 !important; } .asm-announcement { text-align: left; } .asm-announcement-header { position: relative; padding: 30px 34px 24px; color: #ffffff; background: linear-gradient(135deg, var(--asm-navy-900, #041c3b), var(--asm-navy-950, #021129)); border-bottom: 3px solid var(--asm-accent); } .asm-announcement-header h2 { margin: 0 0 8px; color: #ffffff; font-size: 1.55rem; font-weight: 780; letter-spacing: -0.03em; } .asm-announcement-header p { margin: 0; color: rgba(255, 255, 255, 0.68); line-height: 1.6; } .asm-announcement-body { padding: 26px 34px 8px; } .asm-announcement-body > p { margin: 0; color: var(--asm-muted); line-height: 1.75; } /* * Antes eran tres tarjetas con un círculo numerado (1·2·3): lenguaje de * plantilla. Ahora es una lista editorial —título en negrita, descripción y * filetes finos— sin números ni cuadritos. */ .asm-announcement-list { list-style: none; margin: 20px 0 0; padding: 0; } .asm-announcement-list li { padding: 14px 0; border-top: 1px solid var(--asm-border); color: var(--asm-muted); font-size: 0.85rem; line-height: 1.6; } .asm-announcement-list li strong { display: block; margin-bottom: 3px; color: var(--asm-text); font-size: 0.93rem; font-weight: 700; } .asm-announcement-note { margin: 4px 0 0; padding: 15px 0 2px; border-top: 1px solid var(--asm-border); color: #b42318; font-size: 0.82rem; line-height: 1.55; } .asm-announcement-popup .swal2-actions { width: 100%; margin: 0 !important; padding: 22px 34px 30px; } .asm-announcement-confirm { min-height: 46px; padding: 0 22px !important; border-radius: 11px !important; color: #ffffff !important; background: var(--asm-accent) !important; font-weight: 750 !important; box-shadow: none !important; } /* Responsive */ @media (max-width: 1199.98px) { .asm-routes-carousel .carousel-cell, .asm-offers-carousel .carousel-cell { width: 33.333%; } } @media (max-width: 991.98px) { .asm-dashboard-section { padding: 54px 0; } .asm-search-heading, .asm-section-heading { align-items: flex-start; flex-direction: column; } .asm-section-heading > p { max-width: 100%; text-align: left; } .asm-search-status { display: none; } .asm-public-hero { padding: 110px 0 80px; } .asm-public-logo { width: 100%; min-height: 220px; } .asm-routes-carousel .carousel-cell, .asm-offers-carousel .carousel-cell { width: 50%; } } @media (max-width: 575.98px) { .asm-dashboard-section { padding: 42px 0; } .asm-search-section { padding: 36px 0 42px; } .asm-search-heading h1 { font-size: 1.8rem; } .asm-public-hero { padding: 95px 0 60px; } .asm-public-hero h1 { font-size: 2.45rem; } .asm-public-logo { min-height: 180px; padding: 30px; border-radius: 23px; } .asm-routes-carousel .carousel-cell, .asm-offers-carousel .carousel-cell { width: 88%; } .asm-announcement-header, .asm-announcement-body { padding-right: 23px; padding-left: 23px; } .asm-announcement-popup .swal2-actions { padding-right: 23px; padding-left: 23px; } } /* ========================================================= HEADER ========================================================= */ .asm-main-header { position: sticky !important; top: 0; z-index: 1030; width: 100%; min-height: 74px; border-bottom: 1px solid rgba(228, 231, 236, 0.78); background: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background-color var(--asm-transition), border-color var(--asm-transition), box-shadow var(--asm-transition); padding: 0; } /* * Sticky permanece dentro del flujo del documento. * De esa manera conserva sus 74px y no cubre el buscador. */ .asm-main-header.is-scrolled, .asm-main-header.header-fixed { background: rgba(255, 255, 255, 0.98); border-bottom-color: rgba(228, 231, 236, 0.95); box-shadow: 0 10px 30px rgba(16, 24, 40, 0.09); } .asm-main-header.header-transparent { background: rgba(255, 255, 255, 0.97); } .asm-navigation { min-height: 74px; border: 0 !important; background: transparent !important; } .asm-nav-header { min-height: 74px; } .asm-nav-wrapper { min-height: 74px; background: transparent !important; } /* ========================================================= HEADER FIJO: CONTRASTE DE TEXTOS ========================================================= */ .asm-main-header.is-scrolled, .asm-main-header.header-fixed { position: sticky !important; top: 0; background: #081826 !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 30px rgba(5, 20, 38, 0.18) !important; /* * Navy OPACO y sin blur. La cabecera base lleva backdrop-filter: blur(18px); * con un navy translúcido (0.98) el blur difuminaba el contenido claro de * debajo y asomaba una aureola blanca bajo el navbar al hacer scroll. */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Textos principales */ .asm-main-header.is-scrolled .asm-header-action-text strong, .asm-main-header.is-scrolled .asm-user-information strong, .asm-main-header.header-fixed .asm-header-action-text strong, .asm-main-header.header-fixed .asm-user-information strong { color: #ffffff !important; } /* Textos secundarios */ .asm-main-header.is-scrolled .asm-header-action-text small, .asm-main-header.is-scrolled .asm-user-information small, .asm-main-header.header-fixed .asm-header-action-text small, .asm-main-header.header-fixed .asm-user-information small { color: rgba(255, 255, 255, 0.62) !important; } /* Chevron */ .asm-main-header.is-scrolled .asm-dropdown-chevron, .asm-main-header.header-fixed .asm-dropdown-chevron { color: rgba(255, 255, 255, 0.55) !important; } /* Botones de carrito y perfil */ .asm-main-header.is-scrolled .asm-header-action, .asm-main-header.is-scrolled .asm-user-trigger, .asm-main-header.header-fixed .asm-header-action, .asm-main-header.header-fixed .asm-user-trigger { color: #ffffff !important; border-color: transparent !important; background: transparent !important; } /* Hover de los botones */ .asm-main-header.is-scrolled .asm-header-action:hover, .asm-main-header.is-scrolled .asm-user-trigger:hover, .asm-main-header.is-scrolled .asm-header-action[aria-expanded="true"], .asm-main-header.is-scrolled .asm-user-trigger[aria-expanded="true"], .asm-main-header.header-fixed .asm-header-action:hover, .asm-main-header.header-fixed .asm-user-trigger:hover, .asm-main-header.header-fixed .asm-header-action[aria-expanded="true"], .asm-main-header.header-fixed .asm-user-trigger[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.1) !important; background: rgba(255, 255, 255, 0.07) !important; box-shadow: none !important; } /* Icono del carrito */ .asm-main-header.is-scrolled .asm-header-action-icon, .asm-main-header.header-fixed .asm-header-action-icon { color: #ffffff !important; background: rgba(255, 255, 255, 0.1) !important; } /* Avatar */ .asm-main-header.is-scrolled .asm-user-avatar, .asm-main-header.header-fixed .asm-user-avatar { color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12) !important; } /* El placeholder/foto del avatar traía fondo blanco (#fff): sobre el navbar navy se veía como un círculo blanco duro. Se hace transparente. */ .asm-main-header.is-scrolled .asm-user-avatar img, .asm-main-header.header-fixed .asm-user-avatar img { background: transparent !important; } /* Botón de tema (sol/luna): mismo tratamiento glassy que el icono del carrito, en vez de la caja clara que resaltaba sobre el navy. */ .asm-main-header.is-scrolled .asm-tema, .asm-main-header.header-fixed .asm-tema { color: #ffffff !important; background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.22) !important; } .asm-main-header.is-scrolled .asm-tema:hover, .asm-main-header.header-fixed .asm-tema:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important; } /* Menú público */ .asm-main-header.is-scrolled .asm-nav-login, .asm-main-header.header-fixed .asm-nav-login { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.06) !important; } .asm-main-header.is-scrolled .asm-nav-login:hover, .asm-main-header.header-fixed .asm-nav-login:hover { background: rgba(255, 255, 255, 0.1) !important; } /* Móvil */ @media (max-width: 991.98px) { .asm-main-header.is-scrolled .asm-header-icon-button, .asm-main-header.header-fixed .asm-header-icon-button { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.08) !important; } } /* ========================================================= LOGO ========================================================= */ .asm-nav-brand { position: relative; display: inline-flex !important; align-items: center; justify-content: flex-start; width: 190px; height: 74px; padding: 0 !important; overflow: visible; } .asm-logo { display: block; width: auto; max-width: 180px; height: 47px; object-fit: contain; object-position: left center; transition: opacity var(--asm-transition), visibility var(--asm-transition), transform var(--asm-transition); } /* * Logo visible cuando la página está arriba. * assets/img/logo/min_as_b.png */ .asm-logo-default { position: relative; opacity: 1; visibility: visible; transform: translateY(0); } /* * Logo utilizado cuando el header está fijado. * assets/img/logo/min_as_b_256_alt.png */ .asm-logo-scrolled { position: absolute; top: 30%; left: 0; opacity: 0; visibility: hidden; transform: translateY(-50%) scale(0.98); } .asm-main-header.is-scrolled .asm-logo-default, .asm-main-header.header-fixed .asm-logo-default { opacity: 0; visibility: hidden; transform: translateY(-2px); } .asm-main-header.is-scrolled .asm-logo-scrolled, .asm-main-header.header-fixed .asm-logo-scrolled { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } /* * Compatibilidad temporal por si todavía existe alguna * referencia a las clases anteriores. */ .asm-logo-desktop { display: block; width: auto; max-width: 180px; height: 47px; object-fit: contain; } .asm-logo-mobile { display: none; width: 42px; height: 42px; object-fit: contain; } /* ========================================================= ACCIONES DEL HEADER ========================================================= */ .asm-nav-actions { display: flex !important; align-items: center; gap: 10px; height: 74px; } .asm-nav-actions > li, .asm-public-nav-actions > li { display: flex; align-items: center; } .asm-header-action, .asm-user-trigger { display: flex; align-items: center; min-height: 48px; padding: 7px 11px; border: 1px solid transparent; border-radius: 14px; color: var(--asm-text); background: transparent; transition: border-color var(--asm-transition), background var(--asm-transition), box-shadow var(--asm-transition), transform var(--asm-transition); } .asm-header-action:hover, .asm-user-trigger:hover, .asm-header-action[aria-expanded="true"], .asm-user-trigger[aria-expanded="true"] { border-color: var(--asm-border); background: var(--asm-surface-soft); box-shadow: var(--asm-shadow-sm); } .asm-header-action:active, .asm-user-trigger:active { transform: translateY(1px); } .asm-header-action-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; color: var(--asm-text); background: #f2f4f7; font-size: 0.92rem; } .asm-cart-indicator { position: absolute; top: 6px; right: 5px; width: 7px; height: 7px; border: 2px solid #ffffff; border-radius: 50%; background: var(--asm-accent); } .asm-header-action-text, .asm-user-information { display: flex; flex-direction: column; min-width: 0; margin: 0 9px; text-align: left; } .asm-header-action-text small, .asm-user-information small { color: var(--asm-muted); font-size: 0.65rem; line-height: 1.2; } .asm-header-action-text strong, .asm-user-information strong { display: block; max-width: 155px; overflow: hidden; color: var(--asm-text); font-size: 0.8rem; font-weight: 750; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .asm-dropdown-chevron { color: #98a2b3; font-size: 0.62rem; transition: transform var(--asm-transition); } [aria-expanded="true"] .asm-dropdown-chevron { transform: rotate(180deg); } /* ========================================================= AVATARES ========================================================= */ .asm-user-avatar, .asm-mobile-avatar, .asm-profile-avatar-lg { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; color: #ffffff; background: linear-gradient( 135deg, var(--asm-primary), var(--asm-accent) ); font-weight: 800; } .asm-user-avatar { width: 38px; height: 38px; font-size: 0.72rem; } .asm-user-avatar img, .asm-mobile-avatar img, .asm-profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; background: #ffffff; } /* ========================================================= DROPDOWNS ========================================================= */ .asm-cart-dropdown { width: min(92vw, 420px); margin-top: 12px !important; padding: 0 !important; overflow: hidden; border: 1px solid var(--asm-border) !important; border-radius: 18px !important; background: var(--asm-surface); box-shadow: 0 24px 70px rgba(16, 24, 40, 0.16) !important; } /* * En móvil el carrito/perfil dejan de ser un dropdown flotante (que quedaba * estrecho y descentrado) y pasan a un panel fijo casi a pantalla completa, * anclado bajo la barra y con scroll si el contenido es largo. Se anula el * transform que Popper pone en línea. */ @media (max-width: 575.98px) { .asm-cart-dropdown, .asm-profile-dropdown { position: fixed !important; top: 72px !important; left: 12px !important; right: 12px !important; bottom: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; } /* Carrito: puede tener muchas reservas → cap de altura + scroll del panel. */ .asm-cart-dropdown { max-height: calc(100dvh - 88px) !important; overflow-y: auto !important; } /* * Perfil: panel de altura acotada al viewport, dispuesto en columna flex. * La cabecera y el pie ("Cerrar sesión") quedan fijos; SOLO la lista de * opciones scrollea dentro del panel. Así el pie siempre es visible y nada * se desborda sobre la página que hay detrás (antes crecía sin tope: el pie * se salía de pantalla y el contenido de la página se transparentaba). */ .asm-profile-dropdown { flex-direction: column !important; max-height: calc(100dvh - 84px) !important; overflow: hidden !important; z-index: 1050 !important; } /* Sólo al abrirse pasa a flex; cerrado sigue oculto por Bootstrap. */ .asm-profile-dropdown.show { display: flex !important; } .asm-profile-header, .asm-profile-footer { flex: 0 0 auto !important; } .asm-profile-menu { display: block !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; } .asm-profile-menu > li { display: block !important; width: 100% !important; } .asm-profile-menu .asm-profile-menu-link { width: 100% !important; } .asm-profile-menu-copy { display: flex !important; } } /* * Modo oscuro del carrito y el perfil. El contenido usa utilidades Bootstrap * con `bg-white`/`text-dark`/`bg-light` fijos: sobre el dropdown oscuro las * franjas salían blancas y el texto negro quedaba invisible. Se remapean al * tema. */ :root[data-theme="dark"] .asm-cart-dropdown .bg-white, :root[data-theme="dark"] .asm-profile-dropdown .bg-white { background: var(--asm-surface) !important; } :root[data-theme="dark"] .asm-cart-dropdown .notification-grousp .bg-white { background: var(--asm-surface-soft) !important; } :root[data-theme="dark"] .asm-cart-dropdown .bg-light, :root[data-theme="dark"] .asm-profile-dropdown .bg-light { background: var(--asm-surface-soft) !important; } :root[data-theme="dark"] .asm-cart-dropdown .text-dark, :root[data-theme="dark"] .asm-profile-dropdown .text-dark { color: var(--asm-text) !important; } :root[data-theme="dark"] .asm-cart-dropdown .border, :root[data-theme="dark"] .asm-cart-dropdown .border-top, :root[data-theme="dark"] .asm-cart-dropdown .border-bottom, :root[data-theme="dark"] .asm-profile-dropdown .border, :root[data-theme="dark"] .asm-profile-dropdown .border-top, :root[data-theme="dark"] .asm-profile-dropdown .border-bottom { border-color: var(--asm-border) !important; } /* Botón principal (Crear Orden / Ir a Pagar): visible sobre el card oscuro. */ :root[data-theme="dark"] .asm-cart-dropdown .btn-dark { background: var(--asm-accent) !important; border-color: var(--asm-accent) !important; color: #ffffff !important; } .asm-profile-dropdown { width: min(92vw, 350px); margin-top: 12px !important; padding: 0 !important; overflow: hidden; border: 1px solid var(--asm-border) !important; border-radius: 18px !important; background: var(--asm-surface); box-shadow: 0 24px 70px rgba(16, 24, 40, 0.16) !important; } .asm-profile-header { display: flex; align-items: center; gap: 13px; padding: 20px; border-bottom: 1px solid var(--asm-border); background: var(--asm-surface-soft); } .asm-profile-avatar-lg { width: 46px; height: 46px; font-size: 0.8rem; } .asm-profile-header div:last-child { min-width: 0; } .asm-profile-header span, .asm-profile-header strong { display: block; } .asm-profile-header span { color: var(--asm-muted); font-size: 0.7rem; } .asm-profile-header strong { max-width: 215px; margin-top: 2px; overflow: hidden; color: var(--asm-text); font-size: 0.88rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .asm-profile-menu { margin: 0; padding: 8px; list-style: none; } .asm-profile-menu li { width: 100%; margin: 0; } .asm-profile-menu li a { display: flex !important; align-items: center; width: 100%; min-height: 42px; padding: 10px 12px !important; border-radius: 10px; color: var(--asm-text) !important; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: color var(--asm-transition), background var(--asm-transition); } .asm-profile-menu li a:hover { color: var(--asm-accent) !important; background: #fff5f6; } .asm-profile-menu li a i { width: 25px; color: #667085; text-align: center; } .asm-profile-footer { padding: 10px; border-top: 1px solid var(--asm-border); } .asm-logout-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 42px; border: 0; border-radius: 11px; color: #b42318; background: #fef3f2; font-size: 0.81rem; font-weight: 750; } .asm-logout-button:hover { background: #fee4e2; } /* ========================================================= NAVEGACIÓN PÚBLICA ========================================================= */ .asm-public-nav-actions { display: flex !important; align-items: center; gap: 9px; height: 74px; } .asm-nav-login, .asm-nav-register { min-height: 42px; padding: 0 17px; border-radius: 11px; font-size: 0.82rem; font-weight: 750; } .asm-nav-login { border: 1px solid var(--asm-border); color: var(--asm-text); background: #ffffff; } .asm-nav-login:hover { background: var(--asm-surface-soft); } .asm-nav-register { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--asm-accent); color: #ffffff; background: var(--asm-accent); box-shadow: 0 8px 18px rgba(230, 57, 70, 0.19); } .asm-nav-register:hover { border-color: var(--asm-accent-dark); color: #ffffff; background: var(--asm-accent-dark); } /* ========================================================= RESPONSIVE DEL HEADER ========================================================= */ .asm-mobile-actions { display: none; } @media (max-width: 991.98px) { .asm-main-header, .asm-navigation, .asm-nav-header, .asm-nav-wrapper { min-height: 66px; } .asm-nav-brand { width: 150px; height: 66px; } .asm-logo { max-width: 145px; height: 39px; } .asm-logo-desktop { display: none; } .asm-logo-mobile { display: block; } .asm-mobile-actions { display: block; } .asm-mobile-actions ul { display: flex; align-items: center; gap: 8px; height: 66px; margin: 0; padding: 0; list-style: none; } .asm-header-icon-button, .asm-mobile-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--asm-border); border-radius: 12px; color: var(--asm-text); background: #ffffff; } .asm-mobile-avatar { overflow: hidden; border-radius: 50%; color: #ffffff; background: linear-gradient( 135deg, var(--asm-primary), var(--asm-accent) ); font-size: 0.7rem; font-weight: 800; } .asm-nav-wrapper { background: #ffffff !important; } } @media (max-width: 575.98px) { .asm-nav-brand { width: 132px; } .asm-logo { max-width: 128px; height: 36px; } } /* ========================================================= WHATSAPP ========================================================= */ .asm-whatsapp-float { position: fixed; right: 24px; bottom: 24px; z-index: 1025; display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; color: #ffffff; background: #16a365; box-shadow: 0 16px 34px rgba(22, 163, 101, 0.28); font-size: 0.82rem; font-weight: 750; transition: transform var(--asm-transition), box-shadow var(--asm-transition), background var(--asm-transition); } .asm-whatsapp-float i { font-size: 1.35rem; } .asm-whatsapp-float:hover { color: #ffffff; background: #128455; box-shadow: 0 20px 40px rgba(22, 163, 101, 0.36); transform: translateY(-3px); } .asm-whatsapp-modal { overflow: hidden; border: 0; border-radius: 24px; box-shadow: 0 28px 90px rgba(16, 24, 40, 0.22); } .asm-whatsapp-modal .modal-header { padding: 23px 25px; border-bottom: 1px solid var(--asm-border); } .asm-modal-kicker { display: block; margin-bottom: 3px; color: #16a365; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .asm-whatsapp-modal .modal-title { color: var(--asm-text); font-size: 1.15rem; font-weight: 780; } .asm-whatsapp-modal .modal-body { display: flex; align-items: center; flex-direction: column; padding: 28px; text-align: center; } .asm-whatsapp-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 15px; border-radius: 18px; color: #ffffff; background: #16a365; font-size: 1.7rem; box-shadow: 0 12px 28px rgba(22, 163, 101, 0.22); } .asm-whatsapp-modal p { max-width: 380px; margin: 0 0 20px; color: var(--asm-muted); font-size: 0.88rem; line-height: 1.65; } .asm-qr-wrapper { padding: 12px; border: 1px solid var(--asm-border); border-radius: 19px; background: #ffffff; box-shadow: var(--asm-shadow-sm); } .asm-qr-wrapper img { display: block; max-width: 100%; height: auto; border-radius: 10px; } .asm-whatsapp-number { margin: 18px 0 15px; color: var(--asm-text); font-size: 1.15rem; font-weight: 800; } .asm-whatsapp-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 12px; color: #ffffff; background: #16a365; font-weight: 750; } .asm-whatsapp-button:hover { color: #ffffff; background: #128455; } /* ========================================================= HEADER RESPONSIVE ========================================================= */ .asm-mobile-actions { display: none; } @media (max-width: 991.98px) { .asm-main-header, .asm-navigation, .asm-nav-header { min-height: 66px; } .asm-nav-brand { height: 66px; } .asm-logo-desktop { display: none; } .asm-logo-mobile { display: block; } .asm-mobile-actions { display: block; } .asm-mobile-actions ul { display: flex; align-items: center; gap: 8px; height: 66px; margin: 0; padding: 0; list-style: none; } .asm-header-icon-button, .asm-mobile-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--asm-border); border-radius: 12px; color: var(--asm-text); background: #ffffff; } .asm-mobile-avatar { overflow: hidden; border-radius: 50%; color: #ffffff; background: linear-gradient( 135deg, var(--asm-primary), var(--asm-accent) ); font-size: 0.7rem; font-weight: 800; } .asm-nav-wrapper { background: #ffffff !important; } .asm-whatsapp-float { right: 16px; bottom: 17px; width: 52px; min-height: 52px; padding: 0; justify-content: center; } .asm-whatsapp-float span { display: none; } } /* ========================================================= FOOTER ========================================================= */ .asm-footer { color: #d0d5dd; background: #101828; } .asm-footer-main { padding: 68px 0 58px; } .asm-footer-brand img { width: 175px; max-height: 65px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); } .asm-footer-brand p { max-width: 390px; margin: 21px 0 24px; color: #98a2b3; font-size: 0.88rem; line-height: 1.75; } .asm-footer-socials { display: flex; gap: 9px; } .asm-footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px; color: #d0d5dd; background: rgba(255, 255, 255, 0.04); text-decoration: none; transition: color var(--asm-transition), border-color var(--asm-transition), background var(--asm-transition), transform var(--asm-transition); } .asm-footer-socials a:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.2); background: var(--asm-accent); transform: translateY(-2px); } .asm-footer-widget h4 { margin: 4px 0 22px; color: #ffffff; font-size: 0.86rem; font-weight: 780; letter-spacing: 0.025em; } .asm-footer-widget ul { margin: 0; padding: 0; list-style: none; } .asm-footer-widget li + li { margin-top: 11px; } .asm-footer-widget li button { padding: 0; border: 0; color: #98a2b3; background: transparent; font-size: 0.83rem; text-align: left; transition: color var(--asm-transition), transform var(--asm-transition); } .asm-footer-widget li button:hover { color: #ffffff; transform: translateX(3px); } .asm-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .asm-provider-logo { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.04); } .asm-provider-logo img { max-width: 90px; max-height: 38px; object-fit: contain; filter: grayscale(1) brightness(1.9); opacity: 0.82; transition: filter var(--asm-transition), opacity var(--asm-transition); } .asm-provider-logo:hover img { filter: none; opacity: 1; } .asm-footer-security-copy { margin: 0 0 16px; color: #98a2b3; font-size: 0.8rem; line-height: 1.65; } .asm-certification-list { display: grid; gap: 9px; } .asm-certification-card { display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: #ffffff; background: rgba(255, 255, 255, 0.04); text-decoration: none; transition: border-color var(--asm-transition), background var(--asm-transition); } .asm-certification-card:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); } .asm-certification-card img { width: 42px; height: 42px; padding: 3px; object-fit: contain; } .asm-certification-card span { display: flex; flex: 1; flex-direction: column; } .asm-certification-card small { color: #98a2b3; font-size: 0.66rem; } .asm-certification-card strong { margin-top: 2px; color: #ffffff; font-size: 0.8rem; } .asm-certification-card > i { color: #667085; font-size: 0.72rem; } .asm-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); } .asm-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 76px; } .asm-footer-bottom p { margin: 0; color: #667085; font-size: 0.75rem; } .asm-footer-bottom p span { color: #98a2b3; font-weight: 700; } .asm-footer-legal { display: flex; align-items: center; gap: 19px; } .asm-footer-legal button { padding: 0; border: 0; color: #667085; background: transparent; font-size: 0.73rem; } .asm-footer-legal button:hover { color: #ffffff; } /* ========================================================= LOGIN ========================================================= */ .asm-login-modal { overflow: hidden; border: 0; border-radius: 24px; box-shadow: 0 28px 90px rgba(16, 24, 40, 0.24); } .asm-login-modal .modal-header { padding: 24px 26px 20px; border-bottom: 1px solid var(--asm-border); } .asm-login-modal .modal-title { margin: 0; color: var(--asm-text); font-size: 1.3rem; font-weight: 780; letter-spacing: -0.025em; } .asm-login-modal .modal-body { padding: 26px; } .asm-login-intro p { margin: 0 0 22px; color: var(--asm-muted); font-size: 0.87rem; line-height: 1.6; } .asm-login-modal .form-control { min-height: 55px; border-color: var(--asm-border); border-radius: 12px; box-shadow: none; } .asm-login-modal .form-control:focus { border-color: rgba(230, 57, 70, 0.6); box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.08); } .asm-toggle-password { position: absolute; top: 50%; right: 13px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; color: var(--asm-muted); background: transparent; transform: translateY(-50%); } .asm-toggle-password:hover { color: var(--asm-text); background: var(--asm-surface-soft); } .asm-login-options { display: flex; justify-content: flex-end; margin: 4px 0 20px; } .asm-login-options button { padding: 0; border: 0; color: var(--asm-accent); background: transparent; font-size: 0.78rem; font-weight: 700; } .asm-login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border: 0; border-radius: 12px; color: #ffffff; background: var(--asm-accent); font-weight: 750; box-shadow: 0 12px 26px rgba(230, 57, 70, 0.22); } .asm-login-submit:hover { background: var(--asm-accent-dark); } .asm-login-modal .modal-footer { justify-content: center; padding: 17px 24px; border-top: 1px solid var(--asm-border); background: var(--asm-surface-soft); } .asm-login-modal .modal-footer p { margin: 0; color: var(--asm-muted); font-size: 0.8rem; } .asm-login-modal .modal-footer button { padding: 0; border: 0; color: var(--asm-accent); background: transparent; font-weight: 750; } .asm-video-modal, .asm-fullscreen-modal { border: 0; } .asm-back-to-top { position: fixed; right: 26px; bottom: 88px; z-index: 1015; display: none; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid var(--asm-border); border-radius: 13px; color: var(--asm-text); background: rgba(255, 255, 255, 0.94); box-shadow: var(--asm-shadow-sm); backdrop-filter: blur(10px); } .asm-back-to-top:hover { color: #ffffff; border-color: var(--asm-accent); background: var(--asm-accent); } @media (max-width: 767.98px) { .asm-footer-main { padding: 52px 0 45px; } .asm-footer-bottom-inner { align-items: flex-start; flex-direction: column; min-height: auto; padding: 22px 0; } .asm-footer-legal { flex-wrap: wrap; gap: 12px 17px; } .asm-back-to-top { right: 20px; bottom: 82px; } } /* ========================================================= MENÚ DE PERFIL ========================================================= */ .asm-profile-menu { max-height: min(62vh, 520px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; } .asm-profile-menu::-webkit-scrollbar { width: 6px; } .asm-profile-menu::-webkit-scrollbar-track { background: transparent; } .asm-profile-menu::-webkit-scrollbar-thumb { border-radius: 999px; background: #d0d5dd; } .asm-profile-menu .asm-profile-menu-link { position: relative; display: flex !important; align-items: center; gap: 11px; min-height: 58px; padding: 9px 10px !important; border-radius: 12px; color: var(--asm-text) !important; background: transparent; text-decoration: none; transition: color var(--asm-transition), background var(--asm-transition), transform var(--asm-transition); } .asm-profile-menu .asm-profile-menu-link:hover { color: var(--asm-text) !important; background: var(--asm-surface-soft); transform: translateX(2px); } .asm-profile-menu-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: #475467; background: #f2f4f7; font-size: 0.9rem; transition: color var(--asm-transition), background var(--asm-transition); } .asm-profile-menu-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; } .asm-profile-menu-copy strong { overflow: hidden; color: var(--asm-text); font-size: 0.8rem; font-weight: 730; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .asm-profile-menu-copy small { overflow: hidden; color: var(--asm-muted); font-size: 0.66rem; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .asm-profile-menu-arrow { flex: 0 0 auto; color: #d0d5dd; font-size: 0.6rem; transition: color var(--asm-transition), transform var(--asm-transition); } .asm-profile-menu-link:hover .asm-profile-menu-arrow { color: var(--asm-accent); transform: translateX(2px); } .asm-profile-menu .asm-menu-active { color: var(--asm-accent) !important; background: #fff5f6; } .asm-profile-menu .asm-menu-active:hover { color: var(--asm-accent) !important; background: #fff0f1; } .asm-profile-menu .asm-menu-active::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 999px 999px 0; background: var(--asm-accent); } .asm-profile-menu .asm-menu-active .asm-profile-menu-icon { color: var(--asm-accent); background: #fee4e2; } .asm-profile-menu .asm-menu-active .asm-profile-menu-copy strong { color: var(--asm-accent); } .asm-profile-menu .asm-menu-active .asm-profile-menu-arrow { color: var(--asm-accent); } /* ========================================================= CONTENEDOR DEL BUSCADOR EN HOME ========================================================= */ .asm-search-stage { padding: 18px 0 28px; background: radial-gradient( circle at 85% 10%, rgba(255, 255, 255, 0.08), transparent 26rem ), linear-gradient( 135deg, #08111f 0%, #0d1830 52%, #0a1223 100% ); } .asm-search-stage__content { position: relative; } /* ========================================================= BUSCADOR HERO ========================================================= */ .asm-booking-hero { padding: 26px 0 8px; background: transparent; } .asm-booking-hero .container { max-width: 1320px; } .asm-booking-hero__intro { margin-bottom: 26px; padding: 36px 28px 0; color: #ffffff; } .asm-booking-kicker { display: inline-block; margin-bottom: 12px; color: #fda4af; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .asm-booking-hero__intro h1 { margin: 0 0 10px; color: #ffffff; font-size: clamp(2rem, 4vw, 3rem); font-weight: 780; letter-spacing: -0.04em; } .asm-booking-hero__intro p { max-width: 760px; margin: 0 auto; color: rgba(255, 255, 255, 0.72); font-size: 1rem; line-height: 1.7; } #Buscador-Body .search-wrap { padding: 18px !important; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 30px !important; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100% ); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); } #Buscador-Body .tab-content.bg-white { border-radius: 20px !important; } @media (max-width: 767.98px) { .asm-booking-hero { padding-top: 18px; } .asm-booking-hero__intro { padding: 22px 8px 0; margin-bottom: 18px; } .asm-booking-hero__intro h1 { font-size: 1.8rem; } #Buscador-Body .search-wrap { border-radius: 22px !important; padding: 12px !important; } } /* ========================================================= NEWSLETTER / SUSCRÍBETE ========================================================= */ .asm-newsletter-section { position: relative; overflow: hidden; padding: 76px 0; background: radial-gradient( circle at 12% 15%, rgba(230, 57, 70, 0.12), transparent 28rem ), radial-gradient( circle at 88% 80%, rgba(59, 130, 246, 0.13), transparent 30rem ), linear-gradient( 135deg, #08111f 0%, #0d1729 52%, #101828 100% ); } .asm-newsletter-section::before { content: ""; position: absolute; inset: 0; opacity: 0.22; background-image: linear-gradient( rgba(255, 255, 255, 0.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px ); background-size: 42px 42px; mask-image: linear-gradient( to bottom, transparent, #000 18%, #000 82%, transparent ); pointer-events: none; } .asm-newsletter-section::after { content: ""; position: absolute; top: 50%; left: 50%; width: 760px; height: 760px; border: 1px solid rgba(255, 255, 255, 0.045); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .asm-newsletter-section .container { position: relative; z-index: 2; } .asm-newsletter-decoration { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; } .asm-newsletter-decoration-one { top: -95px; right: 8%; width: 280px; height: 280px; border: 1px solid rgba(255, 255, 255, 0.06); } .asm-newsletter-decoration-two { bottom: -160px; left: 4%; width: 380px; height: 380px; border: 1px solid rgba(230, 57, 70, 0.09); } .asm-newsletter-card { position: relative; padding: 48px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 30px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025) ); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .asm-newsletter-card::before { content: ""; position: absolute; top: -140px; left: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(230, 57, 70, 0.09); filter: blur(30px); pointer-events: none; } .asm-newsletter-copy, .asm-newsletter-form-card { position: relative; z-index: 2; } .asm-newsletter-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; color: #fda4af; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .asm-newsletter-copy h2 { max-width: 590px; margin: 0 0 17px; color: #ffffff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 780; line-height: 1.08; letter-spacing: -0.05em; } .asm-newsletter-copy > p { max-width: 570px; margin: 0; color: rgba(255, 255, 255, 0.65); font-size: 0.94rem; line-height: 1.75; } .asm-newsletter-features { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 26px; } .asm-newsletter-features span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.77); font-size: 0.76rem; font-weight: 600; } .asm-newsletter-features i { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; color: #ffffff; background: rgba(50, 213, 131, 0.2); font-size: 0.55rem; } .asm-newsletter-form-card { padding: 29px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 23px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 65px rgba(0, 0, 0, 0.18); } .asm-newsletter-form-icon { display: inline-flex; align-items: center; justify-content: center; width: 49px; height: 49px; margin-bottom: 17px; border-radius: 14px; color: var(--asm-accent); background: #fff1f3; font-size: 1.15rem; } .asm-newsletter-form-heading h3 { margin: 0; color: var(--asm-text); font-size: 1.2rem; font-weight: 780; letter-spacing: -0.025em; } .asm-newsletter-form-heading p { margin: 6px 0 22px; color: var(--asm-muted); font-size: 0.82rem; line-height: 1.55; } .asm-newsletter-label { display: block; margin-bottom: 7px; color: #344054; font-size: 0.74rem; font-weight: 700; } .asm-newsletter-control { position: relative; display: flex; align-items: center; min-height: 58px; padding: 5px; border: 1px solid var(--asm-border); border-radius: 15px; background: #ffffff; transition: border-color var(--asm-transition), box-shadow var(--asm-transition); } .asm-newsletter-control:focus-within { border-color: rgba(230, 57, 70, 0.55); box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.08); } .asm-newsletter-control > i { flex: 0 0 auto; margin-left: 11px; color: #98a2b3; font-size: 0.93rem; } .asm-newsletter-control input { flex: 1; min-width: 0; height: 46px; padding: 0 13px; border: 0; outline: 0; color: var(--asm-text); background: transparent; font-size: 0.85rem; } .asm-newsletter-control input::placeholder { color: #98a2b3; } .asm-newsletter-control button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 17px; border: 0; border-radius: 11px; color: #ffffff; background: var(--asm-primary); font-size: 0.79rem; font-weight: 750; transition: background var(--asm-transition), transform var(--asm-transition); } .asm-newsletter-control button:hover { background: var(--asm-accent); } .asm-newsletter-control button:active { transform: translateY(1px); } .asm-newsletter-control button:disabled { cursor: not-allowed; opacity: 0.7; } .asm-newsletter-privacy { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; color: #98a2b3; font-size: 0.67rem; line-height: 1.5; } .asm-newsletter-privacy i { margin-top: 2px; color: #667085; } /* ========================================================= NEWSLETTER — versión editorial (sin glow/anillos/glass) Se retiran las decoraciones de plantilla: rejilla, anillos, círculos difuminados, el glass con blur y el sobre metido en un cuadrito. Queda una banda navy sobria con una tarjeta de formulario limpia. ========================================================= */ .asm-newsletter-section { background: var(--asm-navy-950); } .asm-newsletter-section::before, .asm-newsletter-section::after, .asm-newsletter-decoration, .asm-newsletter-card::before { content: none !important; display: none !important; } .asm-newsletter-card { padding: 44px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.03); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .asm-newsletter-kicker { margin-bottom: 14px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.14em; } .asm-newsletter-copy h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.15; } /* Beneficios: check plano, sin el círculo verde. */ .asm-newsletter-features i { width: auto; height: auto; border-radius: 0; background: transparent; color: #3dd07f; font-size: 0.78rem; } /* Tarjeta de formulario limpia, sin el icono en cuadrito. */ .asm-newsletter-form-icon { display: none; } .asm-newsletter-form-card { padding: 28px; border-radius: 14px; } /* * Modo oscuro: la tarjeta del formulario era blanca con el texto en tokens * claros (invisible) y el botón salía claro. Se pasa a superficie oscura con * textos y campo legibles, y el botón al rojo de marca. */ :root[data-theme="dark"] .asm-newsletter-form-card { background: var(--asm-surface) !important; border-color: var(--asm-border) !important; } :root[data-theme="dark"] .asm-newsletter-label { color: var(--asm-text) !important; } :root[data-theme="dark"] .asm-newsletter-control { background: var(--asm-surface-soft) !important; border-color: var(--asm-border) !important; } :root[data-theme="dark"] .asm-newsletter-control input { color: var(--asm-text) !important; } :root[data-theme="dark"] .asm-newsletter-control button { background: var(--asm-accent) !important; color: #ffffff !important; } /* ========================================================= NEWSLETTER RESPONSIVE ========================================================= */ @media (max-width: 991.98px) { .asm-newsletter-section { padding: 60px 0; } .asm-newsletter-card { padding: 38px; } .asm-newsletter-copy { text-align: center; } .asm-newsletter-copy h2, .asm-newsletter-copy > p { margin-right: auto; margin-left: auto; } .asm-newsletter-features { justify-content: center; } } @media (max-width: 575.98px) { .asm-newsletter-section { padding: 42px 0; } .asm-newsletter-card { padding: 24px 18px; border-radius: 23px; } .asm-newsletter-copy h2 { font-size: 1.8rem; } .asm-newsletter-features { align-items: flex-start; flex-direction: column; gap: 10px; } .asm-newsletter-form-card { padding: 22px 18px; border-radius: 18px; } .asm-newsletter-control { align-items: stretch; flex-direction: column; gap: 6px; padding: 7px; } .asm-newsletter-control > i { display: none; } .asm-newsletter-control input { width: 100%; height: 46px; padding: 0 11px; } .asm-newsletter-control button { width: 100%; } } /* ========================================================= BUSCADOR COMPACTO AL MOSTRAR RESULTADOS ========================================================= */ #Buscador-Div { transition: min-height 320ms ease, padding-top 320ms ease, padding-bottom 320ms ease; } #Buscador-Div > .container { transition: padding-top 320ms ease, padding-bottom 320ms ease; } #Buscador-Div .search-wrap { transition: box-shadow 320ms ease; } #Buscador-Div.asm-search-compact { min-height: 0; padding-top: 1.25rem !important; padding-bottom: 1.5rem !important; } #Buscador-Div.asm-search-compact > .container { padding-top: 0 !important; } #Buscador-Div.asm-search-compact #Buscador-Titulo { display: none; } #Buscador-Div.asm-search-compact #Buscador-Body { margin-top: 0; } #Buscador-Div.asm-search-compact .search-wrap { box-shadow: 0 18px 48px rgba(5, 20, 38, 0.18); } @media (max-width: 991.98px) { #Buscador-Div.asm-search-compact { padding-top: 0.75rem !important; padding-bottom: 1rem !important; } } @media (max-width: 575.98px) { #Buscador-Div.asm-search-compact { padding-top: 0.5rem !important; padding-bottom: 0.75rem !important; } } .asm-public-search-message { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 17px 20px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; color: #ffffff; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(12px); } .asm-public-search-message > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .asm-public-search-message__kicker { color: #fda4af; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .asm-public-search-message strong { color: #ffffff; font-size: 0.95rem; } .asm-public-search-message small { color: rgba(255, 255, 255, 0.67); font-size: 0.77rem; } .asm-public-search-message__actions { display: flex; flex: 0 0 auto; gap: 8px; } .asm-public-search-message__actions .btn { white-space: nowrap; } .asm-public-search-message__status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; color: #fedf89; background: rgba(247, 144, 9, 0.12); font-size: 0.75rem; font-weight: 700; white-space: nowrap; } @media (max-width: 767.98px) { .asm-public-search-message { align-items: flex-start; flex-direction: column; } .asm-public-search-message__actions { width: 100%; } .asm-public-search-message__actions .btn { flex: 1; } } /* asm/assets/css/asm-public-pages.css */ /* ========================================================= BASE ========================================================= */ .asm-public-page { min-height: 100vh; color: #101828; background: #f6f8fb; } .asm-public-page *, .asm-public-page *::before, .asm-public-page *::after { box-sizing: border-box; } .asm-public-container-narrow { max-width: 980px; } .asm-public-kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; color: #2dd4bf; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; } .asm-public-heading { margin-bottom: 1rem; color: #101828; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.04em; } .asm-public-lead { color: #667085; font-size: 1rem; line-height: 1.8; } /* ========================================================= HERO ========================================================= */ .asm-public-hero { position: relative; overflow: hidden; padding: 6rem 0 7rem; color: #ffffff; background: radial-gradient( circle at 85% 18%, rgba(45, 212, 191, 0.2), transparent 30% ), radial-gradient( circle at 12% 88%, rgba(59, 130, 246, 0.2), transparent 34% ), linear-gradient( 135deg, #061523 0%, #0b2941 55%, #123b57 100% ); } .asm-public-hero::before { position: absolute; inset: 0; content: ""; opacity: 0.12; background-image: linear-gradient( rgba(255, 255, 255, 0.13) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px ); background-size: 44px 44px; pointer-events: none; } .asm-public-hero::after { position: absolute; right: -130px; bottom: -170px; width: 440px; height: 440px; content: ""; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.025), 0 0 0 100px rgba(255, 255, 255, 0.018); pointer-events: none; } .asm-public-hero__content { position: relative; z-index: 1; max-width: 760px; } .asm-public-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; padding: 0.55rem 0.8rem; border: 1px solid rgba(45, 212, 191, 0.2); border-radius: 999px; color: #ccfbf1; background: rgba(45, 212, 191, 0.09); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .asm-public-hero h1 { max-width: 760px; margin-bottom: 1.2rem; color: #ffffff; font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.055em; } .asm-public-hero p { max-width: 680px; margin-bottom: 0; color: rgba(255, 255, 255, 0.72); font-size: 1.05rem; line-height: 1.8; } .asm-public-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; } .asm-public-primary-button, .asm-public-secondary-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.8rem 1.2rem; border-radius: 0.85rem; font-weight: 700; } .asm-public-primary-button { border: 1px solid #ffffff; color: #0b1d2d; background: #ffffff; } .asm-public-primary-button:hover { border-color: #e6edf5; color: #0b1d2d; background: #e6edf5; } .asm-public-secondary-button { border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; background: rgba(255, 255, 255, 0.08); } .asm-public-secondary-button:hover { border-color: rgba(255, 255, 255, 0.3); color: #ffffff; background: rgba(255, 255, 255, 0.13); } /* ========================================================= CONTENT WRAPPER ========================================================= */ .asm-public-content { position: relative; z-index: 2; margin-top: -3.4rem; padding-bottom: 5rem; } .asm-public-surface { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.6rem; background: #ffffff; box-shadow: 0 28px 70px rgba(16, 24, 40, 0.11); } .asm-public-section { padding: 4.5rem 0; } .asm-public-section-white { background: #ffffff; } .asm-public-section-soft { background: #f6f8fb; } /* ========================================================= ABOUT ========================================================= */ .asm-about-intro { padding: 3.5rem; } .asm-about-intro__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); align-items: center; gap: 3rem; } .asm-about-intro__copy p { margin-bottom: 1rem; color: #667085; line-height: 1.85; } .asm-about-intro__copy p:last-child { margin-bottom: 0; } .asm-about-visual { position: relative; overflow: hidden; min-height: 360px; padding: 2rem; border-radius: 1.35rem; color: #ffffff; background: radial-gradient( circle at 70% 20%, rgba(45, 212, 191, 0.27), transparent 32% ), linear-gradient(145deg, #0a2236, #123b57); } .asm-about-visual__icon { display: grid; width: 82px; height: 82px; margin-bottom: 4rem; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 1.3rem; color: #ccfbf1; background: rgba(255, 255, 255, 0.08); font-size: 2rem; } .asm-about-visual strong { display: block; margin-bottom: 0.6rem; color: #ffffff; font-size: 1.65rem; line-height: 1.25; } .asm-about-visual p { margin-bottom: 0; color: rgba(255, 255, 255, 0.68); line-height: 1.7; } .asm-about-stat { position: absolute; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); } .asm-about-stat span { color: rgba(255, 255, 255, 0.65); font-size: 0.74rem; } .asm-about-stat strong { margin: 0; color: #ffffff; font-size: 1.15rem; } .asm-values-section { padding: 4.5rem 0; } .asm-values-heading { max-width: 730px; margin-bottom: 2.2rem; } .asm-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } .asm-value-card { position: relative; overflow: hidden; min-height: 100%; padding: 1.6rem; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #ffffff; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.06); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .asm-value-card:hover { transform: translateY(-5px); border-color: #ccd5df; box-shadow: 0 20px 44px rgba(16, 24, 40, 0.1); } .asm-value-card__icon { display: grid; width: 52px; height: 52px; margin-bottom: 1.25rem; place-items: center; border-radius: 1rem; color: #165dff; background: #eef4ff; font-size: 1.25rem; } .asm-value-card:nth-child(2) .asm-value-card__icon { color: #0e9384; background: #f0fdfa; } .asm-value-card:nth-child(3) .asm-value-card__icon { color: #f79009; background: #fffaeb; } .asm-value-card h3 { margin-bottom: 0.7rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-value-card p { margin-bottom: 0; color: #667085; font-size: 0.88rem; line-height: 1.75; } /* ========================================================= CONTACT ========================================================= */ .asm-contact-feature { padding: 3.5rem; } .asm-contact-feature__grid { display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr); gap: 2.5rem; } .asm-contact-feature__visual { display: flex; min-height: 410px; align-items: center; justify-content: center; padding: 2rem; border-radius: 1.35rem; background: var(--asm-navy-950); border: 1px solid rgba(255, 255, 255, 0.06); } .asm-contact-feature__visual-inner { text-align: center; } /* * Icono plano: sin los aros concéntricos ni el halo teal, que daban aspecto * de plantilla genérica. Círculo simple con un filete y el color de marca. */ .asm-contact-feature__icon { display: grid; width: 92px; height: 92px; margin: 0 auto 1.5rem; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; color: #ffffff; background: rgba(255, 255, 255, 0.05); font-size: 2.3rem; } .asm-contact-feature__visual strong { display: block; color: #ffffff; font-size: 1.4rem; } .asm-contact-feature__visual span { color: rgba(255, 255, 255, 0.65); font-size: 0.82rem; } .asm-contact-feature__content { display: flex; flex-direction: column; justify-content: center; } .asm-contact-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1.5rem 0; } .asm-contact-service { display: flex; align-items: center; gap: 0.65rem; padding: 0.9rem; border: 1px solid #e4e7ec; border-radius: 0.9rem; color: #344054; background: #f9fafb; font-size: 0.84rem; font-weight: 700; } .asm-contact-service i { color: #12b76a; } .asm-contact-email-box { padding: 1.15rem; border: 1px solid #b2ddff; border-radius: 1rem; background: #eff8ff; } .asm-contact-email-box span { display: block; margin-bottom: 0.35rem; color: #475467; font-size: 0.73rem; font-weight: 700; } .asm-contact-email-box a { color: #175cd3; font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: 800; overflow-wrap: anywhere; } /* Representatives */ .asm-representatives-section { padding: 5rem 0; } .asm-representatives-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } .asm-representatives-heading > div { max-width: 650px; } .asm-representatives-heading > p { max-width: 420px; margin: 0; color: #667085; text-align: right; } .asm-representative-card { display: flex; min-height: 100%; overflow: hidden; flex-direction: column; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #ffffff; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.06); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .asm-representative-card:hover { transform: translateY(-4px); border-color: #ccd5df; box-shadow: 0 20px 44px rgba(16, 24, 40, 0.1); } .asm-representative-card__body { display: flex; align-items: center; gap: 1rem; padding: 1.3rem; } .asm-representative-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 1rem; color: #165dff; background: #eef4ff; font-size: 1.5rem; } .asm-representative-info { min-width: 0; flex: 1; } .asm-representative-info span { display: block; margin-bottom: 0.15rem; color: #98a2b3; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .asm-representative-info h3 { margin: 0 0 0.3rem; color: #101828; font-size: 1rem; font-weight: 800; } .asm-representative-info a { color: #175cd3; font-size: 0.82rem; font-weight: 700; } .asm-representative-whatsapp { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 0.85rem; color: #067647; background: #ecfdf3; font-size: 1.15rem; transition: 150ms ease; } .asm-representative-whatsapp:hover { color: #ffffff; background: #12b76a; } .asm-representative-card__footer { display: flex; align-items: flex-start; gap: 0.65rem; margin-top: auto; padding: 0.9rem 1.3rem; border-top: 1px solid #eef1f4; color: #667085; background: #fcfcfd; font-size: 0.76rem; } .asm-representative-card__footer i { margin-top: 0.12rem; color: #f79009; } .asm-representative-zones { line-height: 1.6; } .asm-empty-state { padding: 3rem; border: 1px dashed #d0d5dd; border-radius: 1.2rem; background: #ffffff; text-align: center; } .asm-empty-state i { display: block; margin-bottom: 1rem; color: #98a2b3; font-size: 2rem; } .asm-empty-state h3 { color: #101828; font-size: 1.1rem; font-weight: 800; } .asm-empty-state p { margin: 0; color: #667085; } /* ========================================================= CTA ========================================================= */ .asm-public-cta { padding: 0 0 5rem; } .asm-public-cta__card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding: 3rem 3.25rem; border-radius: 1.5rem; color: #ffffff; background: radial-gradient( circle at 90% 8%, rgba(205, 44, 34, 0.55), transparent 46% ), radial-gradient( circle at 8% 120%, rgba(4, 28, 59, 0.9), transparent 55% ), linear-gradient(135deg, #05132340, #0a2a47); background-color: #06182b; } /* Filete de marca a la izquierda para anclar el bloque. */ .asm-public-cta__card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: var(--asm-brand-500); } .asm-public-cta__card h2 { margin-bottom: 0.65rem; color: #ffffff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -0.04em; } .asm-public-cta__card p { margin: 0; color: rgba(255, 255, 255, 0.67); } .asm-public-cta__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 0.7rem; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991.98px) { .asm-public-hero { padding: 5rem 0 6rem; } .asm-about-intro__grid, .asm-contact-feature__grid { grid-template-columns: 1fr; } .asm-values-grid { grid-template-columns: 1fr; } .asm-about-visual, .asm-contact-feature__visual { min-height: 300px; } .asm-representatives-heading { align-items: flex-start; flex-direction: column; gap: 0.75rem; } .asm-representatives-heading > p { text-align: left; } .asm-public-cta__card { align-items: flex-start; flex-direction: column; } .asm-public-cta__actions { width: 100%; } } @media (max-width: 767.98px) { .asm-public-content { margin-top: -2rem; } .asm-about-intro, .asm-contact-feature { padding: 1.5rem; } .asm-contact-services { grid-template-columns: 1fr; } .asm-public-hero h1 { font-size: clamp(2.2rem, 12vw, 3.4rem); } } @media (max-width: 575.98px) { .asm-public-hero { padding: 4rem 0 4.8rem; } .asm-public-surface { border-radius: 1.15rem; } .asm-public-hero__actions, .asm-public-cta__actions { flex-direction: column; } .asm-public-hero__actions .btn, .asm-public-cta__actions .btn { width: 100%; } .asm-about-visual { min-height: 340px; } .asm-representative-card__body { align-items: flex-start; } } /* ========================================================= DOCUMENTOS LEGALES ========================================================= */ .asm-legal-page { background: #f6f8fb; } .asm-legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 1.5rem; } .asm-legal-sidebar { position: sticky; top: 105px; padding: 1.25rem; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #ffffff; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.06); } .asm-legal-sidebar__title { display: block; margin-bottom: 0.9rem; color: #101828; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .asm-legal-nav { display: grid; gap: 0.35rem; } .asm-legal-nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.8rem; border-radius: 0.75rem; color: #475467; font-size: 0.8rem; font-weight: 700; line-height: 1.35; text-decoration: none; transition: 150ms ease; } .asm-legal-nav a:hover, .asm-legal-nav a.is-active { color: #175cd3; background: #eff8ff; } .asm-legal-nav a i { width: 18px; color: #98a2b3; text-align: center; } .asm-legal-nav a:hover i, .asm-legal-nav a.is-active i { color: #175cd3; } .asm-legal-document { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.35rem; background: #ffffff; box-shadow: 0 18px 48px rgba(16, 24, 40, 0.08); } .asm-legal-document__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid #e4e7ec; background: #fcfcfd; } .asm-legal-document__header h2 { margin: 0 0 0.35rem; color: #101828; font-size: 1.25rem; font-weight: 800; } .asm-legal-document__header p { margin: 0; color: #667085; font-size: 0.82rem; } .asm-legal-print-button { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 0.9rem; border: 1px solid #d0d5dd; border-radius: 0.75rem; color: #344054; background: #ffffff; font-size: 0.78rem; font-weight: 700; } .asm-legal-print-button:hover { border-color: #98a2b3; color: #101828; background: #f9fafb; } .asm-legal-document__body { padding: 2rem; } .asm-legal-intro { margin-bottom: 2rem; padding: 1rem 1.1rem; border: 1px solid #b2ddff; border-radius: 1rem; color: #344054; background: #eff8ff; font-size: 0.9rem; line-height: 1.75; } .asm-legal-section { scroll-margin-top: 110px; padding-bottom: 2.2rem; margin-bottom: 2.2rem; border-bottom: 1px solid #eaecf0; } .asm-legal-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .asm-legal-section__number { display: inline-flex; margin-bottom: 0.65rem; padding: 0.35rem 0.55rem; border-radius: 999px; color: #175cd3; background: #eff8ff; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .asm-legal-section h2, .asm-legal-section h3 { color: #101828; font-weight: 800; letter-spacing: -0.025em; } .asm-legal-section h2 { margin-bottom: 1rem; font-size: 1.55rem; } .asm-legal-section h3 { margin: 1.7rem 0 0.8rem; font-size: 1.15rem; } .asm-legal-section p { margin-bottom: 1rem; color: #475467; font-size: 0.9rem; line-height: 1.9; text-align: left; } .asm-legal-list { display: grid; gap: 0.85rem; padding: 0; margin: 1rem 0 0; counter-reset: legal-item; list-style: none; } .asm-legal-list > li { position: relative; min-height: 44px; padding: 0.9rem 1rem 0.9rem 3.4rem; border: 1px solid #eaecf0; border-radius: 0.9rem; color: #475467; background: #fcfcfd; font-size: 0.86rem; line-height: 1.75; counter-increment: legal-item; } .asm-legal-list > li::before { position: absolute; top: 0.85rem; left: 0.85rem; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 0.65rem; color: #175cd3; background: #eff8ff; content: counter(legal-item); font-size: 0.72rem; font-weight: 800; } .asm-legal-notice { display: flex; align-items: flex-start; gap: 0.9rem; margin-top: 1.5rem; padding: 1rem; border: 1px solid #fedf89; border-radius: 1rem; color: #475467; background: #fffaeb; } .asm-legal-notice i { margin-top: 0.2rem; color: #f79009; } .asm-legal-notice p { margin: 0; font-size: 0.82rem; } /* ========================================================= BANCOS DENTRO DEL SISTEMA VISUAL PÚBLICO ========================================================= */ .asm-bank-content { position: relative; z-index: 2; margin-top: -3.4rem; padding-bottom: 5rem; } .asm-bank-access-card, .asm-bank-state-card, .asm-bank-list-surface { border: 1px solid #e4e7ec; border-radius: 1.6rem; background: #ffffff; box-shadow: 0 28px 70px rgba(16, 24, 40, 0.11); } .asm-bank-list-surface { padding: 2rem; } .asm-bank-access-card { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); overflow: hidden; } .asm-bank-access-card__visual { position: relative; display: flex; min-height: 430px; align-items: center; justify-content: center; padding: 3rem; background: var(--asm-navy-950); } /* Icono plano: sin aros concéntricos ni halo teal (aspecto de plantilla). */ .asm-bank-access-card__icon { display: grid; width: 108px; height: 108px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; color: #ffffff; background: rgba(255, 255, 255, 0.05); font-size: 2.8rem; } .asm-bank-access-card__badge { position: absolute; right: 1.3rem; bottom: 1.3rem; left: 1.3rem; padding: 0.8rem 1rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.9rem; color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.08); text-align: center; font-size: 0.78rem; font-weight: 700; } .asm-bank-access-card__content { padding: 3.5rem; } .asm-bank-access-card__content h2, .asm-bank-state-card h2, .asm-bank-section-heading h2 { color: #101828; font-weight: 800; letter-spacing: -0.035em; } .asm-bank-access-card__content h2 { margin-bottom: 1rem; font-size: clamp(1.8rem, 3vw, 2.6rem); } .asm-bank-access-card__content > p { margin-bottom: 1.7rem; color: #667085; line-height: 1.75; } .asm-bank-access-points { display: grid; gap: 0.85rem; margin-bottom: 2rem; } .asm-bank-access-points div { display: flex; align-items: flex-start; gap: 0.7rem; color: #344054; font-size: 0.9rem; } .asm-bank-access-points i { margin-top: 0.15rem; color: #12b76a; } .asm-bank-state-card { max-width: 760px; margin: 0 auto; padding: 3.5rem; text-align: center; } .asm-bank-state-card__icon { display: grid; width: 76px; height: 76px; margin: 0 auto 1.35rem; place-items: center; border-radius: 1.3rem; color: #165dff; background: #eef4ff; font-size: 1.9rem; } .asm-bank-state-card__icon-warning { color: #f79009; background: #fffaeb; } .asm-bank-state-card__icon-danger { color: #d92d20; background: #fef3f2; } .asm-bank-state-card p { max-width: 600px; margin: 0 auto 1.75rem; color: #667085; line-height: 1.7; } .asm-bank-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; } .asm-bank-section-heading h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); } .asm-bank-section-heading > p { max-width: 420px; margin: 0; color: #667085; text-align: right; } .asm-bank-alert { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2.2rem; padding: 1rem 1.1rem; border: 1px solid #b2ddff; border-radius: 1rem; color: #175cd3; background: #eff8ff; } .asm-bank-alert > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 0.65rem; background: #d1e9ff; } .asm-bank-alert strong { display: block; margin-bottom: 0.2rem; } .asm-bank-alert p { margin: 0; color: #475467; font-size: 0.8rem; } .asm-bank-country { margin-bottom: 3rem; } .asm-bank-country:last-child { margin-bottom: 0; } .asm-bank-country__header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem; } .asm-bank-country__flag { display: grid; width: 54px; height: 42px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #e4e7ec; border-radius: 0.75rem; background: #ffffff; box-shadow: 0 5px 14px rgba(16, 24, 40, 0.06); } .asm-bank-country__flag img { max-width: 40px; height: auto; } .asm-bank-country__header > div:nth-child(2) { min-width: 0; flex: 1; } .asm-bank-country__header span { color: #98a2b3; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .asm-bank-country__header h3 { margin: 0; color: #101828; font-size: 1.35rem; font-weight: 800; } .asm-bank-country__count { padding: 0.45rem 0.7rem; border-radius: 999px; color: #344054 !important; background: #eaecf0; font-size: 0.68rem !important; white-space: nowrap; } .asm-bank-card { display: flex; min-height: 100%; overflow: hidden; flex-direction: column; border: 1px solid #e4e7ec; border-radius: 1.25rem; background: #ffffff; box-shadow: 0 13px 34px rgba(16, 24, 40, 0.07); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .asm-bank-card:hover { transform: translateY(-4px); border-color: #cfd6df; box-shadow: 0 20px 44px rgba(16, 24, 40, 0.11); } .asm-bank-card__header { display: flex; align-items: center; gap: 0.9rem; padding: 1.2rem; border-bottom: 1px solid #eef1f4; } .asm-bank-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 0.9rem; color: var(--asm-accent); background: rgba(230, 57, 70, 0.10); font-size: 1.15rem; line-height: 1; } /* El glyph centrado exacto (FontAwesome añade su propio line-height). */ .asm-bank-card__icon i { line-height: 1; } .asm-bank-card__header span { display: block; margin-bottom: 0.15rem; color: #98a2b3; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .asm-bank-card__header h4 { margin: 0; color: #101828; font-size: 1rem; font-weight: 800; } .asm-bank-card__body { flex: 1; padding: 1.2rem; } .asm-bank-detail__label { display: block; margin-bottom: 0.35rem; color: #667085; font-size: 0.75rem; font-weight: 700; } .asm-bank-detail__value { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem; border: 1px solid #e4e7ec; border-radius: 0.85rem; background: #f9fafb; } .asm-bank-detail__value strong { overflow-wrap: anywhere; color: #101828; font-size: 0.9rem; } .asm-bank-copy-button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid #d0d5dd; border-radius: 0.65rem; color: #475467; background: #ffffff; } .asm-bank-additional-info { margin-top: 1rem; color: #475467; font-size: 0.82rem; line-height: 1.65; overflow-wrap: anywhere; } .asm-bank-card__footer { display: flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1.2rem; border-top: 1px solid #eef1f4; color: #667085; background: #fcfcfd; font-size: 0.7rem; font-weight: 600; } .asm-bank-card__footer i { color: #12b76a; } @media (max-width: 991.98px) { .asm-legal-layout { grid-template-columns: 1fr; } .asm-legal-sidebar { position: static; } .asm-legal-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asm-bank-access-card { grid-template-columns: 1fr; } .asm-bank-access-card__visual { min-height: 270px; } .asm-bank-section-heading { align-items: flex-start; flex-direction: column; gap: 0.75rem; } .asm-bank-section-heading > p { text-align: left; } } @media (max-width: 575.98px) { .asm-legal-document__header { flex-direction: column; } .asm-legal-document__body { padding: 1.25rem; } .asm-legal-nav { grid-template-columns: 1fr; } .asm-legal-list > li { padding-right: 0.8rem; padding-left: 3.15rem; } .asm-bank-content { margin-top: -2rem; } .asm-bank-access-card__content, .asm-bank-state-card, .asm-bank-list-surface { padding: 1.5rem; } .asm-bank-country__header { align-items: flex-start; flex-wrap: wrap; } .asm-bank-country__count { margin-left: 63px; } } @media print { .asm-main-header, .asm-public-hero, .asm-legal-sidebar, .asm-legal-print-button, .asm-public-cta, .subscribe, footer { display: none !important; } .asm-public-content { margin: 0; padding: 0; } .asm-legal-layout { display: block; } .asm-legal-document { border: 0; box-shadow: none; } .asm-legal-document__body { padding: 0; } .asm-legal-list > li { break-inside: avoid; } } /* ========================================================= MENÚ DE NAVEGACIÓN INTERNO ========================================================= */ .asm-section-menu { position: relative; z-index: 30; border-top: 1px solid #eef1f4; border-bottom: 1px solid #e4e7ec; background: #ffffff; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04); } .asm-section-menu__scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .asm-section-menu__list { display: flex; min-width: max-content; align-items: stretch; gap: 0.4rem; padding: 0.75rem 0; margin: 0; list-style: none; } .asm-section-menu-item { display: flex; flex: 0 0 auto; margin: 0; padding: 0; } .asm-section-menu-link { position: relative; display: flex; min-width: 122px; min-height: 68px; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.75rem 1rem; border: 1px solid transparent; border-radius: 0.9rem; color: #475467; background: transparent; text-decoration: none; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .asm-section-menu-link:hover { transform: translateY(-1px); border-color: #e4e7ec; color: #101828; background: #f9fafb; } .asm-section-menu-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 0.75rem; color: #475467; background: #f2f4f7; font-size: 0.92rem; transition: color 160ms ease, background-color 160ms ease; } .asm-section-menu-copy { display: block; min-width: 0; } .asm-section-menu-copy strong { display: block; margin: 0; color: inherit; font-size: 0.76rem; font-weight: 750; line-height: 1.2; white-space: nowrap; } .asm-section-menu-copy small { display: none !important; } .asm-section-menu-arrow { display: none !important; } .asm-section-menu-link.asm-menu-active { border-color: var(--asm-border); color: var(--asm-primary); background: var(--asm-surface-soft); box-shadow: 0 5px 15px rgba(16, 24, 40, 0.07); } .asm-section-menu-link.asm-menu-active::after { position: absolute; right: 18px; bottom: -1px; left: 18px; height: 3px; border-radius: 3px 3px 0 0; content: ""; background: var(--asm-accent); } .asm-section-menu-link.asm-menu-active .asm-section-menu-icon { color: var(--asm-accent); background: var(--asm-surface-soft); } /* Modo oscuro de la barra de secciones (tabs). */ :root[data-theme="dark"] .asm-section-menu { border-top-color: var(--asm-border); border-bottom-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-section-menu-link { color: var(--asm-muted); } :root[data-theme="dark"] .asm-section-menu-link:hover { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-section-menu-icon { color: var(--asm-muted); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-section-menu-link.asm-menu-active { color: var(--asm-text); background: var(--asm-surface-soft); } /* ---- Modo oscuro de los desplegables select2 (País, Área, etc.) ---- */ :root[data-theme="dark"] .select2-container--default .select2-selection--single, :root[data-theme="dark"] .select2-container--default .select2-selection--multiple { border-color: var(--asm-border) !important; background: var(--asm-surface-soft) !important; } :root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--asm-text) !important; } :root[data-theme="dark"] .select2-container--default .select2-selection__placeholder { color: var(--asm-muted) !important; } :root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--asm-muted) transparent transparent transparent; } :root[data-theme="dark"] .select2-dropdown { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--asm-text); background: var(--asm-surface); } :root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { color: #fff; background: var(--asm-accent); } :root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .select2-search--dropdown .select2-search__field { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } /* |-------------------------------------------------------------------------- | Protección frente a estilos heredados |-------------------------------------------------------------------------- */ .asm-section-menu li { float: none !important; width: auto !important; } .asm-section-menu a { text-decoration: none !important; } .asm-section-menu .asm-profile-menu-copy small, .asm-section-menu .asm-profile-menu-arrow { display: none !important; } @media (max-width: 1199.98px) { .asm-section-menu-link { min-width: 108px; padding-right: 0.8rem; padding-left: 0.8rem; } } @media (max-width: 767.98px) { .asm-section-menu__list { gap: 0.2rem; padding: 0.6rem 0; } .asm-section-menu-link { min-width: 88px; min-height: 64px; flex-direction: column; gap: 0.35rem; padding: 0.55rem 0.65rem; } .asm-section-menu-icon { width: 32px; height: 32px; } .asm-section-menu-copy strong { max-width: 90px; overflow: hidden; font-size: 0.68rem; text-align: center; text-overflow: ellipsis; } } .asm-orders-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-orders-heading { padding: 2.3rem 0 4.5rem; color: #fff; background: radial-gradient( circle at 85% 20%, rgba(45, 212, 191, .15), transparent 30% ), linear-gradient( 135deg, #071727, #123b57 ); } .asm-orders-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-orders-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: #99f6e4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-orders-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-orders-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-orders-heading__button, .asm-orders-button-primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border-radius: .8rem; font-weight: 750; } .asm-orders-heading__button { border: 1px solid rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .08); } .asm-orders-heading__button:hover { color: #fff; background: rgba(255, 255, 255, .14); } .asm-orders-button-primary { border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-orders-button-primary:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } /* Barra compacta con la acción "Nueva búsqueda" (reemplaza al banner). */ .asm-orders-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .asm-orders-content { position: relative; z-index: 2; /* Sin banner de cabecera: margen normal bajo la barra de secciones (antes -2.7rem para superponerse al hero). */ margin-top: 1.75rem; padding-bottom: 5rem; } .asm-orders-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .asm-orders-summary__item { display: flex; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .06); } .asm-orders-summary__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: #475467; background: #f2f4f7; } /* Iconos del resumen unificados en navy (sin arcoíris azul/verde/naranja). */ .asm-orders-summary__icon.is-blue, .asm-orders-summary__icon.is-green, .asm-orders-summary__icon.is-orange { color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-orders-summary__item small { display: block; margin-bottom: .15rem; color: #667085; font-size: .7rem; font-weight: 700; } .asm-orders-summary__item strong { display: block; color: #101828; font-size: 1.15rem; } .asm-active-cart { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.25rem; margin-bottom: 1rem; padding: 1.15rem 1.25rem; border: 1px solid var(--asm-border); border-radius: 1rem; background: var(--asm-surface-soft); } .asm-active-cart__main { display: flex; align-items: center; gap: .9rem; } .asm-active-cart__icon { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: .9rem; color: var(--asm-accent); background: var(--asm-surface); } .asm-active-cart__main > div > span { display: block; color: var(--asm-accent); font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .asm-active-cart h2 { margin: .15rem 0; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-active-cart p { margin: 0; color: #667085; font-size: .75rem; } .asm-active-cart__amount { text-align: right; } .asm-active-cart__amount small { display: block; color: #667085; font-size: .68rem; } .asm-active-cart__amount strong { display: block; color: var(--asm-primary); font-size: 1.15rem; } .asm-orders-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-orders-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-orders-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-orders-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-orders-filters { display: flex; align-items: center; gap: .65rem; } .asm-orders-search { position: relative; } .asm-orders-search i { position: absolute; top: 50%; left: .85rem; color: #98a2b3; transform: translateY(-50%); } .asm-orders-search input, .asm-orders-filters .form-select { min-height: 42px; border: 1px solid #d0d5dd; border-radius: .75rem; color: #344054; background-color: #fff; font-size: .76rem; } .asm-orders-search input { width: 220px; padding: .65rem .8rem .65rem 2.35rem; } .asm-orders-filters .form-select { width: 175px; } .asm-orders-table-wrap { overflow-x: auto; } .asm-orders-table { width: 100%; min-width: 990px; border-collapse: collapse; } .asm-orders-table th { padding: .8rem 1rem; border-bottom: 1px solid #eaecf0; color: #667085; background: #f9fafb; font-size: .67rem; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; } .asm-orders-table td { padding: .95rem 1rem; border-bottom: 1px solid #f0f2f5; color: #344054; font-size: .78rem; vertical-align: middle; } .asm-orders-table tbody tr { transition: background-color 150ms ease, box-shadow 150ms ease; } .asm-orders-table tbody tr:hover { background: #fcfcfd; } .asm-orders-table tbody tr:last-child td { border-bottom: 0; } .asm-order-number { display: flex; align-items: center; gap: .7rem; } .asm-order-number > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: .75rem; color: #475467; background: #f2f4f7; } .asm-order-number strong { display: block; color: #101828; } .asm-order-number small { display: block; margin-top: .12rem; color: #98a2b3; font-size: .66rem; } .asm-order-status { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .65rem; border-radius: 999px; font-size: .67rem; font-weight: 750; white-space: nowrap; } .asm-order-status.is-warning { color: #b54708; background: #fffaeb; } .asm-order-status.is-primary { color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-order-status.is-info { color: #026aa2; background: #f0f9ff; } .asm-order-status.is-success { color: #067647; background: #ecfdf3; } .asm-order-status.is-danger { color: #b42318; background: #fef3f2; } .asm-order-status.is-neutral { color: #475467; background: #f2f4f7; } .asm-order-reservations { display: inline-grid; min-width: 30px; height: 30px; place-items: center; border-radius: .65rem; color: #344054; background: #f2f4f7; } .asm-order-payment strong { display: block; margin-bottom: .35rem; } .asm-order-payment__bar { width: 82px; height: 5px; overflow: hidden; border-radius: 999px; background: #eaecf0; } .asm-order-payment__bar span { display: block; height: 100%; border-radius: inherit; background: #12b76a; } .asm-order-remaining { color: #b42318; } .asm-order-paid { color: #067647; } .asm-order-date { color: #667085; white-space: nowrap; } .asm-order-action { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #d0d5dd; border-radius: .7rem; color: #344054; background: #fff; transition: 150ms ease; } .asm-order-action:hover { border-color: #98a2b3; color: #101828; background: #f9fafb; } .asm-orders-empty { padding: 4rem 1.5rem; text-align: center; } .asm-orders-empty > span { display: grid; width: 72px; height: 72px; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; color: #667085; background: #f2f4f7; font-size: 1.6rem; } .asm-orders-empty h3 { margin-bottom: .4rem; color: #101828; font-size: 1.1rem; font-weight: 800; } .asm-orders-empty p { margin-bottom: 1.25rem; color: #667085; } .asm-orders-no-results { padding: 2rem; color: #667085; text-align: center; } @media (max-width: 991.98px) { .asm-orders-heading__content, .asm-orders-panel__header { align-items: flex-start; flex-direction: column; } .asm-orders-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asm-active-cart { grid-template-columns: 1fr auto; } .asm-active-cart__amount { grid-column: 1; text-align: left; } .asm-active-cart .btn { grid-column: 2; grid-row: 1 / span 2; } } @media (max-width: 575.98px) { .asm-orders-content { margin-top: 1.25rem; } .asm-orders-summary { grid-template-columns: 1fr; } .asm-orders-filters { width: 100%; align-items: stretch; flex-direction: column; } .asm-orders-search, .asm-orders-search input, .asm-orders-filters .form-select { width: 100%; } .asm-active-cart { grid-template-columns: 1fr; } .asm-active-cart__amount, .asm-active-cart .btn { grid-column: auto; grid-row: auto; } .asm-active-cart .btn { width: 100%; } } /* Modo oscuro de la vista de órdenes: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-orders-page { background: #0a1120; } :root[data-theme="dark"] .asm-orders-summary__item, :root[data-theme="dark"] .asm-orders-panel { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-active-cart { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-active-cart__icon { background: var(--asm-surface); } :root[data-theme="dark"] .asm-orders-panel__header { border-bottom-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-orders-summary__item strong, :root[data-theme="dark"] .asm-orders-panel__header h2, :root[data-theme="dark"] .asm-active-cart h2, :root[data-theme="dark"] .asm-order-number strong, :root[data-theme="dark"] .asm-orders-empty h3 { color: var(--asm-text); } :root[data-theme="dark"] .asm-orders-panel__header p, :root[data-theme="dark"] .asm-orders-summary__item small, :root[data-theme="dark"] .asm-active-cart p, :root[data-theme="dark"] .asm-orders-empty p, :root[data-theme="dark"] .asm-orders-no-results { color: var(--asm-muted); } :root[data-theme="dark"] .asm-orders-table th { color: var(--asm-muted); border-bottom-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-orders-table td { color: var(--asm-muted); border-bottom-color: var(--asm-border); } :root[data-theme="dark"] .asm-orders-table tbody tr:hover { background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-orders-search input, :root[data-theme="dark"] .asm-orders-filters .form-select { border-color: var(--asm-border); color: var(--asm-text); background-color: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-order-number > span, :root[data-theme="dark"] .asm-order-reservations, :root[data-theme="dark"] .asm-orders-empty > span { color: var(--asm-muted); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-order-action { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-order-payment__bar { background: var(--asm-surface-soft); } /* ========================================================= PÁGINA: MIS RESERVAS ========================================================= */ .asm-reservations-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-reservations-heading { padding: 2.3rem 0 4.5rem; color: #fff; background: radial-gradient( circle at 85% 20%, rgba(45, 212, 191, .15), transparent 30% ), linear-gradient( 135deg, #071727, #123b57 ); } .asm-reservations-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-reservations-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: #99f6e4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-reservations-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-reservations-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-reservations-heading__button, .asm-reservations-button-primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border-radius: .8rem; font-weight: 750; } .asm-reservations-heading__button { border: 1px solid rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .08); } .asm-reservations-heading__button:hover { color: #fff; background: rgba(255, 255, 255, .14); } .asm-reservations-button-primary { border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-reservations-button-primary:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } /* Barra compacta con la acción "Nueva búsqueda" (reemplaza al banner). */ .asm-reservations-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .asm-reservations-content { position: relative; z-index: 2; /* Sin banner de cabecera: margen normal bajo la barra de secciones. */ margin-top: 1.75rem; padding-bottom: 5rem; } .asm-reservations-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .asm-reservations-summary__item { display: flex; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .06); } .asm-reservations-summary__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: #475467; background: #f2f4f7; } /* Iconos del resumen unificados en navy (sin arcoíris naranja/azul/verde). */ .asm-reservations-summary__icon.is-orange, .asm-reservations-summary__icon.is-blue, .asm-reservations-summary__icon.is-green { color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-reservations-summary__item small { display: block; margin-bottom: .15rem; color: #667085; font-size: .7rem; font-weight: 700; } .asm-reservations-summary__item strong { display: block; color: #101828; font-size: 1.15rem; } .asm-reservations-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-reservations-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-reservations-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-reservations-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-reservations-search { position: relative; } .asm-reservations-search i { position: absolute; top: 50%; left: .85rem; color: #98a2b3; transform: translateY(-50%); } .asm-reservations-search input { width: 260px; min-height: 42px; padding: .65rem .8rem .65rem 2.35rem; border: 1px solid #d0d5dd; border-radius: .75rem; color: #344054; background: #fff; font-size: .76rem; } .asm-reservations-tabs { display: flex; overflow-x: auto; gap: .45rem; padding: .85rem 1rem; border-bottom: 1px solid #eaecf0; background: #fff; } .asm-reservations-tab { display: inline-flex; min-height: 40px; flex: 0 0 auto; align-items: center; gap: .55rem; padding: .55rem .75rem; border: 1px solid transparent; border-radius: .75rem; color: #667085; background: transparent; font-size: .74rem; font-weight: 750; } .asm-reservations-tab strong { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: .55rem; color: #475467; background: #f2f4f7; font-size: .68rem; } .asm-reservations-tab.is-active { border-color: var(--asm-border); color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-reservations-tab.is-active strong { color: #fff; background: var(--asm-accent); } .asm-reservations-list { display: grid; } .asm-reservation-row { display: grid; grid-template-columns: minmax(145px, .75fr) minmax(300px, 1.55fr) minmax(110px, .55fr) minmax(230px, auto); align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid #eef1f4; transition: background-color 150ms ease; } .asm-reservation-row:hover { background: #fcfcfd; } .asm-reservation-row:last-child { border-bottom: 0; } .asm-reservation-provider { display: flex; align-items: center; gap: .75rem; } .asm-reservation-provider__logo { display: grid; width: 52px; height: 44px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #e4e7ec; border-radius: .75rem; background: #fff; } .asm-reservation-provider__logo img { max-width: 44px; max-height: 34px; object-fit: contain; } .asm-reservation-provider__logo i { display: none; color: #667085; } .asm-reservation-provider__logo.is-fallback img { display: none; } .asm-reservation-provider__logo.is-fallback i { display: block; } .asm-reservation-provider small, .asm-reservation-main small, .asm-reservation-amount small { display: block; margin-bottom: .15rem; color: #98a2b3; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .asm-reservation-provider strong { display: block; color: #344054; font-size: .76rem; } .asm-reservation-main__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .asm-reservation-locator { display: block; color: #101828; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; font-weight: 800; overflow-wrap: anywhere; } .asm-reservation-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; padding: .4rem .6rem; border-radius: 999px; font-size: .65rem; font-weight: 750; white-space: nowrap; } .asm-reservation-status.is-pending { color: #475467; background: #f2f4f7; } .asm-reservation-status.is-warning { color: #b54708; background: #fffaeb; } .asm-reservation-status.is-success { color: #067647; background: #ecfdf3; } .asm-reservation-status.is-danger { color: #b42318; background: #fef3f2; } .asm-reservation-status.is-neutral { color: #475467; background: #f2f4f7; } .asm-reservation-details { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .55rem; } .asm-reservation-details span { display: inline-flex; align-items: center; gap: .38rem; color: #667085; font-size: .7rem; } .asm-reservation-details i { color: #98a2b3; } .asm-reservation-amount strong { display: block; color: #101828; font-size: .98rem; } .asm-reservation-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; } .asm-reservation-action-primary, .asm-reservation-action-secondary, .asm-reservation-action-danger { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .7rem; border-radius: .7rem; font-size: .69rem; font-weight: 750; white-space: nowrap; } .asm-reservation-action-primary { border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-reservation-action-secondary { border: 1px solid #d0d5dd; color: #344054; background: #fff; } .asm-reservation-action-secondary.is-success { border-color: #abefc6; color: #067647; background: #ecfdf3; } .asm-reservation-action-danger { width: 38px; padding: 0; border: 1px solid #fecdca; color: #b42318; background: #fef3f2; } .asm-reservations-empty { padding: 4rem 1.5rem; text-align: center; } .asm-reservations-empty > span { display: grid; width: 72px; height: 72px; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; color: #667085; background: #f2f4f7; font-size: 1.6rem; } .asm-reservations-empty h3 { margin-bottom: .4rem; color: #101828; font-size: 1.1rem; font-weight: 800; } .asm-reservations-empty p { margin-bottom: 1.25rem; color: #667085; } @media (max-width: 1199.98px) { .asm-reservation-row { grid-template-columns: minmax(130px, .65fr) minmax(260px, 1.4fr) minmax(100px, .5fr); } .asm-reservation-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: .75rem; border-top: 1px dashed #e4e7ec; } } @media (max-width: 991.98px) { .asm-reservations-heading__content, .asm-reservations-panel__header { align-items: flex-start; flex-direction: column; } .asm-reservations-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asm-reservations-search, .asm-reservations-search input { width: 100%; } .asm-reservation-row { grid-template-columns: 1fr 1fr; } .asm-reservation-main, .asm-reservation-actions { grid-column: 1 / -1; } .asm-reservation-amount { text-align: right; } } @media (max-width: 575.98px) { .asm-reservations-content { margin-top: 1.25rem; } .asm-reservations-summary { grid-template-columns: 1fr; } .asm-reservation-row { grid-template-columns: 1fr; gap: .85rem; } .asm-reservation-main, .asm-reservation-actions { grid-column: auto; } .asm-reservation-main__top { align-items: flex-start; flex-direction: column; } .asm-reservation-amount { text-align: left; } .asm-reservation-actions { align-items: stretch; flex-wrap: wrap; justify-content: flex-start; } .asm-reservation-action-primary, .asm-reservation-action-secondary { flex: 1; } } /* Modo oscuro de la vista de reservas: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-reservations-page { background: #0a1120; } :root[data-theme="dark"] .asm-reservations-summary__item, :root[data-theme="dark"] .asm-reservations-panel { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-reservations-panel__header, :root[data-theme="dark"] .asm-reservations-tabs { border-bottom-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-reservations-summary__item strong, :root[data-theme="dark"] .asm-reservations-panel__header h2, :root[data-theme="dark"] .asm-reservation-locator, :root[data-theme="dark"] .asm-reservation-amount strong, :root[data-theme="dark"] .asm-reservations-empty h3 { color: var(--asm-text); } :root[data-theme="dark"] .asm-reservations-panel__header p, :root[data-theme="dark"] .asm-reservations-summary__item small, :root[data-theme="dark"] .asm-reservation-provider strong, :root[data-theme="dark"] .asm-reservation-details span, :root[data-theme="dark"] .asm-reservations-empty p { color: var(--asm-muted); } :root[data-theme="dark"] .asm-reservations-search input { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-reservations-tab { color: var(--asm-muted); } :root[data-theme="dark"] .asm-reservations-tab strong { color: var(--asm-muted); background: var(--asm-surface); } :root[data-theme="dark"] .asm-reservation-row { border-bottom-color: var(--asm-border); } :root[data-theme="dark"] .asm-reservation-row:hover { background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-reservation-action-secondary { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-reservations-empty > span { color: var(--asm-muted); background: var(--asm-surface-soft); } /* ========================================================= PÁGINA: USUARIOS ========================================================= */ .asm-users-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-users-heading { padding: 2.3rem 0 4.5rem; color: #fff; background: radial-gradient( circle at 85% 20%, rgba(45, 212, 191, .15), transparent 30% ), linear-gradient( 135deg, #071727, #123b57 ); } .asm-users-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-users-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: #99f6e4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-users-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-users-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-users-heading__button, .asm-users-button-primary, .asm-users-button-secondary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border-radius: .8rem; font-weight: 750; } .asm-users-heading__button { border: 1px solid rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .08); } .asm-users-heading__button:hover { color: #fff; background: rgba(255, 255, 255, .14); } .asm-users-button-primary { border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-users-button-primary:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } /* Barra compacta con la acción "Agregar usuario" (reemplaza al banner). */ .asm-users-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .asm-users-button-secondary { border: 1px solid #d0d5dd; color: #344054; background: #fff; } .asm-users-content { position: relative; z-index: 2; /* Sin banner de cabecera: margen normal bajo la barra de secciones. */ margin-top: 1.75rem; padding-bottom: 5rem; } .asm-users-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .asm-users-summary__item { display: flex; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .06); } .asm-users-summary__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: #475467; background: #f2f4f7; } /* Iconos del resumen unificados en navy (sin arcoíris verde/naranja/azul). */ .asm-users-summary__icon.is-green, .asm-users-summary__icon.is-orange, .asm-users-summary__icon.is-blue { color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-users-summary__item small { display: block; margin-bottom: .15rem; color: #667085; font-size: .7rem; font-weight: 700; } .asm-users-summary__item strong { display: block; color: #101828; font-size: 1.15rem; } .asm-users-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-users-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-users-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-users-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-users-search { position: relative; } .asm-users-search i { position: absolute; top: 50%; left: .85rem; color: #98a2b3; transform: translateY(-50%); } .asm-users-search input { width: 260px; min-height: 42px; padding: .65rem .8rem .65rem 2.35rem; border: 1px solid #d0d5dd; border-radius: .75rem; color: #344054; background: #fff; font-size: .76rem; } .asm-users-list { display: grid; } .asm-user-row { border-bottom: 1px solid #eaecf0; } .asm-user-row:last-child { border-bottom: 0; } .asm-user-row__summary { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; background: #fcfcfd; } .asm-user-avatar { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: .9rem; color: var(--asm-primary); background: var(--asm-surface-soft); font-size: .8rem; font-weight: 800; } .asm-user-identity { min-width: 0; flex: 1; } .asm-user-identity strong { display: block; color: #101828; font-size: .85rem; } .asm-user-identity a, .asm-user-identity small { display: block; margin-top: .15rem; color: #667085; font-size: .68rem; text-decoration: none; overflow-wrap: anywhere; } .asm-user-status-toggle { position: relative; margin: 0; cursor: pointer; } .asm-user-status-toggle input { position: absolute; opacity: 0; } .asm-user-status-toggle span { display: inline-flex; min-width: 78px; min-height: 36px; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .7rem; border: 1px solid #d0d5dd; border-radius: 999px; color: #667085; background: #fff; font-size: .68rem; font-weight: 750; } .asm-user-status-toggle input:checked + span { border-color: #abefc6; color: #067647; background: #ecfdf3; } .asm-user-row__details { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 1.25rem; padding: 1.2rem; } .asm-user-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; } .asm-user-field label { display: block; margin-bottom: .4rem; color: #344054; font-size: .7rem; font-weight: 750; } .asm-user-field .form-control, .asm-user-field .select2-selection { min-height: 44px; border-color: #d0d5dd; border-radius: .75rem; box-shadow: none; } .asm-user-field .form-control:focus { border-color: var(--asm-accent); box-shadow: 0 0 0 4px rgba(230, 57, 70, .12); } .asm-user-permissions { padding: 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #f9fafb; } .asm-user-permissions__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; } .asm-user-permissions__heading strong { display: block; color: #101828; font-size: .8rem; } .asm-user-permissions__heading small { display: block; margin-top: .15rem; color: #667085; font-size: .66rem; } .asm-user-delete { display: inline-flex; min-height: 34px; align-items: center; gap: .4rem; padding: .45rem .6rem; border: 1px solid #fecdca; border-radius: .65rem; color: #b42318; background: #fef3f2; font-size: .65rem; font-weight: 750; } .asm-user-permissions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .asm-user-permission { position: relative; margin: 0; cursor: pointer; } .asm-user-permission input { position: absolute; opacity: 0; } .asm-user-permission span { display: flex; min-height: 42px; align-items: center; gap: .5rem; padding: .65rem .7rem; border: 1px solid #d0d5dd; border-radius: .75rem; color: #667085; background: #fff; font-size: .68rem; font-weight: 700; } .asm-user-permission input:checked + span { border-color: var(--asm-accent); color: var(--asm-accent); background: rgba(230, 57, 70, .06); } .asm-users-empty { padding: 4rem 1.5rem; text-align: center; } .asm-users-empty > span { display: grid; width: 72px; height: 72px; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; color: #667085; background: #f2f4f7; font-size: 1.6rem; } .asm-users-empty h3 { margin-bottom: .4rem; color: #101828; font-size: 1.1rem; font-weight: 800; } .asm-users-empty p { margin-bottom: 1.25rem; color: #667085; } .asm-add-user-modal { overflow: hidden; border: 0; border-radius: 1.2rem; box-shadow: 0 24px 70px rgba(16, 24, 40, .18); } .asm-add-user-modal .modal-header, .asm-add-user-modal .modal-footer { padding: 1.2rem 1.4rem; border-color: #eaecf0; } .asm-add-user-modal .modal-body { padding: 1.4rem; } .asm-add-user-modal__eyebrow { display: block; color: var(--asm-accent); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .asm-add-user-modal .modal-title { margin-top: .2rem; color: #101828; font-size: 1.15rem; font-weight: 800; } .asm-add-user-intro { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.2rem; padding: .9rem 1rem; border: 1px solid var(--asm-border); border-radius: .85rem; color: #475467; background: var(--asm-surface-soft); font-size: .75rem; } .asm-add-user-intro i { margin-top: .12rem; color: var(--asm-primary); } @media (max-width: 1199.98px) { .asm-user-row__details { grid-template-columns: 1fr; } } @media (max-width: 991.98px) { .asm-users-heading__content, .asm-users-panel__header { align-items: flex-start; flex-direction: column; } .asm-users-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asm-users-search, .asm-users-search input { width: 100%; } .asm-user-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .asm-users-content { margin-top: 1.25rem; } .asm-users-summary { grid-template-columns: 1fr; } .asm-user-row__summary { align-items: flex-start; flex-wrap: wrap; } .asm-user-status-toggle { margin-left: 55px; } .asm-user-fields, .asm-user-permissions__grid { grid-template-columns: 1fr; } .asm-user-permissions__heading { flex-direction: column; } } /* Modo oscuro de la vista de usuarios: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-users-page { background: #0a1120; } :root[data-theme="dark"] .asm-users-summary__item, :root[data-theme="dark"] .asm-users-panel, :root[data-theme="dark"] .asm-user-row { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-users-panel__header, :root[data-theme="dark"] .asm-user-row__summary, :root[data-theme="dark"] .asm-user-permissions { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-users-summary__item strong, :root[data-theme="dark"] .asm-users-panel__header h2, :root[data-theme="dark"] .asm-user-identity strong, :root[data-theme="dark"] .asm-user-permissions__heading strong, :root[data-theme="dark"] .asm-user-field label, :root[data-theme="dark"] .asm-users-empty h3 { color: var(--asm-text); } :root[data-theme="dark"] .asm-users-panel__header p, :root[data-theme="dark"] .asm-users-summary__item small, :root[data-theme="dark"] .asm-user-identity a, :root[data-theme="dark"] .asm-user-identity small, :root[data-theme="dark"] .asm-user-permissions__heading small, :root[data-theme="dark"] .asm-users-empty p { color: var(--asm-muted); } :root[data-theme="dark"] .asm-users-search input, :root[data-theme="dark"] .asm-user-field .form-control, :root[data-theme="dark"] .asm-user-status-toggle span, :root[data-theme="dark"] .asm-user-permission span { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-users-empty > span { color: var(--asm-muted); background: var(--asm-surface-soft); } /* Modo oscuro del modal "Agregar usuario". */ :root[data-theme="dark"] .asm-add-user-modal { background: var(--asm-surface); } :root[data-theme="dark"] .asm-add-user-modal .modal-header, :root[data-theme="dark"] .asm-add-user-modal .modal-footer { border-color: var(--asm-border); } :root[data-theme="dark"] .asm-add-user-modal .modal-title { color: var(--asm-text); } :root[data-theme="dark"] .asm-add-user-modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } :root[data-theme="dark"] .asm-add-user-intro { color: var(--asm-muted); } :root[data-theme="dark"] .asm-users-button-secondary { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } /* ========================================================= PÁGINA: REPORTES ========================================================= */ .asm-reports-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-reports-heading { padding: 2.3rem 0 4.5rem; color: #fff; background: radial-gradient( circle at 85% 20%, rgba(45, 212, 191, .15), transparent 30% ), linear-gradient( 135deg, #071727, #123b57 ); } .asm-reports-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-reports-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: #99f6e4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-reports-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-reports-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-reports-heading__button, .asm-reports-button-primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border-radius: .8rem; font-weight: 750; } .asm-reports-heading__button { border: 1px solid rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .08); } .asm-reports-heading__button:hover { color: #fff; background: rgba(255, 255, 255, .14); } .asm-reports-button-primary { border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-reports-button-primary:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } /* Barra compacta con la acción "Imprimir" (reemplaza al banner). */ .asm-reports-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .asm-report-field .form-control:focus, .asm-report-field .form-select:focus { border-color: var(--asm-accent); box-shadow: 0 0 0 4px rgba(230, 57, 70, .12); } .asm-reports-content { position: relative; z-index: 2; /* Sin banner de cabecera: margen normal bajo la barra de secciones. */ margin-top: 1.75rem; padding-bottom: 5rem; } .asm-reports-filter-panel, .asm-reports-results-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-reports-filter-panel { margin-bottom: 1rem; } .asm-reports-filter-panel__header, .asm-reports-results-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-reports-filter-panel__header > div, .asm-reports-results-panel__header > div { display: flex; align-items: center; gap: .8rem; } .asm-reports-filter-panel__icon, .asm-reports-results-panel__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-reports-filter-panel__header h2, .asm-reports-results-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-reports-filter-panel__header p, .asm-reports-results-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-reports-filter-panel__body, .asm-reports-results-panel__body { padding: 1.3rem; } .asm-report-field label { display: block; margin-bottom: .42rem; color: #344054; font-size: .72rem; font-weight: 750; } .asm-report-field .form-control, .asm-report-field .form-select { min-height: 46px; border-color: #d0d5dd; border-radius: .78rem; box-shadow: none; } .asm-report-input-wrap { position: relative; } .asm-report-input-wrap i { position: absolute; z-index: 2; top: 50%; left: .9rem; color: #98a2b3; transform: translateY(-50%); } .asm-report-input-wrap .form-control { padding-left: 2.55rem; } .asm-report-placeholder, .asm-report-error, .asm-report-loading, .asm-report-empty { padding: 4rem 1.5rem; text-align: center; } .asm-report-placeholder > span, .asm-report-empty > span { display: grid; width: 72px; height: 72px; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; color: #667085; background: #f2f4f7; font-size: 1.6rem; } .asm-report-placeholder h3, .asm-report-error h3, .asm-report-empty h3 { margin-bottom: .4rem; color: #101828; font-size: 1.1rem; font-weight: 800; } .asm-report-placeholder p, .asm-report-error p, .asm-report-empty p { margin: 0; color: #667085; } .asm-report-error > i { margin-bottom: .8rem; color: #d92d20; font-size: 2rem; } .asm-report-loading { display: flex; align-items: center; justify-content: center; gap: .7rem; color: #667085; } .asm-report-result__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; } .asm-report-result__summary article { display: flex; align-items: center; gap: .75rem; padding: .9rem; border: 1px solid #e4e7ec; border-radius: .9rem; background: #f9fafb; } .asm-report-result__summary article > span { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: .75rem; color: #475467; background: #f2f4f7; } /* Iconos del resumen del reporte unificados en navy (sin arcoíris). */ .asm-report-result__summary article > span.is-blue, .asm-report-result__summary article > span.is-orange, .asm-report-result__summary article > span.is-green { color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-report-result__summary small { display: block; margin-bottom: .12rem; color: #667085; font-size: .67rem; } .asm-report-result__summary strong { display: block; color: #101828; font-size: 1rem; } .asm-report-period { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--asm-border); border-radius: .85rem; background: var(--asm-surface-soft); } .asm-report-period span { display: block; color: #475467; font-size: .65rem; font-weight: 700; text-transform: uppercase; } .asm-report-period strong { display: block; margin-top: .15rem; color: var(--asm-primary); font-size: .8rem; } .asm-report-period small { color: #667085; font-size: .68rem; } .asm-report-table-wrap { overflow-x: auto; border: 1px solid #e4e7ec; border-radius: .9rem; } .asm-report-table { width: 100%; min-width: 1100px; border-collapse: collapse; } .asm-report-table th { padding: .75rem .85rem; border-bottom: 1px solid #eaecf0; color: #667085; background: #f9fafb; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; } .asm-report-table td { padding: .85rem; border-bottom: 1px solid #f0f2f5; color: #344054; font-size: .72rem; vertical-align: middle; } .asm-report-table tbody tr:hover { background: #fcfcfd; } .asm-report-table tfoot td { border-top: 2px solid #d0d5dd; border-bottom: 0; color: #101828; background: #f9fafb; font-weight: 800; } .asm-report-user { color: #101828; } .asm-report-id { display: inline-grid; min-width: 34px; height: 30px; place-items: center; padding: 0 .4rem; border-radius: .6rem; color: #475467; background: #f2f4f7; font-weight: 750; } .asm-report-date { color: #667085; white-space: nowrap; } .asm-report-provider { display: flex; align-items: center; gap: .5rem; } .asm-report-provider > span { display: grid; width: 40px; height: 32px; place-items: center; overflow: hidden; border: 1px solid #e4e7ec; border-radius: .6rem; background: #fff; } .asm-report-provider img { max-width: 34px; max-height: 26px; object-fit: contain; } .asm-report-provider small { color: #667085; font-size: .66rem; } .asm-report-locator { color: #101828; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .asm-report-passenger { display: block; max-width: 190px; overflow: hidden; color: #475467; text-overflow: ellipsis; white-space: nowrap; } .asm-report-status { display: inline-flex; padding: .38rem .58rem; border-radius: 999px; font-size: .62rem; font-weight: 750; white-space: nowrap; } .asm-report-status.is-pending, .asm-report-status.is-neutral { color: #475467; background: #f2f4f7; } .asm-report-status.is-warning { color: #b54708; background: #fffaeb; } .asm-report-status.is-success { color: #067647; background: #ecfdf3; } .asm-report-status.is-danger { color: #b42318; background: #fef3f2; } .asm-report-total { color: #067647; } @media (max-width: 991.98px) { .asm-reports-heading__content { align-items: flex-start; flex-direction: column; } .asm-report-result__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .asm-reports-content { margin-top: 1.25rem; } .asm-report-result__summary { grid-template-columns: 1fr; } .asm-report-period { align-items: flex-start; flex-direction: column; } } /* Modo oscuro de la vista de reportes: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-reports-page { background: #0a1120; } :root[data-theme="dark"] .asm-reports-filter-panel, :root[data-theme="dark"] .asm-reports-results-panel { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-reports-filter-panel__header, :root[data-theme="dark"] .asm-reports-results-panel__header, :root[data-theme="dark"] .asm-report-result__summary article { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-reports-filter-panel__header h2, :root[data-theme="dark"] .asm-reports-results-panel__header h2, :root[data-theme="dark"] .asm-report-field label, :root[data-theme="dark"] .asm-report-result__summary strong, :root[data-theme="dark"] .asm-report-placeholder h3, :root[data-theme="dark"] .asm-report-empty h3, :root[data-theme="dark"] .asm-report-error h3 { color: var(--asm-text); } :root[data-theme="dark"] .asm-reports-filter-panel__header p, :root[data-theme="dark"] .asm-reports-results-panel__header p, :root[data-theme="dark"] .asm-report-result__summary small, :root[data-theme="dark"] .asm-report-placeholder p, :root[data-theme="dark"] .asm-report-empty p, :root[data-theme="dark"] .asm-report-error p, :root[data-theme="dark"] .asm-report-loading { color: var(--asm-muted); } :root[data-theme="dark"] .asm-report-field .form-control, :root[data-theme="dark"] .asm-report-field .form-select { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-report-period { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-report-table-wrap { border-color: var(--asm-border); } :root[data-theme="dark"] .asm-report-table th { color: var(--asm-muted); border-bottom-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-report-table td { color: var(--asm-muted); border-bottom-color: var(--asm-border); } :root[data-theme="dark"] .asm-report-placeholder > span, :root[data-theme="dark"] .asm-report-empty > span { color: var(--asm-muted); background: var(--asm-surface-soft); } @media print { .asm-main-header, .asm-section-menu, .asm-reports-heading, .asm-reports-toolbar, .asm-reports-filter-panel, footer { display: none !important; } .asm-reports-content { margin: 0; padding: 0; } .asm-reports-results-panel { border: 0; box-shadow: none; } .asm-reports-results-panel__header { padding: 0 0 1rem; background: #fff; } .asm-reports-results-panel__body { padding: 0; } .asm-report-table-wrap { overflow: visible; } .asm-report-table { min-width: 0; font-size: 9px; } } /* ========================================================= DIÁLOGO DE CONFIRMACIÓN (SweetAlert2, estilo del diseño) Reemplaza al confirm() nativo. Clases reutilizables; los tokens --asm-* lo tematizan en claro/oscuro sin bloque extra. ========================================================= */ .asm-confirm-popup { width: auto !important; max-width: 400px !important; padding: 1.9rem 1.6rem 1.5rem !important; border-radius: 1.25rem !important; background: var(--asm-surface) !important; box-shadow: 0 24px 70px rgba(16, 24, 40, .25) !important; } .asm-confirm-popup .swal2-html-container { margin: 0 !important; } .asm-confirm { text-align: center; } .asm-confirm__icon { display: inline-grid; width: 58px; height: 58px; margin-bottom: 1rem; place-items: center; border-radius: 1rem; color: var(--asm-accent); background: rgba(230, 57, 70, .1); font-size: 1.45rem; } .asm-confirm h2 { margin: 0 0 .45rem; color: var(--asm-text); font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; } .asm-confirm p { margin: 0; color: var(--asm-muted); font-size: .85rem; line-height: 1.6; } .asm-confirm-popup .swal2-actions { gap: .6rem; margin-top: 1.5rem; } .asm-confirm__btn { min-height: 44px; padding: .6rem 1.15rem; border-radius: .78rem; font-size: .85rem; font-weight: 750; transition: background .15s ease, border-color .15s ease; } .asm-confirm__btn--danger { border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-confirm__btn--danger:hover { border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } .asm-confirm__btn--ghost { border: 1px solid var(--asm-border); color: var(--asm-text); background: var(--asm-surface); } .asm-confirm__btn--ghost:hover { background: var(--asm-surface-soft); } /* ========================================================= PÁGINA: SOLICITUD DE GDS ========================================================= */ .asm-gds-request-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-gds-request-heading { padding: 2.3rem 0 4.5rem; color: #fff; background: radial-gradient( circle at 85% 20%, rgba(45, 212, 191, .15), transparent 30% ), linear-gradient( 135deg, #071727, #123b57 ); } .asm-gds-request-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-gds-request-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: #99f6e4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-gds-request-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-gds-request-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-gds-request-heading__badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .55rem; padding: .7rem .9rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .07); font-size: .72rem; font-weight: 700; } .asm-gds-request-content { position: relative; z-index: 2; /* Sin banner de cabecera: margen normal bajo la barra de secciones. */ margin-top: 1.75rem; padding-bottom: 5rem; } /* Nota reubicada del banner ("Solicitud sujeta a validación"). */ .asm-gds-request-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .asm-gds-request-note { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border: 1px solid var(--asm-border); border-radius: 999px; color: var(--asm-muted); background: var(--asm-surface); font-size: .72rem; font-weight: 700; } .asm-gds-request-note i { color: var(--asm-accent); } .asm-gds-request-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; } .asm-gds-request-step { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; color: #667085; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .05); } .asm-gds-request-step > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: .75rem; color: #667085; background: #f2f4f7; font-size: .75rem; font-weight: 800; } .asm-gds-request-step strong { display: block; color: #344054; font-size: .76rem; } .asm-gds-request-step small { display: block; margin-top: .12rem; color: #98a2b3; font-size: .65rem; } .asm-gds-request-step.is-active { border-color: var(--asm-accent); background: rgba(230, 57, 70, .06); } .asm-gds-request-step.is-active > span { color: #fff; background: var(--asm-accent); } .asm-gds-request-step.is-complete > span { color: #067647; background: #ecfdf3; } .asm-gds-request-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-gds-request-panel__header { display: flex; align-items: flex-start; gap: .85rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-gds-request-panel__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-gds-request-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-gds-request-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-gds-request-panel__body { padding: 1.3rem; } .asm-gds-terms-intro { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--asm-border); border-radius: .9rem; color: #475467; background: var(--asm-surface-soft); } .asm-gds-terms-intro i { margin-top: .18rem; color: var(--asm-primary); } .asm-gds-terms-intro p { margin: 0; font-size: .8rem; line-height: 1.7; } .asm-gds-terms-list { display: grid; gap: .75rem; } .asm-gds-terms-list article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .85rem; padding: .95rem; border: 1px solid #eaecf0; border-radius: .9rem; background: #fcfcfd; } .asm-gds-terms-list article > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: .7rem; color: var(--asm-primary); background: var(--asm-surface-soft); font-size: .7rem; font-weight: 800; } .asm-gds-terms-list h3 { margin: 0 0 .25rem; color: #101828; font-size: .82rem; font-weight: 800; } .asm-gds-terms-list p { margin: 0; color: #667085; font-size: .75rem; line-height: 1.65; } .asm-gds-request-panel__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-top: 1px solid #eaecf0; background: #fcfcfd; } .asm-gds-acceptance { display: flex; align-items: center; gap: .6rem; margin: 0; color: #344054; font-size: .74rem; font-weight: 700; cursor: pointer; } .asm-gds-acceptance input { width: 18px; height: 18px; } .asm-gds-request-button-primary, .asm-gds-request-button-secondary { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; border-radius: .75rem; font-weight: 750; } .asm-gds-request-button-primary { border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-gds-request-button-primary:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } .asm-gds-request-button-primary:disabled { border-color: #d0d5dd; color: #98a2b3; background: #f2f4f7; cursor: not-allowed; } .asm-gds-request-button-secondary { border: 1px solid #d0d5dd; color: #344054; background: #fff; } .asm-gds-request-section-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .asm-gds-request-section-heading > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: .8rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-gds-request-section-heading h3 { margin: 0; color: #101828; font-size: .92rem; font-weight: 800; } .asm-gds-request-section-heading p { margin: .15rem 0 0; color: #667085; font-size: .7rem; } .asm-gds-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .asm-gds-system-option { position: relative; margin: 0; cursor: pointer; } .asm-gds-system-option input { position: absolute; opacity: 0; } .asm-gds-system-option > span { display: flex; min-height: 86px; align-items: center; gap: .75rem; padding: .9rem; border: 1px solid #d0d5dd; border-radius: .9rem; color: #475467; background: #fff; transition: 150ms ease; } .asm-gds-system-option > span > i { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: .75rem; color: #667085; background: #f2f4f7; } /* * Tile de logo del sistema (Amadeus, Sabre, KIU, Copa…). Fondo blanco fijo — * también en oscuro— para que los logos de marca se lean bien, como las * cajas de proveedor de Mis reservas. TK Connect no tiene logo: va el icono. */ .asm-gds-system-logo { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid var(--asm-border); border-radius: .7rem; background: #fff; } .asm-gds-system-logo img { max-width: 30px; max-height: 26px; object-fit: contain; } .asm-gds-system-logo i { color: var(--asm-primary); font-size: .95rem; } .asm-gds-system-option strong { display: block; color: #344054; font-size: .77rem; } .asm-gds-system-option small { display: block; margin-top: .15rem; color: #98a2b3; font-size: .62rem; line-height: 1.35; } .asm-gds-system-option input:checked + span { border-color: var(--asm-accent); color: var(--asm-accent); background: rgba(230, 57, 70, .06); box-shadow: 0 0 0 3px rgba(230, 57, 70, .08); } .asm-gds-system-option input:checked + span > i { color: #fff; background: var(--asm-accent); } .asm-gds-request-field label { display: block; margin-bottom: .42rem; color: #344054; font-size: .72rem; font-weight: 750; } .asm-gds-request-field label span { color: #d92d20; } .asm-gds-request-field .form-control { min-height: 46px; border-color: #d0d5dd; border-radius: .78rem; box-shadow: none; } .asm-gds-request-field textarea.form-control { min-height: 120px; } .asm-gds-request-field .form-control:focus { border-color: var(--asm-accent); box-shadow: 0 0 0 4px rgba(230, 57, 70, .12); } .asm-gds-request-field small { display: block; margin-top: .35rem; color: #98a2b3; font-size: .65rem; } .asm-gds-request-success { max-width: 760px; margin: 0 auto; padding: 4rem 2rem; border: 1px solid #abefc6; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); text-align: center; } .asm-gds-request-success__icon { display: grid; width: 82px; height: 82px; margin: 0 auto 1.2rem; place-items: center; border-radius: 1.2rem; color: #067647; background: #ecfdf3; font-size: 2rem; } .asm-gds-request-success__eyebrow { display: block; margin-bottom: .5rem; color: #067647; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-gds-request-success h2 { margin-bottom: .6rem; color: #101828; font-size: 1.6rem; font-weight: 800; } .asm-gds-request-success p { max-width: 560px; margin: 0 auto 1.4rem; color: #667085; line-height: 1.7; } @media (max-width: 991.98px) { .asm-gds-request-heading__content { align-items: flex-start; flex-direction: column; } .asm-gds-request-steps, .asm-gds-system-grid { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .asm-gds-request-content { margin-top: 1.25rem; } .asm-gds-request-panel__footer { align-items: stretch; flex-direction: column; } .asm-gds-request-button-primary, .asm-gds-request-button-secondary { width: 100%; } } /* Modo oscuro de la vista de Solicitud de GDS: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-gds-request-page { background: #0a1120; } :root[data-theme="dark"] .asm-gds-request-step, :root[data-theme="dark"] .asm-gds-request-panel, :root[data-theme="dark"] .asm-gds-request-success { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-gds-request-panel__header, :root[data-theme="dark"] .asm-gds-terms-list article, :root[data-theme="dark"] .asm-gds-request-panel__footer { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-gds-request-step strong, :root[data-theme="dark"] .asm-gds-request-panel__header h2, :root[data-theme="dark"] .asm-gds-terms-list h3, :root[data-theme="dark"] .asm-gds-request-section-heading h3, :root[data-theme="dark"] .asm-gds-system-option strong, :root[data-theme="dark"] .asm-gds-request-field label, :root[data-theme="dark"] .asm-gds-request-success h2 { color: var(--asm-text); } :root[data-theme="dark"] .asm-gds-request-step small, :root[data-theme="dark"] .asm-gds-request-panel__header p, :root[data-theme="dark"] .asm-gds-terms-list p, :root[data-theme="dark"] .asm-gds-request-section-heading p, :root[data-theme="dark"] .asm-gds-system-option small, :root[data-theme="dark"] .asm-gds-request-field small, :root[data-theme="dark"] .asm-gds-request-success p, :root[data-theme="dark"] .asm-gds-terms-intro { color: var(--asm-muted); } :root[data-theme="dark"] .asm-gds-system-option > span, :root[data-theme="dark"] .asm-gds-request-field .form-control { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-gds-system-option > span > i { color: var(--asm-muted); background: var(--asm-surface); } /* ========================================================= PÁGINA: WALLET ========================================================= */ .asm-wallet-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-wallet-heading { padding: 2.3rem 0 4.5rem; color: #fff; background: radial-gradient( circle at 85% 20%, rgba(45, 212, 191, .15), transparent 30% ), linear-gradient( 135deg, #071727, #123b57 ); } .asm-wallet-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-wallet-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: #99f6e4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-wallet-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-wallet-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-wallet-heading__button, .asm-wallet-button-primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border-radius: .8rem; font-weight: 750; } .asm-wallet-heading__button { border: 1px solid rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .08); } .asm-wallet-heading__button:hover { color: #fff; background: rgba(255, 255, 255, .14); } .asm-wallet-button-primary { border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-wallet-button-primary:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } .asm-wallet-content { position: relative; z-index: 2; /* Sin banner de cabecera: margen normal bajo la barra de secciones. */ margin-top: 1.75rem; padding-bottom: 5rem; } /* Barra compacta con "Abrir wallet completo" (reemplaza al banner). */ .asm-wallet-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .asm-wallet-overview { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); gap: 1rem; margin-bottom: 1rem; } .asm-wallet-balance-card { position: relative; overflow: hidden; padding: 1.4rem; border-radius: 1.2rem; color: #fff; background: linear-gradient(145deg, #041c3b, #0b2740); box-shadow: 0 18px 45px rgba(16, 24, 40, .14); } .asm-wallet-balance-card::after { position: absolute; right: -70px; bottom: -100px; width: 220px; height: 220px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; content: ""; box-shadow: 0 0 0 32px rgba(255, 255, 255, .02), 0 0 0 64px rgba(255, 255, 255, .015); } .asm-wallet-balance-card__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .asm-wallet-balance-card__top span, .asm-wallet-balance-card__account span { display: block; color: rgba(255, 255, 255, .62); font-size: .7rem; font-weight: 700; } .asm-wallet-balance-card__top strong { display: block; margin-top: .3rem; color: #fff; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.04em; } .asm-wallet-balance-card__icon { display: grid !important; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: .85rem; color: #fff !important; background: rgba(255, 255, 255, .08); font-size: 1.1rem !important; } .asm-wallet-balance-card__account { position: relative; z-index: 1; margin-top: 1.8rem; } .asm-wallet-balance-card__account strong { display: block; margin-top: .2rem; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; letter-spacing: .12em; } .asm-wallet-balance-card__footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; color: rgba(255, 255, 255, .66); font-size: .72rem; } .asm-wallet-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .asm-wallet-metrics article { display: flex; min-height: 100%; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .06); } .asm-wallet-metric-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: #475467; background: #f2f4f7; } /* Iconos de métricas unificados en navy (sin arcoíris naranja/rojo/azul). */ .asm-wallet-metric-icon.is-orange, .asm-wallet-metric-icon.is-red, .asm-wallet-metric-icon.is-blue { color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-wallet-metrics small { display: block; margin-bottom: .15rem; color: #667085; font-size: .68rem; font-weight: 700; } .asm-wallet-metrics strong { display: block; color: #101828; font-size: 1rem; } .asm-wallet-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-wallet-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-wallet-panel__header > div { display: flex; align-items: center; gap: .8rem; } .asm-wallet-panel__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-wallet-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-wallet-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-wallet-panel__link { display: inline-flex; align-items: center; gap: .45rem; color: var(--asm-accent); font-size: .72rem; font-weight: 750; text-decoration: none; } .asm-wallet-transactions { display: grid; } .asm-wallet-transaction { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-bottom: 1px solid #eef1f4; } .asm-wallet-transaction:last-child { border-bottom: 0; } .asm-wallet-transaction:hover { background: #fcfcfd; } .asm-wallet-transaction__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .8rem; } .asm-wallet-transaction__icon.is-credit { color: #067647; background: #ecfdf3; } .asm-wallet-transaction__icon.is-debit { color: #b42318; background: #fef3f2; } .asm-wallet-transaction__main { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .asm-wallet-transaction__main strong { display: block; color: #101828; font-size: .78rem; } .asm-wallet-transaction__main small { display: block; margin-top: .15rem; color: #98a2b3; font-size: .65rem; } .asm-wallet-transaction__status { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .55rem; border-radius: 999px; font-size: .62rem; font-weight: 750; white-space: nowrap; } .asm-wallet-transaction__status.is-warning { color: #b54708; background: #fffaeb; } .asm-wallet-transaction__status.is-success { color: #067647; background: #ecfdf3; } .asm-wallet-transaction__status.is-danger { color: #b42318; background: #fef3f2; } .asm-wallet-transaction__status.is-neutral { color: #475467; background: #f2f4f7; } .asm-wallet-transaction__date small { display: block; color: #98a2b3; font-size: .62rem; } .asm-wallet-transaction__date strong { display: block; margin-top: .15rem; color: #475467; font-size: .7rem; white-space: nowrap; } .asm-wallet-transaction__amount { font-size: .82rem; font-weight: 800; white-space: nowrap; } .asm-wallet-transaction__amount.is-credit { color: #067647; } .asm-wallet-transaction__amount.is-debit { color: #b42318; } .asm-wallet-empty { padding: 4rem 1.5rem; text-align: center; } .asm-wallet-empty > span { display: grid; width: 72px; height: 72px; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; color: #667085; background: #f2f4f7; font-size: 1.6rem; } .asm-wallet-empty h3 { margin-bottom: .4rem; color: #101828; font-size: 1.1rem; font-weight: 800; } .asm-wallet-empty p { margin: 0; color: #667085; } .asm-wallet-registration { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-wallet-registration__visual { /* * Sin min-height fijo: la tarjeta navy iguala la altura REAL de la columna * del formulario (grid stretch), en vez de forzar 520px y dejar el * contenido flotando con huecos arriba/abajo. El contenido se centra y el * panel llena la tarjeta a la par del formulario. */ display: flex; height: 100%; flex-direction: column; justify-content: center; padding: 3rem 2.5rem; color: #fff; background: linear-gradient(145deg, #041c3b, #0b2740); } .asm-wallet-registration__visual > span { display: grid; width: 90px; height: 90px; margin-bottom: 1.4rem; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.2rem; color: #fff; background: rgba(255, 255, 255, .08); font-size: 2rem; } .asm-wallet-registration__visual h2 { margin-bottom: .6rem; color: #fff; font-size: 1.8rem; font-weight: 800; } .asm-wallet-registration__visual > p { margin-bottom: 1.5rem; color: rgba(255, 255, 255, .68); line-height: 1.7; } .asm-wallet-registration__benefits { display: grid; gap: .7rem; } .asm-wallet-registration__benefits div { display: flex; align-items: center; gap: .6rem; color: rgba(255, 255, 255, .78); font-size: .74rem; } .asm-wallet-registration__benefits i { color: #12b76a; } .asm-wallet-registration__form { padding: 2.5rem; } .asm-wallet-registration__eyebrow { display: block; margin-bottom: .45rem; color: var(--asm-accent); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-wallet-registration__form > h2 { margin-bottom: .55rem; color: #101828; font-size: 1.6rem; font-weight: 800; } .asm-wallet-registration__form > p { margin-bottom: 1.3rem; color: #667085; line-height: 1.7; } .asm-wallet-agency { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; padding: .9rem; border: 1px solid #e4e7ec; border-radius: .9rem; background: #f9fafb; } .asm-wallet-agency__logo { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid #e4e7ec; border-radius: .75rem; background: #fff; } .asm-wallet-agency__logo img { width: 100%; height: 100%; padding: .35rem; object-fit: contain; } .asm-wallet-agency small { display: block; color: #98a2b3; font-size: .62rem; font-weight: 700; text-transform: uppercase; } .asm-wallet-agency strong { display: block; margin-top: .15rem; color: #101828; font-size: .78rem; } .asm-wallet-field label { display: block; margin-bottom: .42rem; color: #344054; font-size: .72rem; font-weight: 750; } .asm-wallet-field .form-control { min-height: 46px; border-color: #d0d5dd; border-radius: .78rem; box-shadow: none; } .asm-wallet-field .form-control:focus { border-color: var(--asm-accent); box-shadow: 0 0 0 4px rgba(230, 57, 70, .12); } .asm-wallet-input-wrap, .asm-wallet-password-field { position: relative; } .asm-wallet-input-wrap > i { position: absolute; z-index: 2; top: 50%; left: .9rem; color: #98a2b3; transform: translateY(-50%); } .asm-wallet-input-wrap .form-control { padding-left: 2.55rem; } .asm-wallet-password-field .form-control { padding-right: 3rem; } .asm-wallet-password-field button { position: absolute; top: 50%; right: .55rem; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: .65rem; color: #667085; background: transparent; transform: translateY(-50%); } .asm-wallet-pin { font-size: 1.15rem; letter-spacing: .25em; } .asm-wallet-security-notice { display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1rem; border: 1px solid var(--asm-border); border-radius: .85rem; color: #475467; background: var(--asm-surface-soft); font-size: .72rem; line-height: 1.55; } .asm-wallet-security-notice i { margin-top: .15rem; color: var(--asm-primary); } @media (max-width: 1199.98px) { .asm-wallet-overview { grid-template-columns: 1fr; } } @media (max-width: 991.98px) { .asm-wallet-heading__content { align-items: flex-start; flex-direction: column; } .asm-wallet-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .asm-wallet-registration { grid-template-columns: 1fr; } .asm-wallet-registration__visual { min-height: 320px; } } @media (max-width: 767.98px) { .asm-wallet-metrics { grid-template-columns: 1fr; } .asm-wallet-transaction { grid-template-columns: 42px minmax(0, 1fr) auto; } .asm-wallet-transaction__main { align-items: flex-start; flex-direction: column; } .asm-wallet-transaction__date { grid-column: 2; } .asm-wallet-transaction__amount { grid-column: 3; grid-row: 1 / span 2; } } @media (max-width: 575.98px) { .asm-wallet-content { margin-top: 1.25rem; } .asm-wallet-registration__visual, .asm-wallet-registration__form { padding: 1.5rem; } .asm-wallet-transaction { grid-template-columns: 42px minmax(0, 1fr); } .asm-wallet-transaction__date, .asm-wallet-transaction__amount { grid-column: 2; grid-row: auto; } } /* Modo oscuro de la vista de wallet: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-wallet-page { background: #0a1120; } :root[data-theme="dark"] .asm-wallet-metrics article, :root[data-theme="dark"] .asm-wallet-panel, :root[data-theme="dark"] .asm-wallet-registration { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-wallet-panel__header, :root[data-theme="dark"] .asm-wallet-transaction { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-wallet-panel__header { background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-wallet-metrics strong, :root[data-theme="dark"] .asm-wallet-panel__header h2, :root[data-theme="dark"] .asm-wallet-transaction__main strong, :root[data-theme="dark"] .asm-wallet-registration__form > h2, :root[data-theme="dark"] .asm-wallet-field label, :root[data-theme="dark"] .asm-wallet-empty h3 { color: var(--asm-text); } :root[data-theme="dark"] .asm-wallet-metrics small, :root[data-theme="dark"] .asm-wallet-panel__header p, :root[data-theme="dark"] .asm-wallet-transaction__main small, :root[data-theme="dark"] .asm-wallet-registration__form > p, :root[data-theme="dark"] .asm-wallet-empty p { color: var(--asm-muted); } :root[data-theme="dark"] .asm-wallet-field .form-control { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-wallet-transaction:hover { background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-wallet-empty > span { color: var(--asm-muted); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-wallet-agency { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-wallet-agency__logo { border-color: var(--asm-border); } :root[data-theme="dark"] .asm-wallet-agency strong { color: var(--asm-text); } :root[data-theme="dark"] .asm-wallet-security-notice { color: var(--asm-muted); } :root[data-theme="dark"] .asm-wallet-password-field button { color: var(--asm-muted); } /* ========================================================= PÁGINA: CALCULADORA ========================================================= */ .asm-calculator-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-calculator-heading { padding: 2.3rem 0 4.5rem; color: #fff; background: radial-gradient( circle at 85% 20%, rgba(45, 212, 191, .15), transparent 30% ), linear-gradient( 135deg, #071727, #123b57 ); } .asm-calculator-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-calculator-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: #99f6e4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-calculator-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-calculator-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-calculator-heading__button, .asm-calculator-button-primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border-radius: .8rem; font-weight: 750; } .asm-calculator-heading__button { border: 1px solid rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .08); } .asm-calculator-heading__button:hover { color: #fff; background: rgba(255, 255, 255, .14); } .asm-calculator-button-primary { margin-top: 1.2rem; border: 1px solid var(--asm-accent); color: #fff; background: var(--asm-accent); } .asm-calculator-button-primary:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } /* Barra compacta con la acción "Limpiar" (reemplaza al banner). */ .asm-calculator-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } /* "Limpiar" es acción secundaria: botón contorno navy. El rojo se reserva para "Calcular". Se tematiza en oscuro por tokens --asm-*. */ .asm-calculator-button-ghost { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border: 1px solid var(--asm-border); border-radius: .8rem; color: var(--asm-primary); background: var(--asm-surface); font-weight: 750; } .asm-calculator-button-ghost:hover { color: var(--asm-primary); border-color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-calculator-content { position: relative; z-index: 2; /* Sin banner de cabecera: margen normal bajo la barra de secciones. */ margin-top: 1.75rem; padding-bottom: 5rem; } .asm-calculator-panel { overflow: hidden; margin-bottom: 1rem; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-calculator-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-calculator-panel__header > div { display: flex; align-items: center; gap: .8rem; } .asm-calculator-panel__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-calculator-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-calculator-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-calculator-panel__body { padding: 1.3rem; } .asm-calculator-base-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, .8fr); gap: 1rem; align-items: start; } .asm-calculator-field label { display: block; margin-bottom: .42rem; color: #344054; font-size: .72rem; font-weight: 750; } .asm-calculator-field small { display: block; margin-top: .35rem; color: #98a2b3; font-size: .64rem; } .asm-calculator-field .form-control, .asm-calculator-field .form-select { min-height: 46px; border-color: #d0d5dd; border-radius: .78rem; box-shadow: none; } .asm-calculator-field .form-control:focus, .asm-calculator-field .form-select:focus { border-color: var(--asm-accent); box-shadow: 0 0 0 4px rgba(230, 57, 70, .12); } .asm-calculator-input-wrap { position: relative; } .asm-calculator-input-wrap > span { position: absolute; top: 50%; left: .9rem; color: #667085; font-weight: 750; transform: translateY(-50%); } .asm-calculator-input-wrap .form-control { padding-left: 2rem; } .asm-calculator-total-card { min-height: 100%; padding: 1rem; border-radius: 1rem; color: #fff; background: linear-gradient( 135deg, #041c3b, #0b2740 ); } .asm-calculator-total-card span { display: block; color: rgba(255, 255, 255, .64); font-size: .68rem; font-weight: 700; } .asm-calculator-total-card strong { display: block; margin-top: .35rem; color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em; } .asm-payment-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .asm-payment-method-card { padding: 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #f9fafb; } .asm-payment-method-card__header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .asm-payment-method-card__icon, .asm-payment-method-card__icon.is-green, .asm-payment-method-card__icon.is-yellow, .asm-payment-method-card__icon.is-blue, .asm-payment-method-card__icon.is-purple { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: .8rem; /* Sin arcoíris: icono navy uniforme por método (como en Orden). */ color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-payment-method-card__header h3, .asm-transfer-calculator__heading h3 { margin: 0; color: #101828; font-size: .85rem; font-weight: 800; } .asm-payment-method-card__header small { display: block; margin-top: .15rem; color: #98a2b3; font-size: .64rem; } .asm-payment-method-card__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .asm-payment-method-card__values > div { padding: .75rem; border: 1px solid #e4e7ec; border-radius: .8rem; background: #fff; } .asm-payment-method-card__values span, .asm-transfer-result span { display: block; color: #98a2b3; font-size: .62rem; font-weight: 700; text-transform: uppercase; } .asm-payment-method-card__values strong, .asm-transfer-result strong { display: block; margin-top: .2rem; color: #101828; font-size: .88rem; } .asm-transfer-calculator { margin-top: 1rem; padding: 1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fcfcfd; } .asm-transfer-calculator__heading { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .asm-transfer-calculator__heading p { margin: .15rem 0 0; color: #667085; font-size: .68rem; } .asm-transfer-result { min-height: 46px; padding: .65rem .75rem; border: 1px solid #e4e7ec; border-radius: .78rem; background: #fff; } .asm-calculator-icon-button { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--asm-accent); border-radius: .78rem; color: #fff; background: var(--asm-accent); } .asm-calculator-icon-button:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } @media (max-width: 1199.98px) { .asm-calculator-base-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asm-calculator-total-card { grid-column: span 2; } } @media (max-width: 991.98px) { .asm-calculator-heading__content { align-items: flex-start; flex-direction: column; } .asm-payment-method-grid { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .asm-calculator-content { margin-top: 1.25rem; } .asm-calculator-base-grid { grid-template-columns: 1fr; } .asm-calculator-total-card { grid-column: auto; } .asm-payment-method-card__values { grid-template-columns: 1fr; } .asm-calculator-icon-button { width: 100%; } } /* Modo oscuro (tokens --asm-*; los iconos y el total-card ya se tematizan solos porque usan var(--asm-*) / navy fijo). */ :root[data-theme="dark"] .asm-calculator-page { background: #0a1120; } :root[data-theme="dark"] .asm-calculator-panel { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-calculator-panel__header { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-payment-method-card { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-payment-method-card__values > div, :root[data-theme="dark"] .asm-transfer-result { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-transfer-calculator { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-calculator-panel__header h2, :root[data-theme="dark"] .asm-calculator-field label, :root[data-theme="dark"] .asm-payment-method-card__header h3, :root[data-theme="dark"] .asm-transfer-calculator__heading h3, :root[data-theme="dark"] .asm-payment-method-card__values strong, :root[data-theme="dark"] .asm-transfer-result strong { color: var(--asm-text); } :root[data-theme="dark"] .asm-calculator-panel__header p, :root[data-theme="dark"] .asm-calculator-field small, :root[data-theme="dark"] .asm-payment-method-card__header small, :root[data-theme="dark"] .asm-transfer-calculator__heading p, :root[data-theme="dark"] .asm-payment-method-card__values span, :root[data-theme="dark"] .asm-transfer-result span, :root[data-theme="dark"] .asm-calculator-input-wrap > span { color: var(--asm-muted); } :root[data-theme="dark"] .asm-calculator-field .form-control, :root[data-theme="dark"] .asm-calculator-field .form-select { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } /* ========================================================= PÁGINA: TUTORIALES ========================================================= */ .asm-tutorials-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-tutorials-heading { /* * 130px arriba (igual que .asm-public-hero) para despejar el navbar * transparente asm-header--hero, que se superpone al hero. Antes eran 3rem * y el eyebrow se metía bajo el logo. */ padding: 130px 0 5rem; color: #fff; background: linear-gradient(135deg, #041c3b, #0b2740); } .asm-tutorials-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-tutorials-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: var(--asm-accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-tutorials-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-tutorials-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-tutorials-heading__metric { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 1rem; background: rgba(255, 255, 255, .07); } .asm-tutorials-heading__metric > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .8rem; color: #fff; background: rgba(255, 255, 255, .08); } .asm-tutorials-heading__metric small { display: block; color: rgba(255, 255, 255, .6); font-size: .65rem; } .asm-tutorials-heading__metric strong { display: block; margin-top: .12rem; color: #fff; font-size: 1.05rem; } .asm-tutorials-content { position: relative; z-index: 2; margin-top: -3rem; padding-bottom: 5rem; } .asm-tutorials-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-tutorials-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-tutorials-panel__header > div { display: flex; align-items: center; gap: .8rem; } .asm-tutorials-panel__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-tutorials-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-tutorials-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-tutorials-search { position: relative; } .asm-tutorials-search i { position: absolute; top: 50%; left: .85rem; color: #98a2b3; transform: translateY(-50%); } .asm-tutorials-search input { width: 260px; min-height: 42px; padding: .65rem .8rem .65rem 2.35rem; border: 1px solid #d0d5dd; border-radius: .75rem; color: #344054; background: #fff; font-size: .76rem; } .asm-tutorials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem; } .asm-tutorial-card { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(0, 1.15fr); overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .asm-tutorial-card:hover { transform: translateY(-2px); border-color: #d0d5dd; box-shadow: 0 14px 30px rgba(16, 24, 40, .08); } .asm-tutorial-card__media { position: relative; min-height: 210px; overflow: hidden; border: 0; background: #0b1d2d; } .asm-tutorial-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; } .asm-tutorial-card:hover .asm-tutorial-card__media img { transform: scale(1.03); } .asm-tutorial-card__fallback { position: absolute; inset: 0; display: none; place-items: center; color: rgba(255, 255, 255, .75); font-size: 2rem; } .asm-tutorial-card__media.is-fallback .asm-tutorial-card__fallback { display: grid; } .asm-tutorial-card__play { position: absolute; top: 50%; left: 50%; display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; color: #fff; background: rgba(7, 23, 39, .72); backdrop-filter: blur(8px); transform: translate(-50%, -50%); } .asm-tutorial-card__unavailable { position: absolute; right: .7rem; bottom: .7rem; padding: .4rem .6rem; border-radius: 999px; color: #fff; background: rgba(180, 35, 24, .9); font-size: .62rem; font-weight: 750; } .asm-tutorial-card__body { display: flex; flex-direction: column; padding: 1rem; } .asm-tutorial-card__eyebrow { display: block; margin-bottom: .4rem; color: var(--asm-accent); font-size: .63rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .asm-tutorial-card__body h3 { margin: 0 0 .45rem; color: #101828; font-size: 1rem; font-weight: 800; line-height: 1.35; } .asm-tutorial-card__body p { display: -webkit-box; margin: 0 0 1rem; overflow: hidden; color: #667085; font-size: .75rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .asm-tutorial-card__action { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin-top: auto; padding: 0; border: 0; color: var(--asm-accent); background: transparent; font-size: .72rem; font-weight: 750; } .asm-tutorial-card__action:disabled, .asm-tutorial-card__media:disabled { cursor: not-allowed; opacity: .75; } .asm-tutorials-empty { padding: 4rem 1.5rem; text-align: center; } .asm-tutorials-empty > span { display: grid; width: 72px; height: 72px; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; color: #667085; background: #f2f4f7; font-size: 1.6rem; } .asm-tutorials-empty h3 { margin-bottom: .4rem; color: #101828; font-size: 1.1rem; font-weight: 800; } .asm-tutorials-empty p { margin: 0; color: #667085; } .asm-tutorial-modal { overflow: hidden; border: 0; border-radius: 1.2rem; background: #071727; box-shadow: 0 28px 80px rgba(0, 0, 0, .4); } .asm-tutorial-modal .modal-header { border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; background: #071727; } .asm-tutorial-modal__eyebrow { display: block; color: var(--asm-accent); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-tutorial-modal .modal-title { margin-top: .2rem; color: #fff; font-size: 1rem; font-weight: 800; } .asm-tutorial-modal .modal-body { padding: 0; background: #000; } .asm-tutorial-modal iframe { border: 0; } /* Modo oscuro de la vista de tutoriales: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-tutorials-page { background: #0a1120; } :root[data-theme="dark"] .asm-tutorials-panel, :root[data-theme="dark"] .asm-tutorial-card { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-tutorial-card:hover { border-color: #33415c; } :root[data-theme="dark"] .asm-tutorials-panel__header { border-bottom-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-tutorials-panel__header h2, :root[data-theme="dark"] .asm-tutorial-card__body h3, :root[data-theme="dark"] .asm-tutorials-empty h3 { color: var(--asm-text); } :root[data-theme="dark"] .asm-tutorials-panel__header p, :root[data-theme="dark"] .asm-tutorial-card__body p, :root[data-theme="dark"] .asm-tutorials-empty p { color: var(--asm-muted); } :root[data-theme="dark"] .asm-tutorials-search input { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-tutorials-search input::placeholder { color: var(--asm-muted); } :root[data-theme="dark"] .asm-tutorials-empty > span { color: var(--asm-muted); background: var(--asm-surface-soft); } @media (max-width: 1199.98px) { .asm-tutorial-card { grid-template-columns: 1fr; } .asm-tutorial-card__media { min-height: 220px; } } @media (max-width: 991.98px) { .asm-tutorials-heading__content, .asm-tutorials-panel__header { align-items: flex-start; flex-direction: column; } .asm-tutorials-grid { grid-template-columns: 1fr; } .asm-tutorials-search, .asm-tutorials-search input { width: 100%; } } @media (max-width: 575.98px) { .asm-tutorials-content { margin-top: -2rem; } .asm-tutorials-grid { padding: .85rem; } } /* ========================================================= PÁGINA: COMUNICADOS ========================================================= */ .asm-announcements-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-announcements-heading { /* 130px arriba para despejar el navbar transparente asm-header--hero. */ padding: 130px 0 5rem; color: #fff; background: linear-gradient(135deg, #041c3b, #0b2740); } .asm-announcements-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-announcements-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: var(--asm-accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-announcements-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-announcements-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-announcements-heading__metric { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 1rem; background: rgba(255, 255, 255, .07); } .asm-announcements-heading__metric > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .8rem; color: #fff; background: rgba(255, 255, 255, .08); } .asm-announcements-heading__metric small { display: block; color: rgba(255, 255, 255, .6); font-size: .65rem; } .asm-announcements-heading__metric strong { display: block; margin-top: .12rem; color: #fff; font-size: 1.05rem; } .asm-announcements-content { position: relative; z-index: 2; margin-top: -3rem; padding-bottom: 5rem; } .asm-announcements-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-announcements-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-announcements-panel__header > div { display: flex; align-items: center; gap: .8rem; } .asm-announcements-panel__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-announcements-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-announcements-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-announcements-search { position: relative; } .asm-announcements-search i { position: absolute; top: 50%; left: .85rem; color: #98a2b3; transform: translateY(-50%); } .asm-announcements-search input { width: 260px; min-height: 42px; padding: .65rem .8rem .65rem 2.35rem; border: 1px solid #d0d5dd; border-radius: .75rem; color: #344054; background: #fff; font-size: .76rem; } .asm-announcements-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem; } .asm-announcement-card { display: flex; overflow: hidden; flex-direction: column; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .asm-announcement-card:hover { transform: translateY(-2px); border-color: #d0d5dd; box-shadow: 0 14px 30px rgba(16, 24, 40, .08); } .asm-announcement-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; background: #0b1d2d; } .asm-announcement-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease, opacity 220ms ease; } .asm-announcement-card:hover .asm-announcement-card__media img { transform: scale(1.035); } .asm-announcement-card__fallback { position: absolute; inset: 0; display: none; place-items: center; color: rgba(255, 255, 255, .75); font-size: 2rem; } .asm-announcement-card__media.is-fallback .asm-announcement-card__fallback { display: grid; } .asm-announcement-card__overlay { position: absolute; right: .75rem; bottom: .75rem; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: .8rem; color: #fff; background: rgba(7, 23, 39, .72); backdrop-filter: blur(8px); } .asm-announcement-card__body { display: flex; flex: 1; flex-direction: column; padding: 1rem; } .asm-announcement-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; } .asm-announcement-card__meta span { display: inline-flex; align-items: center; gap: .4rem; color: var(--asm-muted); font-size: .65rem; font-weight: 750; } .asm-announcement-card__meta small { color: #98a2b3; font-size: .62rem; } .asm-announcement-card__body h3 { margin: 0 0 .5rem; } .asm-announcement-card__body h3 button { padding: 0; border: 0; color: #101828; background: transparent; font-size: .95rem; font-weight: 800; line-height: 1.35; text-align: left; } .asm-announcement-card__body p { display: -webkit-box; margin: 0 0 1rem; overflow: hidden; color: #667085; font-size: .74rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .asm-announcement-card__action { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin-top: auto; padding: 0; border: 0; color: var(--asm-accent); background: transparent; font-size: .72rem; font-weight: 750; } .asm-announcements-empty { padding: 4rem 1.5rem; text-align: center; } .asm-announcements-empty > span { display: grid; width: 72px; height: 72px; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; color: #667085; background: #f2f4f7; font-size: 1.6rem; } .asm-announcements-empty h3 { margin-bottom: .4rem; color: #101828; font-size: 1.1rem; font-weight: 800; } .asm-announcements-empty p { margin: 0; color: #667085; } @media (max-width: 1199.98px) { .asm-announcements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .asm-announcements-heading__content, .asm-announcements-panel__header { align-items: flex-start; flex-direction: column; } .asm-announcements-search, .asm-announcements-search input { width: 100%; } } @media (max-width: 767.98px) { .asm-announcements-grid { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .asm-announcements-content { margin-top: -2rem; } .asm-announcements-grid { padding: .85rem; } } /* Modo oscuro de la vista de comunicados: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-announcements-page { background: #0a1120; } :root[data-theme="dark"] .asm-announcements-panel, :root[data-theme="dark"] .asm-announcement-card { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-announcement-card:hover { border-color: #33415c; } :root[data-theme="dark"] .asm-announcements-panel__header { border-bottom-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-announcements-panel__header h2, :root[data-theme="dark"] .asm-announcement-card__body h3 button, :root[data-theme="dark"] .asm-announcements-empty h3 { color: var(--asm-text); } :root[data-theme="dark"] .asm-announcements-panel__header p, :root[data-theme="dark"] .asm-announcement-card__body p, :root[data-theme="dark"] .asm-announcements-empty p { color: var(--asm-muted); } :root[data-theme="dark"] .asm-announcements-search input { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-announcements-search input::placeholder { color: var(--asm-muted); } :root[data-theme="dark"] .asm-announcements-empty > span { color: var(--asm-muted); background: var(--asm-surface-soft); } /* ========================================================= PÁGINA: DETALLE DE COMUNICADO ========================================================= */ .asm-announcement-detail-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-announcement-detail-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; color: #fff; background: linear-gradient(135deg, #041c3b, #0b2740); } .asm-announcement-detail-hero__media { position: absolute; inset: 0; } .asm-announcement-detail-hero__media img { width: 100%; height: 100%; object-fit: cover; } .asm-announcement-detail-hero__media > span { position: absolute; inset: 0; display: none; place-items: center; /* Icono megáfono casi invisible: antes (.7 + glow teal) asomaba tras el título como una marca de agua rara. Ahora es un fondo navy limpio. */ color: rgba(255, 255, 255, .05); background: linear-gradient(135deg, #041c3b, #0b2740); font-size: 4rem; } .asm-announcement-detail-hero__media.is-fallback > span { display: grid; } .asm-announcement-detail-hero__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(7, 23, 39, .2) 0%, rgba(7, 23, 39, .78) 65%, rgba(7, 23, 39, .96) 100% ); } .asm-announcement-detail-hero .container { position: relative; z-index: 2; } .asm-announcement-detail-hero__content { max-width: 880px; /* 130px arriba despeja el navbar transparente; abajo compacto para no dejar el hero enorme (antes 4rem/6rem + min-height:500px). */ padding: 130px 0 2.75rem; } .asm-announcement-detail-back { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 2rem; padding: .55rem .75rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: .75rem; color: #fff; background: rgba(255, 255, 255, .08); backdrop-filter: blur(8px); font-size: .72rem; font-weight: 750; } .asm-announcement-detail-eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; color: var(--asm-accent); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-announcement-detail-hero h1 { max-width: 900px; margin: 0 0 .75rem; color: #fff; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.08; } .asm-announcement-detail-hero p { max-width: 760px; margin: 0; color: rgba(255, 255, 255, .72); font-size: 1rem; line-height: 1.7; } .asm-announcement-detail-content { position: relative; z-index: 3; margin-top: -3rem; padding-bottom: 5rem; } .asm-announcement-detail-article { max-width: 980px; margin: 0 auto; overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.25rem; background: #fff; box-shadow: 0 22px 60px rgba(16, 24, 40, .12); } .asm-announcement-detail-article__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-announcement-detail-author { display: flex; align-items: center; gap: .75rem; } .asm-announcement-detail-author__avatar { display: grid; width: 46px; height: 46px; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-announcement-detail-author small { display: block; color: #98a2b3; font-size: .64rem; font-weight: 700; text-transform: uppercase; } .asm-announcement-detail-author strong { display: block; margin-top: .15rem; color: #101828; font-size: .8rem; } .asm-announcement-detail-id { padding: .45rem .65rem; border-radius: 999px; color: #475467; background: #f2f4f7; font-size: .65rem; font-weight: 750; } .asm-announcement-detail-article__body { padding: clamp(1.5rem, 4vw, 3rem); color: #344054; font-size: .9rem; line-height: 1.85; } .asm-announcement-detail-article__body h1, .asm-announcement-detail-article__body h2, .asm-announcement-detail-article__body h3, .asm-announcement-detail-article__body h4 { margin-top: 1.6em; margin-bottom: .55em; color: #101828; font-weight: 800; line-height: 1.3; } .asm-announcement-detail-article__body h2 { font-size: 1.45rem; } .asm-announcement-detail-article__body h3 { font-size: 1.15rem; } .asm-announcement-detail-article__body p { margin-bottom: 1.15rem; } .asm-announcement-detail-article__body a { color: var(--asm-accent); text-decoration: underline; text-underline-offset: 3px; } .asm-announcement-detail-article__body img { max-width: 100%; height: auto; margin: 1.2rem auto; border-radius: .9rem; } .asm-announcement-detail-article__body ul, .asm-announcement-detail-article__body ol { margin-bottom: 1.2rem; padding-left: 1.3rem; } .asm-announcement-detail-article__body li { margin-bottom: .45rem; } .asm-announcement-detail-article__body blockquote { margin: 1.5rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--asm-accent); border-radius: 0 .8rem .8rem 0; color: #475467; background: var(--asm-surface-soft); } .asm-announcement-detail-article__body table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; } .asm-announcement-detail-article__body th, .asm-announcement-detail-article__body td { padding: .75rem; border: 1px solid #e4e7ec; text-align: left; } .asm-announcement-detail-article__body th { color: #344054; background: #f9fafb; } .asm-announcement-detail-article__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid #eaecf0; background: #fcfcfd; } .asm-announcement-detail-article__footer > div { display: flex; align-items: center; gap: .55rem; color: #667085; font-size: .7rem; } .asm-announcement-detail-article__footer > div i { color: var(--asm-accent); } .asm-announcement-detail-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .5rem; padding: .65rem .9rem; border: 1px solid #0b1d2d; border-radius: .75rem; color: #fff; background: #0b1d2d; font-weight: 750; } .asm-announcement-detail-button:hover { color: #fff; background: #173149; } .asm-announcement-detail-state { padding: 6rem 0; } .asm-announcement-detail-state__card { max-width: 650px; margin: 0 auto; padding: 4rem 2rem; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); text-align: center; } .asm-announcement-detail-state__card > span { display: grid; width: 76px; height: 76px; margin: 0 auto 1rem; place-items: center; border-radius: 1rem; color: #b42318; background: #fef3f2; font-size: 1.7rem; } .asm-announcement-detail-state__card h1 { margin-bottom: .5rem; color: #101828; font-size: 1.5rem; font-weight: 800; } .asm-announcement-detail-state__card p { margin-bottom: 1.4rem; color: #667085; } @media (max-width: 767.98px) { .asm-announcement-detail-hero__content { padding: 108px 0 2.5rem; } .asm-announcement-detail-article__header, .asm-announcement-detail-article__footer { align-items: flex-start; flex-direction: column; } .asm-announcement-detail-button { width: 100%; } } @media (max-width: 575.98px) { .asm-announcement-detail-content { margin-top: -2rem; } .asm-announcement-detail-article__body { padding: 1.25rem; } } /* Modo oscuro del detalle de comunicado: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-announcement-detail-page { background: #0a1120; } :root[data-theme="dark"] .asm-announcement-detail-article, :root[data-theme="dark"] .asm-announcement-detail-state__card { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-announcement-detail-article__header, :root[data-theme="dark"] .asm-announcement-detail-article__footer { border-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-announcement-detail-author strong, :root[data-theme="dark"] .asm-announcement-detail-article__body, :root[data-theme="dark"] .asm-announcement-detail-article__body h1, :root[data-theme="dark"] .asm-announcement-detail-article__body h2, :root[data-theme="dark"] .asm-announcement-detail-article__body h3, :root[data-theme="dark"] .asm-announcement-detail-article__body h4, :root[data-theme="dark"] .asm-announcement-detail-state__card h1 { color: var(--asm-text); } :root[data-theme="dark"] .asm-announcement-detail-article__footer > div, :root[data-theme="dark"] .asm-announcement-detail-state__card p { color: var(--asm-muted); } :root[data-theme="dark"] .asm-announcement-detail-id { color: var(--asm-muted); background: var(--asm-surface-soft); } /* ========================================================= PÁGINA: SUGERENCIAS ========================================================= */ .asm-suggestions-page { min-height: calc(100vh - 130px); background: #f4f7fb; } .asm-suggestions-heading { /* 130px arriba para despejar el navbar transparente asm-header--hero. */ padding: 130px 0 5rem; color: #fff; background: linear-gradient(135deg, #041c3b, #0b2740); } .asm-suggestions-heading__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .asm-suggestions-heading__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: var(--asm-accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-suggestions-heading h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; } .asm-suggestions-heading p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, .7); } .asm-suggestions-heading__badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .55rem; padding: .7rem .9rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .07); font-size: .7rem; font-weight: 700; } .asm-suggestions-content { position: relative; z-index: 2; margin-top: -3rem; padding-bottom: 5rem; } .asm-suggestions-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 1rem; align-items: start; } .asm-suggestions-form-panel { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 1.2rem; background: #fff; box-shadow: 0 18px 45px rgba(16, 24, 40, .08); } .asm-suggestions-form-panel__header { display: flex; align-items: flex-start; gap: .85rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid #eaecf0; background: #fcfcfd; } .asm-suggestions-form-panel__icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-suggestions-form-panel__header h2 { margin: 0 0 .2rem; color: #101828; font-size: 1.05rem; font-weight: 800; } .asm-suggestions-form-panel__header p { margin: 0; color: #667085; font-size: .76rem; } .asm-suggestions-form-panel__body { padding: 1.3rem; } .asm-suggestions-field { margin-bottom: 1.1rem; } .asm-suggestions-field label { display: block; margin-bottom: .42rem; color: #344054; font-size: .72rem; font-weight: 750; } .asm-suggestions-field label span { color: #d92d20; } .asm-suggestions-field .form-control { min-height: 46px; border-color: #d0d5dd; border-radius: .78rem; box-shadow: none; } .asm-suggestions-field textarea.form-control { min-height: 180px; resize: vertical; } .asm-suggestions-field .form-control:focus { border-color: var(--asm-accent); box-shadow: 0 0 0 4px rgba(230, 57, 70, .12); } .asm-suggestions-input-wrap { position: relative; } .asm-suggestions-input-wrap i { position: absolute; z-index: 2; top: 50%; left: .9rem; color: #98a2b3; transform: translateY(-50%); } .asm-suggestions-input-wrap .form-control { padding-left: 2.5rem; } .asm-suggestions-field > small { display: block; margin-top: .35rem; color: #98a2b3; font-size: .64rem; } .asm-suggestions-field__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .35rem; } .asm-suggestions-field__footer small, .asm-suggestions-field__footer span { color: #98a2b3; font-size: .64rem; } .asm-suggestions-notice { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.1rem; padding: .9rem 1rem; border: 1px solid var(--asm-border); border-radius: .85rem; color: #475467; background: var(--asm-surface-soft); font-size: .72rem; line-height: 1.55; } .asm-suggestions-notice i { margin-top: .12rem; color: var(--asm-primary); } .asm-suggestions-button-primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border: 1px solid var(--asm-accent); border-radius: .8rem; color: #fff; background: var(--asm-accent); font-weight: 750; } .asm-suggestions-button-primary:hover { color: #fff; border-color: var(--asm-accent-dark); background: var(--asm-accent-dark); } .asm-suggestions-sidebar { display: grid; gap: 1rem; } .asm-suggestions-contact-card, .asm-suggestions-help-card { padding: 1.1rem; border: 1px solid #e4e7ec; border-radius: 1rem; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .06); } .asm-suggestions-contact-card { display: flex; align-items: center; gap: .85rem; } .asm-suggestions-contact-card__icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: .85rem; } /* Iconos de contacto unificados en navy (sin arcoíris azul/verde). */ .asm-suggestions-contact-card__icon.is-blue, .asm-suggestions-contact-card__icon.is-green { color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-suggestions-contact-card small { display: block; color: #98a2b3; font-size: .62rem; font-weight: 700; text-transform: uppercase; } .asm-suggestions-contact-card h3 { margin: .15rem 0 .25rem; color: #101828; font-size: .82rem; font-weight: 800; } .asm-suggestions-contact-card a { color: #475467; font-size: .7rem; text-decoration: none; overflow-wrap: anywhere; } .asm-suggestions-help-card > span { display: grid; width: 44px; height: 44px; margin-bottom: .85rem; place-items: center; border-radius: .85rem; color: var(--asm-primary); background: var(--asm-surface-soft); } .asm-suggestions-help-card h3 { margin-bottom: .75rem; color: #101828; font-size: .86rem; font-weight: 800; } .asm-suggestions-help-card ul { display: grid; gap: .55rem; margin: 0; padding-left: 1rem; color: #667085; font-size: .7rem; line-height: 1.55; } @media (max-width: 991.98px) { .asm-suggestions-heading__content { align-items: flex-start; flex-direction: column; } .asm-suggestions-layout { grid-template-columns: 1fr; } .asm-suggestions-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asm-suggestions-help-card { grid-column: 1 / -1; } } @media (max-width: 575.98px) { .asm-suggestions-content { margin-top: -2rem; } .asm-suggestions-sidebar { grid-template-columns: 1fr; } .asm-suggestions-help-card { grid-column: auto; } .asm-suggestions-button-primary { width: 100%; } } /* Modo oscuro de la vista de sugerencias: los tokens --asm-* hacen el resto. */ :root[data-theme="dark"] .asm-suggestions-page { background: #0a1120; } :root[data-theme="dark"] .asm-suggestions-form-panel, :root[data-theme="dark"] .asm-suggestions-contact-card, :root[data-theme="dark"] .asm-suggestions-help-card { border-color: var(--asm-border); background: var(--asm-surface); } :root[data-theme="dark"] .asm-suggestions-form-panel__header { border-bottom-color: var(--asm-border); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-suggestions-form-panel__header h2, :root[data-theme="dark"] .asm-suggestions-contact-card h3, :root[data-theme="dark"] .asm-suggestions-help-card h3 { color: var(--asm-text); } :root[data-theme="dark"] .asm-suggestions-form-panel__header p, :root[data-theme="dark"] .asm-suggestions-help-card ul { color: var(--asm-muted); } :root[data-theme="dark"] .asm-suggestions-field label { color: var(--asm-text); } :root[data-theme="dark"] .asm-suggestions-field .form-control { border-color: var(--asm-border); color: var(--asm-text); background: var(--asm-surface-soft); } :root[data-theme="dark"] .asm-suggestions-notice { color: var(--asm-muted); } :root[data-theme="dark"] .asm-suggestions-contact-card a { color: var(--asm-muted); } /* ========================================================= NEWSLETTER REDUCIDO ========================================================= */ .asm-newsletter-mini { position: relative; overflow: hidden; padding: 2rem 0; background: radial-gradient( circle at 85% 20%, rgba(230, 57, 70, .16), transparent 34% ), linear-gradient( 135deg, #041225, #0c2942 ); } .asm-newsletter-mini::before, .asm-newsletter-mini::after { position: absolute; border: 1px solid rgba(255, 255, 255, .06); border-radius: 50%; content: ""; } .asm-newsletter-mini::before { top: -90px; left: -70px; width: 220px; height: 220px; } .asm-newsletter-mini::after { right: -100px; bottom: -140px; width: 300px; height: 300px; } .asm-newsletter-mini__card { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.35rem 1.5rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.2rem; background: rgba(255, 255, 255, .05); backdrop-filter: blur(10px); box-shadow: 0 18px 45px rgba(0, 0, 0, .14); } .asm-newsletter-mini__copy { display: flex; min-width: 0; align-items: center; gap: .95rem; } .asm-newsletter-mini__icon { display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; border: 0; border-radius: .9rem; color: #ffffff; background: var(--asm-accent); font-size: 1.1rem; box-shadow: 0 8px 20px rgba(230, 57, 70, .35); } .asm-newsletter-mini__kicker { display: block; margin-bottom: .2rem; color: #ff8f98; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .asm-newsletter-mini__copy h2 { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; } .asm-newsletter-mini__copy p { margin: .25rem 0 0; color: rgba(255, 255, 255, .64); font-size: .72rem; } .asm-newsletter-mini__form { width: min(100%, 500px); flex: 0 0 min(100%, 500px); } .asm-newsletter-mini__control { position: relative; display: flex; align-items: center; gap: .5rem; padding: .4rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: .9rem; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .12); } .asm-newsletter-mini__control > i { margin-left: .45rem; color: #98a2b3; } .asm-newsletter-mini__control input { min-width: 0; min-height: 42px; flex: 1; padding: .55rem .25rem; border: 0; outline: 0; color: #344054; background: transparent; font-size: .76rem; } .asm-newsletter-mini__control input::placeholder { color: #98a2b3; } .asm-newsletter-mini__control button { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .85rem; border: 0; border-radius: .72rem; color: #fff; background: var(--asm-accent); font-size: .72rem; font-weight: 750; transition: background-color 150ms ease, transform 150ms ease; } .asm-newsletter-mini__control button:hover { background: var(--asm-accent-dark); transform: translateY(-1px); } .asm-newsletter-mini__control button:disabled { cursor: not-allowed; opacity: .65; transform: none; } .asm-newsletter-mini__privacy { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; color: rgba(255, 255, 255, .52); font-size: .61rem; } .asm-newsletter-mini__privacy i { color: rgba(255, 255, 255, .42); } @media (max-width: 991.98px) { .asm-newsletter-mini__card { align-items: flex-start; flex-direction: column; } .asm-newsletter-mini__form { width: 100%; flex-basis: auto; } } @media (max-width: 575.98px) { .asm-newsletter-mini { padding: 1.25rem 0; } .asm-newsletter-mini__card { padding: 1rem; } .asm-newsletter-mini__copy { align-items: flex-start; } .asm-newsletter-mini__copy p { line-height: 1.5; } .asm-newsletter-mini__control { align-items: stretch; flex-direction: column; padding: .55rem; } .asm-newsletter-mini__control > i { position: absolute; top: 20px; left: .55rem; margin: 0; } .asm-newsletter-mini__control input { width: 100%; padding-left: 2rem; } .asm-newsletter-mini__control button { width: 100%; } } /* ===================================================================== Portada pública, cabecera fija y tema claro/oscuro ===================================================================== */ /* --------------------------------------------------------------------- 1. LOGO SIN SALTO AL FIJAR LA CABECERA --------------------------------------------------------------------- Los dos logos miden lo mismo (256x91), pero el CSS anterior los colocaba de forma distinta: .asm-logo-default { position: relative; } <- en flujo .asm-logo-scrolled { position: absolute; top:30%; transform: translateY(-50%) scale(.98); } Uno seguía el flujo normal y el otro estaba anclado al 30% del contenedor, así que al hacer scroll el logo aterrizaba en otra altura y "saltaba". Encima el scale(.98) lo hacía cambiar de tamaño. Solución: el enlace se convierte en una caja de dimensiones FIJAS y los dos logos se apilan dentro ocupando exactamente el mismo hueco. Sólo se anima la opacidad, que no provoca reflujo. --------------------------------------------------------------------- */ .asm-nav-brand { position: relative; display: block; width: 180px; height: 47px; flex: 0 0 auto; } .asm-nav-brand .asm-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; transform: none; transition: opacity 160ms ease; } .asm-nav-brand .asm-logo-default { opacity: 1; visibility: visible; } .asm-nav-brand .asm-logo-scrolled { opacity: 0; visibility: hidden; } .asm-main-header.is-scrolled .asm-nav-brand .asm-logo-default, .asm-main-header.header-fixed .asm-nav-brand .asm-logo-default { opacity: 0; visibility: hidden; transform: none; } .asm-main-header.is-scrolled .asm-nav-brand .asm-logo-scrolled, .asm-main-header.header-fixed .asm-nav-brand .asm-logo-scrolled { opacity: 1; visibility: visible; transform: none; } /* La altura de la cabecera no cambia entre estados: si cambiara, el salto volvería aunque el logo estuviera bien anclado. */ .asm-main-header, .asm-main-header.is-scrolled, .asm-main-header.header-fixed { min-height: 74px; } @media (max-width: 991.98px) { .asm-nav-brand { width: 145px; height: 39px; } } @media (max-width: 575.98px) { .asm-nav-brand { width: 128px; height: 36px; } } /* --------------------------------------------------------------------- 2. TEMA CLARO POR DEFECTO, OSCURO OPCIONAL --------------------------------------------------------------------- El claro es el predeterminado a propósito: es la identidad del sitio. El oscuro sólo se aplica si el usuario lo elige (data-theme="dark" en , que fija assets/js/tema.js y persiste en localStorage). No se usa prefers-color-scheme como disparador automático para que la primera impresión sea siempre la misma. --------------------------------------------------------------------- */ :root[data-theme="dark"] { --asm-background: #0b1120; --asm-surface: #141c2c; --asm-surface-soft: #1a2333; --asm-border: #26324a; --asm-text: #e6ebf4; --asm-muted: #94a3b8; --asm-primary: #e6ebf4; --asm-primary-soft: #cbd5e1; } :root[data-theme="dark"] body { background: var(--asm-background); color: var(--asm-text); } :root[data-theme="dark"] .asm-portada__banda { background: #0d1526; } :root[data-theme="dark"] .asm-main-header { background: rgba(20, 28, 44, .92) !important; border-bottom-color: var(--asm-border); } /* Los logos son claros sobre fondo oscuro: se invierte el que toca. */ :root[data-theme="dark"] .asm-nav-brand .asm-logo-scrolled { filter: brightness(0) invert(1); } :root[data-theme="dark"] .asm-oferta, :root[data-theme="dark"] .asm-proveedor { background: var(--asm-surface); border-color: var(--asm-border); } /* Interruptor de tema */ .asm-tema { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--asm-border); background: transparent; color: inherit; cursor: pointer; padding: 0; transition: var(--asm-transition); } .asm-tema:hover { border-color: var(--asm-muted); } .asm-tema svg { width: 17px; height: 17px; } .asm-tema .icono-luna { display: none; } :root[data-theme="dark"] .asm-tema .icono-sol { display: none; } :root[data-theme="dark"] .asm-tema .icono-luna { display: block; } /* --------------------------------------------------------------------- 3. PANTALLA DE CARGA --------------------------------------------------------------------- Antes: un GIF de un avión, con el peso y el aliasing de un GIF y sin forma de adaptarse al tema. Ahora es una barra de progreso indefinida sobre el color de marca: pesa cero, es nítida en cualquier pantalla y respeta prefers-reduced-motion. --------------------------------------------------------------------- */ #preloader { position: fixed; inset: 0; z-index: 9999; background: var(--asm-background); display: flex; align-items: center; justify-content: center; transition: opacity 260ms ease, visibility 260ms ease; } #preloader.asm-oculto { opacity: 0; visibility: hidden; } .asm-preloader__marca { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .asm-preloader__marca img { width: 150px; height: 53px; object-fit: contain; } .asm-preloader__barra { width: 150px; height: 3px; border-radius: 2px; background: var(--asm-border); overflow: hidden; } .asm-preloader__barra span { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--asm-accent); animation: asm-cargando 1.1s ease-in-out infinite; } @keyframes asm-cargando { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } @media (prefers-reduced-motion: reduce) { .asm-preloader__barra span { animation: none; width: 100%; opacity: .6; } } /* --------------------------------------------------------------------- 4. PORTADA PÚBLICA --------------------------------------------------------------------- */ .asm-chip-sesion { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 3px; background: rgba(230, 57, 70, .1); color: var(--asm-accent); font-size: .6875rem; font-weight: 600; vertical-align: middle; } .asm-portada__banda { background: #101828; padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(5rem, 9vw, 7rem); color: #fff; } .asm-portada__titular { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .asm-portada__titular h1 { font-size: clamp(1.625rem, 3.4vw, 2.375rem); line-height: 1.2; font-weight: 650; letter-spacing: -.018em; margin: 0; color: #fff; max-width: 26ch; } .asm-portada__titular h1 span { color: rgba(255, 255, 255, .55); font-weight: 400; } .asm-portada__acceso { display: flex; align-items: center; gap: 1.25rem; font-size: .875rem; color: rgba(255, 255, 255, .6); margin: 0; } .asm-portada__acceso a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 1px; } .asm-portada__acceso a:hover { border-bottom-color: var(--asm-accent); color: #fff; } .asm-search-stage--portada { margin-top: clamp(-4.5rem, -7vw, -3.5rem); position: relative; z-index: 2; margin-bottom: 1.25rem; } /* --- Proveedores ----------------------------------------------------- Antes eran cajas con borde. Ahora es una línea continua separada por filetes verticales: ocupa menos, se lee de un vistazo y no compite con el buscador, que es lo que tiene que mirar el visitante. */ .asm-proveedores { border-bottom: 1px solid var(--asm-border); padding: 1rem 0; } .asm-proveedores__fila { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; } .asm-proveedores__etiqueta { font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--asm-muted); white-space: nowrap; } .asm-proveedores__lista { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .asm-proveedores__lista li { font-size: .875rem; font-weight: 600; color: var(--asm-text); padding: 0 1.125rem; border-left: 1px solid var(--asm-border); line-height: 1.1; } .asm-proveedores__lista li:first-child { border-left: 0; padding-left: 0; } .asm-proveedores__lista li em { font-style: normal; font-weight: 400; color: var(--asm-muted); } @media (max-width: 40rem) { .asm-proveedores__lista li { border-left: 0; padding: .2rem .875rem .2rem 0; } } /* --- Banda de registro ------------------------------------------------ */ .asm-registro { border-top: 1px solid var(--asm-border); border-bottom: 1px solid var(--asm-border); background: var(--asm-surface-soft); padding: 1.75rem 0; } .asm-registro__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .asm-registro h2 { font-size: 1.0625rem; font-weight: 650; margin: 0 0 .2rem; color: var(--asm-text); } .asm-registro p { margin: 0; font-size: .875rem; color: var(--asm-muted); max-width: 46ch; } .asm-registro__acciones { display: flex; gap: .625rem; flex-wrap: wrap; } /* --- Botones ---------------------------------------------------------- */ .asm-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.375rem; border-radius: 8px; font-weight: 600; font-size: .875rem; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: var(--asm-transition); white-space: nowrap; } .asm-btn--acento { background: var(--asm-accent); color: #fff; } .asm-btn--acento:hover { background: var(--asm-accent-dark); color: #fff; } .asm-btn--linea { background: transparent; border-color: var(--asm-border); color: var(--asm-text); } .asm-btn--linea:hover { border-color: var(--asm-muted); color: var(--asm-text); } @media (max-width: 40rem) { .asm-portada__titular { flex-direction: column; align-items: flex-start; } .asm-registro__fila { flex-direction: column; align-items: flex-start; } .asm-registro__acciones { width: 100%; } .asm-registro__acciones .asm-btn { flex: 1; justify-content: center; } } /* * Modo oscuro del MARCO del modal "Solicitar Cotización" (#Cotizacion). El * cuerpo es un iframe a cotizaciones/ que ya hereda el tema por su cuenta; esto * oscurece la cabecera y el contorno del modal (del lado del padre) para que no * quede una barra blanca sobre el formulario oscuro. Sólo CSS: no se toca el * HTML de src/buscador.php. */ :root[data-theme="dark"] #Cotizacion .modal-content, :root[data-theme="dark"] #Cotizacion .modal-header { background: var(--asm-surface); border-color: var(--asm-border); } :root[data-theme="dark"] #Cotizacion .modal-title { color: var(--asm-text); } /* * Cabecera de la página de Orden de Pago. * * asm-header--navy: MISMO aspecto que el estado header-fixed (fondo azul marino, * textos y logo en blanco, controles glassy) pero como modificador PROPIO y * PERMANENTE. Antes se reutilizaba la clase de estado `header-fixed`, pero esa * la togglean los scripts de scroll y además la cabecera quedaba sin la clase * `header` (que sí llevan todas las demás páginas), lo que dejaba el dropdown de * perfil vacío en el cliente. Con un modificador propio el navy es estable y no * depende del scroll. * * asm-header--estatico: quita el sticky pero con position: RELATIVE (no static). * `static` anularía el z-index:1030 del header (el z-index sólo aplica a * elementos posicionados) y el dropdown de perfil se dibujaba DETRÁS del * contenido. `relative` mantiene el header en el flujo (no se pega) y conserva * su z-index, así el dropdown queda por encima. */ .asm-main-header.asm-header--estatico { position: relative !important; } .asm-main-header.asm-header--navy { background: #081826 !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 30px rgba(5, 20, 38, 0.18) !important; /* * Navy OPACO y SIN blur. La cabecera base lleva backdrop-filter: blur(18px) * y el navy era rgba(8,24,38,0.98) (2% translúcido): al hacer scroll, el * blur difuminaba el contenido claro de abajo y se colaba una aureola * blanca justo bajo el navbar. Opaco + sin filtro lo elimina. */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .asm-main-header.asm-header--navy .asm-header-action-text strong, .asm-main-header.asm-header--navy .asm-user-information strong { color: #ffffff !important; } .asm-main-header.asm-header--navy .asm-header-action-text small, .asm-main-header.asm-header--navy .asm-user-information small { color: rgba(255, 255, 255, 0.62) !important; } .asm-main-header.asm-header--navy .asm-dropdown-chevron { color: rgba(255, 255, 255, 0.55) !important; } .asm-main-header.asm-header--navy .asm-header-action, .asm-main-header.asm-header--navy .asm-user-trigger { color: #ffffff !important; border-color: transparent !important; background: transparent !important; } .asm-main-header.asm-header--navy .asm-header-action:hover, .asm-main-header.asm-header--navy .asm-header-action[aria-expanded="true"], .asm-main-header.asm-header--navy .asm-user-trigger:hover, .asm-main-header.asm-header--navy .asm-user-trigger[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.1) !important; background: rgba(255, 255, 255, 0.07) !important; box-shadow: none !important; } .asm-main-header.asm-header--navy .asm-header-action-icon { color: #ffffff !important; background: rgba(255, 255, 255, 0.1) !important; } .asm-main-header.asm-header--navy .asm-user-avatar { color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12) !important; } .asm-main-header.asm-header--navy .asm-user-avatar img { background: transparent !important; } .asm-main-header.asm-header--navy .asm-tema { color: #ffffff !important; background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.22) !important; } .asm-main-header.asm-header--navy .asm-tema:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important; } /* Botón de icono en móvil (carrito/usuario compactos) sobre el navy. */ @media (max-width: 991.98px) { .asm-main-header.asm-header--navy .asm-header-icon-button { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.08) !important; } } /* Logo blanco (el mismo que usa el estado scrolled; en oscuro se fuerza a blanco puro con el filtro global de .asm-logo-scrolled). */ .asm-main-header.asm-header--navy .asm-nav-brand .asm-logo-default { opacity: 0; visibility: hidden; } .asm-main-header.asm-header--navy .asm-nav-brand .asm-logo-scrolled { opacity: 1; visibility: visible; } /* * Loader de contenido (cargas AJAX). Reutiliza la MISMA marca del #preloader * (logo + barra de progreso indefinida) centrada en el área de contenido, en * vez del assets/img/loading.gif. Se inyecta desde la variable `loading` de * assets/js/funciones*.js. Las clases .asm-preloader__marca/__barra ya están * definidas arriba, así que aquí sólo hace falta el contenedor que las centra. */ .asm-loader-inline { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 20px; } /* ========================================================= PÁGINA "ORDEN DE PAGO" (.asm-orden) — restyle editorial. Todo con tokens --asm-* para que el modo oscuro salga solo. Antes era Bootstrap genérico (cards planas, iconos de colores, botón primario gris). ========================================================= */ /* --- Tarjetas y bloques --- */ .asm-orden .card, .asm-orden .side-block { border: 1px solid var(--asm-border) !important; border-radius: 16px !important; background: var(--asm-surface) !important; box-shadow: var(--asm-shadow-sm) !important; } .asm-orden .card-header { padding: 15px 18px !important; border-bottom: 1px solid var(--asm-border) !important; background: transparent !important; } .asm-orden .card-body { padding: 18px !important; } /* --- Tipografía --- */ .asm-orden h4, .asm-orden h5 { color: var(--asm-text); font-weight: 700; } .asm-orden .text-muted, .asm-orden small { color: var(--asm-muted) !important; } .asm-orden .div-title h4 { font-size: 1.5rem; } /* --- Tarjetas de totales (Reservas / Comisiones / Pagado / Restante) --- */ .asm-orden .card-body > .text-muted.small:first-child { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.68rem; font-weight: 700; } .asm-orden .card .fs-5 { color: var(--asm-text); font-size: 1.45rem !important; } /* Pagado/Restante conservan su semántica de color. */ .asm-orden .text-danger { color: var(--asm-accent) !important; } .asm-orden .text-success { color: var(--asm-success) !important; } /* --- Botón principal (Procesar orden / Enviar a...): acento rojo --- */ .asm-orden .btn-dark { min-height: 46px; border: 0 !important; border-radius: 11px !important; background: var(--asm-accent) !important; color: #ffffff !important; font-weight: 700 !important; transition: background var(--asm-transition), transform var(--asm-transition); } .asm-orden .btn-dark:hover:not(:disabled) { background: var(--asm-accent-dark) !important; transform: translateY(-1px); } .asm-orden .btn-dark:disabled { opacity: 0.5; } /* --- Botones secundarios --- */ .asm-orden .btn-outline-dark, .asm-orden .btn-outline-secondary { border-radius: 10px !important; border-color: var(--asm-border) !important; color: var(--asm-text) !important; font-weight: 600 !important; } .asm-orden .btn-outline-dark:hover, .asm-orden .btn-outline-secondary:hover { border-color: var(--asm-muted) !important; background: var(--asm-surface-soft) !important; color: var(--asm-text) !important; } /* --- Métodos de pago: tarjetas sobrias, icono navy uniforme (sin arcoíris) --- */ .asm-orden .row.g-2 .btn-light { border: 1px solid var(--asm-border) !important; border-radius: 12px !important; background: var(--asm-surface-soft) !important; color: var(--asm-text) !important; transition: border-color var(--asm-transition), transform var(--asm-transition), box-shadow var(--asm-transition); } .asm-orden .row.g-2 .btn-light:hover { transform: translateY(-2px); border-color: var(--asm-text) !important; box-shadow: var(--asm-shadow-sm) !important; } .asm-orden .row.g-2 .btn-light i { color: var(--asm-primary) !important; } :root[data-theme="dark"] .asm-orden .row.g-2 .btn-light i { color: var(--asm-text) !important; } /* El "+" de Agregar pago, en acento. */ .asm-orden h4 .fa-circle-plus { color: var(--asm-accent) !important; font-size: 1rem; } /* --- Resumen de pago (lista) --- */ .asm-orden .list-group-borderless .list-group-item { padding: 8px 0 !important; border: 0 !important; background: transparent !important; color: var(--asm-text); } .asm-orden .list-group-borderless .border-top { margin-top: 4px; border-top: 1px solid var(--asm-border) !important; } /* --- Tarjetas de reserva y filetes de datos --- */ .asm-orden .border.rounded-4, .asm-orden .border.rounded-3 { border: 1px solid var(--asm-border) !important; } .asm-orden .text-uppercase.small { letter-spacing: 0.04em; color: var(--asm-muted) !important; white-space: nowrap; } .asm-orden .text-primary { color: var(--asm-accent) !important; } /* --- Avisos --- */ .asm-orden .alert-light { border: 1px solid var(--asm-border) !important; background: var(--asm-surface-soft) !important; color: var(--asm-muted) !important; } /* Fondo de la sección en oscuro (la clase gray-simple es clara). */ :root[data-theme="dark"] .asm-orden.gray-simple, :root[data-theme="dark"] .asm-orden .gray-simple { background: var(--asm-background) !important; } /* En oscuro, los bloques con bg-white de Bootstrap (Agregar pago, Pagos registrados, cabeceras) seguían BLANCOS y el texto claro encima quedaba invisible. Se remapean a la superficie oscura del tema. */ :root[data-theme="dark"] .asm-orden .bg-white, :root[data-theme="dark"] .asm-orden .card-header.bg-white { background: var(--asm-surface) !important; } :root[data-theme="dark"] .asm-orden .bg-light { background: var(--asm-surface-soft) !important; } /* Textos que Bootstrap fija oscuros (text-dark) legibles en oscuro. */ :root[data-theme="dark"] .asm-orden .text-dark { color: var(--asm-text) !important; } /* Dropdowns (Agregar Reserva, acciones de reserva): tematizados (salían blancos en oscuro). */ .asm-orden .dropdown-menu { border: 1px solid var(--asm-border) !important; border-radius: 12px !important; background: var(--asm-surface) !important; box-shadow: var(--asm-shadow) !important; padding: 6px !important; } .asm-orden .dropdown-item { border-radius: 8px; color: var(--asm-text) !important; } .asm-orden .dropdown-item:hover, .asm-orden .dropdown-item:focus { background: var(--asm-surface-soft) !important; color: var(--asm-text) !important; } .asm-orden .dropdown-item.text-danger { color: var(--asm-accent) !important; } .asm-orden .dropdown-item.text-danger:hover, .asm-orden .dropdown-item.text-danger:focus { background: rgba(230, 57, 70, 0.1) !important; color: var(--asm-accent) !important; } /* Botón de 3 puntos (menú de la reserva): círculo sobrio, no óvalo blanco. */ .asm-orden .btn-light.rounded-circle { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0 !important; border: 1px solid var(--asm-border) !important; border-radius: 50% !important; background: var(--asm-surface-soft) !important; color: var(--asm-text) !important; } .asm-orden .btn-light.rounded-circle:hover, .asm-orden .btn-light.rounded-circle:active, .asm-orden .btn-light.rounded-circle.show { border-color: var(--asm-muted) !important; background: var(--asm-surface) !important; color: var(--asm-text) !important; } /* ========================================================= MODAL "AGREGAR RESERVA" (.asm-omodal) — restyle editorial. ========================================================= */ .asm-omodal .modal-content { border: 1px solid var(--asm-border) !important; border-radius: 18px !important; background: var(--asm-surface); } .asm-omodal .modal-header { padding: 18px 22px !important; border: 0 !important; background: linear-gradient(160deg, #041c3b, #021129) !important; color: #ffffff !important; } .asm-omodal .modal-header .btn-light { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; line-height: 1; } .asm-omodal .modal-header .btn-light:hover { background: rgba(255, 255, 255, 0.26) !important; } .asm-omodal .modal-body { background: var(--asm-surface); } /* Tarjetas de reserva seleccionables. */ .asm-omodal .reservation-select-option { display: block; border: 1px solid var(--asm-border) !important; border-radius: 14px !important; background: var(--asm-surface); transition: border-color var(--asm-transition), box-shadow var(--asm-transition), background var(--asm-transition); } .asm-omodal .reservation-select-option:hover { border-color: var(--asm-muted) !important; } /* Estado SELECCIONADO: acento (antes no se distinguía cuál estaba elegida). */ .asm-omodal .reservation-select-option:has(input:checked) { border-color: var(--asm-accent) !important; background: rgba(230, 57, 70, 0.04); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.14); } :root[data-theme="dark"] .asm-omodal .reservation-select-option:has(input:checked) { background: rgba(230, 57, 70, 0.12); } .asm-omodal .reservation-select-option .fs-5.fw-bold { color: var(--asm-text); } .asm-omodal .text-muted, .asm-omodal small { color: var(--asm-muted) !important; } /* Total en verde de marca; fees en navy uniforme (sin arcoíris azul/cian). */ .asm-omodal .text-success { color: var(--asm-success) !important; } .asm-omodal .text-primary, .asm-omodal .text-info { color: var(--asm-text) !important; } /* Radio en acento. */ .asm-omodal .form-check-input:checked { border-color: var(--asm-accent); background-color: var(--asm-accent); } /* Estado vacío. */ .asm-omodal .alert-warning { border: 1px solid var(--asm-border) !important; border-radius: 12px !important; background: var(--asm-surface-soft) !important; color: var(--asm-muted) !important; } /* Footer + botones. */ .asm-omodal .modal-footer { border-top: 1px solid var(--asm-border) !important; background: var(--asm-surface-soft) !important; } .asm-omodal .modal-footer .btn-dark, .asm-omodal .modal-footer .btn-outline-dark { border: 0 !important; border-radius: 11px !important; background: var(--asm-accent) !important; color: #ffffff !important; font-weight: 700 !important; } .asm-omodal .modal-footer .btn-dark:hover, .asm-omodal .modal-footer .btn-outline-dark:hover { background: var(--asm-accent-dark) !important; color: #ffffff !important; } .asm-omodal .modal-footer .btn-light { border: 1px solid var(--asm-border) !important; border-radius: 11px !important; background: transparent !important; color: var(--asm-text) !important; } .asm-omodal .modal-footer .btn-light:hover { background: var(--asm-surface) !important; } /* --- Formularios de los modales de pago (tdc/cash/transfer/wallet/...) --- */ .asm-omodal .form-label { color: var(--asm-text); font-size: 0.8rem; font-weight: 700; } .asm-omodal .form-control, .asm-omodal .form-select { min-height: 44px; border: 1px solid var(--asm-border) !important; border-radius: 10px !important; background-color: var(--asm-surface) !important; color: var(--asm-text) !important; } .asm-omodal .form-control::placeholder { color: var(--asm-muted); opacity: 1; } .asm-omodal .form-control:focus, .asm-omodal .form-select:focus { border-color: var(--asm-accent) !important; box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15) !important; } /* Flecha del select visible en oscuro (la de Bootstrap es oscura). */ :root[data-theme="dark"] .asm-omodal .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; } /* Recuadro de info (Pagos parciales permitidos). */ .asm-omodal .alert-light { border: 1px solid var(--asm-border) !important; border-radius: 12px !important; background: var(--asm-surface-soft) !important; color: var(--asm-text) !important; } .asm-omodal .alert-light .text-primary { color: var(--asm-accent) !important; } /* Zona de subida de soporte (Dropzone): era una caja blanca sin tematizar. */ .asm-omodal .dropzone { border: 2px dashed var(--asm-border) !important; border-radius: 12px !important; background: var(--asm-surface-soft) !important; } .asm-omodal .dropzone, .asm-omodal .dropzone .dz-message, .asm-omodal .dropzone .dz-message *, .asm-omodal .dropzone .dz-button { color: var(--asm-muted) !important; background: transparent !important; } /* Previsualización de archivos subidos dentro del Dropzone. */ .asm-omodal .dropzone .dz-preview .dz-image { border-radius: 10px; } :root[data-theme="dark"] .asm-omodal .dropzone .dz-preview .dz-details { background: var(--asm-surface) !important; color: var(--asm-text) !important; } /* Cabecera: forzar título + icono + cerrar en BLANCO. Algunos modales (Wallet, "Agregar Reserva Manual") usan