/* ============================================================================ ContaAI — Sistema de diseño "Obsidian Fintech" Oscuro premium + simple (Nequi/WhatsApp). Paleta aprobada + Montserrat. ========================================================================== */ :root { /* Paleta aprobada */ --obsidian: #212529; /* fondo base */ --obsidian-700: #1a1e22; /* fondo más profundo */ --obsidian-900: #15181b; /* casi negro (barras) */ --jade: #0a3832; /* verde esmeralda profundo */ --jade-bright: #10b981; /* verde de acción (brillo) */ --gold: #8f9630; /* dorado plano */ /* Azul celeste vivo, solo para la marca. No entra en la interfaz: las acciones siguen siendo jade y mezclarlos ensucia la lectura. */ --azul-marca: #38bdf8; --silver: #c0c0c0; /* plata */ /* Derivados de superficie */ --surface: #272c31; /* tarjetas */ --surface-2: #2e343a; /* tarjetas elevadas / hover */ --line: rgba(192,192,192,.14); /* bordes plata sutiles */ --line-gold: rgba(143,150,48,.45); /* Texto */ --text: #f3f5f4; --text-dim: #aab2b0; --text-faint: #7e8784; /* Gradientes metálicos (para detalles premium) */ --grad-gold: linear-gradient(135deg,#e9d8a6 0%,#c9a227 38%,#8f7620 70%,#d4b65a 100%); --grad-silver: linear-gradient(135deg,#f4f6f7 0%,#c0c0c0 45%,#8a8f93 75%,#e3e6e8 100%); --grad-jade: linear-gradient(135deg,#10b981 0%,#0a3832 100%); --radius: 16px; --radius-sm: 12px; --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-sm: 0 4px 14px rgba(0,0,0,.35); --maxw: 560px; /* móvil primero: contenido angosto y centrado */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; font-weight: 400; color: var(--text); background: var(--obsidian); /* Textura sutil de "circuito" en oro sobre la obsidiana: trazas + nodos finos, muy tenues, para dar el aire tecnológico-premium sin ensuciar el contenido. */ background-image: radial-gradient(900px 600px at 80% -10%, rgba(16,185,129,.06), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(143,150,48,.05), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238f9630' stroke-width='1' opacity='0.10'%3E%3Cpath d='M10 0 V34 H44'/%3E%3Cpath d='M0 70 H30 V120'/%3E%3Cpath d='M120 22 H86 V60 H58'/%3E%3Cpath d='M70 120 V92 H120'/%3E%3C/g%3E%3Cg fill='%238f9630' opacity='0.14'%3E%3Ccircle cx='44' cy='34' r='2.4'/%3E%3Ccircle cx='30' cy='70' r='2.4'/%3E%3Ccircle cx='86' cy='22' r='2.4'/%3E%3Ccircle cx='58' cy='60' r='2.4'/%3E%3Ccircle cx='70' cy='92' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); background-size: auto, auto, 240px 240px; background-attachment: fixed; min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4 { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } a { color: inherit; text-decoration: none; } /* Contenedor móvil-primero */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; } /* ── Tarjetas ──────────────────────────────────────────────────────────────── */ .card { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 140%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; } .card.gold-edge { border-color: var(--line-gold); } .card:active { transform: scale(.995); } /* ── Botones ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 15px; padding: 14px 18px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; width: 100%; transition: transform .08s ease, filter .15s ease; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: var(--jade-bright); color: #04130d; box-shadow: 0 6px 18px rgba(16,185,129,.28); } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn-gold { background: var(--grad-gold); color: #2a2407; font-weight: 700; } /* ── Texto / utilidades ───────────────────────────────────────────────────── */ .t-dim { color: var(--text-dim); } .t-faint { color: var(--text-faint); } .t-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .t-jade { color: var(--jade-bright); } .mono-monto { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .small { font-size: 13px; } .center { text-align: center; } .row { display: flex; align-items: center; gap: 12px; } .between { justify-content: space-between; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .stack > * + * { margin-top: 14px; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); } .pill .dot { width: 8px; height: 8px; border-radius: 50%; } .dot-ok { background: var(--jade-bright); } .dot-warn { background: var(--gold); } /* ── App bar superior ─────────────────────────────────────────────────────── */ .appbar { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(21,24,27,.96), rgba(21,24,27,.78)); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .appbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; } .brand img { height: 30px; width: auto; } .icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); cursor: pointer; position: relative; } .badge-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--jade-bright); } /* ── Avatar / muñequito ───────────────────────────────────────────────────── */ .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-gold); background: var(--surface); } /* ── Hero (saldo / resumen) ───────────────────────────────────────────────── */ .hero { border-radius: 20px; padding: 22px; background: radial-gradient(120% 120% at 100% 0%, rgba(16,185,129,.18), transparent 55%), linear-gradient(180deg, #243a35 0%, #182522 100%); border: 1px solid var(--line-gold); box-shadow: var(--shadow); } .hero .monto-grande { font-size: 34px; } /* ── Acciones grandes (Nequi style) ───────────────────────────────────────── */ .action { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-height: 104px; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; } .action:hover { border-color: var(--line-gold); background: var(--surface-2); } .action:active { transform: scale(.98); } .action .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(16,185,129,.12); color: var(--jade-bright); font-size: 20px; } .action.gold .ic { background: rgba(143,150,48,.16); color: #d8c463; } .action h4 { font-size: 15px; } .action .sub { font-size: 12px; color: var(--text-faint); } /* ── Lista (pendientes) ───────────────────────────────────────────────────── */ .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .list-item:last-child { border-bottom: 0; } .sem { width: 10px; height: 10px; border-radius: 50%; flex: none; } .sem-N { background:#9aa0a6 } .sem-R { background:#ef4444 } .sem-A { background: var(--gold) } .sem-V { background: var(--jade-bright) } /* ── Barra inferior (móvil) ───────────────────────────────────────────────── */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: rgba(21,24,27,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; justify-content: space-around; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--text-faint); padding: 4px 14px; } .tabbar a.active { color: var(--jade-bright); } .tabbar .fab { margin-top: -22px; width: 54px; height: 54px; border-radius: 50%; background: var(--jade-bright); color: #04130d; display: grid; place-items: center; font-size: 26px; box-shadow: 0 8px 22px rgba(16,185,129,.4); border: 3px solid var(--obsidian); } /* ── Formularios ──────────────────────────────────────────────────────────── */ .field { display: block; } .field + .field { margin-top: 14px; } .label { display: block; font-size: 13px; color: var(--text-dim); margin: 0 2px 6px; font-weight: 600; } .input { width: 100%; font-family: inherit; font-size: 16px; color: var(--text); background: var(--obsidian-700); border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .input:focus { border-color: var(--jade-bright); box-shadow: 0 0 0 3px rgba(16,185,129,.15); } .input::placeholder { color: var(--text-faint); } .input.code { letter-spacing: .5em; text-align: center; font-weight: 700; font-size: 24px; } .form-error { color: #f4a3a3; font-size: 13px; margin-top: 10px; min-height: 18px; } .auth-screen { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px 0; } .auth-card { width: 100%; max-width: 400px; } .auth-logo { display: block; height: 64px; margin: 0 auto 18px; } .link { color: var(--jade-bright); font-weight: 600; cursor: pointer; } /* ── Chat de Conta ────────────────────────────────────────────────────────── */ .chat-wrap { display: flex; flex-direction: column; height: 100dvh; } .chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .msg { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; } .msg.user { align-self: flex-end; background: var(--jade-bright); color: #04130d; border-bottom-right-radius: 5px; } .msg.conta { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .msg.conta .by { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gold); margin-bottom: 4px; font-weight: 700; } .msg.conta .by img { width: 18px; height: 18px; } .typing { align-self: flex-start; color: var(--text-faint); font-size: 13px; padding: 4px 8px; } .chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(21,24,27,.96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); } .chat-input textarea { flex: 1; resize: none; max-height: 120px; font-family: inherit; font-size: 15px; color: var(--text); background: var(--obsidian-700); border: 1px solid var(--line); border-radius: 20px; padding: 11px 15px; outline: none; } .chat-input textarea:focus { border-color: var(--jade-bright); } .chat-send, .chat-clip { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; flex: none; display: grid; place-items: center; font-size: 20px; } .chat-send { background: var(--jade-bright); color: #04130d; } .chat-clip { background: var(--surface); border: 1px solid var(--line); color: var(--silver); } .suggest { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 8px; } .suggest button { background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); font-family: inherit; font-size: 13px; padding: 8px 12px; border-radius: 999px; cursor: pointer; } /* ── Onboarding (Conta investiga) ─────────────────────────────────────────── */ .ob-progress { display: flex; gap: 6px; justify-content: center; margin: 14px 0 4px; } .ob-progress span { width: 22px; height: 4px; border-radius: 2px; background: var(--line); transition: background .2s; } .ob-progress span.on { background: var(--jade-bright); } .opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: 14px; cursor: pointer; font-family: inherit; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: transform .08s, border-color .15s, background .15s; } .opt:hover { border-color: var(--line-gold); background: var(--surface-2); } .opt:active { transform: scale(.985); } .opt .em { font-size: 26px; flex: none; } .opt .tx { flex: 1; } .opt .tx b { display: block; font-weight: 700; font-size: 15px; } .opt .tx span { font-size: 12.5px; color: var(--text-faint); } .thinking { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 0; } .thinking img { width: 80px; animation: bob 1.6s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } } .mod-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px; background: rgba(16,185,129,.10); border:1px solid var(--line-gold); color:#cfe9df; margin:4px 4px 0 0; } /* ── Landing pública ──────────────────────────────────────────────────────── */ .lp-hero { text-align: center; padding: 46px 0 30px; } .lp-hero .logo { height: 120px; margin: 0 auto 18px; display: block; filter: drop-shadow(0 8px 26px rgba(0,0,0,.5)); } .lp-hero h1 { font-size: 30px; line-height: 1.15; } .lp-hero p { color: var(--text-dim); margin: 12px auto 0; max-width: 420px; } .lp-cta { margin-top: 24px; display: grid; gap: 10px; } .feat { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); } .feat .fic { font-size: 22px; flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(16,185,129,.10); } .plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--surface); } .plan-card.destacado { border-color: var(--line-gold); box-shadow: 0 0 0 1px var(--line-gold), var(--shadow); } .plan-precio { font-size: 28px; font-weight: 800; } .lp-foot { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 30px 0 40px; } /* ── Vendedor flotante ────────────────────────────────────────────────────── */ .vend-fab { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 9px; padding: 10px 16px 10px 10px; background: var(--grad-gold); color: #2a2407; font-weight: 700; border: none; cursor: pointer; border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,.5); } .vend-fab img { width: 34px; height: 34px; } .vend-panel { position: fixed; right: 16px; bottom: 16px; z-index: 51; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 32px)); height: min(560px, calc(100dvh - 32px)); /* el vh de arriba es el respaldo */ display: none; flex-direction: column; background: var(--obsidian); border: 1px solid var(--line-gold); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.6); } .vend-panel.open { display: flex; } .vend-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--obsidian-900); border-bottom: 1px solid var(--line); } .vend-head img { width: 36px; height: 36px; } .vend-head .x { margin-left: auto; cursor: pointer; color: var(--text-faint); font-size: 20px; } /* ── Hoja inferior (registro rápido) ──────────────────────────────────────── */ .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60; display: none; } .backdrop.open { display: block; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--obsidian); border-top: 1px solid var(--line-gold); border-radius: 22px 22px 0 0; padding: 14px 18px calc(22px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .25s ease; max-width: var(--maxw); margin: 0 auto; } .sheet.open { transform: translateY(0); } .sheet .grip { width: 42px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 16px; } .seg { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; } .seg button { font-family: inherit; font-weight: 600; font-size: 13px; padding: 12px 6px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 4px; } .seg button.on { border-color: var(--jade-bright); color: var(--text); background: rgba(16,185,129,.10); } .seg button .e { font-size: 20px; } .monto-input { width: 100%; text-align: center; font-family: inherit; font-weight: 800; font-size: 40px; color: var(--text); background: transparent; border: none; outline: none; letter-spacing: -.02em; } .monto-input::placeholder { color: var(--text-faint); } /* ── Toast / aviso ────────────────────────────────────────────────────────── */ .toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px); background: var(--surface-2); border: 1px solid var(--line-gold); color: var(--text); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; z-index: 70; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Selector de empresa ──────────────────────────────────────────────────── */ .emp-av { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #1c1c1c; background: var(--grad-gold); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); } .opt.active-emp { border-color: var(--jade-bright); background: rgba(16,185,129,.08); } .opt .check { color: var(--jade-bright); font-size: 20px; } .opt.dashed { border-style: dashed; justify-content: center; color: var(--text-dim); font-weight: 600; } /* ── Pestañas ─────────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 6px; background: var(--obsidian-900); border: 1px solid var(--line); border-radius: 14px; padding: 4px; margin: 6px 0 16px; } .tabs button { flex: 1; font-family: inherit; font-weight: 700; font-size: 13px; padding: 10px 4px; border: none; border-radius: 11px; background: transparent; color: var(--text-faint); cursor: pointer; } .tabs button.on { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-sm); } /* ── Tabla contable ───────────────────────────────────────────────────────── */ .tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .tools input[type=date] { background: var(--obsidian-700); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 10px; font-family: inherit; font-size: 13px; } .btn-sm { padding: 9px 13px; font-size: 13px; width: auto; border-radius: 10px; } .dtable { width: 100%; border-collapse: collapse; font-size: 13px; } .dtable th { text-align: left; color: var(--text-faint); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 8px; border-bottom: 1px solid var(--line); } .dtable td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .dtable td.num { text-align: right; font-variant-numeric: tabular-nums; } .dtable .ahead td { background: var(--obsidian-700); font-weight: 600; cursor: pointer; } .dtable .ahead td:hover { color: var(--jade-bright); } .dtable .total td { font-weight: 800; border-top: 2px solid var(--line-gold); } .cuadra-ok { color: var(--jade-bright); } .cuadra-no { color: #ef4444; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Editor de asiento (usa .sheet/.backdrop) */ .edit-line { display: grid; grid-template-columns: 1fr 92px 92px 30px; gap: 6px; align-items: center; margin-bottom: 6px; } .edit-line input { font-size: 13px; padding: 9px 8px; } .edit-line .del { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 16px; } /* ── Menú de módulos ──────────────────────────────────────────────────────── */ .mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .mitem { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s; } .mitem:hover { border-color: var(--line-gold); background: var(--surface-2); } .mitem .mi { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 17px; background: rgba(16,185,129,.10); } .mitem .ml { font-size: 13.5px; font-weight: 600; line-height: 1.15; } .mcat { font-size: 12px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .07em; margin: 18px 2px 10px; } .revisar-card { background: radial-gradient(120% 120% at 100% 0%, rgba(143,150,48,.22), transparent 55%), var(--surface); border: 1px solid var(--line-gold); } /* ── Stepper del ciclo contable ───────────────────────────────────────────── */ .step { display: flex; gap: 14px; position: relative; } .step:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: -6px; width: 2px; background: linear-gradient(var(--line-gold), var(--line)); } .step .num { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--surface); border: 1px solid var(--line-gold); color: var(--gold); z-index: 1; } .step.done .num { background: var(--grad-gold); color: #2a2407; border: none; } .step .body { flex: 1; padding-bottom: 18px; } .step .card-step { display: block; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, background .15s; } .step .card-step:hover { border-color: var(--line-gold); background: var(--surface-2); } .step h4 { font-size: 15px; } .step .desc { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; } .step .arrow { float: right; color: var(--jade-bright); } .page { padding: 18px 0 96px; } /* espacio para la tabbar */ /* ── Barra lateral (solo desktop) ─────────────────────────────────────────── */ .app-sidebar { display: none; } .app-sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--text-dim); font-weight: 600; font-size: 14px; margin-bottom: 2px; } .app-sidebar nav a:hover { background: var(--surface); color: var(--text); } .app-sidebar nav a.active { background: rgba(16,185,129,.12); color: var(--jade-bright); } .app-sidebar nav a .ic { font-size: 18px; width: 22px; text-align: center; } .app-sidebar .sb-cat { font-size: 11px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; margin: 16px 14px 6px; } /* ════════ DESKTOP (≥1000px) ════════ */ @media (min-width: 1000px) { /* El contenido aprovecha el ancho (vence los max-width móviles en línea) */ .wrap { max-width: 1040px !important; } .page { padding-bottom: 40px; } /* Tarjetas que se reparten para llenar el ancho */ .grid-2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .mgrid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .auth-card { max-width: 420px; } } .section-title { font-size: 13px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; margin: 6px 2px; } /* ════════════════════════════════════════════════════════════════════════════ PANEL ADMIN — layout estilo conta_pro (navbar + sidebar) con skin Obsidian. Distribución ordenada + colores aprobados de ContaAI (oscuro/jade/oro). ════════════════════════════════════════════════════════════════════════════ */ :root { --navbar-h: 96px; --sidebar-w: 262px; } /* ── Navbar superior ──────────────────────────────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-h); z-index: 1000; background: rgba(21,24,27,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .navbar-container { height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 18px; } .navbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--text); } /* Aqui habia un `.navbar-brand img { height: 84px }` de un logotipo anterior. Estuvo muerto mientras la marca fue texto, y revivio solo al meter la mascota dentro de .navbar-brand: `.navbar-brand img` pesa mas que `.marca-icono`, asi que ganaba los 84 px y se comia tanto los 24 de escritorio como los 12 del telefono. Los tamaños los fija .marca-icono. */ .navbar-spacer { flex: 1; } .navbar-end { display: flex; align-items: center; gap: 10px; } .user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--text); } .user-chip:hover { background: var(--surface-2); border-color: var(--line-gold); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #04130d; background: var(--jade-bright); } .user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; } .user-meta .nm { font-size: .82rem; font-weight: 700; } .user-meta .pl { font-size: .66rem; color: var(--gold); font-weight: 700; } /* ── El menu de la cuenta ─────────────────────────────────────────────────── La ficha llevaba directa a cambiar la contraseña, y cerrar sesion no existia en ninguna parte de la aplicacion. Ahora despliega las tres cosas que se esperan de aqui: perfil, contraseña y salir. */ .user-menu { position: relative; } .user-chip { font-family: inherit; cursor: pointer; } .user-flecha { width: 13px; height: 13px; margin-left: 2px; color: var(--text-faint); flex: 0 0 auto; transition: transform .15s; } .user-chip[aria-expanded="true"] .user-flecha { transform: rotate(180deg); } .user-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200; min-width: 210px; padding: 6px; border-radius: 14px; background: var(--obsidian-900); border: 1px solid var(--line-gold); box-shadow: var(--shadow); display: flex; flex-direction: column; } .user-pop[hidden] { display: none; } .user-pop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text-dim); text-decoration: none; font-size: .88rem; font-weight: 600; } .user-pop a svg { width: 16px; height: 16px; flex: 0 0 auto; } .user-pop a:hover { background: var(--surface); color: var(--text); } /* Salir se separa y se marca: es la unica que no se deshace sola. */ .user-pop a.salir { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: #f4a3a3; } .user-pop a.salir:hover { background: rgba(239,68,68,.10); color: #f8c7c7; } /* En el telefono el menu se ancla al borde derecho de la pantalla, no a la ficha: anclado a la ficha se salia por la derecha. */ @media (max-width: 560px) { .user-pop { position: fixed; right: 10px; left: auto; top: calc(var(--navbar-h) + 6px); min-width: 190px; } } /* ── Estructura ───────────────────────────────────────────────────────────── */ .app-layout { display: flex; margin-top: var(--navbar-h); min-height: calc(100vh - var(--navbar-h)); } /* ── Sidebar ──────────────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); position: fixed; top: var(--navbar-h); left: 0; height: calc(100vh - var(--navbar-h)); overflow-y: auto; z-index: 100; padding: 12px 12px 28px; background: var(--obsidian-900); border-right: 1px solid var(--line); } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .sidebar-section { font-size: .64rem; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .12em; padding: 16px 12px 6px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 11px; color: var(--text-dim); font-weight: 600; font-size: .875rem; position: relative; transition: background .15s, color .15s; } .nav-link:hover { background: var(--surface); color: var(--text); } .nav-link.active { background: rgba(16,185,129,.13); color: var(--jade-bright); font-weight: 700; } .nav-link.active::before { content: ''; position: absolute; left: -12px; top: 22%; height: 56%; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad-gold); } .nav-ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; } .nav-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; } .nav-label { flex: 1; } /* ── Contenido principal ──────────────────────────────────────────────────── */ .main-content { flex: 1; margin-left: var(--sidebar-w); max-width: calc(100vw - var(--sidebar-w)); padding: 26px 28px 48px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; } .page-head h1 { font-size: 1.4rem; font-weight: 800; color: var(--text); } .page-head .sub { font-size: .85rem; color: var(--text-faint); margin-top: 3px; } /* ── Stat cards (distribución Purity, skin oscuro) ────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: var(--shadow-sm); transition: border-color .15s, transform .08s; } .stat-card:hover { border-color: var(--line-gold); transform: translateY(-2px); } .stat-body { min-width: 0; } .stat-label { font-size: .66rem; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; } .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .stat-icon { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; } .stat-icon svg { width: 22px; height: 22px; stroke: #04130d; fill: none; } .stat-icon.jade { background: var(--jade-bright); } .stat-icon.gold { background: var(--grad-gold); } .stat-icon.silver { background: var(--grad-silver); } .stat-icon.dark { background: var(--surface-2); } .stat-icon.dark svg { stroke: var(--jade-bright); } /* ── Grid de paneles del dashboard ────────────────────────────────────────── */ .dash-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 20px; } @media (min-width: 1100px) { .dash-grid.two { grid-template-columns: 2fr 1fr; } } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .panel-head h3 { font-size: 1rem; font-weight: 700; color: var(--text); } /* ── Consulta rápida (chat flotante, sin acceso a los libros) ─────────────── */ .cq-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: var(--grad-gold, var(--jade-bright)); color: #04130d; display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0,0,0,.45); transition: transform .15s, box-shadow .15s; } .cq-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.55); } .cq-fab svg { width: 25px; height: 25px; } .cq-panel { position: fixed; right: 22px; bottom: 90px; z-index: 901; width: 370px; max-width: calc(100vw - 32px); height: 470px; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); display: flex; flex-direction: column; overflow: hidden; background: var(--obsidian-900); border: 1px solid var(--line-gold); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.6); } .cq-panel[hidden] { display: none; } .cq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); } .cq-head b { display: block; font-size: .92rem; color: var(--text); } .cq-head small { display: block; font-size: .7rem; color: var(--text-faint); margin-top: 2px; } .cq-x { background: none; border: none; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; padding: 4px; } .cq-x:hover { color: var(--text); } .cq-x svg { width: 17px; height: 17px; } .cq-hilo { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .cq-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .86rem; line-height: 1.45; white-space: pre-wrap; } .cq-msg.bot { align-self: flex-start; background: var(--obsidian-700); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; } .cq-msg.yo { align-self: flex-end; background: var(--jade-bright); color: #04130d; border-bottom-right-radius: 4px; font-weight: 500; } .cq-msg.esperando { color: var(--text-faint); font-style: italic; } .cq-barra { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--line); } .cq-barra textarea { flex: 1; resize: none; max-height: 90px; font-family: inherit; font-size: .87rem; color: var(--text); background: var(--obsidian-700); border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; outline: none; } .cq-barra textarea:focus { border-color: var(--jade-bright); } .cq-barra button { width: 42px; flex: none; border-radius: 13px; border: none; cursor: pointer; background: var(--jade-bright); color: #04130d; display: grid; place-items: center; } .cq-barra button:disabled { opacity: .5; cursor: default; } .cq-barra button svg { width: 17px; height: 17px; } @media (max-width: 600px) { .cq-panel { right: 10px; left: 10px; width: auto; bottom: 82px; height: 62vh; } .cq-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; } } /* ── Hamburguesa + drawer móvil ───────────────────────────────────────────── */ /* La hamburguesa se muestra SIEMPRE, no solo en móvil. Antes el menú de ~40 enlaces quedaba fijo en escritorio y no había forma de plegarlo, así que el contenido siempre competía con él por el ancho. */ .hamburger { display: grid; width: 38px; height: 38px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); color: var(--text); cursor: pointer; place-items: center; } .hamburger svg { width: 20px; height: 20px; } /* Menú plegado en escritorio: la barra se desliza fuera y el contenido ocupa todo el ancho. La preferencia se recuerda en localStorage (ver base.html). */ @media (min-width: 992px) { .sidebar { transition: transform .25s cubic-bezier(.4,0,.2,1); } .main-content { transition: margin-left .25s cubic-bezier(.4,0,.2,1), max-width .25s cubic-bezier(.4,0,.2,1); } body.menu-plegado .sidebar { transform: translateX(-100%); } body.menu-plegado .main-content { margin-left: 0; max-width: 100vw; } } .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 999; } .mobile-overlay.open { display: block; } @media (max-width: 991px) { .sidebar { transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); } .sidebar.open { transform: translateX(0); box-shadow: 6px 0 30px rgba(0,0,0,.5); } .main-content { margin-left: 0; max-width: 100vw; padding: 20px 16px 40px; } .hamburger { display: grid; } } /* ══════════════════════════════════════════════════════════════════════════ Barra publica (base_publico.html) Nace de un fallo concreto: «Iniciar sesion» y «Crear cuenta» vivian solo en el pie de la portada. En el movil eso son ~600 puntos de scroll, y el usuario daba por hecho que no habia forma de entrar. Se disena primero para pantalla estrecha y se ensancha en los 860 px. ══════════════════════════════════════════════════════════════════════════ */ .nav-pub { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px clamp(14px, 4vw, 40px); background: var(--obsidian-900, #15181b); border-bottom: 1px solid var(--line, rgba(192,192,192,.14)); } .nav-pub-marca { display: flex; align-items: center; gap: 9px; text-decoration: none; } /* ── La marca ─────────────────────────────────────────────────────────────── Antes era un cuadro con una letra dentro; ahora es la mascota, asi que ni fondo ni tipografia: la imagen se pinta sola. Un 20% menos de lo que media el cuadro, que a tamaño completo se comia la barra. El nombre lleva el dominio debajo, como en el logotipo de conta_pro, y va en un azul celeste vivo: sobre el obsidiano de las barras es lo que mas resalta y no compite con el verde jade, que es el color de las acciones. */ .nav-pub-z { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain; display: block; } .marca-icono { width: 24px; height: 24px; margin-right: 8px; object-fit: contain; flex: 0 0 auto; display: block; } .nav-pub-marca-txt, .marca-txt { display: inline-flex; flex-direction: column; line-height: 1.05; } /* «Cont» en blanco y «iz» en dorado —son las dos ultimas letras, van juntas—, y el lema debajo en el azul de marca. */ .nav-pub-nombre, .marca-nombre { color: var(--text); font-weight: 800; font-size: 1.02rem; letter-spacing: .2px; } .nav-pub-dominio, .marca-dominio { color: var(--azul-marca); font-weight: 600; font-size: .64rem; letter-spacing: .02em; } /* El lema solo desaparece en pantallas muy estrechas, por debajo de 400 px, donde la fila lleva ademas el boton de menu y tres controles mas. Encima de eso se queda: es la mitad de la marca. */ @media (max-width: 400px) { .nav-pub-dominio, .marca-dominio { display: none; } } /* ── La marca de la barra de dentro, en el telefono ───────────────────────── Es la que se ve al iniciar sesion, la de la fila del boton «Mis Areas». Ahi el conjunto icono + nombre + lema compite con cuatro controles mas en 360 px y se lee enorme; en la portada y en el login, que solo llevan la marca, el mismo tamaño esta bien. Por eso el recorte va aqui y no en los otros dos. El icono baja a la mitad y el nombre le acompaña: encoger solo el dibujo lo deja pequeño al lado de un texto que no se movio, y el bulto sigue igual. */ @media (max-width: 991px) { /* 18 y no 12: los 12 se pusieron para compensar la regla de 84 px de arriba, que era la que hacia enorme la cara. Quitada esa, 18 acompaña al nombre sin pasarse. */ .marca-icono { width: 18px; height: 18px; margin-right: 6px; } .marca-nombre { font-size: .78rem; letter-spacing: 0; } /* El lema se queda debajo del nombre, en pequeño: no ensancha la barra mas alla de su propio ancho y es lo que explica que es esto. */ .marca-dominio { font-size: .56rem; } .navbar-brand { gap: 4px; font-size: .78rem; } .navbar-container { gap: 6px; padding-left: 8px; padding-right: 8px; } } /* ── La marca en las pantallas de sesion ──────────────────────────────────── Login, registro, recuperar, contraseña, onboarding y selector de empresa no heredan la barra: cada una pintaba su propia marca, y todas se quedaron con el cuadro de la «Z» del nombre viejo. Aqui va una sola vez, y el tamaño baja en el telefono, donde la tarjeta de acceso ya ocupa casi todo. */ .marca-sesion { display: inline-flex; align-items: center; justify-content: center; gap: 11px; text-decoration: none; margin: 0 auto 18px; } .marca-sesion img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; } .marca-sesion .n { font-weight: 800; font-size: 21px; color: var(--text); letter-spacing: .4px; } .marca-sesion .l { display: block; font-size: .7rem; font-weight: 600; color: var(--azul-marca); letter-spacing: .02em; margin-top: 1px; } @media (max-width: 560px) { .marca-sesion img { width: 34px; height: 34px; } .marca-sesion .n { font-size: 18px; } } .nav-pub-nombre { color: var(--text, #f3f5f4); font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; } /* .nav-pub-ai y .nav-pub-lema desaparecieron con la marca vieja: la primera doraba una letra del nombre y la segunda ponia el lema al lado. Ahora el nombre va entero en azul y el dominio debajo. */ .nav-pub-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; cursor: pointer; background: transparent; border: 1px solid var(--line, rgba(192,192,192,.14)); border-radius: 10px; } .nav-pub-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text, #f3f5f4); } .nav-pub-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 10px clamp(14px, 4vw, 40px) 16px; background: var(--obsidian-900, #15181b); border-bottom: 1px solid var(--line, rgba(192,192,192,.14)); } .nav-pub-menu.abierto { display: flex; } .nav-pub-menu a { padding: 13px 4px; color: var(--text-dim, #aab2b0); text-decoration: none; font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--line, rgba(192,192,192,.14)); } .nav-pub-menu a:last-child { border-bottom: 0; } .nav-pub-menu a:hover { color: var(--text, #f3f5f4); } /* Los dos de accion se ven como botones tambien en el panel desplegado: son el motivo por el que existe esta barra. */ .nav-pub-entrar, .nav-pub-crear { margin-top: 8px; text-align: center; border-bottom: 0 !important; border-radius: 10px; } .nav-pub-entrar { border: 1px solid var(--line-gold, rgba(143,150,48,.45)); color: var(--text, #f3f5f4) !important; } .nav-pub-crear { background: var(--jade-bright, #10b981); color: #06231c !important; font-weight: 700 !important; } @media (min-width: 860px) { .nav-pub-burger { display: none; } .nav-pub-menu { display: flex; position: static; flex-direction: row; align-items: center; gap: 10px; padding: 0; background: none; border: 0; } .nav-pub-menu a { padding: 9px 12px; border-bottom: 0; font-size: .95rem; } .nav-pub-entrar, .nav-pub-crear { margin-top: 0; padding: 9px 16px !important; } } /* ── La barra lateral, en el movil ────────────────────────────────────────── Sintoma: el menu se veia hasta la mitad y no dejaba deslizar hasta el final. No era falta de overflow —ya lo tenia— sino la unidad: 100vh en un movil incluye la franja que tapa la barra del navegador, asi que el elemento terminaba por DEBAJO de lo visible y sus ultimos enlaces quedaban fuera de alcance. `dvh` es la unidad que descuenta esa franja y cambia al ocultarse. El padding de abajo evita que el ultimo modulo quede pegado al borde, donde el gesto de deslizar del sistema se lo come. */ @media (max-width: 991px) { .sidebar { z-index: 1001; /* por encima de .mobile-overlay (999): estaba debajo, y cada toque en un modulo lo comia la capa oscura en vez del enlace */ height: calc(100dvh - var(--navbar-h)); padding-bottom: 90px; -webkit-overflow-scrolling: touch; /* inercia en iOS */ overscroll-behavior: contain; /* que el rebote no arrastre la pagina */ } } /* ── Tablas en el móvil ───────────────────────────────────────────────────── 26 pantallas usan tablas y solo 14 las envolvían en `.scroll-x`. Las otras doce se salían de la pantalla en un teléfono: el usuario veía media tabla y ninguna forma de llegar al resto, porque el desbordamiento estaba en un elemento que no scrollea. Arreglarlo plantilla por plantilla serían doce sitios donde volver a olvidarse. Con `display:block` la tabla pasa a comportarse como una caja y puede scrollear por sí misma, sin depender de que alguien se acordara de envolverla. En escritorio no aplica: ahí caben. Nombrar las clases una por una fue justo el error que se pretendia evitar: societario, monedas, renta, liquidacion, nomina y el balance general no usan ninguna de las tres —tienen `table.z`, `table.dt` o la tabla desnuda— y se quedaron fuera. El area de contenido las contiene a todas, presentes y futuras, asi que la regla cuelga de ahi. */ @media (max-width: 720px) { .main-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Sin esto las celdas se parten en dos líneas y la tabla se vuelve ilegible justo cuando ya puede scrollear. */ .main-content table td, .main-content table th { white-space: nowrap; } } /* ── Que la pantalla no salga cortada en el movil ─────────────────────────── Dos cosas, y la primera se nota de inmediato. La barra superior mide 96 px, pensados para un monitor. En un telefono eso es casi un quinto de la pantalla gastado en el logo antes de ver nada del negocio. Baja a 62, que sigue siendo comodo para el dedo. Y `overflow-x:hidden` en el area de contenido —no en el body— es la red: si cualquier elemento se pasa de ancho, se recorta ahi en vez de empujar la pagina entera y dejarla «cortada» con media interfaz fuera de la vista. La pagina sigue scrolleando en vertical con normalidad, y las tablas scrollean solas por dentro. */ @media (max-width: 991px) { /* La cabecera se queda como estaba: se probo bajarla a 62 y luego a 44, y el problema no era ella. Lo que se veia enorme eran los botones. `.btn` trae `width:100%` de serie —292 de los 345 del producto lo anulan a mano, asi que el valor por defecto esta al reves— y encima 14 px de relleno arriba y abajo con letra de 15. En una pantalla estrecha cada boton es una franja que cruza la pantalla, y dos o tres seguidos parecen la interfaz entera. No se toca el ancho, que en el alta, el login y el onboarding si se quiere completo: se recorta el volumen. */ .btn { padding: 10px 14px; font-size: 14px; border-radius: 11px; gap: 6px; } .btn-sm { padding: 7px 11px; font-size: 12.5px; border-radius: 9px; } .btn-primary { box-shadow: 0 4px 12px rgba(16,185,129,.22); } /* Red de seguridad: si algo se pasa de ancho se recorta aqui en vez de empujar la pagina entera y dejarla «cortada» con media interfaz fuera. */ .main-content { overflow-x: hidden; } /* La otra causa de «pantalla cortada»: una cadena sin espacios —un correo, un NIT, el enlace de una factura— no se puede partir y estira su tarjeta hasta sacarla del telefono. En escritorio sobra sitio y no se nota. */ .card, .panel, .modulo, td, th, .stat-value { overflow-wrap: anywhere; } img, svg, pre, canvas { max-width: 100%; } } /* ── Los controles de la cabecera, en un telefono ─────────────────────────── La barra mide bien; lo que no cabe es lo que lleva dentro. Sumado a tamaño de escritorio son unos 460 px —38 del menu, 110 de la marca, 85 de «Mis Areas», 40+40 de los dos iconos y 130 de la ficha de cuenta— en una pantalla de 360. Se salian por la derecha y el usuario no llegaba a ellos. No se toca el alto de la barra: solo encogen los controles. El icono de empresas se retira porque es el unico duplicado —el menu lateral ya lo lleva en «Cuenta · Empresas»—, y de la ficha de cuenta se queda el avatar: el nombre y el plan se leen en su propia pantalla. La campana se queda entera porque no esta en ningun otro sitio. */ @media (max-width: 720px) { /* Con `.navbar-end` delante: la regla de esta pastilla vive en el