/* ───────────────────────────────────────────── INVESTADMIN — Estilos globales ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #ffffff; --bg2: #f5f4f0; --bg3: #eeede9; /* --text3 oscurecido de #9c9a92 a #767469 para cumplir contraste WCAG AA (~4.5:1) en texto pequeño sobre fondo blanco, manteniendo la jerarquía sobre --text2. */ --text: #1a1a18; --text2: #6C6F70; --text3: #767469; --border: rgba(0,0,0,0.10); --border2: rgba(0,0,0,0.18); /* Marca FAIS — Manual de Marca (PANTONE 320/322/424). El acento principal de la app (histó­ricamente "purple") se mapea al turquesa FAIS. */ --brand: #009AB1; --brand-dark: #00727D; --brand-bg: #E0F4F7; --brand-gray: #6C6F70; --purple-bg: #E0F4F7; --purple: #009AB1; --purple-dark: #00727D; --blue-bg: #E6F1FB; --blue: #185FA5; --green-bg: #EAF3DE; --green: #3B6D11; --amber-bg: #FAEEDA; --amber: #854F0B; --red-bg: #FCEBEB; --red: #A32D2D; --red-border: #E5D4D4; /* ── Escala tipográfica (única fuente de tamaños) ── */ --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 24px; /* ── Escala de espaciado (múltiplos de 4) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --radius: 8px; --radius-lg: 12px; /* Sombras (profundidad sutil, estilo Apple) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); color-scheme: light; /* Inter embebida (ver en index.html) + fallback al stack del sistema */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Tema oscuro ── (lo activa data-theme="dark" en ; el JS resuelve "auto") */ [data-theme="dark"] { color-scheme: dark; --bg: #1c1c1e; --bg2: #2c2c2e; --bg3: #0f0f10; --text: #f2f2f0; --text2: #b4b3ac; --text3: #908e86; --border: rgba(255,255,255,0.12); --border2: rgba(255,255,255,0.22); --brand: #2ec6da; --brand-dark: #57d4e6; --brand-bg: rgba(46,198,218,0.16); --brand-gray: #b4b3ac; --purple-bg: rgba(46,198,218,0.16); --purple: #2ec6da; --purple-dark: #57d4e6; --blue-bg: rgba(74,144,226,0.20); --blue: #6aa9f0; --green-bg: rgba(106,168,52,0.22); --green: #8fce5a; --amber-bg: rgba(196,127,30,0.24); --amber: #e0a44f; --red-bg: rgba(200,70,70,0.22); --red: #f08585; --red-border: rgba(240,133,133,0.4); --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); } /* Transición suave al cambiar de tema */ .app, .sidebar, .topbar, .section, .modal, .btn, .card, td, th { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ── Utilidades tipográficas / de color (para reemplazar estilos inline) ── */ .t-2xs { font-size: var(--fs-2xs); } .t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); } .t-base { font-size: var(--fs-base); } .t-md { font-size: var(--fs-md); } .t-lg { font-size: var(--fs-lg); } .t-muted { color: var(--text2); } .t-muted2 { color: var(--text3); } .t-strong { font-weight: 500; } .t-danger { color: var(--red); } .t-success { color: var(--green); } .t-warn { color: var(--amber); } body { background: var(--bg3); min-height: 100vh; line-height: 1.5; } /* ── Layout ── */ .app { display: flex; height: 100vh; overflow: hidden; } .main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } /* ── Sidebar ── */ .sidebar { width:220px; min-width:220px; background:var(--bg2); border-right:0.5px solid var(--border); display:flex; flex-direction:column; } .sidebar-logo { padding:12px 16px 8px; border-bottom:0.5px solid var(--border); border-top:3px solid var(--brand); } .sidebar-logo img { display:block; width:auto; max-width:140px; max-height:52px; height:auto; margin-bottom:3px; } .sidebar-logo h1 { font-size:17px; font-weight:700; letter-spacing:1px; color:var(--brand); } .sidebar-logo span { font-size:11px; color:var(--brand-gray); } .sidebar-nav { padding:4px 0; flex:1; overflow-y:auto; } .nav-item { display:flex; align-items:center; gap:10px; padding:6px 16px; font-size:13px; color:var(--text2); cursor:pointer; border-left:2px solid transparent; transition:all 0.15s; user-select:none; } .nav-item:hover { background:var(--bg); color:var(--text); } .nav-item.active { color:var(--text); border-left-color:var(--purple); background:var(--bg); font-weight:500; } .nav-icon { width:16px; height:16px; flex-shrink:0; } .sidebar-badge { margin-left:auto; background:#A32D2D; color:#fff; font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px; min-width:18px; text-align:center; line-height:1.4; } .sidebar-user { padding:10px 16px; border-top:0.5px solid var(--border); } .user-info { display:flex; align-items:center; gap:8px; } .user-avatar { width:28px; height:28px; border-radius:50%; background:var(--purple-bg); color:var(--purple); font-size:10px; font-weight:500; display:flex; align-items:center; justify-content:center; } .user-name { font-size:12px; font-weight:500; } .btn-logout { width:100%; margin-top:10px; padding:5px; font-size:12px; border-radius:var(--radius); border:0.5px solid var(--border); background:transparent; cursor:pointer; color:var(--text2); font-family:inherit; transition:all 0.15s; } .btn-logout:hover { background:var(--red-bg); color:var(--red); border-color:var(--red); } /* ── Topbar (large title, estilo Apple) ── */ .topbar { background:var(--bg); border-bottom:0.5px solid var(--border); padding:0 28px; height:64px; min-height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; } .topbar-title { font-size:var(--fs-2xl); font-weight:600; letter-spacing:-0.02em; } .topbar-right { display:flex; align-items:center; gap:8px; } .sync-status { font-size:11px; color:var(--text3); } .sync-status.syncing { color:var(--amber); } .sync-status.ok { color:var(--green); } .sync-status.error { color:var(--red); } /* ── Buttons (touch targets más cómodos) ── */ .btn { padding:8px 16px; font-size:var(--fs-base); border-radius:var(--radius); border:0.5px solid var(--border2); background:var(--bg); cursor:pointer; color:var(--text); transition:all 0.15s; font-family:inherit; font-weight:500; line-height:1.2; } .btn:hover { background:var(--bg2); } .btn:active { transform:scale(0.97); } .btn:disabled { opacity:0.5; cursor:not-allowed; } .btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); } .btn-primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); } .btn-sm { padding:6px 12px; font-size:var(--fs-sm); } .btn-danger { background:var(--red-bg); color:var(--red); border-color:var(--red); } .btn-danger:hover { background:var(--red); color:#fff; border-color:var(--red); } /* ── Content ── */ .content { padding:24px; flex:1; } .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; } .stat-card { background:var(--bg2); border-radius:var(--radius); padding:1rem; } .stat-label { font-size:12px; color:var(--text2); margin-bottom:6px; } .stat-value { font-size:22px; font-weight:500; } .stat-value-sm { font-size:15px; font-weight:500; } .stat-sub { font-size:11px; color:var(--text3); margin-top:4px; } /* KPI cards (Dashboard) — fila responsiva, tarjetas con ícono y jerarquía clara */ .kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:24px; } .kpi-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; display:flex; flex-direction:column; gap:8px; min-width:0; } .kpi-top { display:flex; align-items:center; gap:8px; } .kpi-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; } .kpi-label { font-size:12px; color:var(--text2); font-weight:500; } .kpi-value { font-size:28px; font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums; } .kpi-money { font-size:18px; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .kpi-sub { font-size:11px; color:var(--text3); } /* ── Sections (más aire) ── */ .section { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); margin-bottom:20px; overflow:hidden; box-shadow:var(--shadow-sm); } .section-header { padding:16px 22px; border-bottom:0.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; } .section-title { font-size:var(--fs-lg); font-weight:600; } /* ── Tables (filas con más aire) ── */ table { width:100%; border-collapse:collapse; font-size:var(--fs-base); } th { text-align:left; padding:12px 22px; font-size:var(--fs-xs); font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; border-bottom:0.5px solid var(--border); } td { padding:15px 22px; border-bottom:0.5px solid var(--border); color:var(--text); } tr:last-child td { border-bottom:none; } tr.clickable:hover td { background:var(--bg2); cursor:pointer; } /* ── Badges ── */ .badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:var(--radius); font-size:11px; font-weight:500; } .badge-individual { background:var(--blue-bg); color:var(--blue); } .badge-indistinta { background:var(--green-bg); color:var(--green); } .badge-conjunta { background:var(--amber-bg); color:var(--amber); } .badge-activo { background:var(--green-bg); color:var(--green); } .badge-revision { background:var(--amber-bg); color:var(--amber); } .badge-perfil { background:var(--purple-bg); color:var(--purple); } .badge-compra { background:var(--red-bg); color:var(--red); } .badge-venta { background:var(--green-bg); color:var(--green); } .badge-doc { background:var(--blue-bg); color:var(--blue); } .badge-asignacion { background:var(--purple-bg); color:var(--purple); } /* ── Progress ── */ .progress-wrap { background:var(--bg3); border-radius:99px; height:6px; overflow:hidden; } .progress-fill { height:100%; border-radius:99px; transition:width 0.3s; } /* ── Tabs ── */ .tabs { display:flex; border-bottom:0.5px solid var(--border); padding:0 24px; background:var(--bg); } .tab { padding:10px 16px; font-size:13px; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-0.5px; transition:all 0.15s; user-select:none; } .tab:hover { color:var(--text); } .tab.active { color:var(--purple); border-bottom-color:var(--purple); font-weight:500; } /* ── Info rows ── */ .two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; } .info-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:0.5px solid var(--border); font-size:13px; } .info-row:last-child { border-bottom:none; } .info-label { color:var(--text2); } .info-value { font-weight:500; } /* ── Movements ── */ .mov-list { padding:4px 20px; } .mov-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:0.5px solid var(--border); } .mov-row:last-child { border-bottom:none; } .mov-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; } .mov-icon-compra { background:var(--red-bg); } .mov-icon-venta { background:var(--green-bg); } .mov-icon-doc { background:var(--blue-bg); } .mov-icon-asignacion { background:var(--purple-bg); } .mov-info { flex:1; } .mov-desc { font-size:13px; font-weight:500; } .mov-date { font-size:11px; color:var(--text3); margin-top:2px; } .mov-amount{ font-size:14px; font-weight:500; text-align:right; } .mov-saldo { font-size:11px; color:var(--text3); text-align:right; margin-top:2px; } .neg { color:var(--red); } .pos { color:var(--green); } /* ── Avatars ── */ .avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:500; flex-shrink:0; } .avatar-lg { width:48px; height:48px; font-size:16px; background:var(--purple-bg); color:var(--purple); } .avatar-sm { width:28px; height:28px; font-size:10px; background:var(--blue-bg); color:var(--blue); } .avatar-md { width:36px; height:36px; font-size:13px; background:var(--blue-bg); color:var(--blue); } /* ── Client cards ── */ .client-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; } @media (min-width: 900px) { .client-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } } .client-card { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); padding:16px; cursor:pointer; transition:border-color 0.15s; } .client-card:hover { border-color:var(--border2); } /* ── Docs ── */ .doc-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border:0.5px solid var(--border); border-radius:var(--radius); margin-bottom:8px; } .doc-name { font-size:13px; font-weight:500; flex:1; } .doc-date { font-size:11px; color:var(--text3); } /* ── Modal ── */ .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.40); display:flex; align-items:center; justify-content:center; z-index:200; padding:16px; animation:overlayIn 0.18s ease; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .modal { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); width:480px; max-width:90vw; max-height:90vh; overflow-y:auto; padding:24px; box-shadow:var(--shadow-lg); animation:modalIn 0.22s cubic-bezier(0.16,1,0.3,1); } /* Variante con header/body/footer separados (usada por Capacitaciones). Mismo aspecto que .modal: tiene que tener fondo sólido, si no el form se ve transparente. */ .modal-card { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); width:480px; max-width:90vw; max-height:90vh; overflow-y:auto; padding:24px; box-shadow:var(--shadow-lg); animation:modalIn 0.22s cubic-bezier(0.16,1,0.3,1); } .modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; } @keyframes overlayIn { from { opacity:0; } to { opacity:1; } } @keyframes modalIn { from { opacity:0; transform:translateY(10px) scale(0.98); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { .modal-overlay, .modal, .modal-card { animation:none; } * { transition:none !important; } } .modal-title { font-size:15px; font-weight:500; margin-bottom:20px; } .form-group { margin-bottom:16px; } .form-label { font-size:12px; color:var(--text2); margin-bottom:6px; display:block; } .form-input { width:100%; padding:8px 12px; font-size:13px; border:0.5px solid var(--border2); border-radius:var(--radius); background:var(--bg); color:var(--text); font-family:inherit; outline:none; transition:border-color 0.15s; } .form-input:focus { border-color:var(--purple); } .modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; } /* Header de modal con botón cerrar (estructura usada en obligaciones/documentos/clientes) */ .modal-header { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-5); } .modal-header .modal-title { margin-bottom:0; } .modal-close { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; font-size:var(--fs-2xl); line-height:1; border:none; background:transparent; color:var(--text3); cursor:pointer; border-radius:var(--radius); flex-shrink:0; transition:all 0.15s; } .modal-close:hover { background:var(--bg2); color:var(--text); } /* ── Empty / Loading ── */ .empty-state { text-align:center; padding:48px 24px; color:var(--text2); } .empty-state-icon { font-size:32px; margin-bottom:12px; } .empty-state-title{ font-size:15px; font-weight:500; margin-bottom:6px; color:var(--text); } .empty-state-desc { font-size:13px; } .loading-row { text-align:center; padding:32px; color:var(--text3); font-size:13px; } .text-blue { color:var(--blue); font-weight:500; cursor:pointer; } /* ── Roles ── */ .role-admin { background:#FCEBEB; color:#A32D2D; } .role-editor { background:#FAEEDA; color:#854F0B; } .role-reader { background:#EAF3DE; color:#3B6D11; } .pill { display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:500; } /* ── Audit ── */ .audit-row { display:flex; gap:12px; padding:11px 0; border-bottom:0.5px solid var(--border); font-size:12px; } .audit-row:last-child { border-bottom:none; } .audit-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; } .audit-dot-edit { background:#854F0B; } .audit-dot-create { background:#3B6D11; } .audit-dot-delete { background:#A32D2D; } .audit-dot-login { background:#185FA5; } .audit-info { flex:1; } .audit-who { font-weight:500; color:var(--text); } .audit-when { font-size:11px; color:var(--text3); white-space:nowrap; } .field-diff { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; } .val-old { background:var(--red-bg); color:var(--red); padding:1px 6px; border-radius:4px; text-decoration:line-through; font-size:11px; } .val-new { background:var(--green-bg); color:var(--green); padding:1px 6px; border-radius:4px; font-size:11px; } /* ── Config ── */ .config-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; } .config-card { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); overflow:hidden; } .config-card-header { padding:14px 20px; border-bottom:0.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--bg2); } .config-card-title { font-size:13px; font-weight:500; } .config-card-body { padding:16px 20px; } .config-tag-list { display:flex; flex-wrap:wrap; gap:8px; min-height:36px; margin-bottom:12px; } .config-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:12px; font-weight:500; background:var(--brand-bg); color:var(--brand); border:0.5px solid rgba(0,154,177,0.25); } .config-tag-del { background:none; border:none; cursor:pointer; color:var(--purple); font-size:14px; line-height:1; padding:0; opacity:0.6; } .config-tag-del:hover { opacity:1; } .config-add-row { display:flex; gap:8px; } .config-add-input { flex:1; padding:6px 10px; font-size:12px; border:0.5px solid var(--border2); border-radius:var(--radius); background:var(--bg); color:var(--text); font-family:inherit; outline:none; } .config-add-input:focus { border-color:var(--purple); } /* ── Import ── */ .import-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; } .import-card { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); padding:20px; transition:border-color 0.15s; } .import-card.drag-over { border-color:var(--purple); background:var(--purple-bg); } .import-drop-area { border:1.5px dashed var(--border2); border-radius:var(--radius); padding:16px; text-align:center; cursor:pointer; transition:all 0.15s; background:var(--bg2); } .import-drop-area:hover { border-color:var(--purple); background:var(--purple-bg); } .import-file-input { display:none; } .import-preview { margin-top:12px; border-radius:var(--radius); border:0.5px solid var(--border); overflow:hidden; display:none; } .import-result { margin-top:8px; padding:8px 12px; border-radius:var(--radius); font-size:12px; display:none; } .import-result.ok { background:var(--green-bg); color:var(--green); } .import-result.error { background:var(--red-bg); color:var(--red); } .import-result.info { background:var(--blue-bg); color:var(--blue); } /* ── Confirm box ── */ .confirm-box { background:var(--red-bg); border:0.5px solid var(--red); border-radius:var(--radius); padding:14px; margin-top:12px; } .confirm-box-title { font-size:13px; font-weight:500; color:var(--red); margin-bottom:6px; } .confirm-box-desc { font-size:12px; color:var(--text2); margin-bottom:12px; } /* ── Users grid ── */ .users-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; } .user-card { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); padding:16px; } /* ── Login / Setup ── */ #login-screen, #setup-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg3); } .login-card { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); border-top:4px solid var(--brand); padding:40px 36px; width:380px; text-align:center; } .login-logo { font-size:22px; font-weight:500; margin-bottom:8px; } .login-logo img { max-width:180px; max-height:80px; width:auto; height:auto; object-fit:contain; } .login-sub { font-size:13px; color:var(--text2); margin-bottom:32px; } .btn-ms { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:10px 20px; font-size:14px; font-family:inherit; border-radius:var(--radius); border:0.5px solid var(--border2); background:var(--bg); cursor:pointer; color:var(--text); transition:background 0.15s; font-weight:500; } .btn-ms:hover { background:var(--bg2); } .login-error { margin-top:16px; font-size:12px; color:var(--red); display:none; } .setup-card { background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); padding:32px; width:520px; } .setup-title { font-size:16px; font-weight:500; margin-bottom:6px; } .setup-sub { font-size:13px; color:var(--text2); margin-bottom:24px; } .setup-step { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:0.5px solid var(--border); } .setup-step:last-of-type { border-bottom:none; } .step-num { width:24px; height:24px; border-radius:50%; background:var(--purple-bg); color:var(--purple); font-size:12px; font-weight:500; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .step-label { font-size:13px; font-weight:500; margin-bottom:4px; } .step-desc { font-size:12px; color:var(--text2); line-height:1.5; } .step-input { width:100%; padding:7px 10px; font-size:12px; margin-top:8px; border:0.5px solid var(--border2); border-radius:var(--radius); background:var(--bg); color:var(--text); font-family:inherit; outline:none; } .step-input:focus { border-color:var(--purple); } .setup-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; } /* ── Accesibilidad: foco de teclado visible y consistente ── */ :focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; } .btn:focus-visible, .form-input:focus-visible, .nav-item:focus-visible, .tab:focus-visible, .config-add-input:focus-visible, .step-input:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } /* No mostrar el anillo en clics de mouse (solo teclado) */ :focus:not(:focus-visible) { outline:none; } /* ── Callout / banner (reemplaza avisos repintados a mano en cada vista) ── */ .callout { display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius); border:0.5px solid var(--border); font-size:var(--fs-base); line-height:1.5; margin-bottom:var(--sp-4); } .callout-icon { font-size:var(--fs-2xl); line-height:1; flex-shrink:0; } .callout-body { flex:1; min-width:0; } .callout-actions { flex-shrink:0; display:flex; gap:var(--sp-2); align-items:center; } .callout-info { background:var(--blue-bg); border-color:var(--blue); color:var(--blue); } .callout-warn { background:var(--amber-bg); border-color:var(--amber); color:var(--amber); } .callout-danger { background:var(--red-bg); border-color:var(--red); color:var(--red); } .callout-success { background:var(--green-bg); border-color:var(--green); color:var(--green); } .callout-brand { background:var(--brand-bg); border-color:var(--brand); color:var(--brand-dark); } .callout strong { font-weight:600; } /* ── Botón ícono (×, acciones compactas) — reemplaza botones repintados inline ── */ .btn-icon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; font-size:var(--fs-md); line-height:1; border-radius:var(--radius); border:0.5px solid var(--border2); background:var(--bg); color:var(--text2); cursor:pointer; font-family:inherit; transition:all 0.15s; } .btn-icon:hover { background:var(--bg2); color:var(--text); } .btn-icon-danger:hover { background:var(--red-bg); color:var(--red); border-color:var(--red); } /* ── Botón "eliminar" suave (texto/borde rojo, fondo blanco) — distinto del .btn-danger relleno ── */ .btn-danger-soft { color:var(--red); border-color:var(--red-border); } .btn-danger-soft:hover { background:var(--red-bg); border-color:var(--red); } /* ── Caja de error inline de modales (reemplaza el style repetido) ── */ .modal-error { font-size:var(--fs-sm); color:var(--red); margin-top:var(--sp-2); display:none; } /* ── Pill de advertencia (ej. "⚠ Duplicado") ── */ .pill-warn { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-2xs); background:var(--amber-bg); color:var(--amber); padding:2px 7px; border-radius:var(--radius); font-weight:500; } /* ── Importar — clases que faltaban (la pantalla caía a estilos del browser) ── */ .import-order-note { background:var(--brand-bg); border:0.5px solid var(--brand); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5); font-size:var(--fs-base); color:var(--brand-dark); } .import-card-header { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); } .import-card-icon { width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xl); flex-shrink:0; } .import-card-title { font-size:var(--fs-md); font-weight:500; } .import-card-desc { margin-bottom:var(--sp-3); } .import-card-desc code { display:block; color:var(--text2); line-height:1.5; word-break:break-word; } .import-drop-label { font-size:var(--fs-sm); color:var(--text2); } .import-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-3); } .import-preview-header { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); background:var(--bg2); border-bottom:0.5px solid var(--border); font-size:var(--fs-sm); } .import-preview-count { color:var(--text2); } /* ── Setup wizard: cuerpo del paso (toma el ancho restante junto al número) ── */ .step-body { flex:1; min-width:0; } /* ── Navegación agrupada ── */ .nav-group { margin-top:3px; } .nav-group-title { padding:6px 16px 3px; font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:0.7px; color:var(--text3); user-select:none; } /* ── Toggle de tema (segmented control en el pie del sidebar) ── */ .theme-toggle { display:flex; gap:3px; margin-top:10px; background:var(--bg3); border-radius:var(--radius); padding:3px; } .theme-toggle button { flex:1; padding:5px 4px; font-size:var(--fs-2xs); border:none; background:transparent; color:var(--text2); cursor:pointer; border-radius:6px; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:3px; transition:all 0.15s; } .theme-toggle button.active { background:var(--bg); color:var(--text); box-shadow:var(--shadow-sm); font-weight:600; } .theme-toggle button:hover:not(.active) { color:var(--text); } /* ── Toasts (confirmación de acciones) ── */ .toast-wrap { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; } .toast { display:flex; align-items:center; gap:10px; background:var(--text); color:var(--bg); padding:12px 18px; border-radius:99px; box-shadow:var(--shadow-lg); font-size:var(--fs-base); font-weight:500; animation:toastIn 0.25s cubic-bezier(0.16,1,0.3,1); max-width:92vw; } .toast.leaving { animation:toastOut 0.2s ease forwards; } .toast::before { content:''; width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--brand); } .toast-ok::before { background:#34c759; } .toast-error::before { background:#ff453a; } .toast-warn::before { background:#ff9f0a; } @keyframes toastIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @keyframes toastOut { to { opacity:0; transform:translateY(8px); } } /* ── Skeletons (carga) ── */ .skeleton { background:linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 37%, var(--bg2) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:6px; } @keyframes shimmer { from { background-position:100% 0; } to { background-position:0 0; } } .skeleton-line { height:14px; margin:10px 0; } .skeleton-card { height:64px; border-radius:var(--radius); margin-bottom:12px; } /* ── Responsive (tablet / ventana angosta) ── */ @media (max-width: 820px) { .content { padding:16px; } .topbar { padding:0 16px; height:56px; min-height:56px; } .topbar-title { font-size:var(--fs-xl); } .stats-grid { grid-template-columns:repeat(2,1fr); } .section { overflow-x:auto; } .two-col, .three-col, .config-grid, .import-grid { grid-template-columns:1fr; } .sidebar { width:180px; min-width:180px; } }