:root {
    --primary: #1e293b;
    --secondary: #334155;
    --accent: #0ea5e9;
    --accent-hover: #0284c7;
    --accent-light: #e0f2fe;
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #0f172a;
    --text-light: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* Header */
.header {
    background-color: var(--primary);
    color: #ffffff;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header h1 span {
    color: var(--accent);
}

.nav-links {
    display: flex;
    gap: 1rem;
}

.nav-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.nav-links a:hover {
    background-color: var(--secondary);
    color: #fff;
}

.nav-links a.active {
    background-color: var(--accent);
    color: #fff;
}

/* Contenedores */
.container {
    margin: 0 auto;
    padding: 1.5rem;
}

/* Filtros */
.filters-card {
    background-color: var(--card);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid var(--border);
}

.filters-card label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group select,
.search-box input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
}

.filter-group select:focus,
.search-box input:focus {
    border-color: var(--accent);
}

.btn-filter {
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 600;
}

.search-box {
    flex: 1;
    min-width: 250px;
}

.search-box input {
    width: 100%;
}

/* Tabla Principal */
.table-card {
    background-color: var(--card);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

thead {
    background-color: var(--bg);
    border-bottom: 2px solid var(--border);
}

thead th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
}

tbody tr {
    border-bottom: 1px solid var(--border);
}

tbody tr:hover {
    background-color: var(--accent-light);
}

tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    font-size: 0.85rem;
}

.stacked-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.primary-text {
    font-weight: 600;
    color: var(--text);
}

.secondary-text {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Badges y Botones */
.badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.badge-info {
    background-color: #e0f2fe;
    color: #0369a1;
}

.badge-neutral {
    background-color: #f1f5f9;
    color: #475569;
}

.badge-warning { background-color: #fef3c7; color: #92400e; }
.badge-success { background-color: #d1fae5; color: #065f46; }
.badge-danger { background-color: #fee2e2; color: #991b1b; }

.btn-gestionar {
    background-color: var(--accent);
    color: #ffffff;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-gestionar:hover {
    background-color: var(--accent-hover);
}

.select-estado {
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    background-color: #fff;
}

.select-estado:focus {
    border-color: var(--accent);
}

.select-estado.estado-pendiente { border-left: 4px solid var(--warning); }
.select-estado.estado-visitado { border-left: 4px solid var(--success); }
.select-estado.estado-novisitado { border-left: 4px solid var(--danger); }

/* Paginación y Estados Vacíos */
.pagination-bar, .pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 1rem;
    background-color: #ffffff;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.font-mono {
    font-family: monospace;
}

.empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--text-light);
}

/* Estilos Internos para SweetAlert2 Modal */
.swal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: left;
    margin-top: 15px;
}

.swal-form-group {
    margin-bottom: 12px;
}

.swal-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 5px;
    color: var(--text-light);
}

.swal-form-control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
}

.swal-form-control:focus {
    border-color: var(--accent);
}

.swal-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-top: 10px;
}

.swal-history-table th,
.swal-history-table td {
    border: 1px solid var(--border);
    padding: 6px;
    text-align: left;
}

.swal-history-table th {
    background-color: var(--bg);
    color: var(--text-light);
}

