@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Open+Sans:wght@400;600;800&display=swap"); /* Fuentes de "Mi Biblioteca" (self-contained): index.php NO carga Inter / * Space Grotesk / Material Symbols en su (gea.php sí) → sin esto los * íconos salen como TEXTO ("layers"/"search") y la tipografía cae a sans-serif. * Al importarlas acá, el modal se ve idéntico en ambas superficies. @import va * antes de toda regla (requisito CSS). */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"); :root { --clr-princ-2: #009acd; --cl-geo: MediumSeaGreen; --cl-misrepo: FireBrick; --cl-repor: #03a9f4; --cl-prosp: #FF9800; --cp-grosor: 3px; } .centrar { display: flex; justify-content: center; align-items: center; position: relative; } header { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box; width: 100vw; padding: 10px 30px; background: #fff; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); user-select: none; font-size: 0.9rem; } header > div { display: flex; flex-direction: row; flex: 1; max-width: 1200px; flex-wrap: wrap; align-items: center; } header nav ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; flex: 1; gap: 4px; list-style-type: none; padding: 0; } header nav ul img { width: auto; height: 50px; margin-right: 20px; } header nav ul li { padding: 16px 8px; } header nav ul li:hover { color: #666; } header nav ul .activo { background-image: linear-gradient(to bottom, #ffffff00, #ddd); border-radius: 0 0 10px 10px; } header > div > div { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; min-width: 210px; flex: 1; gap: 10px; } header .boton { height: 36px; padding: 0 16px; background: #0091c1; border-radius: 6px; color: #fff; } header .boton:hover { filter: brightness(1.2); } .o_lang_flag { width: 1.3rem; height: 1.3rem; margin-right: 10px; border-radius: 50%; } /* -------------------------------------------- */ .hidden { display: none; } .centrar { display: flex; justify-content: center; align-items: center; position: relative; } .bold { font-weight: 600; } .linea { margin: 10px 0; border-top: 1px solid #ddd; width: 100%; } .cerrar { display: flex; justify-content: center; align-items: center; background: #111; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; transition: transform 0.2s ease; &:hover { transform: rotate(180deg); } & i { color: white; font-size: 1rem; } } /* Botones tipo de vista */ .tipo-vista { & .forma-grilla, & .forma-titulos { background: #ddd; } & .activo { background: #888 !important; color: white; } } /* -------------------------------------------- */ /* MODAL REPORTES general */ .modal_reportes { font-family: "Open Sans", sans-serif; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: flex-start; padding: 20px; position: relative; max-width: 1200px; width: 75%; height: 90vh; background: #ffffff; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); border-radius: 10px; color: #555; /*resize: both;*/ overflow-x: hidden; box-sizing: border-box; &.explorer_window:not(closed) { animation: fadein .3s ease; } & .marco { width: 100%; height: 100%; margin-top: 10px; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 40px 1fr; gap: 20px; & button { color: grey; border-radius: 50%; height: 40px; width: 40px; border: 2px solid #ddd; cursor: pointer; &:hover { border: 2px solid #bbb; } } & .listado { overflow-y: auto; } & .temas { width: 170px; overflow: hidden; transition: width 0.2s ease-in-out; } &.collapsed { & .temas { width: 0px !important; } } & input { height: 40px; border-radius: 20px; padding: 16px; width: 80%; border: 2px solid #ddd; } } & .titulo { width: 100%; font-size: 1.3rem; line-height: 1.5rem; font-weight: 800; color: #333; } & .icono { float: inline-end; margin-inline-start: 1rem; } & .subtit { margin: 6px 0; font-weight: 800; } & .btn-tipo { width: 170px; height: 36px; background: white; display: flex; flex-direction: row; padding: 12px; border-radius: 6px; align-items: center; color: #666; gap: 10px; transition: background 0.3s ease; &.active { background: var(--clr-princ-2); color: white; } &:hover { background: #eee; color: var(--clr-princ-2); cursor: pointer; } } } .modal_reportes.closed { display: none; } /* -------------------------------------------- */ /* LISTA de REPORTES con miniaturas */ .lista_grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /*flex-direction: row; flex-wrap: wrap;*/ gap: 18px; /*width: 100%;*/ padding: 0px 0px 10px 0px; overflow-x: hidden; overflow-y: auto; align-content: flex-start; & .reporte { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 160px; border-radius: 8px; overflow: hidden; cursor: pointer; transition: opacity 0.4s ease; &.tipo-geoecon .textos { border-top: var(--cp-grosor) solid var(--cl-geo); } &.tipo-mis-capas .textos { border-top: var(--cp-grosor) solid var(--cl-misrepo); } &.tipo-mis-reportes .textos { border-top: var(--cp-grosor) solid var(--cl-repor); } &.tipo-mis-prospects .textos { border-top: var(--cp-grosor) solid var(--cl-prosp); } & div.imagen { display: flex; align-items: center; width: 100%; height: 108px; overflow: hidden; background-image: url(https://geoecon.info/web/image/1350-dcac6b7b/logo-margen.png), radial-gradient(rgb(183 183 183), rgb(135 135 135)); background-size: contain; background-repeat: no-repeat; background-position: center; & img { width: 100%; transition: transform 0.5s ease; } } & > div.textos { width: 100%; height: 50px; padding: 6px 24px 8px 10px; box-sizing: border-box; background: #e1e1e1; color: #333; opacity: 1; position:relative; transition: height 0.4s ease, background .4s ease, color .4s ease; z-index: 1; & i { margin-right: 4px; } & .tit { font-size: 0.9rem; font-weight: 600; line-height: 1.1rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } & .fech { font-size: 0.8em; display: none; } & .aut { font-size: 0.8em; position: absolute; bottom: 8px; } } & div.contextual { position: absolute; bottom: 8px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; & i { margin-right: 0; } &:hover { background: #555; } } &:hover { & div.imagen img { transform: scale(1.2); } & .textos { background: var(--clr-neutro-2); color: white; height: 80px; & .tit { -webkit-line-clamp: 2; } } } &.agregar { box-sizing: border-box; background: var(--clr-princ-6); color: #2c6d83; /*flex-direction: row; justify-content: flex-start;*/ gap: 0px; padding-inline: 10px; transition: background 0.2s ease; & i { font-size: 3rem; margin-bottom: 8px; } &:hover { background: var(--clr-princ-2); color: white; } } } & .vacio { min-width: 250px; width: 250px; height: 160px; border-radius: 8px; border: 2px #aaa dashed; background: #eee; } } /* -------------------------------------------- */ /* LISTA por TITULOS */ .lista_titulos { display: flex; flex-direction: column; gap: 2px; & .encabezado { display: flex; flex-direction: row; gap: 8px; padding: 10px 26px 10px 10px; & div:nth-child(1) { width: 100%; } & div:nth-child(2) { width: 200px; text-align: center; } & div:nth-child(3) { width: 200px; text-align: center; } & div:nth-child(4) { width: 30px; } } & div { font-size: 0.9rem; } & .reporte { position: relative; display: flex; flex-direction: row; gap: 8px; justify-content: space-between; align-items: center; background: white; border-radius: 0px 6px 6px 0px; padding: 16px 26px 16px 16px; transition: background 0.3s ease; &:hover { background: #eee !important; /*color: white !important;*/ cursor: pointer; } /* Colores para la lista */ &.tipo-geoecon .textos { border-left: var(--cp-grosor) solid var(--cl-geo) !important; } &.tipo-mis-capas { border-left: var(--cp-grosor) solid var(--cl-misrepo) !important; } &.tipo-mis-reportes { border-left: var(--cp-grosor) solid var(--cl-repor) !important; } &.tipo-mis-prospects { border-left: var(--cp-grosor) solid var(--cl-prosp) !important; } /*&:nth-child(even) { background: #0002; } &:nth-child(odd) { background: #0001; }*/ & .imagen { display: none; } & .textos { display: flex; flex-direction: row; gap: 8px; width: 100%; & .tit { width: 100%; } & .aut { font-size: 0.8rem; width: 200px; } & .fech { font-size: 0.8rem; width: 200px; } & i { margin-right: 4px; } } &.agregar { justify-content: flex-start; background: var(--clr-princ-6); color: #2c6d83; & i { font-size: 1.4rem !important; } &:hover { background: var(--clr-princ-3) !important; color: white; } } & div.contextual:last-child { position: absolute; top: 10px; right: 8px; width: 30px !important; height: 30px !important; border-radius: 50%; display: flex; justify-content: center; align-items: center; & i { margin: 0; } &:hover { background: #555; color: white; } } } & .vacio { height: 30px; padding: 10px 26px 10px 10px; border: 1px #aaa dashed; background: #fff; border-radius: 6px; } } /* -------------------------------------------- */ /* MENU CONTEXTUAL */ #context-menu { padding: 0px; border: 1px solid #ccc; border-radius: 6px; background-color: #eee; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); width: 200px; & ul { list-style: none; padding: 0; margin: 0; } & li { padding: 10px 15px; cursor: pointer; &:hover { background: #ddd; } } } /* ── 3e: Toolbar de la Biblioteca (orden + chips de tags) ───────────────── */ .explorer-toolbar2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; padding: 4px 4px 2px; } .explorer-toolbar2 .sort-bar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .explorer-toolbar2 .sort-lbl { font-size: 0.72rem; color: #888; text-transform: uppercase; letter-spacing: 0.04em; } .explorer-toolbar2 .sort-btn { font-size: 0.78rem; padding: 3px 10px; border-radius: 999px; background: #eef1f4; color: #555; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; } .explorer-toolbar2 .sort-btn:hover { background: #e0e5ea; } .explorer-toolbar2 .sort-btn.active { background: var(--clr-princ-2); color: #fff; } .explorer-toolbar2 .tag-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-x: auto; flex: 1 1 auto; } .explorer-toolbar2 .tag-chip { font-size: 0.74rem; padding: 3px 9px; border-radius: 999px; background: var(--clr-princ-6, #e8f6fd); color: var(--clr-princ-3, #2196d4); cursor: pointer; user-select: none; white-space: nowrap; transition: background 0.15s, color 0.15s; } .explorer-toolbar2 .tag-chip:hover { filter: brightness(0.96); } .explorer-toolbar2 .tag-chip.active { background: var(--clr-princ-2); color: #fff; } /* ── 3d: Nav jerárquico de la Biblioteca (Inicio / secciones colapsables) ─ */ .temas { display: flex; flex-direction: column; gap: 2px; } .temas .nav-item, .temas .nav-parent, .temas .nav-child { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.86rem; color: #333; user-select: none; transition: background 0.15s, color 0.15s; } .temas .nav-item:hover, .temas .nav-parent:hover, .temas .nav-child:hover { background: #eef1f4; } .temas .nav-item.active, .temas .nav-child.active { background: var(--clr-princ-2); color: #fff; } .temas .nav-parent { font-weight: 600; color: #555; } .temas .nav-arrow { font-size: 0.7rem; width: 12px; text-align: center; transition: transform 0.18s ease; } .temas .nav-parent.open .nav-arrow { transform: rotate(90deg); } .temas .nav-children { display: none; flex-direction: column; gap: 2px; margin-left: 9px; padding-left: 8px; border-left: 1px solid #e3e7ec; } .temas .nav-children.open { display: flex; } .temas .channel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .temas .nav-placeholder { padding: 5px 10px; font-size: 0.74rem; color: #999; font-style: italic; } /* ═══════════════════════════════════════════════════════════════════ * "Mi Biblioteca" (modal del explorer) — skin prefijo glib- * Consolidado 2026-07-20: antes en css/geoeconol6-library.css (módulo * paralelo, eliminado). UNA biblioteca para index.php ("Crear Capa") y * gea.php?mode=library. Tokens dark del visor + acentos por tipo. * ═══════════════════════════════════════════════════════════════════ */ .glib-root{ --glib-bg:#0c0f1a;--glib-surface:#111827;--glib-card:#141a29;--glib-card-h:#1b2438; --glib-accent:#409fff;--glib-accent-h:#60a5fa;--glib-accent-gl:rgba(64,159,255,.22); --glib-txt:#f3f4f6;--glib-txt2:#9ca3af;--glib-txt3:#6b7280;--glib-brd:#1f2937; --glib-ok:#34d399;--glib-err:#ff453a; --glib-tipo-catalogo:#00bfff;--glib-tipo-datos:#60a5fa;--glib-tipo-encuestas:#f59e0b; --glib-tipo-reportes:#14e0c4;--glib-tipo-prospects:#21d959;--glib-tipo-muros:#e879f9; font-family:'Inter',sans-serif;font-size:12px;color:var(--glib-txt); } .glib-root *{box-sizing:border-box} /* ── Reset ESCOPEADO (fix render en index.php) ───────────────────────────── * index.php carga muchos stylesheets globales (bootstrap + estilos del visor) * que estilan ELEMENTOS genéricos (header/section/nav/h1/button/input/img/…) y * se filtran DENTRO del modal, desparramando el layout. Todo el markup del modal * usa clases glib-* (auditado: 0 clases genéricas), así que el leak es SÓLO por * selectores de elemento. Este reset los neutraliza: :where() aporta 0 de * especificidad ⇒ el selector pesa lo mismo que `.glib-root` (0,1,0) → gana a los * selectores de elemento globales (0,0,1) pero NO pisa mis reglas .glib-* (0,1,0), * que vienen DESPUÉS en el archivo (desempate por orden). En gea.php el entorno es * liviano y no hacía falta; acá es lo que faltaba. */ .glib-root :where(div,header,footer,section,article,aside,nav,main,h1,h2,h3,h4,h5,h6,p,span,a,ul,ol,li,button,input,textarea,select,label,img,i,b,strong,small,table,thead,tbody,tr,td,th){ margin:0;padding:0;border:0;outline:0;background:transparent; box-sizing:border-box;font:inherit;line-height:normal;color:inherit; letter-spacing:normal;text-transform:none;text-align:left;vertical-align:baseline; float:none;position:static;box-shadow:none;list-style:none;text-decoration:none; min-width:0;min-height:0;max-width:none;max-height:none;width:auto;height:auto;transform:none; } .glib-root :where(button,input,textarea,select){appearance:none;-webkit-appearance:none;border-radius:0;cursor:auto;background:transparent} .glib-root :where(img){display:inline-block;max-width:none;object-fit:cover} /* Clase base de los íconos (escopeada a .glib-root): setea el font-family + * ligaduras. index.php no define .material-symbols-outlined (gea.php lo trae por * geaiq-layer-nav.css). Sin esto los muestran el texto de la ligadura. * Las reglas de tamaño/color por componente (0,2,0) van después y ganan. */ .glib-root .material-symbols-outlined{ font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal; line-height:1;letter-spacing:normal;text-transform:none;display:inline-block; white-space:nowrap;word-wrap:normal;direction:ltr; -webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased; } .glib-root h1,.glib-root h2,.glib-root h3,.glib-root h4,.glib-root h5{font-family:'Space Grotesk','Inter',sans-serif;margin:0} .glib-vscroll::-webkit-scrollbar{width:5px} .glib-vscroll::-webkit-scrollbar-thumb{background:var(--glib-brd);border-radius:3px} .glib-vscroll::-webkit-scrollbar-track{background:transparent} .glib-hscroll::-webkit-scrollbar{display:none} .glib-hscroll{-ms-overflow-style:none;scrollbar-width:none} /* ---- Modal ---- */ /* #250 (Ale): el glib-modal-bg es solo el overlay de captura de clicks (click-afuera cierra, ver bg.addEventListener("click", …) en el JS) — NO debe verse fondo ni borde propio, únicamente el glib-modal-box. */ .glib-modal-bg{position:fixed;inset:0;background:transparent;border:none;z-index:12000; display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .3s} .glib-modal-bg.glib-on{opacity:1;pointer-events:auto} .glib-modal-box{width:96.5vw;height:95vh;background:var(--glib-bg);border-radius:18px;border:1px solid var(--glib-brd); overflow:hidden;display:flex;flex-direction:column;position:relative; transform:scale(.94) translateY(24px);transition:transform .4s cubic-bezier(.16,1,.3,1)} .glib-modal-bg.glib-on .glib-modal-box{transform:scale(1) translateY(0)} /* #250 (Ale): el botón superior de cierre va anclado (position:absolute) a la esquina superior derecha del glib-modal-box, AFUERA del flex del .glib-topbar. Motivo: un selector legacy global "header > div{flex:1;...}" (arriba en este mismo archivo, para el
viejo del sitio) matchea por tag a CUALQUIER div hijo directo de
— inyecta flex-grow:1 en el grupo de botones y anula el truco margin-left:auto que los pegaba al borde real; el resultado en vivo dejaba el X ~400px lejos del borde derecho, no en la esquina. El position:absolute lo saca de ese flex roto por completo — 14px/22px replica el padding del topbar para que quede alineado con el título, sin superponerse. */ .glib-modal-close{position:absolute;top:14px;right:22px;z-index:20;background:var(--glib-bg)} /* ---- Top Bar ---- */ .glib-topbar{display:flex;align-items:center;padding:14px 22px;background:var(--glib-surface);border-bottom:1px solid var(--glib-brd);gap:16px;flex-shrink:0} .glib-topbar-logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .glib-topbar-logo .material-symbols-outlined{color:var(--glib-accent);font-size:20px} .glib-topbar-logo h1{font-size:16px;font-weight:700;letter-spacing:-.4px} .glib-search{position:relative;flex:1;max-width:400px} .glib-search input{width:100%;padding:9px 14px 9px 38px;background:var(--glib-bg);border:1px solid var(--glib-brd); border-radius:10px;color:var(--glib-txt);font-size:12px;outline:none;transition:border .2s;font-family:'Inter',sans-serif} .glib-search input:focus{border-color:var(--glib-accent)} .glib-search input::placeholder{color:var(--glib-txt3)} .glib-search .material-symbols-outlined{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--glib-txt3);font-size:16px} .glib-xbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--glib-brd);background:transparent; color:var(--glib-txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0} .glib-xbtn .material-symbols-outlined{font-size:17px} /* #250 (Ale, 13-ago): el hover era ROJO (--glib-err). Va el celeste de acento. El rojo comunica error/destructivo y cerrar una ventana no lo es. */ .glib-xbtn:hover{border-color:var(--glib-accent);color:var(--glib-accent)} /* ---- Tipo Tabs ---- */ .glib-tipo-tabs{display:flex;padding:10px 22px;gap:7px;background:var(--glib-surface);border-bottom:1px solid var(--glib-brd); overflow-x:auto;flex-shrink:0} .glib-tipo-tab{--tc:var(--glib-accent);padding:8px 16px;border-radius:9px;border:1px solid var(--glib-brd);background:transparent; color:var(--glib-txt2);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap; transition:all .2s;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:7px;flex-shrink:0} .glib-tipo-tab .material-symbols-outlined{font-size:16px;color:var(--tc);transition:color .2s} .glib-tipo-tab:hover{border-color:var(--tc);color:var(--glib-txt)} .glib-tipo-tab.glib-on{background:var(--tc);border-color:var(--tc);color:#0c0f1a} .glib-tipo-tab.glib-on .material-symbols-outlined{color:#0c0f1a} /* #250 (Ale) — los dos grupos de secciones: las que BRINDAN indicadores y los CONJUNTOS de indicadores. Van en la misma fila, separados por un divisor. El grupo es un flex propio para que sus botones no se separen entre si cuando la barra scrollea en horizontal. */ .glib-tipo-group{display:flex;gap:7px;flex-shrink:0} .glib-tipo-sep{width:1px;align-self:stretch;margin:2px 9px;background:var(--glib-brd);flex-shrink:0} /* ---- Content Area ---- */ .glib-content-wrap{position:relative;flex:1;overflow:hidden} .glib-main-scroll{height:100%;overflow-y:auto;padding:22px 24px 40px;transition:opacity .2s} .glib-content-heading{margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .glib-content-heading-title{display:flex;align-items:center;gap:10px} .glib-content-heading h2{font-size:14px;font-weight:600} .glib-content-heading .material-symbols-outlined{font-size:16px} .glib-content-heading .glib-cnt{font-size:11px;color:var(--glib-txt3);font-weight:400} /* ---- Action CTA ---- */ .glib-action-cta{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;border:none; background:var(--glib-accent);color:#0c0f1a;font-size:12px;font-weight:700;cursor:pointer; font-family:'Inter',sans-serif;white-space:nowrap;transition:all .2s;box-shadow:0 2px 10px var(--glib-accent-gl);flex-shrink:0} .glib-action-cta:hover{background:var(--glib-accent-h);transform:translateY(-1px)} .glib-action-cta .material-symbols-outlined{font-size:16px} /* ---- Card ---- */ .glib-card{width:280px;height:200px;scroll-snap-align:start;flex-shrink:0;cursor:pointer;border-radius:11px; background:var(--glib-card);border:1px solid transparent;overflow:hidden;transition:all .28s ease} .glib-card:hover{border-color:var(--glib-accent);transform:translateY(-5px);box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 1px var(--glib-accent-gl)} .glib-cthumb{width:100%;height:70%;position:relative;overflow:hidden;background:var(--glib-card-h)} .glib-cthumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .glib-card:hover .glib-cthumb img{transform:scale(1.1)} .glib-cthumb::after{content:'';position:absolute;inset:0; background:linear-gradient(to top,var(--glib-card) 0%,transparent 55%), repeating-linear-gradient(0deg,transparent,transparent 17px,rgba(64,159,255,.05) 17px,rgba(64,159,255,.05) 18px), repeating-linear-gradient(90deg,transparent,transparent 17px,rgba(64,159,255,.05) 17px,rgba(64,159,255,.05) 18px); pointer-events:none} .glib-cbadge{position:absolute;top:7px;right:7px;padding:2px 8px;border-radius:5px;font-size:9px; font-weight:700;text-transform:uppercase;z-index:2;letter-spacing:.3px;color:#0c0f1a;white-space:nowrap} .glib-cbody{padding:10px 12px 12px} .glib-cbody h4{font-size:12px;font-weight:600;line-height:1.35;margin-bottom:5px;display:flex;align-items:flex-start;gap:5px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .glib-cbody h4 .material-symbols-outlined{font-size:13px;flex-shrink:0;margin-top:1px} .glib-cmeta{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--glib-txt3);flex-wrap:wrap} .glib-cmeta span{display:flex;align-items:center;gap:3px} .glib-cmeta .material-symbols-outlined{font-size:13px} .glib-grid-view{display:grid;grid-template-columns:repeat(auto-fill,280px);gap:16px} /* ---- Carrusel horizontal ---- */ .glib-csection{margin-bottom:28px} .glib-cwrap{position:relative} .glib-ctrack{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:6px 2px} .glib-carrow{position:absolute;top:0;bottom:8px;width:50px;border:none;cursor:pointer;z-index:10; display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;color:var(--glib-txt)} .glib-carrow .material-symbols-outlined{font-size:22px} .glib-carrow.glib-l{left:0;background:linear-gradient(to right,var(--glib-bg) 30%,transparent)} .glib-carrow.glib-r{right:0;background:linear-gradient(to left,var(--glib-bg) 30%,transparent)} .glib-cwrap:hover .glib-carrow{opacity:1} .glib-carrow:hover{color:var(--glib-accent)} /* ---- Fila colapsable por temática ---- */ .glib-tematica-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer; padding:0;color:inherit;font-family:inherit;width:100%;text-align:left;margin-bottom:10px} .glib-tematica-toggle h2{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px} .glib-tematica-toggle h2 .glib-cnt{font-size:11px;color:var(--glib-txt3);font-weight:400;margin-left:2px} .glib-tematica-arrow{font-size:20px;color:var(--glib-txt3);transition:transform .3s ease;flex-shrink:0} .glib-tematica-toggle:hover .glib-tematica-arrow{color:var(--glib-tipo-catalogo)} .glib-tematica-section.glib-collapsed .glib-tematica-arrow{transform:rotate(-90deg)} .glib-tematica-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease} .glib-tematica-section.glib-collapsed .glib-tematica-body{grid-template-rows:0fr} .glib-tematica-body-inner{overflow:hidden;min-height:0} /* ---- Fila de colección ---- */ .glib-row-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap} .glib-row-h h2{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px} .glib-row-h h2 .glib-cnt{font-size:11px;color:var(--glib-txt3);font-weight:400;margin-left:2px} .glib-row-h-actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .glib-coleccion-del{opacity:0;color:var(--glib-err);cursor:pointer;padding:4px;display:flex;transition:opacity .15s} .glib-csection:hover .glib-coleccion-del{opacity:1} .glib-coleccion-del .material-symbols-outlined{font-size:16px} .glib-badge-pill{padding:3px 10px;border-radius:20px;border:1px solid var(--glib-brd);font-size:10px;font-weight:600;color:var(--glib-txt2);background:var(--glib-card)} .glib-coleccion-link{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--glib-accent);text-decoration:none} .glib-coleccion-link .material-symbols-outlined{font-size:14px} .glib-coleccion-link:hover{color:var(--glib-accent-h)} .glib-row-empty{font-size:11px;color:var(--glib-txt3);padding:16px;background:var(--glib-card);border:1px dashed var(--glib-brd);border-radius:10px;margin-bottom:8px} /* ---- Compartir / Generar ---- */ .glib-compartir-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1px solid var(--glib-tipo-muros); background:transparent;color:var(--glib-tipo-muros);font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s} .glib-compartir-btn:hover{background:var(--glib-tipo-muros);color:#0c0f1a} .glib-compartir-btn .material-symbols-outlined{font-size:14px} .glib-generar-btn{--gc:var(--glib-accent);display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1px solid var(--gc); background:transparent;color:var(--gc);font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s} .glib-generar-btn:hover{background:var(--gc);color:#0c0f1a} .glib-generar-btn .material-symbols-outlined{font-size:14px} /* "Ver reporte/prospect en el mapa" (#250) — a la izquierda de "Generar". Filled por defecto (acción primaria de la fila = cargar en el mapa). */ .glib-vermapa-btn{--gc:var(--glib-accent);display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1px solid var(--gc); background:var(--gc);color:#0c0f1a;font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s} .glib-vermapa-btn:hover{filter:brightness(1.12);transform:translateY(-1px)} .glib-vermapa-btn .material-symbols-outlined{font-size:14px} /* "Ver en el mapa" del detalle (item atómico) = acción primaria del panel. */ .glib-btn2.glib-vermapa{border-color:var(--glib-accent);background:var(--glib-accent);color:var(--glib-bg);font-weight:600} .glib-btn2.glib-vermapa:hover{background:var(--glib-accent-h);color:var(--glib-bg);transform:translateY(-1px)} .glib-compartir-box{display:none;flex-direction:column;gap:6px;padding:10px;margin:0 0 12px;background:var(--glib-card);border:1px solid var(--glib-brd);border-radius:9px} .glib-compartir-box.glib-show{display:flex} .glib-cshare-row{display:flex;gap:6px} .glib-cshare-row input{flex:1;background:var(--glib-bg);border:1px solid var(--glib-brd);border-radius:6px;padding:6px 9px;color:var(--glib-txt2);font-size:11px;font-family:'Inter',sans-serif} .glib-cshare-row button{width:30px;height:30px;border-radius:6px;border:1px solid var(--glib-brd);background:transparent;color:var(--glib-txt2); cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0} .glib-cshare-row button:hover{border-color:var(--glib-accent);color:var(--glib-accent)} .glib-cshare-row button .material-symbols-outlined{font-size:15px} /* ---- Título/resumen editables ---- */ .glib-row-title-input{background:transparent;border:1px solid transparent;border-radius:6px;padding:2px 6px;margin:-2px 0; font-family:'Space Grotesk','Inter',sans-serif;font-size:14px;font-weight:600;color:var(--glib-txt);width:280px;max-width:60vw; text-overflow:ellipsis;transition:background .15s,border-color .15s} .glib-row-title-input:hover{background:rgba(255,255,255,.05)} .glib-row-title-input:focus{outline:none;background:rgba(64,159,255,.14);border-color:var(--glib-accent);color:var(--glib-txt)} .glib-row-resumen-input{display:block;width:100%;background:transparent;border:1px solid transparent;border-radius:8px; padding:4px 6px;margin:-4px 0 12px;font-family:'Inter',sans-serif;font-size:12px;color:var(--glib-txt2);line-height:1.5; resize:none;overflow:hidden;min-height:22px;transition:background .15s,border-color .15s} .glib-row-resumen-input:hover{background:rgba(255,255,255,.04)} .glib-row-resumen-input:focus{outline:none;background:rgba(64,159,255,.1);border-color:var(--glib-accent);color:var(--glib-txt)} .glib-row-resumen-input::placeholder{color:var(--glib-txt3)} /* ---- Side Panel (detalle) ---- */ .glib-spanel{position:absolute;top:0;right:0;width:410px;height:100%;background:var(--glib-surface); border-left:1px solid var(--glib-brd);z-index:50; transform:translateX(100%);transition:transform .32s cubic-bezier(.16,1,.3,1); display:flex;flex-direction:column;overflow:hidden} .glib-spanel.glib-on{transform:translateX(0)} .glib-sp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px; border-bottom:1px solid var(--glib-brd);flex-shrink:0} .glib-sp-head h3{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px} .glib-sp-head h3 .material-symbols-outlined{font-size:16px} .glib-sp-body{flex:1;overflow-y:auto;padding:16px 18px} /* ---- Detail ---- */ .glib-dthumb{width:100%;height:190px;border-radius:10px;overflow:hidden;position:relative;margin-bottom:14px;background:var(--glib-card-h)} .glib-dthumb img{width:100%;height:100%;object-fit:cover} .glib-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0} .glib-ditem{background:var(--glib-bg);padding:9px 11px;border-radius:8px;border:1px solid var(--glib-brd)} .glib-ditem .glib-dl{font-size:9px;color:var(--glib-txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px} .glib-ditem .glib-dv{font-size:12px;font-weight:600} .glib-dacts{display:flex;flex-direction:column;gap:7px;margin-top:14px} .glib-btn1{padding:11px 18px;border-radius:9px;border:none;background:var(--glib-accent);color:var(--glib-bg); font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif; display:flex;align-items:center;justify-content:center;gap:7px} .glib-btn1 .material-symbols-outlined{font-size:16px} .glib-btn1:hover{background:var(--glib-accent-h);transform:translateY(-1px)} .glib-btn2{padding:11px 18px;border-radius:9px;border:1px solid var(--glib-brd);background:transparent; color:var(--glib-txt);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s; font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;gap:7px} .glib-btn2 .material-symbols-outlined{font-size:16px} .glib-btn2:hover{border-color:var(--glib-accent);color:var(--glib-accent)} /* ---- Dropdown "Agregar a colección" ---- */ .glib-dd{position:relative} .glib-dd-menu{position:absolute;bottom:100%;left:0;right:0;background:var(--glib-card);border:1px solid var(--glib-brd); border-radius:9px;padding:5px;margin-bottom:6px;z-index:60;display:none;max-height:220px;overflow-y:auto} .glib-dd-menu.glib-show{display:block} .glib-dd-menu button{width:100%;text-align:left;padding:7px 11px;border:none;background:transparent; color:var(--glib-txt);font-size:12px;border-radius:5px;cursor:pointer;font-family:'Inter',sans-serif;transition:background .12s; display:flex;align-items:center;gap:6px} .glib-dd-menu button .material-symbols-outlined{font-size:14px} .glib-dd-menu button:hover{background:var(--glib-bg)} .glib-dd-menu .glib-dd-empty{padding:10px;text-align:center;color:var(--glib-txt3);font-size:11px} .glib-anadir-cat-header{display:flex;align-items:center;gap:6px;padding:8px 6px 4px;font-size:10px;font-weight:700; text-transform:uppercase;letter-spacing:.05em;color:var(--glib-txt3)} .glib-anadir-cat-header .material-symbols-outlined{font-size:13px} /* ---- Toast ---- */ .glib-toast{position:fixed;bottom:22px;right:22px;padding:12px 18px;background:var(--glib-card);border:1px solid var(--glib-accent); border-radius:9px;color:var(--glib-txt);font-size:12px;z-index:13000; transform:translateY(80px);opacity:0;transition:all .3s ease;display:flex;align-items:center;gap:8px} .glib-toast.glib-on{transform:translateY(0);opacity:1} .glib-toast .material-symbols-outlined{color:var(--glib-accent);font-size:17px} /* ---- Empty / Loading / Error (contrato de UX) ---- */ .glib-empty{text-align:center;padding:60px 20px;color:var(--glib-txt3)} /* #250 (Ale, 12-ago): 24px, sin el margin-bottom, y el color del texto principal (--glib-txt) en vez del apagado (--glib-txt3). */ .glib-empty .material-symbols-outlined{font-size:24px;display:block;color:var(--glib-txt)} .glib-empty p{font-size:12px;line-height:1.6;max-width:460px;margin:0 auto 14px} .glib-empty .glib-action-cta{display:inline-flex;margin:0 auto} .glib-spinner{width:26px;height:26px;border:3px solid var(--glib-brd);border-top-color:var(--glib-accent); border-radius:50%;animation:glib-spin .8s linear infinite;margin:0 auto 14px} @keyframes glib-spin{to{transform:rotate(360deg)}} .glib-scaffold-note{margin:10px 0 0;padding:10px 12px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.35); border-radius:9px;color:var(--glib-tipo-encuestas);font-size:11px;line-height:1.5} @keyframes glib-fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .glib-fade-up{animation:glib-fadeUp .4s ease forwards} @media(prefers-reduced-motion:reduce){.glib-root *,.glib-root *::before,.glib-root *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ── Hardening ESTRUCTURAL (fix render en index.php) ─────────────────────── * Belt-and-suspenders sobre el reset :where(): index.php puede tener reglas * globales de especificidad ALTA (ej. `.algo section`, 0,1,1) que superen tanto * al reset como a mis clases (0,1,0). Fijamos con !important SOLO las props * load-bearing del layout del modal (display/flex/size/overflow/position) para * garantizar render idéntico en ambas superficies (index.php y gea.php). El look * (colores/tipografía/espaciado fino) queda en las reglas normales de arriba. */ .glib-root .glib-modal-bg{position:fixed !important;inset:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;z-index:12000 !important} .glib-root .glib-modal-box{width:96.5vw !important;max-width:96.5vw !important;height:95vh !important;max-height:95vh !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;background:var(--glib-bg) !important;border-radius:18px !important} .glib-root .glib-topbar{display:flex !important;align-items:center !important;flex-shrink:0 !important;width:100% !important} .glib-root .glib-tipo-tabs{display:flex !important;flex-shrink:0 !important;width:100% !important;overflow-x:auto !important} .glib-root .glib-content-wrap{position:relative !important;flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;width:100% !important} .glib-root .glib-main-scroll{height:100% !important;width:100% !important;overflow-y:auto !important} .glib-root .glib-content-heading{display:flex !important;align-items:center !important;justify-content:space-between !important;width:100% !important} .glib-root .glib-grid-view{display:grid !important;grid-template-columns:repeat(auto-fill,280px) !important} .glib-root .glib-card{width:280px !important;height:200px !important;flex-shrink:0 !important;overflow:hidden !important;display:block !important} .glib-root .glib-cthumb{width:100% !important;height:70% !important;overflow:hidden !important;display:block !important} .glib-root .glib-cthumb img{width:100% !important;height:100% !important;object-fit:cover !important;max-width:none !important} .glib-root .glib-cbody{display:block !important} .glib-root .glib-cwrap{position:relative !important;width:100% !important} .glib-root .glib-ctrack{display:flex !important;overflow-x:auto !important;width:100% !important} .glib-root .glib-spanel{position:absolute !important;top:0 !important;right:0 !important;height:100% !important;width:410px !important;max-width:410px !important;display:flex !important;flex-direction:column !important;overflow:hidden !important} .glib-root .glib-sp-body{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important} .glib-root .glib-toast{position:fixed !important;z-index:13000 !important} /* ── #250 (Ale, 4-ago): el formulario de carga no se ve completo en pantallas bajas ── "Tampoco se puede ver completo en pantallas con poca altura, ya que se ve dentro del contenedor de biblioteca, creo, no tiene scroll vertical para llegar hasta los elementos que están por debajo y quedan por fuera del contenedor." El diálogo "Alta de datos" es un modal Bootstrap sin alto acotado: en un viewport bajo crece más que la pantalla y los últimos campos —incluido el botón "Cargar"— quedan fuera, sin nada que scrollee. Se aplica el patrón de Bootstrap `modal-dialog-scrollable` de forma explícita: el diálogo se capa a la altura de la ventana y el CUERPO es lo que scrollea, así el header y el footer (donde vive "Cargar") quedan siempre visibles. Va scopeado al formulario de carga, no a `.modal` en general: el visor completo tiene otros diálogos y no hay motivo para tocarlos. */ #uploadassetform .modal-dialog { max-height: calc(100vh - 32px); margin: 16px auto; display: flex; flex-direction: column; } #uploadassetform .modal-content { max-height: 100%; overflow: hidden; } #uploadassetform .modal-body { overflow-y: auto; min-height: 0; } /* ═══════════════════════════════════════════════════════════════════════════ #250 (Ale, 4-ago-2026) — formulario "Cargar Archivo" de Mi Biblioteca. Portado de los estilos de https://engelmedia.com/test/geaiq/biblioteca.html (bloque .upload-*), reescrito sobre los tokens --glib-* que ya existen acá en vez de repetir los hex: Ale nombró justamente `var(--glib-surface)`. Todo va SCOPEADO bajo #upload_asset_form. El modal se inyecta dentro del mapa, que carga Bootstrap 3 entero; reglas sueltas para `input`/`select`/`label` pisarían formularios ajenos (alta de reportes, login, filtros). ═══════════════════════════════════════════════════════════════════════════ */ #upload_asset_form.glib-upload-form { max-width: 640px; margin: 0 auto; background: var(--glib-surface, #111827); color: var(--glib-txt, #f3f4f6); padding: 20px; border-radius: 12px; } #upload_asset_form .glib-upload-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } #upload_asset_form .glib-upload-field label { font-size: 11px; font-weight: 600; color: var(--glib-txt2, #9ca3af); text-transform: uppercase; letter-spacing: .04em; margin: 0; /* Bootstrap 3 le mete margin-bottom a `label` */ } #upload_asset_form .glib-upload-field label .req { color: var(--glib-err, #ff453a); } #upload_asset_form .glib-upload-field input[type=text], #upload_asset_form .glib-upload-field input[type=url], #upload_asset_form .glib-upload-field input[type=number], #upload_asset_form .glib-upload-field input[type=file], #upload_asset_form .glib-upload-field select { width: 100%; background: var(--glib-card, #141a29); border: 1px solid var(--glib-brd, #1f2937); border-radius: 8px; padding: 10px 12px; color: var(--glib-txt, #f3f4f6); font-size: 13px; outline: none; box-shadow: none; /* el `.form-control` de BS3 trae inset shadow */ height: auto; /* BS3 fija height y recortaba el padding nuevo */ transition: border-color .15s; } #upload_asset_form .glib-upload-field input:focus, #upload_asset_form .glib-upload-field select:focus { border-color: var(--glib-accent, #409fff); } #upload_asset_form .glib-upload-field input[type=file] { padding: 8px 12px; cursor: pointer; } #upload_asset_form .glib-upload-field input[type=file]::file-selector-button { background: var(--glib-accent, #409fff); color: var(--glib-bg, #0c0f1a); border: none; border-radius: 6px; padding: 6px 12px; font-weight: 600; font-size: 12px; margin-right: 10px; cursor: pointer; } /* La flecha del select nativo se pierde sobre fondo oscuro en algunos temas. */ #upload_asset_form .glib-upload-field select { color-scheme: dark; } #upload_asset_form .glib-upload-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } #upload_asset_form .glib-upload-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } #upload_asset_form .glib-upload-section-label { font-size: 11px; font-weight: 700; color: var(--glib-txt3, #6b7280); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 12px; } #upload_asset_form .glib-upload-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 400; color: var(--glib-txt2, #9ca3af); cursor: pointer; } #upload_asset_form .glib-upload-check input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--glib-accent, #409fff); cursor: pointer; } /* El modal que lo contiene es blanco por defecto (Bootstrap 3): sin esto el formulario oscuro queda como un recuadro flotando sobre fondo blanco, que es exactamente lo que se ve en la captura que mandó Ale. */ .modal-dialog:has(#upload_asset_form) .modal-content, .ui-dialog:has(#upload_asset_form) { background: var(--glib-bg, #0c0f1a); color: var(--glib-txt, #f3f4f6); border-color: var(--glib-brd, #1f2937); } /* ── #250 (Ale, 12-ago) — bordes del diálogo "Alta de datos" ────────────────── Pedido textual: `.modal-header` borde inferior y `.modal-footer` borde superior, los dos `1px solid #18204f`. Medido antes: venían del default de Bootstrap, `1px solid rgb(222, 226, 230)` — un gris claro que sobre el fondo oscuro del formulario se ve como una línea blanca partiendo el diálogo. SCOPEADO a `#uploadassetform` y no a `.modal-header` a secas: el visor tiene otros diálogos (alta de reportes, capas, A2) y una regla global les cambiaría el borde a todos sin que nadie lo haya pedido. Si Ale lo quiere en todos, se sube el selector — pero eso se decide, no se arrastra. */ #uploadassetform .modal-header { border-bottom: 1px solid #18204f; } #uploadassetform .modal-footer { border-top: 1px solid #18204f; } /* ── #250 (Ale, 13-ago) — el "segundo ícono" del botón de cerrar ────────────── Pedido textual: "veo que tiene aplicada la clase .close que incluye una sombra casi blanca `text-shadow: 0 1px 0 #fff` y esto produce sobre el fondo oscuro un halo blanco. puede no tener sombra". 🔑 ESTO EXPLICA LO QUE YO NO PODÍA REPRODUCIR. Ale había reportado "un ::before que carga otro icono encima del otro"; yo inspeccioné el DOM y medí UN solo botón con UN solo ícono, y concluí que eran dos ventanas distintas. **Mi lectura del DOM estaba bien y mi conclusión mal**: no es un segundo elemento, es el `text-shadow` blanco que Bootstrap le pone a `.close` — sobre fondo oscuro dibuja un fantasma desplazado 1px que se lee como otro ícono. Un defecto puramente visual no aparece contando nodos. Se anula la sombra en los diálogos oscuros del visor, no en `.close` global: el resto del sitio sigue con el estilo de Bootstrap. */ #uploadassetform .close, .modal-moldeocontrol .close { text-shadow: none; opacity: 1; /* BS3 le pone .2/.5 y sobre oscuro casi no se ve */ } /* ── #244 (Ale, 13-ago) — el preload del MAPA ──────────────────────────────── "en el lugar que toma algo de tiempo la carga y aparece es en MAPA, pero lo veo igual con el borde y sin fondo, blur… la animación era de una serie de puntos que formaban una esfera". Tenía razón: el preload nuevo estaba sólo del lado de Odoo; acá seguía el `.glib-spinner` (un aro CSS girando). Ahora usa el mismo orbe de puntos, con el mismo envoltorio: sin borde y negro al 60 %. */ .gea-preload { display: inline-flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; } .gea-preload.is-visible { opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s linear 0s; } .gea-preload .gea-preload-orb { display: block; flex: 0 0 auto; } .gea-preload .gea-preload-msg { font-size: 13px; line-height: 1.3; color: var(--glib-txt, #f3f4f6); white-space: nowrap; } .gea-preload--bar { padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); border: none; backdrop-filter: blur(6px); } /* El contenedor del estado "cargando" deja de centrar un aro y centra la barra. */ .glib-empty .gea-preload { margin: 0 auto; }