/* ============================================================================= iTech UI — Sistema de diseño del ecosistema RFID ----------------------------------------------------------------------------- Una sola hoja. Cambiar los tokens en :root reestiliza TODAS las páginas. Cada módulo se tematiza con . Modo oscuro con o por preferencia del sistema. ============================================================================= */ /* ---------------------------------------------------------------------------- 1. TOKENS ---------------------------------------------------------------------------- */ :root { /* Tipografía */ --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* Escala tipográfica (fluida) */ --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); --step-0: clamp(0.94rem, 0.91rem + 0.15vw, 1rem); --step-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.27rem); --step-2: clamp(1.32rem, 1.2rem + 0.6vw, 1.62rem); --step-3: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); --step-4: clamp(2rem, 1.6rem + 2vw, 3rem); /* Neutros: tinta sobre papel cálido */ --ink: #14171c; --ink-soft: #3a4049; --muted: #6b7280; --line: #e4e2da; --line-2: #efeee8; --paper: #f6f5f0; /* fondo de página */ --surface: #fffffe; /* tarjetas / paneles */ --surface-2:#fbfaf6; /* Acento base del ecosistema (lo sobreescribe cada módulo) */ --accent: #1f6feb; --accent-ink: #ffffff; --accent-weak: color-mix(in srgb, var(--accent) 12%, var(--surface)); --accent-line: color-mix(in srgb, var(--accent) 32%, var(--line)); /* Semánticos */ --ok: #0f9d6b; --ok-bg: color-mix(in srgb, var(--ok) 14%, var(--surface)); --warn: #c97a09; --warn-bg: color-mix(in srgb, var(--warn) 15%, var(--surface)); --danger: #d6453a; --danger-bg: color-mix(in srgb, var(--danger) 13%, var(--surface)); /* Radios, sombras, espacio */ --r-sm: 7px; --r: 11px; --r-lg: 16px; --r-pill: 999px; --shadow-1: 0 1px 0 rgba(20,23,28,.04), 0 1px 2px rgba(20,23,28,.06); --shadow-2: 0 2px 4px rgba(20,23,28,.05), 0 8px 24px -12px rgba(20,23,28,.18); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); --space: 16px; --pad: clamp(16px, 2vw, 28px); --sidebar: 256px; --topbar: 60px; --t-fast: .14s cubic-bezier(.4, 0, .2, 1); --t: .22s cubic-bezier(.4, 0, .2, 1); } /* Temas por módulo: un único punto de cambio de color por producto */ [data-module="connect"] { --accent: #1f6feb; --accent-ink:#fff; } /* RFID Connect */ [data-module="asset"] { --accent: #0c9d63; --accent-ink:#fff; } /* Asset Control */ [data-module="track"] { --accent: #ef7a12; --accent-ink:#fff; } /* Track Locator */ /* Modo oscuro */ [data-theme="dark"] { --ink:#eceae3; --ink-soft:#c4c2bb; --muted:#9a978f; --line:#2a2e35; --line-2:#23272d; --paper:#0f1217; --surface:#171b21; --surface-2:#1c2128; --shadow-1: 0 1px 0 rgba(0,0,0,.3); --shadow-2: 0 10px 30px -14px rgba(0,0,0,.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink:#eceae3; --ink-soft:#c4c2bb; --muted:#9a978f; --line:#2a2e35; --line-2:#23272d; --paper:#0f1217; --surface:#171b21; --surface-2:#1c2128; --shadow-1: 0 1px 0 rgba(0,0,0,.3); --shadow-2: 0 10px 30px -14px rgba(0,0,0,.6); } } /* ---------------------------------------------------------------------------- 2. RESET + BASE ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; } img, svg { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } .lead { font-size: var(--step-1); color: var(--ink-soft); } .muted { color: var(--muted); } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: .92em; } /* ---------------------------------------------------------------------------- 3. APP SHELL (sidebar + topbar + content) ---------------------------------------------------------------------------- */ .app { display: grid; grid-template-columns: var(--sidebar) 1fr; grid-template-rows: var(--topbar) 1fr; grid-template-areas: "brand topbar" "nav main"; min-height: 100dvh; } .app__brand { grid-area: brand; } .app__topbar { grid-area: topbar; } .app__nav { grid-area: nav; } .app__main { grid-area: main; } /* Barra de señal: firma visual del ecosistema */ .app::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--paper))); } .app__brand { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface); } .brand-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; } .brand-name { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; } .brand-name b { color: var(--accent); } .brand-sub { display:block; font-family: var(--font-mono); font-size: 10px; letter-spacing:.12em; text-transform: uppercase; color: var(--muted); } .app__topbar { display: flex; align-items: center; gap: 14px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(8px); } .app__topbar .spacer { margin-left: auto; } .app__nav { border-right: 1px solid var(--line); background: var(--surface); padding: 14px 12px; overflow-y: auto; } .nav-group { margin-bottom: 18px; } .nav-group__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 10px 8px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--ink-soft); font-weight: 500; line-height: 1; transition: background var(--t-fast), color var(--t-fast); } .nav-link:hover { background: var(--line-2); color: var(--ink); text-decoration: none; } .nav-link[aria-current="page"], .nav-link.is-active { background: var(--accent-weak); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); } .nav-link .ico { width: 18px; height: 18px; flex: none; opacity: .8; } .app__main { padding: var(--pad); overflow-x: hidden; } .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: var(--pad); } .page-head .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing:.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } /* Layout responsivo: el shell colapsa en móvil */ @media (max-width: 860px) { .app { grid-template-columns: 1fr; grid-template-rows: var(--topbar) 1fr; grid-template-areas: "topbar" "main"; } .app__brand, .app__nav { display: none; } } /* ---------------------------------------------------------------------------- 4. CONTENEDORES Y GRILLAS ---------------------------------------------------------------------------- */ .container { width: min(1180px, 100%); margin-inline: auto; } .grid { display: grid; gap: var(--space); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .stack > * + * { margin-top: var(--space); } .cluster { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } @media (max-width: 980px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------------- 5. CARD ---------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .card__body { padding: var(--pad); } .card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px var(--pad); border-bottom: 1px solid var(--line-2); } .card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); } .card--accent { border-left: 3px solid var(--accent); } /* Stat / KPI card */ .stat { position: relative; overflow: hidden; } .stat .k-label { font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing:.06em; } .stat .k-value { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); letter-spacing:-.02em; margin-top: 2px; } .stat .k-value .unit { font-size: var(--step-0); color: var(--muted); font-family: var(--font-body); } .stat .k-foot { margin-top: 8px; font-size: var(--step--1); color: var(--ink-soft); display:flex; gap:6px; align-items:center; } .delta { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: var(--r-sm); } .delta.up { color: var(--ok); background: var(--ok-bg); } .delta.down { color: var(--danger); background: var(--danger-bg); } /* ---------------------------------------------------------------------------- 6. BOTONES ---------------------------------------------------------------------------- */ .btn { --bg: var(--surface); --fg: var(--ink); --bd: var(--line); display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font-weight: 600; font-size: var(--step-0); cursor: pointer; transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); white-space: nowrap; text-decoration: none; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn--primary { --bg: var(--accent); --fg: var(--accent-ink); --bd: var(--accent); } .btn--primary:hover { box-shadow: 0 6px 18px -8px var(--accent); filter: brightness(1.03); } .btn--ghost { --bg: transparent; } .btn--ghost:hover { background: var(--line-2); } .btn--danger { --bg: transparent; --fg: var(--danger); --bd: color-mix(in srgb, var(--danger) 40%, var(--line)); } .btn--danger:hover { background: var(--danger-bg); } .btn--sm { padding: 6px 11px; font-size: var(--step--1); } .btn--block { width: 100%; } /* ---------------------------------------------------------------------------- 7. BADGES / PILLS / EPC CHIPS ---------------------------------------------------------------------------- */ .badge { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size: 11px; letter-spacing:.04em; padding: 3px 9px; border-radius: var(--r-pill); background: var(--line-2); color: var(--ink-soft); border:1px solid var(--line); } .badge--accent { background: var(--accent-weak); color: var(--accent); border-color: var(--accent-line); } .badge--ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); } .badge--warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); } .badge--danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); } .badge .dot { width:6px; height:6px; border-radius:50%; background: currentColor; } /* Chip de código EPC: pieza de marca para RFID */ .epc { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; padding: 3px 8px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--accent-line); color: var(--ink-soft); } /* ---------------------------------------------------------------------------- 8. FORMULARIOS ---------------------------------------------------------------------------- */ .field { display: block; } .field + .field { margin-top: 14px; } .grid .field + .field { margin-top: 0; } /* dentro de grillas, el gap maneja el espacio (alinea columnas) */ .label { display:block; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } .input, .select, .textarea { width: 100%; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; } .input::placeholder { color: var(--muted); } .field .hint { margin-top: 6px; font-size: var(--step--1); color: var(--muted); } .field .error { margin-top: 6px; font-size: var(--step--1); color: var(--danger); } /* ---------------------------------------------------------------------------- 9. TABLAS DE DATOS (inventarios, lecturas) ---------------------------------------------------------------------------- */ .table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } table.data { width: 100%; border-collapse: collapse; font-size: var(--step-0); } table.data thead th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; } table.data tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:hover { background: var(--accent-weak); } table.data td.num { font-family: var(--font-mono); text-align: right; } table.data thead th.num { text-align: right; } /* encabezado numerico alineado con sus datos */ /* ---------------------------------------------------------------------------- 10. ALERTAS / EMPTY STATE / TABS / PAGINACIÓN ---------------------------------------------------------------------------- */ .alert { display:flex; gap:10px; padding: 12px 14px; border-radius: var(--r); border:1px solid var(--line); background: var(--surface-2); font-size: var(--step-0); } .alert--ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); } .alert--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); } .alert--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); } .empty { text-align:center; padding: 48px 20px; color: var(--muted); } .empty .ico { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .5; } .tabs { display:flex; gap: 4px; border-bottom: 1px solid var(--line); } .tab { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; cursor: pointer; } .tab.is-active { color: var(--accent); border-color: var(--accent); } .pager { display:flex; gap:6px; align-items:center; } .pager a, .pager span { min-width: 34px; height: 34px; display:grid; place-items:center; padding: 0 8px; border:1px solid var(--line); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 13px; } .pager .is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ---------------------------------------------------------------------------- 11. UTILIDADES MÍNIMAS ---------------------------------------------------------------------------- */ .flex { display:flex; } .between { justify-content: space-between; } .center { align-items:center; } .gap { gap: var(--space); } .gap-sm { gap: 8px; } .mt { margin-top: var(--space); } .mb { margin-bottom: var(--space); } .right { margin-left: auto; } .nowrap { white-space: nowrap; } .text-sm { font-size: var(--step--1); } .text-lg { font-size: var(--step-1); } .hidden { display: none; } /* Reveal escalonado al cargar (un solo momento de delicia) */ @media (prefers-reduced-motion: no-preference) { .reveal > * { opacity: 0; transform: translateY(8px); animation: rise .5s var(--t) forwards; } .reveal > *:nth-child(1){animation-delay:.04s} .reveal > *:nth-child(2){animation-delay:.10s} .reveal > *:nth-child(3){animation-delay:.16s} .reveal > *:nth-child(4){animation-delay:.22s} .reveal > *:nth-child(5){animation-delay:.28s} .reveal > *:nth-child(6){animation-delay:.34s} } @keyframes rise { to { opacity: 1; transform: none; } } /* Impresión: reportes limpios (sin hoja extra) */ @media print { @page { margin: 12mm; } html, body { background: #fff !important; } .app__nav, .app__topbar, .app__brand, .btn, dialog { display: none !important; } .app { display: block !important; } .app::before { display: none !important; } /* barra de señal fija */ body, .app, .app__main { min-height: 0 !important; height: auto !important; } .app__main { padding: 0 !important; overflow: visible !important; } .reveal > * { opacity: 1 !important; transform: none !important; animation: none !important; } .card { box-shadow: none; border-color: #ccc; break-inside: avoid; } .page-head { margin-bottom: 12px; } }