/* =========================================================
   FrameCertificatiDesktop.css
   Certificato di Iscrizione – Flat Single Card
   UniGUI / ExtJS Classic
   ========================================================= */

/* ================= ROOT VARIABLES ================= */
:root {
  /* Base colors */
  --bg-page: #eef1f4;
  --bg-card: #ffffff;

  --text-main: #1f2933;
  --text-muted: #6b7785;
  --text-light: #8a97a6;

  /* Lines / dividers */
  --line-soft: rgba(31, 41, 51, 0.12);

  /* Brand gradient (HEADER + BUTTON) */
  --brand-grad-start: #417295;
  --brand-grad-end:   #5c96c0;
  --brand-gradient: linear-gradient(
    135deg,
    var(--brand-grad-start) 0%,
    var(--brand-grad-end) 100%
  );

  /* Status OK */
  --ok-bg: #eaf7ea;
  --ok-border: rgba(92, 184, 92, 0.35);
  --ok-text: #2e7d32;

  /* Shadows */
  --shadow-card-1: 0 18px 40px rgba(0,0,0,0.12);
  --shadow-card-2: 0 6px 16px rgba(0,0,0,0.08);
  --shadow-button: 0 10px 22px rgba(0,0,0,0.16);
}

 

/* ================= CARD ================= */
.x-container.cert2-card,
.x-panel.cert2-card {
  background: var(--bg-card) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card-1), var(--shadow-card-2) !important;
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  -ms-border-radius: 8px !important;
  -o-border-radius: 8px !important;
}

/* ================= HEADER ================= */
.x-container.cert2-header,
.x-panel.cert2-header {
  background: var(--brand-gradient) !important;
}

label.x-component.cert2-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

label.x-component.cert2-subtitle {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  margin: 1px 0 0 0 !important;
}

/* ================= BODY ================= */
.x-container.cert2-body,
.x-panel.cert2-body {
  background: var(--bg-card) !important;
}

/* ================= NAME ================= */
label.x-component.cert2-name {
  color: var(--text-main) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  line-height: 1.06 !important;
  margin: 0 !important;
}

label.x-component.cert2-cf {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  margin: 6px 0 0 0 !important;
}

/* ================= GRID KEY / VALUE ================= */
label.x-component.cert2-k {
  color: var(--text-main) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
  margin: 0 !important;
}

label.x-component.cert2-v {
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* ================= DIVIDER ================= */
.x-container.cert2-divider,
.x-panel.cert2-divider {
  background: var(--line-soft) !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
}

/* ================= ISCRIZIONE ================= */
label.x-component.cert2-section {
  color: var(--text-main) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

label.x-component.cert2-numberbig {
  color: var(--text-main) !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
}

label.x-component.cert2-k2 {
  color: var(--text-main) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* ================= STATUS PILL ================= */
label.x-component.cert2-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  padding: 6px 12px !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

label.x-component.cert2-pill.cert2-pill-ok {
  background: var(--ok-bg) !important;
  border: 1px solid var(--ok-border) !important;
  color: var(--ok-text) !important;
}

label.x-component.cert2-pill.cert2-pill-ok::before {
  content: '✓' !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* ================= FOOTER ================= */
.x-container.cert2-footer,
.x-panel.cert2-footer {
  background: transparent !important;
}