/* Sistema de diseño ERP/CRM (ds-). Ver docs/UI-LAYOUT-SYSTEM.md. Estático: no necesita compilar. */
:root{--ds-ink:#0f172a;--ds-mut:#64748b;--ds-line:#e5e7eb;--ds-soft:#f1f5f9;--ds-acc:#4f46e5;--ds-acc2:#7c3aed}
.ds-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 1.5rem}
.ds-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-acc);margin-bottom:.35rem}
.ds-eyebrow .ic{width:.95rem;height:.95rem}
.ds-head h1{margin:0;font-size:1.65rem;font-weight:700;letter-spacing:-.025em;color:var(--ds-ink)}
.ds-head p{margin:.3rem 0 0;max-width:48rem;font-size:.9rem;color:var(--ds-mut)}
.ds-act{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ds-btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:.65rem;padding:.55rem .95rem;font-size:.86rem;font-weight:600;border:1px solid var(--ds-line);background:#fff;color:#334155;text-decoration:none;cursor:pointer;transition:.15s;line-height:1.1}
.ds-btn:hover{border-color:#c7d2fe;background:#f8faff;color:#3730a3}
.ds-btn .ic{width:1rem;height:1rem}
.ds-btn.pri{background:linear-gradient(135deg,#4f46e5,#6d5ef0);border-color:transparent;color:#fff;box-shadow:0 6px 16px -8px rgba(79,70,229,.7)}
.ds-btn.pri:hover{filter:brightness(1.06);color:#fff}
.ds-btn.sm{padding:.4rem .7rem;font-size:.78rem}
/* Estadísticas */
.ds-stats{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.ds-stat{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem 1rem 1.1rem;background:#fff;border:1px solid var(--ds-line);border-radius:1rem;text-decoration:none;color:inherit;overflow:hidden;transition:.15s}
a.ds-stat:hover{border-color:#c7d2fe;box-shadow:0 10px 26px -14px rgba(79,70,229,.45);transform:translateY(-1px)}
.ds-stat.on{border-color:#a5b4fc;box-shadow:0 0 0 3px #e0e7ff}
.ds-ico{width:2.3rem;height:2.3rem;border-radius:.7rem;display:grid;place-items:center;margin-bottom:.35rem;background:#eef2ff;color:#4338ca}
.ds-ico .ic{width:1.15rem;height:1.15rem}
.ds-stat small{font-size:.76rem;font-weight:600;color:var(--ds-mut)}
.ds-stat b{font-size:1.7rem;line-height:1.1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ds-ink)}
.ds-stat em{font-style:normal;font-size:.76rem;color:var(--ds-mut)}
.ds-stat.ok .ds-ico{background:#d1fae5;color:#047857}.ds-stat.bad .ds-ico{background:#ffe4e6;color:#be123c}.ds-stat.bad b{color:#be123c}
.ds-stat.warn .ds-ico{background:#fef3c7;color:#b45309}.ds-stat.vio .ds-ico{background:#ede9fe;color:#6d28d9}.ds-stat.gold .ds-ico{background:#fef3c7;color:#b45309}
.ds-stat.ok b{color:#047857}
/* Tarjeta / barra */
.ds-card{background:#fff;border:1px solid var(--ds-line);border-radius:1rem;overflow:hidden}
.ds-card-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--ds-soft)}
.ds-card-h h2{margin:0;font-size:.98rem;font-weight:650}.ds-card-h p{margin:0;font-size:.78rem;color:var(--ds-mut)}
.ds-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--ds-soft);background:#fbfcfe}
.ds-bar label{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;font-weight:600;color:var(--ds-mut);min-width:0}
.ds-bar .field{padding:.5rem .7rem;font-size:.86rem}
.ds-bar .grow{flex:1 1 14rem}
.ds-search{position:relative}.ds-search .ic{position:absolute;left:.7rem;bottom:.62rem;width:1rem;height:1rem;color:#94a3b8}.ds-search .field{padding-left:2.1rem}
.ds-seg{display:inline-flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;background:var(--ds-soft);border-radius:.8rem}
.ds-seg a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:.6rem;font-size:.83rem;font-weight:600;color:var(--ds-mut);text-decoration:none}
.ds-seg a b{font-size:.72rem;padding:.05rem .4rem;border-radius:999px;background:#e2e8f0;color:#475569}
.ds-seg a:hover{color:#334155}.ds-seg a.on{background:#fff;color:#3730a3;box-shadow:0 1px 3px rgba(15,23,42,.12)}.ds-seg a.on b{background:#e0e7ff;color:#3730a3}
/* Píldoras y avatares */
.ds-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .6rem;border-radius:999px;font-size:.72rem;font-weight:650;background:var(--ds-soft);color:#475569;white-space:nowrap}
.ds-pill::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.7}
.ds-pill.ok{background:#d1fae5;color:#047857}.ds-pill.bad{background:#ffe4e6;color:#be123c}.ds-pill.warn{background:#fef3c7;color:#b45309}.ds-pill.info{background:#e0e7ff;color:#3730a3}.ds-pill.gold{background:#fef3c7;color:#92400e}.ds-pill.vio{background:#ede9fe;color:#6d28d9}
.ds-av{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-size:.76rem;font-weight:700;flex:none;color:#fff}
.ds-av.a0{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.ds-av.a1{background:linear-gradient(135deg,#0ea5e9,#6366f1)}.ds-av.a2{background:linear-gradient(135deg,#10b981,#0ea5e9)}.ds-av.a3{background:linear-gradient(135deg,#f59e0b,#ef4444)}.ds-av.a4{background:linear-gradient(135deg,#ec4899,#8b5cf6)}.ds-av.a5{background:linear-gradient(135deg,#14b8a6,#22c55e)}.ds-av.anon{background:#e2e8f0;color:#64748b}
.ds-who{display:flex;align-items:center;gap:.7rem;min-width:0}.ds-who b{display:block;font-weight:650;color:var(--ds-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-who small{display:block;font-size:.76rem;color:var(--ds-mut);font-variant-numeric:tabular-nums}
.ds-dir{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:.45rem;background:#eef2ff;color:#4338ca;margin-right:.45rem;vertical-align:middle}.ds-dir .ic{width:.85rem;height:.85rem}.ds-dir.out{background:#ecfeff;color:#0e7490}
/* Tabla de datos */
.ds-card .rt-wrap{border:0;border-radius:0}
.ds-card .rt thead th{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;background:#fbfcfe;border-bottom:1px solid var(--ds-soft)}
.ds-card .rt tbody tr{border-bottom:1px solid var(--ds-soft)}
.ds-card .rt tbody tr:last-child{border-bottom:0}
.ds-card .rt tbody td{vertical-align:middle}
/* Alertas */
.ds-alerts{display:grid;gap:.7rem;padding:.9rem}
.ds-al{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.9rem 1rem;border:1px solid var(--ds-line);border-left-width:4px;border-radius:.85rem;background:#fff}
.ds-al.critical{border-left-color:#e11d48;background:linear-gradient(90deg,#fff1f2 0,#fff 14rem)}.ds-al.warning{border-left-color:#f59e0b;background:linear-gradient(90deg,#fffbeb 0,#fff 14rem)}.ds-al.info{border-left-color:#6366f1}
.ds-al.done{opacity:.6;background:#fafafa}
.ds-al .ico{width:2.4rem;height:2.4rem;border-radius:.75rem;display:grid;place-items:center;background:#ffe4e6;color:#be123c}.ds-al.warning .ico{background:#fef3c7;color:#b45309}.ds-al.info .ico{background:#e0e7ff;color:#3730a3}.ds-al.done .ico{background:#d1fae5;color:#047857}
.ds-al .ico .ic{width:1.2rem;height:1.2rem}
.ds-al h3{margin:0;font-size:.95rem;font-weight:650;color:var(--ds-ink)}.ds-al p{margin:.15rem 0 0;font-size:.84rem;color:#475569}.ds-al .meta{margin-top:.3rem;font-size:.74rem;color:#94a3b8;display:flex;flex-wrap:wrap;gap:.3rem .8rem}.ds-al .meta a{color:var(--ds-acc);font-weight:600;text-decoration:none}
.ds-al time{display:block;text-align:right;font-size:.74rem;color:#94a3b8;margin-bottom:.35rem;font-variant-numeric:tabular-nums}
.ds-empty{margin:0;padding:3rem 1.4rem;text-align:center;color:#94a3b8;font-size:.9rem}
.ds-empty .ic{width:2rem;height:2rem;display:block;margin:0 auto .5rem;color:#a5b4fc}
@media(max-width:640px){.ds-al{grid-template-columns:auto 1fr}.ds-al>div:last-child{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.ds-al time{margin:0}.ds-head h1{font-size:1.4rem}}
/* Clientes */
.ds-cl{display:grid;grid-template-columns:minmax(14rem,2.2fr) .9fr .6fr 1fr 1fr .9fr 1fr;gap:.8rem;align-items:center;padding:.8rem 1.1rem;text-decoration:none;color:inherit;border-bottom:1px solid var(--ds-soft);transition:background .12s}
a.ds-cl:hover{background:#f8faff}.ds-cl:last-child{border-bottom:0}
.ds-cl.th{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;background:#fbfcfe;padding-block:.6rem;font-weight:600}
.ds-cl .n{text-align:right;font-variant-numeric:tabular-nums}.ds-cl small.l{display:none}
.ds-cl .lost{color:#be123c;font-size:.76rem}
@container (max-width:60rem){
 .ds-cl{grid-template-columns:1fr 1fr 1fr;gap:.5rem .9rem;padding:.9rem 1rem}.ds-cl.th{display:none}
 .ds-cl>:first-child{grid-column:1/-1}.ds-cl .n{text-align:left}.ds-cl small.l{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;font-weight:600}
}
.ds-cw{container-type:inline-size}
.ds-head>div:first-child{flex:1 1 24rem;min-width:0}.ds-head .ds-act{flex:none}

/* ── Look "tablero" (sin tarjetas redondas estilo AdminLTE): franja continua, líneas finas, acento superior ── */
.ds-stats{gap:0;background:#fff;border:1px solid var(--ds-line);border-radius:.6rem;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));box-shadow:0 1px 0 rgba(15,23,42,.03)}
.ds-stat{border:0;border-radius:0;background:transparent;padding:.95rem 1.2rem 1rem;border-right:1px solid var(--ds-soft);border-bottom:1px solid var(--ds-soft);margin:0 -1px -1px 0;gap:.15rem;transform:none!important}
.ds-stat::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--ac,#6366f1);opacity:.9}
.ds-stat.ok{--ac:#10b981}.ds-stat.bad{--ac:#f43f5e}.ds-stat.warn{--ac:#f59e0b}.ds-stat.vio{--ac:#8b5cf6}.ds-stat.gold{--ac:#f59e0b}
a.ds-stat:hover{background:#f8faff;box-shadow:none}
.ds-stat.on{box-shadow:inset 0 0 0 2px #a5b4fc;border-color:var(--ds-soft);background:#f5f7ff}
.ds-ico{width:auto;height:auto;background:none!important;border-radius:0;display:inline-flex;margin:0 0 .15rem;order:-1;place-items:initial}
.ds-ico .ic{width:1rem;height:1rem;color:var(--ac,#6366f1)}
.ds-stat small{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#94a3b8}
.ds-stat b{font-size:1.9rem;font-weight:700}
.ds-stat .ds-ico{position:absolute;right:1rem;top:1.1rem;opacity:.9}
.ds-stat.ok .ds-ico .ic{color:#10b981}.ds-stat.bad .ds-ico .ic{color:#f43f5e}.ds-stat.warn .ds-ico .ic,.ds-stat.gold .ds-ico .ic{color:#f59e0b}.ds-stat.vio .ds-ico .ic{color:#8b5cf6}
/* Contenedores con esquina corta y borde fino */
.ds-card,.ds-al{border-radius:.6rem}
.ds-card{box-shadow:0 1px 0 rgba(15,23,42,.03)}
.ds-btn{border-radius:.5rem}
.ds-seg{border-radius:.55rem}.ds-seg a{border-radius:.4rem}
.ds-pill{border-radius:.35rem;padding:.15rem .5rem}
.ds-av{border-radius:.55rem}
.ds-dir{border-radius:.35rem}
.ds-al .ico{border-radius:.5rem}

/* ── Corrección UX: lista de llamadas ── */
/* Franja de indicadores neutra: solo el activo o con hover marca color; cifras compactas */
.ds-stat::before{height:2px;opacity:0;transition:.15s}.ds-stat.on::before,a.ds-stat:hover::before{opacity:1}
.ds-stat{padding:.8rem 1.1rem .85rem}.ds-stat b{font-size:1.65rem}.ds-stat .ds-ico{top:.95rem}
/* Tabla de datos */
table.dl{table-layout:auto}
table.dl th,table.dl td{padding:.55rem .9rem;text-align:left;vertical-align:middle}
table.dl th.r,table.dl td.r{text-align:right}
table.dl td{font-size:.875rem;color:#334155}
table.dl .tn{font-variant-numeric:tabular-nums}
table.dl td.nw{white-space:nowrap}
table.dl td .sub{display:block;font-size:.72rem;color:#94a3b8;line-height:1.2;margin-top:.05rem}
table.dl td.nw .sub{display:inline;margin-left:.45rem}
table.dl td.nw b{font-weight:600;color:#0f172a}
table.dl .hot{color:#be123c;font-weight:650}
table.dl .nil{color:#cbd5e1}
table.dl .acts{display:flex;gap:.4rem;justify-content:flex-end;align-items:center;flex-wrap:wrap}
table.dl tbody tr{height:3.2rem}
table.dl a b{color:#0f172a}table.dl a:hover b{color:#4338ca}
/* Chips de filtro y pie */
.ds-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-bottom:1px solid var(--ds-soft);font-size:.78rem;color:#64748b}
.ds-fchip{padding:.15rem .55rem;border-radius:.35rem;background:#eef2ff;color:#3730a3;font-weight:600;text-decoration:none}.ds-fchip:hover{background:#e0e7ff}
.ds-fclear{margin-left:.3rem;color:#be123c;font-weight:600;text-decoration:none}
.ds-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem 1.1rem;border-top:1px solid var(--ds-soft);font-size:.8rem;color:#64748b}
.ds-foot nav>div:first-child{display:none}
.ds-foot nav svg{width:1rem;height:1rem}
.ds-foot p{display:none}
@container (max-width:56rem){
  table.dl tbody tr{height:auto}
  table.dl td.nw .sub{display:block;margin-left:0}
  table.dl .acts{justify-content:flex-start}
  table.dl td[data-l="Acciones"]:empty,table.dl td .acts:empty{display:none}
  table.dl td[data-l="Fecha y hora"]{grid-column:1/-1;display:flex;align-items:center;gap:.5rem}
  table.dl td[data-l="Fecha y hora"]::before{display:none}
  table.dl td[data-l="Cliente"]{grid-column:1/-1}
  table.dl td[data-l="Cliente"]::before{display:none}
  table.dl td[data-l="Acciones"]{grid-column:1/-1}
  table.dl td[data-l="Acciones"]::before{display:none}
}
@media(max-width:640px){.ds-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-stat b{font-size:1.4rem}.ds-seg{width:100%}.ds-seg a{flex:1;justify-content:center}}