/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #3498db;
    --primary-dark: #2980b9;
    --success: #27ae60;
    --warning: #f39c12;
    --danger: #e74c3c;
    --purple: #9b59b6;
    --dark: #2c3e50;
    --gray: #7f8c8d;
    --light-gray: #ecf0f1;
    --white: #ffffff;
    --sidebar-width: 260px;

    /* Escala de cinza - texto */
    --text-primary: #333;
    --text-secondary: #555;
    --text-muted: #888;
    --text-light: #999;

    /* Escala de cinza - backgrounds */
    --bg-light: #f8f9fa;
    --bg-lighter: #f5f5f5;
    --bg-secondary: #f5f6fa;

    /* Escala de cinza - bordas */
    --border-light: #f0f0f0;
    --border-base: #e0e0e0;
    --border-medium: #ddd;

    /* Paleta azul (complementa --primary) */
    --blue-50: #e3f2fd;
    --blue-600: #1976d2;

    /* Escala de border-radius */
    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f6fa;
    color: var(--dark);
    line-height: 1.6;
}

/* Layout Principal */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    transition: transform 0.3s ease;
    z-index: 1000;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header h2 {
    font-size: 1.5rem;
}

.sidebar-header i {
    margin-right: 10px;
}

.sidebar-nav {
    flex: 1;
    padding: 10px 0;
    overflow-y: auto;
}

/* Accordion Groups */
.nav-group {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.nav-group-header:hover {
    color: rgba(255,255,255,0.8);
}

.nav-group.open .nav-group-header {
    color: rgba(255,255,255,0.7);
}

.nav-group-header span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-group-header span i {
    width: 16px;
    font-size: 0.7rem;
}

.nav-group-arrow {
    font-size: 0.6rem;
    transition: transform 0.25s ease;
}

.nav-group.open .nav-group-arrow {
    transform: rotate(180deg);
}

.nav-group-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-group.open .nav-group-items {
    max-height: 500px;
}

.nav-group-items .nav-item {
    padding: 9px 20px 9px 38px;
    font-size: 0.88rem;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.2s;
}

.nav-item:hover, .nav-item.active {
    background: rgba(255,255,255,0.1);
    color: var(--white);
}

.nav-item i {
    width: 22px;
    margin-right: 10px;
    font-size: 0.85rem;
}

.nav-item .badge {
    margin-left: auto;
    background: var(--danger);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.user-menu-status {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
}

.user-menu-status select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-medium);
    background: var(--white);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
}

.topbar {
    background: var(--white);
    padding: 15px 30px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.topbar h1 {
    font-size: 1.5rem;
    margin-left: 15px;
}

.topbar-actions {
    margin-left: auto;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--gray);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    font-size: 1rem;
}
.topbar-icon-btn:hover {
    background: var(--light-gray);
    color: var(--primary);
}

.topbar-actions select {
    padding: 6px 30px 6px 10px;
    font-size: 0.82rem;
    height: 34px;
}

/* User Dropdown (topbar) */
.topbar-user-dropdown {
    position: relative;
}

.topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--light-gray);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--dark);
    transition: background 0.2s;
}

.topbar-user-btn:hover {
    background: #d5d5d5;
}

.topbar-user-btn .fa-user-circle {
    font-size: 1.1rem;
    color: var(--gray);
}

.topbar-user-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 1001;
}

.topbar-user-menu.active {
    display: block;
}

.user-menu-item {
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--dark);
    transition: background 0.2s;
}

.user-menu-item:hover {
    background: var(--light-gray);
}

.user-menu-item i {
    width: 16px;
    color: var(--gray);
}

/* Bot Toggle */
.bot-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: #e8f5e9;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--success);
    transition: all 0.3s;
}
.bot-toggle.bot-off {
    background: #fbe9e7;
    color: var(--danger);
}
.bot-toggle .fa-robot { font-size: 1rem; }
.bot-toggle-label { font-weight: 600; min-width: 50px; }

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 20px;
}
.switch .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
.switch input:checked + .slider {
    background-color: var(--success);
}
.switch input:checked + .slider:before {
    transform: translateX(16px);
}

.btn-menu {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark);
}

.content {
    padding: 30px;
    flex: 1;
    overflow-y: auto;
}

/* Dashboard Cards */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    background: var(--white);
    border-radius: 10px;
    padding: 25px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 20px;
}

.card-blue .card-icon { background: rgba(52,152,219,0.2); color: var(--primary); }
.card-green .card-icon { background: rgba(39,174,96,0.2); color: var(--success); }
.card-orange .card-icon { background: rgba(243,156,18,0.2); color: var(--warning); }
.card-purple .card-icon { background: rgba(155,89,182,0.2); color: var(--purple); }
.card-red .card-icon { background: rgba(231,76,60,0.2); color: var(--danger); }

.card-info h3 {
    font-size: 2rem;
    font-weight: 600;
}

.card-info p {
    color: var(--gray);
    font-size: 0.9rem;
}

/* Stat Cards (métricas/KPIs) */
.stat-card {
    background: var(--white);
    border: 1px solid var(--border-base, #e0e0e0);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.stat-card .stat-value,
.stat-card .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    margin-top: 2px;
    display: block;
}

/* Timeline vertical com dots */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-base, #e0e0e0);
}

.timeline-item {
    position: relative;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    transition: box-shadow 0.15s;
}

.timeline-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.timeline-dot {
    position: absolute;
    left: -24px;
    top: 16px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0 0 0 2px var(--border-base, #e0e0e0);
}

/* Dashboard Sections */
.dashboard-section {
    background: var(--white);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.dashboard-section h2 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-gray);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.stat-item {
    text-align: center;
    padding: 15px;
    background: var(--light-gray);
    border-radius: 8px;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--gray);
}

/* Operadores Grid */
.operadores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.operador-card {
    display: flex;
    align-items: center;
    padding: 15px;
    background: var(--light-gray);
    border-radius: 8px;
}

.operador-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.operador-info {
    flex: 1;
}

.operador-info strong {
    display: block;
    font-size: 0.95rem;
}

.operador-info small {
    color: var(--gray);
}

.operador-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.operador-status.online { background: var(--success); }
.operador-status.ocupado { background: var(--warning); }

/* Login Page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-box {
    background: var(--white);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.login-header h1 {
    font-size: 2rem;
    color: var(--dark);
}

.login-header p {
    color: var(--gray);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark);
}

.form-group label i {
    margin-right: 8px;
    color: var(--gray);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
    outline: none;
    border-color: var(--primary);
}

.form-control {
    padding: 12px 15px;
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
    font-family: inherit;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 10px;
}

/* Global input/select/textarea - garante aparência uniforme em todas as páginas */
.content input[type="text"],
.content input[type="number"],
.content input[type="date"],
.content input[type="datetime-local"],
.content input[type="time"],
.content input[type="email"],
.content input[type="password"],
.content input[type="search"],
.content input[type="tel"],
.content input[type="url"],
.content select,
.content textarea,
.topbar select,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="datetime-local"],
.modal input[type="time"],
.modal input[type="email"],
.modal input[type="password"],
.modal select,
.modal textarea {
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--white);
    color: var(--dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    height: auto;
    line-height: 1.4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.content select,
.topbar select,
.modal select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 34px;
    cursor: pointer;
}

.content input:focus,
.content select:focus,
.content textarea:focus,
.topbar select:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}

.content input::placeholder,
.content textarea::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
    color: #9ca3af;
}

/* Filters row - estilo padronizado */
.filters-row select,
.filters-row input {
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
}

