. Cuando ya no queden coincidencias de .has-navbar-brand en templates/, este bloque se puede borrar. -------------------------------------------------------------- */ body.has-navbar-brand { padding-top: calc(var(--navbar-h) + var(--space-5)); } /* --- Marca --------------------------------------------------- */ .t-navbar__brand { display: flex; align-items: center; gap: var(--space-2); color: var(--text); flex-shrink: 0; text-decoration: none; } .t-navbar__mark { width: 26px; height: 26px; flex-shrink: 0; /* El isotipo hereda currentColor en dos de sus tres tramos. */ color: var(--text); } .t-navbar__wordmark { font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); } /* --- Enlaces ------------------------------------------------- */ .t-navbar__menu { display: flex; align-items: center; flex: 1; min-width: 0; } .t-navbar__links { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; /* Los menús colgantes se posicionan en absoluto: no puede recortar. */ overflow: visible; } .t-navbar__link { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding-inline: var(--space-3); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; background: transparent; border: none; text-decoration: none; transition: background-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .t-navbar__link:hover { background-color: var(--overlay-hover); color: var(--text); } } .t-navbar__link.is-active { background-color: var(--accent-tint); color: var(--brand-400); } .t-navbar__link i { font-size: 14px; opacity: 0.9; } /* --- Grupo desplegable --------------------------------------- */ .t-drop { position: relative; } .t-drop__chevron { font-size: 9px !important; opacity: 0.7; transition: transform var(--dur-menu) var(--ease-out); } .t-drop.is-open .t-drop__chevron { transform: rotate(180deg); } .t-drop__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px; padding: var(--space-2); background-color: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); /* Escala desde la esquina del disparador, no desde el centro: el menú debe parecer que sale del botón que lo abrió. */ transform-origin: top left; opacity: 0; transform: scale(0.96); visibility: hidden; transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out), visibility 0s linear var(--dur-menu); } .t-drop.is-open .t-drop__menu { opacity: 1; transform: scale(1); visibility: visible; transition-delay: 0s; } .t-drop__menu a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; text-decoration: none; transition: background-color var(--dur-press) var(--ease-out); } .t-drop__menu a i { font-size: 14px; opacity: 0.75; width: 16px; } @media (hover: hover) and (pointer: fine) { .t-drop__menu a:hover { background-color: var(--overlay-hover); } } .t-drop__menu a.is-active { color: var(--brand-400); background-color: var(--accent-tint); } /* --- Selector de color --------------------------------------- */ /* Los menús de la derecha se anclan por ese lado: abiertos desde la izquierda se saldrían de la ventana. */ .t-drop--right .t-drop__menu { left: auto; right: 0; transform-origin: top right; } .t-color-chip { display: block; width: 15px; height: 15px; border-radius: var(--radius-full); background-color: var(--accent); box-shadow: 0 0 0 1px var(--border-strong); } .t-color-panel { min-width: 244px; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .t-color-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); } .t-color-preset { aspect-ratio: 1; border-radius: var(--radius-full); border: 2px solid transparent; transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .t-color-preset:hover { transform: scale(1.12); } } .t-color-preset:active { transform: scale(0.94); } .t-color-preset[aria-pressed='true'] { border-color: var(--text); } .t-color-slider { display: flex; flex-direction: column; gap: var(--space-2); } /* La pista muestra el círculo cromático completo, así el deslizador enseña de antemano el color que va a aplicar. */ .t-color-slider input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: var(--radius-full); background: linear-gradient( to right, oklch(0.63 0.19 0), oklch(0.63 0.19 60), oklch(0.63 0.19 120), oklch(0.63 0.19 180), oklch(0.63 0.19 240), oklch(0.63 0.19 300), oklch(0.63 0.19 360) ); outline-offset: 4px; } .t-color-slider input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--accent); border: 2px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; } .t-color-slider input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--accent); border: 2px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; } .t-color-aviso { display: flex; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--warn); } /* --- Acciones ------------------------------------------------ */ .t-navbar__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; margin-left: auto; } .t-navbar__logout-form { display: flex; margin: 0; } /* --- Alternador táctil / móvil ------------------------------- */ .t-navbar__toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); color: var(--text); font-size: 18px; background: transparent; border: none; transition: background-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out); } .t-navbar__toggle:active { transform: scale(0.94); } @media (max-width: 1100px) { .t-navbar__toggle { display: inline-flex; margin-left: auto; } .t-navbar__menu { position: absolute; top: var(--navbar-h); left: 0; right: 0; flex-direction: column; align-items: stretch; padding: var(--space-3); background-color: var(--surface-2); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); /* Se pliega con clip-path en lugar de height: no requiere conocer la altura del contenido y no dispara layout. */ clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; transition: clip-path var(--dur-menu) var(--ease-out), opacity var(--dur-menu) var(--ease-out), visibility 0s linear var(--dur-menu); } .t-navbar.is-open .t-navbar__menu { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition-delay: 0s; } .t-navbar__links { flex-direction: column; align-items: stretch; gap: var(--space-1); } .t-navbar__link { height: var(--touch-min); font-size: var(--text-sm); } /* En el menú plegado los grupos se expanden en flujo, sin capa flotante: en pantalla angosta un submenú absoluto se sale. */ .t-drop.is-open .t-drop__menu { position: static; min-width: 0; margin: var(--space-1) 0 var(--space-2) var(--space-4); background-color: transparent; border: none; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none; transform: none; } .t-navbar__actions { margin-left: 0; padding-top: var(--space-3); border-top: 1px solid var(--border); } }