/* ================================================================
   MODUL: Design system ISU — componentele
   FACE: Piesele refolosibile ale interfeței: butoane, câmpuri de formular,
         etichete de stare, alerte, carduri, antet de pagină, tabel, paginare,
         tab-uri, fereastră modală, stare goală, meniu derulant, notificări
         (toast), încărcare, bară de progres, sertar lateral, pași, zonă de
         încărcare fișiere, căutare, aranjare (rând / stivă / grilă).
         Toate clasele încep cu „isu-".
         Variantele se scriu cu două cratime: isu-buton--principal.
   DEPINDE DE: tokens.css (variabilele --isu-...)
   REGULĂ: aici NU se scrie nicio culoare directă — doar var(--isu-...).
   [Agent_0fa1 2026-10-01]
   ================================================================ */


/* ==================== 1. BUTOANE ==================== */
.isu-buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--isu-spatiu-2);
  height: 38px;
  padding: 0 var(--isu-spatiu-4);
  font-family: var(--isu-font);
  font-size: var(--isu-text-sm);
  font-weight: var(--isu-greutate-mediu);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--isu-rotund);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--isu-tranzitie-rapida), border-color var(--isu-tranzitie-rapida), color var(--isu-tranzitie-rapida), box-shadow var(--isu-tranzitie-rapida);
}
.isu-buton:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--isu-principal-200); }
.isu-buton svg { width: 16px; height: 16px; flex: none; }

/* Principal — acțiunea cea mai importantă de pe ecran (una singură!) */
.isu-buton--principal { background: var(--isu-principal); color: var(--isu-alb); }
.isu-buton--principal:hover { background: var(--isu-principal-hover); }

/* Secundar — acțiuni obișnuite */
.isu-buton--secundar { background: var(--isu-fundal); color: var(--isu-text-normal); border-color: var(--isu-margine-tare); }
.isu-buton--secundar:hover { background: var(--isu-gri-50); color: var(--isu-text); }

/* Discret — fără chenar, pentru acțiuni minore (Anulează, Închide) */
.isu-buton--discret { background: transparent; color: var(--isu-text-normal); }
.isu-buton--discret:hover { background: var(--isu-fundal-hover); color: var(--isu-text); }

/* Pericol — ștergeri și acțiuni ireversibile */
.isu-buton--pericol { background: var(--isu-eroare); color: var(--isu-alb); }
.isu-buton--pericol:hover { background: var(--isu-eroare-hover); }

/* Mărimi */
.isu-buton--mic  { height: 30px; padding: 0 var(--isu-spatiu-3); font-size: var(--isu-text-xs); border-radius: var(--isu-rotund-sm); }
.isu-buton--mare { height: 46px; padding: 0 var(--isu-spatiu-5); font-size: var(--isu-text-base); }

/* Doar iconiță (pătrat) */
.isu-buton--iconita { width: 38px; padding: 0; }
.isu-buton--mic.isu-buton--iconita { width: 30px; }

/* Dezactivat */
.isu-buton:disabled,
.isu-buton.is-dezactivat,
.isu-buton.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Discret care se face roșu la hover (Șterge / Anulează pe un rând de tabel) */
.isu-buton--discret-pericol { background: transparent; color: var(--isu-text-slab); }
.isu-buton--discret-pericol:hover { background: var(--isu-eroare-fundal); color: var(--isu-eroare); }


/* ==================== 2. CÂMPURI DE FORMULAR ==================== */
.isu-camp { display: flex; flex-direction: column; gap: 6px; }

.isu-camp-eticheta {
  font-size: var(--isu-text-sm);
  font-weight: var(--isu-greutate-mediu);
  color: var(--isu-text);
}
.isu-camp-eticheta .isu-obligatoriu { color: var(--isu-eroare); margin-left: 2px; }

.isu-input,
.isu-select,
.isu-textarea {
  width: 100%;
  height: 38px;
  padding: 0 var(--isu-spatiu-3);
  font-family: var(--isu-font);
  font-size: var(--isu-text-sm);
  color: var(--isu-text);
  background: var(--isu-fundal);
  border: 1px solid var(--isu-margine-tare);
  border-radius: var(--isu-rotund);
  transition: border-color var(--isu-tranzitie-rapida), box-shadow var(--isu-tranzitie-rapida);
}
.isu-textarea { height: auto; min-height: 96px; padding: var(--isu-spatiu-2) var(--isu-spatiu-3); line-height: 1.5; resize: vertical; }
.isu-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}
.isu-input::placeholder,
.isu-textarea::placeholder { color: var(--isu-text-stins); }

.isu-input:focus,
.isu-select:focus,
.isu-textarea:focus { outline: none; border-color: var(--isu-principal); box-shadow: 0 0 0 3px var(--isu-principal-100); }

.isu-input:disabled,
.isu-select:disabled,
.isu-textarea:disabled { background: var(--isu-gri-100); color: var(--isu-text-stins); cursor: not-allowed; }

/* Câmp cu eroare */
.isu-camp.is-eroare .isu-input,
.isu-camp.is-eroare .isu-select,
.isu-camp.is-eroare .isu-textarea { border-color: var(--isu-eroare); }
.isu-camp.is-eroare .isu-input:focus { box-shadow: 0 0 0 3px var(--isu-eroare-fundal); }

.isu-camp-ajutor { font-size: var(--isu-text-xs); color: var(--isu-text-slab); }
.isu-camp.is-eroare .isu-camp-ajutor { color: var(--isu-eroare); }

