/* ============================================================================= buscador-carreras-v2 · CSS del módulo (opción A del modelo híbrido: aislado en module.css) Adaptación 1:1 de la experiencia del rediseño de Oferta Educativa de UVM + ajustes UNITEC (18-sep-2026). Prefijos BEM propios: .bcv2 (raíz) · .bcd__ (escritorio ≥768) · .bcm__ (móvil <768). Referencia tokens de css/tokens/*; cada var() lleva fallback con el valor real del token. La fuente de iconos (Material Symbols Rounded, subset) la pide module.html con require_head. ============================================================================= */ /* ---- alias locales sobre los tokens del tema (solo nombres cortos) ---- También en los : se montan en , fuera de .bcv2, y sin esto quedarían sin fondo ni tipografía. */ .bcv2,.bcd__modal,.bcm__panel{ --bc-font:var(--font-family-base,"Work Sans",Arial,sans-serif); --bc-ink:var(--color-text-primary,#323338); --bc-ink-2:var(--color-text-body,#505050); --bc-ink-3:var(--color-text-muted,#676879); --bc-white:var(--color-bg-white,#fff); --bc-alt:var(--color-bg-alt,#F6F7FB); --bc-soft:var(--color-bg-highlight,#DCEBF8); /* relleno suave (sustituye red-50) */ --bc-line:var(--color-border-light,#D0D4E4); --bc-line-2:var(--color-border,#C3C6D4); --bc-cta:var(--color-primary-dark,#003053); /* lo que se puede pulsar / activo */ --bc-cta-hover:var(--color-primary-hover,#002641); --bc-brand:var(--color-primary,#006FBA); /* foco, enlaces secundarios */ --bc-accent:var(--color-accent,#F68B1F); /* UN solo uso: aplicar filtros */ --bc-wa:var(--color-success-whatsapp,#25D366); --bc-r-sm:var(--radius-sm,8px); --bc-r-md:var(--radius-md,12px); --bc-r-xl:var(--radius-xl,16px); --bc-pill:var(--radius-full,9999px); --bc-focus:var(--shadow-focus,0 0 0 3px rgba(0,111,186,.25)); --bc-ease:cubic-bezier(.16,1,.3,1); --bc-ease-spring:cubic-bezier(.34,1.56,.64,1); --bc-ease-inout:cubic-bezier(.76,0,.24,1); font-family:var(--bc-font); color:var(--bc-ink); -webkit-font-smoothing:antialiased; } .bcv2 *,.bcv2 *::before,.bcv2 *::after{box-sizing:border-box} .bcv2 [hidden]{display:none!important} /* ---- neutraliza reglas globales del tema (css/elements/_buttons.css, enlaces) dentro del módulo ---- El tema pinta todo button:disabled con fondo #D0D0D0 y texto #E6E6E6; aquí el estado apagado lo dan las clases is-off / --fija. Y subraya a:hover; las tarjetas son enlaces y no deben subrayarse. */ .bcv2 button[disabled],.bcd__modal button[disabled],.bcm__panel button[disabled]{background-color:transparent;border-color:transparent;color:inherit;cursor:default} .bcv2 a:hover,.bcv2 a:focus,.bcd__modal a:hover,.bcm__panel a:hover{text-decoration:none} .bcv2 button,.bcd__modal button,.bcm__panel button{text-transform:none;letter-spacing:normal} .bcv2 .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .bcv2 a:focus-visible,.bcv2 button:focus-visible,.bcv2 input:focus-visible, .bcv2 select:focus-visible{outline:none;box-shadow:var(--bc-focus);border-radius:var(--bc-r-sm)} /* ---------- la mitad que toca, según el ancho (corte 768, igual que UVM) ---------- */ .bcv2-desk{display:none} @media (min-width:768px){ .bcv2-desk{display:block} .bcv2-mob{display:none} } /* ---------- CTA de asesor: reutiliza .modulo__section-btn y .c-btn--whatsapp del tema; aquí solo el aire ---------- */ .bcv2__asesor{padding:8px 20px 40px} /* ============================================================================= ESCRITORIO · .bcd (base: Diseño 1 de UVM) ORDEN: 1 título · 2 descripción · 3 nivel (tabs) · 4 buscador + filtrar por · 5 áreas de estudio (sub-tabs) · 6 resultados ============================================================================= */ .bcd{padding:clamp(32px,6vw,64px) 0 clamp(40px,6vw,64px); background:linear-gradient(180deg,var(--bc-alt) 0%,var(--bc-white) 55%)} .bcd__container{width:100%;max-width:var(--section-max-width,1440px);margin:0 auto;padding:0 20px} @media (min-width:992px){.bcd__container{padding:0 50px}} @media (min-width:1200px){.bcd__container{padding:0 100px}} /* ---------- 1 y 2 · TÍTULO + DESCRIPCIÓN ---------- */ .bcd__head{margin:0 0 clamp(24px,3.5vw,36px);text-align:center} .bcd__title{font-size:var(--font-size-xl,22px);line-height:var(--line-height-2xl,26px);font-weight:700; color:var(--bc-cta);margin:0 0 10px;text-wrap:balance} @media (min-width:1024px){.bcd__title{font-size:var(--font-size-2xl,24px);line-height:var(--line-height-3xl,32px)}} .bcd__intro{font-size:var(--font-size-base,16px);line-height:1.5;color:var(--bc-ink-2);margin:0 auto;max-width:72ch} .bcd__intro p{margin:0} .bcd__intro b,.bcd__intro strong{font-weight:600;color:var(--bc-ink)} .bcd__loading,.bcd__empty{text-align:center;color:var(--bc-ink-3);font-size:16px;padding:24px} .bcd__loading{animation:bcd-pulse 1.6s ease-in-out infinite} /* ---------- carril genérico [flecha][viewport][flecha] ---------- */ .bcd__carril-wrap{display:flex;align-items:center;gap:4px} .bcd__carril-viewport{position:relative;flex:1 1 auto;min-width:0} .bcd__tabs-fade{position:absolute;top:0;bottom:14px;width:40px;z-index:2;pointer-events:none; opacity:0;transition:opacity .25s ease} .bcd__tabs-fade--left{left:0;background:linear-gradient(90deg,var(--bc-white),rgba(255,255,255,0))} .bcd__tabs-fade--right{right:0;background:linear-gradient(270deg,var(--bc-white),rgba(255,255,255,0))} .bcd__tabs-fade.is-visible{opacity:1} .bcd__tabs-arrow{flex:0 0 36px;display:flex;align-items:center;justify-content:center;width:36px;height:36px; border-radius:50%;border:none;background:var(--bc-cta);color:var(--bc-white); box-shadow:0 8px 20px rgba(0,48,83,.28);cursor:pointer;font-size:18px;font-weight:700;line-height:1; opacity:0;pointer-events:none;font-family:inherit; transition:opacity .25s ease,transform .3s var(--bc-ease-spring),box-shadow .25s ease} .bcd__tabs-arrow span{display:inline-block;transition:transform .25s var(--bc-ease-spring)} .bcd__tabs-arrow.is-visible{opacity:1;pointer-events:auto} .bcd__tabs-arrow:hover{transform:scale(1.1);background:var(--bc-cta-hover)} .bcd__tabs-arrow--left:hover span{transform:translateX(-2px)} .bcd__tabs-arrow--right:hover span{transform:translateX(2px)} /* ---------- 3 · NIVEL ACADÉMICO (tabs, selección única) ---------- */ .bcd__tabs-wrap{margin-bottom:22px} .bcd__tabs{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none; padding:6px 4px 14px;-webkit-overflow-scrolling:touch;justify-content:safe center} .bcd__tabs::-webkit-scrollbar{display:none} .bcd__tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:10px; font-family:inherit;font-size:var(--font-size-sm,14px);font-weight:500;color:var(--bc-cta); background:var(--bc-soft);border:1px solid transparent;border-radius:var(--bc-pill); padding:9px 20px 9px 12px;cursor:pointer;white-space:nowrap; transition:color .3s var(--bc-ease),background-color .3s var(--bc-ease), transform .35s var(--bc-ease-spring),box-shadow .3s var(--bc-ease)} .bcd__tab-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; flex:0 0 auto;border-radius:50%;background:var(--bc-white);color:var(--bc-cta); transition:background-color .3s var(--bc-ease),color .3s var(--bc-ease)} .bcd__tab-icon svg{width:16px;height:16px;display:block;fill:currentColor} .bcd__tab:hover{background:var(--bc-white);border-color:var(--bc-line);box-shadow:0 6px 16px rgba(0,48,83,.10); transform:translateY(-1px)} .bcd__tab.is-active{color:var(--bc-white);background:var(--bc-cta); transform:translateY(-2px) scale(1.03);box-shadow:0 5px 12px rgba(0,48,83,.30)} .bcd__tab.is-active .bcd__tab-icon{background:rgba(255,255,255,.18);color:var(--bc-white)} /* ---------- 4 · BUSCADOR + FILTRAR POR, en una fila ---------- */ .bcd__barra{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px} .bcd__barra .bcd__buscador-sticky{flex:1 1 auto;min-width:0;max-width:560px} .bcd__barra .bcd__buscador{margin:0;max-width:none} .bcd__barra .bcd__filters{flex:0 0 auto;margin:0} @media (max-width:860px){ .bcd__barra{flex-wrap:wrap} .bcd__barra .bcd__buscador-sticky{flex:1 1 100%} } .bcd__filters{display:flex;align-items:center;flex-wrap:wrap;gap:10px;justify-content:safe center} .bcd__filter-chip{font-family:inherit;font-size:var(--font-size-sm,14px);font-weight:500;color:var(--bc-cta); background:var(--bc-white);border:1px solid var(--bc-line);border-radius:var(--bc-pill); padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:40px; transition:color .25s ease,border-color .25s ease,background-color .25s ease,transform .25s var(--bc-ease-spring)} .bcd__filter-chip:hover{border-color:var(--bc-brand);background:var(--bc-alt)} .bcd__filter-chip.is-active{color:var(--bc-white);background:var(--bc-cta);border-color:var(--bc-cta);transform:scale(1.03)} .bcd__filter-chip svg{width:14px;height:14px;fill:currentColor} .bcd__filter-chip-count{font-size:10px;font-weight:700;background:var(--bc-soft);color:var(--bc-cta); border-radius:var(--bc-pill);padding:1px 7px;font-variant-numeric:tabular-nums} .bcd__filter-chip.is-active .bcd__filter-chip-count{background:rgba(255,255,255,.22);color:var(--bc-white)} .bcd__caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.6} /* ---------- BUSCADOR ---------- */ .bcd__buscador{position:relative;display:flex;align-items:center;max-width:560px;margin:0 auto 20px} .bcd__buscador-lupa{position:absolute;left:16px;width:18px;height:18px;pointer-events:none;color:var(--bc-cta)} .bcd__buscador-lupa svg{width:100%;height:100%;display:block;fill:currentColor} .bcd__buscador input{width:100%;height:48px;padding:0 46px;font-family:inherit;font-size:16px; color:var(--bc-ink);background:var(--bc-white);border:1px solid var(--bc-line);border-radius:var(--bc-pill); box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05));transition:border-color .25s ease,box-shadow .25s ease} .bcd__buscador input::placeholder{color:var(--color-text-placeholder,#656565)} .bcd__buscador input:focus{outline:none;border-color:var(--bc-brand);box-shadow:var(--bc-focus)} .bcd__buscador input::-webkit-search-cancel-button{display:none} .bcd__buscador-x{position:absolute;right:8px;width:32px;height:32px;display:none;place-items:center; border:0;border-radius:50%;background:var(--bc-alt);color:var(--bc-ink-2);font-family:inherit; font-size:14px;line-height:1;cursor:pointer} .bcd__buscador-x:hover{background:var(--bc-soft);color:var(--bc-cta)} .bcd__buscador.tiene-texto .bcd__buscador-x{display:grid} .bcd__sticky-sentinel{height:1px} /* aviso: la búsqueda se amplió a toda la oferta */ .bcd__leyenda{display:flex;align-items:flex-start;gap:9px;margin:0 0 16px;padding:11px 14px; border-radius:var(--bc-r-md);background:var(--bc-soft);color:var(--bc-cta);font-size:13px;line-height:1.45} .bcd__leyenda b{font-weight:600} /* ---------- 5 · ÁREAS DE ESTUDIO (sub-tabs, siempre una activa) ---------- */ /* la fila de áreas se desplaza en horizontal con scroll INVISIBLE (pedido UNITEC 21-sep): sin barra ni flechas; se arrastra con el cursor, trackpad o Shift+rueda; solo los fades de los bordes avisan que hay más */ .bcd__areas-row{display:flex;align-items:center;gap:12px;justify-content:safe center;margin:0 0 24px} .bcd__subtabs-wrap{flex:0 1 auto;min-width:0} .bcd__subtabs-wrap .bcd__tabs-fade{bottom:0} .bcd__subtabs-label{font-size:var(--font-size-sm,14px);font-weight:500;color:var(--bc-ink-2);flex:0 0 auto} .bcd__subtabs{display:flex;flex-wrap:nowrap;align-items:center;gap:18px;margin:0;min-width:0;padding:0 4px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;animation:bcd-fade-in .4s var(--bc-ease) both} .bcd__subtabs::-webkit-scrollbar{display:none} .bcd__subtabs.is-deslizable{cursor:grab} .bcd__subtabs.is-arrastrando{cursor:grabbing;user-select:none} .bcd__subtabs.is-arrastrando .bcd__subtab{pointer-events:none} .bcd__subtab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-family:inherit; font-size:var(--font-size-sm,14px);font-weight:500;color:var(--bc-ink-2);background:transparent;border:0; border-bottom:2px solid transparent;padding:6px 4px;cursor:pointer;white-space:nowrap; transition:color .25s ease,border-color .25s ease} .bcd__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--area,var(--bc-cta)); transition:transform .25s var(--bc-ease-spring)} .bcd__subtab:hover .bcd__dot{transform:scale(1.25)} /* texto: nunca el color puro del área (varios no pasan AA); color-mix al 55% con negro */ .bcd__subtab--area:hover{color:color-mix(in oklab,var(--area) 55%,black)} .bcd__subtab--area.is-active{color:color-mix(in oklab,var(--area) 55%,black);border-color:var(--area);font-weight:700} /* área sin programas con los filtros actuales: apagada, no oculta (sigue viéndose que existe) */ .bcd__subtab.is-off,.bcd__area-op.is-off{opacity:.42;cursor:not-allowed} .bcd__subtab.is-off:hover{color:var(--bc-ink-2)} .bcd__subtab.is-off:hover .bcd__dot{transform:none} .bcd__areas-mas{flex:0 0 auto;align-self:center;margin:0;padding:6px 2px;border:0;background:none; font-family:inherit;font-size:var(--font-size-sm,14px);font-weight:600;color:var(--bc-cta); text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap} .bcd__areas-mas:hover{color:var(--bc-brand)} .bcd__areas-field{display:none} /* el