/* CRM Embalados — Estilos principales */
:root {
    --verde-osc: #1B5E20;
    --verde-med: #2E7D32;
    --verde-cla: #C8E6C9;
    --verde-btn: #388E3C;
    --naranja:   #E65100;
    --naranja-cl:#FFF3E0;
    --amarillo:  #F9A825;
    --amar-cl:   #FFF9C4;
    --gris-bg:   #F4F6F8;
    --gris-cla:  #ECEFF1;
    --gris-med:  #90A4AE;
    --gris-osc:  #37474F;
    --blanco:    #FFFFFF;
    --rojo:      #C62828;
    --rojo-cl:   #FFCDD2;
    --azul:      #1565C0;
    --azul-cl:   #E3F2FD;
    --sombra:    0 2px 12px rgba(0,0,0,0.10);
    --sombra-lg: 0 4px 24px rgba(0,0,0,0.13);
    --radius:    10px;
    --radius-lg: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: var(--gris-bg);
    color: var(--gris-osc);
    font-size: 14px;
    min-height: 100vh;
}

/* ---- TOPBAR ---- */
.topbar {
    background: var(--verde-osc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 58px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sombra);
}
.topbar-logo { font-size: 18px; font-weight: 700; letter-spacing: .5px; display:flex; align-items:center; gap:10px; }
.topbar-logo span { background: var(--verde-btn); border-radius: 8px; padding: 4px 10px; font-size:13px; }
.topbar-nav { display: flex; gap: 6px; align-items: center; }
.topbar-nav a {
    color: rgba(255,255,255,.80);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s;
}
.topbar-nav a:hover, .topbar-nav a.active { background: rgba(255,255,255,.15); color:#fff; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.notif-btn { position:relative; cursor:pointer; background:none; border:none; color:#fff; font-size:20px; padding:4px; }
.notif-badge { position:absolute; top:-2px; right:-2px; background:var(--naranja); color:#fff; border-radius:50%; font-size:10px; width:16px; height:16px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.user-chip { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border-radius:20px; padding:5px 12px 5px 8px; font-size:13px; }
.user-avatar { width:28px; height:28px; background:var(--verde-btn); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }

/* ---- LAYOUT ---- */
.page { max-width: 1400px; margin: 0 auto; padding: 28px 24px; }
.page-title { font-size: 22px; font-weight: 700; color: var(--verde-osc); margin-bottom: 22px; display:flex; align-items:center; gap:10px; }

/* ---- CARDS MÉTRICAS ---- */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.metric-card {
    background: var(--blanco);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--sombra);
    border-left: 4px solid var(--verde-med);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.metric-card.naranja { border-color: var(--naranja); }
.metric-card.azul    { border-color: var(--azul); }
.metric-card.rojo    { border-color: var(--rojo); }
.metric-card.amarillo{ border-color: var(--amarillo); }
.metric-label { font-size: 11px; font-weight: 600; color: var(--gris-med); text-transform: uppercase; letter-spacing: .5px; }
.metric-value { font-size: 28px; font-weight: 700; color: var(--gris-osc); line-height: 1; }
.metric-sub   { font-size: 12px; color: var(--gris-med); }

/* ---- TABLA ---- */
.card { background: var(--blanco); border-radius: var(--radius-lg); box-shadow: var(--sombra); overflow: hidden; margin-bottom: 24px; }
.card-header { padding: 18px 22px; border-bottom: 1px solid var(--gris-cla); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.card-title { font-size: 15px; font-weight: 700; color: var(--verde-osc); }
.card-body { padding: 0; }

.tabla-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
    background: var(--verde-osc);
    color: #fff;
    padding: 11px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--gris-cla); transition: background .12s; }
tbody tr:hover { background: var(--gris-bg); }
tbody td { padding: 10px 14px; vertical-align: middle; }

/* ---- BADGES ---- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-sin-contactar { background:#EEEEEE; color:#616161; }
.badge-contactado    { background:var(--azul-cl); color:var(--azul); }
.badge-no-contesta   { background:var(--rojo-cl); color:var(--rojo); }
.badge-con-interes   { background:var(--amar-cl); color:var(--amarillo); }
.badge-pedido-tomado { background:var(--verde-cla); color:var(--verde-osc); }
.badge-sin-interes   { background:#EFEBE9; color:#4E342E; }
.badge-reagendar     { background:#F3E5F5; color:#6A1B9A; }

.badge-perfil-a { background:#E3F2FD; color:#0D47A1; }
.badge-perfil-b { background:#F3E5F5; color:#4A148C; }
.badge-perfil-c { background:#E8F5E9; color:#1B5E20; }
.badge-perfil-d { background:#FFF3E0; color:#E65100; }
.badge-perfil-e { background:#EFEBE9; color:#4E342E; }

/* ---- BOTONES ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all .15s;
}
.btn-primary  { background: var(--verde-btn); color: #fff; }
.btn-primary:hover { background: var(--verde-osc); }
.btn-naranja  { background: var(--naranja); color: #fff; }
.btn-naranja:hover { background: #BF360C; }
.btn-gris     { background: var(--gris-cla); color: var(--gris-osc); }
.btn-gris:hover { background: #CFD8DC; }
.btn-sm       { padding: 5px 12px; font-size: 12px; }
.btn-icon     { padding: 6px 10px; }

/* ---- FORMULARIOS ---- */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--gris-osc); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; }
.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #CFD8DC;
    border-radius: 8px;
    font-size: 13px;
    color: var(--gris-osc);
    background: var(--blanco);
    transition: border .15s, box-shadow .15s;
    font-family: inherit;
}
.form-control:focus { outline: none; border-color: var(--verde-btn); box-shadow: 0 0 0 3px rgba(56,142,60,.15); }
textarea.form-control { min-height: 90px; resize: vertical; }
select.form-control { cursor: pointer; }

