/* Instyle Retail Control — UI base (mobile-first, sin frameworks) */ :root { --navy: #0b1626; --navy-2: #111f33; --navy-3: #17263d; --blue: #2563eb; --blue-deep: #1d4ed8; --blue-soft: #dbeafe; --green: #16a34a; --green-soft: #dcfce7; --orange: #f59e0b; --orange-soft: #fef3c7; --red: #dc2626; --red-soft: #fee2e2; --bg: #eef2f7; --card: #ffffff; --line: #e2e8f0; --text: #0f172a; --muted: #64748b; --radius: 14px; --sidebar-w: 252px; --shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 6px 24px rgba(15, 23, 42, .05); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; background: var(--bg); color: var(--text); font-size: 15px; -webkit-font-smoothing: antialiased; } a { color: var(--blue); } h1, h2, h3 { margin: 0; } /* ---------- Shell ---------- */ .shell { min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--navy); color: #cbd5e1; display: flex; flex-direction: column; z-index: 40; transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto; } .sidebar.open { transform: translateX(0); } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, .55); z-index: 30; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .sidebar-backdrop.show { opacity: 1; pointer-events: auto; } .main { min-height: 100vh; display: flex; flex-direction: column; } @media (min-width: 960px) { .sidebar { transform: none; } /* Menú oculto en escritorio (☰): el contenido toma todo el ancho. */ body.nav-oculto .sidebar { transform: translateX(-100%); } body.nav-oculto .main { margin-left: 0; } body.nav-oculto .content { max-width: 1700px; } body.nav-oculto .flash { max-width: none; } .main { transition: margin-left .22s ease; } .sidebar-backdrop { display: none; } .main { margin-left: var(--sidebar-w); } /* El ☰ SÍ se ve en escritorio: es el que oculta/muestra el menú (v1.38.3). */ #sidebarToggle { display: inline-flex; } } /* ---------- Sidebar ---------- */ .brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; } .brand-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--navy-3); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-mark.big { width: 48px; height: 48px; background: var(--navy); } .brand-text { color: #fff; font-weight: 800; letter-spacing: .12em; font-size: 15px; line-height: 1.1; } .brand-text small { font-weight: 500; font-size: 8.5px; letter-spacing: .38em; color: #94a3b8; } .nav { flex: 1; padding: 4px 12px 16px; } .nav-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #64748b; font-weight: 700; padding: 18px 10px 7px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: #b9c5d6; text-decoration: none; font-size: 14px; margin-bottom: 2px; } .nav-item:hover { background: var(--navy-2); color: #fff; } .nav-item.active { background: var(--navy-3); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); } .nav-icon { display: flex; opacity: .85; } .nav-badge { margin-left: auto; background: var(--red); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 6px; } .sidebar-foot { padding: 14px 20px; border-top: 1px solid var(--navy-2); } .version { font-size: 11.5px; color: #64748b; } /* ---------- Topbar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; background: var(--card); border-bottom: 1px solid var(--line); padding: 12px 18px; } .topbar-title { flex: 1; min-width: 0; } .topbar-title h1 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-user { display: flex; align-items: center; gap: 10px; } .user-chip { display: flex; align-items: center; gap: 10px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; } .user-meta { display: flex; flex-direction: column; line-height: 1.2; } .user-meta strong { font-size: 13.5px; } .user-meta small { color: var(--muted); font-size: 11.5px; } @media (max-width: 560px) { .user-meta { display: none; } } .icon-btn { background: none; border: 1px solid var(--line); border-radius: 9px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; } .icon-btn:hover { background: var(--bg); color: var(--text); } /* ---------- Contenido ---------- */ .content { padding: 18px; display: flex; flex-direction: column; gap: 16px; max-width: 1280px; width: 100%; } @media (min-width: 960px) { .content { padding: 24px 28px; } } .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .card-head h2 { font-size: 16px; } .grid-2 { display: grid; gap: 16px; } @media (min-width: 1000px) { .grid-2 { grid-template-columns: 3fr 2fr; align-items: start; } } /* ---------- KPIs ---------- */ .kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .kpi { display: flex; gap: 14px; align-items: center; } .kpi-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-icon.blue { background: var(--blue-soft); color: var(--blue); } .kpi-icon.green { background: var(--green-soft); color: var(--green); } .kpi-icon.orange { background: var(--orange-soft); color: var(--orange); } .kpi-icon.navy { background: #e2e8f0; color: var(--navy); } .kpi-icon.red { background: var(--red-soft); color: #b91c1c; } .kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 600; } .kpi-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .kpi-foot { font-size: 12px; color: var(--muted); } .text-red { color: var(--red); font-weight: 700; } /* ---------- Tablas ---------- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); } td { padding: 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } tr:last-child td { border-bottom: 0; } .num { text-align: right; } th.num { text-align: right; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } .badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .badge.blue { background: var(--blue-soft); color: var(--blue-deep); } .badge.green { background: var(--green-soft); color: #15803d; } .badge.orange { background: var(--orange-soft); color: #b45309; } .badge.red { background: var(--red-soft); color: #b91c1c; } .badge.gray { background: #f1f5f9; color: var(--muted); } small.muted { color: var(--muted); font-size: 11px; } /* .muted a secas: sólo existía la variante en , así que un salía con el color normal del texto y la atenuación nunca ocurría. */ .muted { color: var(--muted); } /* ---------- Marketing / Redes ---------- */ .acc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .acc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; } .acc-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; } .acc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .acc-periods { display: flex; gap: 6px; flex-wrap: wrap; } .acc-period { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; border: 1px solid var(--line); } .acc-period.active { background: var(--blue); border-color: var(--blue); color: #fff; } .spark-wrap { width: 100%; height: 140px; } .spark { width: 100%; height: 140px; display: block; } .spark-empty, .spark-legend { color: var(--muted); font-size: 12.5px; margin-top: 8px; display: flex; align-items: center; gap: 6px; } .kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; } .kb-col { flex: 0 0 250px; display: flex; flex-direction: column; } .kb-head { padding: 9px 13px; border-radius: 10px 10px 0 0; color: #fff; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .kb-count { background: rgba(255,255,255,.28); border-radius: 10px; padding: 1px 8px; font-size: 11px; } .kb-body { flex: 1; background: #f1f5f9; border-radius: 0 0 10px 10px; padding: 8px; min-height: 90px; display: flex; flex-direction: column; gap: 8px; } .kb-empty { text-align: center; color: var(--muted); font-size: 12px; padding: 16px 0; } /* Overlay de espera del OCR (lectura de la hoja) */ .ocr-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(11, 22, 38, .82); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; } .ocr-box { background: #fff; border-radius: 16px; padding: 28px 26px; max-width: 340px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .ocr-box strong { font-size: 17px; } .ocr-msg { color: var(--muted); font-size: 13.5px; min-height: 36px; } .ocr-spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #dbeafe; border-top-color: var(--blue, #2563eb); animation: ocrspin .9s linear infinite; } @keyframes ocrspin { to { transform: rotate(360deg); } } /* Recepción en Finanzas: validación sobre por sobre */ .sobre-card { border-left: 4px solid var(--orange, #f59e0b); } .sobre-card.sobre-ok { border-left-color: #16a34a; } /* Recolección: chips de fecha del corte (evita el formato gringo del date nativo) */ .date-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .date-chip { cursor: pointer; } .date-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; } .date-chip span { display: block; text-align: center; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 12.5px; line-height: 1.25; background: #fff; color: var(--muted); } .date-chip input:checked + span { border-color: var(--blue, #2563eb); background: #eff6ff; color: var(--blue, #2563eb); font-weight: 600; } .other-date-input { margin-bottom: 10px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; width: 100%; } /* Recolección: pregunta "¿otro corte?" tras cada foto */ .next-cut-prompt { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 14px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 12px; } .next-cut-prompt strong { font-size: 14px; } /* Recolección: captura de corte por foto (OCR bloqueado) */ .photo-cut { margin-bottom: 14px; } .photo-cut-drop { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px dashed var(--blue, #2563eb); border-radius: 12px; background: #eff6ff; cursor: pointer; transition: background .15s; } .photo-cut-drop:hover { background: #dbeafe; } .photo-cut-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; } .photo-cut-icon { font-size: 30px; } .photo-cut-drop.busy { opacity: .65; pointer-events: none; border-style: solid; } .photo-cut-drop small { color: var(--muted); } .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 760px) { .chart-row { grid-template-columns: 1fr; } } .field-hint { color: var(--muted); font-size: 11.5px; margin-top: 3px; display: block; } .kb-card { background: #fff; border-radius: 8px; padding: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 3px solid transparent; } .kb-card[draggable="true"] { cursor: grab; } .kb-card[draggable="true"]:active { cursor: grabbing; } .kb-card.dragging { opacity: .45; } .kb-body.drag-over { background: #dbeafe; outline: 2px dashed #60a5fa; outline-offset: -2px; } .kb-card.prio-alta { border-left-color: var(--red); } .kb-card.prio-media { border-left-color: var(--orange); } .kb-card.prio-baja { border-left-color: #6ee7b7; } .kb-acc { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); margin-bottom: 4px; } .kb-title { font-size: 13px; font-weight: 600; line-height: 1.3; } .kb-desc { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 4px; } .kb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .idea-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 10px; background: #f1f5f9; color: var(--muted); } .kb-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .kb-move { flex: 1; min-width: 0; } .kb-move select { width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; color: var(--muted); } .kb-del { flex: 0 0 auto; } .kb-del-btn { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 5px 8px; font-size: 13px; line-height: 1; cursor: pointer; color: var(--muted); } .kb-del-btn:hover { background: #fef2f2; border-color: var(--red); } .idea-new { margin-top: 6px; } .idea-new summary { cursor: pointer; list-style: none; } .idea-new summary::-webkit-details-marker { display: none; } /* ---------- Checklist / Visitas ---------- */ .progress-bar { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-top: 14px; } .progress-bar span { display: block; height: 100%; background: var(--blue); border-radius: 999px; transition: width .3s; } .checklist { display: flex; flex-direction: column; gap: 12px; } .chk-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } .chk-item.chk-done { border-color: #bbf7d0; background: #f6fef9; } .chk-item.chk-fail { border-color: #fecaca; background: #fef6f6; } .chk-q { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14.5px; margin-bottom: 10px; } .chk-q > span:first-child { flex: 1; min-width: 200px; } .chk-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .chk-opt { position: relative; } .chk-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .chk-opt span { display: inline-block; padding: 6px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--muted); user-select: none; } .chk-opt input:checked + span { color: #fff; } .chk-opt-complies input:checked + span { background: var(--green); border-color: var(--green); } .chk-opt-partial input:checked + span { background: var(--orange); border-color: var(--orange); } .chk-opt-fails input:checked + span { background: var(--red); border-color: var(--red); } .chk-opt-na input:checked + span { background: var(--muted); border-color: var(--muted); } .chk-extra { display: flex; gap: 8px; flex-wrap: wrap; } .chk-extra input[type=text] { flex: 1; min-width: 180px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; } .chk-extra input[type=file] { font-size: 12.5px; max-width: 200px; } .chk-answer { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .save-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; position: sticky; bottom: 12px; z-index: 5; } /* ---------- Panel de ventas (dashboard) ---------- */ .sales-panel { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .sales-block { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; } .sales-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; } .sales-total { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0; } .sales-breakdown { font-size: 13px; color: #334155; } .sales-cmp { font-size: 12.5px; margin-top: 6px; } /* ---------- KPIs semanales ---------- */ .kpi-week-good { color: var(--green); font-weight: 700; } .kpi-week-bad { color: var(--red); font-weight: 700; } /* Metas: el escalón de en medio. Entre 90 % y la meta no es un fracaso que merezca rojo, pero tampoco está cumplida — ámbar para que se distinga de un vistazo sin gritar. */ .meta-tibio { color: var(--orange, #d97706); font-weight: 700; } /* Ventas por Periodo: barrita de avance contra la meta */ .vp-bar { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; min-width: 90px; } .vp-bar-fill { height: 100%; border-radius: 999px; } .vp-bar-fill.ok { background: var(--green); } .vp-bar-fill.warn { background: var(--orange); } .vp-bar-fill.bad { background: var(--red); } .traffic-input { width: 90px; text-align: right; padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 7px; } .muted-cell { color: var(--muted); } .delta-up { color: var(--green); font-weight: 700; white-space: nowrap; } .delta-down { color: var(--red); font-weight: 700; white-space: nowrap; } /* ---------- Tabs de canal ---------- */ .tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .tab { padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; } .tab:hover { color: var(--text); } .tab.active { color: var(--blue); border-bottom-color: var(--blue); } .tab-count { background: #f1f5f9; color: var(--muted); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 8px; } .tab.active .tab-count { background: var(--blue-soft); color: var(--blue-deep); } /* ---------- Formularios ---------- */ .form-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: span 2; } } .field { display: flex; flex-direction: column; gap: 5px; } .field span { font-size: 12.5px; font-weight: 600; color: #334155; } .field input, .field select { padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 15px; background: #fff; width: 100%; } .field input:focus, .field select:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); } .check { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 14px; cursor: pointer; } .check input { width: 17px; height: 17px; } .check-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 6px; } .check-grid .check { margin: 0; } .form-section { font-size: 14px; margin-top: 20px; color: #334155; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; } .inline-form .field { flex: 1; min-width: 150px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-deep); } .btn-ghost { background: #fff; border: 1px solid var(--line); color: #334155; } .btn-ghost:hover { background: var(--bg); } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .btn-block { width: 100%; margin-top: 18px; } /* ---------- Estados / misceláneos ---------- */ .flash { margin: 14px 18px 0; padding: 11px 15px; border-radius: 10px; font-size: 14px; } @media (min-width: 960px) { .flash { margin: 16px 28px 0; max-width: 1224px; } } .flash-ok { background: var(--green-soft); color: #166534; border: 1px solid #bbf7d0; } .flash-error { background: var(--red-soft); color: #b91c1c; border: 1px solid #fecaca; } .auth-card .flash, .auth-card .flash-error { margin: 0 0 14px; } /* Aviso dentro de una card: algo que el usuario tiene que corregir, pero que no es un error de la acción que acaba de hacer (eso es .flash). */ .aviso { margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; background: var(--orange-soft); color: #92400e; border: 1px solid var(--orange); } .aviso strong { color: #78350f; } .empty { text-align: center; color: var(--muted); padding: 34px 16px; font-size: 14px; line-height: 1.6; background: #f8fafc; border: 1px dashed var(--line); border-radius: 10px; } .hint { margin-top: 14px; background: #f0f6ff; border: 1px solid #dbeafe; color: #1e40af; font-size: 13px; line-height: 1.55; padding: 11px 14px; border-radius: 10px; } .link { color: var(--blue); font-weight: 600; text-decoration: none; font-size: 13.5px; } .link:hover { text-decoration: underline; } .stat-list { list-style: none; margin: 0; padding: 0; } .stat-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; border-bottom: 1px solid #f1f5f9; font-size: 14px; } .stat-list li:last-child { border-bottom: 0; } .stat-list span { color: var(--muted); } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: flex; gap: 14px; padding: 8px 2px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; align-items: baseline; } .timeline li:last-child { border-bottom: 0; } .timeline .time { color: var(--muted); font-size: 12px; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; } .timeline .what { min-width: 0; } /* ---------- Módulo placeholder ---------- */ .module-card h2 { font-size: 20px; margin: 12px 0 6px; } .module-head { display: flex; gap: 8px; flex-wrap: wrap; } .module-desc { color: var(--muted); line-height: 1.6; margin: 0 0 16px; } .module-card h3 { font-size: 14px; color: #334155; margin-bottom: 8px; } .feature-list { margin: 0; padding: 0 0 0 2px; list-style: none; } .feature-list li { padding: 7px 0 7px 26px; position: relative; font-size: 14px; border-bottom: 1px solid #f8fafc; } .feature-list li::before { content: "✓"; position: absolute; left: 2px; color: var(--green); font-weight: 800; } /* ---------- Cajas editables ---------- */ .reg-list { display: flex; flex-direction: column; gap: 10px; } .reg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; } .reg-edit { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; } .reg-edit input { padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; } .reg-edit input[name="name"] { width: 120px; } .reg-edit input[name="authorized_fund"] { width: 100px; text-align: right; } .reg-actions { display: flex; gap: 6px; } .btn-danger { color: var(--red); } .btn-danger:hover { background: var(--red-soft); } /* ---------- Desglose del esperado (fondo) ---------- */ .expected-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; } .expected-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; } .expected-row.neg strong { color: var(--red); } .expected-row.pos strong { color: var(--green); } .expected-row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 700; } .expected-row.total strong { font-size: 17px; color: var(--blue); } .expected-detail { margin-top: 8px; font-size: 13px; } .expected-detail summary { cursor: pointer; color: var(--muted); } .expected-detail ul { margin: 8px 0 0; padding-left: 18px; color: #334155; } .expected-detail li { padding: 2px 0; } .expected-actions { margin-top: 8px; font-size: 13px; } /* ---------- Fondos / denominaciones ---------- */ .fund-refs { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; } .fund-refs > div { display: flex; flex-direction: column; gap: 2px; } .denom-table input.denom-qty, .denom-table input.denom-cent { width: 90px; text-align: right; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; } .denom-table td { padding: 6px 10px; } .denom-total { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; background: var(--navy); color: #fff; border-radius: 10px; font-weight: 600; } .denom-total strong { font-size: 20px; margin-left: 8px; } .denom-mxn { display: flex; justify-content: flex-end; gap: 8px; align-items: baseline; margin-top: 8px; font-size: 13.5px; color: var(--muted); } .denom-mxn strong { font-size: 16px; color: var(--text); } .denom-diffval.ok { color: #86efac; } .denom-diffval.neg { color: #fca5a5; } .denom-diffval.pos { color: #fcd34d; } /* ---------- Recolecciones ---------- */ .collection-totals { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .collection-totals > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; } .ct-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; } .ct-value { font-size: 16px; font-weight: 700; } .ct-value.big { font-size: 22px; color: var(--blue); } .avail-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; } .avail-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; } .avail-row > div:first-child { flex: 1; display: flex; flex-direction: column; } .avail-amount { font-weight: 700; } .dep-cut { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; } .dep-cut:has(.dep-check:checked) { border-color: var(--blue); background: var(--blue-soft); } .dep-cut input { width: 18px; height: 18px; flex-shrink: 0; } .dep-cut-info { flex: 1; display: flex; flex-direction: column; } .dep-cut-amount { font-weight: 700; } .dep-sum { text-align: right; margin-top: 12px; font-size: 15px; } .dep-sum strong { font-size: 18px; color: var(--blue); } .custody-now { display: flex; align-items: center; gap: 14px; padding: 16px 0 20px; } .custody-badge { width: 52px; height: 52px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; } .sign-box { border: 1px solid var(--line); border-radius: 12px; padding: 16px; } .sign-box.signed { border-color: #bbf7d0; background: #f0fdf4; } .sign-box.disabled { opacity: .6; } .sign-box h3 { font-size: 14px; margin-bottom: 8px; } .sign-legend { font-style: italic; color: var(--muted); font-size: 13.5px; margin: 0 0 12px; } .signature-pad { width: 100%; height: 170px; touch-action: none; border: 2px dashed #cbd5e1; border-radius: 10px; background: #fff; display: block; margin: 4px 0; } .sign-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .sign-done { display: flex; align-items: center; gap: 14px; } .sign-img { width: 150px; height: 70px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; } .sign-empty { width: 150px; height: 70px; display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; } .reception-summary { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 4px; } .reception-summary > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .reception-summary .span-2 { grid-column: span 2; } /* ---------- Comprobante ---------- */ .receipt-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--navy); padding-bottom: 14px; margin-bottom: 16px; } .receipt-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 8px; } .receipt-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .receipt-total { display: flex; justify-content: space-between; align-items: center; background: var(--navy); color: #fff; border-radius: 10px; padding: 14px 18px; font-weight: 700; letter-spacing: .04em; margin: 16px 0; } .receipt-total span { font-size: 22px; } .receipt-signs { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 8px 0; } .receipt-sign { text-align: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; } .receipt-sign .sign-img, .receipt-sign .sign-empty { width: 100%; height: 90px; margin-bottom: 8px; } .receipt-sign-name { font-weight: 700; } .receipt-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } @media print { .sidebar, .topbar, .sidebar-backdrop, .no-print { display: none !important; } .main { margin: 0 !important; } .content { padding: 0 !important; } .card { box-shadow: none !important; border: 1px solid #ddd; } body { background: #fff; } /* Comprobantes en UNA hoja: sin paja y todo compacto */ /* CARTA VERTICAL explícita. Sin `size` el navegador hereda lo último que se usó (A4 u horizontal) y el acta salía a otro formato. */ @page { size: Letter portrait; margin: 10mm; } /* Las tablas traen min-width:560px para que en pantalla no se apachurren, pero en papel eso fuerza una hoja más ancha que la carta: en impresión se libera y cada tabla usa el ancho real de la hoja. */ .receipt table, .receipt .table-wrap table { min-width: 0 !important; width: 100% !important; } .receipt .table-wrap { overflow: visible !important; } .receipt { max-width: 100% !important; } /* El desglose de billetes NO se debe partir a media tabla */ .receipt h3.form-section { page-break-after: avoid; } .flash, .hint, .module-desc { display: none !important; } .receipt { padding: 8px !important; font-size: 11px; } .receipt .receipt-head { margin-bottom: 4px; } .receipt .brand-text { font-size: 14px; } .receipt .kpi-foot { font-size: 10px; } .receipt .receipt-grid { gap: 4px 14px; margin: 4px 0; } .receipt .receipt-grid > div { font-size: 10.5px; } .receipt h3.form-section { margin: 6px 0 2px; font-size: 11px; } .receipt table { font-size: 10.5px; } .receipt table th, .receipt table td { padding: 2px 6px !important; line-height: 1.25; } .receipt .receipt-total { padding: 6px 10px; font-size: 13px; margin: 6px 0; } .receipt .badge { font-size: 9px !important; padding: 1px 6px; } .receipt img { max-width: 240px !important; } .receipt, .receipt .table-wrap, .receipt table, .receipt tr { page-break-inside: avoid; } } /* ---------- Login ---------- */ .auth-body { background: linear-gradient(160deg, var(--navy) 0%, #10233c 60%, #132b49 100%); min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 20px; } .auth-wrap { width: 100%; max-width: 400px; } .auth-card { background: var(--card); border-radius: 18px; padding: 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .auth-brand .brand-mark { color: #fff; } .auth-brand-name { font-weight: 800; letter-spacing: .1em; font-size: 15px; } .auth-brand-sub { font-size: 12px; color: var(--muted); } .auth-card h1 { font-size: 20px; } .auth-sub { color: var(--muted); font-size: 13.5px; margin: 6px 0 18px; line-height: 1.5; } .auth-card .field { margin-bottom: 12px; } .auth-foot { text-align: center; color: #64748b; font-size: 12px; margin-top: 18px; letter-spacing: .04em; } /* ---------- Cortes / captura de foto ---------- */ .muted-note { color: var(--muted); font-size: 12px; display: block; margin-top: 6px; } .photo-capture { margin-top: 16px; } .photo-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 28px 18px; border: 2px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; cursor: pointer; } .photo-drop:hover { border-color: var(--blue); background: #f0f6ff; } .photo-drop.has-file { border-color: var(--green); background: var(--green-soft); } .photo-drop strong { font-size: 15px; } .photo-drop small { color: var(--muted); font-size: 12.5px; } .photo-ico { color: var(--blue); } .photo-preview[hidden] { display: none; } .photo-preview { display: block; max-width: 100%; margin-top: 14px; border-radius: 12px; border: 1px solid var(--line); } .cut-photo { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); } .denom-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 0; } .denom-table th, .denom-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; } .denom-table thead th { font-size: 11px; text-transform: uppercase; color: var(--muted); } .denom-table tfoot th { font-size: 14px; border-top: 2px solid var(--line); border-bottom: 0; padding-top: 10px; } .denom-qty, .denom-cent { width: 90px; text-align: right; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; } .denom-sub { color: var(--muted); font-variant-numeric: tabular-nums; } .efectivo-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--navy); color: #fff; } .efectivo-box span { font-size: 13px; color: #cbd5e1; } .efectivo-box strong { font-size: 22px; font-weight: 800; } /* ---------- Look & feel por marca ---------- user_brand() (email o stores.brand) pone la clase brand-* en . Sin clase: tema corporativo marino. --brand-bar-rgb pinta la barra "Personal en piso" de Mi Equipo con el color de la marca. */ :root { --brand-bar-rgb: 22, 163, 74; } body.brand-hoven { /* El sidebar toma var(--navy). Antes valía #2b070e (vino casi negro) y el rojo de marca vivía solo en --blue, es decir solo en acentos: por eso el menú se veía tinto y no rojo Höven. Ahora --navy ES el rojo, con dos tonos abajo para hover y activo. */ --navy: #e8112d; --navy-2: #cf0f28; --navy-3: #b90d24; --blue: #e8112d; --blue-deep: #b90d24; --blue-soft: #fde3e7; --brand-bar-rgb: 217, 15, 40; } /* Sobre rojo cálido, los grises AZULADOS del diseño navy (#cbd5e1, #b9c5d6, #64748b, #94a3b8) se ven turbios: es choque de temperatura de color, y era lo que "ensuciaba" el menú. Aquí se sustituyen por blancos translúcidos, que toman el tono del fondo en lugar de pelearse con él. Solo para Höven: en navy/verde/gris de las otras marcas los fríos son los correctos. */ /* Los grises AZULADOS del diseño navy (#cbd5e1, #b9c5d6, #64748b, #94a3b8) solo funcionan sobre un fondo casi negro. Sobre el rojo de Höven se ven turbios, y sobre el aqua de Cabostyle son directamente ilegibles (el #64748b de los rótulos de sección da 1.07:1). En esas dos marcas el texto va en blanco. Instyle no se toca: su marino es oscuro y los fríos originales son correctos. */ body.brand-hoven .sidebar, body.brand-cabostyle .sidebar { color: #fff; } body.brand-hoven .nav-item, body.brand-cabostyle .nav-item { color: #fff; } body.brand-hoven .nav-item:hover, body.brand-cabostyle .nav-item:hover { color: #fff; } body.brand-hoven .nav-item.active, body.brand-cabostyle .nav-item.active { color: #fff; box-shadow: inset 3px 0 0 #fff; /* el acento era var(--blue): mismo tono sobre sí mismo = invisible */ } body.brand-hoven .nav-group, body.brand-cabostyle .nav-group { color: rgba(255, 255, 255, .9); } body.brand-hoven .version, body.brand-cabostyle .version { color: rgba(255, 255, 255, .82); } body.brand-hoven .brand-text small, body.brand-cabostyle .brand-text small { color: rgba(255, 255, 255, .85); } body.brand-hoven .sidebar-foot, body.brand-cabostyle .sidebar-foot { border-top-color: rgba(255, 255, 255, .18); } body.brand-hoven .brand-mark, body.brand-cabostyle .brand-mark { background: rgba(255, 255, 255, .16); } /* Instyle: solo se sube el gris de los rótulos de sección y la versión, que a 2.99:1 tampoco se leían sobre el marino. El resto de los fríos se quedan. */ body.brand-group .nav-group, body.brand-group .version { color: rgba(255, 255, 255, .78); } /* Los TOTALES DE DINERO se quedan en el vino oscuro a propósito. Con --navy en rojo pleno, «Total Efectivo» y los totales de arqueos/recibos salían en rojo brillante — y en caja el rojo significa faltante. Un total correcto no debe parecer un error. */ body.brand-hoven .denom-total, body.brand-hoven .receipt-total, body.brand-hoven .efectivo-box { background: #2b070e; } /* Cabostyle = AQUA. El tono no puede subir más: el logotipo es de letra blanca, y de aquí hacia un aqua más claro el contraste cae por debajo de 4.5:1 (un aqua puro daría 1.25:1 y el logo desaparecería). Este da 5.09:1. */ body.brand-cabostyle { --navy: #0b7a83; --navy-2: #096871; --navy-3: #07555c; --blue: #0e9594; --blue-deep: #0a6f6e; --blue-soft: #d7f0f0; --brand-bar-rgb: 14, 149, 148; } body.brand-fitters { --brand-bar-rgb: 37, 99, 235; } /* Instyle = AZUL MARINO. Antes era gris oscuro + arena/dorado; el gris no identificaba a la marca. Se conserva el fondo hueso del manual. */ body.brand-group { --navy: #1b2a4a; --navy-2: #223357; --navy-3: #2a3e68; --blue: #2e5aac; --blue-deep: #24478a; --blue-soft: #dce6f7; --bg: #efeeea; --brand-bar-rgb: 46, 90, 172; } /* ---------- Concursos (mejor vendedora) ---------- */ .check-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #334155; cursor: pointer; } .check-row input { width: 17px; height: 17px; } /* Fila destacada del podio en las tablas de ranking */ tr.is-top td { background: #fffdf3; } body.brand-group tr.is-top td, body.brand-hoven tr.is-top td, body.brand-cabostyle tr.is-top td { background: color-mix(in srgb, var(--blue) 8%, #fff); } /* Podio de 3 ganadoras */ .podium { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 4px; } @media (min-width: 620px) { .podium { grid-template-columns: repeat(3, 1fr); } } .podium-step { border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px; text-align: center; background: linear-gradient(180deg, #fff, #fbfaf5); } .podium-1 { border-color: #e6c34d; box-shadow: 0 6px 20px rgba(230, 195, 77, .22); order: 0; } .podium-2 { border-color: #c7ccd4; order: 0; } .podium-3 { border-color: #d8a877; order: 0; } @media (min-width: 620px) { .podium-1 { transform: translateY(-8px); } } .podium-medal { font-size: 30px; line-height: 1; } .podium-name { font-weight: 700; margin-top: 6px; font-size: 15px; word-break: break-word; } .podium-amount { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--blue); margin-top: 4px; } .podium-foot { color: var(--muted); font-size: 12px; margin-top: 3px; } /* Héroe: vendedora del mes */ .contest-hero { display: flex; align-items: center; gap: 18px; } .contest-hero-flat { margin-top: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfaf5; } .contest-hero-medal { font-size: 46px; line-height: 1; } .contest-hero-label { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; color: var(--muted); } .contest-hero-name { font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 2px; } .contest-hero-sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; } .contest-progress-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; } /* Tabla de captura/revisión: inputs compactos */ .contest-edit input[type="text"] { width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; } .contest-edit input[type="text"]:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); } .contest-edit td.num input { text-align: right; } .contest-edit input[type="checkbox"] { width: 17px; height: 17px; } /* Selector de sucursal del módulo Concursos */ .store-switch { margin-bottom: 16px; } .store-switch .field { max-width: 420px; } /* ══ Coaching — Retail Performance 1-Tap (v0.73.0) ══════════════════════ Pantalla para el DEDO: tarjetas grandes de colaboradora, pestañas 🟢🟡🔴 con radios + :checked (cero JS) y chips-checkbox que se pintan al tap. */ .coach-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .coach-card { display: block; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); text-decoration: none; color: inherit; border: 1px solid transparent; } .coach-card:active, .coach-card:hover { border-color: var(--brand, #a3823c); } .coach-name { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; } .coach-role { color: var(--muted); font-size: 12px; margin-top: 1px; } .coach-lights { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .coach-lights .cl { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 12px; background: #f1f5f9; } .coach-lights .cl-g { background: #dcfce7; color: #166534; } .coach-lights .cl-y { background: #fef3c7; color: #92400e; } .coach-lights .cl-r { background: #fee2e2; color: #991b1b; } .coach-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); font-weight: 600; } /* Pestañas por radio: los inputs viven como hermanos de las panes */ .coach-tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .coach-tabbar { display: flex; gap: 6px; position: sticky; top: 62px; z-index: 5; background: var(--bg, #f4f4f5); padding: 4px 0 8px; } .coach-tabbar .ct { flex: 1; text-align: center; padding: 12px 6px; border-radius: 12px; font-weight: 800; font-size: 14px; cursor: pointer; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 2px solid transparent; user-select: none; } #tabG:checked ~ .coach-tabbar .ct-g { border-color: #16a34a; background: #dcfce7; } #tabY:checked ~ .coach-tabbar .ct-y { border-color: #d97706; background: #fef3c7; } #tabR:checked ~ .coach-tabbar .ct-r { border-color: #dc2626; background: #fee2e2; } .coach-pane { display: none; } #tabG:checked ~ .pane-g, #tabY:checked ~ .pane-y, #tabR:checked ~ .pane-r { display: block; } .coach-cat { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 10px; } .coach-cat-title { font-weight: 800; font-size: 13.5px; margin-bottom: 8px; } .tap-grid { display: flex; flex-wrap: wrap; gap: 8px; } .tap { display: inline-flex; } .tap input { position: absolute; opacity: 0; pointer-events: none; } .tap span { display: inline-block; padding: 10px 14px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 2px solid transparent; user-select: none; line-height: 1.2; } .tap input:checked + span { color: #fff; } .tap-felicitar input:checked + span { background: #16a34a; border-color: #15803d; } .tap-coaching input:checked + span { background: #d97706; border-color: #b45309; } .tap-correctiva input:checked + span { background: #dc2626; border-color: #b91c1c; } .coach-savebar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 10px; padding: 10px 0 14px; background: linear-gradient(transparent, var(--bg, #f4f4f5) 30%); pointer-events: none; } .coach-savebar .btn { pointer-events: auto; } .coach-savebar .btn { padding: 14px 18px; font-size: 15px; } .coach-md { font-size: 13.5px; line-height: 1.55; white-space: normal; word-break: break-word; } /* Foco de teclado: los inputs viven ocultos pero siguen siendo tabulables */ #tabG:focus-visible ~ .coach-tabbar .ct-g, #tabY:focus-visible ~ .coach-tabbar .ct-y, #tabR:focus-visible ~ .coach-tabbar .ct-r { outline: 2px solid #0ea5e9; outline-offset: 2px; } .tap input:focus-visible + span { outline: 2px solid #0ea5e9; outline-offset: 2px; } /* ══ Cuadre de la Póliza de Ingreso (v0.75.0) ═══════════════════════════ Los cargos deben igualar a las ventas netas; el excedente son abonos de clientes a sus apartados y el faltante es un problema. Se pinta distinto cada caso para que se lea de un vistazo. */ .cuadre { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--line, #e4e4e7); } .cuadre-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; } .cuadre-row span { color: var(--muted); } .cuadre-row strong { font-variant-numeric: tabular-nums; } .cuadre-dif { border-top: 1px solid var(--line, #e4e4e7); margin-top: 5px; padding-top: 7px; font-size: 14px; } .cuadre-dif span { font-weight: 700; color: #334155; } .cuadre.is-ok { background: #f0fdf4; border-color: #86efac; } .cuadre.is-ok .cuadre-dif strong { color: #15803d; } .cuadre.is-apartado { background: #fffbeb; border-color: #fcd34d; } .cuadre.is-apartado .cuadre-dif span, .cuadre.is-apartado .cuadre-dif strong { color: #b45309; } .cuadre.is-faltante { background: #fef2f2; border-color: #fca5a5; } .cuadre.is-faltante .cuadre-dif span, .cuadre.is-faltante .cuadre-dif strong { color: #b91c1c; } tr.is-apartado td { background: #fffbeb; font-weight: 600; } /* Logo de marca en el sidebar (PNG de letra blanca sobre transparente). max-height fija la altura y width:auto respeta la proporción, así el mismo bloque sirve para un logotipo ancho o uno cuadrado sin deformarlo. */ .brand-logo { max-width: 100%; max-height: 44px; width: auto; height: auto; display: block; object-fit: contain; } /* ── Tablero de Redes Sociales (marketing/metrics) ─────────────────────── */ .rs-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .rs-kpi { flex-direction: column; align-items: stretch; gap: 6px; } .rs-kpi .kpi-body { width: 100%; } .rs-spark { height: 46px; margin-top: 2px; } .rs-spark .spark { height: 46px; } .rs-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 1100px) { .rs-row { grid-template-columns: 1fr; } } .rs-chart { width: 100%; } .lchart { width: 100%; height: auto; display: block; } .rs-key { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } .rs-key-dash { background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); } .rs-donut, .rs-gauge { display: flex; justify-content: center; padding: 6px 0; } .donut, .gauge { width: 100%; max-width: 210px; height: auto; display: block; } .rs-legend { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; } .rs-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .rs-legend-row strong { margin-left: auto; } .rs-insight { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); } .rs-insight:last-child { border-bottom: 0; } .rs-insight-t { font-weight: 700; font-size: 14px; } .rs-insight-x { color: var(--muted); font-size: 13px; margin-top: 2px; } .rs-badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .rs-ok { background: var(--green-soft); color: #15803d; } .rs-info { background: var(--blue-soft); color: var(--blue-deep); } .rs-warn { background: var(--orange-soft); color: #b45309; } .rs-thumb-cell { width: 52px; padding-right: 0 !important; } .rs-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; background: #e2e8f0; } /* Bloques por marca en Recepciones: cada marca deposita en sus propias cuentas */ .marca-bloque { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .marca-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .marca-head h3 { margin: 0; font-size: 15px; } .marca-head .muted { font-size: 12.5px; margin-left: 8px; } /* Barra de filtros estándar de Valores (sucursal / día / mes) */ .filtros-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .filtros-bar .filtro { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; } .filtros-bar select, .filtros-bar input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: #fff; color: var(--text); } /* Depósitos: corte de otra marca apagado por el candado marca-cuenta */ .dep-cut-off { opacity: .4; } .dep-cut-off input { cursor: not-allowed; } /* Chip DISC de Mi Equipo: lleva al resultado completo en Factor. El link va firmado, así que abre sin cuenta de Factor. */ a.disc-link { text-decoration: none; color: inherit; display: inline-block; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; transition: background .15s, transform .15s; } a.disc-link:hover { background: rgba(15, 23, 42, .05); transform: translateY(-1px); } a.disc-link:hover .badge { box-shadow: 0 2px 8px rgba(15, 23, 42, .18); } a.disc-link:focus-visible { outline: 2px solid var(--brand, #10b981); outline-offset: 2px; } a.disc-link .badge { cursor: pointer; } /* Overlay de "procesando" (gancho data-busy en app.js) */ .busy-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:9999} .busy-box{background:#fff;border-radius:14px;padding:22px 26px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,.25);max-width:320px;text-align:center} .busy-spin{width:34px;height:34px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:#2563eb;animation:busy-spin .8s linear infinite} @keyframes busy-spin{to{transform:rotate(360deg)}} .busy-msg{font-size:14px;color:#334155;font-weight:600;line-height:1.4} /* ── Cards del equipo: KPIs a color (v1.14.1) ───────────────────────── La forma de medirse — conversión, UPT, ticket promedio y lugar — en fichas de color por integrante. ° = de su tienda; ✓ = individual. */ .tk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .tk-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .tk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .tk-tile { border-radius: 10px; padding: 10px 12px; color: #fff; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 2px 8px rgba(15, 23, 42, .18); } .tk-tile .tk-big { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .tk-tile .tk-big sup { font-size: 11px; font-weight: 700; opacity: .85; margin-left: 1px; } .tk-tile .tk-lbl { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .92; } .tk-conv { background: linear-gradient(135deg, #0d9488, #0f766e); } .tk-upt { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); } .tk-tp { background: linear-gradient(135deg, #d97706, #b45309); } .tk-lugar-top { background: linear-gradient(135deg, #16a34a, #15803d); } .tk-lugar-mid { background: linear-gradient(135deg, #475569, #334155); } .tk-lugar-bad { background: linear-gradient(135deg, #dc2626, #b91c1c); } /* ---------- Secciones plegables del menú (28-ago-2026) ---------- El rótulo de sección pasó de
a