/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    --secondary: #64748b;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --purple: #8b5cf6;
    --orange: #f97316;
    --bg: #f1f5f9;
    --white: #ffffff;
    --text: #1e293b;
    --text-light: #64748b;
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
    --radius: 12px;
    --sidebar-width: 260px;
}

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

/* ===== LOGIN PAGE ===== */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #7c3aed 100%);
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

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

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

.logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--purple));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 36px;
    color: white;
}

.login-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

.login-header p {
    color: var(--text-light);
    font-size: 14px;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--text);
}

.input-group {
    position: relative;
    margin-bottom: 16px;
}

.input-group i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 16px;
}

.input-group input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transition: all 0.3s;
    outline: none;
}

.input-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.switch-form {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-light);
}

.switch-form a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.message {
    margin-top: 16px;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    display: none;
}

.message.error {
    display: block;
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
}

.message.success {
    display: block;
    background: #f0fdf4;
    color: var(--success);
    border: 1px solid #bbf7d0;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 2px solid var(--border);
    padding: 10px 24px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

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

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 14px;
}

.btn-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.btn-icon {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-icon.edit {
    color: var(--primary);
}

.btn-icon.edit:hover {
    background: var(--primary-light);
}

.btn-icon.delete {
    color: var(--danger);
}

.btn-icon.delete:hover {
    background: #fef2f2;
}

.btn-icon.view {
    color: var(--success);
}

.btn-icon.view:hover {
    background: #f0fdf4;
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 20px;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 8px;
}

.btn-logout:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* ===== SIDEBAR ===== */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: white;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.sidebar-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header i {
    font-size: 28px;
    color: var(--primary);
}

.sidebar-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.sidebar-menu {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 16px 12px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    list-style: none;
}

.sidebar-menu li {
    margin-bottom: 4px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s;
    font-size: 14px;
}

.sidebar-menu a:hover,
.sidebar-menu li.active a {
    background: rgba(37, 99, 235, 0.2);
    color: white;
}

.sidebar-menu li.active a {
    background: var(--primary);
}

.sidebar-menu a i {
    width: 20px;
    text-align: center;
}

.sidebar-footer {
    padding: 16px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== MAIN CONTENT ===== */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left 0.3s;
}

.topbar {
    background: var(--white);
    padding: 16px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text);
    padding: 8px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 500;
}

.user-info i {
    font-size: 28px;
    color: var(--primary);
}

.content {
    padding: 30px;
}

.content h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
}

.subtitle {
    color: var(--text-light);
    font-size: 14px;
    margin-top: 4px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

/* ===== STATS ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-icon.blue {
    background: var(--primary-light);
    color: var(--primary);
}

.stat-icon.green {
    background: #d1fae5;
    color: var(--success);
}

.stat-icon.purple {
    background: #ede9fe;
    color: var(--purple);
}

.stat-icon.orange {
    background: #ffedd5;
    color: var(--orange);
}

.stat-info h3 {
    font-size: 28px;
    font-weight: 700;
}

.stat-info p {
    color: var(--text-light);
    font-size: 13px;
}

/* ===== CARDS ===== */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

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

.card-header h2 {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 0;
}

/* ===== TABLE ===== */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead th {
    background: var(--bg);
    padding: 14px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

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

.actions-cell {
    display: flex;
    gap: 4px;
}

/* ===== SEARCH BAR ===== */
.search-bar {
    position: relative;
    margin-bottom: 20px;
}

.search-bar i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.search-bar input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background: var(--white);
    transition: all 0.3s;
    outline: none;
}

.search-bar input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--white);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.modal-large {
    max-width: 820px;
}

.modal-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 10;
    border-radius: 16px 16px 0 0;
}

.modal-header h2 {
    font-size: 18px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
    padding: 4px;
    line-height: 1;
}

.modal form,
.modal-body-content {
    padding: 24px;
}

/* ===== FORMS ===== */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transition: all 0.3s;
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.form-group textarea {
    resize: vertical;
}

.form-actions {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border);
}

/* ===== PRESCRIPTION SECTION ===== */
.prescription-section {
    margin: 20px 0;
    padding: 20px;
    background: var(--bg);
    border-radius: var(--radius);
}

.prescription-section h3 {
    font-size: 15px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
}