/* ---- MODAL ---- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--blanco);
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp .2s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--gris-cla);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--verde-osc); }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--gris-med); line-height:1; }
.modal-body   { padding: 20px 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--gris-cla); display:flex; gap:10px; justify-content:flex-end; }

/* ---- SEARCH & FILTROS ---- */
.filters-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.search-input { position:relative; }
.search-input input { padding-left: 36px; width: 260px; }
.search-input .icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--gris-med); font-size:15px; }

/* ---- FUNNEL BAR ---- */
.funnel-bar { display:flex; height: 24px; border-radius: 6px; overflow: hidden; width: 100%; }
.funnel-seg { height: 100%; transition: width .3s; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; min-width: 0; overflow:hidden; }

/* ---- NOTIFICACIONES DROPDOWN ---- */
.notif-dropdown {
    display: none;
    position: absolute;
    top: 50px;
    right: 24px;
    background: var(--blanco);
    border-radius: var(--radius);
    box-shadow: var(--sombra-lg);
    width: 320px;
    z-index: 200;
    max-height: 400px;
    overflow-y: auto;
}
.notif-dropdown.open { display: block; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--gris-cla); font-size: 13px; }
.notif-item:last-child { border: none; }
.notif-time { font-size: 11px; color: var(--gris-med); margin-top: 4px; }
.notif-header-dd { padding: 12px 16px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--gris-cla); color: var(--verde-osc); }

/* ---- PROGRESO ---- */
.progress-bar { background: var(--gris-cla); border-radius: 20px; height: 8px; overflow: hidden; }
.progress-fill { background: var(--verde-btn); height: 100%; border-radius: 20px; transition: width .3s; }

/* ---- LOGIN ---- */
.login-page { min-height: 100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--verde-osc) 0%, #2E7D32 100%); }
.login-card { background: var(--blanco); border-radius: var(--radius-lg); box-shadow: var(--sombra-lg); padding: 44px 40px; width: 100%; max-width: 400px; }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo h1 { font-size: 26px; font-weight: 800; color: var(--verde-osc); }
.login-logo p  { font-size: 13px; color: var(--gris-med); margin-top: 4px; }
.login-divider { width: 50px; height: 4px; background: var(--verde-btn); border-radius: 2px; margin: 12px auto; }

/* ---- TABS ---- */
.tabs { display:flex; gap: 4px; border-bottom: 2px solid var(--gris-cla); margin-bottom: 24px; }
.tab-btn { padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--gris-med); background: none; border: none; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tab-btn.active { color: var(--verde-osc); border-color: var(--verde-btn); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---- ALERT ---- */
.alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert-success { background: var(--verde-cla); color: var(--verde-osc); }
.alert-error   { background: var(--rojo-cl); color: var(--rojo); }
.alert-warning { background: var(--amar-cl); color: var(--amarillo); }

/* ---- TIMELINE gestiones ---- */
.timeline { padding: 0 4px; }
.timeline-item { display:flex; gap: 14px; padding-bottom: 20px; position:relative; }
.timeline-item::before { content:''; position:absolute; left:17px; top:34px; bottom:0; width:2px; background:var(--gris-cla); }
.timeline-item:last-child::before { display:none; }
.timeline-dot { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; background:var(--verde-cla); }
.timeline-body { flex:1; background:var(--gris-bg); border-radius:8px; padding:12px 14px; }
.timeline-meta { font-size:11px; color:var(--gris-med); margin-bottom:4px; display:flex; gap:10px; flex-wrap:wrap; }
.timeline-nota { font-size:13px; color:var(--gris-osc); }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .topbar { padding: 0 14px; }
    .topbar-nav { display: none; }
    .page { padding: 16px 12px; }
    .metrics-grid { grid-template-columns: 1fr 1fr; }
    .search-input input { width: 100%; }
    .filters-bar { flex-direction: column; align-items: stretch; }
    .modal { max-width: 100%; }
}

/* ---- UTILS ---- */
.text-verde  { color: var(--verde-osc); }
.text-naranja{ color: var(--naranja); }
.text-gris   { color: var(--gris-med); }
.text-rojo   { color: var(--rojo); }
.fw-700      { font-weight: 700; }
.mt-16       { margin-top: 16px; }
.mt-24       { margin-top: 24px; }
.text-right  { text-align: right; }
.flex        { display: flex; }
.flex-center { display:flex; align-items:center; gap:8px; }
.gap-8       { gap: 8px; }
.w-100       { width: 100%; }