/** * ╔══════════════════════════════════════════════════════════════════════╗ * ║ iga-theme.css — Sistema visual IGA · piloto en Empleados ║ * ║ Nexus · Inversiones Galindo Aros ║ * ╠══════════════════════════════════════════════════════════════════════╣ * ║ Spec: BRIEF_DISENO_IGA_PILOTO.md ║ * ║ ║ * ║ POR QUÉ ESTE ARCHIVO ES CSS A MANO Y NO CLASES DE TAILWIND ║ * ║ El brief (§1.1) asume Tailwind por CDN. Este proyecto lo usa ║ * ║ COMPILADO (assets/css/nexus.css) y hoy `node_modules/` no está ║ * ║ instalado, así que `npm run build:css` no corre. Una clase de ║ * ║ Tailwind nueva no aparecería en el CSS — y el purge no falla con ║ * ║ error: el estilo simplemente no se ve. Escribir los componentes ║ * ║ nuevos como CSS propio los hace inmunes a eso. ║ * ║ ║ * ║ Además es el patrón que el proyecto ya usa para estilos de vista ║ * ║ (.inp en empleados.php, .iga-tab en turnos): no se introduce una ║ * ║ forma nueva de hacer las cosas. ║ * ║ ║ * ║ Se carga DESPUÉS de nexus.css para poder pisarlo cuando hace falta. ║ * ╚══════════════════════════════════════════════════════════════════════╝ */ /* ══════════════════════════════════════════════════════════════════════ 1 · TOKENS DE MARCA (brief §2) ────────────────────────────────────────────────────────────────────── AZUL — El brief propone la escala `blue` de Tailwind (#2563eb). NO se usa, y la razón importa: el sistema ya tiene una paleta azul derivada del LOGO de IGA (--brand-*, en tailwind-entrada.css, sacada del brief de color de Juan Manuel: #79B4D9). Meter un segundo azul, más saturado, dejaría el sidebar de un tono y los elementos nuevos de otro — se vería como un error, no como una decisión. El propio brief lo prevé: "usar lo que genere menos duplicación" (§2.1). Así que --iga-blue-* apunta a la escala de marca que ya existe. PLATEADO — `slate`, como pide el brief: temperatura fría, no el gris cálido de `gray`. ══════════════════════════════════════════════════════════════════════ */ :root { /* Azul de marca — los mismos valores que --brand-*, expresados aquí en hex para poder usarlos en gradientes y rgba() sin ceremonia. */ --iga-blue-50: #f4f9fc; --iga-blue-100: #e7f2f8; --iga-blue-400: #96c5e1; --iga-blue-500: #79b4d9; --iga-blue-600: #6a9ebf; --iga-blue-700: #557e98; --iga-blue-900: #273a45; --iga-blue-950: #0f1c2e; /* el mismo del manifest y del favicon */ /* Plateado — escala slate de Tailwind */ --iga-silver-50: #f8fafc; --iga-silver-100: #f1f5f9; --iga-silver-200: #e2e8f0; --iga-silver-400: #94a3b8; --iga-silver-600: #475569; --iga-black: #0f172a; --iga-white: #ffffff; } /* ══════════════════════════════════════════════════════════════════════ 2 · HEADER EN DOS FRANJAS (refinamiento brief §1) ────────────────────────────────────────────────────────────────────── Antes el título de la vista y el saludo peleaban en la misma línea, sin jerarquía. Ahora son dos franjas: arriba el saludo y el usuario, debajo el título con su propio sitio. Las dos van oscuras porque el brief asigna el negro al header (§2.2). El markup del header estaba escrito para fondo blanco, así que aquí se reasignan los colores en bloque en vez de reescribir el HTML: menos superficie de cambio, menos regresión. Lo pinta includes/header_vista.php, un solo archivo para todo el sistema. ══════════════════════════════════════════════════════════════════════ */ /* ── Franja superior: saludo, usuario, avatar ───────────────────────── */ .iga-franja-superior { background: var(--iga-blue-950); border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--iga-silver-200); } .iga-franja-superior .iga-h-nombre { color: var(--iga-silver-200); } .iga-franja-superior .iga-h-correo { color: var(--iga-silver-400); } .iga-pill-saludo { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--iga-blue-400); } .iga-pill-saludo span { color: inherit; } /* ── Franja de título: aquí sí va el glass ────────────────────────────── El blur solo EXISTE si hay algo que difuminar detrás, y eso exige que el contenido pase por debajo: de ahí el `sticky`. Sin él la franja se vería simplemente translúcida, que no es lo mismo. El degradado va de azul-950 a azul-900 —no al azul del brief (#1e3a8a), que es de otra escala— para no meter un segundo azul que se leería como error de color junto al sidebar. */ .iga-franja-titulo { position: sticky; top: 0; z-index: 30; padding: 1.15rem 2rem; text-align: center; background: linear-gradient(135deg, rgba(15, 28, 46, 0.88), rgba(39, 58, 69, 0.80)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Sin soporte de backdrop-filter, un fondo translúcido deja leer el contenido a través de la franja. Se vuelve opaca: menos bonita, legible. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .iga-franja-titulo { background: var(--iga-blue-950); } } .iga-titulo-vista { margin: 0; color: var(--iga-white); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; /* Un título largo en pantalla angosta debe partir, no desbordar lateralmente y romper el layout. */ overflow-wrap: anywhere; } .iga-subtitulo-vista { margin: .2rem 0 0; color: var(--iga-silver-400); font-size: .78rem; font-weight: 500; letter-spacing: .01em; } @media (max-width: 640px) { .iga-franja-titulo { padding: .85rem 1rem; } .iga-titulo-vista { font-size: 1.1rem; } } /* ══════════════════════════════════════════════════════════════════════ 3 · ACENTO TORNASOL — UN SOLO PUNTO (brief §4) ────────────────────────────────────────────────────────────────────── Va en el botón "Agregar Empleado": la acción primaria más importante de la pantalla (candidato 2 del brief). REGLA: si esto aparece en un segundo elemento de la misma pantalla, deja de ser acento. Es condimento, no salsa base. Antes de reutilizar esta clase en otro lado, quitarla de aquí. El gradiente recorre azul de marca → plateado → cian, y se DESPLAZA al pasar el mouse (por eso el background-size de 200%): el tornasol se nota en el movimiento, no en el color quieto. ══════════════════════════════════════════════════════════════════════ */ .iga-acento-tornasol { background-image: linear-gradient( 110deg, var(--iga-blue-700) 0%, var(--iga-blue-500) 30%, #a8c8dd 50%, #5eead4 70%, var(--iga-blue-600) 100% ); background-size: 200% 100%; background-position: 0% 50%; transition: background-position .55s ease, box-shadow .25s ease, transform .12s ease; box-shadow: 0 2px 10px rgba(106, 158, 191, 0.35); } .iga-acento-tornasol:hover { background-position: 100% 50%; box-shadow: 0 4px 16px rgba(106, 158, 191, .45); } .iga-acento-tornasol:active { transform: translateY(1px); } /* Quien pidió menos animación no debería recibir un degradado en marcha. */ @media (prefers-reduced-motion: reduce) { .iga-acento-tornasol { transition: none; } .iga-acento-tornasol:hover { background-position: 0% 50%; } } /* ══════════════════════════════════════════════════════════════════════ 4 · TOGGLE LISTA / TARJETAS (brief §5.1) ══════════════════════════════════════════════════════════════════════ */ .iga-toggle-vista { display: inline-flex; padding: 3px; gap: 2px; background: var(--iga-silver-100); border: 1px solid var(--iga-silver-200); border-radius: .75rem; } .iga-toggle-vista button { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: .55rem; font-size: 11px; font-weight: 700; color: var(--iga-silver-600); background: transparent; border: 0; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .iga-toggle-vista button:hover { color: var(--iga-blue-700); } /* `aria-pressed` no es decorativo: es lo que le dice a un lector de pantalla cuál vista está activa. Se usa TAMBIÉN como selector para que el estado visual y el accesible no puedan separarse por descuido. */ .iga-toggle-vista button[aria-pressed="true"] { background: var(--iga-white); color: var(--iga-blue-700); box-shadow: 0 1px 3px rgba(15, 23, 42, .10); } .iga-toggle-vista button:focus-visible { outline: 2px solid var(--iga-blue-500); outline-offset: 1px; } /* ══════════════════════════════════════════════════════════════════════ 5 · VISTA TARJETAS (brief §5.2) ────────────────────────────────────────────────────────────────────── SIN glassmorphism, a propósito: son superficie de datos repetida y el brief lo prohíbe explícitamente (§3.2). Blur sobre 15 tarjetas —o sobre 200 cuando crezca la nómina— cansa la vista y cuesta de renderizar. ══════════════════════════════════════════════════════════════════════ */ .iga-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; padding: 1.25rem 1.5rem 1.5rem; } /* En pantallas angostas se fuerza UNA columna en vez de confiar en el auto-fill. Con minmax(250px, …) y los 3rem de padding lateral, un teléfono de 320 px (iPhone SE) deja 240 px útiles: menos que el mínimo, así que la columna se sale y aparece scroll horizontal en toda la página. Una sola columna no puede desbordar. */ @media (max-width: 480px) { .iga-cards-grid { grid-template-columns: 1fr; padding: 1rem; gap: .75rem; } } .iga-card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1rem; background: var(--iga-white); border: 1px solid var(--iga-silver-200); border-radius: 1rem; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; } .iga-card:hover { border-color: var(--iga-blue-400); box-shadow: 0 6px 20px rgba(15, 23, 42, .07); transform: translateY(-2px); } .iga-card:focus-visible { outline: 2px solid var(--iga-blue-500); outline-offset: 2px; } .iga-card-top { display: flex; align-items: center; gap: .65rem; } .iga-card-avatar { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 999px; background: var(--iga-blue-100); color: var(--iga-blue-700); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .iga-card-nombre { font-size: 13px; font-weight: 700; color: var(--iga-black); line-height: 1.25; } .iga-card-cargo { font-size: 11px; color: var(--iga-silver-600); line-height: 1.3; } .iga-card-datos { display: flex; flex-direction: column; gap: .25rem; font-size: 11px; color: var(--iga-silver-600); } .iga-card-dato { display: flex; align-items: center; gap: .35rem; } .iga-card-dato svg { width: .8rem; height: .8rem; flex-shrink: 0; color: var(--iga-silver-400); } /* Nació en la card de Flota: "Sin conductor" no es un dato neutro como el resto de .iga-card-dato, es una alerta — mismo rojo que .iga-badge--mal, para no inventar un tercer tono de "esto está mal". */ .iga-card-dato--alerta, .iga-card-dato--alerta svg { color: #be123c; } .iga-card-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--iga-silver-100); } .iga-card-ver { display: inline-flex; align-items: center; gap: .25rem; font-size: 11px; font-weight: 700; color: var(--iga-blue-700); } .iga-card:hover .iga-card-ver { color: var(--iga-blue-600); } /* Estado vacío de la vista tarjetas — ocupa toda la rejilla. */ .iga-cards-vacio { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; font-size: 12px; color: var(--iga-silver-400); } /* ══════════════════════════════════════════════════════════════════════ 6 · ALTERNANCIA DE VISTAS ────────────────────────────────────────────────────────────────────── Las dos vistas se renderizan en el servidor y se muestran/ocultan en el cliente. Se hace así —y no cargando por AJAX— porque los filtros, la búsqueda y la paginación ya resuelven en PHP: reconstruirlos en JS sería duplicar lógica y arriesgar que las dos vistas dejen de coincidir. El costo es marcar el HTML dos veces por página (hoy 15 filas), que a esta escala no se nota. ══════════════════════════════════════════════════════════════════════ */ /* Genérico desde el 01-ago-2026: antes era [data-vista-empleados], solo para Empleados. Al llegar Flota como segundo módulo con el mismo toggle, mantener un atributo por módulo habría repetido la misma duplicación que ya se resolvió con el header (9 copias de un mismo bloque). Un atributo en alcanza porque solo hay un toggle activo por página. Ver JS/iga-vista-toggle.js. */ [data-vista="lista"] .iga-solo-tarjetas { display: none; } [data-vista="tarjetas"] .iga-solo-lista { display: none; } /* ══════════════════════════════════════════════════════════════════════ 7 · TEXTURA DE FONDO DEL ÁREA DE CONTENIDO (refinamiento brief §2) ────────────────────────────────────────────────────────────────────── De las dos opciones del brief se toma el degradado radial, no el patrón de puntos: la regla es que "nadie pueda señalar qué cambió" (§2), y una retícula de puntos SÍ se reconoce como retícula en cuanto el ojo se detiene. Un halo tenue bajo el header no se percibe como patrón. Va a 0.025 en vez del 0.02 del brief porque el azul de marca es más claro y desaturado que el #3b82f6 que el brief asumía: al 0.02 no se distinguía del blanco ni midiendo. ══════════════════════════════════════════════════════════════════════ */ .iga-area-contenido { background-color: var(--iga-silver-50); background-image: radial-gradient( circle at top center, rgba(121, 180, 217, 0.10), transparent 55% ); background-repeat: no-repeat; background-attachment: local; } /* ══════════════════════════════════════════════════════════════════════ 8 · PROFUNDIDAD EN LAS CARDS (refinamiento brief §3) ══════════════════════════════════════════════════════════════════════ */ /* Avatar con gradiente (§3.1). El texto pasa a blanco: la inicial en azul-700 sobre el gradiente quedaba en 2.1:1 de contraste, por debajo del mínimo legible. */ .iga-card-avatar { background: linear-gradient(135deg, var(--iga-blue-500), var(--iga-silver-400)); color: var(--iga-white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } /* Elevación en hover (§3.2). La sombra lleva tinte azul en vez de negro: una sombra neutra sobre fondo frío se ve sucia. */ .iga-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(39, 58, 69, 0.14); border-color: var(--iga-blue-500); } /* Quien pidió menos animación no debería recibir cards que saltan. */ @media (prefers-reduced-motion: reduce) { .iga-card, .iga-card:hover { transform: none; transition: none; } } /* ══════════════════════════════════════════════════════════════════════ 9 · FRANJA DE KPIs (refinamiento brief §4) ══════════════════════════════════════════════════════════════════════ */ /* auto-fit y no `repeat(4, ...)` fijo: Empleados usa 4 tarjetas, Flota usa 4 o 5 (una quinta condicional, "Sin Conductor", solo en IGA). Con un número fijo, la quinta se habría desbordado a una fila propia de una sola columna. Con 180px de mínimo, en escritorio caben 4-5 en una fila y en móvil cae solo a 1-2 sin necesitar breakpoint aparte. */ .iga-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin-bottom: 1rem; /* Tope de ancho (09-ago-2026). Con pocas tarjetas en una pantalla grande, `1fr` las estiraba a ~500px de ancho por 90 de alto: quedaban como barras medio vacías (Juan: "está como muy grande y hay espacio de sobra"). Se topa el CONTENEDOR y no la tarjeta a propósito. Topar la tarjeta (`minmax(180px, 340px)`) habría cambiado cuántas columnas caben, y eso tiene dos efectos feos: en pantallas medianas 3 tarjetas pasarían a 2+1, y en Control de Parqueo rompería algo PEDIDO por Juan el 02-ago ("4 arriba y 3 estirado a lo largo abajo") — la fila de 3 es más ancha justamente porque reparte el mismo ancho entre menos tarjetas. Con un tope de contenedor eso se conserva: la fila de 3 sigue siendo más ancha que la de 4, solo que ambas dentro de un límite sano. Y como los tracks siguen siendo `1fr`, el número de columnas no cambia nunca. */ max-width: 82rem; } .iga-kpi { background: var(--iga-white); border: 1px solid var(--iga-silver-200); border-radius: 12px; padding: .8rem 1rem; } .iga-kpi-valor { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--iga-black); font-variant-numeric: tabular-nums; } .iga-kpi-etiqueta { margin-top: .15rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--iga-silver-400); line-height: 1.3; } .iga-kpi-valor.vacio { color: var(--iga-silver-200); } /* El avatar del header sobre fondo oscuro: un aro tenue lo despega del azul-950 sin encender un borde duro. */ .iga-franja-superior .iga-h-avatar { background: rgba(255, 255, 255, 0.10); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14); } /* ══════════════════════════════════════════════════════════════════════ 10 · STATCARD (referencia Magic Patterns · brief §1 y §5.2) ────────────────────────────────────────────────────────────────────── Evolución de .iga-kpi: mismo bloque, ahora con elevación al pasar el mouse, franja superior de acento y espacio para tendencia e icono. La tendencia solo se pinta cuando HAY con qué compararla. El brief lo pide explícito (§8): nunca un porcentaje inventado para que se vea bien. De los cuatro KPIs de Empleados solo "Ingresos este mes" tiene periodo anterior real; los otros tres no llevan flecha porque el sistema no guarda fotos de la plantilla en el tiempo. ══════════════════════════════════════════════════════════════════════ */ .iga-kpi { position: relative; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } /* Hover "intenso" — pedido explícito de Juan (02-ago-2026), ver la nota larga más abajo: borde y sombra con tinte de marca, no solo elevación neutra, para que se note de un vistazo cuál tarjeta tiene el mouse encima. */ .iga-kpi:hover { transform: translateY(-3px); border-color: rgb(var(--brand-500)); box-shadow: 0 14px 32px rgb(var(--brand-700) / .22), 0 0 0 1px rgb(var(--brand-300) / .6); } /* Franja superior: invisible en reposo, tornasol al pasar el mouse — en CUALQUIER StatCard, ya no solo en la de acento (ver nota más abajo). */ .iga-kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--iga-blue-500), #8b5cf6, #06b6d4); opacity: 0; transition: opacity .15s ease; } .iga-kpi:hover::before { opacity: 1; } /* El acento tornasol de .iga-kpi--acento (§4) ERA fijo — opacity:1 sin * necesitar :hover — para marcar UNA sola StatCard por pantalla como "la * métrica principal". Juan lo vio en producción (captura de Empleados) y * pidió lo contrario: "que todos estén en blanco, yo nomás me paro en uno, * pum, se ponga con esa sombra intensa" — quería la MISMA franja + sombra * fuerte que ya se veía en "Activos", pero como algo que le pasa a * CUALQUIER tarjeta al pasar el mouse, no como marca permanente de una * sola. Por eso ya no hay un override de `.iga-kpi--acento::before` aquí: * la franja tornasol y la sombra intensa (arriba) ahora viven en * `.iga-kpi:hover`/`.iga-kpi:hover::before`, iguales para todas. * * La clase `.iga-kpi--acento` se queda en el HTML de los ~9 módulos que la * traían (Empleados, Flota, Dotación...) aunque ya no pinte nada por sí * sola — no vale la pena tocar 9 archivos para borrar una clase que ya no * hace daño estar ahí, y documenta cuál KPI se pensó como el "principal" * si se retoma la idea más adelante. * * (Antes de esto: la franja se pintaba con `border-image` sobre un * `border-top` transparente, y eso pintaba el gradiente en los CUATRO * lados de la tarjeta — bug ya corregido, ver commit de esa fecha.) */ /* Estado de alerta — nació en el KPI "Sin Conductor" de Flota, que antes se pintaba de rojo a mano con clases condicionales inline (border-red-200, bg-red-50...) solo cuando el conteo era mayor a cero. Mismos rojos que .iga-badge--mal, para no inventar un tercer tono de "esto está mal" en el sistema. Es un MODIFICADOR: se agrega o quita según el dato, nunca decorativo por defecto. */ .iga-kpi--alerta { border-color: #fecdd3; } .iga-kpi--alerta .iga-kpi-icono { background: #fff1f2; color: #be123c; } .iga-kpi--alerta .iga-kpi-valor { color: #be123c; } /* Los otros tres niveles del semáforo de Documentación (Control de Licencias y Documento de Vehículo): mismos tonos que .iga-badge--aviso/--ok/--neutro, para no inventar un cuarto set de colores de estado en el sistema. A diferencia de --alerta (arriba), estos no tocan el borde — el rojo es la única condición que necesita "saltar" desde la franja de KPIs; verde/ ámbar/gris solo tiñen el ícono y el número. */ .iga-kpi--aviso .iga-kpi-icono { background: #fffbeb; color: #b45309; } .iga-kpi--aviso .iga-kpi-valor { color: #b45309; } .iga-kpi--ok .iga-kpi-icono { background: #ecfdf5; color: #047857; } .iga-kpi--ok .iga-kpi-valor { color: #047857; } .iga-kpi--neutro .iga-kpi-icono { background: var(--iga-silver-100); color: var(--iga-silver-400); } .iga-kpi--neutro .iga-kpi-valor { color: var(--iga-silver-400); } /* "Info" (azul) — nació en Vacaciones para "De vacaciones ahora mismo": un estado que no es alerta ni aviso ni ok, es informativo ("esto está pasando", no "esto está bien o mal"). Azul de Tailwind (blue-50/200/700), NO el azul de marca (--brand-*): un badge de estado que se recoloree con el tema perdería su significado si la marca cambia. */ .iga-kpi--info .iga-kpi-icono { background: #eff6ff; color: #1d4ed8; } .iga-kpi--info .iga-kpi-valor { color: #1d4ed8; } .iga-kpi-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } /* El icono, en un cuadro suave. Se apoya en --brand-* para que siga la marca aunque cambie la rampa. */ .iga-kpi-icono { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: .6rem; display: flex; align-items: center; justify-content: center; background: rgb(var(--brand-100)); color: rgb(var(--brand-700)); } .iga-kpi-pie { margin-top: .6rem; display: flex; align-items: center; gap: .5rem; min-height: 1.1rem; } .iga-kpi-tendencia { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; } .iga-kpi-tendencia.sube { color: #059669; } .iga-kpi-tendencia.baja { color: #e11d48; } .iga-kpi-nota { font-size: .7rem; color: var(--iga-silver-400); } @media (prefers-reduced-motion: reduce) { .iga-kpi, .iga-kpi:hover { transform: none; transition: none; } } /* ══════════════════════════════════════════════════════════════════════ 11 · BADGE con punto y aro (brief §1 y §5.3) ────────────────────────────────────────────────────────────────────── Pastilla con un punto de color y un aro del mismo tono. Refina los "Activo" / "Sí" / "No" que ya existen, sin cambiar su semántica: el verde sigue siendo verde y el rojo, rojo. Los estados NO se recolorean con la marca — un badge de estado que cambia de significado con el tema es una trampa. ══════════════════════════════════════════════════════════════════════ */ .iga-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: .69rem; font-weight: 700; line-height: 1.5; white-space: nowrap; } .iga-badge::before { content: ''; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; flex-shrink: 0; } .iga-badge--ok { color: #047857; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; } .iga-badge--mal { color: #be123c; background: #fff1f2; box-shadow: inset 0 0 0 1px #fecdd3; } .iga-badge--aviso { color: #b45309; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; } .iga-badge--neutro{ color: var(--iga-silver-600); background: var(--iga-silver-100); box-shadow: inset 0 0 0 1px var(--iga-silver-200); } .iga-badge--info { color: #1d4ed8; background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; } /* ══════════════════════════════════════════════════════════════════════ 12 · BREADCRUMB en la franja de título (brief §5.5) ══════════════════════════════════════════════════════════════════════ */ .iga-breadcrumb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .45); } .iga-breadcrumb .sep { opacity: .5; } .iga-breadcrumb .actual { color: rgba(255, 255, 255, .8); } /* ══════════════════════════════════════════════════════════════════════ 13 · FADE-IN DE PÁGINA (brief §4 y §5.6) ────────────────────────────────────────────────────────────────────── No elimina la recarga —eso seria htmx o una SPA, y el brief lo deja fuera a proposito— pero suaviza el salto entre vistas. 150ms y solo opacidad: nada de desplazamientos, que a esta duracion se perciben como tirón. Y `backwards` para que el elemento arranque ya transparente en vez de parpadear opaco un fotograma antes. ══════════════════════════════════════════════════════════════════════ */ @keyframes iga-aparecer { from { opacity: 0; } to { opacity: 1; } } .iga-area-contenido { animation: iga-aparecer .15s ease-out backwards; } /* Quien pidió menos animación entra directo, sin transición. */ @media (prefers-reduced-motion: reduce) { .iga-area-contenido { animation: none; } } /* ══════════════════════════════════════════════════════════════════════ 14 · BARRA DE ACENTO EN EL ÍTEM ACTIVO DEL SIDEBAR (brief §5.4) ────────────────────────────────────────────────────────────────────── .nav-activo está definido en NUEVE archivos distintos (index.php, empleados, licencias, vacaciones, dotación, usuarios, archivador ×2 y mtto_head). La barra se agrega AQUÍ y no allá: iga-theme.css se carga después que todos y llega a las mismas vistas, así que es un sitio en vez de nueve. Unificar esas nueve copias es otra tarea — la misma que ya se hizo con el header. Va con ::after y no con border-left para no alterar el ancho ni el padding del ítem: el texto no se mueve al activarse. ══════════════════════════════════════════════════════════════════════ */ .nav-activo { position: relative; } .nav-activo::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: rgb(var(--brand-300)); } /* `trending-down` no esta en el subset de Lucide y no se puede regenerar sin node_modules. Se gira `trending-up`: la flecha queda apuntando abajo-derecha, que es exactamente el mismo signo. */ .iga-girado { transform: rotate(180deg); } /* ══════════════════════════════════════════════════════════════════════ 13 · COMPONENTE DE FORMULARIO Y DIGITACIÓN (.inp, .lbl) ────────────────────────────────────────────────────────────────────── Rediseño visual 2026: elimina las "cajas grises pesadas de formulario" (#f8fafc + #e2e8f0). Fondo blanco puro (#ffffff), borde nítido en slate-300, sombra de elevación sutil y halo de enfoque azul marca (ring-4). ══════════════════════════════════════════════════════════════════════ */ .inp, .parq-inp, .inp-rod { width: 100%; padding: .625rem .875rem !important; border-radius: .75rem !important; border: 1px solid #cbd5e1 !important; background: #ffffff !important; font-size: .875rem !important; color: #0f172a !important; box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04) !important; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important; outline: none !important; } .inp::placeholder, .parq-inp::placeholder, .inp-rod::placeholder { color: #94a3b8 !important; } .inp:focus, .parq-inp:focus, .inp-rod:focus { border-color: #0284c7 !important; box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.14) !important; background: #ffffff !important; } select.inp, select.parq-inp, select.inp-rod { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%6b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important; background-position: right .75rem center !important; background-repeat: no-repeat !important; background-size: 1.25em 1.25em !important; padding-right: 2.5rem !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } .lbl { display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #475569; margin-bottom: .35rem; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ Guarda contra el "icono gigante" ║ ╠══════════════════════════════════════════════════════════════════╣ ║ Ni iconoContenido() ni lucide.icono() ni createIcons() escriben ║ ║ width/height en el : solo viewBox. El tamano lo pone SIEMPRE ║ ║ una clase de Tailwind (w-4 h-4, w-5 h-5...). ║ ║ ║ ║ Si esa clase no existe, el no se pinta chiquito ni ║ ║ invisible: se pinta al tamano por defecto de un elemento ║ ║ reemplazado, 300x150 px, y revienta el layout. Paso de verdad ║ ║ con `w-4.5 h-4.5`, que parece valida pero NO lo es: la escala de ║ ║ Tailwind salta 3.5 -> 4 -> 5, el paso 4.5 no existe. Como la ║ ║ clase nunca se genera, `npm run build:css` tampoco lo arregla — ║ ║ no es el bug del purge, es una clase inventada. ║ ║ ║ ║ :where() NO suma especificidad, asi que cualquier w-4 / h-4 real ║ ║ la pisa sin pelear. Esto es solo el piso al que se cae. ║ ╚══════════════════════════════════════════════════════════════════╝ */ :where(svg[data-lucide]) { width: 1rem; height: 1rem; flex-shrink: 0; }