/* ============================================================
   CodeNitro — System Mockups (recreated UI demos)
   ============================================================ */

/* Generic app frame */
.mock {
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #0A0F1E, #070B16);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
}
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.mock-bar .dots { display: flex; gap: 6px; }
.mock-bar .dots i { width: 10px; height: 10px; border-radius: 50%; display:block; }
.mock-bar .dots i:nth-child(1){ background:#ff5f57; } .mock-bar .dots i:nth-child(2){ background:#febc2e; } .mock-bar .dots i:nth-child(3){ background:#28c840; }
.mock-bar .url {
  margin-left: 6px; flex: 1; font-size: 12px; color: var(--muted);
  background: rgba(0,0,0,.35); border-radius: 7px; padding: 5px 12px;
  font-family: var(--font-body); box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-bar .live { font-family:var(--font-sub); font-weight:700; font-size:11px; letter-spacing:.1em; color: var(--green); display:inline-flex; align-items:center; gap:6px; }
.mock-bar .live i { width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
.mock-body { padding: 14px; }

/* CRM kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.kanban::-webkit-scrollbar{ height:6px; } .kanban::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.kcol { background: rgba(255,255,255,.015); border: 1px solid var(--line); border-radius: 10px; padding: 9px; }
.kcol-h { display:flex; align-items:center; justify-content:space-between; font-family:var(--font-sub); font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.kcol-h .cnt { color:var(--cyan); background:rgba(32,216,255,.1); border-radius:6px; padding:1px 7px; font-size:10.5px; }
.kcard { background: var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--cyan); border-radius:8px; padding:9px; margin-bottom:8px; }
.kcard:last-child{ margin-bottom:0; }
.kcard.b{ border-left-color: var(--blue); } .kcard.p{ border-left-color: var(--purple);} .kcard.g{ border-left-color: var(--green);} .kcard.a{ border-left-color: var(--amber);}
.kcard .nm { font-weight:600; font-size:12.5px; }
.kcard .mt { display:flex; align-items:center; gap:6px; margin-top:6px; color:var(--muted); font-size:10.5px; }
.kcard .sla { margin-left:auto; font-family:var(--font-sub); font-weight:700; font-size:10px; color:var(--amber); background:rgba(234,179,8,.12); border-radius:5px; padding:1px 6px; }
.kcard .sla.ok { color:var(--green); background:rgba(39,234,174,.12); }

/* WhatsApp chat */
.wa-chat { background: #0a1622; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.wa-head { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#0f2233; border-bottom:1px solid var(--line); }
.wa-head .av { width:34px;height:34px;border-radius:50%; background:var(--grad-primary); display:grid;place-items:center; font-family:var(--font-head); font-weight:800; font-size:13px; color:#04121e; }
.wa-head .who b{ display:block; font-size:13px; } .wa-head .who span{ font-size:11px; color:var(--green); }
.wa-head .bot { margin-left:auto; font-family:var(--font-sub); font-weight:700; font-size:10px; letter-spacing:.08em; color:var(--purple); background:rgba(139,92,246,.14); border-radius:6px; padding:3px 8px; }
.wa-msgs { padding:14px 12px; display:flex; flex-direction:column; gap:8px; background:
  radial-gradient(circle at 30% 10%, rgba(32,216,255,.04), transparent 40%),
  #0a1622; min-height:150px; }
.bub { max-width:78%; padding:8px 11px; border-radius:12px; font-size:12.5px; line-height:1.5; }
.bub.in { align-self:flex-start; background:#132a3d; border-bottom-left-radius:4px; }
.bub.out { align-self:flex-end; background:#144d3a; border-bottom-right-radius:4px; }
.bub .tm { display:block; font-size:9.5px; color:rgba(255,255,255,.45); margin-top:4px; text-align:right; }
.bub.bot-tag::before { content:"🤖 IA"; font-family:var(--font-sub); font-weight:700; font-size:9px; letter-spacing:.05em; color:var(--purple); display:block; margin-bottom:3px; }

/* Dashboard / stat mock */
.dash { display:grid; gap:10px; }
.dash-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dash-tile { background: var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px; }
.dash-tile .t { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-family:var(--font-sub); font-weight:600; }
.dash-tile .v { font-family:var(--font-head); font-weight:800; font-size:1.25rem; margin-top:5px; }
.dash-tile .v.cy{ color:var(--cyan);} .dash-tile .v.gr{ color:var(--green);} .dash-tile .v.am{ color:var(--amber);}
.bars { display:flex; align-items:flex-end; gap:6px; height:70px; padding-top:6px; }
.bars i { flex:1; background: var(--grad-primary); border-radius:4px 4px 0 0; opacity:.85; display:block; }
.table-mini { width:100%; border-collapse:collapse; font-size:11.5px; }
.table-mini th { text-align:left; color:var(--muted); font-family:var(--font-sub); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:10px; padding:7px 8px; border-bottom:1px solid var(--line); }
.table-mini td { padding:8px; border-bottom:1px solid rgba(27,36,64,.55); }
.st-pill { font-family:var(--font-sub); font-weight:700; font-size:10px; padding:2px 8px; border-radius:99px; }
.st-ok{ color:var(--green); background:rgba(39,234,174,.12);} .st-err{ color:var(--pink); background:rgba(236,72,153,.12);} .st-wait{ color:var(--amber); background:rgba(234,179,8,.12);} .st-mach{ color:var(--cyan); background:rgba(32,216,255,.12);}

/* n8n workflow */
.n8n { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.n8n-node { display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.n8n-node .ic { width:26px;height:26px;border-radius:7px; display:grid;place-items:center; font-size:14px; }
.n8n-node.trg .ic{ background:rgba(39,234,174,.14); } .n8n-node.ai .ic{ background:rgba(139,92,246,.16);} .n8n-node.db .ic{ background:rgba(0,119,255,.16);} .n8n-node.act .ic{ background:rgba(32,216,255,.14);}
.n8n-node b{ font-size:12px; font-family:var(--font-sub); font-weight:700; } .n8n-node span{ display:block; font-size:10px; color:var(--muted); }
.n8n-wire { color:var(--purple); opacity:.7; }

/* Migration / history (sepia) */
.sepia { background: linear-gradient(180deg, #1c1710, #14100b); border:1px solid #3a2f1f; border-radius:12px; padding:14px; }
.sepia .day { text-align:center; font-family:var(--font-sub); font-weight:700; font-size:10px; letter-spacing:.1em; color:#c9a86a; margin:8px 0; text-transform:uppercase; }
.sepia .sb { max-width:80%; padding:8px 11px; border-radius:10px; font-size:12px; margin-bottom:7px; color:#e8dcc4; }
.sepia .sb.l{ background:#2a2113; } .sepia .sb.r{ background:#33301c; margin-left:auto; }
.sepia .legacy { display:inline-block; font-size:9px; letter-spacing:.08em; color:#c9a86a; text-transform:uppercase; font-family:var(--font-sub); font-weight:700; margin-bottom:8px; }

/* Ramiro Seguros — client site mock (preto & dourado, site real) */
.ramiro { background:#0a0a0c; }
.ramiro-nav { display:flex; align-items:center; gap:9px; background:#0a0a0c; border-bottom:1px solid rgba(228,185,35,.28); padding:11px 13px; }
.ramiro-nav .sh { width:28px;height:28px;border-radius:8px;background:radial-gradient(circle at 50% 30%, #3a2f10, #14100a); display:grid;place-items:center;color:#e8b923; box-shadow:inset 0 0 0 1px rgba(228,185,35,.5); }
.ramiro-nav .sh svg{width:16px;height:16px;}
.ramiro-nav b{ color:#f3e6c4; font-family:var(--font-sub); font-weight:700; font-size:13px; line-height:1; }
.ramiro-nav b span{ display:block; font-weight:500; font-size:8.5px; color:#b99a54; letter-spacing:.04em; }
.ramiro-nav .cot{ margin-left:auto; background:linear-gradient(180deg,#f6d873,#d4a017); color:#241c04; font-family:var(--font-sub); font-weight:700; font-size:10.5px; padding:7px 12px; border-radius:7px; box-shadow:0 4px 14px -4px rgba(228,185,35,.6); }
.ramiro-body { padding:20px 18px 22px; color:#f4f1e8; background:radial-gradient(500px 220px at 90% 0%, rgba(228,185,35,.10), transparent 60%); }
.ramiro-body h4{ font-family:var(--font-head); font-weight:800; font-size:1.4rem; line-height:1.08; color:#fbf7ec; }
.ramiro-body h4 em{ font-style:normal; background:linear-gradient(120deg,#f6d873,#d4a017); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.ramiro-body p{ color:#c7bfa8; font-size:.86rem; margin:9px 0 14px; }
.ramiro-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.ramiro-btns .b1{ background:linear-gradient(180deg,#f6d873,#d4a017); color:#241c04; font-family:var(--font-sub); font-weight:700; font-size:11px; padding:10px 15px; border-radius:8px; box-shadow:0 6px 18px -6px rgba(228,185,35,.6); }
.ramiro-btns .b2{ background:#22c55e; color:#04120a; font-family:var(--font-sub); font-weight:700; font-size:11px; padding:10px 15px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; }
.ramiro-btns .b2 svg{ width:13px; height:13px; }
.ramiro-stats{ display:flex; gap:20px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(228,185,35,.18); }
.ramiro-stats .v{ font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:#e8b923; }
.ramiro-stats .l{ font-size:9px; color:#9a8c6a; text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }

/* Split media layout */
.split { display:grid; gap:34px; align-items:center; grid-template-columns:1fr; }
.split > * { min-width: 0; }
.split-media { min-width: 0; }
.mock { width: 100%; max-width: 100%; }
@media(min-width:960px){ .split{ grid-template-columns:1fr 1fr; } .split.rev .split-media{ order:-1; } }
.feature-list { display:grid; gap:14px; margin-top:22px; }
.feature-list li { display:flex; gap:12px; align-items:flex-start; }
.feature-list .fi { flex:0 0 auto; width:26px;height:26px;border-radius:8px; display:grid;place-items:center; background:rgba(32,216,255,.1); color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(32,216,255,.25); }
.feature-list .fi svg{ width:15px;height:15px; }
.feature-list b{ font-family:var(--font-sub); font-weight:700; font-size:.98rem; }
.feature-list p{ color:var(--muted); font-size:.9rem; margin-top:2px; }