/* Bifă și opțiune */
.isu-bifa {
  display: inline-flex;
  align-items: center;
  gap: var(--isu-spatiu-2);
  font-size: var(--isu-text-sm);
  color: var(--isu-text-normal);
  cursor: pointer;
}
.isu-bifa input { width: 16px; height: 16px; margin: 0; accent-color: var(--isu-principal); cursor: pointer; }

/* Comutator (pornit / oprit) */
.isu-comutator { position: relative; display: inline-flex; align-items: center; gap: var(--isu-spatiu-2); cursor: pointer; font-size: var(--isu-text-sm); }
.isu-comutator input { position: absolute; opacity: 0; width: 0; height: 0; }
.isu-comutator-pista {
  position: relative;
  width: 36px; height: 20px;
  background: var(--isu-gri-300);
  border-radius: var(--isu-rotund-full);
  transition: background-color var(--isu-tranzitie-rapida);
}
.isu-comutator-pista::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--isu-alb);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform var(--isu-tranzitie-rapida);
}
.isu-comutator input:checked + .isu-comutator-pista { background: var(--isu-principal); }
.isu-comutator input:checked + .isu-comutator-pista::after { transform: translateX(16px); }


/* ==================== 3. ETICHETE DE STARE (badge) ==================== */
.isu-eticheta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  font-size: var(--isu-text-xs);
  font-weight: var(--isu-greutate-mediu);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--isu-rotund-full);
  background: var(--isu-gri-100);
  color: var(--isu-gri-700);
}
.isu-eticheta--info       { background: var(--isu-info-fundal);       color: var(--isu-principal-700); }
.isu-eticheta--succes     { background: var(--isu-succes-fundal);     color: var(--isu-succes); }
.isu-eticheta--avertizare { background: var(--isu-avertizare-fundal); color: var(--isu-avertizare); }
.isu-eticheta--eroare     { background: var(--isu-eroare-fundal);     color: var(--isu-eroare); }
/* Punctul colorat din fața textului (opțional) */
.isu-eticheta-punct { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.isu-eticheta--suplimentar { background: var(--isu-suplimentar-fundal); color: var(--isu-suplimentar-text); }
/* Serviciul (SSM albastru, SU roșu) — în orice listă de instructaje / teste / firme */
.isu-eticheta--ssm { background: var(--isu-serviciu-ssm-fundal); color: var(--isu-serviciu-ssm-text); }
.isu-eticheta--su  { background: var(--isu-serviciu-su-fundal);  color: var(--isu-serviciu-su-text); }
/* Text lung, pe mai multe rânduri */
.isu-eticheta--text-lung { height: auto; min-height: 22px; padding-top: 3px; padding-bottom: 3px; white-space: normal; line-height: 1.35; }
/* Etichetă pe care se poate apăsa (<button class="isu-eticheta isu-eticheta--buton …">) */
.isu-eticheta--buton { border: 0; font-family: inherit; cursor: pointer; }
.isu-eticheta--buton:hover { box-shadow: inset 0 0 0 1px currentColor; }


/* ==================== 4. ALERTE ==================== */
.isu-alerta {
  display: flex;
  gap: var(--isu-spatiu-3);
  padding: var(--isu-spatiu-3) var(--isu-spatiu-4);
  font-size: var(--isu-text-sm);
  line-height: 1.5;
  border: 1px solid var(--isu-info-margine);
  border-radius: var(--isu-rotund);
  background: var(--isu-info-fundal);
  color: var(--isu-text-normal);
}
.isu-alerta-iconita { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--isu-info); }
.isu-alerta-titlu { display: block; font-weight: var(--isu-greutate-semi); color: var(--isu-text); margin-bottom: 2px; }

.isu-alerta--succes     { background: var(--isu-succes-fundal);     border-color: var(--isu-succes-margine); }
.isu-alerta--succes .isu-alerta-iconita { color: var(--isu-succes); }
.isu-alerta--avertizare { background: var(--isu-avertizare-fundal); border-color: var(--isu-avertizare-margine); }
.isu-alerta--avertizare .isu-alerta-iconita { color: var(--isu-avertizare); }
.isu-alerta--eroare     { background: var(--isu-eroare-fundal);     border-color: var(--isu-eroare-margine); }
.isu-alerta--eroare .isu-alerta-iconita { color: var(--isu-eroare); }
/* Alertă cu un buton în dreapta: <div class="isu-alerta isu-alerta--actiune">…<button class="isu-buton …"></div> */
.isu-alerta--actiune { align-items: center; }
.isu-alerta--actiune > .isu-buton:last-child { margin-left: auto; flex: none; }


/* ==================== 5. CARD ==================== */
.isu-card {
  background: var(--isu-fundal);
  border: 1px solid var(--isu-margine);
  border-radius: var(--isu-rotund-lg);
  overflow: hidden;
}
.isu-card-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--isu-spatiu-3);
  padding: var(--isu-spatiu-4) var(--isu-spatiu-5);
  border-bottom: 1px solid var(--isu-margine);
}
.isu-card-corp { padding: var(--isu-spatiu-5); }
.isu-card-subsol {
  display: flex;
  justify-content: flex-end;
  gap: var(--isu-spatiu-2);
  padding: var(--isu-spatiu-3) var(--isu-spatiu-5);
  background: var(--isu-gri-50);
  border-top: 1px solid var(--isu-margine);
}

