/* ==============================================================
   COTA FÁCIL — Design System inspirado no SolCartão
   Azul Escuro: #003A70  |  Azul Claro: #0066CC
   ============================================================== */

:root {
  --s-azul:      #003A70;
  --s-azul-c:    #0066CC;
  --s-branco:    #FFFFFF;
  --s-bg:        #f5f7fa;
  --s-borda:     #e0e0e0;
  --s-texto:     #212529;
  --s-cinza:     #6c757d;
  --s-verde:     #198754;
  --s-perigo:    #dc3545;
  --s-aviso:     #ffc107;
  --s-grad:      linear-gradient(135deg, #003A70 0%, #0066CC 100%);
  --s-sombra:    0 5px 20px rgba(0,0,0,0.08);
  --s-sombra-lg: 0 8px 32px rgba(0,58,112,0.15);
  --s-radius:    10px;
  --s-radius-lg: 15px;
  --s-trans:     all 0.3s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--s-bg);
  color: var(--s-texto);
  font-size: 14px;
  line-height: 1.6;
}

/* ── Card (padrão SolCartão) ── */
.card-sol {
  background: var(--s-branco);
  border-radius: var(--s-radius-lg);
  box-shadow: var(--s-sombra);
  border: none;
  overflow: hidden;
  margin-bottom: 20px;
}

.card-sol-header {
  background: var(--s-grad);
  color: var(--s-branco);
  padding: 18px 24px;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-sol-header i { opacity: .85; }

.card-sol-body { padding: 24px; }

/* ── Moldura (retrocompat) → vira card-sol ── */
.moldura-principal {
  background: var(--s-branco);
  border-radius: var(--s-radius-lg);
  box-shadow: var(--s-sombra);
  overflow: hidden;
  margin-bottom: 20px;
}

.moldura-principal::before { display: none; }

.titulo-moldura {
  background: var(--s-grad);
  color: var(--s-branco);
  padding: 18px 24px;
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 20px;
  text-align: left;
  text-shadow: none;
}

/* ── Labels ── */
label {
  display: block;
  color: var(--s-azul);
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 13px;
}

/* ── Inputs ── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--s-borda);
  border-radius: var(--s-radius);
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--s-texto);
  background: var(--s-branco);
  transition: var(--s-trans);
  outline: none;
  margin-bottom: 14px;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--s-azul-c);
  box-shadow: 0 0 0 3px rgba(0,102,204,0.12);
}

/* ── Botões ── */
.btn, .btn-setup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--s-radius);
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--s-trans);
  text-decoration: none;
  white-space: nowrap;
  background: var(--s-grad);
  color: var(--s-branco);
}

.btn:hover, .btn-setup:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0,102,204,0.3);
  color: var(--s-branco);
}

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

.btn.secondary, .btn-setup.secondary { background: var(--s-cinza); }
.btn.secondary:hover, .btn-setup.secondary:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.15); }

.btn.danger  { background: var(--s-perigo); }
.btn.danger:hover  { box-shadow: 0 5px 15px rgba(220,53,69,0.3); }

.btn.success { background: var(--s-verde); }
.btn.success:hover { box-shadow: 0 5px 15px rgba(25,135,84,0.3); }

.btn.warning { background: var(--s-aviso); color: #212529; }
.btn.warning:hover { box-shadow: 0 5px 15px rgba(255,193,7,0.3); }

.btn.sm, .btn-setup.sm { padding: 6px 14px; font-size: 12px; }

.botoes, .botoes-linha, .setup-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
}

/* ── Tabela ── */
.tabela-container, .tabela-wrap {
  border-radius: var(--s-radius);
  overflow: hidden;
  border: 1.5px solid var(--s-borda);
  margin-top: 12px;
}

.tabela-container { max-height: 460px; overflow-y: auto; }

.tabela-container::-webkit-scrollbar,
.tabela-wrap::-webkit-scrollbar { width: 5px; }

.tabela-container::-webkit-scrollbar-track,
.tabela-wrap::-webkit-scrollbar-track { background: var(--s-bg); }

.tabela-container::-webkit-scrollbar-thumb,
.tabela-wrap::-webkit-scrollbar-thumb { background: #b0b8c8; border-radius: 3px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

table thead { position: sticky; top: 0; z-index: 1; }

table th {
  background: var(--s-grad);
  color: var(--s-branco);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: none;
}

table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--s-texto);
  vertical-align: middle;
}

