/* 03-components.css
   Rejillas, tarjetas, mini interfaces y maqueta del CRM
   Se cargan en este orden: la cascada depende de el. */

/* Grids / cards */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;} .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px;}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow-sm);text-align:left;}
.card h4{font-size:19px;margin-bottom:8px;letter-spacing:-0.02em;} .card p{font-size:15.5px;color:var(--muted);line-height:1.55;}
.card .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:var(--yellow-soft);} .card .ic svg{width:21px;height:21px;stroke:var(--navy);}
.ic.lav{background:var(--lav);} .ic.peach{background:var(--peach);} .ic.mint{background:var(--mint);} .ic.sky{background:var(--sky);} .ic.rose{background:var(--rose);} .ic.yellow{background:var(--yellow-soft);}
.card.link-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;display:block;} .card.link-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D9D2C2;}
.card .go{display:inline-block;margin-top:14px;color:var(--gold);font-weight:700;font-size:14px;}
/* Feature cards with tinted top */
.cf{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;text-align:left;}
.cf .shot{padding:24px;min-height:230px;display:flex;align-items:center;color:#1B2A44;font-family:var(--sans);letter-spacing:0;font-size:11.5px;} .cf .shot > *{width:100%;}
.cf .txt{padding:24px 28px 28px;} .cf h4{font-size:20px;margin-bottom:8px;letter-spacing:-0.02em;} .cf p{font-size:15.5px;color:var(--muted);line-height:1.55;}
.shot.lav{background:var(--lav);} .shot.peach{background:var(--peach);} .shot.mint{background:var(--mint);} .shot.sky{background:var(--sky);} .shot.rose{background:var(--rose);} .shot.yellow{background:var(--yellow-soft);}

/* Mini UI (inside shots) */
.mini-folder{display:flex;flex-direction:column;gap:8px;} .mini-folder .fh{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#6B7A90;padding:2px 6px;} .mini-folder .fh b{background:var(--yellow);color:#1B2A44;border-radius:999px;padding:1px 8px;font-size:11px;margin-left:6px;}
.mini-folder .fi{background:#fff;border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:13px;box-shadow:0 1px 0 rgba(20,33,61,.05);} .mini-folder .fi .nm{font-weight:700;display:flex;align-items:center;gap:10px;}
.avt{width:30px;height:30px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;} .avt.a{background:#6B4EE6;} .avt.b{background:#1D8A7A;} .avt.c{background:#E07A3F;} .avt.d{background:#2F6FD6;} .avt.e{background:#C2437A;}
.un{background:var(--red);color:#fff;border-radius:999px;font-size:10px;font-weight:700;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex:0 0 auto;}
.agent{background:var(--gold);color:#fff;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700;white-space:nowrap;}
.mini-ticket{background:#fff;border-radius:14px;padding:14px 16px;font-size:12.5px;box-shadow:0 1px 0 rgba(20,33,61,.05);} .mini-ticket .th{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} .mini-ticket .th b{font-family:var(--display);font-size:15px;} .mini-ticket .st{background:var(--yellow-soft);color:#7A5300;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:6px;} .mini-ticket .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);}
.mini-ticket .row{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid #EEE9DF;color:#6B7A90;} .mini-ticket .row span:last-child{color:#1B2A44;font-weight:700;} .mini-ticket .note{margin-top:10px;background:var(--yellow-soft);border-radius:10px;padding:10px 12px;color:#1B2A44;line-height:1.45;border-left:3px solid var(--yellow);}
.mini-tpl{display:flex;flex-direction:column;gap:8px;} .mini-tpl .t{background:#fff;border-radius:12px;padding:11px 14px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px;box-shadow:0 1px 0 rgba(20,33,61,.05);} .mini-tpl .t .nm{font-weight:700;}
.mini-tpl .ok{color:#2C7A46;background:var(--wa-soft);border-radius:999px;padding:3px 10px;font-weight:700;font-size:11px;display:inline-flex;align-items:center;gap:6px;} .mini-tpl .ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wa);} .mini-tpl .pend{color:#7A5300;background:var(--yellow-soft);} .mini-tpl .pend::before{background:var(--yellow);}
.agenda{background:#fff;border-radius:14px;padding:12px 14px;font-size:12.5px;box-shadow:0 1px 0 rgba(20,33,61,.05);} .agenda .d{display:flex;gap:10px;padding:8px 0;border-top:1px solid #EEE9DF;align-items:center;} .agenda .d:first-child{border-top:none;padding-top:0;} .agenda .hr{font-weight:800;color:var(--gold);min-width:52px;font-family:var(--display);} .agenda .ev{flex:1;} .agenda .ev b{display:block;font-size:13px;} .agenda .ev span{color:#6B7A90;} .agenda .rec{background:var(--wa-soft);color:#2C7A46;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700;}
.users{display:flex;flex-direction:column;gap:8px;} .users .u{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:9px 12px;font-size:12.5px;box-shadow:0 1px 0 rgba(20,33,61,.05);} .users .nm{font-weight:700;} .users .rl{color:#6B7A90;font-size:11px;} .users .role{background:#EEF1F7;border-radius:8px;padding:3px 9px;font-size:11px;font-weight:700;color:#3A4A6B;} .users .role.adm{background:var(--yellow-soft);color:#7A5300;}
.alerts{display:flex;flex-direction:column;gap:8px;} .alerts .al{background:#fff;border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:12.5px;box-shadow:0 1px 0 rgba(20,33,61,.05);} .alerts .al i{width:10px;height:10px;border-radius:50%;flex:0 0 auto;} .alerts .al b{display:block;font-size:13px;} .alerts .al span{color:#6B7A90;}
.ai{background:#fff;border-radius:14px;padding:12px 14px;font-size:12.5px;box-shadow:0 1px 0 rgba(20,33,61,.05);} .ai .q{background:#F3EDE1;border-radius:10px;padding:8px 10px;border-left:3px solid var(--yellow);margin-bottom:8px;} .ai .s{background:var(--lav);border-radius:10px;padding:8px 10px;} .ai .s b{display:block;color:#5B3FC9;font-size:11px;margin-bottom:3px;} .ai .tag{display:inline-block;background:var(--wa-soft);color:#2C7A46;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700;margin-top:8px;}

/* CRM mock (light, faithful) */
.crm{background:#F6F2EA;color:#1B2A44;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;font-family:var(--sans);letter-spacing:0;font-size:12px;text-align:left;}
.crm-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;} .crm-top .title{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-0.02em;}
.crm-pill{background:#fff;border:1px solid #E8E1D4;border-radius:10px;padding:7px 11px;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap;} .crm-pill .on{width:8px;height:8px;border-radius:50%;background:var(--wa);} .crm-pill .ok{color:var(--wa);}
.crm-body{display:grid;grid-template-columns:240px 1fr;height:440px;}
.crm-side{display:flex;flex-direction:column;border-right:1px solid #E8E1D4;min-width:0;}
.side-head{background:#fff;margin:0 10px 8px;border-radius:12px;padding:11px;border:1px solid #E8E1D4;}
.acct{display:flex;align-items:center;gap:8px;} .acct .av{width:28px;height:28px;border-radius:50%;background:#1B2A44;display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .acct .av svg{stroke:#F0B429;}
.acct .n{font-family:var(--display);font-weight:700;font-size:12px;line-height:1.15;} .acct .p{font-size:10.5px;color:#6B7A90;margin-top:1px;}
.side-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center;} .rb{width:26px;height:26px;border-radius:50%;background:#F0B429;display:flex;align-items:center;justify-content:center;} .rb svg{stroke:#1B2A44;} .sb{background:#fff;border:1px solid #E8E1D4;border-radius:8px;padding:4px 8px;font-size:10px;font-weight:600;}
.search{margin:0 10px 8px;background:#fff;border:1px solid #E8E1D4;border-radius:10px;padding:7px 10px;font-size:10.5px;color:#6B7A90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.folder{display:flex;justify-content:space-between;align-items:center;padding:2px 14px 6px;font-size:10.5px;font-weight:700;color:#6B7A90;} .folder b{background:#F0B429;color:#1B2A44;border-radius:999px;padding:1px 6px;font-size:9.5px;margin-left:4px;}
.convs{flex:1;overflow:hidden;padding:0 10px;display:flex;flex-direction:column;gap:7px;}
.conv{background:#fff;border-radius:11px;border:1px solid #E8E1D4;border-left:3px solid #F0B429;padding:8px 9px;display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start;}
.conv .avt{width:26px;height:26px;font-size:9.5px;} .conv .l1{display:flex;align-items:center;justify-content:space-between;gap:6px;} .conv .nm{font-weight:700;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .conv .agent{font-size:8.5px;padding:1px 6px;}
.conv .pv{font-size:10px;color:#6B7A90;margin-top:3px;display:flex;justify-content:space-between;gap:6px;} .conv .pv span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .conv .un{min-width:15px;height:15px;font-size:8.5px;padding:0 4px;}
.crm-main{display:flex;flex-direction:column;min-width:0;}
.chat-head{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid #E8E1D4;overflow:hidden;} .chat-head .who{min-width:0;margin-right:4px;} .chat-head .who .n{font-family:var(--display);font-weight:800;font-size:12.5px;white-space:nowrap;} .chat-head .who .s{font-size:9.5px;color:#6B7A90;white-space:nowrap;}
.act{background:#fff;border:1px solid #E8E1D4;border-radius:9px;padding:6px 9px;font-size:10.5px;font-weight:700;white-space:nowrap;} .act.hl{background:#FFF4D6;border-color:#F3D48A;}
.win{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:10px;color:#6B7A90;border-bottom:1px solid #E8E1D4;} .win .bar{flex:1;height:5px;border-radius:999px;background:#E3DED2;overflow:hidden;} .win .bar i{display:block;height:100%;width:86%;background:linear-gradient(90deg,#1E9E52,#22C55E);border-radius:999px;} .win b{color:#1B2A44;font-variant-numeric:tabular-nums;}
.msgs{flex:1;overflow:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:9px;background-color:#F3EDE1;background-image:radial-gradient(rgba(27,42,68,.06) 1px,transparent 1.2px),radial-gradient(rgba(27,42,68,.05) 1px,transparent 1.2px);background-size:22px 22px,22px 22px;background-position:0 0,11px 11px;}
.m{max-width:74%;background:#fff;border-radius:12px;padding:8px 11px;font-size:11.5px;line-height:1.4;box-shadow:0 1px 0 rgba(0,0,0,.04);} .m.in{align-self:flex-start;border-left:3px solid #F0B429;border-top-left-radius:4px;} .m.out{align-self:flex-end;background:#DCF5E3;border:1px solid #BFE9CC;border-top-right-radius:4px;}
.m .meta{display:flex;gap:7px;justify-content:flex-end;margin-top:4px;font-size:9px;color:#6B7A90;} .m .meta .nw{color:var(--gold);font-weight:700;} .m .from{display:block;font-size:9.5px;color:#2C7A46;font-weight:700;margin-bottom:2px;}
.quick{display:flex;gap:7px;padding:9px 12px 4px;overflow:hidden;} .quick span{background:#FFF4D6;border:1px solid #F3D48A;border-radius:10px;padding:6px 10px;font-size:10.5px;color:#5A3D00;font-weight:600;white-space:nowrap;}
.compose{display:flex;align-items:center;gap:9px;margin:8px 12px 12px;background:#fff;border:2px solid #F0B429;border-radius:14px;padding:7px 10px;} .compose .ph{flex:1;font-size:11.5px;color:#6B7A90;} .compose .send{width:32px;height:32px;border-radius:9px;background:var(--wa);display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .compose .send svg{width:14px;height:14px;fill:#fff;}