/* Card de cifră (statistică) */
.isu-card-cifra { padding: var(--isu-spatiu-4) var(--isu-spatiu-5); }
.isu-card-cifra-valoare { font-size: var(--isu-text-3xl); font-weight: var(--isu-greutate-bold); line-height: 1.1; color: var(--isu-text); margin-top: 4px; }


/* ==================== 6. ANTETUL DE PAGINĂ ==================== */
.isu-antet-pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--isu-spatiu-4);
  padding-bottom: var(--isu-spatiu-5);
  margin-bottom: var(--isu-spatiu-5);
  border-bottom: 1px solid var(--isu-margine);
}
.isu-antet-pagina-descriere { margin-top: 4px; font-size: var(--isu-text-sm); color: var(--isu-text-slab); }
.isu-antet-pagina-actiuni { display: flex; gap: var(--isu-spatiu-2); flex-wrap: wrap; }


/* ==================== 7. TABEL ==================== */
.isu-tabel-cadru {
  background: var(--isu-fundal);
  border: 1px solid var(--isu-margine);
  border-radius: var(--isu-rotund-lg);
  overflow-x: auto;
}
.isu-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--isu-text-sm);
  color: var(--isu-text-normal);
}
.isu-tabel th {
  padding: 10px var(--isu-spatiu-4);
  text-align: left;
  font-size: var(--isu-text-xs);
  font-weight: var(--isu-greutate-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--isu-text-slab);
  background: var(--isu-gri-50);
  border-bottom: 1px solid var(--isu-margine);
  white-space: nowrap;
}
.isu-tabel td {
  padding: var(--isu-spatiu-3) var(--isu-spatiu-4);
  border-bottom: 1px solid var(--isu-gri-100);
  vertical-align: middle;
}
.isu-tabel tbody tr:last-child td { border-bottom: none; }
.isu-tabel tbody tr { transition: background-color var(--isu-tranzitie-rapida); }
.isu-tabel tbody tr:hover { background: var(--isu-gri-50); }
.isu-tabel tbody tr.is-selectat { background: var(--isu-principal-50); }
.isu-tabel .isu-tabel-numar { text-align: right; font-variant-numeric: tabular-nums; }
.isu-tabel .isu-tabel-centru { text-align: center; }
.isu-tabel .isu-tabel-centru .isu-rand { justify-content: center; }

/* Persoană în celulă: avatar + nume + detaliu */
.isu-persoana { display: flex; align-items: center; gap: var(--isu-spatiu-3); }
.isu-avatar {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--isu-principal-100);
  color: var(--isu-principal-700);
  font-size: var(--isu-text-xs);
  font-weight: var(--isu-greutate-semi);
}
.isu-persoana-nume { color: var(--isu-text); font-weight: var(--isu-greutate-mediu); }
/* Avatarul cu poză (img.isu-avatar) și mărimea mare */
img.isu-avatar,
.isu-ds img.isu-avatar { border-radius: 50%; object-fit: cover; }
.isu-avatar--mare { width: 64px; height: 64px; font-size: var(--isu-text-lg); }
.isu-persoana-detaliu { font-size: var(--isu-text-xs); color: var(--isu-text-slab); }


/* ==================== 8. PAGINARE ==================== */
.isu-paginare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--isu-spatiu-3);
  padding: var(--isu-spatiu-3) var(--isu-spatiu-4);
  font-size: var(--isu-text-sm);
  color: var(--isu-text-slab);
  border-top: 1px solid var(--isu-margine);
}
.isu-paginare-pagini { display: flex; gap: 4px; }
.isu-paginare-pagina {
  min-width: 32px; height: 32px;
  padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--isu-font);
  font-size: var(--isu-text-sm);
  color: var(--isu-text-normal);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--isu-rotund-sm);
  cursor: pointer;
}
.isu-paginare-pagina:hover { background: var(--isu-fundal-hover); }
.isu-paginare-pagina.is-activ { background: var(--isu-principal); color: var(--isu-alb); }
.isu-paginare-pagina:disabled,
.isu-paginare-pagina.disabled { opacity: .4; cursor: default; }
.isu-paginare-pagina:disabled:hover,
.isu-paginare-pagina.disabled:hover { background: transparent; }


/* ==================== 9. TAB-URI ==================== */
.isu-taburi {
  display: flex;
  gap: var(--isu-spatiu-5);
  border-bottom: 1px solid var(--isu-margine);
  overflow-x: auto;
}
.isu-tab {
  position: relative;
  padding: var(--isu-spatiu-3) 0;
  font-family: var(--isu-font);
  font-size: var(--isu-text-sm);
  font-weight: var(--isu-greutate-mediu);
  color: var(--isu-text-slab);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.isu-tab:hover { color: var(--isu-text); }
.isu-tab.is-activ { color: var(--isu-principal-600); }
.isu-tab.is-activ::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--isu-principal);
  border-radius: 2px 2px 0 0;
}