.prescription-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.prescription-grid .form-group input {
    background: var(--white);
}

/* ===== PRESCRIPTION CARDS ===== */
.prescricoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.prescricao-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.3s;
}

.prescricao-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.prescricao-card-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prescricao-card-header h3 {
    font-size: 16px;
}

.prescricao-card-header span {
    font-size: 12px;
    opacity: 0.9;
}

.prescricao-card-body {
    padding: 16px 20px;
}

.prescricao-detail {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.prescricao-detail:last-child {
    border-bottom: none;
}

.prescricao-detail .label {
    color: var(--text-light);
}

.prescricao-card-actions {
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border);
}

/* ===== VIEW PRESCRIPTION ===== */
.view-section {
    margin-bottom: 20px;
}

.view-section h3 {
    font-size: 15px;
    color: var(--primary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.view-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.view-item .label {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-item .value {
    font-size: 14px;
    font-weight: 500;
}

.eye-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.eye-table th,
.eye-table td {
    padding: 8px 12px;
    text-align: center;
    border: 1px solid var(--border);
    font-size: 13px;
}

.eye-table th {
    background: var(--bg);
    font-weight: 600;
    color: var(--text-light);
    font-size: 12px;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.badge-blue {
    background: var(--primary-light);
    color: var(--primary);
}

.badge-green {
    background: #d1fae5;
    color: var(--success);
}

/* ===== LOADING SPINNER ===== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s ease infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== TOAST NOTIFICATION ===== */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 14px 24px;
    border-radius: 10px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: all .25s;
}
.toast.show { opacity:1; transform: translateY(0); pointer-events:auto; }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }

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

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.active { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .menu-toggle { display: block; }
    .content { padding: 20px 16px; }
    .form-grid { grid-template-columns: 1fr; }
    .prescription-grid { grid-template-columns: 1fr 1fr; }
    .prescricoes-grid { grid-template-columns: 1fr; }
    .table thead th, .table tbody td { padding: 10px 12px; font-size: 13px; }
    .page-header { flex-direction: column; align-items: stretch; }
    .modal { margin: 10px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .view-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .prescription-grid { grid-template-columns: 1fr; }
    .login-card { padding: 30px 24px; }
}

/* ===== PRINT ===== */
@media print {
    .sidebar, .topbar, .form-actions, .prescricao-card-actions { display: none !important; }
    .main-content { margin-left: 0; }
    .modal-overlay { position: static; background: none; }
    .modal { box-shadow: none; max-width: 100%; }
}

/* ===== ESTOQUE - ESTILOS ADICIONAIS ===== */
.filtros-container { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.filtro-grupo { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro-select {
    padding: 10px 14px; border: 2px solid var(--border); border-radius: 10px;
    font-family: 'Poppins', sans-serif; font-size: 13px; background: var(--white);
    cursor: pointer; outline: none; transition: all 0.3s; min-width: 150px;
}
.filtro-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.estoque-qtd { display: flex; align-items: center; gap: 6px; font-size: 15px; }
tr.estoque-zerado { background: #fef2f2 !important; }
tr.estoque-zerado:hover { background: #fee2e2 !important; }
tr.estoque-baixo { background: #fffbeb !important; }
tr.estoque-baixo:hover { background: #fef3c7 !important; }
.badge-material { background: #f1f5f9; color: #475569; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.badge-pink { background: #fce7f3; color: #be185d; }
.badge-orange { background: #ffedd5; color: #c2410c; }

@media (max-width: 768px) {
    .filtros-container { flex-direction: column; }
    .filtro-grupo { width: 100%; }
    .filtro-select { flex: 1; min-width: 0; }
    .table thead th:nth-child(6), .table tbody td:nth-child(6),
    .table thead th:nth-child(5), .table tbody td:nth-child(5) { display: none; }
}
@media (max-width: 480px) {
    .table thead th:nth-child(4), .table tbody td:nth-child(4),
    .table thead th:nth-child(3), .table tbody td:nth-child(3) { display: none; }
}

/* ✅ Modais começam SEMPRE fechados */
.modal-overlay { display: none !important; }
.modal-overlay.active { display: flex !important; }

/* ===== VENDAS ===== */
.venda-total-box {
    margin-top: 18px; padding: 16px 20px; background: #eff6ff;
    border: 2px solid #dbeafe; border-radius: 12px; color: #1e40af;
    font-size: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 10px;
}
.venda-total-box strong { font-size: 22px; color: #2563eb; }
.view-item.full { grid-column: 1 / -1; }
.btn-icon.venda { color: #10b981; }
.btn-icon.venda:hover { background: #d1fae5; }

/* ===== METAS ===== */
.metas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.meta-card { padding: 20px; background: #f8fafc; border-radius: 12px; border: 2px solid #e2e8f0; }
.meta-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.meta-label { font-weight: 600; color: #1e293b; font-size: 14px; }
.meta-percent { font-size: 18px; font-weight: 700; }
.meta-progress-bar { width: 100%; height: 12px; background: #e2e8f0; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.meta-progress-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.meta-info { color: #64748b; font-size: 13px; margin-bottom: 8px; }
.meta-falta { margin-top: 10px; padding: 8px 12px; background: #fef3c7; border-radius: 6px; color: #92400e; font-size: 13px; }
.meta-atingida { margin-top: 10px; padding: 8px 12px; background: #d1fae5; border-radius: 6px; color: #065f46; font-size: 13px; font-weight: 600; }

/* ===== RESUMO FINANCEIRO ===== */
.resumo-financeiro { display: flex; flex-direction: column; gap: 14px; }
.resumo-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f8fafc; border-radius: 10px; }
.resumo-item .label { color: #64748b; font-size: 14px; }
.resumo-item .valor { font-size: 18px; font-weight: 700; }
.resumo-destaque { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid #2563eb; }
.resumo-destaque .label { color: #1e40af; font-weight: 600; }
.resumo-destaque .valor { font-size: 22px; }
.logo-salvattore { width: 90px; height: auto; }


.main-content {
    margin-left: 260px;
    min-height: 100vh;
}
@media (max-width: 768px) {
    #sidebar-placeholder { width: 0; overflow: hidden; }
    .main-content { margin-left: 0; }
}

/* ============================================================
   ADIÇÃO CSS - CAMPOS ÓPTICOS ÓTICAS SALVATTORE
   Esférico / Cilíndrico: -25 a +25 passo 0.25
   Adição: 0.5 a 6 passo 0.25
   DNP: 0 a 45
   Eixo: 0 a 180
   Altura: 0 a 40
   ============================================================ */

/* Hint abaixo dos campos */
.campo-hint {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
    display: block;
    min-height: 16px;
    transition: color .15s;
}
.campo-hint.ok { color: #10b981; }
.campo-hint.erro { color: #ef4444; font-weight: 500; }
.campo-hint.aviso { color: #f59e0b; }

/* inputs óticos - manter spinner nativo */
#odEsferico, #oeEsferico,
#odCilindrico, #oeCilindrico,
#odAdicao, #oeAdicao,
#odEixo, #oeEixo,
#odDnp, #oeDnp,
#odAltura, #oeAltura {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* spinner nativo visível e amigável */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
    height: 2.2em;
    cursor: pointer;
}
input[type=number] { -moz-appearance: number-input; }

/* coloração de graduação */
.valor-negativo,
input.valor-negativo {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    background: #fef2f2 !important;
}
.valor-positivo,
input.valor-positivo {
    color: #059669 !important;
    border-color: #6ee7b7 !important;
    background: #ecfdf5 !important;
}
.valor-neutro,
input.valor-neutro {
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}
.valor-erro,
input.valor-erro,
input.invalid,
input.out-of-range {
    color: #b91c1c !important;
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

/* válido ótico */
input.valid-optic {
    border-color: #86efac !important;
}

/* cores em texto (cards/tabela) */
.valor-negativo-text { color: #dc2626; font-weight: 600; }
.valor-positivo-text { color: #059669; font-weight: 600; }

/* tabela de visualização colorida */
.eye-table td.negativo { color: #dc2626; font-weight: 600; background: #fef2f2; }
.eye-table td.positivo { color: #059669; font-weight: 600; background: #ecfdf5; }

/* campo cliente fixo */
.cliente-fixo-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-family: inherit;
    font-size: 14px;
    cursor: not-allowed;
    font-weight: 500;
}
.cliente-fixo-info {
    margin-top: 6px;
}
.cliente-fixo-info small {
    display:flex; align-items:center; gap:6px;
    color: #2563eb; font-size: 12px;
}

/* grid de prescrição com 3 colunas no desktop, cai para 2/1 */
@media (min-width: 860px) {
    .prescription-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-heading h1 {
    margin: 0;
}

.dashboard-heading .subtitle {
    margin: 4px 0 0;
}

.btn-nova-venda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background-color: #10b981;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    transition: all 0.2s ease;
}

.btn-nova-venda:hover {
    background-color: #059669;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.btn-nova-venda:active {
    transform: translateY(0);
}

@media (max-width: 600px) {
    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .btn-nova-venda {
        width: 100%;
    }
}

.cep-loading[hidden] {
    display: none !important;
}
.modal-atendimento .search-bar input,
.modal-atendimento .form-group .search-bar input {
    padding-left: 38px !important;
}
/* ============================================================
   DASHBOARD - MODAL CLIENTE + PRESCRIÇÃO + VENDA
   Cole este bloco ao final de css/style.css
   ============================================================ */

/* Modal integrado: Cliente + Prescrição + Venda */
.modal-atendimento {
    max-width: 1120px;
    height: min(94vh, 960px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.atendimento-header p {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 12px;
}

.atendimento-etapas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 24px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.etapa-link {
    border: 0;
    background: transparent;
    color: var(--text-light);
    font: 500 13px 'Poppins', sans-serif;
    cursor: pointer;
    padding: 7px;
    border-radius: 8px;
}

.etapa-link span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    border-radius: 50%;
    background: #e2e8f0;
}

.etapa-link.active,
.etapa-link:hover { color: var(--primary); background: var(--primary-light); }
.etapa-link.active span { color: #fff; background: var(--primary); }

#formAtendimento {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.atendimento-body {
    overflow-y: auto;
    padding: 22px 24px 30px;
    scroll-behavior: smooth;
}

.atendimento-secao {
    padding: 22px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    scroll-margin-top: 12px;
}

.secao-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.secao-titulo h3 { font-size: 17px; }
.secao-titulo p { margin-top: 2px; color: var(--text-light); font-size: 12px; }

.secao-icone {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    flex: none;
}
.secao-icone.cliente { color: #2563eb; background: #dbeafe; }
.secao-icone.prescricao { color: #7c3aed; background: #ede9fe; }
.secao-icone.venda { color: #059669; background: #d1fae5; }

.cliente-modo { display: flex; gap: 10px; margin-bottom: 16px; }

/* Alternância entre busca e cadastro de cliente */
#clienteExistenteBox[hidden],
#clienteNovoBox[hidden] {
    display: none !important;
}

#clienteExistenteBox:not([hidden]),
#clienteNovoBox:not([hidden]) {
    display: block;
}
.modo-option input { position: absolute; opacity: 0; pointer-events: none; }
.modo-option span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 2px solid var(--border);
    border-radius: 9px;
    color: var(--text-light);
    font-size: 13px;
    cursor: pointer;
}
.modo-option input:checked + span { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }

.atendimento-search { margin: 0; }
.cliente-search-wrap { position: relative; }
.cliente-resultados {
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 30;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-lg);
}
.cliente-resultado {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: #fff;
    text-align: left;
    cursor: pointer;
}
.cliente-resultado:hover { background: #f8fafc; }
.cliente-resultado small { color: var(--text-light); }
.cliente-selecionado {
    padding: 12px 14px;
    margin-top: 12px;
    border: 1px solid #86efac;
    border-radius: 10px;
    color: #065f46;
    background: #f0fdf4;
}

.olhos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.olho-card { padding: 16px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--border); }
.olho-card h4 { margin-bottom: 13px; color: var(--primary); font-size: 14px; }
.optica-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.campo-optico.optico-invalido { border-color: var(--danger) !important; background: #fef2f2; }

.item-adder,
.pagamento-adder {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 100px 150px auto;
    align-items: end;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 11px;
}
.pagamento-adder { grid-template-columns: minmax(220px, 1fr) 180px auto; }
.item-adder .btn-secondary,
.pagamento-adder .btn-secondary { height: 42px; white-space: nowrap; }
.table-responsive { margin: 14px 0; overflow-x: auto; }
.tabela-atendimento td, .tabela-atendimento th { padding: 10px 12px; }

.venda-resumo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.resumo-custo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 9px;
    color: #1e40af;
    background: #eff6ff;
}

.pagamento-box { margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.pagamento-box h4 { margin-bottom: 12px; }
.pagamento-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pagamento-item button { border: 0; background: none; color: var(--danger); cursor: pointer; }
.pagamento-totais { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; }

.atendimento-actions { align-items: center; background: #fff; }
.salvamento-info { margin-right: auto; color: var(--text-light); font-size: 11px; }

@media (max-width: 850px) {
    .modal-atendimento { height: 96vh; }
    .olhos-grid { grid-template-columns: 1fr; }
    .item-adder { grid-template-columns: 1fr 90px; }
    .item-produto { grid-column: 1 / -1; }
    .pagamento-adder { grid-template-columns: 1fr 1fr; }
    .item-adder .btn-secondary, .pagamento-adder .btn-secondary { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .atendimento-body { padding: 14px; }
    .atendimento-secao { padding: 15px; }
    .atendimento-etapas { padding: 9px; }
    .etapa-link { font-size: 0; }
    .etapa-link span { margin: 0; font-size: 12px; }
    .optica-grid { grid-template-columns: 1fr 1fr; }
    .item-adder, .pagamento-adder, .venda-resumo-grid { grid-template-columns: 1fr; }
    .item-adder > *, .pagamento-adder > * { grid-column: 1 !important; }
    .pagamento-totais { flex-direction: column; }
    .salvamento-info { display: none; }
    .atendimento-actions { justify-content: stretch; }
    .atendimento-actions button { flex: 1; }
}



/* ===== MODO COMPACTO DO MODAL =====
   Reduz o conteúdo para exibir mais campos sem perder legibilidade. */
.modal-atendimento {
    width: min(96vw, 1240px);
    max-width: 1240px;
    height: 95vh;
    max-height: 95vh;
}

.modal-atendimento .modal-header {
    padding: 13px 18px;
}

.modal-atendimento .modal-header h2 {
    font-size: 16px;
}

.modal-atendimento .atendimento-etapas {
    padding: 7px 18px;
}

.modal-atendimento .etapa-link {
    padding: 5px 7px;
    font-size: 12px;
}

.modal-atendimento .etapa-link span {
    width: 21px;
    height: 21px;
}

.modal-atendimento .atendimento-body {
    padding: 13px 16px 18px;
}

.modal-atendimento .atendimento-secao {
    padding: 14px 16px;
    margin-bottom: 11px;
}

.modal-atendimento .secao-titulo {
    gap: 9px;
    margin-bottom: 11px;
}

.modal-atendimento .secao-icone {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.modal-atendimento .secao-titulo h3 {
    font-size: 15px;
}

.modal-atendimento .secao-titulo p,
.modal-atendimento .form-group label {
    font-size: 11px;
}

.modal-atendimento .form-grid {
    gap: 10px;
}

.modal-atendimento .form-group {
    gap: 3px;
}

.modal-atendimento .form-group input,
.modal-atendimento .form-group select,
.modal-atendimento .form-group textarea {
    padding: 7px 10px;
    min-height: 35px;
    font-size: 12px;
}

.modal-atendimento .form-group textarea {
    min-height: 48px;
}

/* Mantém espaço para a lupa no campo de busca.
   Esta regra precisa ser mais específica que a regra compacta dos inputs. */
.modal-atendimento .search-bar input,
.modal-atendimento .form-group .search-bar input {
    padding-left: 38px !important;
}

.modal-atendimento .search-bar > i {
    left: 13px;
    pointer-events: none;
    z-index: 2;
}

.modal-atendimento .cliente-modo {
    margin-bottom: 10px;
}

.modal-atendimento .modo-option span {
    padding: 6px 10px;
    font-size: 11px;
}

.modal-atendimento .olhos-grid {
    gap: 10px;
    margin: 11px 0;
}

.modal-atendimento .olho-card {
    padding: 11px;
}

.modal-atendimento .olho-card h4 {
    margin-bottom: 8px;
    font-size: 12px;
}

.modal-atendimento .optica-grid {
    gap: 7px;
}

.modal-atendimento .item-adder,
.modal-atendimento .pagamento-adder {
    gap: 8px;
    padding: 10px;
}

.modal-atendimento .item-adder .btn-secondary,
.modal-atendimento .pagamento-adder .btn-secondary {
    height: 35px;
    padding: 7px 12px;
    font-size: 12px;
}

.modal-atendimento .table-responsive {
    margin: 9px 0;
}

.modal-atendimento .tabela-atendimento th,
.modal-atendimento .tabela-atendimento td {
    padding: 7px 9px;
    font-size: 11px;
}

.modal-atendimento .resumo-custo {
    min-height: 35px;
    padding: 7px 10px;
    font-size: 12px;
}

.modal-atendimento .pagamento-box {
    margin: 10px 0;
    padding: 11px;
}

.modal-atendimento .pagamento-box h4 {
    margin-bottom: 8px;
    font-size: 13px;
}

.modal-atendimento .pagamento-item,
.modal-atendimento .pagamento-totais {
    font-size: 11px;
}

.modal-atendimento .atendimento-actions {
    padding: 10px 16px;
}

.modal-atendimento .atendimento-actions button {
    padding: 8px 14px;
    font-size: 12px;
}

/* Notebook com pouca altura */
@media (max-height: 760px) and (min-width: 769px) {
    .modal-atendimento {
        width: 98vw;
        height: 98vh;
        max-height: 98vh;
        border-radius: 10px;
    }

    .modal-atendimento .atendimento-secao {
        padding: 11px 13px;
        margin-bottom: 8px;
    }

    .modal-atendimento .secao-titulo p,
    .modal-atendimento .salvamento-info {
        display: none;
    }
}

/* Mantém boa leitura no celular */
@media (max-width: 600px) {
    .modal-overlay {
        padding: 5px;
    }

    .modal-atendimento {
        width: 100%;
        height: 98vh;
        max-height: 98vh;
        border-radius: 10px;
    }

    .modal-atendimento .atendimento-body {
        padding: 9px;
    }

    .modal-atendimento .atendimento-secao {
        padding: 11px;
    }

    .modal-atendimento .optica-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* Validação e consulta de endereço */
.modal-atendimento .campo-invalido {
    border-color: var(--danger) !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .10) !important;
}
.modal-atendimento .campo-valido {
    border-color: #22c55e !important;
    background: #f0fdf4 !important;
}
.validacao-hint {
    min-height: 14px;
    color: var(--text-light);
    font-size: 10px;
}
.validacao-hint.erro { color: var(--danger); }
.validacao-hint.sucesso { color: #059669; }
.cep-input-wrap { position: relative; }
.cep-input-wrap input { width: 100%; padding-right: 34px !important; }
.cep-loading {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

/* O Font Awesome define display:inline-block e pode sobrepor o atributo hidden. */
.cep-loading[hidden] {
    display: none !important;
}
.btn-baixar-pagamento {
    border: 0;
    border-radius: 7px;
    padding: 7px 10px;
    color: #fff;
    background: #059669;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: .2s ease;
}

.btn-baixar-pagamento:hover {
    background: #047857;
    transform: translateY(-1px);
}

.modal-baixa-pagamento {
    width: min(520px, calc(100vw - 28px));
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pagination button {
    padding: 6px 14px;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination button:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination .page-info {
    font-size: 13px;
    color: #64748b;
    padding: 0 12px;
    font-weight: 500;
}
/* Reset e Estilos Globais */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    display: flex;
    min-height: 100vh;
}

/* Sidebar Placeholder / Navigation */
.sidebar {
    width: 260px;
    background: #0f172a;
    color: #f8fafc;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    transition: all 0.3s ease;
}

.sidebar-brand {
    padding: 24px 20px;
    font-size: 20px;
    font-weight: 700;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #1e293b;
}

.sidebar-menu {
    list-style: none;
    padding: 16px 0;
    flex: 1;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    color: #ffffff;
    background: #1e293b;
    border-left: 4px solid #38bdf8;
}

/* Main Content Area */
.main-content {
    margin-left: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Topbar */
.topbar {
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 90;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.topbar-user .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0284c7;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Content */
.content {
    padding: 28px;
    flex: 1;
}

.dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-heading h1 {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.dashboard-heading .subtitle {
    font-size: 14px;
    color: #64748b;
}

.btn-nova-venda {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

.btn-nova-venda:hover {
    background: #0369a1;
    transform: translateY(-1px);
}

/* Grid & Stat Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.stat-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon.green { background: #dcfce7; color: #16a34a; }
.stat-icon.blue { background: #e0f2fe; color: #0284c7; }
.stat-icon.purple { background: #f3e8ff; color: #9333ea; }
.stat-icon.orange { background: #ffedd5; color: #ea580c; }
.stat-icon.red { background: #fee2e2 !important; color: #dc2626 !important; }

.stat-info {
    flex: 1;
    min-width: 0;
}

.stat-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.stat-info p {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

/* Faturamento Detalhado no Card */
.faturamento-detalhes {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
}

.faturamento-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    color: #475569;
}

.faturamento-linha strong {
    color: #0f172a;
}

.badge-origem {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.badge-origem.loja {
    background: #e0e7ff;
    color: #3730a3;
}

.badge-origem.projeto {
    background: #fce7f3;
    color: #9d174d;
}

/* Cards e Tabelas */
.card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 24px;
}

.card-header {
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 20px;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
}

.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 13px;
    color: #1e293b;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.table tr:hover {
    background: #f8fafc;
}

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

.btn-secondary {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-primary {
    background: #0284c7;
    color: #ffffff;
    border: 1px solid #0284c7;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary:hover {
    background: #0369a1;
}

.btn-link {
    color: #0284c7;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-icon {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.btn-icon:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Modais */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    padding: 16px;
}

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

.modal {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    overflow: hidden;
}

.modal-atendimento {
    max-width: 900px;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.modal-header p {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

/* Etapas do Atendimento */
.atendimento-etapas {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 24px;
    gap: 12px;
}

.etapa-link {
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.etapa-link span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.etapa-link.active {
    color: #0284c7;
    background: #e0f2fe;
}

.etapa-link.active span {
    background: #0284c7;
}

/* Formulário e Seções */
#formAtendimento {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.atendimento-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.atendimento-secao {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.secao-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.secao-icone {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.secao-icone.cliente { background: #e0f2fe; color: #0284c7; }
.secao-icone.prescricao { background: #f3e8ff; color: #9333ea; }
.secao-icone.venda { background: #dcfce7; color: #16a34a; }

.secao-titulo h3 {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.secao-titulo p {
    font-size: 12px;
    color: #64748b;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    background: #ffffff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.form-group select.required-alert,
.form-group input.required-alert {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

.validacao-hint {
    font-size: 11px;
    color: #ef4444;
}

/* Modos de Cliente */
.cliente-modo {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.modo-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.modo-option input[type="radio"] {
    accent-color: #0284c7;
}

.cliente-search-wrap {
    position: relative;
}

.cliente-resultados {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: none;
}

.cliente-resultados.active {
    display: block;
}

.cliente-resultado-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}

.cliente-resultado-item:hover {
    background: #f0f9ff;
}

.cliente-selecionado {
    padding: 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 13px;
    color: #0369a1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

/* Prescrição & Olhos Grid */
.olhos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.olho-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

.olho-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.optica-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.item-adder, .pagamento-adder {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.venda-resumo-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
}

.resumo-custo {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.pagamento-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.pagamento-box h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.pagamentos-lista {
    margin-bottom: 12px;
}

.pagamento-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 6px;
}

.pagamento-totais {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    padding-top: 8px;
    border-top: 1px solid #cbd5e1;
}

.form-actions {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    background: #ffffff;
}

.salvamento-info {
    margin-right: auto;
    font-size: 12px;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Modal Baixa */
.modal-baixa-pagamento {
    max-width: 500px;
}

/* Helper Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .main-content {
        margin-left: 0;
    }
    .content {
        padding: 16px;
    }
}
/* ===== FOOTER DE TOTAIS ALINHADO (Pendentes) ===== */
.table tfoot td {
    padding: 14px 20px;               /* mesmo padding do tbody para alinhar */
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    background: #fef2f2;
    border-top: 2px solid #fecaca;
    border-bottom: none;
    white-space: nowrap;
}

.table tfoot .total-label {
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
}

.table tfoot .total-venda { color: #334155; }
.table tfoot .total-pago  { color: #059669; }
.table tfoot .total-falta { color: #dc2626; }
/* FIM ADIÇÃO CSS */