/* ===================================================================== ZAYBERHUB | PANEL ADMINISTRATIVO — TIENDA DE PANTALONES Paleta denim: índigo oscuro, grises cálidos, acento camel/mostaza ===================================================================== */ /* --------------------------------------------------------------------- 1. VARIABLES GLOBALES --------------------------------------------------------------------- */ :root { /* Paleta principal — índigo denim */ --color-primary: #3a5fa0; --color-primary-dark: #2c4a7c; --color-primary-light: #eef2fa; --color-primary-soft: #c8d6ee; /* Acento camel / mostaza */ --color-accent: #b5843a; --color-accent-light: #f5edd8; /* Estados */ --color-success: #2d7a50; --color-success-light: #e0f2ea; --color-danger: #c0392b; --color-danger-light: #fce8e6; --color-warning: #c07a1a; --color-warning-light: #fdf0d8; --color-info: #1a6fa8; --color-info-light: #dceef9; /* Neutros — gris cálido */ --color-bg: #f2f1ee; --color-surface: #ffffff; --color-border: #d8d5cf; --color-border-soft: #e8e5df; --color-text: #1e1c18; --color-text-secondary: #5a5650; --color-text-muted: #9a9590; /* Sidebar — índigo muy oscuro */ --color-sidebar-bg: #0f1826; --color-sidebar-bg-hover: #1a2640; --color-sidebar-text: #8fa0b8; --color-sidebar-text-active: #ffffff; /* Tipografía */ --font-base: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* Radios — más cuadrados, estilo industrial */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* Sombras sutiles */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.13); /* Layout */ --sidebar-width: 256px; --sidebar-width-collapsed: 72px; --topbar-height: 64px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; /* Transiciones ligeras */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; } /* --------------------------------------------------------------------- 1.b MODO OSCURO Se activa poniendo data-theme="dark" en (ver el script inline anti-parpadeo en el de cada página y el botón del topbar). Como casi todo el panel ya se apoya en estas variables, redefinirlas aquí basta para tintar el 95% de la interfaz sin tocar cada regla. --------------------------------------------------------------------- */ :root[data-theme="dark"] { --color-primary: #5b85c9; --color-primary-dark: #3a5fa0; --color-primary-light: #1c2a3f; --color-primary-soft: #2a3c58; --color-accent: #d1a15c; --color-accent-light: #3a3120; --color-success: #4caf7d; --color-success-light: #16332590; --color-danger: #e0685a; --color-danger-light: #3a201e; --color-warning: #d99a3f; --color-warning-light: #3a2e18; --color-info: #4d9bd6; --color-info-light: #182f3d; --color-bg: #13161c; --color-surface: #1b1f28; --color-border: #2c3140; --color-border-soft: #242834; --color-text: #e9eaed; --color-text-secondary: #a3a8b5; --color-text-muted: #6d7386; --color-sidebar-bg: #0b0e14; --color-sidebar-bg-hover: #171c26; --color-sidebar-text: #8fa0b8; --color-sidebar-text-active: #ffffff; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.50); } :root[data-theme="dark"] body { color-scheme: dark; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3f4d; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5063; } :root[data-theme="dark"] .data-table thead th { background: #20242e; } :root[data-theme="dark"] .badge-neutral { background: #2c3140; color: var(--color-text-secondary); } :root[data-theme="dark"] .switch .slider::before { background: #e9eaed; } body, .card, .data-table, .tp-modal, .sidebar { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base); } /* --------------------------------------------------------------------- 2. RESET Y BASE --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; /* Evita que iOS/Android reajusten el tamaño de letra al rotar pantalla */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-base); background-color: var(--color-bg); color: var(--color-text); line-height: 1.5; min-height: 100vh; min-height: 100dvh; /* alto real de pantalla en móviles (evita salto por la barra de Safari) */ /* Red de seguridad: cualquier elemento que se pase por unos px de ancho ya no genera scroll horizontal fantasma en el celular. */ overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img { max-width: 100%; display: block; } video, canvas, svg { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: 0.9rem; color: var(--color-text); } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c8c4bc; border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: #a8a49c; } /* --------------------------------------------------------------------- 3. UTILIDADES --------------------------------------------------------------------- */ .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .text-warning { color: var(--color-warning); } .text-primary { color: var(--color-primary); } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .w-full { width: 100%; } .icon-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; border-radius: 3px; flex-shrink: 0; } /* --------------------------------------------------------------------- 4. LAYOUT — SIDEBAR + TOPBAR + MAIN --------------------------------------------------------------------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; min-height: 100dvh; } /* ---- SIDEBAR ---- */ .sidebar { background: var(--color-sidebar-bg); color: var(--color-sidebar-text); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); padding-left: max(var(--space-3), env(safe-area-inset-left)); overflow-y: auto; position: sticky; top: 0; height: 100vh; height: 100dvh; } .sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-5); } .brand-logo { display: block; height: auto; object-fit: contain; } .brand-logo--sidebar { width: 100%; max-width: 150px; } .brand-logo--aside { width: 100%; max-width: 200px; } .brand-logo--box { width: 100%; max-width: 130px; margin-bottom: var(--space-5); } .sidebar__brand-text span { display: block; font-size: 0.68rem; font-weight: 400; color: var(--color-sidebar-text); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 1px; } .sidebar__section-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; color: #415168; padding: var(--space-4) var(--space-2) var(--space-2); font-weight: 600; } .sidebar__nav { display: flex; flex-direction: column; gap: 1px; } .sidebar__link { display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-3); border-radius: var(--radius-md); font-size: 0.87rem; font-weight: 500; color: var(--color-sidebar-text); transition: background var(--transition-fast), color var(--transition-fast); } .sidebar__link .icon-placeholder { color: #5a7090; font-size: 1rem; } .sidebar__link:hover { background: var(--color-sidebar-bg-hover); color: #d4dce8; } .sidebar__link:hover .icon-placeholder { color: #8fa8c8; } .sidebar__link.is-active { background: var(--color-primary); color: #fff; } .sidebar__link.is-active .icon-placeholder { color: #c8d8f0; } .sidebar__link--logout { margin-top: var(--space-3); color: #c08080; } .sidebar__link--logout .icon-placeholder { color: #c08080; } .sidebar__link--logout:hover { background: rgba(192, 57, 43, 0.18); color: #e09090; } .sidebar__footer { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid #1e2e44; } .sidebar__user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: rgba(255,255,255,0.04); } .sidebar__user:hover { background: rgba(255,255,255,0.08); } .sidebar__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.78rem; flex-shrink: 0; } .sidebar__user-name { color: #d8e0ec; font-size: 0.82rem; font-weight: 600; } .sidebar__user-role { font-size: 0.70rem; color: #5a7090; margin-top: 1px; } /* ---- MAIN AREA ---- */ .main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; min-width: 0; } /* ---- TOPBAR ---- */ .topbar { height: var(--topbar-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-5); padding-left: max(var(--space-5), env(safe-area-inset-left)); padding-right: max(var(--space-5), env(safe-area-inset-right)); position: sticky; top: 0; z-index: 20; gap: var(--space-4); } .topbar__menu-toggle { display: none; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--color-border); align-items: center; justify-content: center; color: var(--color-text-secondary); } .topbar__search { flex: 1; max-width: 380px; position: relative; } .topbar__search input { width: 100%; padding: 9px var(--space-4) 9px 40px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); font-size: 0.85rem; } .topbar__search input:focus { border-color: var(--color-primary); background: var(--color-surface); outline: none; } .topbar__search .icon-placeholder { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); } .topbar__breadcrumb { display: flex; flex-direction: column; gap: 1px; } .topbar__breadcrumb .eyebrow { font-size: 0.68rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; } .topbar__breadcrumb h1 { font-size: 1.1rem; font-weight: 600; } .topbar__actions { display: flex; align-items: center; gap: var(--space-2); } .topbar__icon-btn { width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); position: relative; flex-shrink: 0; cursor: pointer; } .topbar__icon-btn:hover { background: var(--color-bg); } .topbar__icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); border: 2px solid var(--color-surface); } .topbar__store-select { padding: 7px 12px; border: 1px solid var(--color-primary-soft); border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; background: var(--color-primary-light); color: var(--color-primary-dark); cursor: pointer; } /* ---- CONTENT ---- */ .content { padding: var(--space-5); flex: 1; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); } .page-header h2 { font-size: 1.3rem; margin-bottom: 3px; } .page-header p { color: var(--color-text-secondary); font-size: 0.87rem; } /* --------------------------------------------------------------------- 5. BOTONES / BADGES / TARJETAS --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 9px 16px; border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 600; transition: background var(--transition-fast), border-color var(--transition-fast); border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-dark); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-bg); } .btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary-soft); } .btn-outline:hover { background: var(--color-primary-light); } .btn-success { background: var(--color-success); color: #fff; } .btn-success:hover { background: #24633f; } .btn-danger { background: var(--color-danger); color: #fff; } .btn-danger:hover { background: #a0302a; } .btn-danger-ghost { background: var(--color-danger-light); color: var(--color-danger); } .btn-danger-ghost:hover { background: #f8d4d0; } .btn-warning { background: var(--color-warning); color: #fff; } .btn-warning:hover { background: #a06214; } .btn-sm { padding: 5px 11px; font-size: 0.77rem; } .btn-lg { padding: 11px 22px; font-size: 0.92rem; } .btn-block { width: 100%; } .btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm); } .btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-success { background: var(--color-success-light); color: var(--color-success); } .badge-danger { background: var(--color-danger-light); color: var(--color-danger); } .badge-warning { background: var(--color-warning-light); color: var(--color-warning); } .badge-info { background: var(--color-info-light); color: var(--color-info); } .badge-neutral { background: #ebe8e2; color: var(--color-text-secondary); } .badge-primary { background: var(--color-primary-light); color: var(--color-primary); } /* Tarjetas */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .card-pad { padding: var(--space-5); } .card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-soft); } .card__header h3 { font-size: 0.95rem; } .card__body { padding: var(--space-5); } /* Grillas */ .grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-4); } /* Tarjeta KPI */ .stat-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); } .stat-card__top { display: flex; align-items: center; justify-content: space-between; } /* stat-card--lg ocupa 2 columnas en grid-stats */ .stat-card--lg { grid-column: span 2; } .stat-card--lg .stat-card__value { font-size: 2rem; } @media (max-width: 640px) { .stat-card--lg { grid-column: span 1; } } .stat-card__icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .stat-card__label { font-size: 0.76rem; color: var(--color-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .stat-card__value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .stat-card__trend { font-size: 0.75rem; display: inline-flex; align-items: center; gap: 3px; font-weight: 500; color: var(--color-text-muted); } .trend-up { color: var(--color-success); } .trend-down { color: var(--color-danger); } /* Tarjeta de tienda */ .store-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .store-card__header { display: flex; justify-content: space-between; align-items: flex-start; } .store-card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; } .store-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); } .store-card__metric span { display: block; } .store-card__metric .value { font-weight: 700; font-size: 0.92rem; } .store-card__metric .label { font-size: 0.68rem; color: var(--color-text-muted); margin-top: 1px; } /* Actividad reciente */ .activity-list { display: flex; flex-direction: column; } .activity-item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-soft); } .activity-item:last-child { border-bottom: none; } .activity-item__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .activity-item__text { font-size: 0.84rem; } .activity-item__time { font-size: 0.72rem; color: var(--color-text-muted); } /* --------------------------------------------------------------------- 6. FORMULARIOS --------------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .form-grid--3 { grid-template-columns: repeat(3, 1fr); } .form-field { display: flex; flex-direction: column; } .form-field--full { grid-column: 1 / -1; } .field-float { position: relative; } .field-float input, .field-float select, .field-float textarea { width: 100%; padding: 17px var(--space-4) 7px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--transition-fast); } .field-float textarea { min-height: 90px; resize: vertical; padding-top: 20px; } .field-float label { position: absolute; left: 14px; top: 13px; font-size: 0.84rem; color: var(--color-text-muted); pointer-events: none; transition: all var(--transition-fast); background: var(--color-surface); padding: 0 3px; } .field-float input:focus, .field-float select:focus, .field-float textarea:focus { outline: none; border-color: var(--color-primary); } .field-float input:focus + label, .field-float input:not(:placeholder-shown) + label, .field-float select:focus + label, .field-float select + label, .field-float textarea:focus + label, .field-float textarea:not(:placeholder-shown) + label { top: -7px; left: 11px; font-size: 0.67rem; font-weight: 600; color: var(--color-primary); } .field-hint { font-size: 0.71rem; color: var(--color-text-muted); margin-top: 3px; } /* Fila "Producto + Agregar al carrito" (ventas.php): select flexible junto a un botón de ancho natural. En móvil se apilan completos, cada uno al 100% de ancho, para que el select nunca se encoja a su contenido. */ .tp-producto-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; } .tp-producto-row__select { flex: 1 1 240px; min-width: 0; } .tp-producto-row__btn { flex: 0 0 auto; margin-bottom: 2px; white-space: nowrap; } @media (max-width: 640px) { .tp-producto-row { flex-direction: column; align-items: stretch; } .tp-producto-row__select { flex: 1 1 auto; width: 100%; } .tp-producto-row__btn { width: 100%; margin-bottom: 0; } } .checkbox-row, .radio-row { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; } input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-primary); } .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .filter-bar__search { position: relative; flex: 1; min-width: 180px; } .filter-bar__search input { width: 100%; padding: 9px var(--space-4) 9px 38px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); font-size: 0.84rem; } .filter-bar__search input:focus { outline: none; border-color: var(--color-primary); } .filter-bar__search .icon-placeholder { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); } .filter-bar select { padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: 0.83rem; min-width: 130px; } /* --------------------------------------------------------------------- 7. TABLAS --------------------------------------------------------------------- */ .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); } /* .table-scroll es el único scroll horizontal permitido del sistema. Para que se note que es una tabla desplazable (y no contenido cortado sin avisar), se agrega un difuminado en el borde derecho que solo se ve cuando realmente hay más contenido para desplazar (background-attachment: local crea dos "guardas" de gradiente que se pegan al contenido, no al viewport del scroll, así que desaparecen naturalmente al llegar al final). */ .table-scroll { overflow-x: auto; background: linear-gradient(to right, var(--color-surface) 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), var(--color-surface) 70%) 100% 0, linear-gradient(to right, rgba(20,20,20,0.10), rgba(20,20,20,0)), linear-gradient(to left, rgba(20,20,20,0.10), rgba(20,20,20,0)) 100% 0; background-repeat: no-repeat; background-color: var(--color-surface); background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%; background-attachment: local, local, scroll, scroll; } .data-table { width: 100%; min-width: 680px; } .data-table thead th { text-align: left; font-size: 0.70rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); background: #f7f5f2; padding: 12px var(--space-4); border-bottom: 1px solid var(--color-border); white-space: nowrap; font-weight: 600; } .data-table tbody td { padding: 13px var(--space-4); font-size: 0.85rem; border-bottom: 1px solid var(--color-border-soft); vertical-align: middle; } .data-table tbody tr:hover { background: var(--color-primary-light); } .data-table tbody tr:last-child td { border-bottom: none; } .table-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-bg); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.64rem; overflow: hidden; } .table-actions { display: flex; gap: 5px; } .table-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-soft); flex-wrap: wrap; gap: var(--space-3); } .pagination { display: flex; gap: 4px; align-items: center; } .pagination button, .pagination a { width: 30px; height: 30px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .pagination button.is-active { background: var(--color-primary); color: #fff; } .pagination button:hover:not(.is-active), .pagination a:hover { background: var(--color-bg); } .pagination button:disabled, .pagination button[disabled] { opacity: 0.4; cursor: not-allowed; } /* Indicador de stock */ .stock-indicator { display: flex; align-items: center; gap: 7px; } .stock-bar { width: 56px; height: 5px; border-radius: var(--radius-pill); background: var(--color-border-soft); overflow: hidden; } .stock-bar span { display: block; height: 100%; border-radius: var(--radius-pill); } .stock-alto span { background: var(--color-success); width: 90%; } .stock-medio span { background: var(--color-warning); width: 55%; } .stock-bajo span { background: var(--color-danger); width: 22%; } .stock-agotado span { background: var(--color-text-muted); width: 4%; } /* Chips de variante (color/talla) */ .variant-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: 0.70rem; font-weight: 600; background: var(--color-bg); } .variant-chip .swatch { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); } /* --------------------------------------------------------------------- 8. GRÁFICOS SIMULADOS EN CSS --------------------------------------------------------------------- */ .chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: var(--space-4); } .chart-bars .bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--color-primary); position: relative; min-height: 4px; opacity: 0.85; } .chart-bars .bar span { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 0.66rem; color: var(--color-text-muted); white-space: nowrap; } .chart-bars .bar.is-muted { background: var(--color-border); opacity: 1; } .chart-donut { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: conic-gradient( var(--color-primary) 0deg 160deg, var(--color-success) 160deg 250deg, var(--color-accent) 250deg 310deg, var(--color-border-soft) 310deg 360deg ); } .chart-donut__hole { width: 90px; height: 90px; border-radius: 50%; background: var(--color-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; } .chart-donut__hole strong { font-size: 1.1rem; } .chart-donut__hole span { font-size: 0.66rem; color: var(--color-text-muted); } .chart-legend { display: flex; flex-direction: column; gap: var(--space-2); } .chart-legend li { display: flex; align-items: center; gap: 7px; font-size: 0.79rem; } .chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .chart-line { height: 130px; border-radius: var(--radius-md); background: linear-gradient(0deg, transparent 24%, var(--color-border-soft) 25%, transparent 26%) 0 0/100% 25%, linear-gradient(180deg, var(--color-primary-light), transparent); position: relative; overflow: hidden; } .chart-line svg { width: 100%; height: 100%; } /* Barra de progreso */ .progress { width: 100%; height: 7px; border-radius: var(--radius-pill); background: var(--color-border-soft); overflow: hidden; } .progress span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-primary); } /* --------------------------------------------------------------------- 9. LOGIN --------------------------------------------------------------------- */ .login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; position: relative; background: #131722; overflow: hidden; } @keyframes star-twinkle-a { 0% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.45; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes star-twinkle-b { 0% { opacity: 0.55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } 100% { opacity: 0.55; transform: translateY(0); } } /* Cielo estrellado — cubre toda la pantalla */ .login-page::before { animation: star-twinkle-a 4s ease-in-out infinite; content: ""; position: absolute; inset: 0; background-image: radial-gradient(2.2px 2.2px at 8% 12%, #ffffff, transparent 60%), radial-gradient(1.7px 1.7px at 18% 38%, #ffffff, transparent 60%), radial-gradient(2.4px 2.4px at 27% 8%, #ffffff, transparent 60%), radial-gradient(1.6px 1.6px at 35% 62%, #ffffff, transparent 60%), radial-gradient(2.2px 2.2px at 46% 22%, #ffffff, transparent 60%), radial-gradient(1.7px 1.7px at 55% 48%, #ffffff, transparent 60%), radial-gradient(2.6px 2.6px at 63% 15%, #ffffff, transparent 60%), radial-gradient(1.6px 1.6px at 71% 70%, #ffffff, transparent 60%), radial-gradient(2.1px 2.1px at 80% 30%, #ffffff, transparent 60%), radial-gradient(1.7px 1.7px at 88% 55%, #ffffff, transparent 60%), radial-gradient(2.4px 2.4px at 93% 12%, #ffffff, transparent 60%), radial-gradient(1.6px 1.6px at 12% 80%, #ffffff, transparent 60%), radial-gradient(1.9px 1.9px at 24% 90%, #ffffff, transparent 60%), radial-gradient(1.6px 1.6px at 40% 85%, #ffffff, transparent 60%), radial-gradient(2.2px 2.2px at 58% 88%, #ffffff, transparent 60%), radial-gradient(1.7px 1.7px at 68% 92%, #ffffff, transparent 60%), radial-gradient(2.3px 2.3px at 85% 82%, #ffffff, transparent 60%), radial-gradient(1.6px 1.6px at 97% 65%, #ffffff, transparent 60%), radial-gradient(1.8px 1.8px at 5% 55%, #ffffff, transparent 60%), radial-gradient(1.6px 1.6px at 50% 5%, #ffffff, transparent 60%), radial-gradient(2.1px 2.1px at 3% 30%, #ffffff, transparent 60%), radial-gradient(1.7px 1.7px at 60% 62%, #ffffff, transparent 60%), radial-gradient(2.3px 2.3px at 76% 45%, #ffffff, transparent 60%), radial-gradient(1.6px 1.6px at 91% 88%, #ffffff, transparent 60%), radial-gradient(1.9px 1.9px at 30% 30%, #ffffff, transparent 60%), radial-gradient(1.6px 1.6px at 44% 72%, #ffffff, transparent 60%); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; } /* Segunda capa: estrellas pequeñas repetidas para dar densidad y profundidad */ .login-page::after { content: ""; position: absolute; inset: 0; animation: star-twinkle-b 3.2s ease-in-out infinite; background-image: radial-gradient(1.3px 1.3px at 15% 25%, rgba(255,255,255,0.9), transparent 50%), radial-gradient(1.3px 1.3px at 33% 55%, rgba(255,255,255,0.8), transparent 50%), radial-gradient(1.3px 1.3px at 52% 35%, rgba(255,255,255,0.9), transparent 50%), radial-gradient(1.3px 1.3px at 70% 60%, rgba(255,255,255,0.75), transparent 50%), radial-gradient(1.3px 1.3px at 82% 20%, rgba(255,255,255,0.9), transparent 50%), radial-gradient(1.3px 1.3px at 92% 45%, rgba(255,255,255,0.8), transparent 50%), radial-gradient(1.3px 1.3px at 10% 68%, rgba(255,255,255,0.8), transparent 50%), radial-gradient(1.3px 1.3px at 45% 78%, rgba(255,255,255,0.85), transparent 50%), radial-gradient(1.3px 1.3px at 60% 10%, rgba(255,255,255,0.8), transparent 50%), radial-gradient(1.3px 1.3px at 20% 5%, rgba(255,255,255,0.75), transparent 50%); background-repeat: repeat; background-size: 160px 160px; pointer-events: none; } .login-aside { background: transparent; color: #fff; padding: var(--space-8); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; z-index: 1; } .login-aside__brand { display: flex; align-items: center; gap: var(--space-3); position: relative; } .login-aside__content { max-width: 400px; position: relative; } .login-aside__content h2 { font-size: 1.9rem; line-height: 1.2; margin-bottom: var(--space-4); font-weight: 700; } .login-aside__content p { color: rgba(255,255,255,0.65); font-size: 0.92rem; line-height: 1.6; } .login-aside__stats { display: flex; gap: var(--space-6); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.12); } .login-aside__stats strong { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-accent); } .login-aside__stats span { font-size: 0.70rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; } .login-aside__footer { font-size: 0.73rem; color: rgba(255,255,255,0.4); position: relative; } .login-main { display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: transparent; position: relative; z-index: 1; } .login-box { width: 100%; max-width: 360px; background: rgba(15, 17, 26, 0.72); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg, 16px); padding: var(--space-6); backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .login-box h1 { color: #ffffff; } .login-box p.subtitle { color: rgba(255,255,255,0.65); } .login-box .login-box__options { color: rgba(255,255,255,0.8); } .login-box .login-box__options a { color: var(--color-accent); } .login-box .login-box__footer { color: rgba(255,255,255,0.55); } .login-box__logo { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem; margin-bottom: var(--space-5); letter-spacing: 0.5px; } .login-box h1 { font-size: 1.4rem; margin-bottom: 5px; } .login-box p.subtitle { color: var(--color-text-secondary); font-size: 0.87rem; margin-bottom: var(--space-5); } .login-box form { display: flex; flex-direction: column; gap: var(--space-4); } .login-box__options { display: flex; align-items: center; justify-content: space-between; font-size: 0.79rem; } .login-box__options a { color: var(--color-primary); font-weight: 600; } .login-box__divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: 0.70rem; text-transform: uppercase; margin: var(--space-2) 0; } .login-box__divider::before, .login-box__divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); } .login-box__footer { margin-top: var(--space-5); font-size: 0.77rem; color: var(--color-text-muted); text-align: center; } /* --------------------------------------------------------------------- 10. COMPONENTES DE MÓDULOS --------------------------------------------------------------------- */ /* Tabs */ .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; } .tabs button { padding: 10px var(--space-4); font-size: 0.84rem; font-weight: 600; color: var(--color-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; } .tabs button:hover { color: var(--color-text); } .tabs button.is-active { color: var(--color-primary); border-color: var(--color-primary); } .tabs a.btn-tab-link { padding: 10px var(--space-4); font-size: 0.84rem; font-weight: 600; color: var(--color-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; text-decoration: none; } .tabs a.btn-tab-link:hover { color: var(--color-text); } /* Selector de sucursal */ .tp-sucursal-switch { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); margin-bottom: var(--space-4); } .tp-sucursal-switch__label { font-size: 0.76rem; font-weight: 600; color: var(--color-text-secondary); padding: 0 var(--space-2); } .tp-sucursal-tab { padding: 6px 14px; font-size: 0.81rem; font-weight: 600; color: var(--color-text-secondary); background: transparent; border-radius: var(--radius-pill); border: 1px solid transparent; } .tp-sucursal-tab:hover { color: var(--color-text); } .tp-sucursal-tab.is-active { color: var(--color-primary); background: var(--color-primary-light); border-color: var(--color-primary-soft); } .tp-sucursal-tab:disabled { opacity: 0.4; cursor: not-allowed; } .tp-sucursal-note { font-size: 0.81rem; color: var(--color-text-secondary); background: var(--color-primary-light); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); } .tp-sucursal-note strong { color: var(--color-primary); } .tp-bodega-nota { font-size: 0.81rem; color: var(--color-text-secondary); background: var(--color-warning-light); border: 1px dashed var(--color-warning); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); } /* Timeline */ .timeline { display: flex; flex-direction: column; } .timeline-item { display: flex; gap: var(--space-4); padding-bottom: var(--space-5); position: relative; } .timeline-item::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--color-border-soft); } .timeline-item:last-child::before { display: none; } .timeline-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.73rem; font-weight: 700; z-index: 1; } .timeline-content strong { font-size: 0.86rem; display: block; } .timeline-content span { font-size: 0.77rem; color: var(--color-text-muted); } /* Pasos de estado horizontal */ .status-steps { display: flex; align-items: center; width: 100%; } .status-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 1; position: relative; } .status-step .circle { width: 28px; height: 28px; border-radius: 50%; background: var(--color-border-soft); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.73rem; font-weight: 700; border: 2px solid var(--color-border); } .status-step.is-done .circle { background: var(--color-success); color: #fff; border-color: var(--color-success); } .status-step.is-current .circle { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .status-step span.label { font-size: 0.70rem; color: var(--color-text-secondary); text-align: center; } .status-step::after { content: ""; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px; background: var(--color-border-soft); z-index: -1; } .status-step:last-child::after { display: none; } .status-step.is-done::after { background: var(--color-success); } /* Empty state */ .empty-state { text-align: center; padding: var(--space-8) var(--space-5); color: var(--color-text-secondary); } .empty-state .icon-placeholder { width: 52px; height: 52px; border-radius: 50%; background: var(--color-bg); margin: 0 auto var(--space-4); } /* KPI de reportes */ .report-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .report-card__icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .ranking-list { display: flex; flex-direction: column; gap: var(--space-3); } .ranking-item { display: flex; align-items: center; gap: var(--space-3); } .ranking-item .pos { width: 22px; height: 22px; border-radius: 50%; background: var(--color-bg); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--color-text-secondary); flex-shrink: 0; } .ranking-item__info { flex: 1; } .ranking-item__info strong { font-size: 0.82rem; display: block; } .ranking-item__info .progress { margin-top: 4px; } /* Toggle switch */ .switch { position: relative; display: inline-block; width: 40px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--color-border); border-radius: var(--radius-pill); transition: var(--transition-fast); } .switch .slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--transition-fast); box-shadow: var(--shadow-xs); } .switch input:checked + .slider { background: var(--color-primary); } .switch input:checked + .slider::before { transform: translateX(18px); } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-soft); } .settings-row:last-child { border-bottom: none; } .settings-row__label strong { display: block; font-size: 0.86rem; } .settings-row__label span { font-size: 0.77rem; color: var(--color-text-muted); } .color-swatch-picker { display: flex; gap: var(--space-3); } .color-swatch-picker .swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--color-surface); box-shadow: 0 0 0 2px var(--color-border); cursor: pointer; } .color-swatch-picker .swatch.is-selected { box-shadow: 0 0 0 2px var(--color-primary); } .upload-box { border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; color: var(--color-text-muted); font-size: 0.82rem; } /* Métricas de marketing */ .roi-badge { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 700; font-size: 1.35rem; color: var(--color-success); } .roi-badge span { font-size: 0.73rem; font-weight: 500; color: var(--color-text-muted); } /* --------------------------------------------------------------------- 11. RESPONSIVE --------------------------------------------------------------------- */ @media (max-width: 1366px) { .content { padding: var(--space-4); } } @media (max-width: 1024px) { .app-shell { grid-template-columns: var(--sidebar-width-collapsed) 1fr; } .sidebar__brand-text, .sidebar__section-label, .sidebar__link span.link-text, .sidebar__user-name, .sidebar__user-role { display: none; } .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar__link { justify-content: center; } .sidebar__user { justify-content: center; } .grid-2 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .form-grid, .form-grid--3 { grid-template-columns: repeat(2, 1fr); } .login-page { grid-template-columns: 1fr; } .login-aside { display: none; } } @media (max-width: 768px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; transform: translateX(-100%); transition: transform var(--transition-base); z-index: 100; height: 100%; height: 100dvh; padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); } .sidebar.is-open { transform: translateX(0); } .sidebar.is-dragging { transition: none; } .sidebar__brand-text, .sidebar__section-label, .sidebar__link span.link-text, .sidebar__user-name, .sidebar__user-role { display: block; } .sidebar__brand { justify-content: flex-start; } .sidebar__link { justify-content: flex-start; } .sidebar__user { justify-content: flex-start; } .topbar__menu-toggle { display: flex; } .topbar__search { display: none; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .card__body .grid-2 { grid-template-columns: 1fr; } .store-card__metrics { grid-template-columns: repeat(3, 1fr); } .status-steps { flex-wrap: wrap; row-gap: var(--space-4); } /* Fondo oscuro detrás del menú lateral abierto: toca fuera para cerrarlo (antes no existía, así que el menú quedaba flotando sin forma clara de cerrarlo salvo el botón hamburguesa). */ .tp-sidebar-backdrop { position: fixed; inset: 0; background: rgba(10, 14, 24, 0.5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .tp-sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* Evita que el fondo se desplace detrás del menú mientras está abierto (bug clásico de doble-scroll en Safari/Chrome móvil). */ body.tp-sidebar-open { overflow: hidden; } /* Objetivos táctiles más cómodos en pantallas de celular (mínimo 44x44, recomendación de accesibilidad táctil) y separación para evitar toques accidentales entre botones adyacentes. */ .btn-icon { width: 44px; height: 44px; } .topbar__icon-btn { width: 44px; height: 44px; } .tp-modal__close { width: 44px; height: 44px; } .pagination button, .pagination a { width: 40px; height: 40px; } .table-actions, .btn-group { gap: 8px; } } @media (max-width: 480px) { .content { padding: var(--space-3); } .topbar { padding: 0 var(--space-3); } .grid-stats, .grid-3, .grid-4 { grid-template-columns: 1fr; } .form-grid, .form-grid--3 { grid-template-columns: 1fr; } .page-header { flex-direction: column; align-items: stretch; } .card__header { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .table-footer { flex-direction: column; align-items: stretch; } } /* Barras de filtros (.tp-filtros-bar) y buscadores: cada campo debe ocupar el 100% del ancho disponible en móvil, apilados verticalmente, sin el min-width fijo que en pantallas angostas los hacía desbordar. */ @media (max-width: 640px) { .tp-filtros-bar { flex-direction: column; align-items: stretch; } .tp-filtros-bar .form-field, .tp-filtros-bar select, .tp-filtros-bar input, .tp-filtros-bar .btn { min-width: 0; width: 100%; } .filter-bar__search { min-width: 0 !important; width: 100%; } } /* iOS Safari hace zoom automático de toda la página al enfocar un campo cuyo font-size calculado es menor a 16px. Por eso, en pantallas de celular/tablet chico, forzamos 16px en todos los campos editables. */ @media (max-width: 768px) { input, select, textarea { font-size: 16px; } } @media (max-width: 360px) { html { font-size: 15px; } .stat-card__value { font-size: 1.25rem; } } /* El dropdown de notificaciones/pendientes normalmente se ancla al ícono que lo abre (right: 0 respecto a ese ícono). En celular eso se rompía de dos formas: el panel de 290px quedaba cortado o se salía de la pantalla, y además "Pendientes de atención" quedaba casi pegado al borde y era difícil de tocar/cerrar bien. En vez de seguir anclándolo al ícono, en pantallas de celular/tablet chico se convierte en un panel tipo "hoja inferior" (bottom sheet): sube desde abajo, ocupa todo el ancho, tiene una manija visual arriba y se puede cerrar deslizando hacia abajo (además de tocar el fondo oscuro, la tecla Escape o el mismo ícono). Ver script.js. */ @media (max-width: 768px) { .tp-dropdown-wrap { position: static; } .tp-dropdown { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; display: flex; flex-direction: column; max-height: min(78vh, 78dvh); border: none; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(10, 14, 24, 0.28); transform: translateY(100%); transform-origin: center bottom; transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.28s; padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); } .tp-dropdown.is-open { transform: translateY(0); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } /* Mientras se está arrastrando con el dedo, JS agrega esta clase y fija el desplazamiento en línea (--tp-drag-y): sin transición, para que el panel siga al dedo en tiempo real. */ .tp-dropdown.is-dragging { transition: none; transform: translateY(var(--tp-drag-y, 0)); } /* Manija de arrastre: la señal visual de "esto se desliza" */ .tp-dropdown__handle { display: flex; justify-content: center; padding: 10px 0 4px; flex-shrink: 0; touch-action: none; cursor: grab; } .tp-dropdown__handle::before { content: ""; width: 36px; height: 4px; border-radius: 999px; background: var(--color-border); } .tp-dropdown__header { flex-shrink: 0; } .tp-dropdown__list { flex: 1 1 auto; max-height: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .tp-sheet-backdrop { position: fixed; inset: 0; background: rgba(10, 14, 24, 0.5); z-index: 215; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .tp-sheet-backdrop.is-visible { opacity: 1; pointer-events: auto; } body.tp-sheet-open { overflow: hidden; } } /* En pantallas muy angostas el store-select podía empujar el resto de acciones del topbar fuera de la pantalla (texto largo como "Bodega Central" sin ningún límite de ancho). Se acota y se recorta con "…". */ @media (max-width: 480px) { .topbar__actions { gap: 6px; } .topbar__store-select { max-width: 108px; padding: 7px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* --------------------------------------------------------------------- 12. INTERACTIVIDAD — MODAL, TOASTS, DROPDOWN --------------------------------------------------------------------- */ /* Overlay + Modal */ .tp-modal-overlay { position: fixed; inset: 0; background: rgba(10, 14, 24, 0.6); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 300; animation: tp-fade-in 0.15s ease; } .tp-modal { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(480px, calc(100vw - 32px)); max-height: min(88vh, 88dvh); flex-direction: column; overflow: hidden; } /* En pantallas muy angostas (< 480px) el modal usa casi todo el ancho/alto disponible en vez de dejar espacio muerto alrededor; el cuerpo sigue haciendo su propio scroll vertical (.tp-modal__body ya tiene overflow-y: auto) para que el contenido nunca se desborde de la pantalla. Aplica a TODAS las variantes (.tp-modal--ancho, .tp-camara-modal) porque todas heredan de .tp-modal. */ @media (max-width: 480px) { .tp-modal, .tp-modal--ancho, .tp-camara-modal { width: calc(100vw - 16px); max-height: min(96vh, 96dvh); } .tp-modal-overlay { padding: var(--space-2); } } .tp-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-soft); } .tp-modal__header h3 { font-size: 1rem; margin: 0; } .tp-modal__close { background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--color-text-secondary); width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; } .tp-modal__close:hover { background: var(--color-bg); color: var(--color-text); } .tp-modal__body { padding: var(--space-5); overflow-y: auto; } .tp-modal__body .form-grid { margin-bottom: 0; } .tp-modal__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-soft); display: flex; justify-content: flex-end; gap: var(--space-3); } .tp-modal__view-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 8px 0; border-bottom: 1px solid var(--color-border-soft); font-size: 0.85rem; } .tp-modal__view-row:last-child { border-bottom: none; } .tp-modal__view-row span:first-child { color: var(--color-text-secondary); } .tp-modal__view-row span:last-child { font-weight: 600; text-align: right; } @keyframes tp-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Dropdown de notificaciones Ya no depende del atributo [hidden] (display:none no se puede animar): el estado abierto/cerrado ahora lo controla la clase .is-open, así que tanto el fade de escritorio como el bottom-sheet de celular pueden transicionar suavemente en vez de aparecer/desaparecer de golpe. */ .tp-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 290px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 220; overflow: hidden; transform-origin: top right; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(0.98); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; } .tp-dropdown.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 0.15s ease, transform 0.15s ease; } .tp-dropdown__handle { display: none; } .tp-dropdown__header { padding: var(--space-3) var(--space-4); font-weight: 600; font-size: 0.84rem; border-bottom: 1px solid var(--color-border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .tp-dropdown__badge { font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-primary); background: var(--color-primary-light); border-radius: 999px; padding: 2px 8px; } /* Pulso breve del punto de notificación cuando el polling detecta algo nuevo (transferencia, stock bajo, auditoría, etc.). */ @keyframes tpDotPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb, 220, 38, 38), 0.55); } 60% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(var(--color-danger-rgb, 220, 38, 38), 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb, 220, 38, 38), 0); } } .tp-dot--pulse { animation: tpDotPulse 0.9s ease-out 2; } .tp-dropdown__empty { padding: var(--space-5) var(--space-4); text-align: center; color: var(--color-text-secondary); font-size: 0.81rem; } .tp-dropdown-wrap { position: relative; display: inline-flex; } .tp-dropdown__list { max-height: 320px; overflow-y: auto; } .tp-dropdown__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-soft); font-size: 0.81rem; color: var(--color-text-secondary); } .tp-dropdown__item:last-child { border-bottom: none; } .tp-dropdown__item strong { color: var(--color-text); font-size: 0.83rem; } .tp-dropdown__item time { font-size: 0.72rem; color: var(--color-text-secondary); } .tp-dropdown__item--link { cursor: pointer; text-decoration: none; transition: background 0.15s ease; } .tp-dropdown__item--link:hover { background: var(--color-bg); } .tp-dropdown__item--link span { color: var(--color-text); font-weight: 500; } .topbar__icon-btn { position: relative; } /* Toasts */ .tp-toast-stack { position: fixed; bottom: var(--space-5); right: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); z-index: 400; } .tp-toast { background: #1e1c18; color: #fff; padding: 11px 16px; border-radius: var(--radius-md); font-size: 0.84rem; box-shadow: var(--shadow-lg); animation: tp-toast-in 0.18s ease; max-width: 300px; } .tp-toast.tp-toast--success { background: var(--color-success); } .tp-toast.tp-toast--danger { background: var(--color-danger); } /* Toast destacado de transferencias: color de acento propio + borde luminoso para que salte a la vista frente a los demás toasts. */ .tp-toast.tp-toast--transferencia { display: flex; flex-direction: column; gap: 2px; background: var(--color-info); border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer; animation: tp-toast-in 0.18s ease, tp-toast-glow 1.4s ease-in-out 1; } .tp-toast.tp-toast--transferencia strong { font-size: 0.78rem; letter-spacing: 0.02em; } .tp-toast.tp-toast--saliendo { opacity: 0; transform: translateX(12px); transition: var(--transition-base); } @keyframes tp-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes tp-toast-glow { 0% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(26, 111, 168, 0.55); } 50% { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(26, 111, 168, 0); } 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(26, 111, 168, 0); } } /* Filas vacías */ .tp-empty-row td { padding: var(--space-8) var(--space-4) !important; } /* Placeholder de tabs */ .tp-tab-placeholder { text-align: center; padding: var(--space-8) var(--space-5); color: var(--color-text-secondary); font-size: 0.87rem; } /* --------------------------------------------------------------------- 13. ALERTAS FLASH Y