/* ==================== 10. FEREASTRĂ MODALĂ ==================== */
.isu-modal-fundal {
  position: fixed; inset: 0;
  z-index: var(--isu-z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--isu-spatiu-4);
  background: rgba(17, 24, 39, .5);
}
.isu-modal {
  z-index: var(--isu-z-modal);
  width: 100%;
  max-width: 520px;
  background: var(--isu-fundal);
  border-radius: var(--isu-rotund-lg);
  box-shadow: var(--isu-umbra-xl);
  overflow: hidden;
}
.isu-modal-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--isu-spatiu-3);
  padding: var(--isu-spatiu-4) var(--isu-spatiu-5);
  border-bottom: 1px solid var(--isu-margine);
}
.isu-modal-corp { padding: var(--isu-spatiu-5); }
.isu-modal-subsol {
  display: flex; justify-content: flex-end; gap: var(--isu-spatiu-2);
  padding: var(--isu-spatiu-3) var(--isu-spatiu-5);
  background: var(--isu-gri-50);
  border-top: 1px solid var(--isu-margine);
}
/* Fereastră lată, cu corpul care se derulează (capul și butoanele rămân pe loc) */
.isu-modal--lat,
.isu-modal--foarte-lat { max-width: 720px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
.isu-modal--foarte-lat { max-width: 960px; }
.isu-modal--lat .isu-modal-corp,
.isu-modal--foarte-lat .isu-modal-corp,
.isu-modal--derulabil .isu-modal-corp { flex: 1; min-height: 0; overflow-y: auto; }
/* Lățime normală, dar corpul se derulează când conținutul e lung */
.isu-modal--derulabil { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
/* Fereastra ascunsă / deschisă prin clasă (în loc de reguli proprii în fiecare modul) */
.isu-modal-fundal.is-ascuns { display: none; }


/* ==================== 11. STARE GOALĂ (nu există date) ==================== */
.isu-gol {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--isu-spatiu-2);
  padding: var(--isu-spatiu-7) var(--isu-spatiu-5);
  text-align: center;
  border: 1px dashed var(--isu-margine-tare);
  border-radius: var(--isu-rotund-lg);
  color: var(--isu-text-slab);
}
.isu-gol-iconita {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--isu-gri-100);
  color: var(--isu-gri-500);
  margin-bottom: var(--isu-spatiu-2);
}
.isu-gol-iconita svg { width: 22px; height: 22px; }
.isu-card .isu-gol { border: 0; }


/* ==================== 12. MENIU DERULANT (ex. meniul de profil) ==================== */
.isu-meniu-item {
  display: flex;
  align-items: center;
  padding: var(--isu-spatiu-2) var(--isu-spatiu-3);
  font-size: var(--isu-text-sm);
  line-height: 20px;
  color: var(--isu-gri-700);
  text-decoration: none;
  border-radius: var(--isu-rotund);
}
.isu-meniu-item:hover { background-color: var(--isu-fundal-hover); }
.isu-meniu-item > svg {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: var(--isu-spatiu-2);
}
/* Acțiune periculoasă (Deconectare, Șterge) */
.isu-meniu-item--pericol { color: var(--isu-eroare-500); }

/* Rând cu text în stânga și comutator în dreapta */
.isu-meniu-item--comutator {
  justify-content: space-between;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.isu-meniu-item-eticheta {
  display: flex;
  align-items: center;
  gap: var(--isu-spatiu-2);
}
.isu-meniu-item-eticheta svg {
  display: block;
  width: 16px;
  height: 16px;
}

.isu-meniu-separator {
  border-top: 1px solid var(--isu-margine);
  margin: 4px 0;
}


/* ==================== 13. NOTIFICĂRI SCURTE (toast) ====================
   Containerul: <div class="isu-toasturi"> (în navigație: #toast-container).
   <div class="isu-toast isu-toast--succes"><div class="isu-toast-iconita">…svg…</div>
     <div class="isu-toast-mesaj">Salvat</div><button class="isu-toast-inchide">…</button></div> */
.isu-toasturi {
  pointer-events: none;   /* containerul gol nu prinde clicuri */
  position: fixed;
  top: 0;
  right: 0;
  padding: var(--isu-spatiu-4);
  z-index: var(--isu-z-toast);
}
.isu-toast {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  padding: var(--isu-spatiu-4);
  margin-bottom: var(--isu-spatiu-4);
  border-radius: var(--isu-rotund);
  box-shadow: var(--isu-umbra-lg);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(.4, 0, .2, 1);
  color: var(--isu-principal-800);
  background-color: var(--isu-principal-100);
  pointer-events: auto;
}
.isu-toast.is-vizibil { opacity: 1; }
.isu-toast--succes { color: var(--isu-succes-800); background-color: var(--isu-succes-100); }
.isu-toast--eroare { color: var(--isu-eroare-800); background-color: var(--isu-eroare-100); }
.isu-toast-iconita {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--isu-rotund);
  color: var(--isu-principal);
  background-color: var(--isu-principal-100);
}
.isu-toast--succes .isu-toast-iconita { color: var(--isu-succes-500); background-color: var(--isu-succes-100); }
.isu-toast--eroare .isu-toast-iconita { color: var(--isu-eroare-500); background-color: var(--isu-eroare-100); }
.isu-toast-iconita svg { display: block; width: 20px; height: 20px; }
.isu-toast-mesaj {
  margin-left: var(--isu-spatiu-3);
  font-size: var(--isu-text-sm);
  line-height: 20px;
  font-weight: var(--isu-greutate-normal);
}
.isu-toast-inchide {
  margin: -6px -6px -6px auto;
  width: 32px;
  height: 32px;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--isu-rotund);
  cursor: pointer;
  color: var(--isu-principal);
  background-color: var(--isu-principal-100);
}
.isu-toast-inchide:hover { background-color: var(--isu-principal-200); }
.isu-toast--succes .isu-toast-inchide { color: var(--isu-succes-500); background-color: var(--isu-succes-100); }
.isu-toast--succes .isu-toast-inchide:hover { background-color: var(--isu-succes-margine); }
.isu-toast--eroare .isu-toast-inchide { color: var(--isu-eroare-500); background-color: var(--isu-eroare-100); }
.isu-toast--eroare .isu-toast-inchide:hover { background-color: var(--isu-eroare-margine); }
.isu-toast-inchide svg { display: block; width: 12px; height: 12px; }


