/* Aspecto común de la plataforma AIAP. Cada módulo trae sus estilos dentro de su página; esta hoja se carga al final del y fija UNA paleta para todos: la identidad Ibn Sina (verde profundo, dorado y crema). Los módulos usan dos familias de nombres de variable según de qué app vienen; aquí se definen las dos con los mismos colores, así que basta tocar este archivo para cambiar el aspecto de todo. */ :root { /* familia 1: estados de cuenta, CRM, vida escolar, tienda, biblioteca */ --bg: #F1EEE3; --surface: #ffffff; --surface-2: #F8F5EC; --ink: #1d2b23; --ink-2: #47584e; --ink-3: #7f8c84; --line: #e4dfd0; --line-2: #efeadc; --brand: #17573A; --brand-ink: #0E3B26; --brand-soft: #E4EEE7; --dorado: #C9973A; --dorado-soft: #F7EFDD; --oro: #a87a1e; --oro-soft: #F7EFDD; --ok: #1e7a3c; --ok-soft: #e4eee7; --warn: #8a5a0a; --warn-soft: #f9efd7; --bad: #c0392b; --bad-soft: #fbe7e4; --shadow: 0 1px 2px rgba(23,87,58,.05), 0 8px 24px rgba(23,87,58,.08); /* familia 2: usuarios, reclutamiento y planilla */ --verde: #17573A; --verde-osc: #0E3B26; --crema: #F1EEE3; --borde: #e4dfd0; --texto: #1d2b23; --gris: #6f7d74; --rojo: #c0392b; /* familia 3: bus escolar y tickets (servicios Flask) */ --fondo: #F1EEE3; --azul: #17573A; --azul-osc: #0E3B26; --arena: #C9973A; --amarillo: #C9973A; --error: #c0392b; --alerta: #8a5a0a; } body { font-family: Inter, "Segoe UI", system-ui, sans-serif; } /* --- Barra común ---------------------------------------------------------- */ #aiap-barra, #aiap-barra * { box-sizing: border-box; } #aiap-barra { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; margin: 0; background: #0E3B26; color: #fff; border-bottom: 2px solid #C9973A; font: 500 13px/1 Inter, "Segoe UI", system-ui, sans-serif; position: relative; z-index: 900; } #aiap-barra a, #aiap-barra button { font: inherit; color: #dfe9e2; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; } #aiap-barra a:hover, #aiap-barra button:hover, #aiap-barra button[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; } #aiap-barra .aiap-marca { font-weight: 600; color: #fff; padding-left: 4px; } #aiap-barra .aiap-marca img { height: 26px; width: 26px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; } #aiap-barra .aiap-donde { color: #C9973A; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #aiap-barra .aiap-sep { flex: 1; } #aiap-barra .aiap-yo { color: #b9cbbf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; padding: 0 6px; } #aiap-menu { position: absolute; top: 44px; left: 10px; z-index: 901; width: min(680px, calc(100vw - 20px)); max-height: calc(100vh - 70px); overflow: auto; background: #fff; color: #1d2b23; border: 1px solid #e4dfd0; border-radius: 14px; box-shadow: 0 18px 50px rgba(14,59,38,.28); padding: 14px; font: 400 13px/1.35 Inter, "Segoe UI", system-ui, sans-serif; } #aiap-menu[hidden] { display: none; } #aiap-menu h4 { margin: 10px 6px 6px; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #7f8c84; } #aiap-menu h4:first-child { margin-top: 2px; } #aiap-menu .aiap-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; } #aiap-menu a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: #1d2b23; text-decoration: none; } #aiap-menu a:hover { background: #F1EEE3; } #aiap-menu a.aiap-aqui { background: #E4EEE7; } #aiap-menu a span.i { font-size: 20px; width: 26px; text-align: center; } #aiap-menu a b { display: block; font-weight: 600; } #aiap-menu a small { display: block; color: #6f7d74; font-size: 11.5px; } @media (max-width: 560px) { #aiap-barra .aiap-marca span, #aiap-barra .aiap-yo { display: none; } } @media print { #aiap-barra, #aiap-menu { display: none !important; } }