:root { --bg: #f3f4f9; --bg-panel: #ffffffcc; --bg-panel-solid: #ffffff; --bg-panel-2: #f6f7fb; --bg-sidebar: #ffffff; --border: #e7e8f1; --border-strong: #d8dae7; --text: #1c1f33; --text-dim: #666b83; --text-faint: #979bb0; --brand: #5b4fd6; --brand-2: #7a70e3; --brand-dark: #4038a8; --gold: #d9822f; --gold-2: #e8a55c; --gold-dark: #b8691f; --red: #d8484f; --red-soft: rgba(216, 72, 79, 0.1); --green: #1f9d76; --green-soft: rgba(31, 157, 118, 0.1); --amber: #c98a1f; --blue: #3d7ad1; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(23, 24, 45, 0.05), 0 1px 1px rgba(23, 24, 45, 0.03); --shadow: 0 10px 28px -12px rgba(23, 24, 45, 0.16); --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Acento rojo SOLO cuando la máquina seleccionada es la de la Universidad Europea de Madrid (js/machineSwitcher.js pone data-machine en ). El resto del tema sigue siendo el mismo panel claro y profesional — solo cambia el color de marca (botones, pestaña activa, bordes destacados), igual que cambiaría el color corporativo de una empresa a otra. */ body[data-machine="uem"] { --brand: #c23b3b; --brand-2: #d65f5f; --brand-dark: #932424; --bg: #faf4f4; --border-strong: #ecd4d4; } /* ---------- Aviso de copia de seguridad automática ---------- */ .autobackup-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); z-index: 10000; background: #241237; color: #fdf1e5; font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; padding: 12px 22px; border-radius: var(--radius-pill); box-shadow: 0 14px 30px -8px rgba(20, 12, 40, 0.45); opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; max-width: 90vw; text-align: center; } .autobackup-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Splash screen ---------- */ /* Pantalla de bienvenida: se mantiene con su propia identidad "mascota" (oscura, con las moscas cruzando), a propósito distinta del panel de trabajo diario (claro y profesional que viene después) — por eso usa aquí sus propios colores fijos, no las variables de arriba. */ body.pre-start .app-shell { display: none; } #splash-screen { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse 1100px 700px at 50% 40%, rgba(101, 84, 222, 0.35), transparent 60%), radial-gradient(ellipse 900px 600px at 85% 85%, rgba(251, 150, 96, 0.18), transparent 55%), #0b0818; transition: opacity 0.7s ease; } #splash-screen.hidden { opacity: 0; pointer-events: none; } .fly-swarm { position: absolute; inset: 0; z-index: 1; } .fly-wrap { position: absolute; top: var(--top); left: -80px; animation: fly-across var(--dur) linear infinite; animation-delay: var(--delay); will-change: transform; } .fly-wrap.reverse { left: auto; right: -80px; animation-name: fly-across-reverse; } .fly-img { display: block; width: var(--size); height: auto; filter: drop-shadow(0 6px 16px rgba(9, 5, 25, 0.55)); } @keyframes fly-across { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 160px)); } } @keyframes fly-across-reverse { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 160px)); } } .splash-content { position: relative; z-index: 2; text-align: center; padding: 0 20px; } .splash-title { font-family: var(--font-display); font-size: clamp(3rem, 11vw, 7.5rem); font-weight: 800; letter-spacing: -3px; margin: 0; background: linear-gradient(90deg, #ffffff, #ffc98a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 20px 60px rgba(101, 84, 222, 0.45); } .splash-tagline { margin: 10px 0 0; color: #a79fd4; font-size: 1rem; font-weight: 600; letter-spacing: 0.3px; } .splash-content .btn { margin-top: 30px; } .splash-login-form:not([hidden]) { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 300px; text-align: left; } .splash-login-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; font-weight: 700; color: #a79fd4; } .splash-login-input { background: #1e1846; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); padding: 10px 13px; color: #f5f3fd; font-family: var(--font-body); font-size: 0.92rem; } .splash-login-input:focus { outline: none; border-color: #9184f2; } .splash-login-error { margin: 0; color: #ff6b72; font-size: 0.8rem; font-weight: 600; } .splash-login-form .btn { margin-top: 4px; align-self: flex-start; } @media (prefers-reduced-motion: reduce) { .fly-wrap { animation: none; } } /* ---------- Layout ---------- */ .app-shell { display: flex; min-height: 100vh; padding: 0; gap: 0; } .sidebar { width: 156px; flex: none; display: flex; flex-direction: column; background: var(--bg-sidebar); border: none; border-radius: 0; padding: 22px 16px; position: sticky; top: 0; height: 100vh; } /* En escritorio, estos dos envoltorios "desaparecen" (display:contents) y .brand / nav.tabs / .sidebar-footer se comportan exactamente como antes, como hijos directos de .sidebar. Solo cobran forma propia (barra + menú desplegable) por debajo de 860px — ver el media query. */ .sidebar-header-row { display: contents; } .sidebar-collapsible { display: contents; } .mobile-nav-toggle { display: none; } .brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .brand.brand-home-link { cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s ease; } .brand.brand-home-link:hover { background: var(--bg-panel-2); } .brand-logos { display: flex; align-items: center; gap: 8px; flex: none; } .brand-logo { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--border-strong); object-fit: cover; flex: none; box-shadow: var(--shadow-sm); } /* Logos de colaboración por máquina: ocultos salvo cuando esa máquina está activa (body[data-machine="..."], puesto por machineSwitcher.js). Cuando se ve alguno de estos, el texto "FLY DEX" pasa a ir debajo de los logos en vez de al lado. */ .brand-collab-x { display: none; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text-faint); } .brand-logo-collab { display: none; } .brand-logo-uem { border-color: var(--border-strong); } /* El logo de Cinesa Luxe ya trae su propia "X" y es rectangular, no cuadrado como los demás. */ .brand-logo-cinesa { height: 38px; width: auto; border-radius: 6px; background: #14131c; padding: 2px 6px; box-shadow: var(--shadow-sm); } body[data-machine="uem"] .brand-collab-x-uem { display: inline-block; } body[data-machine="uem"] .brand-logo-uem { display: block; } body[data-machine="xanadu"] .brand-collab-x-cinesa { display: inline-block; } body[data-machine="xanadu"] .brand-logo-cinesa { display: block; } body[data-machine="uem"] .brand, body[data-machine="xanadu"] .brand { flex-direction: column; align-items: flex-start; gap: 12px; } .brand-text h1 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -0.1px; color: var(--text); } nav.tabs { display: flex; flex-direction: column; gap: 3px; flex: 1; } nav.tabs button { position: relative; display: flex; align-items: center; background: none; border: none; color: var(--text-dim); padding: 9px 10px; font-family: var(--font-body); font-size: 0.73rem; font-weight: 600; cursor: pointer; border-radius: 0; text-align: left; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } nav.tabs button:hover { color: var(--text); background: var(--bg-panel-2); } nav.tabs button.active { color: #fff; font-weight: 700; background: var(--brand); } .sidebar-footer { padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 0.72rem; line-height: 1.5; } .sidebar-footer p { margin: 0; } .system-status { display: flex; flex-direction: column; gap: 7px; } .system-status-row { display: flex; align-items: center; font-size: 0.68rem; color: var(--text-faint); } /* ---------- "Saber más": explicaciones largas escondidas por defecto ---------- */ details.more-info { margin-top: 6px; } details.more-info summary { cursor: pointer; font-size: 0.78rem; color: var(--brand); font-weight: 700; list-style: none; } details.more-info summary::-webkit-details-marker { display: none; } details.more-info summary::before { content: "+ Saber más"; } details.more-info[open] summary::before { content: "– Ocultar"; } details.more-info summary::after { content: none; } details.more-info .more-info-body { margin-top: 8px; font-size: 0.82rem; color: var(--text-dim); line-height: 1.6; } .machine-switcher { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .machine-switcher-current { margin: 0 0 8px; color: var(--text); font-size: 0.78rem; font-weight: 700; line-height: 1.4; } .machine-switcher-select { width: 100%; background: var(--bg-panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; padding: 7px 10px; margin-bottom: 6px; } .machine-switcher-add { display: block; width: 100%; background: none; border: none; text-align: left; color: var(--brand); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; cursor: pointer; padding: 6px 0 0; } .machine-switcher-add:hover { color: var(--brand-dark); } .content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; } main { flex: 1; padding: 34px 40px 20px; width: 100%; } /* ---------- Typography ---------- */ h2.view-title { font-family: var(--font-display); margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; color: var(--text); } p.view-desc { margin: 0 0 22px; color: var(--text-dim); font-size: 0.85rem; line-height: 1.55; max-width: 760px; } /* ---------- KPI cards ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; } .kpi-card { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-panel-solid); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 17px; box-shadow: var(--shadow-sm); transition: box-shadow 0.18s ease, border-color 0.18s ease; } .kpi-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); } .kpi-card-body { min-width: 0; } .icon-badge { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.02rem; } .icon-badge.badge-gold { background: #fbead9; color: var(--gold-dark); } .icon-badge.badge-violet { background: #ebe8fb; color: var(--brand); } .icon-badge.badge-green { background: #e1f5ee; color: var(--green); } .icon-badge.badge-red { background: #fbe6e7; color: var(--red); } .icon-badge.badge-amber { background: #faf0da; color: var(--amber); } /* ---------- Iconos de línea (sustituyen a los emojis) ---------- */ .icon { display: inline-block; vertical-align: -4px; flex: none; } h3 .icon { vertical-align: -3px; margin-right: 2px; } button.btn .icon { vertical-align: -3px; } .icon-inline { vertical-align: -3px; margin-right: 3px; } .kpi-card .label { font-size: 0.7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; } .kpi-card .value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-top: 4px; letter-spacing: -0.2px; color: var(--text); } .kpi-card .delta { font-size: 0.73rem; margin-top: 5px; color: var(--text-dim); line-height: 1.4; } .delta.up { color: var(--green); } .delta.down { color: var(--red); } /* ---------- Gráficos ---------- */ .charts-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; margin-bottom: 20px; align-items: stretch; } .chart-panel { margin-bottom: 0; display: flex; flex-direction: column; } .chart-box { position: relative; height: 210px; flex: none; } .chart-box-wide { height: 210px; } @media (max-width: 860px) { .charts-row { grid-template-columns: 1fr; } } /* ---------- Panels ---------- */ .panel { background: var(--bg-panel-solid); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .panel h3 { font-family: var(--font-display); margin: 0 0 12px; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.1px; color: var(--text); } /* ---------- Tables ---------- */ table.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } table.data-table th, table.data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); } table.data-table th { color: var(--text-faint); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; background: var(--bg-panel-2); } table.data-table tbody tr { transition: background 0.12s ease; } table.data-table tbody tr:hover { background: var(--bg-panel-2); } table.data-table tbody tr.kbd-focus-row { background: var(--bg-panel-2); box-shadow: inset 3px 0 0 var(--brand); } .kbd-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--text-faint); } .kbd-hint kbd { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; background: var(--bg-panel-2); border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px; color: var(--text-dim); } .table-scroll { max-height: 420px; overflow-y: auto; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } .table-scroll table.data-table { border: none; } .table-scroll table.data-table th:first-child, .table-scroll table.data-table td:first-child { padding-left: 16px; } /* Proveedores: muchas columnas, así que en vez de scroll lateral se encoge todo (texto pequeño, columnas de ancho fijo, contenido largo cortado con "…" pero visible entero al pasar el ratón) para que quepa entera en pantalla de ordenador sin desplazarse a los lados. */ .suppliers-table-wrap { max-height: 480px; overflow-y: auto; border-radius: var(--radius); border: 1px solid var(--border); } table.suppliers-table { table-layout: fixed; font-size: 0.68rem; } table.suppliers-table th, table.suppliers-table td { padding: 6px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.suppliers-table th:first-child, table.suppliers-table td:first-child { padding-left: 12px; } table.suppliers-table th { font-size: 0.62rem; } table.suppliers-table th:nth-child(1), table.suppliers-table td:nth-child(1) { width: 12%; } table.suppliers-table th:nth-child(2), table.suppliers-table td:nth-child(2) { width: 5%; } table.suppliers-table th:nth-child(3), table.suppliers-table td:nth-child(3) { width: 7%; } table.suppliers-table th:nth-child(4), table.suppliers-table td:nth-child(4) { width: 12%; } table.suppliers-table th:nth-child(5), table.suppliers-table td:nth-child(5) { width: 7%; } table.suppliers-table th:nth-child(6), table.suppliers-table td:nth-child(6) { width: 11%; } table.suppliers-table th:nth-child(7), table.suppliers-table td:nth-child(7) { width: 8%; } table.suppliers-table th:nth-child(8), table.suppliers-table td:nth-child(8) { width: 7%; } table.suppliers-table th:nth-child(9), table.suppliers-table td:nth-child(9) { width: 8%; } table.suppliers-table th:nth-child(10), table.suppliers-table td:nth-child(10) { width: 7%; } table.suppliers-table th:nth-child(11), table.suppliers-table td:nth-child(11) { width: 11%; } table.suppliers-table th:nth-child(12), table.suppliers-table td:nth-child(12) { width: 44px; padding-left: 4px; padding-right: 8px; overflow: visible; } table.suppliers-table .supplier-delete { padding: 4px 6px; } /* ---------- Period toggle ---------- */ .period-toggle { display: inline-flex; gap: 4px; background: var(--bg-panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 4px; margin-bottom: 22px; } .period-toggle button { background: none; border: none; color: var(--text-dim); font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; padding: 8px 20px; border-radius: var(--radius-pill); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .period-toggle button:hover { color: var(--text); } .period-toggle button.active { color: #fff; background: var(--brand); } /* ---------- Calendario de previsión ---------- */ .cal-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .cal-month-label { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; text-transform: capitalize; min-width: 160px; text-align: center; color: var(--text); } .cal-grid-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; } .cal-dow { text-align: center; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-cell { min-height: 74px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; } .cal-cell-empty { background: transparent; border: none; } .cal-cell.cal-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .cal-cell.cal-raro { border-color: rgba(216, 72, 79, 0.35); background: var(--red-soft); } .cal-cell.cal-excelente { border-color: rgba(217, 130, 47, 0.35); background: rgba(217, 130, 47, 0.08); } .cal-daynum { font-size: 0.7rem; font-weight: 700; color: var(--text-faint); } .cal-value { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--text); } .cal-value.cal-predicted { color: var(--text-dim); font-style: italic; font-weight: 600; } .cal-movies { margin-top: auto; display: flex; flex-wrap: wrap; gap: 3px; } .cal-movie { font-size: 0.6rem; font-weight: 700; padding: 2px 5px; border-radius: 999px; white-space: nowrap; color: #fff; } .cal-movie-mega { background: var(--red); } .cal-movie-alto { background: var(--brand); } .cal-movie-medio { background: var(--bg-panel-solid); border: 1px solid var(--border-strong); color: var(--text-dim); } .cal-movie-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: 0.8; } @media (max-width: 640px) { .cal-cell { min-height: 54px; padding: 4px 5px; } .cal-movie { display: none; } /* en móvil solo se ve el puntito, no cabe el texto */ } /* ---------- Tags ---------- */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } .tag.normal { background: var(--green-soft); color: var(--green); } .tag.raro { background: var(--red-soft); color: var(--red); } .tag.excelente { background: #fbead9; color: var(--gold-dark); } .tag.sin-etiquetar { background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--border-strong); } /* ---------- Buttons ---------- */ button.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px 18px; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } button.btn:hover { background: var(--brand-dark); box-shadow: var(--shadow); } button.btn:active { transform: translateY(1px); } button.btn.secondary { background: var(--bg-panel-solid); border: 1px solid var(--border-strong); color: var(--text); box-shadow: none; } button.btn.secondary:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-panel-solid); } button.btn.small { padding: 6px 14px; font-size: 0.76rem; } /* Excepción: en la pantalla de bienvenida (fondo oscuro) el botón mantiene su estilo original dorado con flecha, porque ahí sí encaja el tono "mascota" de la intro. */ #splash-screen button.btn { background: linear-gradient(135deg, #ffc98a, #fb9660); color: #241237; border-radius: var(--radius-pill); padding: 11px 12px 11px 22px; box-shadow: 0 6px 18px -6px rgba(251, 150, 96, 0.55); } #splash-screen button.btn::after { content: "→"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(36, 18, 55, 0.16); font-size: 0.85rem; margin-left: 4px; } #splash-screen button.btn:hover { filter: brightness(1.06); background: linear-gradient(135deg, #ffc98a, #fb9660); box-shadow: 0 6px 18px -6px rgba(251, 150, 96, 0.55); } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; } .form-grid label { display: flex; flex-direction: column; font-size: 0.76rem; color: var(--text-dim); font-weight: 600; gap: 6px; } .form-grid input, .form-grid select, .form-grid textarea, #csv-input { background: var(--bg-panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 13px; color: var(--text); font-family: var(--font-body); font-size: 0.88rem; transition: border-color 0.15s ease; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--brand); } /* ---------- Ventana modal (ej. "Añadir proveedor") ---------- */ dialog.supplier-dialog { width: min(640px, 92vw); max-height: 88vh; padding: 24px 26px; border: none; border-radius: var(--radius-lg); background: var(--bg-panel-solid); color: var(--text); box-shadow: var(--shadow); } dialog.supplier-dialog::backdrop { background: rgba(23, 24, 45, 0.5); } dialog.supplier-dialog h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 16px; } /* ---------- Bar chart ---------- */ .bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 10px; } .bar-chart .bar { flex: 1; background: var(--brand-2); border-radius: 3px 3px 0 0; min-width: 2px; position: relative; transition: filter 0.15s ease; } .bar-chart .bar:hover { filter: brightness(0.9); } .bar-chart .bar.raro { background: var(--red); } .bar-chart .bar.normal { background: var(--brand-2); opacity: 0.55; } .bar-chart .bar.excelente { background: var(--gold); } /* ---------- Metric boxes ---------- */ .metric-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; } .metric-box { flex: 1; min-width: 150px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; } .metric-box .name { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 700; } .metric-box .row { display: flex; justify-content: space-between; font-size: 0.82rem; margin-top: 4px; } .conclusion-box { background: #fbead9; border: 1px solid #f0d3ac; border-radius: var(--radius); padding: 15px 17px; font-size: 0.88rem; margin-top: 16px; line-height: 1.6; color: var(--text); } .note-badge { font-size: 0.74rem; color: var(--amber); } .empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--bg-panel-solid); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 26px 24px; max-width: 480px; } .empty-state-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--bg-panel-2); color: var(--text-faint); display: flex; align-items: center; justify-content: center; } .empty-state-message { margin: 0; color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; } .restock-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .restock-card { background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .restock-card img { width: 100%; height: 140px; object-fit: cover; display: block; background: var(--bg-panel-solid); } .restock-card-body { padding: 10px 12px; } .restock-card-date { font-size: 0.8rem; font-weight: 700; color: var(--text); margin-bottom: 4px; } .restock-card-note { font-size: 0.76rem; color: var(--text-dim); margin-bottom: 8px; line-height: 1.4; } .footer-note { color: var(--text-faint); font-size: 0.74rem; margin: 10px auto 26px; text-align: center; max-width: 1180px; width: 100%; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .app-shell { flex-direction: column; padding: 10px; gap: 10px; } .sidebar { width: 100%; height: auto; position: static; flex-direction: column; align-items: stretch; padding: 12px 14px; gap: 0; overflow: visible; } /* Barra compacta: logo(s) + botón hamburguesa. Los logos de colaboración (UEM / Cinesa Luxe) sí se ven aquí, más pequeños y en columna sobre el nombre para que quepan bien. */ .sidebar-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .brand { border-bottom: none; margin-bottom: 0; padding: 0; flex: 1; min-width: 0; gap: 6px; } .brand-text h1 { font-size: 0.98rem; } .brand-logo { width: 32px; height: 32px; border-radius: 9px; } .brand-logo-uem, .brand-logo-cinesa { height: 26px; } .brand-collab-x { font-size: 0.9rem; } .mobile-nav-toggle { margin-top: 2px; } .machine-switcher { padding-bottom: 10px; margin-bottom: 10px; } .mobile-nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 38px; height: 38px; flex: none; background: var(--bg-panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; } .mobile-nav-toggle span { display: block; width: 16px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .sidebar.nav-open .mobile-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .sidebar.nav-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; } .sidebar.nav-open .mobile-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Menú desplegable: oculto por defecto, se abre con el botón hamburguesa. */ .sidebar-collapsible { display: none; flex-direction: column; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .sidebar.nav-open .sidebar-collapsible { display: flex; } nav.tabs { flex-direction: column; gap: 2px; } nav.tabs button { padding: 9px 12px; font-size: 0.84rem; } .sidebar-footer { display: block; margin-top: 10px; padding-top: 10px; } main { padding: 16px 14px 18px; } /* "Todo un poco más pequeño" en móvil: menos aire y letras más discretas que en escritorio. */ h2.view-title { font-size: 1.28rem; } p.view-desc { font-size: 0.8rem; margin-bottom: 16px; } .kpi-grid { gap: 10px; margin-bottom: 18px; } .kpi-card { padding: 13px 14px; gap: 10px; } .icon-badge { width: 32px; height: 32px; border-radius: 9px; font-size: 0.9rem; } .kpi-card .value { font-size: 1.08rem; } .kpi-card .label { font-size: 0.65rem; } .kpi-card .delta { font-size: 0.7rem; } .panel { padding: 16px 15px; margin-bottom: 14px; } .panel h3 { font-size: 0.85rem; } table.data-table { font-size: 0.78rem; } button.btn { font-size: 0.8rem; padding: 9px 15px; } .chart-box, .chart-box-wide { height: 170px; } } /* ---------- Portada pública (index.html): solo el logo + "soon..." sobre blanco ---------- */ body.landing-body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; } .landing-account-btn { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text-dim); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .landing-account-btn:hover { background: var(--border); color: var(--text); } .landing-main { flex: none; width: auto; max-width: none; margin: 0; text-align: center; padding: 0 20px; } .landing-logo { width: 160px; height: auto; } .landing-status { margin: 16px 0 0; color: var(--text-faint); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; } @media (max-width: 640px) { .landing-logo { width: 120px; height: auto; } .landing-account-btn { top: 16px; right: 16px; width: 36px; height: 36px; } }