/* ==================== 14. ÎNCĂRCARE (cerc care se învârte) ====================
   <span class="isu-incarcare"></span>  ·  pe buton: <button class="isu-buton isu-buton--principal is-incarca">
   Variante: isu-incarcare--mic (14px), isu-incarcare--mare (32px); pe fundal închis: isu-incarcare--alb */
@keyframes isu-roteste { to { transform: rotate(360deg); } }
.isu-incarcare {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid var(--isu-gri-200);
  border-top-color: var(--isu-principal);
  border-radius: 50%;
  animation: isu-roteste .7s linear infinite;
  vertical-align: middle;
}
.isu-incarcare--mic  { width: 14px; height: 14px; }
.isu-incarcare--mare { width: 32px; height: 32px; border-width: 3px; }
.isu-incarcare--alb  { border-color: rgba(255, 255, 255, .35); border-top-color: var(--isu-alb); }
/* Zonă care se încarcă: text + cerc, centrate */
.isu-se-incarca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--isu-spatiu-3);
  padding: var(--isu-spatiu-6);
  color: var(--isu-text-slab);
  font-size: var(--isu-text-sm);
}
/* Butonul în timp ce lucrează: textul rămâne, apare cercul, nu se mai poate apăsa */
.isu-buton.is-incarca { pointer-events: none; opacity: .8; }
.isu-buton.is-incarca::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: isu-roteste .7s linear infinite;
}


/* ==================== 15. BARĂ DE PROGRES ====================
   <div class="isu-progres"><div class="isu-progres-umplere" style="width:40%"></div></div> */
.isu-progres {
  width: 100%;
  height: 8px;
  background: var(--isu-gri-200);
  border-radius: var(--isu-rotund-full);
  overflow: hidden;
}
.isu-progres--subtire { height: 4px; }
.isu-progres-umplere {
  height: 100%;
  background: var(--isu-principal);
  border-radius: var(--isu-rotund-full);
  transition: width var(--isu-tranzitie);
}
.isu-progres--succes .isu-progres-umplere     { background: var(--isu-succes); }
.isu-progres--avertizare .isu-progres-umplere { background: var(--isu-avertizare); }
.isu-progres--eroare .isu-progres-umplere     { background: var(--isu-eroare); }


/* ==================== 16. SERTAR LATERAL (panou care vine din dreapta) ====================
   <div class="isu-sertar-fundal"></div>
   <aside class="isu-sertar is-deschis"><div class="isu-sertar-cap">…</div><div class="isu-sertar-corp">…</div><div class="isu-sertar-subsol">…</div></aside> */
.isu-sertar-fundal {
  position: fixed;
  inset: 0;
  z-index: var(--isu-z-overlay);
  background: rgba(17, 24, 39, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--isu-tranzitie);
}
.isu-sertar-fundal.is-deschis { opacity: 1; pointer-events: auto; }
.isu-sertar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--isu-z-modal);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  background: var(--isu-fundal);
  box-shadow: var(--isu-umbra-xl);
  transform: translateX(100%);
  transition: transform var(--isu-tranzitie);
}
/* închis: și invizibil (altfel i se vede umbra la margine și se ajunge cu Tab în el) */
.isu-sertar { visibility: hidden; transition: transform var(--isu-tranzitie), visibility var(--isu-tranzitie); }
.isu-sertar.is-deschis { transform: translateX(0); visibility: visible; }
.isu-sertar--lat { max-width: 720px; }
.isu-sertar-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--isu-spatiu-3);
  padding: var(--isu-spatiu-4) var(--isu-spatiu-5);
  border-bottom: 1px solid var(--isu-margine);
}
.isu-sertar-corp { flex: 1; overflow-y: auto; padding: var(--isu-spatiu-5); }
.isu-sertar-subsol {
  display: flex;
  justify-content: flex-end;
  gap: var(--isu-spatiu-2);
  padding: var(--isu-spatiu-3) var(--isu-spatiu-5);
  background: var(--isu-gri-50);
  border-top: 1px solid var(--isu-margine);
}


/* ==================== 17. PAȘI (ex. importul în 4 etape) ====================
   <ol class="isu-pasi"><li class="isu-pas is-gata"><span class="isu-pas-nr">1</span><span class="isu-pas-nume">Încărcare</span></li>
     <li class="isu-pas is-activ">…</li><li class="isu-pas">…</li></ol> */
.isu-pasi {
  display: flex;
  align-items: center;
  gap: var(--isu-spatiu-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.isu-pas {
  display: flex;
  align-items: center;
  gap: var(--isu-spatiu-2);
  font-size: var(--isu-text-sm);
  color: var(--isu-text-slab);
}
.isu-pas + .isu-pas::before {
  content: "";
  width: 32px;
  height: 2px;
  margin-right: var(--isu-spatiu-2);
  background: var(--isu-gri-200);
  border-radius: 2px;
}
.isu-pas-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--isu-gri-300);
  background: var(--isu-fundal);
  font-size: var(--isu-text-xs);
  font-weight: var(--isu-greutate-semi);
  color: var(--isu-text-slab);
}
.isu-pas-nume { white-space: nowrap; }
.isu-pas.is-activ { color: var(--isu-text); font-weight: var(--isu-greutate-mediu); }
.isu-pas.is-activ .isu-pas-nr { border-color: var(--isu-principal); background: var(--isu-principal); color: var(--isu-alb); }
.isu-pas.is-gata .isu-pas-nr { border-color: var(--isu-succes); background: var(--isu-succes); color: var(--isu-alb); }
.isu-pas.is-gata + .isu-pas::before { background: var(--isu-succes); }


