/* public/css/tarifa.css — Configurações de tarifas (limpo, 2 abas) */
.tar-tabs{
  display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.25rem;
  border-bottom:2px solid var(--gray-200);
}
.tar-tabs .tab{
  border:0; background:transparent; color:var(--gray-700);
  padding:.75rem 1.4rem; font-weight:600; font-size:.95rem; cursor:pointer;
  border-bottom:3px solid transparent; margin-bottom:-2px;
  display:inline-flex; align-items:center; gap:.45rem;
}
.tar-tabs .tab:hover{ color:var(--blue-700); }
.tar-tabs .tab.on{ color:var(--blue-700); border-bottom-color:var(--blue-700); }

.tar-section{ display:none; }
.tar-section.on{ display:block; animation:fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* Cards de secções */
.cfg-card{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow-sm); margin-bottom:1.25rem;
}
.cfg-card h2{
  font-size:1.05rem; font-weight:700; margin:0 0 1.25rem; color:var(--blue-700);
  display:flex; align-items:center; gap:.5rem;
}
.cfg-card h2 .ic{
  width:30px; height:30px; border-radius:8px; background:var(--blue-100); color:var(--blue-700);
  display:grid; place-items:center; font-size:1rem;
}
.cfg-card h2.amber .ic{ background:#fef3c7; color:#92400e; }
.cfg-card h2.amber{ color:#92400e; }
.cfg-card h2.green .ic{ background:#dcfce7; color:#166534; }
.cfg-card h2.green{ color:#166534; }
.cfg-card h2.red .ic{ background:#fee2e2; color:#b91c1c; }
.cfg-card h2.red{ color:#b91c1c; }

.cfg-card label{ display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:.35rem; }
.cfg-card .form-text{ font-size:.75rem; color:var(--gray-500); margin-top:.3rem; }
.cfg-card input.form-control, .cfg-card select.form-select{
  border:1.5px solid var(--gray-200); border-radius:8px; padding:.55rem .85rem; font-size:.95rem;
}
.cfg-card input.form-control:focus, .cfg-card select.form-select:focus{
  outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(38,145,209,.15);
}
.cfg-card .input-group-text{ background:var(--gray-100); border:1.5px solid var(--gray-200); font-weight:600; }

/* Exemplo do cálculo */
.exemplo-box{
  background:linear-gradient(135deg,#ecfdf5,#d1fae5); border:1px solid #6ee7b7;
  border-radius:10px; padding:.85rem 1.1rem; margin-top:1rem; font-size:.88rem; color:#065f46;
}
.exemplo-box strong{ color:#047857; }
.exemplo-box code{ background:rgba(255,255,255,.7); padding:.1rem .35rem; border-radius:4px; }

/* Botão gravar fixo */
.cfg-save-bar{
  position:sticky; bottom:0; background:#fff;
  border-top:1px solid var(--gray-200); padding:.9rem 1rem;
  margin:1.25rem -1rem -1rem; display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 -4px 12px rgba(0,0,0,.06); z-index:10;
}
.cfg-save-bar .btn-lg{ font-weight:700; padding:.65rem 1.6rem; }

/* ─── Cards de tarifa por tipo de cliente ─────────────────────────── */
.tipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.tipo-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.tipo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tipo-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent, var(--blue-700));
}
.tipo-card .head {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
}
.tipo-card .head .ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-bg, linear-gradient(135deg, var(--blue-500), var(--blue-700)));
  color: #fff; display: grid; place-items: center; font-size: 1.2rem;
}
.tipo-card .head .name {
  font-weight: 700; font-size: 1.05rem; color: var(--gray-900);
  text-transform: capitalize;
}
.tipo-card .head .meta {
  font-size: .75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px;
}
.tipo-card .field { margin-bottom: .75rem; }
.tipo-card .field label {
  font-size: .72rem; color: var(--gray-500); text-transform: uppercase;
  font-weight: 600; letter-spacing: .4px; display: block; margin-bottom: .25rem;
}
.tipo-card .field .input-group .input-group-text {
  font-size: .8rem; padding: .35rem .6rem;
}
.tipo-card .field input.form-control { font-size: .95rem; padding: .45rem .65rem; }
.tipo-card .exemplo {
  margin-top: .9rem; padding: .65rem .8rem;
  background: var(--accent-soft, var(--blue-50));
  border-radius: 8px;
  font-size: .78rem; color: var(--accent-text, var(--blue-800));
  line-height: 1.45;
}
.tipo-card .exemplo strong { font-weight: 700; }

/* ─── Período mensal recorrente — caixa informativa ─────────────────── */
.periodo-info{
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #93c5fd;
  border-radius: 10px;
  padding: .85rem 1rem;
  font-size: .85rem;
  color: #1e3a8a;
  display: flex; align-items: flex-start; gap: .55rem;
  line-height: 1.45;
}
.periodo-info i{ font-size: 1.05rem; margin-top: 1px; color: #2563eb; }
.periodo-info strong{ color: #1e40af; }

/* ─── Exemplo dinâmico de multa ─────────────────────────────────────── */
.exemplo-multa{
  margin-top: 1.1rem;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: .85rem 1rem;
  font-size: .88rem; color: #7f1d1d;
  display: flex; align-items: flex-start; gap: .55rem;
  line-height: 1.5;
}
.exemplo-multa i{ font-size: 1.05rem; margin-top: 1px; color: #dc2626; }
.exemplo-multa strong{ color: #991b1b; }
.exemplo-multa code{
  background: rgba(255,255,255,.7); padding: .1rem .35rem;
  border-radius: 4px; color: #7f1d1d;
}

html[data-theme="dark"] .periodo-info{
  background: rgba(37, 99, 235, .12);
  border-color: rgba(96, 165, 250, .35);
  color: #bfdbfe;
}
html[data-theme="dark"] .periodo-info strong{ color: #dbeafe; }
html[data-theme="dark"] .exemplo-multa{
  background: rgba(220, 38, 38, .12);
  border-color: rgba(252, 165, 165, .35);
  color: #fecaca;
}
html[data-theme="dark"] .exemplo-multa strong{ color: #fee2e2; }
html[data-theme="dark"] .exemplo-multa code{
  background: rgba(255,255,255,.08); color: #fecaca;
}

/* Cores por tipo */
.tipo-card.social        { --accent: #06b6d4; --accent-bg: linear-gradient(135deg, #22d3ee, #06b6d4); --accent-soft: #cffafe; --accent-text: #155e75; }
.tipo-card.domestico     { --accent: #2563eb; --accent-bg: linear-gradient(135deg, #3b82f6, #2563eb); --accent-soft: #dbeafe; --accent-text: #1e40af; }
.tipo-card.comercial     { --accent: #f59e0b; --accent-bg: linear-gradient(135deg, #fbbf24, #f59e0b); --accent-soft: #fef3c7; --accent-text: #92400e; }
.tipo-card.industrial    { --accent: #dc2626; --accent-bg: linear-gradient(135deg, #ef4444, #dc2626); --accent-soft: #fee2e2; --accent-text: #991b1b; }
.tipo-card.institucional { --accent: #7c3aed; --accent-bg: linear-gradient(135deg, #a855f7, #7c3aed); --accent-soft: #ede9fe; --accent-text: #5b21b6; }

/* Dark mode overrides */
html[data-theme="dark"] .tipo-card {
  background: #131c33;
  border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .tipo-card .head .name { color: #f1f5f9; }
html[data-theme="dark"] .tipo-card .exemplo {
  background: rgba(56, 109, 199, .15);
  color: #cdeaff;
}
html[data-theme="dark"] .tipo-card.social        .exemplo { background: rgba(34, 211, 238, .12); color: #67e8f9; }
html[data-theme="dark"] .tipo-card.comercial     .exemplo { background: rgba(245, 158, 11, .12); color: #fcd34d; }
html[data-theme="dark"] .tipo-card.industrial    .exemplo { background: rgba(239, 68, 68, .12); color: #fca5a5; }
html[data-theme="dark"] .tipo-card.institucional .exemplo { background: rgba(168, 85, 247, .15); color: #d8b4fe; }