/* ══ Componentes transversales del Shell ═══════════════════════════════ UX Master Package V1 · Design System & UX Rules V1. Una sola gramática Touch First para toda FLUX. Esta hoja se carga AL FINAL en los tres layouts del personal —después de la hoja propia de cada pantalla— para que ninguna implementación local se aparte del patrón común. */ /* ── Pestañas contextuales (regla 08, N5) ── Había cinco maneras de dibujar una pestaña: nav-tabs, nav-pills, y las propias de experiencias, impresoras, recetas y suscripciones; unas eran texto sobre una línea, otras botones. Ahora todas son la misma pieza: superficie con borde, alto de dedo y un seleccionado inconfundible. */ .nav-tabs, .nav-pills { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: none; } .nav-tabs .nav-link, .nav-pills .nav-link, .eb-pestana, .imp-pestana, .rcp-tab, .sc-pestanas a, .pg-tabs a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 1rem; border: 1.5px solid var(--flux-gray-300, #E4DED3) !important; border-radius: 12px !important; background: #fff !important; color: var(--flux-ink-700, #171717) !important; font-weight: 600; text-decoration: none !important; margin: 0 !important; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .nav-tabs .nav-link:hover, .nav-pills .nav-link:hover, .eb-pestana:hover, .imp-pestana:hover, .rcp-tab:hover, .sc-pestanas a:hover, .pg-tabs a:hover { background: var(--flux-gold-100, #F6F0E4) !important; border-color: var(--flux-gold-400, #DECBA6) !important; } .nav-tabs .nav-link:active, .nav-pills .nav-link:active, .eb-pestana:active, .imp-pestana:active, .rcp-tab:active, .sc-pestanas a:active, .pg-tabs a:active { background: var(--flux-gold-300, #E9DCC0) !important; } .nav-tabs .nav-link.active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link, .eb-pestana[aria-selected="true"], .imp-pestana[aria-selected="true"], .rcp-tab.activa, .sc-pestanas a.activa, .sc-pestanas a[aria-current="page"], .pg-tabs a.activa { background: var(--flux-ink-900, #0A0A0A) !important; border-color: var(--flux-ink-900, #0A0A0A) !important; color: #fff !important; } .nav-tabs .nav-link.disabled, .nav-pills .nav-link.disabled, .eb-pestana:disabled, .imp-pestana:disabled { opacity: .45; cursor: not-allowed; } .sc-pestanas, .pg-tabs { border-bottom: none !important; gap: 6px !important; } /* Cobros pinta sus ligas de azul con `main .pg a:not(.pg-btn)` (pagos.css): mismo peso y cargada después, esta regla devuelve a sus pestañas el color de la pestaña común. Sin ella, la activa quedaba azul sobre negro. */ main .pg .pg-tabs a { color: var(--flux-ink-700, #171717) !important; text-decoration: none !important; padding: 0 1rem !important; display: inline-flex !important; align-items: center !important; min-height: 44px; } main .pg .pg-tabs a.activa { color: #fff !important; } /* ── Sin texto desnudo como control (regla 05) ── `btn-link` es un botón que se disfraza de texto: se le devuelve una superficie tenue, reconocible y tocable. */ .btn-link { border: 1px solid var(--flux-gray-300, #E4DED3) !important; background: var(--flux-gray-100, #F7F5F0) !important; color: var(--flux-ink-900, #0A0A0A) !important; text-decoration: none !important; border-radius: 10px; } .btn-link:hover { background: var(--flux-gold-100, #F6F0E4) !important; border-color: var(--flux-gold-400, #DECBA6) !important; } .btn-link:active { background: var(--flux-gold-300, #E9DCC0) !important; } /* ── Un envío es uno (U12) ── El botón que se tocó dice que está trabajando y no acepta otro toque. */ .fx-enviando { position: relative; pointer-events: none; opacity: .75; } .fx-enviando::after { content: ""; display: inline-block; vertical-align: -2px; width: 1em; height: 1em; margin-left: .5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fx-gira .7s linear infinite; } @keyframes fx-gira { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .fx-enviando::after { animation: none; border-right-color: currentColor; opacity: .5; } } /* ── Confirmar lo destructivo (U11) ── */ .fx-confirmar { width: min(92vw, 440px); padding: 0; border: none; border-radius: 18px; background: #fff; color: var(--flux-ink-900, #0A0A0A); box-shadow: 0 24px 60px rgba(10, 10, 10, .35); } .fx-confirmar::backdrop { background: rgba(10, 10, 10, .55); } .fx-confirmar-caja { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; } .fx-confirmar-titulo { margin: 0; font-size: 1.25rem; font-weight: 700; text-wrap: balance; } .fx-confirmar-texto { margin: 0; color: var(--flux-gray-600, #716B61); } .fx-confirmar-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .5rem; } .fx-confirmar-botones .btn { min-height: 48px; min-width: 8rem; } /* ── Volver (N4) ── Una sola forma: botón secundario con flecha y el nombre del destino. */ .fx-volver { display: inline-flex; align-items: center; gap: .35rem; } /* ── Ligas con superficie (R05) ── `liga-toca` es el componente de FLUX para una acción que navega: superficie, borde y alto de dedo. La regla general de ligas del contenido (admin.css, muy específica por sus :not) le devolvía el subrayado dorado; aquí gana. */ main a.liga-toca, a.liga-toca { text-decoration: none !important; color: var(--flux-ink-900, #0A0A0A) !important; cursor: pointer; } a.liga-toca:focus-visible { outline: 3px solid var(--flux-gold-500, #D3BC8D); outline-offset: 2px; } a.liga-toca[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* ══ R10 · Tarjetas: informativa contra accionable ═════════════════════ `.card` sola es informativa (flux.css): borde y sombra, sin hover. La que navega o ejecuta —un /