/* ==================== 18. ZONĂ DE ÎNCĂRCARE FIȘIER (trage fișierul aici) ====================
   <label class="isu-zona-fisier"><input type="file" hidden> <span class="isu-titlu-card">Trage fișierul aici</span>
     <span class="isu-text-mic isu-text-slab">sau apasă pentru a alege (.xlsx)</span></label>
   JavaScript pune .is-peste cât timp fișierul e tras deasupra. */
.isu-zona-fisier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--isu-spatiu-2);
  padding: var(--isu-spatiu-6) var(--isu-spatiu-5);
  text-align: center;
  border: 2px dashed var(--isu-margine-tare);
  border-radius: var(--isu-rotund-lg);
  background: var(--isu-gri-50);
  color: var(--isu-text-slab);
  cursor: pointer;
  transition: border-color var(--isu-tranzitie-rapida), background-color var(--isu-tranzitie-rapida);
}
.isu-zona-fisier:hover,
.isu-zona-fisier.is-peste { border-color: var(--isu-principal); background: var(--isu-principal-50); }
.isu-zona-fisier svg { width: 32px; height: 32px; color: var(--isu-gri-400); }


/* ==================== 19. CĂUTARE (câmp cu lupă) ====================
   <div class="isu-camp-cautare"><svg>…lupă…</svg><input class="isu-input" placeholder="Caută…"></div> */
.isu-camp-cautare { position: relative; }
.isu-camp-cautare > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--isu-gri-400);
  pointer-events: none;
}
.isu-camp-cautare > .isu-input { padding-left: 34px; }


/* ==================== 20. INDICIU (tooltip simplu) ====================
   <span class="isu-indiciu" data-indiciu="Textul care apare la hover">?</span> */
.isu-indiciu { position: relative; }
.isu-indiciu[data-indiciu]:hover::after {
  content: attr(data-indiciu);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--isu-z-tooltip);
  width: max-content;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: var(--isu-rotund-sm);
  background: var(--isu-gri-900);
  color: var(--isu-alb);
  font-size: var(--isu-text-xs);
  line-height: 1.4;
  font-weight: var(--isu-greutate-normal);
  white-space: normal;
  pointer-events: none;
}


/* ==================== 21. ARANJARE (rând, stivă, grilă, bară de unelte) ====================
   Folosește-le în loc să scrii flex/grid în CSS-ul modulului. */
.isu-rand { display: flex; align-items: center; flex-wrap: wrap; gap: var(--isu-spatiu-2); }
.isu-rand--mare   { gap: var(--isu-spatiu-4); }
.isu-rand--intre  { justify-content: space-between; }
.isu-rand--dreapta { justify-content: flex-end; }
.isu-rand--sus    { align-items: flex-start; }
.isu-rand--fara-rupere { flex-wrap: nowrap; }
.isu-stiva { display: flex; flex-direction: column; gap: var(--isu-spatiu-4); }
.isu-stiva--mica { gap: var(--isu-spatiu-2); }
.isu-stiva--mare { gap: var(--isu-spatiu-6); }
.isu-grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--isu-spatiu-4); }
.isu-grila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.isu-grila--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.isu-grila--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .isu-grila--2, .isu-grila--3, .isu-grila--4 { grid-template-columns: minmax(0, 1fr); }
}
.isu-creste { flex: 1 1 0%; min-width: 0; }
.isu-rand--centru { justify-content: center; }
.isu-stiva--centru { align-items: center; text-align: center; }
.isu-trunchiat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Bara de unelte de deasupra unui tabel: căutare + filtre în stânga, butoane în dreapta */
.isu-bara-unelte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--isu-spatiu-3);
  margin-bottom: var(--isu-spatiu-4);
}
/* Conținutul paginii: lățime maximă + margini egale */
.isu-pagina { max-width: 1280px; margin: 0 auto; padding: var(--isu-spatiu-5); }


/* ==================== 22. PANOUL MENIULUI DERULANT ====================
   <div class="isu-meniu-loc"><button class="isu-buton isu-buton--secundar">Acțiuni</button>
     <div class="isu-meniu isu-meniu--dreapta hidden"><a class="isu-meniu-item">…</a><button class="isu-meniu-item">…</button></div></div>
   Rândurile sunt isu-meniu-item (secțiunea 12) — merg și pe <a>, și pe <button>/<div>. */
.isu-meniu-loc { position: relative; display: inline-flex; }
.isu-meniu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: var(--isu-z-dropdown);
  min-width: 192px;
  padding: var(--isu-spatiu-1);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--isu-greutate-normal);
  background: var(--isu-fundal);
  border: 1px solid var(--isu-margine);
  border-radius: var(--isu-rotund-lg);
  box-shadow: var(--isu-umbra-lg);
}
.isu-meniu--stanga { left: 0; }
.isu-meniu--dreapta { right: 0; }
.isu-meniu--lat { width: 320px; padding: var(--isu-spatiu-4); }
button.isu-meniu-item,
div.isu-meniu-item {
  width: 100%;
  margin: 0;
  font-family: inherit;
  font-weight: var(--isu-greutate-normal);
  text-align: left;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}
button.isu-meniu-item:hover,
div.isu-meniu-item:hover { background: var(--isu-fundal-hover); }
.isu-meniu-item--avertizare { color: var(--isu-avertizare); }