.error-message {
    background: rgba(231,76,60,0.1);
    color: var(--danger);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.btn i {
    margin-right: 8px;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-success {
    background: var(--success);
    color: var(--white);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-secondary {
    background: #6c757d;
    color: var(--white);
}

.btn-warning {
    background: var(--warning);
    color: var(--white);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
}

/* Tables */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--light-gray);
}

th {
    background: var(--light-gray);
    font-weight: 600;
}

tr:hover {
    background: rgba(0,0,0,0.02);
}

/* Empty Message */
.empty-message {
    text-align: center;
    color: var(--gray);
    padding: 40px;
}

/* Badges (sistema centralizado) */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

.badge-sm {
    padding: 2px 8px;
    font-size: 0.7rem;
}

/* Cores semânticas */
.badge-success { background: #e8f5e9; color: #2e7d32; }
.badge-info { background: #e3f2fd; color: #1565c0; }
.badge-warning { background: #fff3e0; color: #ef6c00; }
.badge-danger { background: #ffebee; color: #c62828; }
.badge-neutral { background: #f5f5f5; color: #616161; }
.badge-purple { background: #f3e5f5; color: #7b1fa2; }
.badge-teal { background: #e0f2f1; color: #00695c; }
.badge-yellow { background: #fffde7; color: #f57f17; }
.badge-dark { background: #e2e3e5; color: #383d41; }
.badge-primary { background: var(--primary); color: white; }

/* Canais */
.badge-whatsapp { background: #dcf8c6; color: #25d366; }
.badge-email { background: #e3f2fd; color: #1976d2; }
.badge-portal { background: #f3e5f5; color: #7b1fa2; }
.badge-telefone { background: #fff3e0; color: #e65100; }
.badge-presencial { background: #e0f2f1; color: #00695c; }
.badge-videochamada { background: #e8eaf6; color: #283593; }
.badge-chat { background: #fce4ec; color: #880e4f; }

/* Modal (padrão único) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--white);
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.3s;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-content.modal-large {
    max-width: 900px;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 1.2rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--light-gray);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Chat Container */
.chat-container {
    display: flex;
    height: calc(100vh - 130px);
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
}

.chat-list {
    width: 300px;
    border-right: 1px solid var(--light-gray);
    overflow-y: auto;
}

.chat-item {
    padding: 15px;
    border-bottom: 1px solid var(--light-gray);
    cursor: pointer;
    transition: background 0.2s;
}

.chat-item:hover, .chat-item.active {
    background: var(--light-gray);
}

.chat-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.chat-item-name {
    font-weight: 600;
}

.chat-item-time {
    font-size: 0.8rem;
    color: var(--gray);
}

.chat-item-preview {
    font-size: 0.9rem;
    color: var(--gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.chat-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f8f9fa;
}

.message {
    max-width: 70%;
    margin-bottom: 15px;
    padding: 12px 16px;
    border-radius: 18px;
}

.message.entrada {
    background: var(--white);
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.message.saida {
    background: var(--primary);
    color: var(--white);
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message.saida.bot {
    background: var(--white);
    color: #333;
    border: 1px solid #e0e0e0;
}

.message-time {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
}

.date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
}

.date-separator span {
    background: rgba(0,0,0,0.08);
    color: var(--gray);
    font-size: 0.75rem;
    padding: 4px 14px;
    border-radius: 12px;
    font-weight: 500;
}

.chat-input {
    padding: 15px 20px;
    border-top: 1px solid var(--light-gray);
    display: flex;
    gap: 10px;
}

.chat-input input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--light-gray);
    border-radius: 25px;
    font-size: 1rem;
}

.chat-input button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: var(--white);
    cursor: pointer;
    transition: background 0.3s;
}

.chat-input button:hover {
    background: var(--primary-dark);
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .btn-menu {
        display: block;
    }

    .chat-list {
        display: none;
    }

    .chat-container.show-list .chat-list {
        display: block;
        width: 100%;
    }

    .chat-container.show-list .chat-main {
        display: none;
    }
}

/* Utility classes */
.mb-3 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1rem; }
.text-muted { color: var(--text-muted); }
.hidden { display: none; }

/* Animações globais */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); max-height: 0; }
    to { opacity: 1; transform: translateX(0); max-height: 300px; }
}

@keyframes pulseOpacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(52, 152, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}

/* Button utilities */
.btn-purple { background: var(--purple); color: white; }
.btn-purple:hover { background: #8e44ad; }
.btn-orange { background: #e65100; color: white; }
.btn-orange:hover { background: #bf360c; }

/* Layout utilities */
.badge-right { margin-left: auto; }

/* ── Calendario de Eventos do Cidadao ── */
.eventos-cal-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.eventos-cal-topbar .cidadao-nome {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.eventos-year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}
.eventos-year-nav .year-nav-btn {
    background: none;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.eventos-year-nav .year-nav-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.eventos-year-nav .year-tab {
    padding: 8px 18px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.eventos-year-nav .year-tab:hover {
    background: var(--bg-secondary);
}
.eventos-year-nav .year-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    font-weight: 600;
}

.eventos-cal-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 1400px) {
    .eventos-cal-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .eventos-cal-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .eventos-cal-grid { grid-template-columns: repeat(2, 1fr); }
}

.eventos-cal-grid .month-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.eventos-cal-grid .month-header {
    background: var(--bg-secondary);
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    text-transform: capitalize;
    border-bottom: 1px solid var(--border-light);
}
.eventos-cal-grid .month-body {
    padding: 6px 8px 8px;
}
.eventos-cal-grid .day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.78rem;
}
.eventos-cal-grid .day-hdr {
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
    font-size: 0.7rem;
}
.eventos-cal-grid .day-hdr.dom { color: #e74c3c; }

.eventos-cal-grid .eday {
    position: relative;
    padding: 3px 0 8px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: default;
}
.eventos-cal-grid .eday.has-events {
    cursor: pointer;
}
.eventos-cal-grid .eday.has-events:hover {
    background: var(--bg-secondary);
    border-radius: 4px;
}
.eventos-cal-grid .eday.empty {
    visibility: hidden;
}
.eventos-cal-grid .eday.dom { color: #e74c3c; }
.eventos-cal-grid .eday.today .day-num {
    background: var(--primary);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eventos-cal-grid .ev-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
    min-height: 5px;
}
.eventos-cal-grid .ev-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.ev-dot.conversa { background: #25d366; }
.ev-dot.atendimento { background: #00897b; }
.ev-dot.solicitacao { background: #1976d2; }
.ev-dot.agendamento { background: #ff9800; }
.ev-dot.documento { background: #9c27b0; }
.ev-dot.nps { background: #f44336; }
.ev-dot.plano { background: #607d8b; }

/* Tooltip do dia */
.eventos-cal-grid .eday .ev-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.eventos-cal-grid .eday .ev-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2c3e50;
}
.eventos-cal-grid .eday.has-events:hover .ev-tooltip {
    display: block;
}

/* Legenda */
.eventos-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 0;
}
.eventos-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.eventos-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.eventos-legend .legend-dot.conversa { background: #25d366; }
.eventos-legend .legend-dot.atendimento { background: #00897b; }
.eventos-legend .legend-dot.solicitacao { background: #1976d2; }
.eventos-legend .legend-dot.agendamento { background: #ff9800; }
.eventos-legend .legend-dot.documento { background: #9c27b0; }
.eventos-legend .legend-dot.nps { background: #f44336; }
.eventos-legend .legend-dot.plano { background: #607d8b; }

/* Modal lista de eventos do dia */
.ev-day-list {
    max-height: 400px;
    overflow-y: auto;
}
.ev-day-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.ev-day-item:last-child { border-bottom: none; }
.ev-day-item .ev-day-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}
.ev-day-item .ev-day-info { flex: 1; }
.ev-day-item .ev-day-tipo {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ev-day-item .ev-day-desc {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-top: 2px;
}
.ev-day-item .ev-day-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ========== Painel de Operacoes ========== */
.painel-ops-layout {
    display: flex;
    height: calc(100vh - 160px);
    gap: 0;
}
.painel-ops-sidebar {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-medium);
    background: #fff;
    min-width: 0;
}
.painel-ops-map {
    flex: 0 0 70%;
    position: relative;
    min-width: 0;
}
.painel-ops-map #map {
    width: 100%;
    height: 100%;
}

/* Filter bar */
.filter-bar-ops {
    display: flex;
    gap: 10px;
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    align-items: center;
    flex-wrap: wrap;
}
.filter-bar-ops label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.filter-bar-ops select {
    padding: 6px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 13px;
    background-color: #fff;
    cursor: pointer;
}

/* Sidebar cards */
.sidebar-header-ops {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);
}
.sidebar-header-ops h3 {
    font-size: 14px;
    margin: 0;
    color: var(--dark);
}
.sidebar-header-ops .count-badge {
    background: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.ocorrencias-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.ocorrencia-card {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    position: relative;
}
.ocorrencia-card:hover {
    background: var(--bg-light);
}
.ocorrencia-card.destaque {
    background: #eef6ff;
    border-left: 3px solid var(--primary);
}
.ocorrencia-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.ocorrencia-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.ocorrencia-info {
    flex: 1;
    min-width: 0;
}
.ocorrencia-info .categoria {
    font-weight: 600;
    font-size: 13px;
    color: var(--dark);
}
.ocorrencia-info .bairro {
    font-size: 12px;
    color: var(--gray);
}
.ocorrencia-tempo {
    font-size: 11px;
    color: var(--gray);
    white-space: nowrap;
}
.ocorrencia-thumb {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    margin-top: 6px;
}
.ocorrencia-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.ocorrencia-actions .btn {
    font-size: 11px;
    padding: 4px 10px;
}
.ocorrencia-detalhes {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: var(--text-secondary);
}
.ocorrencia-detalhes.aberto {
    display: block;
}
.ocorrencia-detalhes .descricao {
    margin-bottom: 8px;
    line-height: 1.5;
}
.ocorrencia-detalhes .foto-full {
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: 8px;
}
.ocorrencia-detalhes .historico {
    font-size: 11px;
    color: var(--gray);
}
.ocorrencia-detalhes .historico-item {
    padding: 4px 0;
    border-bottom: 1px dashed #eee;
}
.ocorrencia-card.slide-in {
    animation: slideInLeft 0.4s ease forwards;
}
@keyframes fadeOut {
    from { opacity: 1; max-height: 300px; }
    to { opacity: 0; max-height: 0; padding: 0 15px; margin: 0; }
}
.ocorrencia-card.fade-out {
    animation: fadeOut 0.4s ease forwards;
    overflow: hidden;
}

/* Map marker pins */
.marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    position: relative;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.marker-pin i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 13px;
}
.marker-novo .marker-pin {
    animation: pulseRing 1.5s infinite;
}

/* Stats bar */
.stats-bar-ops {
    display: flex;
    gap: 8px;
    padding: 8px 15px;
    background: #fff;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
    align-items: center;
}
.stats-bar-ops .stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.stats-bar-ops .stat-badge i {
    font-size: 11px;
}
.stats-bar-ops .stat-badge .stat-count {
    background: rgba(255,255,255,0.3);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
}

/* Overlay layer markers */
.marker-escola {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1565C0;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.marker-escola i {
    color: #fff;
    font-size: 11px;
}
.marker-poi {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.marker-poi i {
    color: #fff;
    font-size: 10px;
}

/* Layer toggle group */
.layer-toggles {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.layer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Empty state */
.empty-sidebar {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray);
}
.empty-sidebar i {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.3;
}

@media (max-width: 900px) {
    .painel-ops-layout {
        flex-direction: column;
        height: auto;
    }
    .painel-ops-sidebar {
        flex: none;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border-medium);
    }
    .painel-ops-map {
        flex: none;
        height: 50vh;
    }
}

/* ================================================================
   Page: index (dashboard)
   ================================================================ */
.nps-widget {
    background: var(--white);
    border-radius: 10px;
    padding: 20px 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 25px;
}
.nps-score {
    text-align: center;
    min-width: 100px;
}
.nps-score h2 {
    font-size: 48px;
    margin: 0;
    line-height: 1;
}
.nps-score p { margin: 5px 0 0; font-size: 12px; color: #777; }
.nps-breakdown {
    display: flex;
    gap: 15px;
    flex: 1;
}
.nps-breakdown .nps-cat {
    text-align: center;
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    background: #f8f9fa;
}
.nps-cat h4 { margin: 0; font-size: 20px; }
.nps-cat p { margin: 3px 0 0; font-size: 11px; color: #777; }
.nps-chart-box { flex: 1; min-width: 250px; }

/* ================================================================
   Page: templates
   ================================================================ */
.preview-box {
    margin-top: 1rem;
    padding: 1rem;
    background: #f0f7ff;
    border-radius: 6px;
    border: 1px solid #b3d4fc;
}

/* ================================================================
   Page: conhecimento
   ================================================================ */
.spinner-search {
    width: 24px;
    height: 24px;
    border: 3px solid #bbdefb;
    border-top: 3px solid #1976d2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
#consulta-teste:disabled, #btn-testar:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ================================================================
   Page: secretarias
   ================================================================ */
.sigla-cell { font-weight: 700; color: var(--primary); }

/* ================================================================
   Page: solicitacoes
   ================================================================ */
.solicitacao-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ================================================================
   Page: contatos-recentes
   ================================================================ */
.contato-row { cursor: pointer; transition: background 0.15s; }
.contato-row:hover { background: #f0f7ff; }
.filtros-bar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros-bar select, .filtros-bar input { max-width: 200px; }

/* ================================================================
   Page: intencao-exemplos
   ================================================================ */
.summary-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.summary-card { background: var(--white, #fff); border: 1px solid var(--light-gray); border-radius: 8px; padding: 12px 18px; min-width: 150px; flex: 1; }
.summary-card .card-intencao { font-weight: 600; font-size: 0.95em; margin-bottom: 4px; color: var(--dark); }
.summary-card .card-count { font-size: 1.4em; font-weight: 700; color: var(--primary); }

/* ================================================================
   Page: agendamento-form
   ================================================================ */
.registro-container { max-width: 800px; margin: 0 auto; }
.form-section { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.form-section h3 { margin: 0 0 16px; font-size: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.actions-bar { display: flex; gap: 12px; justify-content: flex-end; padding-top: 8px; }

/* ================================================================
   Page: telefone
   ================================================================ */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-cards .stat-card { background: var(--white, #fff); border: 1px solid var(--light-gray, #e0e0e0); border-radius: 10px; padding: 18px 20px; text-align: center; }
.stat-cards .stat-card .stat-value { font-size: 1.8em; font-weight: 700; color: var(--primary, #3498db); line-height: 1.2; }
.stat-cards .stat-card .stat-label { font-size: 0.85em; color: var(--gray, #999); margin-top: 4px; }
.stat-filters { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.stat-filters label { font-size: 0.9em; color: var(--dark, #333); }
.stat-filters input[type="date"] { padding: 6px 10px; border: 1px solid var(--light-gray, #e0e0e0); border-radius: 6px; font-size: 0.9em; }
@media (max-width: 768px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }

/* ================================================================
   Page: campanha-form
   ================================================================ */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
}
.tab {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
}
.tab.active {
    color: #1976d2;
    border-bottom: 2px solid #1976d2;
    margin-bottom: -0.6rem;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.dias-semana {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.dias-semana label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.campanha-form .preview-box {
    background: #e3f2fd;
    border-radius: 4px;
    border: none;
}

/* ================================================================
   Page: kpis
   ================================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
.kpi-card {
    background: var(--white);
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    text-align: center;
}
.kpi-card h3 { margin: 0; font-size: 28px; }
.kpi-card p { margin: 5px 0 0; font-size: 12px; color: #777; }
.kpi-card .kpi-icon { font-size: 20px; margin-bottom: 5px; }
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.chart-box {
    background: var(--white);
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.chart-box h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-secondary); }
@media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }

/* ================================================================
   Page: sms-teste
   ================================================================ */
.sms-form { max-width: 600px; }
.sms-form .form-group { margin-bottom: 1rem; }
.sms-form label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.85rem; }
.sms-form input, .sms-form textarea {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border-medium);
    border-radius: 6px; font-size: 0.9rem;
}
.sms-form textarea { resize: vertical; min-height: 80px; }
.char-counter { font-size: 0.75rem; color: var(--text-secondary); text-align: right; margin-top: 2px; }
.char-counter.warning { color: var(--warning); }
.char-counter.danger { color: var(--danger); }
.sms-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.sms-table th, .sms-table td {
    padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
}
.sms-table th { font-weight: 600; color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; }
.sms-table .msg-preview { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cidadao-search { position: relative; }
.cidadao-search .search-results {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border: 1px solid var(--border-medium); border-radius: 6px;
    max-height: 200px; overflow-y: auto; z-index: 10; display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.cidadao-search .search-results.active { display: block; }
.cidadao-search .search-item {
    padding: 8px 12px; cursor: pointer; font-size: 0.85rem;
    border-bottom: 1px solid var(--border-light);
}
.cidadao-search .search-item:hover { background: var(--bg-lighter); }
.cidadao-search .search-item small { color: var(--text-secondary); }

/* ================================================================
   Page: duplicatas
   ================================================================ */
.dup-stats {
    display: flex; gap: 15px; margin-bottom: 20px;
}
.dup-stat {
    background: var(--white); border-radius: 10px; padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: center; flex: 1;
}
.dup-stat h3 { margin: 0; font-size: 28px; }
.dup-stat p { margin: 5px 0 0; font-size: 12px; color: #777; }
.dup-card {
    background: var(--white); border-radius: 10px; padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 12px;
    border-left: 4px solid #3498db;
}
.dup-card.match-cpf { border-left-color: #e74c3c; }
.dup-card.match-telefone { border-left-color: #f39c12; }
.dup-card.match-email { border-left-color: #9b59b6; }
.dup-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.dup-pair {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: start;
}
.dup-cidadao {
    border: 2px solid var(--border-base); border-radius: 8px; padding: 12px;
    cursor: pointer; transition: all 0.15s;
}
.dup-cidadao:hover { border-color: #3498db; background: #f0f7ff; }
.dup-cidadao.selected { border-color: #27ae60; background: #e8f5e9; }
.dup-cidadao h4 { margin: 0 0 6px; font-size: 0.95rem; }
.dup-cidadao .dup-detail { font-size: 0.8rem; color: var(--text-secondary); margin: 2px 0; }
.dup-cidadao .dup-detail i { width: 16px; color: var(--text-light); }
.dup-arrow {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #ccc; padding-top: 20px;
}
.dup-actions {
    display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end;
}

/* ================================================================
   Page: channel-switch
   ================================================================ */
.filtro-periodo {
    display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap;
}
.filtro-periodo label { font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); }
.filtro-periodo input[type="date"] { padding: 6px 12px; border: 1px solid var(--border-medium); border-radius: 6px; font-size: 0.9rem; }
.cs-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 25px;
}
.cs-stat-card {
    background: white; border-radius: 10px; padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center;
}
.cs-stat-card h3 { font-size: 2rem; margin: 0; color: var(--primary); }
.cs-stat-card p { color: var(--text-secondary); margin: 5px 0 0; font-size: 0.85rem; }
.cs-stat-card.unique h3 { color: #1565c0; }
.cs-stat-card.auto h3 { color: #2e7d32; }
.cs-section {
    background: white; border-radius: 10px; padding: 25px;
    margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.cs-section h3 { font-size: 1rem; margin: 0 0 15px; color: var(--text-primary); }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table th {
    background: var(--light-gray); padding: 10px 12px; text-align: left;
    font-weight: 600; font-size: 0.85rem;
}
.cs-table td { padding: 10px 12px; border-bottom: 1px solid var(--light-gray); font-size: 0.9rem; }
.cs-table tr:hover { background: rgba(0,0,0,0.02); }
.motivo-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600;
}
.motivo-badge.continuacao { background: #e3f2fd; color: #1565c0; }
.motivo-badge.canal_simultaneo { background: #fff3e0; color: #ef6c00; }
.motivo-badge.desconhecido { background: #f5f5f5; color: #666; }
.flow-arrow { color: var(--text-light); margin: 0 8px; }
.recente-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid #f0f0f0;
}
.recente-item:last-child { border-bottom: none; }
.recente-flow { display: flex; align-items: center; gap: 8px; }
.recente-meta { font-size: 0.8rem; color: var(--text-secondary); text-align: right; }

/* ================================================================
   Page: alertas-proativos
   ================================================================ */
.alertas-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.alertas-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.alerta-card {
    background: var(--white);
    border: 1px solid var(--border-base, #e0e0e0);
    border-left: 4px solid var(--border-base);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s;
}
.alerta-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.alerta-card.sev-critica { border-left-color: var(--danger); }
.alerta-card.sev-alta { border-left-color: var(--warning); }
.alerta-card.sev-media { border-left-color: var(--primary); }
.alerta-card.sev-baixa { border-left-color: var(--text-muted, #888); }
.alerta-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.alerta-titulo { font-weight: 600; font-size: 0.95rem; flex: 1; }
.alerta-meta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.alerta-desc { color: var(--text-secondary, #555); font-size: 0.875rem; margin-bottom: 8px; }
.alerta-acao {
    background: var(--bg-light, #f8f9fa);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--text-secondary, #555);
    margin-bottom: 10px;
}
.alerta-acao i { color: var(--primary); margin-right: 4px; }
.alerta-footer { display: flex; justify-content: space-between; align-items: center; }
.alerta-footer .alerta-info { font-size: 0.8rem; color: var(--text-muted, #888); display: flex; gap: 12px; }
.alerta-actions { display: flex; gap: 6px; }


/* ================================================================
   EXTRACTED FROM INLINE STYLES - 2026-02-21
   ================================================================ */

/* ================================================================
   Page: ab-testes
   ================================================================ */


.ab-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.ab-header select {
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 280px;
}
.campanha-info {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    margin-bottom: 1.25rem;
    display: none;
}
.campanha-info.visible { display: block; }
.campanha-info h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.campanha-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.campanha-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Variants */
.variantes-section {
    margin-bottom: 1.5rem;
}
.variantes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.variantes-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.variantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.variante-card {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    position: relative;
}
.variante-card .variante-letter {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    margin-bottom: 0.75rem;
}
.letter-A { background: #1a73e8; }
.letter-B { background: #ea8600; }
.letter-C { background: #7c3aed; }
.letter-D { background: #e53935; }
.letter-E { background: #00897b; }
.variante-card h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.variante-card .conteudo-preview {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 0.75rem;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.variante-card .percentual {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a73e8;
}
.variante-card .percentual span {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-light);
}

/* modal: usa padrão global .modal / .modal-content do style.css */

/* Results */
.resultados-section {
    display: none;
    margin-top: 1.5rem;
}
.resultados-section.visible { display: block; }
.resultados-section h3 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.table-container {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.table-container table {
    width: 100%;
    border-collapse: collapse;
}
.table-container th {
    background: #f5f7fa;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-base);
}
.table-container td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
}
.row-best {
    background: #e8f5e9 !important;
}
.row-best td { font-weight: 600; }
.taxa-alta { color: #2e7d32; font-weight: 600; }
.taxa-media { color: #ef6c00; font-weight: 600; }
.taxa-baixa { color: #c62828; font-weight: 600; }

.chart-container {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    max-width: 700px;
}

.empty-variantes {
    background: #f9fafb;
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    color: var(--text-light);
}
.empty-variantes i { font-size: 2rem; margin-bottom: 0.5rem; display: block; }

.btn-danger {
    background: #fff;
    color: #e53935;
    border: 1px solid #e53935;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}
.btn-danger:hover { background: #ffebee; }
    

/* ================================================================
   Page: agendamento-fila
   ================================================================ */


.fila-card {
    background: var(--white);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid var(--primary);
    margin-bottom: 10px;
}
.fila-card.status-notificado { border-left-color: var(--warning); }
.fila-card.status-agendado { border-left-color: var(--success); }
.fila-card.status-cancelado { border-left-color: var(--danger); opacity: 0.6; }

.fila-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.fila-card-header h4 { margin: 0; font-size: 0.95rem; }

.fila-card-meta {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.fila-card-meta span { display: flex; align-items: center; gap: 4px; }

.fila-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.posicao-badge {
    background: var(--primary);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.posicao-badge.notificado { background: var(--warning); }
.posicao-badge.agendado { background: var(--success); }
.posicao-badge.cancelado { background: var(--gray); }

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}
.empty-state i { font-size: 2rem; margin-bottom: 0.5rem; }
    

/* ================================================================
   Page: agendamentos
   ================================================================ */


.calendario-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.semana-atual {
    font-size: 1.1rem;
    font-weight: 500;
    min-width: 250px;
    text-align: center;
}

.calendario-container {
    overflow-x: auto;
}

.calendario-header {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}

.calendario-dia {
    padding: 0.5rem;
    text-align: center;
    background: var(--bg-lighter);
    border-radius: 4px;
    cursor: pointer;
}

.calendario-dia:hover {
    background: #e0e0e0;
}

.calendario-dia.hoje {
    background: #e3f2fd;
}

.calendario-dia.selecionado {
    background: #1976d2;
    color: white;
}

.dia-nome {
    display: block;
    font-size: 0.8rem;
}

.dia-numero {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
}

.calendario-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 2px;
}

.calendario-hora {
    padding: 0.5rem;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.calendario-slot {
    min-height: 40px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 1px;
    overflow: hidden;
}

.grid-agendamento {
    padding: 2px 4px;
    margin-bottom: 1px;
    border-radius: 3px;
    font-size: 0.7rem;
    line-height: 1.2;
    cursor: pointer;
    border-left: 3px solid #3498db;
    background: #e3f2fd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-agendamento:hover {
    filter: brightness(0.92);
}

.grid-agendamento strong {
    font-size: 0.7rem;
}

.grid-agendamento small {
    color: var(--text-secondary);
}

.calendario-legenda {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    padding: 0.75rem 0 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.legenda-item {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}

.agendamento-detalhes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.detalhe-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f9f9f9;
    border-radius: 4px;
}

.detalhe-item.full-width {
    grid-column: 1 / -1;
}

.detalhe-item i {
    color: #1976d2;
    font-size: 1.2rem;
    margin-top: 0.25rem;
}

.detalhe-item label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.detalhe-item span {
    display: block;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

/* Configuração de Horários */
.config-horarios {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.config-dia {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f9f9f9;
    border-radius: 6px;
}

.config-dia-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
    font-weight: 500;
}

.config-dia-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.config-dia-horarios {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
}

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

.form-group-inline label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.form-group-inline input[type="time"],
.form-group-inline select {
    padding: 0.4rem;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
}

.modal-large {
    max-width: 900px !important;
}

/* Estilos para Tipos de Agendamento */
.google-calendar-status {
    background: var(--bg-lighter);
    padding: 1rem;
    border-radius: 8px;
}

.status-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-card i.fab {
    font-size: 1.5rem;
    color: #4285f4;
}

.tipos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.tipo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--border-base);
    border-radius: 6px;
}

.tipo-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tipo-info strong {
    min-width: 150px;
}

.tipo-info i {
    margin-left: 0.5rem;
}

.tipo-acoes {
    display: flex;
    gap: 0.5rem;
}

.meet-link-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.meet-link-text {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    color: #1976d2;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-icon:hover {
    background: #e3f2fd;
    color: #0d47a1;
}

.text-success { color: #28a745; }

.small { font-size: 0.85rem; }

hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid var(--border-base);
}

h4 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

h4 i {
    margin-right: 0.5rem;
    color: #1976d2;
}
    

/* ================================================================
   Page: aprovacao-fluxos
   ================================================================ */


.etapas-section { margin-top: 20px; border-top: 1px solid var(--light-gray); padding-top: 15px; }
.etapas-section h4 { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.etapa-mini-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.etapa-mini-table th, .etapa-mini-table td { padding: 6px 10px; border-bottom: 1px solid var(--light-gray); text-align: left; }
.etapa-mini-table th { background: var(--bg-color, #f8f9fa); font-weight: 600; }
.etapa-form { background: var(--bg-color, #f8f9fa); padding: 12px; border-radius: 6px; margin-top: 10px; display: none; }
.etapa-form.visible { display: block; }
.etapa-form .form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.etapa-form .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.etapa-form .form-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; }
    

/* ================================================================
   Page: atendimento-registro
   ================================================================ */


.registro-container {
    max-width: 800px;
    margin: 0 auto;
}
.info-card {
    background: #f8f9ff;
    border: 1px solid #e0e0ee;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.info-card .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.info-card .info-item i {
    color: var(--primary);
    width: 18px;
    text-align: center;
}
.info-card .info-item label {
    color: var(--text-muted);
    font-size: 0.78rem;
    display: block;
}
.info-card .info-item.full {
    grid-column: 1 / -1;
}
.form-section {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
}
.form-section h3 {
    margin: 0 0 16px;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.comparecimento-options {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.comparecimento-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.9rem;
}
.comparecimento-options label:hover {
    border-color: var(--primary);
    background: #f8f9ff;
}
.comparecimento-options input[type="radio"] { display: none; }
.comparecimento-options input[type="radio"]:checked + label {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.comparecimento-options input[type="radio"]:checked + label i {
    color: #fff;
}
.canal-options {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.canal-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.9rem;
}
.canal-options label:hover {
    border-color: var(--primary);
    background: #f8f9ff;
}
.canal-options input[type="radio"] { display: none; }
.canal-options input[type="radio"]:checked + label {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.canal-options input[type="radio"]:checked + label i {
    color: #fff;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s;
}
.form-group textarea {
    resize: vertical;
    min-height: 80px;
}
.form-group input[type="text"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.form-group .hint {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 4px;
}
.actions-bar {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 8px;
}
/* badges: usa sistema centralizado do style.css */
.ja-registrado {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}
.ja-registrado i {
    font-size: 3rem;
    color: #4caf50;
    margin-bottom: 12px;
}
/* Autocomplete */
.autocomplete-wrapper {
    position: relative;
}
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-medium);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.autocomplete-results.active { display: block; }
.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}
.autocomplete-item:hover { background: #f0f4ff; }
.autocomplete-item small { color: var(--text-muted); margin-left: 8px; }
.cidadao-selecionado {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #e8f5e9;
    border-radius: 8px;
    font-size: 0.9rem;
}
.cidadao-selecionado .btn-limpar {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #c00;
    font-size: 0.85rem;
}
    

/* ================================================================
   Page: auditoria
   ================================================================ */


.audit-detail-row td {
    padding: 0 !important;
    border-top: none !important;
}
.audit-detail-content {
    display: none;
    padding: 16px 20px;
    background: var(--bg-light);
    border-top: 1px dashed var(--light-gray);
}
.audit-detail-content.show {
    display: block;
}
.json-viewer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.json-box {
    background: white;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    padding: 12px;
}
.json-box h4 {
    font-size: 13px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--light-gray);
}
.json-box pre {
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: 'Consolas', 'Monaco', monospace;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
}
.audit-row { cursor: pointer; }
.audit-row:hover { background: rgba(44, 90, 160, 0.04); }
/* badges: usa sistema centralizado do style.css */
.filters-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 12px 15px;
    background: var(--bg-light);
    border-radius: 8px;
}
.filters-row input[type="text"] { width: 180px; }
.result-info {
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 10px;
}
.load-more-container {
    text-align: center;
    padding: 16px 0;
}
@media (max-width: 768px) {
    .json-viewer { grid-template-columns: 1fr; }
}
    

/* ================================================================
   Page: bot-analytics
   ================================================================ */


.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stats-row .stat-card { background: white; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-align: center; }
.stats-row .stat-card .stat-value { font-size: 2rem; font-weight: 700; }
.stats-row .stat-card .stat-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; margin-top: 0.25rem; }
.stats-row .stat-card.blue .stat-value { color: #1565c0; }
.stats-row .stat-card.green .stat-value { color: #2e7d32; }
.stats-row .stat-card.orange .stat-value { color: #ef6c00; }
.stats-row .stat-card.red .stat-value { color: #c62828; }
.stats-row .stat-card.purple .stat-value { color: #6a1b9a; }

.filters { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap; }
.filters select, .filters input { padding: 0.5rem; border: 1px solid var(--border-medium); border-radius: 6px; }

.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-box { background: white; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.chart-box h3 { margin: 0 0 1rem; font-size: 1rem; }

.queries-table { width: 100%; border-collapse: collapse; }
.queries-table th, .queries-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.queries-table th { font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: 0.75rem; }
.queries-table tr:hover { background: #f9f9f9; }

/* badges: usa sistema centralizado do style.css */
    

/* ================================================================
   Page: campanhas
   ================================================================ */


.metricas-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.metrica-card {
    text-align: center;
    padding: 1rem;
    background: var(--bg-lighter);
    border-radius: 4px;
}

.metrica-valor {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #1976d2;
}

.metrica-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.taxas-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.taxa-item label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.progress {
    height: 100%;
    background: #4caf50;
    transition: width 0.3s;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 4px;
}
    

/* ================================================================
   Page: chat-interno
   ================================================================ */


.chat-layout {
    display: flex;
    height: calc(100vh - 130px);
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Left Panel - Room List */
.panel-left {
    width: 300px;
    min-width: 300px;
    border-right: 1px solid #ecf0f1;
    display: flex;
    flex-direction: column;
    background: #fafbfc;
}
.panel-left-header {
    padding: 15px;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.panel-left-header .search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 20px;
    font-size: 0.9rem;
    outline: none;
}
.panel-left-header .search-input:focus { border-color: #3498db; }

.rooms-list {
    flex: 1;
    overflow-y: auto;
}
.room-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.room-item:hover { background: #ecf0f1; }
.room-item.active { background: #dbeafe; border-left: 3px solid #3498db; }
.room-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.room-info {
    flex: 1;
    min-width: 0;
}
.room-info-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.room-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.room-time {
    font-size: 0.72rem;
    color: var(--text-light);
    white-space: nowrap;
}
.room-preview {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.room-unread {
    background: #e74c3c;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* Right Panel - Messages */
.panel-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.panel-right-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
}
.panel-right-header .header-info {
    flex: 1;
}
.panel-right-header .header-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.panel-right-header .header-members {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f5f6fa;
    display: flex;
    flex-direction: column;
}
.messages-area .empty-chat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #aaa;
    font-size: 0.95rem;
}
.messages-area .empty-chat i {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #ddd;
}

.msg-bubble {
    max-width: 65%;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    word-break: break-word;
}
.msg-bubble .msg-sender {
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text-secondary);
}
.msg-bubble .msg-text {
    font-size: 0.92rem;
    line-height: 1.45;
}
.msg-bubble .msg-time {
    font-size: 0.68rem;
    margin-top: 4px;
    opacity: 0.7;
}
.msg-bubble.mine {
    background: #3498db;
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}
.msg-bubble.mine .msg-sender { color: rgba(255,255,255,0.8); }
.msg-bubble.mine .msg-time { color: rgba(255,255,255,0.7); }
.msg-bubble.theirs {
    background: white;
    color: var(--text-primary);
    margin-right: auto;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.msg-bubble.theirs .msg-time { color: var(--text-light); }

.input-bar {
    padding: 12px 20px;
    border-top: 1px solid #ecf0f1;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    background: white;
}
.input-bar textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-medium);
    border-radius: 20px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: none;
    max-height: 100px;
    outline: none;
    line-height: 1.4;
}
.input-bar textarea:focus { border-color: #3498db; }
.input-bar .btn-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #3498db;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.input-bar .btn-send:hover { background: #2980b9; }

/* No room selected state */
.no-room-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #bbb;
}
.no-room-selected i { font-size: 4rem; margin-bottom: 15px; color: #ddd; }
.no-room-selected p { font-size: 1rem; }

/* modal: usa sistema centralizado do style.css */

.operator-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.operator-list li {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    transition: background 0.15s;
}
.operator-list li:hover { background: #ecf0f1; }
.operator-list .op-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #9b59b6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.operator-list .op-name { font-weight: 500; }
.operator-list .op-email { font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 768px) {
    .panel-left { width: 100%; min-width: 100%; }
    .panel-right { display: none; }
    .chat-layout.room-open .panel-left { display: none; }
    .chat-layout.room-open .panel-right { display: flex; }
}
    

/* ================================================================
   Page: cidadao-documentos
   ================================================================ */


.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.doc-card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; transition: box-shadow 0.2s; }
.doc-card:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.doc-preview { height: 180px; background: var(--bg-lighter); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.doc-preview img { width: 100%; height: 100%; object-fit: cover; }
.doc-preview .doc-icon { font-size: 3rem; color: var(--text-light); }
.doc-info { padding: 0.75rem; }
.doc-info h4 { margin: 0 0 0.25rem; font-size: 0.9rem; word-break: break-all; }
.doc-info small { color: var(--text-secondary); }
.doc-actions { display: flex; gap: 0.5rem; padding: 0 0.75rem 0.75rem; }
.doc-meta { margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-light); border-radius: 4px; font-size: 0.8rem; }
.doc-meta dt { font-weight: 600; color: var(--text-secondary); display: inline; }
.doc-meta dd { display: inline; margin: 0 0.75rem 0 0.25rem; color: var(--text-primary); }
.cidadao-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.cidadao-header h2 { margin: 0; }
/* badge-count: usa .badge.badge-primary do style.css */
    

/* ================================================================
   Page: cidadao-grafo
   ================================================================ */


.grafo-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #eee;
}
.grafo-header h2 { margin: 0; font-size: 1.3rem; }

.grafo-container {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-base, #e0e0e0);
    border-radius: 10px;
    overflow: hidden;
    min-height: 600px;
}
.grafo-container svg {
    width: 100%;
    height: 100%;
    display: block;
}

.grafo-legenda {
    display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
    margin-top: 1rem; padding: 0.6rem 1rem;
    background: #f9f9f9; border-radius: 8px;
    font-size: 0.8rem; color: var(--text-secondary, #666);
}
.grafo-legenda .legenda-item { display: flex; align-items: center; gap: 5px; }
.grafo-legenda .legenda-cor { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }

.node-circle { cursor: pointer; stroke: #fff; stroke-width: 2px; transition: filter 0.15s; }
.node-circle:hover { filter: brightness(1.15) drop-shadow(0 0 6px rgba(0,0,0,0.3)); }
.node-label { font-size: 11px; font-weight: 600; fill: var(--text-primary, #333); text-anchor: middle; pointer-events: none; user-select: none; }
.link-line { stroke: #ccc; stroke-width: 1.5px; stroke-opacity: 0.6; }
.link-label { font-size: 10px; fill: var(--text-secondary, #888); text-anchor: middle; pointer-events: none; user-select: none; }

.grafo-tooltip {
    position: absolute; padding: 6px 12px; background: rgba(0,0,0,0.8);
    color: #fff; border-radius: 6px; font-size: 0.8rem;
    pointer-events: none; opacity: 0; transition: opacity 0.15s;
    white-space: nowrap; z-index: 10;
}
.grafo-tooltip.visible { opacity: 1; }

.grafo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; color: var(--text-secondary, #888); }
.grafo-empty i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.grafo-empty p { font-size: 0.95rem; margin: 0; }
.grafo-empty .sub { font-size: 0.8rem; margin-top: 0.5rem; opacity: 0.7; }
.grafo-loading { display: flex; align-items: center; justify-content: center; padding: 4rem; color: var(--text-secondary, #888); font-size: 0.95rem; gap: 0.5rem; }
.grafo-hint { text-align: center; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-muted, #aaa); }
    

/* ================================================================
   Page: coleta-gestao
   ================================================================ */


.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #ecf0f1;
}
.tab-btn {
    padding: 10px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 500;
    color: #7f8c8d;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}
.tab-btn:hover {
    color: var(--primary);
}
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

.filters-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.filters-bar input,
.filters-bar select {
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
}

.table-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ecf0f1; }
th { background: #ecf0f1; font-weight: 600; }
tr:hover { background: rgba(0,0,0,0.02); }

/* badge-turno: usa sistema centralizado do style.css */

.btn-action {
    background: none; border: none;
    cursor: pointer; font-size: 0.95rem; padding: 4px 8px;
    border-radius: 4px; transition: background 0.2s;
}
.btn-action.edit { color: var(--primary); }
.btn-action.edit:hover { background: #e3f2fd; }
.btn-action.delete { color: #e74c3c; }
.btn-action.delete:hover { background: #fce4ec; }

.execucao-form-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 20px;
    margin-bottom: 1.5rem;
}
.execucao-form-card h3 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: #2c3e50;
}
.execucao-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
    align-items: end;
}
.execucao-form-grid .form-group { margin-bottom: 0; }
.execucao-obs-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
    margin-top: 12px;
}
.execucao-obs-row .form-group { margin-bottom: 0; }

@media (max-width: 768px) {
    .execucao-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .execucao-obs-row {
        grid-template-columns: 1fr;
    }
}
    

/* ================================================================
   Page: configuracoes
   ================================================================ */


.config-section {
    background: var(--white);
    border-radius: 10px;
    padding: 20px 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.config-section h3 {
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-gray);
    font-size: 1rem;
    color: var(--text-primary);
}
.config-section h3 i { margin-right: 8px; color: var(--primary); }
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}
.config-field {
    display: flex;
    flex-direction: column;
}
.config-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.config-field small {
    font-size: 11px;
    color: var(--gray);
    margin-top: 3px;
}
.config-field input[type="text"],
.config-field input[type="number"] {
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 14px;
}
.config-field input[type="range"] {
    margin-top: 5px;
}
.range-value {
    font-weight: bold;
    color: var(--primary);
}
.bot-switch {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bot-switch .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.bot-switch .switch input { opacity: 0; width: 0; height: 0; }
.bot-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    border-radius: 26px;
    transition: 0.3s;
}
.bot-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}
.bot-switch input:checked + .slider { background-color: var(--success); }
.bot-switch input:checked + .slider:before { transform: translateX(24px); }
.config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}
/* Modal MCP Tools: usa padrão global .modal / .modal-content do style.css */
#mcp-tools-modal .modal-content {
    max-width: 560px;
}
#mcp-tools-modal .modal-header i {
    font-size: 20px;
    color: var(--primary);
}
.mcp-tool-card {
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
.mcp-tool-card:hover { border-color: var(--primary); }
.mcp-tool-card .tool-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--primary);
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mcp-tool-card .tool-name i { font-size: 11px; opacity: 0.6; }
.mcp-tool-card .tool-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}
.mcp-tool-card .tool-params {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.mcp-tool-card .tool-param {
    font-size: 11px;
    background: #f0f4ff;
    color: #4a6fa5;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
}
.mcp-tool-card .tool-param.required {
    background: #fff3e0;
    color: #bf6c00;
}
/* mcp-modal-footer removido — usa .modal-footer padrão */
.mcp-tools-count {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 12px;
}
.config-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.config-shortcut-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.config-shortcut-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.config-shortcut-card i {
    font-size: 20px;
    color: var(--primary);
    width: 28px;
    text-align: center;
}
.config-shortcut-card .shortcut-info {
    display: flex;
    flex-direction: column;
}
.config-shortcut-card .shortcut-title {
    font-weight: 600;
    font-size: 14px;
}
.config-shortcut-card .shortcut-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
    

/* ================================================================
   Page: conhecimento-sugestoes
   ================================================================ */


.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.page-header-actions { display: flex; gap: 0.5rem; align-items: center; }
.page-descricao { color: var(--text-secondary); margin-bottom: 1rem; }
.stats-section { margin-bottom: 1.5rem; }
.stat-pendentes { color: var(--warning-color, #f39c12); }
.text-center-muted { text-align: center; color: var(--text-light); }
.text-center-muted.pad { padding: 2rem; }
.text-center-error { text-align: center; color: var(--danger); }

.sugestao-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; }
.sugestao-card {
    background: var(--white); border-radius: 8px; border: 1px solid var(--border-base);
    padding: 1rem; transition: box-shadow 0.15s;
}
.sugestao-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.sugestao-card .card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light);
}
.sugestao-card .card-header .meta { font-size: 0.75rem; color: var(--text-light); }
.sugestao-card .card-header .origem-label { margin-left: 6px; }
.sugestao-card .pergunta-box, .sugestao-card .resposta-box {
    padding: 0.6rem; border-radius: 6px; margin-bottom: 0.5rem; font-size: 0.85rem; line-height: 1.4;
}
.sugestao-card .pergunta-box { background: #fff3e0; border-left: 3px solid #ff9800; }
.sugestao-card .resposta-box { background: #e8f5e9; border-left: 3px solid #4caf50; }
.sugestao-card .pergunta-box .label, .sugestao-card .resposta-box .label {
    font-weight: 600; font-size: 0.7rem; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px;
}
.sugestao-card .card-footer {
    display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem;
    padding-top: 0.5rem; border-top: 1px solid var(--border-light);
}
.sugestao-card .card-footer .info { font-size: 0.75rem; color: var(--text-light); }
.sugestao-card .card-footer .info a { color: var(--primary); }
.sugestao-card .card-footer .acoes { display: flex; gap: 4px; }
.decisao-info { font-size: 0.75rem; color: var(--text-secondary); }

.origem-icon-email { color: #4285F4; }
.origem-icon-whatsapp { color: #25D366; }
.origem-icon-bot { color: #9b59b6; }
.origem-icon-telefone { color: #FF9800; }

.edit-preview { padding: 0.6rem; background: var(--bg-lighter); border-radius: 6px; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem; }
.edit-textarea { font-size: 0.85rem; }
    

/* ================================================================
   Page: consulta-legislacao
   ================================================================ */


.consulta-container {
    max-width: 900px;
    margin: 0 auto;
}
.consulta-input-area {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.consulta-input-area input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}
.consulta-input-area input:focus {
    outline: none;
    border-color: var(--primary);
}
.consulta-input-area button {
    padding: 12px 24px;
    white-space: nowrap;
}
.historico {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.consulta-item {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
}
.consulta-pergunta {
    background: var(--primary);
    color: white;
    padding: 12px 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.consulta-resposta {
    padding: 16px;
}
.consulta-resposta p {
    margin: 0 0 0.75rem;
    line-height: 1.6;
}
.consulta-resposta p:last-child {
    margin-bottom: 0;
}
.consulta-resposta ul, .consulta-resposta ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}
.consulta-resposta li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}
.consulta-meta {
    display: flex;
    gap: 1rem;
    padding: 10px 16px;
    background: #f8f9fa;
    border-top: 1px solid var(--border-light);
    font-size: 0.8rem;
    color: #666;
    flex-wrap: wrap;
    align-items: center;
}
.consulta-fontes {
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
}
.consulta-fontes summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
    user-select: none;
}
.fonte-item {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 0.82rem;
}
.fonte-item .fonte-titulo {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.fonte-item .fonte-trecho {
    color: #555;
    line-height: 1.4;
}
.fonte-item .fonte-score {
    float: right;
}
.loading-dots {
    display: inline-flex;
    gap: 4px;
    padding: 20px 16px;
}
.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: dot-pulse 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}
.sugestoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.sugestao-btn {
    background: white;
    border: 1px solid var(--border-medium);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
}
.sugestao-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f0f4ff;
}
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
}
.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary);
    opacity: 0.5;
}
.empty-state h3 {
    margin: 0 0 0.5rem;
    color: #555;
}
    

/* ================================================================
   Page: conversas
   ================================================================ */


.message div p { margin: 0 0 0.5em 0; }
.message div p:last-child { margin-bottom: 0; }
.message div ul, .message div ol { margin: 0.5em 0; padding-left: 1.5em; }
.message div strong { font-weight: 600; }
.message div a { color: var(--primary); text-decoration: underline; }
.loading-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: var(--text-secondary);
    font-style: italic;
}
.loading-indicator .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-base);
    border-top: 2px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.chat-input.disabled { opacity: 0.6; pointer-events: none; }
#modalResumo .modal-body { padding: 1.25rem 1.5rem; }
#modalResumo .modal-body p { margin: 0 0 0.5em 0; }
#modalResumo .modal-body ul { margin: 0.5em 0; padding-left: 1.5em; }
#modalResumo .modal-body li { margin-bottom: 0.4em; }
.atendimento-dados { margin-top: 1rem; border-top: 1px solid var(--border-base); padding-top: 1rem; }
.atendimento-dados h4 { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--text-primary); }
.atendimento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; font-size: 0.85rem; }
.atendimento-field { display: flex; flex-direction: column; margin-bottom: 0.3rem; }
.atendimento-field label { font-weight: 600; color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; }
.atendimento-field span { color: #222; }
.atendimento-field.full { grid-column: 1 / -1; }
.btn-copiar { margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.btn-copiar.copiado { background: var(--success); border-color: var(--success); }

/* Banner cross-channel */
.cross-channel-banner {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 0 15px 4px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.cross-channel-banner:hover { background: #ffe0b2; }
.cross-channel-banner i { color: #e65100; }
.cross-channel-banner .ccb-canal { font-weight: 600; }

/* Sugestão IA */
.sugestao-card {
    background: #f0f7ff;
    border: 1px solid #b3d4fc;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 15px 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
}
.sugestao-card .sugestao-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.sugestao-card .sugestao-header span { font-weight: 600; color: #3498db; }
.sugestao-card .sugestao-texto { color: var(--text-primary); white-space: pre-wrap; }
.sugestao-card .sugestao-fontes {
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.sugestao-card .sugestao-acoes {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.sugestao-card .sugestao-acoes button {
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.78rem;
    transition: all 0.15s;
}
.sugestao-card .sugestao-acoes button:hover { background: #e8f4fd; border-color: #3498db; }
.sugestao-card .sugestao-acoes .btn-usar { background: #3498db; color: #fff; border-color: #3498db; }
.sugestao-card .sugestao-acoes .btn-usar:hover { background: #2980b9; }
#btn-sugestao {
    background: none;
    border: none;
    color: #3498db;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.15s;
}
#btn-sugestao:hover { background: rgba(52,152,219,0.1); }

/* Whisper styles */
.whisper-msg {
    background: #fff8e1 !important;
    border-left: 3px solid #ffc107;
    margin: 4px 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
}
.whisper-msg .whisper-label {
    font-size: 0.7rem;
    color: #f57f17;
    font-weight: 600;
    text-transform: uppercase;
}
.whisper-msg .whisper-content { color: var(--text-primary); margin-top: 2px; }
.whisper-msg .whisper-use-btn {
    background: none; border: 1px solid #ffc107; color: #f57f17;
    font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; cursor: pointer; margin-top: 4px;
}
.whisper-msg .whisper-use-btn:hover { background: #fff3cd; }
.whisper-input-area {
    background: #fff8e1;
    border-top: 2px solid #ffc107;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.whisper-input-area input { flex: 1; padding: 6px 10px; border: 1px solid var(--border-medium); border-radius: 6px; font-size: 0.9rem; }
.whisper-input-area button { background: #ffc107; color: var(--text-primary); border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; }
#btn-sugestao:disabled { color: #ccc; cursor: default; }
#btn-sugestao.loading { animation: spin 1s linear infinite; }
/* Sentimento: layout extra (gap+cursor) — cores vêm do .badge-* centralizado */
.sentimento-inline { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; cursor: default; }

/* Pensamento ao vivo do bot */
.bot-thinking-panel {
    max-width: 70%;
    margin-left: auto;
    margin-bottom: 15px;
    border-radius: 12px;
    background: #faf9ff;
    border: 1px solid #e8e5f0;
    animation: thinking-appear 0.3s ease-out;
    overflow: hidden;
}
.bot-thinking-panel.finalizado { border-color: #d0d0d0; background: #f9f9f9; }
@keyframes thinking-appear {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.bot-thinking-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.78rem;
    color: #7c3aed;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.bot-thinking-header:hover { background: rgba(124, 58, 237, 0.06); }
.bot-thinking-header .spinner-thinking {
    width: 14px; height: 14px;
    border: 2px solid var(--border-base); border-top: 2px solid #7c3aed;
    border-radius: 50%; animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
.bot-thinking-header .collapse-icon {
    margin-left: auto; font-size: 0.7rem; color: var(--text-light);
    transition: transform 0.2s;
}
.bot-thinking-header .collapse-icon.collapsed { transform: rotate(-90deg); }
.bot-thinking-steps {
    display: flex; flex-direction: column; gap: 4px;
    padding: 0 14px 10px 14px;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    overflow: hidden;
}
.bot-thinking-steps.collapsed {
    max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0;
}
.thinking-step {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 0.75rem; color: var(--text-secondary);
    animation: step-appear 0.25s ease-out; padding: 3px 0;
}
@keyframes step-appear {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}
.thinking-step-icon {
    flex-shrink: 0; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 0.6rem;
}
.thinking-step-icon.inicio { background: #e8f0fe; color: #1a73e8; }
.thinking-step-icon.chamando { background: #fff3e0; color: #e65100; }
.thinking-step-icon.resultado { background: #e8f5e9; color: #2e7d32; }
.thinking-step-icon.erro { background: #ffebee; color: #c62828; }
.thinking-step-icon.pensando { background: #f3e5f5; color: #7b1fa2; }
.thinking-step-text { flex: 1; line-height: 1.4; }
.thinking-step-text strong { color: var(--text-primary); font-weight: 600; }
.thinking-step-time { font-size: 0.65rem; color: var(--text-light); flex-shrink: 0; }
.thinking-step.tool-clicavel { cursor: pointer; border-radius: 4px; padding: 3px 4px; margin: 0 -4px; }
.thinking-step.tool-clicavel:hover { background: rgba(0,0,0,0.05); }
.thinking-step.tool-clicavel .thinking-step-icon { position: relative; }
.thinking-step.tool-clicavel .thinking-step-icon::after {
    content: '\f06e'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    position: absolute; bottom: -2px; right: -4px; font-size: 0.4rem;
    background: #fff; border-radius: 50%; width: 10px; height: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); border: 1px solid var(--border-base);
}

/* Respostas rápidas */
#btn-respostas-rapidas {
    background: none; border: none; color: #27ae60; cursor: pointer;
    font-size: 1.1rem; padding: 8px; border-radius: 50%; transition: background 0.15s;
}
#btn-respostas-rapidas:hover { background: rgba(39,174,96,0.1); }
.respostas-popup {
    display: none; position: absolute; bottom: 60px; left: 10px; right: 10px;
    background: #fff; border: 1px solid var(--border-medium); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-height: 300px; overflow-y: auto; z-index: 100;
}
.respostas-popup.active { display: block; }
.respostas-popup .rr-header {
    padding: 8px 12px; border-bottom: 1px solid #eee; display: flex; gap: 6px; align-items: center;
}
.respostas-popup .rr-header input {
    flex: 1; border: 1px solid var(--border-medium); border-radius: 4px; padding: 4px 8px; font-size: 0.85rem;
}
.respostas-popup .rr-cat {
    padding: 4px 8px; font-size: 0.7rem; background: var(--bg-lighter); color: var(--text-secondary);
    font-weight: 600; text-transform: uppercase; border-bottom: 1px solid #eee;
}
.respostas-popup .rr-item {
    padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5;
    display: flex; flex-direction: column; gap: 2px;
}
.respostas-popup .rr-item:hover { background: #f0f7ff; }
.respostas-popup .rr-item .rr-titulo {
    font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 6px;
}
.respostas-popup .rr-item .rr-titulo .rr-atalho {
    font-size: 0.7rem; color: var(--text-light); font-weight: normal; font-family: monospace;
}
.respostas-popup .rr-item .rr-preview { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    

/* ================================================================
   Page: crises
   ================================================================ */


.crises-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.crises-card-stat { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center; }
.crises-card-stat h3 { font-size: 2rem; margin: 0; }
.crises-card-stat p { color: var(--text-secondary); margin: 5px 0 0; font-size: 0.85rem; }
.crises-card-stat.ativas h3 { color: var(--danger); }
.crises-card-stat.monitorando h3 { color: var(--warning); }
.crises-card-stat.resolvidas h3 { color: var(--success); }
.crises-card-stat.criticas h3 { color: #c62828; }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.section-header h2 { font-size: 1.2rem; margin: 0; }

.status-tabs { display: flex; gap: 5px; margin-bottom: 20px; flex-wrap: wrap; }
.status-tab { padding: 8px 18px; border: 1px solid var(--light-gray); background: white; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
.status-tab.active { background: var(--primary); color: white; border-color: var(--primary); }

.crises-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }
.crisis-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; border-left: 4px solid #ccc; }
.crisis-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.12); }
.crisis-card.sev-critica { border-left-color: #c62828; }
.crisis-card.sev-alta { border-left-color: #ef6c00; }
.crisis-card.sev-media { border-left-color: #f9a825; }
.crisis-card.sev-baixa { border-left-color: #2e7d32; }
.crisis-card h4 { margin: 0 0 8px; font-size: 1rem; }
.crisis-card .crisis-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }

/* badges: usa sistema centralizado do style.css */

.crisis-card .crisis-info { font-size: 0.85rem; color: var(--text-secondary); }
.crisis-card .crisis-info span { margin-right: 12px; }
.crisis-card .crisis-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 0.8rem; color: var(--text-light); }

/* Detail view */
.detail-view { display: none; }
.detail-view.active { display: block; }
.list-view.hidden { display: none; }

.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.detail-header h2 { margin: 0; font-size: 1.3rem; }
.detail-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.detail-info-item label { display: block; font-size: 0.8rem; color: var(--text-light); margin-bottom: 4px; text-transform: uppercase; font-weight: 600; }
.detail-info-item span { font-size: 0.95rem; color: var(--dark); }

.detail-desc { background: var(--bg-light); border-radius: 8px; padding: 15px; margin-bottom: 25px; }
.detail-desc h3 { font-size: 1rem; margin: 0 0 8px; }
.detail-desc p { margin: 0; color: var(--text-secondary); line-height: 1.6; }

/* Timeline — crises */
.crises-timeline { position: relative; padding-left: 30px; margin-bottom: 25px; }
.crises-timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--light-gray); }
.crises-timeline .timeline-item { position: relative; margin-bottom: 20px; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.crises-timeline .timeline-item::before { content: ''; position: absolute; left: -25px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid white; box-shadow: 0 0 0 2px var(--primary); }
.crises-timeline .timeline-item .tl-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.crises-timeline .timeline-item .tl-tipo { font-weight: 600; font-size: 0.9rem; color: var(--dark); }
.crises-timeline .timeline-item .tl-data { font-size: 0.8rem; color: var(--text-light); }
.crises-timeline .timeline-item .tl-desc { color: var(--text-secondary); font-size: 0.9rem; }
.crises-timeline .timeline-item .tl-operador { font-size: 0.8rem; color: var(--primary); margin-top: 4px; }

.add-action-form { background: var(--bg-light); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.add-action-form h3 { font-size: 1rem; margin: 0 0 15px; }
.add-action-form .form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.add-action-form .form-row select { flex: 0 0 200px; }
.add-action-form .form-row textarea { flex: 1; min-width: 200px; }

/* modal: usa sistema centralizado do style.css */

.dashboard-section { background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
    

/* ================================================================
   Page: curadoria
   ================================================================ */


.curadoria-card {
    background: var(--white);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border-left: 4px solid var(--primary);
}
.curadoria-card.aprovada { border-left-color: var(--success); }
.curadoria-card.rejeitada { border-left-color: var(--danger); opacity: 0.7; }
.curadoria-card h4 { margin: 0 0 8px; font-size: 15px; }
.curadoria-card p { margin: 0 0 5px; color: var(--text-secondary); font-size: 13px; }
.curadoria-card .meta { font-size: 11px; color: var(--text-light); }
.curadoria-card .actions { display: flex; gap: 8px; margin-top: 10px; }
.stats-bar { display: flex; gap: 20px; margin-bottom: 20px; }
.stats-bar .stat {
    background: var(--white);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    text-align: center;
}
.stats-bar .stat h3 { margin: 0; font-size: 24px; }
.stats-bar .stat p { margin: 4px 0 0; font-size: 12px; color: #777; }
.filtro-tabs { display: flex; gap: 5px; margin-bottom: 15px; }
.filtro-tabs button { padding: 6px 16px; border: 1px solid var(--border-medium); border-radius: 20px; background: white; cursor: pointer; font-size: 13px; }
.filtro-tabs button.active { background: var(--primary); color: white; border-color: var(--primary); }
    

/* ================================================================
   Page: dados-abertos
   ================================================================ */


.dados-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.dataset-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}
.dataset-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.dataset-card h3 {
    font-size: 1.1rem;
    margin: 0 0 8px;
    color: #2c3e50;
}
.dataset-card .descricao {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 12px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dataset-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.8rem;
}
/* badges: usa sistema centralizado do style.css */
.meta-item {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.meta-item i { font-size: 0.75rem; }
.dataset-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #ecf0f1;
}
.dataset-actions .btn { font-size: 0.85rem; padding: 6px 14px; }

/* form-group, form-row, form-actions, empty-message: usa sistema centralizado do style.css */
.form-group textarea { resize: vertical; }
.form-group .hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.form-group textarea.code-input {
    font-family: 'Consolas', 'Courier New', monospace;
    background: var(--bg-light);
    font-size: 0.88rem;
    line-height: 1.5;
}

@media (max-width: 1000px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
    .cards-grid { grid-template-columns: 1fr; }
}
    

/* ================================================================
   Page: documento-template-form
   ================================================================ */


.variaveis-panel { background: var(--bg-light); border: 1px solid var(--light-gray); border-radius: 8px; padding: 15px; margin-top: 10px; }
.variaveis-panel h4 { margin: 0 0 10px; font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }
.variaveis-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.variavel-chip {
    display: inline-block;
    background: white;
    border: 1px solid var(--light-gray);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: monospace;
    color: var(--dark);
}
.variavel-chip:hover { background: var(--primary); color: white; border-color: var(--primary); }

.checkbox-group { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; }
.checkbox-group input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

.form-row { display: grid; gap: 15px; margin-bottom: 15px; }
.form-row-3 { grid-template-columns: 2fr 1fr 1fr; }
.form-row-2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 768px) {
    .form-row-3, .form-row-2 { grid-template-columns: 1fr; }
}
    

/* ================================================================
   Page: documento-templates
   ================================================================ */


.action-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.action-btns .btn { white-space: nowrap; }
.dashboard-section { background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
    

/* ================================================================
   Page: documentos-oficiais
   ================================================================ */


.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.filter-bar select { padding: 8px 12px; border: 1px solid var(--light-gray); border-radius: 6px; font-size: 0.9rem; }

/* badges: usa sistema centralizado do style.css */

.assinado-sim { color: var(--success); font-weight: 600; }
.assinado-nao { color: var(--danger); font-weight: 600; }

.action-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.action-btns .btn { white-space: nowrap; }

/* modal: usa sistema centralizado do style.css */

.verif-result { text-align: center; padding: 20px; }
.verif-result .icon { font-size: 3rem; margin-bottom: 15px; }
.verif-result.valido .icon { color: var(--success); }
.verif-result.invalido .icon { color: var(--danger); }
.verif-result h3 { margin: 0 0 10px; }
.verif-result .hash-info { background: var(--bg-light); border-radius: 8px; padding: 15px; margin-top: 15px; text-align: left; font-family: monospace; font-size: 0.85rem; word-break: break-all; }
.verif-result .hash-info label { font-weight: 600; display: block; margin-bottom: 5px; font-family: 'Segoe UI', sans-serif; }

.file-input-wrapper { border: 2px dashed var(--light-gray); border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; transition: border-color 0.2s; }
.file-input-wrapper:hover { border-color: var(--primary); }
.file-input-wrapper input[type=file] { display: none; }
.file-input-wrapper .file-label { color: var(--gray); }
.file-input-wrapper .file-name { color: var(--dark); font-weight: 600; margin-top: 8px; }

.dashboard-section { background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
    

/* ================================================================
   Page: email-rascunhos
   ================================================================ */


.email-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    align-items: center;
}
.email-filters .btn { font-size: 13px; padding: 6px 14px; }
.email-filters .btn.active {
    background: var(--primary);
    color: white;
}
.email-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--gray);
}

.email-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.email-card {
    background: var(--white);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: box-shadow 0.2s;
    border-left: 4px solid var(--primary);
}
.email-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.email-card.tipo-questionamento { border-left-color: #3498db; }
.email-card.tipo-solicitacao { border-left-color: #e67e22; }
.email-card.tipo-documento { border-left-color: #27ae60; }
.email-card.tipo-informativo { border-left-color: #95a5a6; }
.email-card.tipo-agendamento { border-left-color: #9b59b6; }
.email-card.status-enviado { opacity: 0.7; border-left-color: #27ae60; }
.email-card.status-descartado { opacity: 0.5; border-left-color: #ccc; }

.email-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.email-card-header h4 {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}
.email-card-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 8px;
}
.email-card-meta i { margin-right: 4px; }
.email-card-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-height: 40px;
    overflow: hidden;
}

/* badges: usa sistema centralizado do style.css */

/* modal: usa sistema centralizado do style.css */
#emailModal .modal-content { max-width: 800px; }
.email-section { margin-bottom: 16px; }
.email-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.email-original {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}
.email-rascunho-editor {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}
.email-assunto-editor {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 8px;
}
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray);
}
.empty-state i { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-state p { font-size: 15px; }

/* Variaveis de cor semanticas */
:root {
    --panel-blue-bg: #e3f2fd;
    --panel-blue-border: #90caf9;
    --panel-blue-text: #1565c0;
    --panel-blue-accent: #42a5f5;
    --panel-purple-bg: #f3e5f5;
    --panel-purple-border: #ce93d8;
    --panel-purple-text: #6a1b9a;
    --panel-orange-bg: #fff8e1;
    --panel-orange-border: #ffe082;
    --panel-orange-text: #e65100;
}

/* Painel de raciocinio IA */
.reasoning-panel {
    background: var(--panel-blue-bg);
    border: 1px solid var(--panel-blue-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.reasoning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--panel-blue-text);
}
.reasoning-header .fa-chevron-down { margin-left: auto; font-size: 11px; transition: transform 0.2s; }
.reasoning-header.collapsed .fa-chevron-down { transform: rotate(-90deg); }
.reasoning-detail {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 10px;
}
.reasoning-detail p { margin: 6px 0; }
.deteccao-item {
    background: white;
    border-radius: 4px;
    padding: 4px 8px;
    margin: 4px 0;
    border-left: 3px solid var(--panel-blue-accent);
    font-size: 12px;
}
/* confianca usa badge padrao do style.css */
/* .btn-purple e .btn-orange movidos para style.css */
.quick-action-btn { margin-top: 8px; }

/* Utilities para template strings */
.flex-row { display: flex; gap: 6px; }
.flex-row-gap8 { display: flex; gap: 8px; }
.btn-discard { color: var(--danger); }
.reasoning-actions { margin: 4px 0; padding-left: 20px; }
.thread-msg-status { text-align: center; color: var(--gray); font-size: 12px; }
.thread-msg-error { color: var(--danger); font-size: 12px; }

/* Quick-action panels */
.quick-action-panel {
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.quick-action-panel h5 {
    margin: 0 0 10px;
    font-size: 13px;
}
.agendamento-panel {
    background: var(--panel-purple-bg);
    border: 1px solid var(--panel-purple-border);
}
.agendamento-panel h5 { color: var(--panel-purple-text); }
.solicitacao-panel {
    background: var(--panel-orange-bg);
    border: 1px solid var(--panel-orange-border);
}
.solicitacao-panel h5 { color: var(--panel-orange-text); }
.panel-field {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}
.panel-field label {
    font-size: 12px;
    font-weight: 600;
    min-width: 80px;
    color: var(--gray);
}
.panel-field input, .panel-field select, .panel-field textarea {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
}

/* Historico conversa (thread) */
.thread-toggle {
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.thread-toggle:hover { text-decoration: underline; }
.thread-messages {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 16px;
}
.thread-msg {
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
}
.thread-msg.entrada { background: #f5f5f5; margin-right: 20%; }
.thread-msg.saida { background: #e3f2fd; margin-left: 20%; }
.thread-msg-meta {
    font-size: 11px;
    color: var(--gray);
    margin-bottom: 4px;
}
    

/* ================================================================
   Page: escalonamento-regras
   ================================================================ */


.esc-section {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.esc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.esc-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.esc-header .actions {
    display: flex;
    gap: 8px;
}

.esc-table {
    width: 100%;
    border-collapse: collapse;
}
.esc-table th {
    background: var(--light-gray);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
.esc-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--light-gray);
    font-size: 0.9rem;
    vertical-align: middle;
}
.esc-table tr:hover { background: rgba(0,0,0,0.02); }

.drag-handle {
    cursor: grab;
    color: #bbb;
    font-size: 1rem;
}
.drag-handle:hover { color: var(--text-secondary); }

/* badges: usa sistema centralizado do style.css */

.notif-icons { display: flex; gap: 6px; }
.notif-icons i { font-size: 0.9rem; color: #bbb; }
.notif-icons i.active { color: var(--primary); }

.toggle-ativo {
    width: 40px;
    height: 22px;
    background: #ccc;
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}
.toggle-ativo.on { background: #2e7d32; }
.toggle-ativo::after {
    content: '';
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.3s;
}
.toggle-ativo.on::after { left: 20px; }

.ordem-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Modal styles */
.modal-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
@media (max-width: 600px) { .modal-form .form-row { grid-template-columns: 1fr; } }

.modal-form .form-group { margin-bottom: 15px; }
.modal-form .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: var(--text-secondary);
}
.modal-form .form-group .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
}
.modal-form .form-group select.form-control {
    /* herda appearance: none + seta SVG do style.css global */
}

.checkbox-group {
    display: flex;
    gap: 20px;
    align-items: center;
}
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal !important;
    cursor: pointer;
}

.section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    margin: 15px 0 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--light-gray);
}
    

/* ================================================================
   Page: feedback-cidadao
   ================================================================ */


.fb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}
.fb-stat-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    text-align: center;
}
.fb-stat-card h3 {
    font-size: 2rem;
    margin: 0;
    color: var(--primary);
}
.fb-stat-card p {
    color: var(--text-secondary);
    margin: 5px 0 0;
    font-size: 0.85rem;
}
.fb-stat-card.pendentes h3 { color: #ef6c00; }
.fb-stat-card.acao h3 { color: #1565c0; }
.fb-stat-card.publicados h3 { color: #2e7d32; }

.fb-section {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.fb-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}
.fb-section-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.fb-table {
    width: 100%;
    border-collapse: collapse;
}
.fb-table th {
    background: var(--light-gray);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
.fb-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--light-gray);
    font-size: 0.9rem;
    vertical-align: middle;
}
.fb-table tr { cursor: pointer; }
.fb-table tr:hover { background: rgba(0,0,0,0.03); }

/* badges: usa sistema centralizado do style.css */

.nota-stars {
    color: #f9a825;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.tipo-origem-badge {
    display: inline-block;
    background: var(--bg-lighter);
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.comentario-truncated {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filtro-status {
    display: flex;
    gap: 10px;
    align-items: center;
}
.filtro-status select {
    padding: 6px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Detail panel */
.fb-detail-panel {
    display: none;
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border-left: 4px solid var(--primary);
}
.fb-detail-panel.visible { display: block; }

.fb-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}
.fb-detail-header h3 { margin: 0; font-size: 1rem; }
.fb-detail-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-light);
}
.fb-detail-close:hover { color: var(--text-primary); }

.fb-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--light-gray);
    border-radius: 8px;
}
.fb-detail-meta .meta-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.fb-detail-meta .meta-item span {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.fb-detail-comentario {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.fb-action-section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.fb-action-section h4 {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.fb-action-section textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 10px;
}

.fb-historico {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.fb-historico h4 {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.fb-historico-item {
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
.fb-historico-item .data {
    font-size: 0.75rem;
    color: var(--text-light);
}
    

/* ================================================================
   Page: feriados
   ================================================================ */


/* Year navigation */
.year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}
.year-nav-btn {
    background: none;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.year-nav-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.year-tab {
    padding: 8px 18px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.year-tab:hover {
    background: var(--bg-secondary);
}
.year-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    font-weight: 600;
}

/* Top bar with button */
.feriados-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

/* Calendar grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 1400px) {
    .calendar-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .calendar-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .calendar-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Month card */
.month-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.month-header {
    background: var(--bg-secondary);
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    text-transform: capitalize;
    border-bottom: 1px solid var(--border-light);
}
.month-body {
    padding: 6px 8px 8px;
}

/* Day grid */
.day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.78rem;
}
.day-header {
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
    font-size: 0.7rem;
}
.day-header.dom {
    color: #e74c3c;
}
.day-cell {
    position: relative;
    padding: 3px 0 6px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
}
.day-cell:not(.empty):hover {
    background: var(--bg-secondary);
    border-radius: 4px;
}
.day-cell.empty {
    visibility: hidden;
    cursor: default;
}
.day-cell.dom {
    color: #e74c3c;
}
.day-cell.today .day-num {
    background: var(--primary);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Holiday underline */
.day-cell .holiday-bar {
    position: absolute;
    bottom: 1px;
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 2px;
}
.holiday-bar.nacional { background: #e74c3c; }
.holiday-bar.estadual { background: #27ae60; }
.holiday-bar.municipal { background: #2980b9; }
.holiday-bar.ponto_facultativo { background: #7f8c8d; }

/* Tooltip */
.day-cell .holiday-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.day-cell .holiday-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2c3e50;
}
.day-cell.feriado:hover .holiday-tooltip {
    display: block;
}

/* Legend */
.legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 0;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.legend-color {
    width: 24px;
    height: 4px;
    border-radius: 2px;
}
.legend-color.nacional { background: #e74c3c; }
.legend-color.estadual { background: #27ae60; }
.legend-color.municipal { background: #2980b9; }
.legend-color.ponto_facultativo { background: #7f8c8d; }
    

/* ================================================================
   Page: followup
   ================================================================ */


.followup-section {
    background: var(--white);
    border-radius: 10px;
    padding: 20px 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.followup-section h3 {
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-gray);
    font-size: 1rem;
    color: var(--text-primary);
}
.followup-section h3 i { margin-right: 8px; color: var(--primary); }
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}
.config-field {
    display: flex;
    flex-direction: column;
}
.config-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.config-field small {
    font-size: 11px;
    color: var(--gray);
    margin-top: 3px;
}
.config-field input[type="text"],
.config-field input[type="number"],
.config-field select,
.config-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}
.config-field textarea {
    resize: vertical;
}
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 12px;
}
.toggle-switch .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}
.toggle-switch .switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    border-radius: 26px;
    transition: 0.3s;
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}
.toggle-switch input:checked + .slider { background-color: var(--success); }
.toggle-switch input:checked + .slider:before { transform: translateX(24px); }
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.stats-row .stat-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}
.stats-row .stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.stats-row .stat-card .stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
}
.stats-row .stat-card .stat-icon {
    font-size: 1.5rem;
    color: var(--primary);
    opacity: 0.5;
    margin-bottom: 8px;
}
    

/* ================================================================
   Page: gamificacao
   ================================================================ */


.gam-top-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 25px; }
.gam-card { background: white; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center; }
.gam-card h3 { font-size: 2.5rem; margin: 0; color: var(--primary); }
.gam-card p { color: var(--text-secondary); margin: 5px 0 0; font-size: 0.9rem; }
/* badges: usa sistema centralizado do style.css */
.gam-card .ranking-pos { font-size: 2.5rem; font-weight: 700; color: var(--warning); }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-header h2 { font-size: 1.2rem; margin: 0; border: none; padding: 0; }
.period-selector { display: flex; gap: 5px; }
.period-btn { padding: 6px 16px; border: 1px solid var(--light-gray); background: white; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
.period-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th { background: var(--light-gray); padding: 12px 15px; text-align: left; font-weight: 600; }
.ranking-table td { padding: 12px 15px; border-bottom: 1px solid var(--light-gray); }
.ranking-table tr:nth-child(even) { background: #f9fafb; }
.ranking-table tr.current-user { background: rgba(52,152,219,0.1); font-weight: 600; }
.ranking-table tr.current-user td { border-bottom-color: var(--primary); }
.pos-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: 0.85rem; }
.pos-1 { background: #ffd700; color: var(--text-primary); }
.pos-2 { background: #c0c0c0; color: var(--text-primary); }
.pos-3 { background: #cd7f32; color: white; }
.pos-other { background: var(--light-gray); color: var(--text-secondary); }

.conquistas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin-bottom: 25px; }
.conquista-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center; position: relative; transition: transform 0.2s; }
.conquista-card:hover { transform: translateY(-2px); }
.conquista-card.locked { opacity: 0.5; filter: grayscale(0.8); }
.conquista-card .lock-overlay { position: absolute; top: 10px; right: 10px; font-size: 1.2rem; }
.conquista-card .emoji-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }
.conquista-card h4 { margin: 0 0 5px; font-size: 1rem; color: var(--dark); }
.conquista-card .desc { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 8px; }
.conquista-card .pontos-req { font-size: 0.75rem; color: var(--primary); font-weight: 600; }

.events-table { width: 100%; border-collapse: collapse; }
.events-table th { background: var(--light-gray); padding: 10px 15px; text-align: left; font-weight: 600; font-size: 0.9rem; }
.events-table td { padding: 10px 15px; border-bottom: 1px solid var(--light-gray); font-size: 0.9rem; }
.pontos-positivo { color: var(--success); font-weight: 600; }
.pontos-negativo { color: var(--danger); font-weight: 600; }

.dashboard-section { background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
    

/* ================================================================
   Page: importacao
   ================================================================ */


.ie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ie-section { background: white; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.ie-section h3 { margin: 0 0 15px; display: flex; align-items: center; gap: 8px; }

.drop-zone { border: 2px dashed #ccc; border-radius: 10px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 15px; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--primary); background: rgba(52,152,219,0.05); }
.drop-zone i { font-size: 2rem; color: #ccc; margin-bottom: 10px; display: block; }
.drop-zone p { color: var(--text-secondary); margin: 0; }
.drop-zone input { display: none; }

.wizard-steps { display: flex; gap: 0; margin-bottom: 20px; }
.wizard-step { flex: 1; padding: 10px 15px; background: #f0f0f0; text-align: center; font-size: 0.85rem; position: relative; }
.wizard-step.active { background: var(--primary); color: white; }
.wizard-step.done { background: #d4edda; color: #155724; }
.wizard-step:first-child { border-radius: 6px 0 0 6px; }
.wizard-step:last-child { border-radius: 0 6px 6px 0; }

.preview-table { max-height: 300px; overflow: auto; font-size: 0.8rem; margin: 10px 0; }
.preview-table table { width: 100%; border-collapse: collapse; }
.preview-table th, .preview-table td { padding: 4px 8px; border: 1px solid #eee; text-align: left; white-space: nowrap; }
.preview-table th { background: var(--bg-light); position: sticky; top: 0; }

.mapping-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 10px 0; }
.mapping-grid .arrow { color: var(--text-light); }
.mapping-grid select { padding: 4px 8px; border: 1px solid var(--border-medium); border-radius: 4px; font-size: 0.85rem; }

.result-box { padding: 15px; border-radius: 8px; margin-top: 15px; }
.result-box.success { background: #d4edda; border-left: 4px solid #27ae60; }
.result-box.partial { background: #fff3cd; border-left: 4px solid #ffc107; }
.result-box.error { background: #f8d7da; border-left: 4px solid #e74c3c; }

.export-card { display: flex; align-items: center; gap: 15px; padding: 15px; background: var(--bg-light); border-radius: 8px; margin-bottom: 10px; }
.export-card i { font-size: 1.5rem; color: var(--primary); }
.export-card .info { flex: 1; }
.export-card .info h4 { margin: 0; font-size: 0.95rem; }
.export-card .info small { color: var(--text-secondary); }

.progress-bar { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; margin: 10px 0; }
.progress-bar .fill { height: 100%; background: var(--primary); transition: width 0.3s; border-radius: 3px; }

.erros-list { max-height: 200px; overflow-y: auto; font-size: 0.8rem; margin-top: 10px; }
.erros-list .erro-item { padding: 4px 8px; background: #fff0f0; margin-bottom: 2px; border-radius: 4px; }
.erros-list .erro-item strong { color: #c62828; }

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

/* ================================================================
   Page: integracoes
   ================================================================ */


.integracoes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1024px) {
    .integracoes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .integracoes-grid { grid-template-columns: 1fr; }
}
.integracao-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.2s;
}
.integracao-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.integracao-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1rem;
}
.integracao-icon.azul { background: linear-gradient(135deg, #1a73e8, #0d47a1); }
.integracao-icon.verde { background: linear-gradient(135deg, #34a853, #1b7a2b); }
.integracao-icon.roxo { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.integracao-icon.laranja { background: linear-gradient(135deg, #ea8600, #c66900); }
.integracao-icon.whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); }
.integracao-icon.vermelho { background: linear-gradient(135deg, #e53935, #b71c1c); }
.integracao-icon.cinza { background: linear-gradient(135deg, #607d8b, #455a64); }
.integracao-icon.meta { background: linear-gradient(135deg, #1877f2, #0d5dc7); }
.integracao-icon.teal { background: linear-gradient(135deg, #009688, #00695c); }
.integracao-icon.indigo { background: linear-gradient(135deg, #3f51b5, #283593); }
.integracao-icon.amber { background: linear-gradient(135deg, #ffa000, #e65100); }
.integracao-icon.cyan { background: linear-gradient(135deg, #00bcd4, #00838f); }
.integracao-icon.pink { background: linear-gradient(135deg, #e91e63, #ad1457); }
.integracao-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.integracao-card .descricao {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    flex: 1;
    line-height: 1.4;
}
.integracao-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-pill.configurado {
    background: #e8f5e9;
    color: #2e7d32;
}
.status-pill.nao-configurado {
    background: var(--bg-lighter);
    color: #9e9e9e;
}
.status-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.status-pill.configurado .dot { background: #2e7d32; }
.status-pill.nao-configurado .dot { background: #bdbdbd; }
.integracao-footer .btn {
    font-size: 0.8rem;
    padding: 6px 14px;
}
.btn-sync {
    background: #1a73e8;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-sync:hover { background: #1558b0; }
.btn-sync:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-config {
    background: var(--bg-lighter);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-config:hover { background: #eee; }
.integracao-footer .btn-sync,
.integracao-footer .btn-config,
.integracao-footer .btn-danger-sm {
    min-width: 110px;
    justify-content: center;
}

/* WhatsApp detail panel */
.whatsapp-detail {
    margin: 0.75rem 0;
    padding: 1rem;
    background: var(--bg-lighter, #f5f5f5);
    border-radius: 8px;
    text-align: center;
}
.whatsapp-detail img {
    max-width: 256px;
    border-radius: 8px;
    border: 1px solid var(--border-medium, #ddd);
}
.whatsapp-detail .qr-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
.whatsapp-detail .session-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.whatsapp-detail .session-info i {
    color: var(--success, #2e7d32);
}
.status-pill.conectado {
    background: #e8f5e9;
    color: #2e7d32;
}
.status-pill.conectado .dot { background: #2e7d32; }
.status-pill.aguardando {
    background: #fff3e0;
    color: #e65100;
}
.status-pill.aguardando .dot { background: #e65100; }
.status-pill.erro {
    background: #fbe9e7;
    color: #c62828;
}
.status-pill.erro .dot { background: #c62828; }
.btn-danger-sm {
    background: #e53935;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-danger-sm:hover { background: #c62828; }
.btn-danger-sm:disabled { opacity: 0.6; cursor: not-allowed; }
    

/* ================================================================
   Page: jornada-cidadao
   ================================================================ */


:root {
    --cor-conversa: #25d366;
    --cor-atendimento: #00897b;
    --cor-solicitacao: #1976d2;
    --cor-agendamento: #ff9800;
    --cor-documento: #9c27b0;
    --cor-nps: #f44336;
    --cor-email: #2196f3;
    --cor-sms: #FF6F00;
    --cor-plano: #607d8b;
}

.journey-header {
    display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem;
    padding-bottom: 1rem; border-bottom: 1px solid #eee;
}
.journey-header .cidadao-info { flex: 1; }
.journey-header .cidadao-info h2 { margin: 0; font-size: 1.3rem; }
.journey-header .cidadao-info p { color: var(--text-secondary); margin: 4px 0 0; font-size: 0.85rem; }

.journey-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem; margin-bottom: 1.5rem;
}
/* .stat-card: usa sistema centralizado do style.css */

.canais-usados { display: flex; gap: 6px; margin-bottom: 1.5rem; }

/* .timeline, .timeline-item, .timeline-dot: usa sistema centralizado do style.css */
.dot-conversa { background: var(--cor-conversa); box-shadow: 0 0 0 2px var(--cor-conversa); }
.dot-atendimento { background: var(--cor-atendimento); box-shadow: 0 0 0 2px var(--cor-atendimento); }
.dot-solicitacao { background: var(--cor-solicitacao); box-shadow: 0 0 0 2px var(--cor-solicitacao); }
.dot-agendamento { background: var(--cor-agendamento); box-shadow: 0 0 0 2px var(--cor-agendamento); }
.dot-documento { background: var(--cor-documento); box-shadow: 0 0 0 2px var(--cor-documento); }
.dot-nps { background: var(--cor-nps); box-shadow: 0 0 0 2px var(--cor-nps); }
.dot-email { background: var(--cor-email); box-shadow: 0 0 0 2px var(--cor-email); }
.dot-sms { background: var(--cor-sms); box-shadow: 0 0 0 2px var(--cor-sms); }
.dot-plano { background: var(--cor-plano); box-shadow: 0 0 0 2px var(--cor-plano); }

.timeline-item .ev-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.timeline-item .ev-tipo {
    text-transform: uppercase;
}

.timeline-item .ev-data { font-size: 0.75rem; color: var(--text-light); }
.timeline-item .ev-titulo { font-weight: 600; font-size: 0.9rem; margin: 4px 0; }
.timeline-item .ev-detalhe { font-size: 0.8rem; color: var(--text-secondary); }
.timeline-item .ev-detalhe span { margin-right: 12px; }

.filtros-timeline {
    display: flex; gap: 6px; margin-bottom: 1rem; flex-wrap: wrap;
}
.filtro-btn {
    padding: 4px 12px; border: 1px solid var(--border-medium); border-radius: 20px;
    background: #fff; cursor: pointer; font-size: 0.8rem; transition: all 0.15s;
}
.filtro-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn-resumo {
    background: none; border: none; cursor: pointer; color: #1976d2;
    font-size: 0.85rem; padding: 2px 6px; border-radius: 4px;
    transition: background 0.15s; text-decoration: none;
}
.btn-resumo:hover { background: #e3f2fd; text-decoration: none; }
.meet-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    background: #e8f5e9; border-radius: 6px; font-size: 0.8rem; color: #2e7d32;
    text-decoration: none; margin-top: 4px;
}
.meet-link:hover { background: #c8e6c9; }

/* Journey Map Visual */
.journey-map {
    background: #fff;
    border: 1px solid var(--border-base, #e0e0e0);
    border-radius: 10px;
    padding: 20px 20px 16px;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.jm-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.jm-flow {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 0 10px;
}
.jm-flow::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 48px;
    right: 48px;
    height: 3px;
    background: #e0e0e0;
    border-radius: 2px;
    z-index: 0;
}
.jm-phase {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.jm-node {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: default;
    transition: transform 0.2s;
}
.jm-node:hover { transform: scale(1.12); }
.jm-node.empty {
    background: #e0e0e0 !important;
    color: #bbb;
    box-shadow: none;
}
.jm-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #333;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #fff;
}
.jm-phase-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #555);
    margin-top: 10px;
    text-align: center;
}
.jm-phase-detail {
    font-size: 0.7rem;
    color: var(--text-light, #999);
    margin-top: 2px;
    text-align: center;
}
.jm-sentiment {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.jm-sentiment-label {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    white-space: nowrap;
}
.jm-sentiment-bar {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}
.jm-sentiment-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* modal: usa padrão global .modal / .modal-content do style.css */
.resumo-text { font-size: 0.9rem; color: #444; white-space: pre-wrap; line-height: 1.5; }
    

/* ================================================================
   Page: legislacao-urbana
   ================================================================ */


.legislacao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.legislacao-filters {
    display: flex;
    gap: 10px;
    align-items: center;
}
.legislacao-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s;
}
.legislacao-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.legislacao-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.legislacao-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.legislacao-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.legislacao-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.badge-tipo-lei { background: #eaf0fb; color: #2c5aa0; }
.badge-tipo-lei_complementar { background: #f0eafb; color: #7e3af2; }
.badge-tipo-lei_federal { background: #fef3e2; color: #c87000; }
.badge-tipo-decreto { background: #e8f8f0; color: #1a8a5c; }
.badge-tipo-decreto_federal { background: #e6f5ee; color: #15803d; }
.badge-camada {
    background: #f0f4ff;
    color: #4a6fa5;
    border: 1px solid #d0ddf0;
}
.legislacao-ementa {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}
.legislacao-restricoes {
    font-size: 12px;
    color: #666;
    background: #fff8e6;
    border-left: 3px solid #f39c12;
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}
.legislacao-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.legislacao-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
}
.legislacao-url {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-top: 6px;
}
.legislacao-inactive {
    opacity: 0.5;
}
/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}
.modal-overlay.active {
    display: flex;
}
.modal-box {
    background: var(--bg-primary, #fff);
    border-radius: 10px;
    width: 600px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-medium);
}
.modal-header h3 {
    margin: 0;
    font-size: 16px;
}
.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
}
.modal-body {
    padding: 20px;
}
.modal-body .form-group {
    margin-bottom: 14px;
}
.modal-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.modal-body .form-control {
    width: 100%;
}
.modal-body textarea.form-control {
    min-height: 80px;
    resize: vertical;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-medium);
}
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}
.empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}
    

/* ================================================================
   Page: lgpd
   ================================================================ */


.lgpd-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.lgpd-tabs .btn { transition: background 0.2s; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* badges: usa sistema centralizado do style.css */

.form-inline { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; padding: 15px; background: var(--bg-light); border-radius: 8px; }
.form-inline .form-group { display: flex; flex-direction: column; }
.form-inline .form-group label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.form-inline .form-group input,
.form-inline .form-group select { padding: 8px 10px; border: 1px solid var(--border-medium); border-radius: 6px; font-size: 13px; }

.prazo-ok { color: #2e7d32; }
.prazo-alerta { color: #ef6c00; }
.prazo-estourado { color: #c62828; font-weight: bold; }

/* modal: usa padrão global .modal / .modal-content do style.css */
    

/* ================================================================
   Page: mapa
   ================================================================ */


.mapa-layout {
    display: flex;
    gap: 0;
    height: calc(100vh - 200px);
}
.mapa-col-left {
    flex: 1;
    min-width: 0;
    position: relative;
}
.mapa-col-right {
    flex: 0 0 280px;
    overflow-y: auto;
    border-left: 1px solid var(--border-medium);
    background: var(--bg-primary, #fff);
}
#map {
    width: 100%;
    height: 100%;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--border-medium);
    border-right: none;
}
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
    align-items: center;
}
.filter-bar label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.toggle-group {
    display: flex;
    gap: 0;
}
.toggle-group .btn {
    border-radius: 0;
}
.toggle-group .btn:first-child {
    border-radius: 6px 0 0 6px;
}
.toggle-group .btn:last-child {
    border-radius: 0 6px 6px 0;
}
.toggle-group .btn.active {
    background: var(--primary, #3498db);
    color: #fff;
}
.bairro-ranking table {
    width: 100%;
    font-size: 13px;
}
.bairro-ranking table th,
.bairro-ranking table td {
    padding: 6px 8px;
}
.marker-aberto { color: #e74c3c; }
.marker-em_andamento { color: #f39c12; }
.marker-resolvido { color: #27ae60; }
.legenda-mapa {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.legenda-mapa span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.legenda-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.mapa-fullscreen .sidebar,
.mapa-fullscreen .topbar,
.mapa-fullscreen .dashboard-section:first-child,
.mapa-fullscreen .mapa-col-right {
    display: none !important;
}
.mapa-fullscreen .main-content {
    margin-left: 0 !important;
}
.mapa-fullscreen .content {
    padding: 0 !important;
}
.mapa-fullscreen .mapa-layout {
    height: 100vh !important;
}
.mapa-fullscreen .mapa-col-left {
    flex: 1 !important;
}
.mapa-fullscreen #map {
    border-radius: 0;
    border: none;
}
.mapa-fullscreen .gis-panel {
    display: block !important;
}
.btn-fullscreen-mapa {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}
.btn-fullscreen-mapa:hover {
    background: #f4f4f4;
}
/* GIS Panel */
.gis-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    width: 290px;
    max-height: calc(100% - 20px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.2s;
}
.gis-panel.collapsed {
    width: 42px;
}
.gis-panel.collapsed .gis-panel-body,
.gis-panel.collapsed .gis-panel-title span,
.gis-panel.collapsed .gis-panel-footer {
    display: none;
}
.gis-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--primary, #3498db);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.gis-panel-title i {
    font-size: 15px;
}
.gis-panel-body {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
}
.gis-group-header {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #888);
    background: #f8f9fa;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.gis-layer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.gis-layer-item:hover {
    background: #f0f4ff;
}
.gis-layer-item input[type="checkbox"] {
    margin: 0;
    accent-color: var(--primary, #3498db);
}
.gis-layer-item .layer-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.gis-layer-item label {
    flex: 1;
    cursor: pointer;
    line-height: 1.3;
}
.gis-panel-footer {
    padding: 8px 12px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}
.gis-opacity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}
.gis-opacity-row input[type="range"] {
    flex: 1;
    height: 4px;
}
.gis-identify-hint {
    font-size: 10px;
    color: #999;
    margin-top: 6px;
    text-align: center;
}
/* Identify popup */
.identify-popup {
    max-width: 350px;
    max-height: 400px;
    overflow-y: auto;
}
.identify-popup h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--primary, #3498db);
}
.identify-section {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.identify-section:last-child {
    border-bottom: none;
}
.identify-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    margin-bottom: 4px;
}
.identify-attr {
    font-size: 11px;
    color: #666;
    line-height: 1.5;
}
.identify-attr strong {
    color: #333;
}
.identify-lei {
    background: #fff8e6;
    border-left: 3px solid #f39c12;
    padding: 6px 8px;
    margin-top: 6px;
    border-radius: 0 4px 4px 0;
    font-size: 11px;
}
.identify-lei-title {
    font-weight: 700;
    color: #d35400;
    font-size: 12px;
}
.identify-lei-restricoes {
    color: #666;
    margin-top: 3px;
}
.gis-loading-identify {
    text-align: center;
    padding: 15px;
    color: #999;
    font-size: 12px;
}
@media (max-width: 900px) {
    .mapa-layout {
        flex-direction: column;
        height: auto;
    }
    .mapa-col-left {
        flex: none;
        height: 400px;
    }
    .mapa-col-right {
        flex: none;
    }
    .gis-panel {
        width: 240px;
    }
}
    

/* ================================================================
   Page: metricas-omnichannel
   ================================================================ */


.filtro-periodo {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.filtro-periodo label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.filtro-periodo input[type="date"] {
    padding: 6px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
}

.omni-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}
.omni-stat-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    text-align: center;
}
.omni-stat-card h3 {
    font-size: 2rem;
    margin: 0;
    color: var(--primary);
}
.omni-stat-card p {
    color: var(--text-secondary);
    margin: 5px 0 0;
    font-size: 0.85rem;
}
.omni-stat-card.digital h3 { color: #1565c0; }
.omni-stat-card.fcr h3 { color: #2e7d32; }
.omni-stat-card.nota h3 { color: #ef6c00; }

.omni-section {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.omni-section h3 {
    font-size: 1rem;
    margin: 0 0 15px;
    color: var(--text-primary);
}

.omni-table {
    width: 100%;
    border-collapse: collapse;
}
.omni-table th {
    background: var(--light-gray);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
}
.omni-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--light-gray);
    font-size: 0.9rem;
}
.omni-table tr:hover { background: rgba(0,0,0,0.02); }

.metricas-canal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 900px) { .chart-row { grid-template-columns: 1fr; } }

.nps-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nps-bar-track {
    flex: 1;
    height: 10px;
    background: var(--light-gray);
    border-radius: 5px;
    overflow: hidden;
}
.nps-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}
.nps-bar-fill.promotor { background: #2e7d32; }
.nps-bar-fill.neutro { background: #f9a825; }
.nps-bar-fill.detrator { background: #c62828; }

.switch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}
.switch-card:last-child { border-bottom: none; }
.switch-info { display: flex; align-items: center; gap: 12px; }
.switch-arrow { color: var(--text-light); font-size: 1.2rem; }
.switch-count {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
}
    

/* ================================================================
   Page: minutar-documento
   ================================================================ */


.dashboard-section { background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }

.selecao-row { display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-end; }
.selecao-row .form-group { flex: 1; min-width: 200px; margin-bottom: 0; }
.selecao-row .buscar-group { display: flex; gap: 8px; align-items: flex-end; }
.selecao-row .buscar-group .form-group { flex: 1; }

.template-info { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; flex-wrap: wrap; }
.template-info h3 { margin: 0; font-size: 1.1rem; }

.variaveis-panel { background: var(--bg-light); border: 1px solid var(--light-gray); border-radius: 8px; padding: 15px; margin-top: 15px; }
.variaveis-panel h4 { margin: 0 0 10px; font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }
.variaveis-list { display: flex; flex-direction: column; gap: 6px; }
.variavel-row { display: flex; gap: 10px; align-items: baseline; font-size: 0.85rem; }
.variavel-row .var-name { font-family: monospace; color: var(--primary); font-weight: 600; min-width: 200px; }
.variavel-row .var-value { color: var(--dark); word-break: break-word; }

.signatarios-table { width: 100%; }
.signatarios-table th, .signatarios-table td { padding: 8px 12px; text-align: left; }
.signatarios-table th { background: var(--bg-light); font-size: 0.85rem; text-transform: uppercase; color: var(--gray); letter-spacing: 0.5px; }
.signatarios-table td { border-bottom: 1px solid var(--bg-light); }
.signatarios-actions { display: flex; gap: 8px; margin-bottom: 15px; }

.gerar-panel { text-align: center; padding: 10px 0; }
.gerar-panel .btn { font-size: 1rem; padding: 12px 30px; }

.success-result { background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 10px; padding: 25px; text-align: center; }
.success-result .icon { font-size: 3rem; color: var(--success); margin-bottom: 10px; }
.success-result h3 { margin: 0 0 10px; color: #2e7d32; }
.success-result a { color: var(--primary); text-decoration: underline; }

.hidden { display: none !important; }

/* Modal operador */
.operador-list { max-height: 300px; overflow-y: auto; }
.operador-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--bg-light); cursor: pointer; transition: background 0.15s; }
.operador-item:hover { background: var(--bg-light); }
.operador-item .nome { font-weight: 600; }
.operador-item .email { font-size: 0.85rem; color: var(--gray); }

.loading-spinner { text-align: center; padding: 20px; color: var(--gray); }
    

/* ================================================================
   Page: ouvidoria
   ================================================================ */


.ouvidoria-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 20px; }
.ouv-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center; }
.ouv-card h3 { font-size: 2rem; margin: 0; }
.ouv-card p { color: var(--text-secondary); margin: 5px 0 0; font-size: 0.85rem; }
.ouv-card.excedido h3 { color: var(--danger); }
.ouv-card.resolvido h3 { color: var(--success); }
.ouv-card.aberto h3 { color: var(--warning); }
.ouv-card.lai h3 { color: var(--primary); }

.categoria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cat-card { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); border-left: 4px solid #ccc; }
.cat-card.denuncia { border-left-color: #e74c3c; }
.cat-card.reclamacao { border-left-color: #f39c12; }
.cat-card.sugestao { border-left-color: #3498db; }
.cat-card.elogio { border-left-color: #27ae60; }
.cat-card.informacao_lai { border-left-color: #9b59b6; }
.cat-card h4 { margin: 0 0 8px; font-size: 0.9rem; color: var(--text-secondary); }
.cat-card .cat-stats { display: flex; justify-content: space-between; font-size: 0.85rem; }
.cat-card .cat-total { font-size: 1.5rem; font-weight: 700; }

.filtros-ouv { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; align-items: center; }
.filtros-ouv select, .filtros-ouv input { padding: 6px 10px; border: 1px solid var(--border-medium); border-radius: 6px; font-size: 0.9rem; }

/* badges: usa sistema centralizado do style.css */

.charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px; }
.chart-box { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.chart-box h3 { margin: 0 0 15px; font-size: 1rem; color: var(--text-primary); }

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


/* ================================================================
   Page: perfil-form
   ================================================================ */


.perm-group {
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.perm-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.perm-group-header:hover {
    background: var(--light-gray);
}
.perm-group-header .grupo-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
}
.perm-group-header .grupo-title i.chevron {
    transition: transform 0.2s;
    font-size: 0.8rem;
    color: var(--gray);
}
.perm-group-header .grupo-title i.chevron.rotated {
    transform: rotate(90deg);
}
.perm-group-header .grupo-actions {
    display: flex;
    gap: 0.5rem;
}
.perm-group-header .grupo-actions button {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    color: var(--gray);
    transition: all 0.15s;
}
.perm-group-header .grupo-actions button:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.perm-group-header .grupo-counter {
    font-size: 0.8rem;
    color: var(--gray);
    margin-left: 0.5rem;
}
.perm-group-body {
    padding: 0.75rem 1rem;
    display: none;
    border-top: 1px solid var(--light-gray);
}
.perm-group-body.open {
    display: block;
}
.perm-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
}
.perm-item input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.perm-item .perm-info {
    display: flex;
    flex-direction: column;
}
.perm-item .perm-info .perm-name {
    font-weight: 500;
    font-size: 0.9rem;
}
.perm-item .perm-info .perm-slug {
    font-size: 0.75rem;
    color: var(--gray);
    font-family: monospace;
}
.perm-item .perm-info .perm-desc {
    font-size: 0.8rem;
    color: var(--gray);
}
.perm-summary {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.perm-summary .count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}
.perm-summary .label {
    font-size: 0.85rem;
    color: var(--gray);
}
    

/* ================================================================
   Page: planos-acompanhamento
   ================================================================ */


.planos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.plano-card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.plano-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.plano-card-header {
    padding: 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.plano-card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    word-break: break-word;
}

.plano-card-body {
    padding: 12px 20px;
}
.plano-card-body p {
    margin: 0;
    color: var(--gray);
    font-size: 0.88rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plano-card-stats {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.plano-card-stats i {
    margin-right: 4px;
}

.plano-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--light-gray);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.plano-card-footer .btn {
    font-size: 0.82rem;
    padding: 6px 12px;
}

/* Badge cores customizadas para tipos de plano */
.badge-gestante { background: #fce4ec; color: #c62828; }
.badge-vacinacao { background: #e8f5e9; color: #2e7d32; }
.badge-pos_cirurgico { background: #fff3e0; color: #ef6c00; }
.badge-educacional { background: #e3f2fd; color: #1565c0; }
.badge-personalizado { background: #f5f5f5; color: #616161; }

/* Marcos list */
.marcos-section {
    margin-top: 20px;
}
.marcos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.marcos-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.marcos-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.marco-item {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: background 0.15s;
}
.marco-item:hover {
    background: #fafafa;
}

.marco-dia {
    min-width: 64px;
    text-align: center;
    padding: 8px 12px;
    background: var(--light-gray);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.marco-info {
    flex: 1;
    min-width: 0;
}
.marco-info h4 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.marco-info p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--gray);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.marco-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-icon-danger {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.btn-icon-danger:hover {
    background: #ffebee;
}

/* Campo condicional */
.campo-condicional {
    display: none;
}
.campo-condicional.visivel {
    display: block;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray);
}
.empty-state i {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.4;
}
.empty-state p {
    margin: 8px 0 0;
    font-size: 0.9rem;
}

/* Voltar link */
.voltar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-decoration: none;
}
.voltar-link:hover {
    text-decoration: underline;
}
    

/* ================================================================
   Page: poste-form
   ================================================================ */


.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-group { margin-bottom: 0.75rem; }
.form-group label { display: block; margin-bottom: 0.25rem; font-weight: 600; font-size: 0.875rem; }
.form-group .form-control { width: 100%; }
.form-group.full-width { grid-column: 1 / -1; }

.form-map-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}
.form-fields-col { min-width: 0; }
.form-map-col { min-width: 0; }
#form-map { width: 100%; height: 400px; border-radius: 8px; border: 1px solid var(--border-medium); }
.map-hint { font-size: 12px; color: var(--gray); margin-top: 4px; }
.coords-display { font-size: 12px; color: var(--text-secondary); margin-top: 4px; font-family: monospace; }

.historico-section { margin-top: 1.5rem; }
.historico-section h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.historico-table { width: 100%; }
.historico-table th { font-size: 0.75rem; text-transform: uppercase; color: var(--gray); }
.historico-table td { font-size: 0.875rem; }
.historico-empty { color: var(--gray); font-style: italic; font-size: 0.875rem; }

/* badges: usa sistema centralizado do style.css */

@media (max-width: 900px) {
    .form-map-container { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
}
    

/* ================================================================
   Page: postes
   ================================================================ */


.postes-layout {
    display: flex;
    height: calc(100vh - 160px);
    gap: 0;
}
.postes-sidebar {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-medium);
    background: #fff;
    min-width: 0;
}
.postes-map {
    flex: 0 0 60%;
    position: relative;
    min-width: 0;
}
#map { width: 100%; height: 100%; }

.filter-bar {
    display: flex;
    gap: 10px;
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    align-items: center;
    flex-wrap: wrap;
}
.filter-bar select, .filter-bar input {
    padding: 6px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.filter-bar input { flex: 1; min-width: 120px; }

.postes-header {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);
}
.postes-header h3 { font-size: 14px; margin: 0; color: var(--dark); }
.count-badge {
    background: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.postes-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.poste-card {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}
.poste-card:hover { background: var(--bg-light); }
.poste-card.destaque { background: #eef6ff; border-left: 3px solid var(--primary); }

.poste-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.poste-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.poste-info { flex: 1; min-width: 0; }
.poste-info .codigo { font-weight: 600; font-size: 13px; color: var(--dark); }
.poste-info .local { font-size: 12px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poste-referencia { font-size: 12px; color: var(--text-secondary); margin-top: 2px; font-style: italic; }
.poste-meta { display: flex; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--gray); }
.poste-ocorrencias { font-size: 11px; color: var(--primary); font-weight: 600; }

.status-ativo { background: #27ae60; }
.status-danificado { background: #f39c12; }
.status-desativado { background: #95a5a6; }

.marker-pin {
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    position: relative;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.marker-pin i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 12px;
}

.stats-bar {
    display: flex;
    gap: 12px;
    padding: 8px 15px;
    background: #fff;
    border-top: 1px solid #eee;
    align-items: center;
    font-size: 12px;
}
.stat-item { display: flex; align-items: center; gap: 4px; }
.stat-dot { width: 10px; height: 10px; border-radius: 50%; }

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray);
}
.empty-state i { font-size: 48px; margin-bottom: 10px; opacity: 0.3; }

@media (max-width: 900px) {
    .postes-layout { flex-direction: column; height: auto; }
    .postes-sidebar { flex: none; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border-medium); }
    .postes-map { flex: none; height: 50vh; }
}
    

/* ================================================================
   Page: predicao
   ================================================================ */


.pred-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 20px; }
.pred-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center; }
.pred-card h3 { font-size: 2rem; margin: 0; }
.pred-card p { color: var(--text-secondary); margin: 5px 0 0; font-size: 0.85rem; }
.pred-card.subindo h3 { color: #e74c3c; }
.pred-card.caindo h3 { color: #27ae60; }
.pred-card.estavel h3 { color: #3498db; }

.trend-arrow { font-size: 1.2rem; margin-right: 4px; }
.trend-arrow.up { color: #e74c3c; }
.trend-arrow.down { color: #27ae60; }
.trend-arrow.stable { color: var(--text-light); }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.chart-panel { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.chart-panel h3 { margin: 0 0 15px; font-size: 1rem; color: var(--text-primary); }
.chart-panel.full { grid-column: 1 / -1; }

.alerta-card { background: #fff8e1; border-left: 4px solid #ffc107; border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.alerta-card.aumento { border-left-color: #e74c3c; background: #fef0f0; }
.alerta-card.reducao { border-left-color: #27ae60; background: #f0fef0; }
.alerta-card i { font-size: 1.2rem; }

/* badges: usa sistema centralizado do style.css */

.filtros-pred { display: flex; gap: 12px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
.filtros-pred label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.filtros-pred select { min-width: 130px; }

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

/* ================================================================
   Page: rbac-compliance
   ================================================================ */


.compliance-tabs { display:flex; gap:0; border-bottom:2px solid var(--light-gray); margin-bottom:1.5rem; }
.compliance-tabs button { padding:0.75rem 1.25rem; border:none; background:none; cursor:pointer; font-size:0.9rem; color:var(--gray); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s; }
.compliance-tabs button.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.compliance-tabs button:hover:not(.active) { color:var(--dark); background:var(--light-bg); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-cards .stat-card { background:#fff; border:1px solid var(--light-gray); border-radius:8px; padding:1.25rem; text-align:center; }
.stat-cards .stat-card .stat-value { font-size:2rem; font-weight:700; color:var(--primary); }
.stat-cards .stat-card .stat-label { font-size:0.85rem; color:var(--gray); margin-top:0.25rem; }
.ssd-card { background:#fff; border:1px solid var(--light-gray); border-radius:8px; padding:1rem; margin-bottom:0.75rem; display:flex; justify-content:space-between; align-items:center; }
.ssd-card .ssd-info { display:flex; align-items:center; gap:1rem; }
.ssd-card .ssd-profiles { display:flex; align-items:center; gap:0.5rem; }
.ssd-card .ssd-profiles .badge { padding:0.35rem 0.75rem; font-size:0.85rem; }
.ssd-card .ssd-separator { color:var(--danger); font-weight:700; font-size:1.1rem; }
.audit-log .timeline-item { padding:0.75rem 1rem; border-left:3px solid var(--primary); margin-bottom:0.5rem; background:#fff; border-radius:0 4px 4px 0; }
.audit-log .timeline-item .timeline-meta { font-size:0.8rem; color:var(--gray); margin-bottom:0.25rem; }
.audit-log .timeline-item .timeline-action { font-weight:500; }
.matriz-scroll { max-height:500px; overflow:auto; }
.perm-check { color:var(--success); }
.perm-cross { color:var(--light-gray); }
.form-inline { display:flex; gap:0.5rem; align-items:end; margin-bottom:1rem; flex-wrap:wrap; }
.form-inline .form-group { margin-bottom:0; }
.form-inline select, .form-inline input { min-width:180px; }
    

/* ================================================================
   Page: report-builder
   ================================================================ */


.builder-topbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.builder-topbar input[type="text"] {
    flex: 1;
    min-width: 200px;
}
.builder-topbar select {
    min-width: 200px;
}
.config-row {
    margin-bottom: 15px;
}
.config-row label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.colunas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.colunas-grid label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: normal;
    font-size: 13px;
    background: #f5f7fa;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--border-base);
    transition: background 0.15s;
}
.colunas-grid label:hover {
    background: #eef2f7;
}
.colunas-grid label input:checked + span {
    font-weight: 600;
    color: var(--primary, #3498db);
}
.filtros-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.filtros-row .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.filtros-row .form-group label {
    font-size: 12px;
    color: #777;
    margin-bottom: 0;
}
.viz-options {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.viz-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
    font-size: 13px;
    cursor: pointer;
}
.preview-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
}
.resultado-info {
    font-size: 13px;
    color: #777;
    margin-left: auto;
}
.preview-table {
    width: 100%;
    overflow-x: auto;
}
.preview-table table {
    font-size: 13px;
}
.chart-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 20px;
    height: 400px;
}
.chart-container canvas {
    max-height: 400px;
}
.chart-hint {
    text-align: center;
    color: var(--text-light);
    font-size: 12px;
    margin-top: 6px;
}
.agendamentos-section {
    margin-top: 10px;
}
.agendamento-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f7fa;
    border: 1px solid var(--border-base);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.agendamento-card .info {
    font-size: 13px;
}
.agendamento-card .info strong {
    font-size: 14px;
}
.agendamento-card .info .meta {
    color: #777;
    font-size: 12px;
    margin-top: 2px;
}
.agendamento-card .actions {
    display: flex;
    gap: 6px;
}
/* modal: usa padrão global .modal / .modal-content do style.css */
.freq-fields {
    display: none;
    gap: 10px;
    margin-top: 8px;
}
.freq-fields.active {
    display: flex;
}
    

/* ================================================================
   Page: satisfacao
   ================================================================ */


.summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}
.summary-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border-top: 4px solid var(--border-medium);
}
.summary-card h3 {
    font-size: 2.2rem;
    margin: 0;
}
.summary-card p {
    color: var(--text-secondary);
    margin: 5px 0 0;
    font-size: 0.85rem;
}
.summary-card.nps-green { border-top-color: #27ae60; }
.summary-card.nps-green h3 { color: #27ae60; }
.summary-card.nps-yellow { border-top-color: #f39c12; }
.summary-card.nps-yellow h3 { color: #f39c12; }
.summary-card.nps-red { border-top-color: #e74c3c; }
.summary-card.nps-red h3 { color: #e74c3c; }
.summary-card.ces { border-top-color: #3498db; }
.summary-card.ces h3 { color: #3498db; }
.summary-card.total { border-top-color: #9b59b6; }
.summary-card.total h3 { color: #9b59b6; }

.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.filter-bar input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
}
.filter-bar label {
    font-weight: 500;
    color: var(--text-secondary);
}

.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.chart-box {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.chart-box h3 {
    margin: 0 0 15px;
    font-size: 1rem;
    color: var(--text-primary);
}

.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}
.tab-btn {
    padding: 10px 24px;
    border: 1px solid var(--border-medium);
    border-bottom: none;
    background: #f5f6fa;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
}
.tab-btn.active {
    background: white;
    color: var(--text-primary);
    border-color: #ddd;
    position: relative;
    z-index: 1;
}
.tab-content {
    background: white;
    border: 1px solid var(--border-medium);
    border-radius: 0 10px 10px 10px;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: none;
}
.tab-content.active { display: block; }
.tab-content table { width: 100%; border-collapse: collapse; }
.tab-content th, .tab-content td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ecf0f1; }
.tab-content th { background: #ecf0f1; font-weight: 600; }

/* badges: usa sistema centralizado do style.css */

@media (max-width: 900px) {
    .summary-cards { grid-template-columns: repeat(2, 1fr); }
    .charts-row { grid-template-columns: 1fr; }
}
    

/* ================================================================
   Page: score-risco
   ================================================================ */


.sr-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.sr-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center; }
.sr-card h3 { font-size: 2rem; margin: 0; }
.sr-card p { color: var(--text-secondary); margin: 5px 0 0; font-size: 0.85rem; }
.sr-card.alto h3 { color: #c62828; }
.sr-card.medio h3 { color: #ef6c00; }
.sr-card.baixo h3 { color: #2e7d32; }
.sr-card.media h3 { color: var(--primary); }

.chart-ranking-row { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-bottom: 25px; }
@media (max-width: 900px) { .chart-ranking-row { grid-template-columns: 1fr; } }

.chart-box { background: white; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.chart-box h3 { font-size: 1rem; margin: 0 0 15px; color: var(--text-primary); }
.chart-wrapper { max-width: 300px; margin: 0 auto; }

.ranking-box { background: white; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.ranking-box .header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.ranking-box h3 { font-size: 1rem; margin: 0; color: var(--text-primary); }

.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th { background: var(--light-gray); padding: 10px 12px; text-align: left; font-weight: 600; font-size: 0.85rem; }
.ranking-table td { padding: 10px 12px; border-bottom: 1px solid var(--light-gray); font-size: 0.9rem; }
.ranking-table tr:hover { background: rgba(0,0,0,0.02); }

.score-bar-cell { display: flex; align-items: center; gap: 8px; }
.score-bar { width: 100px; height: 10px; background: var(--light-gray); border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.score-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease; }
.score-bar-fill.critico { background: #c62828; }
.score-bar-fill.alto { background: #ef6c00; }
.score-bar-fill.medio { background: #f9a825; }
.score-bar-fill.baixo { background: #2e7d32; }
.score-value { font-weight: 600; min-width: 30px; }
.score-value.critico { color: #c62828; }
.score-value.alto { color: #ef6c00; }
.score-value.medio { color: #f9a825; }
.score-value.baixo { color: #2e7d32; }

.risk-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.risk-badge.critico { background: #ffebee; color: #c62828; }
.risk-badge.alto { background: #fff3e0; color: #ef6c00; }
.risk-badge.medio { background: #fffde7; color: #f57f17; }
.risk-badge.baixo { background: #e8f5e9; color: #2e7d32; }

.recalcular-section { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.spinner { display: none; margin-left: 10px; }
.spinner.active { display: inline-block; }

.dashboard-section { background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
    

/* ================================================================
   Page: social-listening
   ================================================================ */


.sl-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.sl-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center; }
.sl-card h3 { font-size: 2rem; margin: 0; }
.sl-card p { color: var(--text-secondary); margin: 5px 0 0; font-size: 0.85rem; }
.sl-card.total h3 { color: var(--primary); }
.sl-card.positivas h3 { color: var(--success); }
.sl-card.neutras h3 { color: var(--gray); }
.sl-card.negativas h3 { color: var(--danger); }

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.filter-row input[type=date] { padding: 8px 12px; border: 1px solid var(--light-gray); border-radius: 6px; font-size: 0.9rem; }

.chart-container { background: white; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 25px; }
.chart-container h3 { font-size: 1rem; margin: 0 0 15px; color: var(--text-primary); }

.mentions-feed { margin-bottom: 25px; }
.mention-card { background: white; border-radius: 10px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 12px; border-left: 4px solid #ccc; display: flex; gap: 15px; align-items: flex-start; }
.mention-card.sent-positivo { border-left-color: var(--success); }
.mention-card.sent-neutro { border-left-color: var(--gray); }
.mention-card.sent-negativo { border-left-color: var(--danger); }

.mention-icon { font-size: 1.5rem; flex-shrink: 0; width: 40px; text-align: center; }
.mention-body { flex: 1; min-width: 0; }
.mention-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 6px; }
.mention-author { font-weight: 600; font-size: 0.95rem; }
.mention-date { font-size: 0.8rem; color: var(--text-light); }
.mention-text { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.mention-footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.sent-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.sent-badge.positivo { background: #e8f5e9; color: #2e7d32; }
.sent-badge.neutro { background: var(--bg-lighter); color: #616161; }
.sent-badge.negativo { background: #ffebee; color: #c62828; }

/* Config section */
.config-section { background: white; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 25px; }
.config-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.config-header h3 { font-size: 1.1rem; margin: 0; }
.config-header i.toggle-icon { transition: transform 0.3s; }
.config-header.open i.toggle-icon { transform: rotate(180deg); }
.config-body { display: none; margin-top: 20px; }
.config-body.open { display: block; }

.checkbox-group { display: flex; gap: 15px; flex-wrap: wrap; }
.checkbox-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.9rem; }
.checkbox-group input[type=checkbox] { width: 18px; height: 18px; }

.toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }

.dashboard-section { background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
    

/* ================================================================
   Page: solicitacao-detail
   ================================================================ */


.solicitacao-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.solicitacao-title { font-size: 1.3rem; margin: 0; }
.solicitacao-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.solicitacao-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; background: white; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem; }
.info-item label { font-size: 0.75rem; text-transform: uppercase; font-weight: 600; color: var(--text-secondary); display: block; margin-bottom: 2px; }
.info-item span { font-size: 0.95rem; color: #222; }

.solicitacao-timeline { background: white; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.solicitacao-timeline h3 { margin: 0 0 1rem; font-size: 1rem; }
.solicitacao-timeline .timeline-item { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.solicitacao-timeline .timeline-item:last-child { border-bottom: none; }
.solicitacao-timeline .timeline-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; }
.solicitacao-timeline .timeline-icon.sla_pausado { background: #ede7f6; color: #4527a0; }
.solicitacao-timeline .timeline-icon.sla_retomado { background: #e8f5e9; color: #2e7d32; }
.solicitacao-timeline .timeline-icon.criado { background: #e3f2fd; color: #1565c0; }
.solicitacao-timeline .timeline-icon.comentario { background: #f3e5f5; color: #7b1fa2; }
.solicitacao-timeline .timeline-icon.transferencia { background: #fff3e0; color: #ef6c00; }
.solicitacao-timeline .timeline-icon.status_alterado { background: #e8f5e9; color: #2e7d32; }
.solicitacao-timeline .timeline-icon.atribuido { background: #e0f2f1; color: #00695c; }
.solicitacao-timeline .timeline-icon.devolvido { background: #fce4ec; color: #ad1457; }
.solicitacao-timeline .timeline-body { flex: 1; }
.solicitacao-timeline .timeline-body strong { font-size: 0.9rem; }
.solicitacao-timeline .timeline-body p { margin: 0.25rem 0 0; font-size: 0.85rem; color: #444; }
.solicitacao-timeline .timeline-body small { color: var(--text-light); font-size: 0.75rem; }

.comment-box { display: flex; gap: 0.75rem; margin-top: 1rem; }
.comment-box input { flex: 1; }

.transfer-box { display: flex; gap: 0.5rem; align-items: center; }

.poste-section { background: white; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem; border-left: 4px solid #f1c40f; }
.poste-section h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.poste-vinculado { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: #fffde7; border-radius: 6px; }
.poste-vinculado .poste-badge { width: 40px; height: 40px; border-radius: 50%; background: #f1c40f; color: #fff; display: flex; align-items: center; justify-content: center; }
.poste-busca-results { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-medium); border-radius: 6px; margin-top: 0.5rem; display: none; }
.poste-busca-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 0.875rem; }
.poste-busca-item:hover { background: var(--bg-light); }
.poste-busca-item:last-child { border-bottom: none; }
.poste-busca-item .ref { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; }

/* Assessor Interno - Painel lateral */
#assessor-panel {
    position: fixed; top: 0; right: -420px; width: 400px; height: 100vh;
    background: white; box-shadow: -2px 0 12px rgba(0,0,0,0.15);
    z-index: 1000; transition: right 0.3s ease;
    display: flex; flex-direction: column;
}
#assessor-panel.open { right: 0; }
.assessor-header { padding: 1rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.assessor-header h3 { margin: 0; font-size: 1rem; }
.assessor-messages { flex: 1; overflow-y: auto; padding: 1rem; }
.assessor-input-area { padding: 0.75rem; border-top: 1px solid #eee; display: flex; gap: 0.5rem; }
.assessor-input-area input { flex: 1; padding: 8px 12px; border: 1px solid var(--border-medium); border-radius: 6px; font-size: 0.9rem; }
.assessor-msg { margin-bottom: 1rem; }
.assessor-msg.operador { text-align: right; }
.assessor-msg .bubble { display: inline-block; padding: 0.75rem 1rem; border-radius: 12px; max-width: 95%; text-align: left; font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.assessor-msg.operador .bubble { background: #e3f2fd; border-bottom-right-radius: 4px; }
.assessor-msg.assessor .bubble { background: #f5f5f5; border: 1px solid #e0e0e0; border-bottom-left-radius: 4px; }
.assessor-chunks { font-size: 0.72rem; color: #888; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed #ddd; }
.assessor-chunks .chunk-ref { display: inline-block; background: #e8eaf6; color: #283593; padding: 2px 6px; border-radius: 4px; margin: 2px; font-size: 0.7rem; }
.assessor-loading { text-align: center; padding: 1rem; color: #999; }
.assessor-msg-time { font-size: 0.7rem; color: #aaa; margin-top: 4px; }
@media (max-width: 768px) { #assessor-panel { width: 100%; right: -100%; } }
    

/* ================================================================
   Page: solicitacao-form
   ================================================================ */


.registro-container { max-width: 800px; margin: 0 auto; }
.form-section { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.form-section h3 { margin: 0 0 16px; font-size: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
/* .form-row: usa sistema centralizado do style.css */
.docs-info { margin-top: 1rem; padding: 1rem; background: #fff8e1; border-radius: 6px; border-left: 4px solid #ffa000; }
.docs-info h4 { margin: 0 0 0.5rem; font-size: 0.9rem; color: #e65100; }
.docs-info ul { margin: 0; padding-left: 1.2rem; }
.docs-info li { font-size: 0.85rem; margin-bottom: 0.3rem; }
.docs-info li .obrigatorio { color: #c62828; font-weight: 600; }
.docs-info li .opcional { color: var(--text-secondary); }
#geo-map { width: 100%; height: 250px; border-radius: 8px; background: #e0e0e0; margin-bottom: 0.75rem; cursor: crosshair; }
.geo-coords { display: flex; gap: 0.5rem; font-size: 12px; color: var(--text-secondary); margin-bottom: 0.5rem; }
.actions-bar { display: flex; gap: 12px; justify-content: flex-end; padding-top: 8px; }
/* Autocomplete */
.autocomplete-wrapper { position: relative; }
.autocomplete-results {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border: 1px solid var(--border-medium); border-top: none;
    border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto;
    z-index: 10; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.autocomplete-results.active { display: block; }
.autocomplete-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.autocomplete-item:hover { background: #f0f4ff; }
.autocomplete-item small { color: var(--text-muted); margin-left: 8px; }
.cidadao-selecionado {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: #e8f5e9; border-radius: 8px; font-size: 0.9rem;
}
.cidadao-selecionado .btn-limpar {
    margin-left: auto; background: none; border: none; cursor: pointer; color: #c00; font-size: 0.85rem;
}
    

/* ================================================================
   Page: supervisor
   ================================================================ */


.supervisor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}
.operador-panel {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
}
.operador-header {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eee;
}
.operador-avatar-lg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.operador-info-lg h3 {
    margin: 0;
    font-size: 1.1rem;
}
.operador-info-lg small {
    color: var(--gray);
}
.operador-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    padding: 15px;
    background: var(--bg-light);
}
.stat-mini {
    padding: 10px;
}
.stat-mini strong {
    display: block;
    font-size: 1.5rem;
    color: var(--primary);
}
.stat-mini span {
    font-size: 0.8rem;
    color: var(--gray);
}
.operador-conversas {
    padding: 15px;
    max-height: 250px;
    overflow-y: auto;
}
.conversa-mini {
    display: flex;
    align-items: center;
    padding: 10px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.conversa-mini:hover {
    background: #e9ecef;
}
.conversa-mini-info {
    flex: 1;
    margin-left: 10px;
}
.conversa-mini-info strong {
    display: block;
    font-size: 0.9rem;
}
.conversa-mini-info small {
    color: var(--gray);
}
.tempo-espera {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    background: #e9ecef;
}
.tempo-espera.alerta {
    background: #fff3cd;
    color: #856404;
}
.tempo-espera.critico {
    background: #f8d7da;
    color: #721c24;
}
.realtime-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #27ae60;
    border-radius: 50%;
    animation: pulseOpacity 2s infinite;
    margin-right: 8px;
}
    

/* ================================================================
   Page: tipos-solicitacao
   ================================================================ */


.filter-bar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.filter-bar .form-control {
    width: auto;
}
.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}
.grupo-section {
    margin-bottom: 2rem;
}
.grupo-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color, #333);
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.grupo-header .badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: #e0e0e0;
    color: var(--text-secondary);
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}
.tipo-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 1rem 1rem 1rem 1.25rem;
    border-left: 5px solid #999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    transition: box-shadow 0.2s;
}
.tipo-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.tipo-card.inativo {
    opacity: 0.55;
}
.card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.card-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}
.card-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}
.card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8rem;
}
.card-meta .badge {
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
}
.card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f0f0f0;
}
.card-actions .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}
.empty-state {
    text-align: center;
    color: var(--text-light);
    padding: 3rem 1rem;
    font-size: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}
.form-row .form-group {
    flex: 1;
}
.icon-preview-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.icon-preview-row select {
    flex: 1;
}
.icon-preview-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.color-preview-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.color-preview-row input[type="color"] {
    width: 60px;
    height: 36px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
}
.color-preview-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    flex-shrink: 0;
}
.helper-text {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}
.toggle-ativo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.toggle-ativo input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
    

/* ================================================================
   Page: webchat-config
   ================================================================ */


.webchat-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .webchat-layout { grid-template-columns: 1fr; }
}
.config-panel {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.config-panel h3 {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-group {
    margin-bottom: 1.1rem;
}
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="color"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}
.form-group textarea {
    resize: vertical;
    min-height: 70px;
}
.form-group input[type="color"] {
    width: 60px;
    height: 36px;
    padding: 2px;
    cursor: pointer;
}
.color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.color-row .color-hex {
    font-size: 0.85rem;
    color: var(--text-muted);
}
/* Toggle switch */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 26px;
    transition: 0.3s;
}
.toggle-slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider {
    background: #1a73e8;
}
.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}
/* Fields editor */
.fields-section {
    margin-top: 1.5rem;
    border-top: 1px solid #eee;
    padding-top: 1.25rem;
}
.fields-section h3 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.field-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 10px;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}
.field-row .field-name {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
}
.field-row .field-label {
    color: var(--text-secondary);
    flex: 1;
}
.field-row .field-tipo {
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.field-row .field-obrig {
    font-size: 0.75rem;
    color: #e53935;
}
.field-row .btn-delete-field {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 6px;
}
.field-row .btn-delete-field:hover { color: #e53935; }
.add-field-form {
    background: #f5f7fa;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.75rem;
    display: none;
}
.add-field-form.visible { display: block; }
.add-field-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.add-field-form input,
.add-field-form select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.add-field-form .checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.add-field-btns {
    display: flex;
    gap: 0.5rem;
}
/* Preview */
.preview-panel {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    position: sticky;
    top: 80px;
}
.preview-panel h3 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.preview-widget {
    border: 1px solid var(--border-base);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.85rem;
}
.preview-header {
    padding: 16px;
    color: white;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
}
.preview-body {
    padding: 16px;
    background: #fafafa;
}
.preview-welcome {
    background: white;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}
.preview-field {
    margin-bottom: 10px;
}
.preview-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.preview-field label .req { color: #e53935; }
.preview-field input,
.preview-field textarea,
.preview-field select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 0.82rem;
    box-sizing: border-box;
    background: white;
}
.preview-field textarea { min-height: 50px; resize: none; }
.preview-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: default;
    margin-top: 8px;
}
.preview-logo {
    text-align: center;
    margin-bottom: 12px;
}
.preview-logo img {
    max-height: 40px;
    max-width: 180px;
}
.btn-save-config {
    background: #1a73e8;
    color: white;
    border: none;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-save-config:hover { background: #1558b0; }
.btn-save-config:disabled { opacity: 0.6; cursor: not-allowed; }
    

/* ================================================================
   Page: workflow-editor
   ================================================================ */


.wf-container { display: flex; height: calc(100vh - 120px); }
.wf-sidebar { width: 240px; background: var(--bg-light); border-right: 1px solid var(--border-base); overflow-y: auto; flex-shrink: 0; }
.wf-sidebar h4 { padding: 12px 15px 6px; margin: 0; font-size: 0.8rem; text-transform: uppercase; color: var(--text-light); }
.wf-block { padding: 8px 15px; margin: 4px 10px; background: white; border: 1px solid var(--border-medium); border-radius: 6px; cursor: grab; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; transition: box-shadow 0.15s; }
.wf-block:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.wf-block i { width: 20px; text-align: center; }
.wf-block.msg { border-left: 3px solid #3498db; }
.wf-block.pergunta { border-left: 3px solid #27ae60; }
.wf-block.condicao { border-left: 3px solid #f39c12; }
.wf-block.ia { border-left: 3px solid #9b59b6; }
.wf-block.acao { border-left: 3px solid #e74c3c; }
.wf-block.fim { border-left: 3px solid #95a5a6; }

.wf-canvas { flex: 1; position: relative; }
#drawflow { width: 100%; height: 100%; background-color: #fafafa; background-image: radial-gradient(circle, #ddd 1px, transparent 1px); background-size: 20px 20px; }

.wf-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 15px; background: white; border-bottom: 1px solid var(--border-base); }
.wf-toolbar input { padding: 4px 10px; border: 1px solid var(--border-medium); border-radius: 4px; font-size: 0.9rem; width: 200px; }
.wf-toolbar select { padding: 4px 10px; border: 1px solid var(--border-medium); border-radius: 4px; font-size: 0.9rem; }
.wf-status { margin-left: auto; font-size: 0.8rem; color: var(--text-light); }
.wf-status.ativo { color: #27ae60; font-weight: 600; }

/* Drawflow custom nodes */
.drawflow .drawflow-node { background: white; border: 1px solid #ccc; border-radius: 8px; min-width: 180px; }
.drawflow .drawflow-node.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(52,152,219,0.3); }
.drawflow .drawflow-node .title-box { background: #f0f0f0; padding: 8px 12px; border-radius: 7px 7px 0 0; font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.drawflow .drawflow-node .box { padding: 10px 12px; font-size: 0.8rem; color: var(--text-secondary); }
.drawflow .drawflow-node .box textarea, .drawflow .drawflow-node .box input, .drawflow .drawflow-node .box select {
    width: 100%; padding: 4px 6px; border: 1px solid var(--border-medium); border-radius: 4px; font-size: 0.8rem; margin-top: 4px;
}
.drawflow .drawflow-node .box textarea { resize: vertical; min-height: 40px; }
.drawflow .drawflow-node .box label { display: block; font-weight: 600; color: var(--text-primary); margin-top: 6px; font-size: 0.75rem; }
.drawflow .drawflow-node .box label:first-child { margin-top: 0; }

/* Node type colors */
.drawflow .drawflow-node.mensagem .title-box { background: #e3f2fd; color: #1565c0; }
.drawflow .drawflow-node.pergunta .title-box { background: #e8f5e9; color: #2e7d32; }
.drawflow .drawflow-node.condicao .title-box { background: #fff8e1; color: #f57f17; }
.drawflow .drawflow-node.classificacao .title-box { background: #f3e5f5; color: #6a1b9a; }
.drawflow .drawflow-node.busca_rag .title-box { background: #e8eaf6; color: #283593; }
.drawflow .drawflow-node.abrir_solicitacao .title-box { background: #fce4ec; color: #c62828; }
.drawflow .drawflow-node.escalonar .title-box { background: #fff3e0; color: #e65100; }
.drawflow .drawflow-node.coletar_doc .title-box { background: #e0f2f1; color: #00695c; }
.drawflow .drawflow-node.agendar .title-box { background: #fce4ec; color: #880e4f; }
.drawflow .drawflow-node.webhook .title-box { background: #eceff1; color: #37474f; }
.drawflow .drawflow-node.fim .title-box { background: #e0e0e0; color: #424242; }

.drawflow .connection .main-path { stroke: #999; stroke-width: 2; }
.drawflow .connection .main-path:hover { stroke: var(--primary); }

/* Modal config node */
.node-config { display: none; position: absolute; right: 0; top: 0; width: 300px; height: 100%; background: white; border-left: 1px solid var(--border-base); z-index: 10; overflow-y: auto; padding: 15px; }
.node-config.active { display: block; }
.node-config h3 { margin: 0 0 15px; font-size: 1rem; }
    

/* ================================================================
   Page: workflows
   ================================================================ */


.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }
.wf-card { background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.15s; }
.wf-card:hover { transform: translateY(-2px); }
.wf-card-header { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 10px; }
.wf-card-header h3 { margin: 0; font-size: 1rem; flex: 1; }
.wf-tipo { padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
.wf-tipo.bot_principal { background: #e3f2fd; color: #1565c0; }
.wf-tipo.sub_fluxo { background: #f3e5f5; color: #6a1b9a; }
.wf-tipo.automacao { background: #fff8e1; color: #f57f17; }
.wf-ativo { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.wf-ativo.on { background: #27ae60; }
.wf-card-body { padding: 15px 20px; }
.wf-card-body p { margin: 0 0 8px; color: var(--text-secondary); font-size: 0.85rem; }
.wf-meta { display: flex; gap: 15px; font-size: 0.75rem; color: var(--text-light); }
.wf-card-footer { padding: 10px 20px; background: var(--bg-light); display: flex; gap: 6px; justify-content: flex-end; }