)
La captura real del sistema, y paso por paso se apaga el resto de la
pantalla y se enciende nada más el botón del que se está hablando.
El foco, el recuadro, el número y el globo son HTML encima de la foto:
nada está quemado en la imagen, así se lee en modo oscuro y se corrige
sin volver a capturar.
------------------------------------------------------------------ */
.guia-recorrido { display: grid; gap: 14px; padding-bottom: 6px; }
.guia-escena {
position: relative;
line-height: 0;
width: fit-content;
max-width: 100%;
margin-inline: auto;
background: #fff;
border: 1px solid var(--pc-border, #e3e8ef);
border-radius: 14px;
padding: 8px;
overflow: hidden;
}
/* La captura se limita por la ALTURA de la ventana, no por el ancho: así el
recorrido entero (imagen + botones) cabe sin hacer scroll. La escena se
encoge con ella, que es lo que mantiene los recuadros en su lugar. */
.guia-img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: min(62vh, 720px);
border-radius: 8px;
}
/* El recuadro. La sombra enorme es la que apaga todo lo demás: se pinta
DESPUÉS de los dos anillos, así que queda por debajo de ellos. */
.guia-foco {
position: absolute;
border-radius: 9px;
box-shadow:
0 0 0 3px #fff,
0 0 0 6px var(--pc-accent, #4154f1),
0 0 0 9999px rgba(9, 14, 24, .66);
animation: guia-latido 2.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes guia-latido {
0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pc-accent, #4154f1), 0 0 0 9999px rgba(9, 14, 24, .66); }
50% { box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(65, 84, 241, .45), 0 0 0 9999px rgba(9, 14, 24, .66); }
}
@media (prefers-reduced-motion: reduce) {
.guia-foco { animation: none; }
}
.guia-n {
position: absolute;
top: -14px;
left: -14px;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--pc-accent, #4154f1);
color: #fff;
font: 700 14px/1 system-ui, sans-serif;
box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(9, 14, 24, .45);
}
/* El globo de texto. --ancla es el borde del recuadro del que sale. */
.guia-globo {
position: absolute;
width: min(420px, 58%);
padding: 12px 14px;
border-radius: 12px;
background: #fff;
color: #1f2937;
text-align: left;
line-height: 1.45;
box-shadow: 0 10px 30px rgba(9, 14, 24, .38);
}
.guia-globo--abajo { top: calc(var(--ancla) + 16px); transform: translateX(-50%); }
.guia-globo--arriba { top: calc(var(--ancla) - 16px); transform: translate(-50%, -100%); }
/* La flechita que apunta al recuadro. */
.guia-globo::after {
content: "";
position: absolute;
left: 50%;
margin-left: -9px;
border: 9px solid transparent;
}
.guia-globo--abajo::after { top: -18px; border-bottom-color: #fff; }
.guia-globo--arriba::after { bottom: -18px; border-top-color: #fff; }
.guia-que { margin: 0 0 4px; font-weight: 700; font-size: 15px; color: var(--pc-accent, #4154f1); }
.guia-texto { margin: 0; font-size: 14px; }
/* Mando: se queda pegado abajo mientras el recorrido esté en pantalla, para
no tener que subir y bajar entre la imagen y los botones. */
.guia-mando {
position: sticky;
bottom: 10px;
z-index: 4;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px;
width: fit-content;
max-width: 100%;
margin-inline: auto;
padding: 10px 14px;
border-radius: 16px;
background: var(--pc-surface, #fff);
border: 1px solid var(--pc-border, #e3e8ef);
box-shadow: 0 8px 24px rgba(9, 14, 24, .14);
}
.guia-medio { display: grid; gap: 6px; justify-items: center; }
.guia-puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.guia-punto {
width: 11px;
height: 11px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--pc-border, #cdd5e0);
cursor: pointer;
transition: transform .15s ease, background .15s ease;
}
.guia-punto:hover { transform: scale(1.25); }
.guia-punto.es-activo { background: var(--pc-accent, #4154f1); transform: scale(1.35); }
.guia-cuenta { margin: 0; text-align: center; color: var(--pc-text-muted, #6b7683); font-size: 12.5px; white-space: nowrap; }
.guia-todo summary { cursor: pointer; font-weight: 600; }
.guia-lista { display: grid; gap: 10px; margin: 14px 0 0; padding-left: 22px; }
.guia-lista li { color: var(--pc-text, #1f2937); line-height: 1.5; }
.guia-lista li::marker { color: var(--pc-accent, #4154f1); font-weight: 700; }
.guia-otras { display: flex; flex-wrap: wrap; gap: 8px; }
.map-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.soporte-datos {
margin: 0 0 12px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--pc-border, #e3e8ef);
background: var(--pc-bg, #f6f8fb);
color: var(--pc-text, #1f2937);
font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
white-space: pre-wrap;
overflow-x: auto;
}
@media (max-width: 860px) {
.guia-globo { width: min(320px, 58%); padding: 10px 12px; }
.guia-que { font-size: 14px; }
.guia-texto { font-size: 13px; }
.guia-n { width: 22px; height: 22px; font-size: 12px; top: -11px; left: -11px; }
}
/* La captura es de la interfaz clara: en oscuro se enmarca para que no
deslumbre, pero NO se le aplica filtro (deformaría los colores reales). */
html[data-tema="oscuro"] .guia-escena { background: #e9edf3; border-color: var(--pc-border, #262e37); }
/* Impreso: el manual de usuario. Sin foco apagado, todos los recuadros
visibles a la vez y la lista completa abierta. */
@media print {
.guia-paso[hidden] { display: block !important; }
.guia-foco { animation: none; box-shadow: 0 0 0 2px #111; }
.guia-globo { display: none; }
.guia-mando, .guia-cuenta, .guia-otras { display: none; }
.guia-todo { break-inside: avoid; }
.guia-todo[open] summary, .guia-todo summary { list-style: none; font-size: 0; }
.guia-lista { display: block; }
.guia-lista li { break-inside: avoid; margin-bottom: 8px; }
}
/* El desplegable de la lista se imprime aunque esté cerrado en pantalla. */
@media print {
.guia-todo:not([open]) .guia-lista { display: block !important; }
}
/* ------------------------------------------------------------------
Soporte y modo de uso (app/mapa)
La pantalla entra por la vista, no por la lectura: primero las
miniaturas de los recorridos, luego los módulos como tarjetas con
icono y una descripción recortada a dos renglones.
------------------------------------------------------------------ */
.tour-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tour {
display: block;
border: 1px solid var(--pc-border, #e3e8ef);
border-radius: 14px;
overflow: hidden;
background: var(--pc-surface, #fff);
text-decoration: none;
color: inherit;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tour:hover {
transform: translateY(-3px);
border-color: var(--pc-accent, #4154f1);
box-shadow: 0 12px 28px rgba(9, 14, 24, .16);
}
.tour-foto { position: relative; display: block; aspect-ratio: 16 / 9; background: #eef1f6; }
.tour-foto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% top; /* la parte útil de la captura, no la barra lateral */
display: block;
}
/* El botón de reproducir: dice «esto se ve», no «esto se lee». */
.tour-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(9, 14, 24, .05), rgba(9, 14, 24, .38));
transition: background .16s ease;
}
.tour-play .icon {
width: 46px;
height: 46px;
padding: 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .94);
color: var(--pc-accent, #4154f1);
box-shadow: 0 6px 18px rgba(9, 14, 24, .3);
transition: transform .16s ease;
}
.tour:hover .tour-play { background: linear-gradient(180deg, rgba(65, 84, 241, .12), rgba(9, 14, 24, .45)); }
.tour:hover .tour-play .icon { transform: scale(1.12); }
.tour-pasos {
position: absolute;
right: 10px;
bottom: 10px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(9, 14, 24, .72);
color: #fff;
font-size: 12px;
font-weight: 600;
}
.tour-pie { display: grid; gap: 2px; padding: 12px 14px 14px; }
.tour-pie strong { font-size: 16px; }
.tour-pie small { color: var(--pc-text-muted, #6b7683); line-height: 1.35; }
/* Tarjetas de módulo */
.map-card-top { display: flex; align-items: center; gap: 10px; }
.map-card-top h3 { margin: 0; font-size: 15px; }
.map-ico {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 9px;
background: color-mix(in srgb, var(--pc-accent, #4154f1) 12%, transparent);
color: var(--pc-accent, #4154f1);
}
.map-ico .icon { width: 17px; height: 17px; }
/* Dos renglones y punto final: el detalle completo está en el recorrido. */
.map-que {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 8px 0 10px;
color: var(--pc-text-muted, #6b7683);
font-size: 13.5px;
line-height: 1.45;
}
.map-card.tiene-guia { border-color: color-mix(in srgb, var(--pc-accent, #4154f1) 35%, var(--pc-border, #e3e8ef)); }
/* Franja de soporte */
.sop-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sop-dice { display: grid; gap: 2px; flex: 1 1 260px; }
.sop-dice small { color: var(--pc-text-muted, #6b7683); }
.sop-ico {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 11px;
background: color-mix(in srgb, var(--pc-accent, #4154f1) 12%, transparent);
color: var(--pc-accent, #4154f1);
}
@media print {
.tour-play, .tour-pasos, .sop-ayuda { display: none; }
.map-que { -webkit-line-clamp: unset; display: block; }
}
/* El contador de módulos por sección se envolvía debajo del título y quedaba
como un número suelto. No aporta: la cuenta buena ya está en el encabezado. */
.map-block .section-heading > .status { display: none; }
/* ------------------------------------------------------------------
Ayuda dentro de la sección: el botón del encabezado y su diálogo.
------------------------------------------------------------------ */
.btn-ayuda { display: inline-flex; align-items: center; gap: 9px; text-align: left; }
.btn-ayuda .icon { width: 19px; height: 19px; flex: 0 0 auto; }
.btn-ayuda strong { display: block; font-size: 13.5px; line-height: 1.2; }
.btn-ayuda small { display: block; font-size: 11.5px; line-height: 1.2; font-weight: 500; opacity: .72; }
.guia-modal {
width: min(1340px, 96vw);
max-width: none;
padding: 0;
border: 0;
border-radius: 18px;
background: transparent;
color: inherit;
overflow: visible;
}
.guia-modal::backdrop { background: rgba(9, 14, 24, .58); }
.guia-modal-caja {
display: grid;
gap: 14px;
padding: 18px;
border-radius: 18px;
background: var(--pc-surface, #fff);
box-shadow: 0 24px 60px rgba(9, 14, 24, .38);
}
.guia-modal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.guia-modal-top h2 { margin: 0; }
.guia-modal-botones { display: flex; flex-wrap: wrap; gap: 8px; }
/* En el diálogo la captura se limita contra la ventana, no contra la página.
Sin el botón de «ver en grande» y con la paginación en un solo renglón, la
captura se puede llevar el alto que sobra. */
.guia-modal .guia-img { max-height: min(68vh, 760px); }
/* La paginación se va a la derecha, pegada a «Siguiente», en vez de partir el
renglón en tres y comerse alto en el centro. */
.guia-modal .guia-mando {
position: static;
box-shadow: none;
border: 0;
padding: 0;
width: 100%;
justify-content: space-between;
}
.guia-modal .guia-medio {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
margin-left: auto;
}
.guia-modal .guia-mando > [data-ir="1"] { margin-left: 14px; }
@media (max-width: 860px) {
.guia-modal-caja { padding: 12px; }
.btn-ayuda small { display: none; }
}
/* ==================================================================
Admiro: tarjetas de KPI y menú
Tomado de intelli-os/theme/admin — .small-widget de
assets/scss/pages/_general-widget.scss y .sidebar-link de
assets/scss/layout/_sidebar.scss.
================================================================== */
/* --- KPI ---------------------------------------------------------
Las vistas arman la tarjeta de dos maneras: unas ponen etiqueta,
número y pie como hermanos sueltos; otras los meten juntos en un
. Por eso NO se usa rejilla: se apaga la que traía theme.css,
la tarjeta vuelve a ser un bloque normal (que apila igual en los dos
casos) y el icono se saca del flujo. Así no hay una colocación que
adivinar por cada vista. */
.metric-card,
.kpi-tile {
position: relative;
overflow: hidden;
min-height: 0 !important;
padding: 18px 20px !important;
}
.metric-card:has(> .metric-icon) {
display: block !important;
grid-template-columns: none !important;
padding-right: 80px !important;
}
.metric-card:has(> .metric-icon) > *:not(.metric-icon) { grid-column: auto !important; }
/* El círculo decorativo de la esquina sobra: el icono ya es el adorno. */
.metric-card::after,
.kpi-tile::after { display: none !important; }
.metric-card > span:not(.metric-icon),
.metric-card .metric-label,
.kpi-tile .kpi-name {
display: block;
margin: 0 !important;
font-size: 12.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.3 !important;
}
.metric-card strong,
.metric-card .metric-value,
.kpi-tile .kpi-value {
display: block;
margin: 3px 0 2px !important;
font-size: 23px !important;
font-weight: 700 !important;
letter-spacing: -.02em !important;
line-height: 1.2 !important;
}
.metric-card small,
.metric-card .metric-note,
.kpi-tile .kpi-foot {
display: block;
margin: 0 !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
}
.metric-card .metric-icon,
.kpi-tile .kpi-ic {
position: absolute !important;
right: -12px;
top: 50%;
transform: translateY(-50%);
display: grid !important;
place-items: center;
width: 60px !important;
height: 60px !important;
margin: 0 !important;
border-radius: 100px !important;
background: linear-gradient(144.16deg, rgba(var(--pc-accent-rgb), .14) 19.06%, rgba(var(--pc-accent-rgb), 0) 79.03%) !important;
color: var(--pc-accent) !important;
box-shadow: none !important;
}
.metric-card .metric-icon svg.icon,
.kpi-tile .kpi-ic svg.icon { width: 23px !important; height: 23px !important; }
/* Los tonos que ya usaban las vistas, ahora como degradado. */
.metric-card .metric-icon--coral {
background: linear-gradient(144.16deg, rgba(231, 111, 81, .16) 19.06%, rgba(231, 111, 81, 0) 79.03%) !important;
color: #e76f51 !important;
}
.metric-card .metric-icon--green {
background: linear-gradient(144.16deg, rgba(42, 157, 143, .16) 19.06%, rgba(42, 157, 143, 0) 79.03%) !important;
color: #2a9d8f !important;
}
/* En la tarjeta de acento (fondo oscuro) el degradado va en blanco. */
.metric-card--accent .metric-icon {
background: linear-gradient(144.16deg, rgba(255, 255, 255, .22) 19.06%, rgba(255, 255, 255, 0) 79.03%) !important;
color: #fff !important;
}
/* El theme levanta la tarjeta al pasar por encima. */
.metric-card, .kpi-tile { transition: transform .35s ease, box-shadow .35s ease; }
.metric-card:hover, .kpi-tile:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
.metric-card, .kpi-tile { transition: none; }
.metric-card:hover, .kpi-tile:hover { transform: none; }
}
@media (max-width: 640px) {
.metric-card:has(> .metric-icon) { padding-right: 68px !important; }
.metric-card .metric-icon, .kpi-tile .kpi-ic { width: 52px !important; height: 52px !important; right: -10px; }
}
/* --- Menú --------------------------------------------------------
El theme usa renglones de 5 px de radio con el icono suelto, no
píldoras con el icono dentro de una cajita. */
.primary-nav .nav-item {
grid-template-columns: 22px 1fr auto !important;
gap: 11px !important;
min-height: 42px !important;
padding: 11px 10px !important;
border-radius: 6px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
}
.primary-nav .nav-item > svg.icon {
width: 20px !important;
height: 20px !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
color: var(--pc-muted-navy) !important;
}
.primary-nav a.nav-item:hover { background: rgba(var(--pc-accent-rgb), .08) !important; }
.primary-nav a.nav-item:hover > svg.icon { color: var(--pc-accent) !important; }
/* Activo: el fondo suave del theme, sin bloque sólido ni sombra. */
.primary-nav .nav-item.is-active {
background: rgba(var(--pc-accent-rgb), .2) !important;
color: var(--pc-accent) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.primary-nav .nav-item.is-active > svg.icon { background: none !important; color: var(--pc-accent) !important; }
.primary-nav .nav-item.is-active small { background: var(--pc-accent) !important; color: #fff !important; }
/* «Inicio» era un bloque azul aparte; ahora es un renglón como los demás. */
.primary-nav > a.nav-item:first-child {
margin-bottom: 2px !important;
min-height: 42px !important;
padding: 11px 10px !important;
border-radius: 6px !important;
background: transparent !important;
color: var(--pc-text) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
box-shadow: none !important;
}
.primary-nav > a.nav-item:first-child > svg.icon {
width: 20px !important;
height: 20px !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
color: var(--pc-muted-navy) !important;
}
.primary-nav > a.nav-item:first-child:hover { background: rgba(var(--pc-accent-rgb), .08) !important; color: var(--pc-accent) !important; }
.primary-nav > a.nav-item:first-child.is-active { background: rgba(var(--pc-accent-rgb), .2) !important; color: var(--pc-accent) !important; }
.primary-nav > a.nav-item:first-child.is-active > svg.icon { color: var(--pc-accent) !important; }
/* Los grupos vuelven a ser títulos, no barras de color. */
.primary-nav .nav-sec > summary.nav-group {
min-height: 0 !important;
margin-top: 10px !important;
padding: 6px 10px 4px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--pc-muted-navy) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.primary-nav .nav-sec > summary.nav-group:hover { background: transparent !important; color: var(--pc-accent) !important; }
.primary-nav .nav-sec.has-active > summary.nav-group { color: var(--pc-accent) !important; }