/* ==================== 23. SORTARE ÎN CAPUL DE TABEL ====================
   <th><button class="isu-tabel-sortare is-activ">Nume <svg>…</svg></button></th> */
button.isu-tabel-sortare {
  display: inline-flex;
  align-items: center;
  gap: var(--isu-spatiu-1);
  margin: 0 calc(-1 * var(--isu-spatiu-1));
  padding: var(--isu-spatiu-1);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--isu-rotund-sm);
  cursor: pointer;
  transition: background-color var(--isu-tranzitie-rapida), color var(--isu-tranzitie-rapida);
}
button.isu-tabel-sortare:hover { background: var(--isu-gri-100); color: var(--isu-text); }
button.isu-tabel-sortare.is-activ { background: var(--isu-gri-200); color: var(--isu-text); }
.isu-tabel-sortare svg { width: 14px; height: 14px; color: var(--isu-gri-400); }


/* ==================== 24. PAGINAREA DESENATĂ DE Pagination.js ====================
   Pui clasa isu-paginare-js pe elementul în care biblioteca își desenează paginarea:
   arată la fel ca isu-paginare (secțiunea 8). */
.isu-paginare-js .paginationjs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--isu-spatiu-3);
  font-family: inherit;
  font-size: var(--isu-text-sm);
  line-height: 1.5;
  color: var(--isu-text-slab);
  box-sizing: border-box;
}
.isu-paginare-js .paginationjs::after { display: none; }
.isu-paginare-js .paginationjs .paginationjs-pages { float: none; margin: 0; }
.isu-paginare-js .paginationjs .paginationjs-pages ul { display: flex; gap: 4px; float: none; margin: 0; padding: 0; list-style: none; }
.isu-paginare-js .paginationjs .paginationjs-pages li,
.isu-paginare-js .paginationjs .paginationjs-pages li:first-child,
.isu-paginare-js .paginationjs .paginationjs-pages li:last-child,
.isu-paginare-js .paginationjs .paginationjs-pages li.active {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  list-style: none;
}
.isu-paginare-js .paginationjs .paginationjs-pages li > a,
.isu-paginare-js .paginationjs .paginationjs-pages li.active > a,
.isu-paginare-js .paginationjs .paginationjs-pages li:first-child > a,
.isu-paginare-js .paginationjs .paginationjs-pages li:last-child > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--isu-spatiu-2);
  font-size: var(--isu-text-sm);
  line-height: 1;
  color: var(--isu-text-normal);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--isu-rotund-sm);
  text-decoration: none;
  cursor: pointer;
}
.isu-paginare-js .paginationjs .paginationjs-pages li > a:hover { background: var(--isu-fundal-hover); }
.isu-paginare-js .paginationjs .paginationjs-pages li.active > a { background: var(--isu-principal); color: var(--isu-alb); cursor: default; }
.isu-paginare-js .paginationjs .paginationjs-pages li.disabled > a { opacity: .4; cursor: default; }
.isu-paginare-js .paginationjs .paginationjs-pages li.disabled > a:hover { background: transparent; }
.isu-paginare-js .paginationjs .paginationjs-size-changer { float: none; margin: 0; font-size: var(--isu-text-sm); }
.isu-paginare-js .paginationjs .paginationjs-size-changer > select {
  height: 32px;
  padding: 0 var(--isu-spatiu-2);
  font-family: inherit;
  font-size: var(--isu-text-sm);
  color: var(--isu-text-normal);
  background: var(--isu-fundal);
  border: 1px solid var(--isu-margine-tare);
  border-radius: var(--isu-rotund-sm);
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}
.isu-paginare-js .paginationjs .paginationjs-size-changer > select:focus { outline: none; border-color: var(--isu-principal); box-shadow: 0 0 0 3px var(--isu-principal-100); }
.isu-paginare-js .paginationjs .paginationjs-go-input,
.isu-paginare-js .paginationjs .paginationjs-go-button,
.isu-paginare-js .paginationjs .paginationjs-nav { display: none; }


/* ==================== 25. LISTĂ DE DETALII (etichetă — valoare) ====================
   <dl class="isu-detalii"><div class="isu-detalii-rand"><dt>Funcție</dt><dd>Electrician</dd></div>…</dl> */
.isu-detalii { margin: 0; }
.isu-detalii-rand {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--isu-spatiu-4);
  padding: 10px 0;
  font-size: var(--isu-text-sm);
  border-bottom: 1px solid var(--isu-gri-100);
}
.isu-detalii-rand:last-child { border-bottom: 0; }
.isu-detalii-rand dt { flex: none; margin: 0; color: var(--isu-text-slab); }
.isu-detalii-rand dd { margin: 0; color: var(--isu-text); font-weight: var(--isu-greutate-mediu); text-align: right; word-break: break-word; }


/* ==================== 26. CÂMP CU SUGESTII („alege din listă sau creează") ====================
   <div class="isu-sugestii [is-deschis]"><input class="isu-input"><svg class="isu-sugestii-sageata">…</svg>
     <div class="isu-sugestii-lista"><div class="isu-sugestii-optiune [is-evidentiat]">…</div>
     <div class="isu-sugestii-creeaza">+ Creează „…"</div><div class="isu-sugestii-gol">Nimic găsit</div></div></div> */
