/* Mi CRM – Frontend v1.2.0 */

.mi-crm-wrap { width:100%; box-sizing:border-box; }

/* ── Contadores ── */
.mi-crm-summary { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.mi-crm-sum-item {
    flex:1 1 80px; min-width:70px; border:1.5px solid #e9ecef;
    border-radius:12px; padding:13px 10px; text-align:center;
    transition:transform .15s;
}
.mi-crm-sum-item:hover { transform:translateY(-2px); }
.mi-crm-sum-item[data-estado="progreso"]  { background:#f0fdf4; border-color:#bbf7d0; }
.mi-crm-sum-item[data-estado="pausado"]   { background:#fffbeb; border-color:#fde68a; }
.mi-crm-sum-item[data-estado="terminado"] { background:#eef2ff; border-color:#c7d2fe; }
.mi-crm-sum-total { background:#f8fafc; border-color:#e2e8f0; }
.mi-crm-sum-num { display:block; font-size:26px; font-weight:800; color:#1e293b; line-height:1; }
.mi-crm-sum-lbl { display:block; font-size:11px; font-weight:600; color:#64748b; margin-top:4px; text-transform:uppercase; letter-spacing:.4px; }

/* ── Grid tarjetas ── */
.mi-crm-grid { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:24px; }

.mi-crm-bubble {
    flex:1 1 200px; max-width:300px;
    border:1.5px solid #e2e8f0; border-radius:16px;
    padding:16px 18px 14px; box-sizing:border-box;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    transition:transform .2s, box-shadow .2s;
    position:relative; overflow:hidden;
}
.mi-crm-bubble::before {
    content:''; position:absolute; top:-20px; right:-20px;
    width:70px; height:70px; border-radius:50%; opacity:.13; pointer-events:none;
}
.mi-crm-bubble[data-estado="progreso"]::before  { background:#16a34a; }
.mi-crm-bubble[data-estado="pausado"]::before   { background:#d97706; }
.mi-crm-bubble[data-estado="terminado"]::before { background:#4f46e5; }
.mi-crm-bubble:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.1); }

.mi-crm-bubble-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
.mi-crm-bicon { font-size:20px; flex-shrink:0; }

.mi-crm-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; padding:3px 9px;
    border-radius:99px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap;
}
.mi-crm-dot {
    width:6px; height:6px; border-radius:50%; display:inline-block; flex-shrink:0;
}
.mi-crm-bubble[data-estado="progreso"]  .mi-crm-dot { animation:crm-pulse 2s infinite; }
.mi-crm-bubble[data-estado="pausado"]   .mi-crm-dot { animation:crm-blink 3s infinite; }
.mi-crm-bubble[data-estado="terminado"] .mi-crm-dot { animation:none; opacity:.7; }

@keyframes crm-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.25;transform:scale(.65)} }
@keyframes crm-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

.mi-crm-nombre { font-size:15px; font-weight:700; color:#0f172a; margin:0 0 10px; line-height:1.4; }
.mi-crm-meta   { display:flex; justify-content:space-between; gap:6px; margin:0; font-size:12px; color:#94a3b8; flex-wrap:wrap; }

/* ── Acordeón ── */
.mi-crm-acordeon {
    border:1.5px solid #e2e8f0; border-radius:14px;
    overflow:hidden; box-shadow:0 1px 5px rgba(0,0,0,.05);
}

.mi-crm-acordeon-btn {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; background:#f8fafc; border:none; cursor:pointer;
    font-size:14px; font-weight:700; color:#334155;
    text-align:left; transition:background .15s;
}
.mi-crm-acordeon-btn:hover { background:#f1f5f9; }

.mi-crm-acordeon-label { display:flex; align-items:center; gap:8px; }

.mi-crm-acordeon-count {
    font-size:12px; font-weight:600; color:#64748b;
    background:#e2e8f0; padding:2px 8px; border-radius:99px;
}

.mi-crm-acordeon-arrow {
    font-size:11px; color:#94a3b8;
    transition:transform .3s ease; display:inline-block;
}

/* Animación del cuerpo */
.mi-crm-acordeon-body {
    transition:max-height .3s ease, opacity .3s ease;
    overflow:hidden;
}
.mi-crm-acordeon-body[hidden] { display:block !important; } /* Override para poder animar */

/* ── Tabla de registro ── */
.mi-crm-reg-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.mi-crm-reg-tabla {
    width:100%; border-collapse:collapse;
    min-width:380px; font-size:14px;
}
.mi-crm-reg-tabla thead tr { background:#f8fafc; }
.mi-crm-reg-tabla th {
    padding:10px 14px; text-align:left;
    font-size:11px; font-weight:700; color:#94a3b8;
    text-transform:uppercase; letter-spacing:.5px;
    border-bottom:1px solid #e2e8f0; white-space:nowrap;
}
.mi-crm-reg-tabla td {
    padding:11px 14px; border-bottom:1px solid #f1f5f9;
    color:#334155; vertical-align:middle;
}
.mi-crm-reg-tabla tbody tr:last-child td { border-bottom:none; }
.mi-crm-reg-tabla tbody tr:hover { background:#f8fafc; }

.mi-crm-rnum   { color:#cbd5e1; font-size:12px; width:36px; }
.mi-crm-rnom   { font-weight:600; color:#0f172a; }
.mi-crm-rfecha { white-space:nowrap; color:#94a3b8; font-size:13px; }

.mi-crm-rbadge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; padding:3px 8px;
    border-radius:99px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap;
}
.mi-crm-rdot { width:5px; height:5px; border-radius:50%; display:inline-block; flex-shrink:0; }

.mi-crm-vacio { color:#94a3b8; font-style:italic; padding:8px 0; }

/* ══ RESPONSIVE ══ */
@media (max-width:768px) {
    .mi-crm-bubble { flex:1 1 calc(50% - 7px); max-width:calc(50% - 7px); }
}
@media (max-width:520px) {
    .mi-crm-bubble     { flex:1 1 100%; max-width:100%; }
    .mi-crm-sum-item   { flex:1 1 calc(50% - 5px); min-width:calc(50% - 5px); padding:11px 8px; }
    .mi-crm-sum-num    { font-size:22px; }
    .mi-crm-acordeon-btn { padding:12px 14px; font-size:13px; }
    .mi-crm-reg-tabla td,
    .mi-crm-reg-tabla th { padding:9px 10px; }
}
@media (max-width:360px) {
    .mi-crm-bubble  { padding:13px 14px 11px; }
    .mi-crm-nombre  { font-size:14px; }
    .mi-crm-badge   { font-size:10px; padding:3px 7px; }
    .mi-crm-summary { gap:7px; }
}