* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, sans-serif; background: #f4f7fb; color: #122033; }
.container { max-width:2000px; margin:0 auto; padding:1.5rem; }
.card { background: #fff; border-radius:28px; box-shadow:0 12px 40px rgba(0,0,0,0.08); overflow:hidden; }
.tabs { display:flex; border-bottom:1px solid #e2e8f0; background:#fff; }
.tab-btn { flex:1; background:none; border:none; padding:1rem; font-weight:600; color:#5d6b82; cursor:pointer; border-bottom:2px solid transparent; }
.tab-btn.active { color:#007bff; border-bottom-color:#007bff; background:#f8fcff; }
.tab-content { padding:1.5rem; }
.filters-bar { display:flex; gap:1rem; margin-bottom:0.75rem; flex-wrap:wrap; align-items:flex-end; }
.filter-group { flex:1; min-width:120px; }
.filter-group label { display:block; font-size:0.8rem; font-weight:600; margin-bottom:0.25rem; color:#2c3e50; }
.filter-group input, .filter-group select { width:100%; padding:0.5rem; border:1px solid #cbd5e1; border-radius:12px; font-size:0.9rem; }
.btn-filter { background:#007bff; color:#fff; border:none; padding:0.5rem 1.2rem; border-radius:30px; font-weight:600; cursor:pointer; height:42px; white-space:nowrap; }
.btn-reset { background:#6c757d; }
.btn-primary { background:#2c7da0; }
.btn-sm { padding:0.3rem 0.8rem; height:34px; font-size:0.85rem; }
.active-filters { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; align-items:center; }
.filter-badge { background:#e9ecef; border-radius:20px; padding:0.3rem 0.8rem; font-size:0.85rem; display:inline-flex; align-items:center; gap:0.5rem; }
.filter-badge .remove-filter { cursor:pointer; font-weight:bold; color:#dc3545; margin-left:0.2rem; }
.filter-badge .remove-filter:hover { color:#a71d2a; }
.view-toggle { display:flex; align-items:center; gap:0.3rem; background:#f1f5f9; border-radius:30px; padding:0.15rem; }
.view-toggle button { background:transparent; border:none; padding:0.3rem 0.8rem; border-radius:30px; font-size:1.2rem; cursor:pointer; transition:background 0.2s; color:#64748b; }
.view-toggle button.active { background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.1); color:#0f172a; }
.default-list { display:flex; flex-direction:column; gap:0.75rem; margin:1rem 0; }
.default-item { background:#fff; border:1px solid #e2edf7; border-radius:20px; padding:1rem; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:flex-start; gap:1rem; cursor:pointer; }
.default-content { flex:1; }
.default-title { font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.default-details { display:flex; flex-wrap:wrap; gap:1rem; margin-top:0.5rem; font-size:0.85rem; color:#2c3e50; }
.default-details span { background:#f1f5f9; padding:0.2rem 0.6rem; border-radius:20px; }
.status-badge { display:inline-block; padding:0.2rem 0.7rem; border-radius:30px; font-size:0.7rem; font-weight:600; }
.status-enabled { background:#d1fae5; color:#065f46; }
.status-disabled { background:#fee2e2; color:#991b1b; }
.default-actions { display:flex; gap:0.5rem; }
.btn-icon { background:none; border:none; font-size:1.3rem; cursor:pointer; padding:0.4rem; border-radius:30px; }
.btn-icon:hover { background:#eef2ff; }
.pagination { display:flex; justify-content:center; gap:0.5rem; margin-top:1rem; }
.page-btn { background:#e2e8f0; border:none; padding:0.4rem 0.8rem; border-radius:8px; cursor:pointer; }
.page-btn.active { background:#007bff; color:#fff; }
.empty-state { text-align:center; padding:2rem; color:#6c757d; }
.toast { position:fixed; bottom:20px; right:20px; padding:10px 20px; border-radius:30px; color:#fff; z-index:2000; font-weight:500; }
.toast.success { background:#2e7d32; }
.toast.error { background:#c62828; }
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-content { background:#fff; padding:20px; border-radius:12px; width:90%; max-width:600px; max-height:90vh; overflow-y:auto; position:relative; }
.close { position:absolute; right:20px; top:10px; font-size:28px; cursor:pointer; }
.modal-buttons { display:flex; justify-content:flex-end; gap:10px; margin-top:15px; }
.btn-save { background:#2c7da0; color:#fff; border:none; padding:8px 16px; border-radius:6px; cursor:pointer; }
.btn-cancel { background:#ccc; border:none; padding:8px 16px; border-radius:6px; cursor:pointer; }
.form-group { display:flex; align-items:center; margin-bottom:10px; }
.form-group label { width:120px; margin-right:10px; text-align:right; }
.form-group .checkbox-group { display:flex; align-items:center; }
.form-group .checkbox-group input[type="checkbox"] { margin-right:5px; }
.readonly-field { background-color: #f0f0f0; color: #666; cursor: not-allowed;}
.table-view table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.table-view th { background:#f1f5f9; padding:0.6rem 0.4rem; border-bottom:2px solid #e2e8f0; font-weight:600; color:#1e293b; }
.table-view td { padding:0.1rem 0.4rem; border-bottom:1px solid #e2e8f0; vertical-align:middle; }
.table-view .actions-cell { display:flex; gap:0.3rem; justify-content:center; }
.filter-popover { display:none; position:fixed; background:#fff; border:1px solid #cbd5e1; border-radius:12px; padding:1rem; box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:500; min-width:280px; }
.filter-popover.show { display:block; top: 20px; }
.filter-popover .form-group { margin-bottom:0.8rem; }
.formFields { margin-top: 10px; }

/* export */

.format-option:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.format-option.active {
    border-color: #007bff !important;
    background: #007bff !important;
    color: white !important;
}

#exportModal .modal-content {
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

#exportModal .btn-cancel:hover {
    background: #dc3545;
    color: white;
}

#exportModal .btn-save:hover {
    background: #218838;
}



/* view */
.boolean-toggle {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
    display: inline-block;
}

.boolean-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Estilos para columnas por tipo */
.boolean-column { text-align: center; width: 80px; }
.number-column { text-align: center; }
.id-column { text-align: center; width: 60px; font-weight: bold; }
.location-column { font-family: monospace; font-size: 0.85em; }
.time-column { text-align: center; width: 80px; }
.email-column { color: #0066cc; }
.phone-column { font-family: monospace; text-align: center; }

/* Estilos para tarjetas */
.boolean-card { text-align: center; font-size: 1.1em; }
.id-card { font-weight: bold; color: #666; font-size: 0.9em; }
.location-card { font-family: monospace; font-size: 0.9em; }
.email-card { color: #0066cc; }

/* view - map */
.map {
    border: 1px solid rgba(18, 32, 51, 0.08);
    border-radius: 24px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    height: 300px;
    margin: 10px 0;
}
.leaflet-control-attribution {
    font-size: 9px;
    background: rgba(255,255,255,0.7);
}
.coordinate {
    background: #f0f0f0;
    border-radius: 10px;
    bottom: -300px;
    font-size: 0.5rem;
    left: 2%;
    position: absolute;
    text-align: center;
    width: 180px;
    z-index: 1000;
}
.suggestions-box {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    bottom: -40px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: none;
    left: -5%;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    width: 110%;
    z-index: 1000;
}

.suggestions-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.suggestions-box ul li {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.suggestions-box ul li:hover {
    background: #f0f0f0;
}

.modal-input {
    width: 100%;
    font-size: 1rem;
    height: 30px;
    border-radius: 10px;
    text-indent: 10px;
}

.modal-input-select {
    text-align: center;
    text-indent: 0px;
}

.btn-reset-streets {
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid #dc3545;
    border-radius: 4px;
    background: transparent;
    color: #dc3545;
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-reset-streets:hover {
    background: #dc3545;
    color: white;
}

.btn-keep-streets {
    margin-left: 4px;
    padding: 2px 12px;
    border: 1px solid #28a745;
    border-radius: 4px;
    background: transparent;
    color: #28a745;
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-keep-streets:hover {
    background: #28a745;
    color: white;
}