.isu-sugestii { position: relative; display: block; }
.isu-sugestii > .isu-input { padding-right: 34px; }
.isu-sugestii-sageata {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--isu-gri-400);
  pointer-events: none;
  transition: transform var(--isu-tranzitie-rapida), color var(--isu-tranzitie-rapida);
}
.isu-sugestii:focus-within .isu-sugestii-sageata { color: var(--isu-principal); }
.isu-sugestii.is-deschis .isu-sugestii-sageata { transform: translateY(-50%) rotate(180deg); }
.isu-sugestii-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--isu-z-dropdown);
  max-height: 260px;
  overflow-y: auto;
  padding: var(--isu-spatiu-1);
  background: var(--isu-fundal);
  border: 1px solid var(--isu-margine);
  border-radius: var(--isu-rotund-lg);
  box-shadow: var(--isu-umbra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--isu-tranzitie-rapida), transform var(--isu-tranzitie-rapida), visibility var(--isu-tranzitie-rapida);
}
.isu-sugestii.is-deschis .isu-sugestii-lista { opacity: 1; visibility: visible; transform: translateY(0); }
.isu-sugestii-optiune {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--isu-spatiu-2) var(--isu-spatiu-3);
  font-size: var(--isu-text-sm);
  color: var(--isu-text);
  border-radius: var(--isu-rotund);
  cursor: pointer;
}
.isu-sugestii-optiune:hover,
.isu-sugestii-optiune.is-evidentiat { background: var(--isu-principal-50); color: var(--isu-principal-700); }
.isu-sugestii-optiune mark { background: transparent; color: inherit; font-weight: var(--isu-greutate-bold); }
.isu-sugestii-creeaza {
  display: flex;
  align-items: center;
  gap: var(--isu-spatiu-2);
  margin-top: var(--isu-spatiu-1);
  padding: var(--isu-spatiu-2) var(--isu-spatiu-3);
  font-size: var(--isu-text-sm);
  font-weight: var(--isu-greutate-semi);
  color: var(--isu-principal-600);
  background: var(--isu-gri-50);
  border-top: 1px solid var(--isu-gri-100);
  border-radius: var(--isu-rotund);
  cursor: pointer;
}
.isu-sugestii-creeaza:hover,
.isu-sugestii-creeaza.is-evidentiat { background: var(--isu-principal-50); }
.isu-sugestii-creeaza svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.isu-sugestii-gol { padding: var(--isu-spatiu-4) var(--isu-spatiu-3); text-align: center; font-size: var(--isu-text-sm); color: var(--isu-text-stins); }


/* ==================== 27. SEGMENTE (comutator din butoane lipite: Toate / SSM / SU) ====================
   <div class="isu-segmente"><button class="is-activ">Toate</button><button>SSM</button><button>SU</button></div> */
.isu-segmente {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--isu-gri-100);
  border-radius: var(--isu-rotund);
}
.isu-segmente > button,
.isu-segmente > a {
  display: inline-flex;
  align-items: center;
  gap: var(--isu-spatiu-1);
  height: 30px;
  padding: 0 var(--isu-spatiu-3);
  font-family: inherit;
  font-size: var(--isu-text-sm);
  font-weight: var(--isu-greutate-mediu);
  color: var(--isu-text-slab);
  background: transparent;
  border: 0;
  border-radius: var(--isu-rotund-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--isu-tranzitie-rapida), color var(--isu-tranzitie-rapida);
}
.isu-segmente > button:hover,
.isu-segmente > a:hover { color: var(--isu-text); }
.isu-segmente > .is-activ,
.isu-segmente > .active { background: var(--isu-fundal); color: var(--isu-text); box-shadow: var(--isu-umbra-sm); }


/* ==================== 28. OPȚIUNE DE ALES DINTR-O LISTĂ (persoană, instructaj) ====================
   <label class="isu-optiune [is-selectat]"><input type="radio"> … </label>  (sau <div>/<button>) */
.isu-optiune {
  display: flex;
  align-items: center;
  gap: var(--isu-spatiu-3);
  width: 100%;
  padding: var(--isu-spatiu-3);
  font-family: inherit;
  font-size: var(--isu-text-sm);
  text-align: left;
  color: var(--isu-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--isu-rotund);
  cursor: pointer;
  transition: background-color var(--isu-tranzitie-rapida), border-color var(--isu-tranzitie-rapida);
}
.isu-optiune:hover { background: var(--isu-fundal-hover); }
.isu-optiune.is-selectat { background: var(--isu-principal-50); border-color: var(--isu-principal-200); }
.isu-optiune + .isu-optiune { margin-top: 2px; }
/* Cu chenar (alegere de servicii, carduri de opțiune) */
.isu-optiune--chenar { border-color: var(--isu-margine); background: var(--isu-fundal); }
.isu-optiune--chenar.is-selectat { border-color: var(--isu-principal); background: var(--isu-principal-50); }


/* ==================== 29. COD DE COPIAT + MINIATURĂ ====================
   <code class="isu-cod isu-cod--copiabil" data-copiaza="…">[shortcode]</code>
   <span class="isu-miniatura"><img src="…semnatura.png" alt=""></span> */
.isu-cod--copiabil { cursor: pointer; transition: background-color var(--isu-tranzitie-rapida), color var(--isu-tranzitie-rapida); }
.isu-cod--copiabil:hover { background: var(--isu-principal-50); border-color: var(--isu-principal-200); color: var(--isu-principal-700); }
.isu-miniatura {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 64px;
  overflow: hidden;
  background: var(--isu-gri-50);
  border: 1px solid var(--isu-margine);
  border-radius: var(--isu-rotund);
}
.isu-miniatura img { max-width: 100%; max-height: 100%; object-fit: contain; }