table tr:last-child td { border-bottom: none; }
table tbody tr:hover td { background: #eef3fb; cursor: pointer; }
table tbody tr:nth-child(even) td { background: #f8f9fd; }
table tbody tr:nth-child(even):hover td { background: #eef3fb; }

tr.selecionada td {
  background: #dbeafe !important;
  border-left: 3px solid var(--s-azul);
  font-weight: 600;
  color: var(--s-azul);
}

/* ── Modals ── */
.modal-overlay, .modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open,
.modal-overlay.show,
.modal-backdrop.open,
.modal-backdrop.show { display: flex; animation: sfadeIn .2s ease; }

@keyframes sfadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box, .modal-dialog-sol {
  background: var(--s-branco);
  border-radius: var(--s-radius-lg);
  box-shadow: var(--s-sombra-lg);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: sslideUp .22s ease;
  overflow: hidden;
}

.modal-box.lg, .modal-dialog-sol.lg { max-width: 1000px; }
.modal-box.sm, .modal-dialog-sol.sm { max-width: 460px; }

@keyframes sslideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.modal-header-sol {
  background: var(--s-grad);
  color: var(--s-branco);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title-sol { font-size: 15px; font-weight: 600; }

.modal-close-sol {
  background: rgba(255,255,255,.18);
  border: none;
  color: var(--s-branco);
  width: 30px; height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--s-trans);
  font-size: 14px;
}

.modal-close-sol:hover { background: rgba(255,255,255,.3); }

.modal-body-sol {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer-sol {
  padding: 14px 22px;
  border-top: 1px solid var(--s-borda);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
  background: var(--s-bg);
}

/* ── Popup (retrocompat) ── */
.popup {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--s-branco);
  padding: 28px 32px;
  border-radius: var(--s-radius-lg);
  box-shadow: var(--s-sombra-lg);
  min-width: 300px; max-width: 480px;
  text-align: center;
  border-top: 4px solid var(--s-azul);
}

.popup.show {
  display: block;
  animation: spopIn .18s ease forwards;
}

@keyframes spopIn {
  from { opacity: 0; transform: translate(-50%,-48%) scale(.95); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

.popup p { color: var(--s-cinza); margin-bottom: 20px; }

.popup button {
  background: var(--s-grad);
  color: var(--s-branco);
  border: none;
  padding: 10px 24px;
  border-radius: var(--s-radius);
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--s-trans);
}

.popup button:hover { box-shadow: 0 5px 15px rgba(0,102,204,0.3); }

/* ── Stats / KPIs ── */
.setup-stats { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.stat-card {
  flex: 1; min-width: 120px;
  background: var(--s-branco);
  border-radius: var(--s-radius);
  padding: 14px 18px;
  border-top: 3px solid var(--s-azul);
  box-shadow: var(--s-sombra);
}

.stat-card.red-top   { border-top-color: var(--s-perigo); }
.stat-card.green-top { border-top-color: var(--s-verde); }
.stat-card.blue-top  { border-top-color: var(--s-azul-c); }

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--s-azul);
  line-height: 1.2;
}

.stat-label {
  font-size: 11px;
  color: var(--s-cinza);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
}

/* ── Form layout ── */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.form-group { flex: 1; min-width: 180px; }
.form-group input, .form-group select, .form-group textarea { margin-bottom: 0; }
.form-group label { margin-bottom: 4px; }
.form-group.small  { flex: .35; }
.form-group.medium { flex: .55; }

/* ── Page header ── */
.setup-header, .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.setup-title, .page-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--s-azul);
  display: flex;
  align-items: center;
  gap: 10px;
}

.setup-title i, .page-title i { font-size: 1rem; opacity: .7; }

/* ── Search bar ── */
.search-bar {
  display: flex; gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.search-bar input, .search-bar select { margin-bottom: 0; flex: 1; min-width: 140px; }

/* ── Badges ── */
.badge-sol {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.badge-ativo      { background: #d1fae5; color: #065f46; }
.badge-inativo    { background: #fee2e2; color: #991b1b; }
.badge-pendente   { background: #fef9c3; color: #92400e; }
.badge-concluido  { background: #dbeafe; color: #1e40af; }

.status-ativo   { color: #065f46; font-weight: 600; }
.status-inativo { color: #991b1b; font-weight: 600; }
.status-concluido { color: #1e40af; font-weight: 600; }

/* ── Alerts ── */
.alerta-sol {
  padding: 12px 16px;
  border-radius: var(--s-radius);
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.alerta-sol.ok   { background: #d1fae5; color: #065f46; border-left: 4px solid var(--s-verde); }
.alerta-sol.err  { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--s-perigo); }
.alerta-sol.warn { background: #fef9c3; color: #92400e; border-left: 4px solid var(--s-aviso); }

/* ── Login ── */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--s-grad);
  padding: 20px;
}

.login-card {
  background: var(--s-branco);
  border-radius: var(--s-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  width: 100%; max-width: 420px;
  overflow: hidden;
}

.login-header {
  background: var(--s-grad);
  color: var(--s-branco);
  padding: 30px 32px;
  text-align: center;
}

.login-logo { font-size: 28px; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
.login-subtitle { font-size: 12px; opacity: .8; }
.login-body { padding: 28px 32px; }

/* ── Link ── */
.link {
  display: block; margin-top: 16px;
  text-align: center;
  color: var(--s-azul-c);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: var(--s-trans);
}

.link:hover { color: var(--s-azul); text-decoration: underline; }

/* ── Frame dois paineis ── */
.layout-dois-frames { display: flex; gap: 18px; margin-top: 16px; }
.frame-esquerdo { flex: 0 0 260px; }
.frame-direito  { flex: 1; }

.titulo-frame {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--s-azul);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--s-azul);
}

/* ── Responsivo ── */
@media (max-width: 768px) {
  .form-row         { flex-direction: column; gap: 0; }
  .layout-dois-frames { flex-direction: column; }
  .frame-esquerdo   { flex: none; }
  .botoes, .botoes-linha, .setup-toolbar { flex-wrap: wrap; }
  .setup-stats      { flex-wrap: wrap; }
  .stat-card        { min-width: calc(50% - 6px); }
  .search-bar       { flex-direction: column; }
}