.ix-panel { max-width: 1000px; margin: 40px auto; padding: 0 20px; } .ix-crumbs { font-size: 13px; /* El breadcrumb toma los colores de la compañía (antes era gris fijo y se perdía sobre fondos oscuros). */ color: var(--ix-breadcrumb-text, #666); margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .ix-crumbs a { color: var(--ix-breadcrumb-text, #666); text-decoration: none; } .ix-crumbs a:hover { color: var(--ix-breadcrumb-link, var(--ix-main-accent, #2563eb)); text-decoration: underline; } .ix-crumb-sep { color: var(--ix-breadcrumb-text, #999); opacity: 0.6; } .ix-crumb-current { /* BUG FIX: antes .ix-crumbs no tenía NINGÚN estilo (el CSS existente apuntaba a la clase vieja .ix-breadcrumb, que el HTML real ya no usa), así que todo el breadcrumb, incluido el item activo, caía al azul de link por defecto del navegador. El item activo ahora usa el mismo "active text" que el resto de grids/tabs. */ color: var(--ix-breadcrumb-active-text, var(--ix-main-active-text, var(--ix-main-text, #111))); font-weight: 600; } /* BUG FIX: varias plantillas (clients.php, contract-detail.php, billing-detail.php, playbooks.php, requests.php, users-management.php, module-content.php, module-menu.php) NO usan .ix-crumbs — tienen su propio breadcrumb con clases de Tailwind hardcodeadas directo en el PHP (text-blue-600 hover:text-blue-800, text-gray-900 font-medium). Esas clases nunca tomaban el color de la compañía. Se renombraron a ix-crumb-link / ix-crumbs-legacy / ix-crumb-current-legacy en el HTML; acá van sus estilos. El !important es necesario porque estas plantillas cargan Tailwind por CDN, que puede pisar reglas normales según el orden de carga en el . */ .ix-crumbs-legacy, .ix-crumbs-legacy .mx-2 { color: var(--ix-breadcrumb-text, #666) !important; } .ix-crumb-link { color: var(--ix-breadcrumb-text, #666) !important; text-decoration: none; } .ix-crumb-link:hover { color: var(--ix-breadcrumb-link, var(--ix-main-accent, #2563eb)) !important; text-decoration: underline; } .ix-crumb-current-legacy { color: var(--ix-breadcrumb-active-text, var(--ix-main-active-text, var(--ix-main-text, #111))) !important; } .ix-company-grid, .ix-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; } .ix-company-card, .ix-module-card { display: block; padding: 20px; border: 1px solid #e2e2e2; border-radius: 10px; text-decoration: none; color: #1d1d1f; background: #fff; transition: box-shadow .15s ease, transform .15s ease; } .ix-company-card:hover, .ix-module-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); } .ix-company-name { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; } .ix-company-meta { display: block; font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: .03em; } .ix-submodule-list { margin: 8px 0 0 4px; padding: 0; list-style: none; } .ix-submodule-list li a { display: block; padding: 6px 8px; font-size: 13px; color: #444; text-decoration: none; border-left: 2px solid #ddd; padding-left: 12px; } .ix-submodule-list li a:hover { border-left-color: #333; color: #000; } .ix-login-wrap { max-width: 380px; margin: 60px auto; padding: 32px; border: 1px solid #e2e2e2; border-radius: 12px; background: #fff; } .ix-login-form label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; } .ix-login-form input[type="text"], .ix-login-form input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } .ix-login-form .ix-remember { display: flex; align-items: center; gap: 6px; font-weight: 400; } .ix-login-form button { width: 100%; margin-top: 18px; padding: 11px; border: 0; border-radius: 6px; background: #1d1d1f; color: #fff; font-weight: 600; cursor: pointer; } .ix-login-error { background: #fdecea; color: #a00; padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 10px; } .ix-forgot-link { display: block; margin-top: 14px; font-size: 12px; text-align: center; color: #666; } /* ===================== SHELL: HEADER + SIDEBAR ===================== */ * { box-sizing: border-box; } body.ix-app-body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f6f8; color: #1d1d1f; } .ix-header-bar { position: sticky; top: 0; z-index: 100; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--ix-header-bg, #16181d); color: #fff; } .ix-header-left { display: flex; align-items: center; gap: 14px; } /* * Toggle del sidebar: control de navegación del panel, pero pintado con la * marca de la compañía (fondo hover, borde e ícono), igual que el resto de * los íconos del header. El intercambio hamburguesa/X lo controla JS * (ver el