@media (max-width: 768px) {
    .swal-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LISTADO DE GESTIONES
   ═══════════════════════════════════════════════════════════════ */

/* Página */
.gest-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gest-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gest-page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gest-info-icon {
    font-size: 0.95rem;
    color: var(--text-light);
    cursor: help;
}

/* ── Tarjetas resumen ── */
.gest-summary-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gest-summary-card {
    flex: 1;
    min-width: 150px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-top: 4px solid transparent;
}

.gest-summary-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.gest-summary-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gest-summary-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.gest-summary-count {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
}

.gest-summary-link {
    font-size: 0.72rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.gest-summary-link:hover { text-decoration: underline; }

.gest-summary-alta   { border-top-color: #ef4444; }
.gest-summary-media  { border-top-color: #f59e0b; }
.gest-summary-sin    { border-top-color: #3b82f6; }
.gest-summary-renov  { border-top-color: #10b981; }
.gest-summary-norenov{ border-top-color: #94a3b8; }

/* ── Layout principal ── */
.gest-main-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* ── Panel de filtros ── */
.gest-filters-panel {
    width: 230px;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem;
}

.gest-filters-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.gest-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.9rem;
}

.gest-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.gest-filter-group select,
.gest-filter-group input[type="date"] {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text);
    background: #fff;
    outline: none;
    width: 100%;
}

.gest-filter-group select:focus,
.gest-filter-group input:focus {
    border-color: var(--accent);
}

.gest-btn-filtrar {
    width: 100%;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0.55rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.25rem;
}

.gest-btn-filtrar:hover { background: var(--secondary); }

.gest-limpiar-link {
    display: block;
    text-align: center;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
}

.gest-limpiar-link:hover { text-decoration: underline; }

/* ── Área tabla ── */
.gest-table-area {
    flex: 1;
    min-width: 0;
}

/* ── Tabla ── */
.gest-table th,
.gest-table td {
    white-space: nowrap;
}

.gest-th {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    line-height: 1.3;
}

.gest-td {
    font-size: 0.82rem;
    vertical-align: middle;
}

/* Badges de paso (números circulares) */
.gest-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.gest-step-sm {
    width: 15px;
    height: 15px;
    font-size: 0.58rem;
    margin-right: 3px;
}

/* ── Badges de prioridad ── */
.gest-priority {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0.25rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.gest-priority-alta    { background: #fee2e2; color: #b91c1c; }
.gest-priority-media   { background: #fef3c7; color: #92400e; }
.gest-priority-baja    { background: #dbeafe; color: #1d4ed8; }
.gest-priority-renovado{ background: #d1fae5; color: #065f46; }
.gest-priority-cerrado { background: #f1f5f9; color: #334155; }

/* ── Tipo atención ── */
.gest-tipo {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-light);
}

.gest-tipo-llamada   { color: #0369a1; }
.gest-tipo-whatsapp  { color: #15803d; }
.gest-tipo-visita    { color: #7c3aed; }

/* ── Próxima acción ── */
.gest-proxaccion {
    font-size: 0.78rem;
    color: var(--text);
    cursor: help;
}

/* ── Fecha compromiso ── */
.gest-fecha-vencida { color: #ef4444; font-weight: 600; font-size: 0.82rem; }
.gest-fecha-ok      { color: var(--text); font-size: 0.82rem; }

/* ── Días ── */
.gest-dias {
    display: inline-block;
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 24px;
    text-align: center;
}

.gest-dias-rojo   { color: #ef4444; }
.gest-dias-naranja{ color: #f59e0b; }
.gest-dias-normal { color: var(--text); }

/* ── Acciones ── */
.gest-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.gest-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    color: var(--text-light);
}

.gest-action-btn:hover { background: var(--bg); border-color: #cbd5e1; }

.gest-action-call  { color: #0369a1; border-color: #bae6fd; background: #f0f9ff; }
.gest-action-call:hover { background: #e0f2fe; }

.gest-action-view  { color: #6d28d9; border-color: #ddd6fe; background: #faf5ff; }
.gest-action-view:hover { background: #ede9fe; }

.gest-action-more  { color: var(--text-light); }

.gest-action-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #f8fafc;
    color: #cbd5e1;
    cursor: not-allowed;
}

/* ── Dropdown ── */
.gest-dropdown-wrap {
    position: relative;
}

.gest-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 50;
    min-width: 170px;
    overflow: hidden;
}

.gest-dropdown.open { display: block; }

.gest-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.55rem 1rem;
    text-align: left;
    font-size: 0.82rem;
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s;
}

.gest-dropdown-item:hover { background: var(--bg); }

/* ── Paginación ── */
.gest-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.5rem;
    background: #fff;
}

.gest-pagination-info {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* ── Panel guía ── */
.gest-guide-panel {
    width: 190px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gest-guide-block {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
}

.gest-guide-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.gest-guide-text {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.45;
}

.gest-guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gest-guide-list li {
    font-size: 0.72rem;
    color: var(--text-light);
    line-height: 1.4;
}

/* ── Leyendas inferiores ── */
.gest-legends {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.gest-legend-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.gest-legend-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
}

.gest-legend-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.gest-legend-list li {
    font-size: 0.78rem;
    color: var(--text);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gest-legend-count {
    font-weight: 700;
    font-size: 0.85rem;
    color: #1e293b;
    min-width: 22px;
    text-align: right;
}

.gest-legend-desc {
    color: #64748b;
    font-size: 0.74rem;
}

.badge-secondary {
    background: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* ── Nota al pie ── */
.gest-footnote {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: #1e40af;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL DE GESTIÓN (mg-*)
   ═══════════════════════════════════════════════════════════════ */

/* Overlay de fondo */
.mg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
}

/* Contenedor del modal */
.mg-modal {
    width: 150%;
    max-width: 1500px;
    margin: auto;
}

.mg-modal-inner {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Encabezado */
.mg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}

.mg-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.mg-title span {
    color: var(--accent);
}

.mg-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color .15s;
}

.mg-close:hover { color: var(--danger); }

/* Cuerpo en dos columnas */
.mg-body {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 0;
    min-height: 0;
}

/* Columna izquierda */
.mg-col-left {
    border-right: 1px solid var(--border);
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(150vh - 280px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Columna derecha */
.mg-col-right {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(150vh - 280px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Campos del formulario */
.mg-field {
    margin-bottom: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mg-field-sm {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mg-field label,
.mg-field-sm label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.mg-select,
.mg-input {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: #fff;
    outline: none;
    width: 100%;
}

.mg-select:focus,
.mg-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px #e0f2fe;
}

.mg-textarea {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: #fff;
    outline: none;
    width: 100%;
    resize: vertical;
}

.mg-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px #e0f2fe;
}

.mg-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
}

/* Historial de seguimiento (col izq) */
.mg-historial {
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.mg-historial-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

.mg-historial-table-wrap {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.mg-historial-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.mg-historial-table th {
    background: var(--bg);
    padding: 0.4rem 0.55rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    font-size: 0.68rem;
    white-space: nowrap;
}

.mg-historial-table td {
    padding: 0.4rem 0.55rem;
    border-top: 1px solid var(--border);
    vertical-align: middle;
    line-height: 1.35;
}

.mg-ver-mas {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
}

.mg-ver-mas:hover { text-decoration: underline; }

/* Secciones de la columna derecha */
.mg-section {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
}

.mg-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.mg-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

/* Tabla de teléfonos */
.mg-tel-table-wrap {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
}

.mg-tel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.mg-tel-table th {
    background: var(--bg);
    padding: 0.45rem 0.65rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-light);
    font-size: 0.67rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.mg-tel-table td {
    padding: 0.55rem 0.65rem;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

/* Leyenda */
.mg-tel-leyenda {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.mg-tel-leyenda span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-light);
}

.mg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.mg-dot-green  { background: #10b981; }
.mg-dot-yellow { background: #f59e0b; }
.mg-dot-red    { background: #ef4444; }

/* Badges de estado */
.mg-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.mg-badge-green  { background: #d1fae5; color: #065f46; }
.mg-badge-yellow { background: #fef3c7; color: #92400e; }
.mg-badge-red    { background: #fee2e2; color: #991b1b; }
.mg-badge-gray   { background: #f1f5f9; color: #475569; }
.mg-badge-blue   { background: #dbeafe; color: #1d4ed8; }

.mg-estado-green  { background: #d1fae5; color: #065f46; }
.mg-estado-yellow { background: #fef3c7; color: #92400e; }
.mg-estado-red    { background: #fee2e2; color: #991b1b; }
.mg-estado-gray   { background: #f1f5f9; color: #475569; }

/* Badge de prioridad */
.mg-prioridad-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #334155;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Botones de acción sobre teléfonos */
.mg-tel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    color: var(--text-light);
}

.mg-tel-action:hover   { background: var(--bg); }
.mg-tel-wa             { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.mg-tel-wa:hover       { background: #dcfce7; }
.mg-tel-call           { color: #0369a1; border-color: #bae6fd; background: #f0f9ff; }
.mg-tel-call:hover     { background: #e0f2fe; }
.mg-tel-star-on        { color: #f59e0b; border-color: #fde68a; background: #fffbeb; }
.mg-tel-star-off       { color: #cbd5e1; }

/* Formulario agregar número */
.mg-form-agregar {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
}

/* Botones */
.mg-btn-agregar {
    background: #1e293b;
    color: #fff;
    border: none;
    padding: .4rem .85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}

.mg-btn-agregar:hover { background: #334155; }

.mg-btn-sm {
    padding: .4rem .85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background .15s;
}

.mg-btn-primary {
    background: #0ea5e9;
    color: #fff;
}

.mg-btn-primary:hover { background: #0284c7; }

.mg-btn-ghost {
    background: #f1f5f9;
    color: var(--text);
    border: 1px solid var(--border);
}

.mg-btn-ghost:hover { background: #e2e8f0; }

/* Pie del modal */
.mg-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .gest-guide-panel { display: none; }
    .gest-legends { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .gest-main-layout { flex-direction: column; }
    .gest-filters-panel { width: 100%; }
    .gest-summary-card { min-width: 120px; }
    .gest-legends { grid-template-columns: 1fr; }
}