/* NEXO Admin Portal — layout y componentes */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font-body); color: var(--ink); background: var(--canvas); font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* backstop: nada provoca scroll lateral de toda la página */ } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .mono { font-family: var(--font-mono); } .balance { text-wrap: balance; } /* ---------- Shell ---------- */ .shell { display: grid; grid-template-columns: 212px minmax(0,1fr); height: 100vh; } .sidebar { background: var(--surface-soft); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; overflow: hidden; height: 100vh; } .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .brand { flex: none; display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; text-decoration: none; color: inherit; border-radius: var(--r-8); } .brand:hover { opacity: 0.85; } .brand img { width: 26px; height: 26px; border-radius: var(--r-8); } .brand b { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; } .nav-group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; } .nav-group-title { padding: 2px 12px 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-8); color: var(--ink-2); font-size: 13px; font-weight: 500; background: none; border: none; width: 100%; text-align: left; transition: background 120ms var(--ease), color 120ms var(--ease); } .nav-item:hover { background: rgba(30,13,1,0.04); color: var(--ink); } .nav-item.active { background: var(--surface-warm); color: var(--accent-ink); font-weight: 600; } .nav-item.active .dot { background: var(--accent); } .nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; margin-right: -4px; } .nav-item .lbl { flex: 1; } .nav-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .nav-badge.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: transparent; } .nav-badge.crit { background: var(--crit-bg); color: var(--crit-fg); border-color: transparent; } .nav-divider { height: 0; border-top: 1px solid; border-image: var(--dotted) 1; margin: 12px 6px; } .ext-link { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; color: var(--ink-3); font-size: 12px; border-radius: var(--r-8); } .ext-link:hover { background: rgba(30,13,1,0.04); color: var(--ink); } .ext-link .ext-ic { opacity: .6; } .sidebar-footer { flex: none; position: relative; padding: 8px 0 2px; border-top: 1px solid var(--border-soft); margin-top: 4px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-family: var(--font-display); } .sidebar-footer .who { font-size: 12px; flex: 1; min-width: 0; text-align: left; } .sidebar-footer .who b { display: block; font-weight: 600; } .sidebar-footer .who span { color: var(--ink-3); font-size: 11px; } .profile-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: none; background: none; border-radius: var(--r-8); cursor: pointer; } .profile-btn:hover, .sidebar-footer.open .profile-btn { background: rgba(30,13,1,0.05); } .profile-btn .caret { flex: none; display: flex; color: var(--ink-3); transition: transform 150ms var(--ease); } .sidebar-footer.open .caret { transform: rotate(180deg); } .profile-menu { display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; } .profile-menu[hidden] { display: none; } .profile-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-8); color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; } .profile-item:hover { background: rgba(30,13,1,0.04); color: var(--ink); } .profile-item.active { background: var(--surface-warm); color: var(--accent-ink); font-weight: 600; } .profile-item .dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; } .profile-item.active .dot { background: var(--accent); } /* ---------- Content ---------- */ .content { overflow-y: auto; overflow-x: hidden; } .screen { padding: 16px 24px 26px; max-width: 1600px; margin-inline: auto; } .screen-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; } .screen-head h1 { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; margin: 0; } .screen-head .sub { color: var(--ink-3); font-size: 13px; } .screen-head .spacer { flex: 1; } /* ---------- Buttons (siempre pills) ---------- */ .btn { border-radius: var(--r-pill); padding: 8px 15px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); transition: all 120ms var(--ease); } .btn:hover { border-color: var(--ink-3); } .btn.primary { background: var(--accent); color: #fff; border-color: transparent; box-shadow: var(--sh-cta); } .btn.primary:hover { background: var(--accent-hover); } .btn.ghost { border-color: transparent; background: none; color: var(--ink-2); } .btn.sm { padding: 5px 11px; font-size: 12px; } /* ---------- Chips / tags ---------- */ .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; background: var(--neutral-bg); color: var(--neutral-fg); white-space: nowrap; } .chip.window { background: var(--surface-soft); color: var(--ink-3); border: 1px solid var(--border-soft); font-weight: 500; } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; } .tag.good { background: var(--good-bg); color: var(--good-fg); } .tag.warn { background: var(--warn-bg); color: var(--warn-fg); } .tag.crit { background: var(--crit-bg); color: var(--crit-fg); } .tag.info { background: var(--info-bg); color: var(--info-fg); } .tag.neutral { background: var(--neutral-bg); color: var(--neutral-fg); } .tag.purple { background: var(--purple-bg); color: var(--purple-fg); } .tag.peach { background: var(--peach-bg); color: var(--peach-fg); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-12); padding: 15px 17px; box-shadow: var(--sh-card); min-width: 0; } .card-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .card-title .meta { font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--ink-3); } .note { color: var(--ink-3); font-size: 12px; text-wrap: pretty; } /* ---------- KPI grid ---------- */ .kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-12); padding: 14px 15px; box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 6px; transition: border-color 120ms var(--ease); } a.kpi:hover { border-color: var(--border-strong); } .kpi.warm { background: var(--surface-warm); border-color: transparent; } .kpi .kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; } .kpi .kpi-lbl { font-size: 12px; color: var(--ink-2); } .kpi .kpi-val { font-family: var(--font-display); font-weight: 800; font-size: 29px; letter-spacing: -0.03em; } .kpi .kpi-foot { font-size: 11px; color: var(--ink-3); } .kpi .kpi-foot.good { color: var(--good-fg); } .kpi .kpi-foot.warn { color: var(--warn-fg); } .kpi .kpi-foot.crit { color: var(--crit-fg); } /* ---------- Layout rows ---------- */ .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .row-2.wide-left { grid-template-columns: 1.4fr 1fr; } .grid-gap { display: grid; gap: 16px; min-width: 0; } .grid-gap > * { min-width: 0; } /* ---------- Line chart ---------- */ .chart-box { position: relative; height: 200px; } /* ---------- Channel bars ---------- */ .chan { display: flex; align-items: center; gap: 10px; padding: 7px 0; } .chan .ic { width: 18px; height: 18px; opacity: .9; } .chan .name { width: 130px; font-size: 13px; } .chan .track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--surface-soft); overflow: hidden; } .chan .fill { display: block; height: 100%; border-radius: var(--r-pill); } .chan .val { width: 92px; text-align: right; font-size: 12px; color: var(--ink-2); } /* ---------- Kanban ---------- */ .kanban { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } .kan-col { background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: var(--r-12); padding: 11px; min-height: 120px; } .kan-col.waiting { background: var(--surface-warm-2); } .kan-col h4 { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0 0 10px; display: flex; justify-content: space-between; } /* Muestra ~6 tarjetas de alto; si hay más, scroll dentro de la columna (scrollbar nativo, solo al hacer scroll). */ .kan-cards { max-height: 640px; overflow-y: auto; overflow-x: hidden; } .inc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-10); padding: 11px 12px; margin-bottom: 9px; box-shadow: 0 1px 2px rgba(26,26,26,0.04); } .inc-card .top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 5px; } .inc-card .client { font-size: 11px; color: var(--accent-deep); font-weight: 600; } .inc-card .ref { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } .inc-card .title { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; } .inc-card .foot { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); } .status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .status-dot.crit { background: var(--ch-red); } .status-dot.warn { background: var(--warn-fg); } .status-dot.good { background: var(--ch-green); } /* ---------- Tables ---------- */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl thead th { text-align: left; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 9px 14px; background: var(--surface-soft); border-bottom: 1px solid var(--border); } .tbl tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); } .tbl tbody tr:hover { background: var(--surface-soft); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; } .scroll-box { overflow: auto; } /* ---------- Loading / empty ---------- */ .loading, .empty { display: flex; align-items: center; justify-content: center; padding: 3rem; color: var(--ink-3); font-size: 13px; gap: 10px; } .spinner { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Analítica ---------- */ .range-select { border-radius: var(--r-pill); border: 1px solid var(--border-strong); padding: 7px 13px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--ink); } .ai-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; } .ai-stat { background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: var(--r-10); padding: 12px 13px; } .ai-stat .pct { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; } .ai-stat .cnt { font-size: 11px; color: var(--ink-3); margin-top: 2px; } .ai-stat .lbl { font-size: 12px; color: var(--ink-2); margin-top: 4px; } .ai-stat.clean .pct { color: var(--good-fg); } .ai-stat.corrected .pct { color: var(--warn-fg); } .ai-stat.manual .pct { color: var(--purple-fg); } .ai-stat.unmatched .pct { color: var(--crit-fg); } .corr-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .corr-row .name { width: 92px; font-size: 12px; color: var(--ink-2); } .corr-row .track { flex: 1; height: 8px; background: var(--surface-soft); border-radius: var(--r-pill); overflow: hidden; } .corr-row .fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); } .corr-row .val { width: 52px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .equal-252 > .card { min-height: 252px; } .precision-cell { padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; } .precision-cell.high { background: var(--good-bg); color: var(--good-fg); } .precision-cell.mid { background: var(--warn-bg); color: var(--warn-fg); } .precision-cell.low { background: var(--crit-bg); color: var(--crit-fg); } .search { border-radius: var(--r-pill); border: 1px solid var(--border-strong); padding: 7px 13px; font-size: 13px; font-family: inherit; width: 260px; background: var(--surface); } th.sortable { cursor: pointer; user-select: none; } th.sortable .chev { opacity: .35; } th.sortable.active .chev { opacity: 1; color: var(--accent); } .cohort-cell { display: inline-block; min-width: 40px; padding: 3px 6px; border-radius: var(--r-4); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; } .mini-bar-bg { height: 6px; background: var(--surface-soft); border-radius: var(--r-pill); overflow: hidden; min-width: 60px; } .mini-bar { height: 100%; background: var(--accent); border-radius: var(--r-pill); } .trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Utilidades extra ---------- */ .kpi-row.k4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .filter-chip { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 12px; color: var(--ink-2); } .filter-chip.active { background: var(--surface-warm); color: var(--accent-ink); border-color: transparent; font-weight: 600; } .row-hi { background: var(--surface-warm-2); } .lock { color: var(--ink-3); font-size: 11px; } .mono-ref { font-family: var(--font-mono); font-size: 12px; } .cli-link { color: var(--ink-1, inherit); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--border); cursor: pointer; } .cli-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .ico-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--r-8, 8px); background: transparent; color: var(--ink-2, inherit); cursor: pointer; line-height: 0; } .ico-btn:hover { border-color: var(--accent); color: var(--accent); } .ico-btn.ico-danger:hover { border-color: #C2362B; color: #C2362B; } /* Tooltip propio (inmediato) para botones de icono con data-tip. */ .ico-btn[data-tip] { position: relative; } .ico-btn[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: #1E0D01; color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; letter-spacing: .01em; padding: 5px 9px; border-radius: 6px; z-index: 60; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.2); } .ico-btn[data-tip]:hover::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1E0D01; z-index: 60; pointer-events: none; } .tbl td.ico-col, .tbl th.ico-col { width: 1%; white-space: nowrap; text-align: center; padding-left: 1px; padding-right: 1px; } .sepa-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #E0B15A; background: #FFF4E0; color: #9A6B12; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .sepa-dot.on { border-color: #2E7A3A; background: #2E7A3A; color: #fff; } /* Borrador SEPA a ≤7 días de su fecha de emisión y sin marcar: aviso en rojo. */ .sepa-dot.due { border-color: #C2362B; background: #F8D7D4; color: #C2362B; animation: sepaPulse 1.8s ease-in-out infinite; } @keyframes sepaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(194,54,43,0.0); } 50% { box-shadow: 0 0 0 3px rgba(194,54,43,0.18); } } .sepa-dot:hover { filter: brightness(0.96); } /* Toggle "contactado" en la tabla de leads */ .lead-ct { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; } .lead-ct:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .lead-ct.on { background: var(--good-bg); border-color: transparent; color: var(--good-fg); } .ico-col .ico-btn { padding: 5px 5px; } .btn.danger { background: #C2362B; color: #fff; border-color: #C2362B; } .btn.danger:hover { background: #a82c22; border-color: #a82c22; } .btn[disabled] { opacity: .5; cursor: not-allowed; } .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 9999; display: flex; align-items: center; gap: 10px; background: var(--surface, #fff); color: var(--ink-1, #1a1a1a); border: 1px solid var(--border); border-left: 4px solid #2E7A3A; border-radius: 12px; padding: 12px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.18); font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s; max-width: min(560px, 92vw); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast-err { border-left-color: #C2362B; } /* Diálogo / panel */ .overlay { position: fixed; inset: 0; background: rgba(30,13,1,0.28); display: flex; align-items: center; justify-content: center; z-index: 50; } .dialog { background: var(--surface); border-radius: var(--r-16); box-shadow: var(--sh-dialog); width: min(560px, 92vw); max-height: 88vh; overflow: auto; padding: 22px 24px; } .dialog h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 0 0 4px; } .drawer-wrap { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; background: rgba(30,13,1,0.28); } .drawer { background: var(--surface); width: min(920px, 96vw); height: 100%; overflow: auto; box-shadow: var(--sh-dialog); padding: 22px 24px; } .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* Formularios */ .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; } .field label { font-size: 12px; color: var(--ink-2); font-weight: 500; } .field input, .field select, .field textarea { border: 1px solid var(--border-strong); border-radius: var(--r-8); padding: 8px 11px; font-family: inherit; font-size: 13px; background: var(--surface); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .perm-box { background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: var(--r-8); padding: 11px 13px; font-size: 12px; color: var(--ink-2); } /* Calendario */ .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal .dow { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); text-align: center; padding: 4px 0; } .cal .day { aspect-ratio: 1; border: 1px solid var(--border-soft); border-radius: var(--r-8); padding: 5px 6px; font-size: 11px; position: relative; } .cal .day.has { background: var(--surface-warm); border-color: transparent; } .cal .day .mk { position: absolute; bottom: 5px; left: 6px; right: 6px; font-size: 9px; color: var(--accent-ink); } /* Factura documento (mini) */ .invoice-doc { border: 1px solid var(--border); border-radius: var(--r-10); padding: 18px 20px; font-size: 12px; } .invoice-doc .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .invoice-doc .fac { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; } .watermark { color: var(--ink-disabled); font-size: 10px; letter-spacing: .1em; } /* Settings section groups */ .set-group { margin-bottom: 16px; } .set-group h3 { font-family: var(--font-display); font-weight: 800; font-size: 15px; margin: 0 0 4px; } .save-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 20px; position: sticky; bottom: 0; background: var(--canvas); padding: 10px 0; } /* ---------- Barra inferior móvil + hoja Más ---------- */ .bottom-tabs { display: none; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; background: none; border: none; color: var(--ink-3); font-size: 10px; font-weight: 600; } .tab img { width: 22px; height: 22px; } .tab.active { color: var(--accent-ink); } .mas-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 16px 16px 0 0; padding: 8px 16px 30px; box-shadow: var(--sh-dialog); max-height: 72vh; overflow: auto; } .overlay:has(.mas-sheet) { align-items: flex-end; } .mas-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 6px auto 10px; } .mas-item { display: block; padding: 14px 8px; font-size: 15px; border-bottom: 1px solid var(--border-soft); } .mas-item.ext { color: var(--ink-3); font-size: 13px; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, minmax(0,1fr)); } .kpi-row.k4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .kanban, .kanban.pro, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .ai-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 760px) { .shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; } .sidebar { display: none; } .content { overflow: visible; padding-bottom: 74px; } .screen { padding: 14px 14px 28px; } .row-2, .row-2.wide-left, .grid-3, .kanban, .kanban.pro { grid-template-columns: minmax(0, 1fr); } .ai-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .kpi-row, .kpi-row.k4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .screen-head { flex-wrap: wrap; row-gap: 8px; } .screen-head .search, .screen-head .range-select, .filters .range-select, .filters .search { width: 100%; } .filters { flex-wrap: wrap; } .scroll-box { overflow-x: auto; } .search { width: 100%; } .btn, .filter-chip { min-height: 44px; } .save-bar { bottom: 60px; } .bottom-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(26,26,26,0.06); padding-bottom: env(safe-area-inset-bottom, 0); } } /* ---------- CRM · Adquisición ---------- */ .muted { color: var(--ink-3); } td .tag { vertical-align: middle; } .crm-kanban { display: grid; grid-template-columns: repeat(var(--crm-cols, 5), minmax(240px, 1fr)); gap: 12px; overflow: auto; max-height: 64vh; padding-bottom: 6px; } .deal-card { display: flex; flex-direction: column; gap: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-10); padding: 9px 11px; margin-bottom: 8px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(26,26,26,0.04); transition: border-color 120ms var(--ease); } .deal-card:hover { border-color: var(--border-strong); } .deal-card .deal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .deal-card .deal-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deal-card .deal-sub { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deal-card .deal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--ink-2); } .deal-card .deal-foot .crit { color: var(--crit-fg); } .deal-card .deal-foot .warn { color: var(--warn-fg); } .deal-card .deal-foot .muted { color: var(--ink-3); } /* To-dos del CRM (persona/empresa/ambas) con draft desplegable */ .crm-todo { border: 1px solid var(--border-soft); border-radius: var(--r-10); margin-bottom: 8px; background: var(--surface); overflow: hidden; } .crm-todo-head { display: flex; align-items: center; gap: 12px; padding: 10px 13px; } .crm-todo-main { flex: 1 1 auto; min-width: 0; } .crm-todo-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; } .crm-todo-ents { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; font-size: 12px; color: var(--ink-2); } .crm-todo-ents .crm-td-ent { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .crm-todo-due { flex: none; display: flex; align-items: center; gap: 8px; } .crm-todo-due .crm-td-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .crm-todo-x { flex: none; } .crm-todo-body { border-top: 1px dashed var(--border); background: var(--surface-soft); padding: 12px 14px; } .crm-todo-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--ink); } @media (max-width: 760px) { .crm-todo-head { flex-wrap: wrap; } .crm-todo-due { order: 3; } } .tbl td.crit { color: var(--crit-fg); font-weight: 600; } .tbl td.warn { color: var(--warn-fg); font-weight: 600; } .tbl td.muted { color: var(--ink-3); } @media (max-width: 1100px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .kpi-row[style] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } /* ---------- Notas guardables (composer de facturas) ---------- */ .note-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: 12px; color: var(--ink-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .note-chip:hover { border-color: var(--border-strong); } .note-chip .nc-scope { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 1px 5px; border-radius: var(--r-pill); flex: none; } .note-chip .nc-scope.g { background: var(--purple-bg); color: var(--purple-fg); } .note-chip .nc-scope.c { background: var(--peach-bg); color: var(--peach-fg); } /* ---------- Incidencias v2 ---------- */ /* Pills de estado/tipo/etapa (spec §7) */ .pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: -0.01em; } .pill-red { background: #F8D7D4; color: #C2362B; } .pill-amber { background: #FBE7C8; color: #C57A1A; } .pill-coral { background: #FCDDC2; color: #B5562B; } .pill-green { background: #D4ECD2; color: #2E7A3A; } .pill-lila { background: #E5E1F4; color: #5B4FB8; } .pill-gris { background: #F1F1F1; color: #5C4B3D; } /* Tablero de propuestas: 3 columnas */ .kanban.pro { grid-template-columns: repeat(4, minmax(0,1fr)); } .kan-col .kan-note { font-size: 11px; color: var(--ink-3); margin: -6px 0 9px; } .kan-col .kan-empty { font-size: 12px; color: var(--ink-disabled, var(--ink-3)); padding: 6px 2px; } /* Tarjeta */ .inc-card[draggable="true"] { cursor: grab; transition: box-shadow 120ms var(--ease), opacity 120ms var(--ease); } .inc-card[draggable="true"]:hover { border-color: var(--border-strong); } .inc-card.dragging { opacity: .4; } .inc-card.done { opacity: .72; } .inc-card .ic-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 5px; } .inc-card .ic-cli { font-size: 11px; color: var(--accent-deep); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inc-card .ic-ref { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); flex: none; } .inc-card .ic-title { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 7px; } .inc-card .ic-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 7px; } .inc-card .ic-refn { font-family: var(--font-mono); font-size: 10px; color: var(--accent-ink); text-decoration: none; background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; } .inc-card .ic-refn:hover { background: var(--surface); border-color: var(--accent-ink); text-decoration: underline; } .inc-card .ic-foot { display: flex; align-items: center; gap: 6px; font-size: 11px; } /* Cluster de GitHub abajo-derecha: Status abreviado a la izquierda de la pill «GH», misma fila. */ .inc-card .ic-ghbox { margin-left: auto; display: flex; align-items: center; gap: 5px; } .inc-card .ic-gh { background: #c0c4cc; color: #2a2f36; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; } .inc-card .ic-foot .muted { color: var(--ink-3); } .inc-card .ic-foot .crit { color: var(--crit-fg); } .inc-card .ic-foot .good { color: var(--good-fg); } .inc-gh-add { color: var(--accent-ink); font-weight: 600; cursor: pointer; } .status-dot { width: 7px; height: 7px; border-radius: 99px; flex: none; background: var(--ink-3); } .status-dot.crit { background: var(--crit-fg); } .status-dot.good { background: var(--good-fg); } .status-dot.warn { background: var(--warn-fg); } .status-dot.info { background: var(--info-fg); } .status-dot.muted { background: var(--ink-3); } /* Drag: columna destino */ .kan-col.drop-target { border: 1px dashed var(--accent-ink); background: #FFF3E8; } .inc-card.drop-before { box-shadow: inset 0 3px 0 var(--accent-ink); } .inc-card.drop-after { box-shadow: inset 0 -3px 0 var(--accent-ink); } /* Ficha */ .inc-dh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .inc-dh .mono-ref { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .inc-dh h1 { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 8px 0 0; } .inc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; background: var(--surface-soft); border-radius: var(--r-10); padding: 12px 14px; font-size: 12.5px; color: var(--ink-2); } .inc-meta b { color: var(--ink); font-weight: 600; margin-right: 4px; } .inc-msg { padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; } .inc-msg > div { white-space: pre-wrap; word-break: break-word; } /* preserva párrafos/saltos de línea */ .inc-msg b { font-size: 11px; color: var(--ink-3); margin-right: 6px; } .inc-msg .inc-msg-t { font-size: 10px; color: var(--ink-disabled, var(--ink-3)); } .inc-msg.mine b { color: var(--accent-deep); } .inc-gh { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); } .inc-gh b { color: var(--ink); } .inc-details { display: grid; gap: 8px; margin-top: 8px; } .inc-detail { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .inc-detail label { font-size: 12px; color: var(--ink-2); } .inc-detail select { font-size: 12px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-10); background: var(--surface); color: var(--ink); max-width: 62%; } .inc-detail input[type="datetime-local"] { font-size: 12px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-10); background: var(--surface); color: var(--ink); font-family: inherit; } .inc-gh-edit { margin-top: 8px; } .inc-gh-row { display: flex; gap: 6px; align-items: center; } .inc-gh-row input { flex: 1; min-width: 0; font-size: 12px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: var(--r-10); background: var(--surface); color: var(--ink); font-family: inherit; } /* Detalle de incidencia (rediseño) */ .inc-dh-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .inc-dh-pills .mono-ref { color: var(--ink-3); } /* Título del ticket: textarea que crece con el contenido (los títulos largos se leen enteros). */ .inc-title-edit { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.25; border: 1px solid transparent; background: none; width: 100%; margin: 10px 0 0; padding: 3px 6px; margin-left: -6px; color: var(--ink); border-radius: var(--r-8); display: block; resize: none; overflow: hidden; white-space: pre-wrap; word-break: break-word; } .inc-title-edit:hover { border-color: var(--border); } .inc-title-edit:focus { outline: none; border-color: var(--border-strong); background: var(--surface); } /* Bloque de descripción del ticket (separado de la conversación). */ .inc-desc { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--surface-soft, #f6f6f7); border: 1px solid var(--border); border-radius: var(--r-8); padding: 10px 12px; margin-top: 6px; } /* Plegado cuando es muy larga: se limita la altura con un desvanecido y un botón "Ver más". */ .inc-desc.clamped { max-height: 150px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent); } .inc-desc-toggle { display: inline-block; margin-top: 6px; color: var(--accent-ink); font-weight: 600; font-size: 12px; background: none; border: none; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .inc-desc-toggle:hover { text-decoration: underline; } .inc-dh-stats { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 14px; } .inc-dh-stats > div { display: flex; flex-direction: column; gap: 1px; } .inc-dh-stats b { font-size: 13px; color: var(--ink); } .inc-body2 { grid-template-columns: 1.4fr 1fr; } .inc-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; } .inc-ed { display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); min-width: 0; } .inc-ed label { font-size: 11px; color: var(--ink-3); } .inc-ed select, .inc-ed input:not([type="checkbox"]) { font-size: 13.5px; padding: 5px 7px; margin-left: -7px; border: 1px solid transparent; border-radius: var(--r-8); background: none; color: var(--ink); font-family: inherit; width: 100%; box-sizing: border-box; } .inc-ed select:hover, .inc-ed input:not([type="checkbox"]):hover, .inc-ed select:focus, .inc-ed input:not([type="checkbox"]):focus { border-color: var(--border-strong); background: var(--surface); outline: none; } .inc-ed .rep-ms { width: 100%; } .inc-ed .rep-ms summary { font-size: 13.5px; padding: 6px 9px; } .inc-drawer2 .rep-ms input[type="checkbox"] { width: auto; } .inc-tabs { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; flex-wrap: wrap; } .inc-tab { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-pill); padding: 5px 13px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink-2); } .inc-tab.active { background: var(--ink); color: #fff; border-color: transparent; } .inc-reply { display: flex; gap: 8px; align-items: center; margin-top: 12px; } .inc-reply input { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 10px 16px; font-size: 13px; font-family: inherit; background: var(--surface); } .inc-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--accent-ink); color: #fff; font-size: 15px; cursor: pointer; box-shadow: var(--sh-card); } .inc-hist { display: flex; flex-direction: column; } .inc-hist-item { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 3px 0 13px; } .inc-hist-item:last-child { padding-bottom: 2px; } /* Línea vertical del timeline: conecta cada punto con el siguiente. */ .inc-hist-item::before { content: ''; position: absolute; left: 3px; top: 10px; bottom: -3px; width: 2px; background: var(--border); } .inc-hist-item:last-child::before { display: none; } .inc-hist-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); margin-top: 5px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--surface); } .inc-hist-item:last-child .inc-hist-dot { background: var(--accent-ink); } .inc-hist-body { flex: 1 1 auto; min-width: 0; } .inc-hist-txt { font-size: 13px; color: var(--ink-1); line-height: 18px; } .inc-hist-del { flex: none; opacity: 0; border: none; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 5px; margin-top: 2px; border-radius: 6px; transition: opacity 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease); } .inc-hist-item:hover .inc-hist-del { opacity: 1; } .inc-hist-del:hover { background: var(--crit-bg); color: var(--crit-fg); } .inc-resolver { border: 1px solid var(--border); border-radius: var(--r-10); padding: 12px 14px; margin-top: 12px; } .inc-files.col { flex-direction: column; } .inc-file.wide { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: var(--r-10); } .inc-file-tag { flex: none; font-size: 9px; font-weight: 700; color: var(--ink-3); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-8); padding: 4px 6px; } @media (max-width: 760px) { .inc-body2 { grid-template-columns: 1fr; } .inc-edit-grid { grid-template-columns: 1fr; } } /* Alta */ .dialog.inc-dialog { width: min(620px, 94vw); } .inc-dialog .field { margin-bottom: 12px; } .chips-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; } .chip-sel { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 12px; color: var(--ink-2); cursor: pointer; } .chip-sel:hover { border-color: var(--ink-3); } .chip-sel.active { background: var(--surface-warm); color: var(--accent-ink); border-color: transparent; font-weight: 600; } .inc-dialog .field.missing #cCat, .inc-dialog .field.missing .chips-wrap { outline: 1.5px solid var(--crit-fg); outline-offset: 4px; border-radius: var(--r-10); } .inc-sep { border-top: 1px dashed var(--border); margin: 6px 0 14px; } .inc-cream { background: var(--surface-warm); border-radius: var(--r-10); padding: 12px 14px; margin: 4px 0 2px; } .inc-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; } /* Nueva incidencia (rediseño) */ .dialog.inc-create { width: min(660px, 94vw); } .inc-create .field { margin-bottom: 13px; } .inc-create select, .inc-create input:not([type="checkbox"]):not([type="radio"]), .inc-create textarea { width: 100%; box-sizing: border-box; } .inc-create .rep-ms input[type="checkbox"] { width: auto; } /* Login (auth Supabase) — estilo del login del portal de producto */ #loginScreen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--canvas, #EDE9E4); padding: 20px; z-index: 100; } .login-card { width: 100%; max-width: 420px; background: var(--surface, #fff); border: 1px solid var(--border, #eee); border-radius: 18px; padding: 34px 34px 30px; box-shadow: 0 10px 40px rgba(0,0,0,.08); } .login-logo { width: 44px; height: 44px; object-fit: contain; margin: 0 auto 12px; display: block; } .login-title { font-size: 26px; font-weight: 800; text-align: center; letter-spacing: -.01em; } .login-sub { color: var(--ink-3, #888); font-size: 13px; margin: 6px 0 0; text-align: center; } .login-tabs { display: flex; margin: 22px 0 20px; border-bottom: 1px solid var(--border, #eee); } .login-tab { flex: 1; background: none; border: 0; padding: 10px 4px 12px; font: inherit; font-size: 16px; color: var(--ink-3, #999); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .login-tab.active { color: var(--ink, #1a1a1a); font-weight: 600; border-bottom-color: var(--accent, #FF7B13); } .login-card form { display: flex; flex-direction: column; gap: 12px; } .login-inp { border: 1px solid var(--border-strong, #ddd); border-radius: 12px; padding: 13px 15px; font-size: 15px; font-family: inherit; width: 100%; box-sizing: border-box; } .login-inp:focus { outline: none; border-color: var(--accent, #FF7B13); box-shadow: 0 0 0 3px rgba(255,123,19,.12); } .login-err { color: var(--crit-fg, #C2362B); font-size: 12px; min-height: 14px; } .login-btn { width: 100%; justify-content: center; padding: 13px; font-size: 15px; border-radius: 12px; margin-top: 2px; } .login-link { background: none; border: 0; color: var(--ink-3, #888); font: inherit; font-size: 13px; cursor: pointer; padding: 8px; text-align: center; } .login-link:hover { color: var(--accent-ink, #C85700); } .login-note { font-size: 12px; color: var(--ink-3, #888); text-align: center; } .login-ok { text-align: center; font-size: 15px; font-weight: 600; padding: 8px 0 4px; } /* Accesos al Admin Portal */ .acc-sec-h { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2, #444); margin: 8px 0 12px; } .acc-sec-h::after { content: ""; flex: 1; border-top: 1px dashed var(--border, #ddd); } .acc-count { background: var(--accent, #FF7B13); color: #fff; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .acc-empty { color: var(--ink-3, #888); font-size: 13px; padding: 8px 2px 16px; } .acc-ava { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #3a3a3a; flex: none; } .acc-ava.sm { width: 26px; height: 26px; font-size: 10px; } .acc-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-mail { color: var(--ink-3, #888); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* que los flex/grid dejen truncar (necesitan min-width:0) */ .acc-id, .acc-cell-name, .acc-trow > div, .acc-invrow > div { min-width: 0; } .acc-cell-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Solicitudes pendientes */ .acc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-bottom: 24px; } .acc-card { border: 1px solid var(--border, #eee); border-radius: 14px; padding: 16px; background: var(--surface, #fff); } .acc-card-top { display: flex; align-items: center; gap: 10px; } .acc-id { flex: 1; min-width: 0; } .acc-ago { color: var(--ink-3, #999); font-size: 12px; white-space: nowrap; } .acc-rolerow { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; } .acc-rolerow label { font-size: 13px; color: var(--ink-3, #888); } .acc-rolerow select { flex: 1; } .acc-warn { color: var(--warn-fg, #C57A1A); font-size: 12px; margin: 8px 0 2px; } .acc-card-acts { display: flex; gap: 10px; margin-top: 14px; } .acc-card-acts .btn { flex: 1; justify-content: center; padding: 11px; border-radius: 10px; } .acc-card-acts .btn.ghost { flex: 0 0 auto; padding: 11px 20px; } /* Tabla con acceso */ .acc-table { padding: 6px 14px; } .acc-trow { display: grid; grid-template-columns: 1.5fr 1.7fr 1.2fr 1fr auto; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--border-soft, #f0eeeb); font-size: 13px; } .acc-trow:last-child { border-bottom: 0; } .acc-thead { font-size: 11px; font-weight: 600; color: var(--ink-3, #999); text-transform: none; border-bottom: 1px solid var(--border, #eee); } .acc-cell-name { display: flex; align-items: center; gap: 9px; } .acc-right { text-align: right; } .acc-rolepill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; } .acc-roleedit { padding: 6px 10px; border: 1px solid var(--border-strong, #ddd); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface, #fff); } .acc-stale { color: var(--accent-ink, #C85700); } .acc-link { background: none; border: 0; color: var(--accent-ink, #C85700); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 6px; } .acc-link-danger { background: none; border: 0; color: var(--crit-fg, #C2362B); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 6px; } /* Invitar */ .acc-invite { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .acc-invite .login-inp { flex: 1; } .acc-invite .acc-inv-name { flex: 0 0 180px; } .acc-invite .btn { white-space: nowrap; padding: 13px 20px; border-radius: 12px; } .acc-invlist { padding: 4px 14px; } .acc-invrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border-soft, #f0eeeb); font-size: 13px; } .acc-invrow:last-child { border-bottom: 0; } .acc-right2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 720px) { .acc-trow { grid-template-columns: 1fr auto auto; gap: 8px; } .acc-trow > div:nth-child(2), .acc-thead > div:nth-child(2), .acc-trow > div:nth-child(4), .acc-thead > div:nth-child(4) { display: none; } .acc-roleedit { padding: 6px 8px; max-width: 140px; } /* Invitar: apila en vertical, todo a ancho completo (nada se corta) */ .acc-invite { flex-direction: column; align-items: stretch; } .acc-invite .acc-inv-name, .acc-invite .login-inp, .acc-invite .acc-roleedit, .acc-invite .btn { flex: none; width: 100%; max-width: none; } } .inc-confirm { max-width: 420px; width: 90vw; } .inc-log { max-width: 760px; width: 92vw; } .inc-log-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; } .inc-log-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-8); background: var(--surface); } .inc-log-main { flex: 1; min-width: 0; font-size: 13px; } .inc-log-main .note { margin-top: 2px; } .inc-log-pills { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } .inc-log-acts { display: flex; gap: 6px; flex-shrink: 0; } .inc-create-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; } .inc-ch-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .inc-ch-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .inc-ch-reg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); } .inc-ch-reg input { border: 1px solid var(--border-strong); border-radius: var(--r-8); padding: 5px 8px; font-size: 12px; font-family: inherit; background: var(--surface); width: auto; } .inc-x { border: none; background: none; font-size: 16px; color: var(--ink-3); cursor: pointer; line-height: 1; padding: 4px; flex: none; } .inc-x:hover { color: var(--ink); } .req { color: var(--accent-ink); font-weight: 600; font-size: 11px; margin-left: 2px; } .opt { color: var(--ink-3); font-weight: 400; font-size: 11px; margin-left: 2px; } .inc-drop { border: 1.5px dashed var(--border-strong); border-radius: var(--r-10); padding: 18px; text-align: center; margin-top: 6px; transition: border-color .15s, background .15s; } .inc-drop.over { border-color: var(--accent-ink); background: var(--surface-warm); } .inc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .inc-file { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 3px 6px 3px 10px; font-size: 11.5px; max-width: 100%; } .inc-file-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .inc-file button { border: none; background: none; cursor: pointer; color: var(--ink-3); font-size: 12px; padding: 0 2px; } .inc-file button:hover { color: #C2362B; } .inc-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .inc-switch > input { display: none; } .inc-switch-sl { flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; margin-top: 1px; } .inc-switch-sl::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .inc-switch > input:checked + .inc-switch-sl { background: var(--accent-ink); } .inc-switch > input:checked + .inc-switch-sl::after { transform: translateX(16px); } .inc-switch-tx { font-size: 13px; color: var(--ink); } .inc-create-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } /* Toast */ .inc-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; box-shadow: var(--sh-dialog); opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease), transform 180ms var(--ease); z-index: 90; } .inc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Buzón "Cambios en GitHub" (avisos) ---------- */ .av-bell.on { border-color: var(--crit-fg); color: var(--crit-fg); } .av-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--crit-fg); color: #fff; font-size: 11px; font-weight: 700; } .av-modal { max-width: 760px; width: 94vw; max-height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; } .av-modal #avInner { display: flex; flex-direction: column; min-height: 0; } .av-modal .spacer { flex: 1; } .av-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); } .av-head h3 { margin: 0 0 3px; font-size: 19px; display: flex; align-items: center; gap: 9px; } .av-repo { font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--purple-bg); color: var(--purple-fg); padding: 2px 8px; border-radius: 6px; } .av-tabs { display: flex; align-items: center; gap: 8px; padding: 12px 22px; } .av-tab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; } .av-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); } .av-tabs-line { flex: 1; border-top: 1px dashed var(--border); height: 0; margin: 0 4px; } .av-body { overflow-y: auto; padding: 6px 22px 8px; } .av-card { border: 1px solid var(--border-soft); border-radius: 12px; padding: 13px 15px; margin-bottom: 11px; background: var(--surface); } .av-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; } .av-evtag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .av-ref { font-size: 11px; font-weight: 600; color: var(--ink); } .av-gh { font-size: 11px; color: var(--purple-fg); text-decoration: none; } .av-gh:hover { text-decoration: underline; } .av-title { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .av-nota { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-bottom: 9px; } .av-trans { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 11px; border-radius: 9px; background: var(--surface-soft); margin-bottom: 11px; } .av-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .av-clibox { border: 1px solid #F0D9BF; background: var(--surface-warm); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; } .av-clibox-head { display: flex; align-items: center; gap: 9px; } .av-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; } .av-cli-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; margin-top: 8px; } .av-cli-name { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; color: var(--ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .av-cli-name .av-cli-ttl { font-weight: 600; } .av-cli-name:hover .av-cli-ttl { text-decoration: underline; } .av-cli-btns { display: flex; gap: 8px; flex-wrap: wrap; } .av-hist { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-soft); margin-bottom: 8px; } .av-hist-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; } .av-hist-txt { font-size: 13px; color: var(--ink-2); min-width: 0; } .av-foot { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-top: 1px solid var(--border); } .av-foot .note { flex: 1; } @media (max-width: 640px) { .av-cli-title, .av-cli-cli { max-width: 100%; } .av-acts, .av-cli-row { gap: 8px; } } /* ---------- Evolución del MRR (barras) ---------- */ .mrr-evol { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 6px 2px 0; } .mrr-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } .mrr-bar { width: 100%; max-width: 34px; min-height: 2px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #FF7B13, #F5A623); } .mrr-bar.zero { background: var(--border); } .mrr-x { font-size: 10px; color: var(--ink-3); } /* ---------- Suscripciones ---------- */ .susc-av { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 99px; color: #fff; font-size: 10px; font-weight: 700; margin-right: 9px; vertical-align: middle; flex: none; letter-spacing: -0.02em; } .susc-due { color: var(--crit-fg); font-weight: 600; } .susc-toggle { padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 11px; font-weight: 600; color: var(--ink-2); cursor: pointer; } .susc-toggle:hover { border-color: var(--ink-3); } .susc-toggle.on { background: var(--surface-warm); color: var(--accent-ink); border-color: transparent; } .susc-lost { color: var(--crit-fg); font-weight: 700; font-size: 10px; } /* ---------- Reportes ---------- */ .rep-av { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent-ink); } .rep-av.sm { width: 26px; height: 26px; font-size: 11px; } .rep-cli { position: relative; flex: 1; min-width: 240px; max-width: 520px; } .rep-cli-btn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-12); cursor: pointer; text-align: left; box-shadow: var(--sh-card); } .rep-cli-btn:hover { border-color: var(--border-strong); } .rep-cli-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .rep-cli-txt b { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rep-cli-caret { flex: none; color: var(--ink-3); display: flex; transition: transform 150ms var(--ease); } .rep-cli-btn.open .rep-cli-caret { transform: rotate(180deg); } .rep-cli-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-12); box-shadow: var(--sh-dialog); padding: 6px; max-height: 340px; overflow: auto; } .rep-cli-menu[hidden] { display: none; } .rep-cli-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border: none; background: none; border-radius: var(--r-8); cursor: pointer; text-align: left; font-size: 13px; color: var(--ink); } .rep-cli-opt:hover { background: var(--surface-soft); } .rep-cli-opt.on { background: var(--surface-warm); color: var(--accent-ink); font-weight: 600; } .rep-cli-optn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rep-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .rep-tab { padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink-2); } .rep-tab:hover { border-color: var(--ink-3); } .rep-tab.on { background: var(--ink); color: #fff; border-color: transparent; } .rep-card-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 13px 16px; background: var(--surface-soft); border-bottom: 1px solid var(--border); } .rep-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; flex: none; } .rep-pill:hover { border-color: var(--ink-3); } .rep-ficha-top { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; } .rep-dates { display: flex; flex-direction: column; gap: 10px; } .rep-date { display: flex; flex-direction: column; gap: 4px; } .rep-date label, .rep-num label { font-size: 11px; color: var(--ink-2); font-weight: 500; } .rep-date input { border: 1px solid var(--border-strong); border-radius: var(--r-8); padding: 7px 10px; font-family: inherit; font-size: 13px; background: var(--surface); max-width: 200px; } .rep-ck-list { display: flex; flex-direction: column; gap: 2px; } .rep-ck-title { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; } .rep-ck { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; } .rep-ck-w { flex: 1; color: var(--ink-2); } .rep-ck-st { font-size: 11px; color: var(--ink-3); white-space: nowrap; } .rep-ck-st.now { color: var(--warn-fg); font-weight: 600; } .rep-ck-st.done { color: var(--good-fg); } .rep-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 14px; } .rep-num { display: flex; flex-direction: column; gap: 4px; } .rep-num-in { display: flex; align-items: center; gap: 6px; } .rep-num-in input { width: 100%; min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--r-8); padding: 7px 9px; font-family: inherit; font-size: 14px; font-weight: 600; background: var(--surface); } .rep-num-in span { font-size: 11px; color: var(--ink-3); white-space: nowrap; } .rep-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rep-mtbl th, .rep-mtbl td { vertical-align: top; } .rep-min { width: 100%; min-width: 60px; border: 1px solid var(--border-strong); border-radius: var(--r-8); padding: 5px 8px; font-family: inherit; font-size: 12px; background: var(--surface); color: var(--ink); } .rep-sino { display: flex; gap: 5px; white-space: nowrap; } .rep-toggle { padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink-3); } .rep-toggle.yes { background: var(--good-bg); color: var(--good-fg); border-color: transparent; } .rep-toggle.no { background: var(--ink); color: #fff; border-color: transparent; } .rep-green { display: flex; align-items: flex-start; gap: 8px; background: var(--good-bg); color: var(--good-fg); border-radius: var(--r-10); padding: 10px 13px; font-size: 12px; line-height: 1.5; margin-top: 12px; } .rep-green .status-dot { margin-top: 5px; } .rep-secs { display: flex; flex-direction: column; gap: 7px; } .rep-sec { border: 1px solid var(--border-soft); border-radius: var(--r-10); background: var(--surface); } .rep-sec.on { background: var(--surface-warm-2, var(--surface-soft)); border-color: transparent; } .rep-sec.off { opacity: 0.6; } .rep-sec.dragging { opacity: 0.4; } .rep-sec-row { display: flex; align-items: center; gap: 7px 9px; padding: 9px 11px; flex-wrap: wrap; } .rep-sec-grip { cursor: grab; color: var(--ink-3); font-size: 13px; flex: none; user-select: none; } .rep-sec-row > input[type=checkbox] { flex: none; } .rep-sec-h { display: flex; align-items: center; gap: 7px; flex: 1 1 140px; min-width: 120px; font-size: 13px; } .rep-sec-caret { margin-left: auto; } .rep-sec-h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rep-sec-togs { display: flex; flex-direction: column; gap: 3px; flex: none; } .rep-sec-desctog { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); white-space: nowrap; flex: none; cursor: pointer; } .rep-sec-view { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); border-radius: var(--r-8); width: 26px; height: 26px; font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rep-sec-view:hover:not(:disabled) { background: var(--surface-soft); color: var(--accent-ink); border-color: var(--accent-ink); } .rep-sec-view:disabled { opacity: .4; cursor: default; } .rep-sec-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 6px; border-radius: var(--r-pill); flex: none; } .rep-sec-tag.always { background: var(--good-bg); color: var(--good-fg); } .rep-sec-tag.nd { background: var(--neutral-bg); color: var(--ink-3); } .rep-sec-pag { font-size: 11px; color: var(--ink-3); white-space: nowrap; flex: none; } .rep-sec-caret { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 12px; padding: 2px 4px; flex: none; } .rep-sec-descwrap { padding: 0 11px 11px 32px; display: flex; flex-direction: column; } .rep-sec-flabel { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; } .rep-sec-descwrap textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-8); padding: 7px 9px; font-family: inherit; font-size: 12px; color: var(--ink); background: var(--surface); resize: vertical; line-height: 1.5; } .rep-sec-descwrap textarea:disabled { background: var(--surface-soft); color: var(--ink-3); } /* Previsualización en vivo a escala */ .rep-preview-box { max-height: 74vh; overflow: auto; background: #f4f2ef; border-radius: var(--r-10); padding: 12px; } @media (min-width: 761px) { .rep-preview-card { position: sticky; top: 0; align-self: stretch; width: 100%; max-height: 100vh; display: flex; flex-direction: column; } .rep-preview-card .rep-preview-box { flex: 1; max-height: none; min-height: 0; } /* El header + filtros de Secciones queda pinned arriba del todo, opaco y por delante de las filas. */ .rep-secs-card { overflow: visible; } .rep-secs-card > .card-title { position: sticky; top: 0; z-index: 20; background: var(--surface); margin: -15px -17px 0; padding: 15px 17px 12px; border-bottom: 1px solid var(--border); border-radius: var(--r-12) var(--r-12) 0 0; } } .rep-nota-principal { margin: 0 0 12px; padding: 11px 12px; background: var(--surface-soft); border: 1px solid var(--border-soft); border-radius: var(--r-10); } .rep-nota-principal textarea { width: 100%; box-sizing: border-box; margin-top: 6px; border: 1px solid var(--border-strong); border-radius: var(--r-8); padding: 8px 10px; font-family: inherit; font-size: 12.5px; line-height: 1.5; background: var(--surface); resize: vertical; } .rep-preview-inner { zoom: 0.5; } @supports not (zoom: 1) { .rep-preview-inner { transform: scale(0.5); transform-origin: top left; width: 200%; } } /* Enlace de acción (se usa tanto en como en