/* ============================================================================ INCANORT · CAPA GLOBAL DE INTERACCIÓN VISUAL (incanort-ui.css) ---------------------------------------------------------------------------- Una sola hoja, idéntica en Panel, Aula (alumno y admin) y Contratos. Se carga DESPUÉS de estilo.css. No usa las variables de cada sitio (cada uno tiene su propia paleta): define las suyas con el prefijo --inc-. QUÉ HACE 1. Filas de tabla/listado: resaltado suave al pasar el mouse + estado "seleccionada" que se conserva (clase .fila-sel). 2. Tarjetas clickeables: borde/sombra suave y elevación mínima (1 px). 3. Botones: hover reconocible (sólidos se oscurecen; de contorno se tiñen). 4. Menús y pestañas: hover distinto del estado activo. 5. Iconos de acción: fondo circular suave. 6. Foco de teclado (:focus-visible) coherente en todo el sistema. 7. Táctil: sin hover pegado; feedback con :active. CÓMO USARLO EN ELEMENTOS NUEVOS (no hace falta escribir más CSS) · Fila clickeable ........ o data-href="..." · Fila que abre un panel . añadir data-sel-key="alumno-12" (se recuerda al volver) · Lista que no es tabla ..
(hover) · .fila-sel (seleccionada) · Tarjeta clickeable ..... o
· Botón sólido / contorno class="inc-btn" / class="inc-btn inc-btn-borde" (los .btn, .btn-azul, .btn-outline, etc. existentes ya lo heredan solos) · Icono de acción ........ (.inc-icono.peligro para eliminar). Tooltip propio: data-tip="Texto". · Pestaña ................ class="inc-tab" (+ .activo en la actual) · Excluir un elemento .... class="sin-hover" ========================================================================== */ :root { --inc-azul: #173559; --inc-azul-osc: #102a45; --inc-azul-suave: #eaf0f9; /* fondo de hover claro */ --inc-azul-sel: #dde8f7; /* fondo de fila seleccionada */ --inc-oro: #ffd200; --inc-foco: #2f6da8; --inc-rojo: #c53030; --inc-rojo-suave: #fdecea; --inc-borde: #d5dcea; --inc-trans: .17s ease; --inc-sombra-card: 0 4px 14px rgba(23, 53, 89, .12); } /* --------------------------------------------------------------------------- 0. Transiciones (solo en elementos interactivos; nunca en "*") ------------------------------------------------------------------------- */ table tbody tr > td, .inc-fila, .pr-alumno-item, .db-curso-fila, .fila-dato, .alt-opcion, .notif-item, .inc-card, .curso-card, .ae-card, .rec-cat, .atajo-btn, .kpi-card, a.modulo-card, .inc-btn, .btn, .btn-azul, .btn-dorado, .btn-oro, .btn-verde, .btn-rojo, .btn-wa, .btn-outline, .btn-borde, .btn-chico, .btn-sm, .btn-icon, .ea-btn, .enc-btn, .bienv-btn, .btn-confirmar, .inc-tab, .dash-tab, .pc-tab, .tab-btn, .mat-tab, .ea-tabs a, .inc-icono, .btn-del-mod, .btn-quitar, .pi-btn-borrar, .ins-ico { transition: background-color var(--inc-trans), border-color var(--inc-trans), box-shadow var(--inc-trans), color var(--inc-trans), filter var(--inc-trans), transform var(--inc-trans); } /* --------------------------------------------------------------------------- 1. FILAS (hover suave + selección persistente) Se usa una capa translúcida (inset box-shadow) para no pisar los colores de estado de cada fila (pagada, parcial, etc.). ------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { table:where(:not(.sin-hover)) > tbody > tr:where(:not(.sin-hover)):hover > td, .inc-fila:where(:not(.sin-hover)):hover, .pr-alumno-item:hover, .db-curso-fila:hover, .fila-dato:hover, .alt-opcion:hover, .notif-item:hover { box-shadow: inset 0 0 0 100vmax rgba(23, 53, 89, .05); } /* si la fila hace algo al hacer clic, además se ve "clickeable" (el cursor lo da la sección 1b) */ } /* 1b. Cursor: solo si la fila realmente hace algo */ tr[onclick], tr[data-href], tr.fila-click, .inc-fila[onclick], .inc-fila[data-href], .inc-fila.fila-click, tr[onclick] > td, tr[data-href] > td, tr.fila-click > td { cursor: pointer; } .pr-alumno-item, .db-curso-fila, .alt-opcion { cursor: pointer; } /* 1c. Fila SELECCIONADA (se mantiene aunque el mouse salga): barra azul a la izquierda + fondo más marcado */ table > tbody > tr.fila-sel > td, table > tbody > tr[aria-selected="true"] > td, table > tbody > tr.seleccionado > td, .inc-fila.fila-sel, .inc-fila[aria-selected="true"], .db-curso-fila.seleccionado, .pr-alumno-item.activo { box-shadow: inset 0 0 0 100vmax rgba(23, 53, 89, .10); } table > tbody > tr.fila-sel > td:first-child, table > tbody > tr[aria-selected="true"] > td:first-child, table > tbody > tr.seleccionado > td:first-child, .inc-fila.fila-sel, .inc-fila[aria-selected="true"], .db-curso-fila.seleccionado, .pr-alumno-item.activo { box-shadow: inset 4px 0 0 var(--inc-azul), inset 0 0 0 100vmax rgba(23, 53, 89, .10); } /* mouse sobre la seleccionada: queda igual de marcada (no se confunde con un simple hover) */ @media (hover: hover) and (pointer: fine) { table > tbody > tr.fila-sel:hover > td, table > tbody > tr[aria-selected="true"]:hover > td, table > tbody > tr.seleccionado:hover > td { box-shadow: inset 0 0 0 100vmax rgba(23, 53, 89, .12); } table > tbody > tr.fila-sel:hover > td:first-child, table > tbody > tr[aria-selected="true"]:hover > td:first-child, table > tbody > tr.seleccionado:hover > td:first-child { box-shadow: inset 4px 0 0 var(--inc-azul), inset 0 0 0 100vmax rgba(23, 53, 89, .12); } } /* --------------------------------------------------------------------------- 2. TARJETAS CLICKEABLES ------------------------------------------------------------------------- */ .inc-card, .curso-card, .ae-card, .rec-cat, .atajo-btn, a.modulo-card:not(.bloqueado), a.kpi-card, .kpi-card[onclick], .inc-card[onclick] { cursor: pointer; } .modulo-card.bloqueado { cursor: not-allowed; } @media (hover: hover) and (pointer: fine) { .inc-card:hover, .curso-card:hover, .ae-card:hover, .rec-cat:hover { border-color: var(--inc-azul); box-shadow: var(--inc-sombra-card); transform: translateY(-1px); } /* tarjetas con borde de color propio (estado del módulo, tipo de indicador): se conserva ese color */ a.modulo-card:not(.bloqueado):hover, a.kpi-card:hover, .kpi-card[onclick]:hover { box-shadow: var(--inc-sombra-card); transform: translateY(-1px); } .atajo-btn:hover { background: var(--inc-azul-suave); border-color: var(--inc-azul); box-shadow: var(--inc-sombra-card); } } /* las tarjetas "kpi" que NO hacen nada ya no se mueven */ .kpi-card:not([onclick]):not(a):hover { transform: none; box-shadow: var(--sombra, 0 2px 14px rgba(27,47,94,.10)); } /* --------------------------------------------------------------------------- 3. BOTONES Sólidos: se oscurecen un poco. De contorno: se tiñen de azul suave. ------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .inc-btn:not(.inc-btn-borde):not(:disabled):not(.disabled):hover, .btn:not(.btn-outline):not(.btn-borde):not(:disabled):not(.disabled):hover, .btn-azul:not(:disabled):not(.disabled):hover, .btn-dorado:not(:disabled):hover, .btn-oro:not(:disabled):hover, .btn-verde:not(:disabled):hover, .btn-rojo:not(:disabled):hover, .btn-wa:not(:disabled):hover, .btn-chico:not(.btn-borde):not(:disabled):hover, .ea-btn:not(.sec):not(:disabled):hover, .enc-btn:not(:disabled):hover, .bienv-btn:not(:disabled):hover, .btn-confirmar:not(:disabled):hover, button[type="submit"]:not([class]):not(:disabled):hover, input[type="submit"]:not(:disabled):hover { filter: brightness(.9); } .inc-btn-borde:not(:disabled):not(.disabled):hover, .btn-outline:not(:disabled):not(.disabled):hover, .btn-borde:not(:disabled):not(.disabled):hover, .ea-btn.sec:not(:disabled):hover { background-color: var(--inc-azul-suave); border-color: var(--inc-azul); color: var(--inc-azul); filter: none; } } /* presionado (también en celular): respuesta inmediata y discreta */ .inc-btn:not(:disabled):active, .btn:not(:disabled):active, .btn-azul:not(:disabled):active, .btn-dorado:not(:disabled):active, .btn-oro:not(:disabled):active, .btn-verde:not(:disabled):active, .btn-rojo:not(:disabled):active, .btn-wa:not(:disabled):active, .btn-chico:not(:disabled):active, .ea-btn:not(:disabled):active, .enc-btn:not(:disabled):active, .bienv-btn:not(:disabled):active, .btn-outline:not(:disabled):active, .btn-borde:not(:disabled):active { filter: brightness(.85); } .inc-btn-borde:not(:disabled):active, .btn-outline:not(:disabled):active, .btn-borde:not(:disabled):active, .ea-btn.sec:not(:disabled):active { background-color: var(--inc-azul-sel); filter: none; } button:disabled, .btn:disabled, .btn.disabled, .inc-btn:disabled, .ea-btn:disabled { cursor: not-allowed; } /* --------------------------------------------------------------------------- 4. MENÚS Y PESTAÑAS Normal → hover (fondo suave) → activo (siempre más fuerte que el hover). Los menús oscuros (barra lateral / barra superior) ya traen su hover en estilo.css; aquí solo se garantiza que el ACTIVO no cambie al pasar el mouse. ------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .inc-tab:not(.activo):not(.on):not(.active):not([aria-selected="true"]):hover, .dash-tab:not(.activo):hover, .pc-tab:not(.on):not(.activo):hover, .tab-btn:not(.on):not(.activo):hover, .mat-tab:not(.on):not(.activo):hover, [role="tab"]:not([aria-selected="true"]):hover, .ea-tabs a:not(.on):hover { background-color: var(--inc-azul-suave); color: var(--inc-azul); } .nav-item.activo:hover, .nav-item-plegable .nav-item-txt.activo:hover, .barra nav a.activo:hover { filter: none; } /* desplegables y opciones de lista */ select option:hover, .dropdown a:hover, .menu-desplegable a:hover, [role="menuitem"]:hover, [role="option"]:hover { background-color: var(--inc-azul-suave); } } .pc-tab.on:hover, .dash-tab.activo:hover { background: none; } /* --------------------------------------------------------------------------- 5. ICONOS DE ACCIÓN (editar, eliminar, ver, copiar, subir, bajar, ajustes, info) ------------------------------------------------------------------------- */ .inc-icono, .btn-del-mod, .btn-quitar, .ins-ico { cursor: pointer; } @media (hover: hover) and (pointer: fine) { .inc-icono:not(:disabled):hover, .ins-ico:hover { background-color: var(--inc-azul-suave); color: var(--inc-azul); border-radius: 50%; } .inc-icono.peligro:not(:disabled):hover, .btn-del-mod:hover, .pi-btn-borrar:hover { background-color: var(--inc-rojo-suave); color: var(--inc-rojo); } } .inc-icono { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border: none; background: transparent; color: inherit; border-radius: 50%; font-size: 1rem; line-height: 1; } .inc-icono:not(:disabled):active { background-color: var(--inc-azul-sel); } /* Tooltip propio para iconos cuyo significado no es evidente: