:root{
 /* Marca (vinho/bordo - baseado na logo) */
 --brand-primary:#7A2E3A;
 --brand-primary-hover:#5a232b;
 --brand-primary-light:#F5E6E8;
 --brand-accent:#B65A3C;
 --brand-accent-2:#D07A3A;

 /* Bordo rosado para abas e destaques */
 --tab-bg:#FAF0F1;
 --tab-active-bg:#F5E6E8;
 --tab-border:#D4A5AC;

 /* Botoes secundarios rosados */
 --btn-rosy-bg:#E8D5D8;
 --btn-rosy-border:#B88A8F;
 --btn-rosy-text:#3D1A20;

 /* Neutros */
 --bg:#FFFFFF;
 --surface:#F2F3F5;
 --surface-2:#FAFAFB;
 --border:#D9DDE3;

 /* Texto */
 --text:#111827;
 --text-2:#6B7280;
 --text-inverse:#FFFFFF;
 --text-on-light-bg:#3D1A20;

 /* Estados */
 --success:#22C55E;
 --success-hover:#16A34A;
 --danger:#EF4444;
 --warning:#F59E0B;

 /* Sombra/raio */
 --radius:14px;
 --shadow:0 10px 24px rgba(17,24,39,.10);
}

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

.hidden {
 display: none !important;
}

body {
 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
 background-color: var(--surface);
 color: var(--text);
}

.login-container {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--brand-primary) 0%, #2a1520 100%);
}

.login-box {
 background-color: var(--bg);
 padding: 2.5rem;
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 width: 100%;
 max-width: 400px;
 text-align: center;
}

.login-box h1 {
 color: var(--brand-primary);
 margin-bottom: 0.5rem;
}

.login-subtitle {
 color: var(--text-2);
 margin-bottom: 1.5rem;
}

.btn-full {
 width: 100%;
}

.erro-msg {
 color: var(--danger);
 margin-top: 1rem;
 font-size: 0.9rem;
}

.btn-logout {
 background-color: rgba(239, 68, 68, 0.3) !important;
 border-color: rgba(239, 68, 68, 0.5) !important;
}

.btn-logout:hover {
 background-color: rgba(239, 68, 68, 0.5) !important;
}

header {
 background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
 color: var(--text-inverse);
 padding: 1rem 2rem;
 box-shadow: 0 4px 12px rgba(122, 46, 58, 0.3);
}

header h1 {
 font-size: 1.5rem;
 margin-bottom: 0.5rem;
}

nav {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
}

.nav-btn {
 background-color: rgba(255,255,255,0.15);
 color: var(--text-inverse);
 border: 1px solid rgba(255,255,255,0.25);
 padding: 0.5rem 1rem;
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.2s ease;
 font-weight: 500;
}

.nav-btn:hover, .nav-btn.active {
 background-color: var(--brand-accent);
 border-color: var(--brand-accent);
}

main {
 max-width: 1200px;
 margin: 0 auto;
 padding: 1.5rem;
 color: var(--text);
}

.page {
 background-color: var(--bg);
 border-radius: var(--radius);
 padding: 1.5rem;
 box-shadow: var(--shadow);
 color: var(--text);
}

.page.hidden {
 display: none;
}

.page h2 {
 margin-bottom: 1rem;
 color: var(--brand-primary);
 font-weight: 600;
}

.tabs {
 display: flex;
 gap: 0.5rem;
 margin-bottom: 1rem;
 border-bottom: 2px solid var(--border);
 padding-bottom: 0.5rem;
 flex-wrap: wrap;
}

.tab-btn {
 background: none;
 border: none;
 padding: 0.6rem 1.2rem;
 cursor: pointer;
 color: var(--text-2);
 font-size: 0.95rem;
 border-bottom: 3px solid transparent;
 margin-bottom: -0.5rem;
 border-radius: 8px 8px 0 0;
 transition: all 0.2s ease;
}

.tab-btn:hover {
 color: var(--brand-primary);
 background-color: var(--tab-bg);
}

.tab-btn.active {
 color: var(--brand-primary);
 border-bottom-color: var(--brand-primary);
 font-weight: 600;
 background-color: var(--tab-active-bg);
}

.tab-content {
 display: none;
}

.tab-content.active {
 display: block;
 padding-top: 0.5rem;
}

.form-group {
 margin-bottom: 1rem;
}

.form-group label {
 display: block;
 margin-bottom: 0.4rem;
 font-weight: 600;
 color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
 width: 100%;
 padding: 0.7rem;
 border: 1px solid var(--border);
 border-radius: 10px;
 font-size: 0.95rem;
 transition: border-color 0.2s, box-shadow 0.2s;
 background-color: var(--bg);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
 outline: none;
 border-color: var(--brand-accent);
 box-shadow: 0 0 0 3px rgba(182, 90, 60, 0.15);
}

.form-group textarea {
 min-height: 80px;
 resize: vertical;
}

.form-row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1rem;
}

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

.btn-primary {
 background-color: var(--brand-primary);
 color: var(--text-inverse);
 border: none;
 padding: 0.7rem 1.5rem;
 border-radius: 10px;
 cursor: pointer;
 font-size: 1rem;
 font-weight: 600;
 transition: all 0.2s ease;
 box-shadow: 0 2px 8px rgba(122, 46, 58, 0.25);
}

.btn-primary:hover {
 background-color: var(--brand-accent);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(182, 90, 60, 0.3);
}

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

.btn-secondary {
 background-color: var(--surface);
 color: var(--text);
 border: 1px solid var(--border);
 padding: 0.7rem 1.5rem;
 border-radius: 10px;
 cursor: pointer;
 font-size: 1rem;
 transition: all 0.2s ease;
}

.btn-secondary:hover {
 background-color: var(--surface-2);
 border-color: var(--brand-accent);
}

.btn-danger {
 background-color: var(--danger);
 color: var(--text-inverse);
 border: none;
 padding: 0.5rem 1rem;
 border-radius: 8px;
 cursor: pointer;
 font-weight: 500;
 transition: all 0.2s ease;
}

.btn-danger:hover {
 background-color: #dc2626;
}

.btn-success {
 background-color: var(--success);
 color: var(--text-inverse);
 border: none;
 padding: 0.5rem 1rem;
 border-radius: 8px;
 cursor: pointer;
 font-weight: 500;
 transition: all 0.2s ease;
}

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

.btn-small {
 padding: 0.4rem 0.8rem;
 font-size: 0.85rem;
 border-radius: 8px;
}

.filters {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 1rem;
 flex-wrap: wrap;
 background-color: var(--surface);
 padding: 1rem;
 border-radius: var(--radius);
}

.filters label {
 font-weight: 600;
 color: var(--text-2);
}

.filters select,
.filters input {
 padding: 0.5rem 0.75rem;
 border: 1px solid var(--border);
 border-radius: 8px;
 background-color: var(--bg);
}

.op-card {
 background-color: var(--surface);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 1rem;
 margin-bottom: 0.75rem;
 transition: all 0.2s ease;
}

.op-card:hover {
 box-shadow: 0 4px 12px rgba(0,0,0,0.08);
 border-color: var(--brand-accent);
}

.op-card-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 0.5rem;
}

.op-card-header h4 {
 color: var(--brand-primary);
 font-weight: 600;
}

.op-status {
 padding: 0.3rem 0.8rem;
 border-radius: 20px;
 font-size: 0.8rem;
 font-weight: 600;
}

.status-aguardando {
 background-color: #fff3e0;
 color: #e65100;
}

.status-em-execucao {
 background-color: #e3f2fd;
 color: #1565c0;
}

.status-finalizada {
 background-color: #e8f5e9;
 color: #2e7d32;
}

.status-cancelada {
 background-color: #ffebee;
 color: #c62828;
}

.op-card-body {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 0.5rem;
 font-size: 0.9rem;
}

.op-card-actions {
 margin-top: 0.8rem;
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
}

.fila-item {
 background-color: var(--surface);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 1rem;
 margin-bottom: 0.5rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: grab;
 transition: all 0.2s ease;
}

.fila-item:hover {
 border-color: var(--brand-accent);
 box-shadow: 0 2px 8px rgba(182, 90, 60, 0.15);
}

.fila-item:active {
 cursor: grabbing;
}

.fila-item.execucao {
 border-left: 4px solid var(--brand-accent);
 background-color: rgba(182, 90, 60, 0.08);
}

.fila-item.aguardando {
 border-left: 4px solid var(--warning);
}

.fila-info {
 flex: 1;
}

.fila-posicao {
 background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
 color: var(--text-inverse);
 width: 32px;
 height: 32px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-right: 1rem;
 font-weight: bold;
 font-size: 0.85rem;
}

.modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.5);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 1000;
}

.modal.hidden {
 display: none;
}

.modal-content {
 background-color: var(--bg);
 padding: 2rem;
 border-radius: var(--radius);
 max-width: 500px;
 width: 90%;
 max-height: 80vh;
 overflow-y: auto;
}

.modal-content h3 {
 margin-bottom: 1rem;
 color: var(--brand-primary);
 font-weight: 600;
}

.modal-buttons {
 display: flex;
 gap: 0.5rem;
 margin-top: 1rem;
 flex-wrap: wrap;
}

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

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

.resumo-card {
 background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 1.5rem;
 text-align: center;
 transition: all 0.2s ease;
}

.resumo-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow);
}

.resumo-card h4 {
 color: var(--text-2);
 font-size: 0.9rem;
 margin-bottom: 0.5rem;
 font-weight: 500;
}

.resumo-card .valor {
 font-size: 2rem;
 font-weight: bold;
 color: var(--brand-primary);
}

.resumo-card .unidade {
 font-size: 0.8rem;
 color: var(--text-2);
}

.alert {
 padding: 1rem;
 border-radius: 10px;
 margin-bottom: 1rem;
}

.alert-success {
 background-color: rgba(34, 197, 94, 0.1);
 color: var(--success);
 border: 1px solid var(--success);
}

.alert-error {
 background-color: rgba(239, 68, 68, 0.1);
 color: var(--danger);
 border: 1px solid var(--danger);
}

.alert-info {
 background-color: rgba(21, 101, 192, 0.1);
 color: #1565c0;
 border: 1px solid #1565c0;
}

.alert-warning {
 background-color: rgba(245, 158, 11, 0.1);
 color: var(--warning);
 border: 1px solid var(--warning);
}

.drag-over {
 border: 2px dashed var(--brand-accent);
 background-color: rgba(182, 90, 60, 0.08);
}

/* Cards para listas */
.card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 1rem;
 box-shadow: 0 2px 8px rgba(0,0,0,0.04);
 transition: all 0.2s ease;
}

.card:hover {
 box-shadow: var(--shadow);
 border-color: var(--brand-accent);
}

.card h3 {
 margin: 0.5rem 0;
 color: var(--brand-primary);
}

.card p {
 color: var(--text-2);
 margin: 0;
}

/* Icon badge */
.icon-badge {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 display: grid;
 place-items: center;
 background: rgba(208, 122, 58, 0.16);
 color: var(--brand-accent-2);
 font-weight: 900;
 font-size: 1.2rem;
}

/* Section styles */
.section {
 padding: 2rem 1.5rem;
}

.section.alt {
 background-color: var(--surface-2);
}

/* Grid */
.grid {
 display: grid;
 gap: 1rem;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Table styles */
table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 1rem;
}

table th {
 background-color: var(--brand-primary);
 color: var(--text-inverse);
 padding: 0.75rem;
 text-align: left;
 font-weight: 600;
 border-bottom: 2px solid var(--brand-primary-hover);
}

table th:first-child {
 border-radius: 10px 0 0 0;
}

table th:last-child {
 border-radius: 0 10px 0 0;
}

table td {
 padding: 0.75rem;
 border-bottom: 1px solid var(--border);
 color: var(--text);
}

table tr:hover td {
 background-color: rgba(182, 90, 60, 0.04);
}

/* Input date styling */
input[type="date"] {
 padding: 0.5rem;
 border: 1px solid var(--border);
 border-radius: 8px;
 background-color: var(--bg);
}

/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }