:root {
  --green: #1e5c2f;
  --green-dark: #123d20;
  --green-soft: #eef5ef;

  --text: #17211a;
  --muted: #647067;

  --border: #dce4de;
  --background: #f5f7f5;

  --danger: #a52a2a;
  --danger-soft: #fbefef;

  --warning: #8a5a00;
  --warning-soft: #fff7e7;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(
      circle at top left,
      #edf4ee,
      transparent 35rem
    ),
    var(--background);
}

.page {
  min-height: 100vh;

  display: grid;
  place-items: center;

  padding: 32px 18px;
}

.verification {
  width: min(100%, 720px);

  background: #fff;

  border: 1px solid var(--border);
  border-radius: 24px;

  box-shadow:
    0 18px 55px rgba(20, 50, 28, .08);

  overflow: hidden;
}

.brand {
  display: flex;
  gap: 18px;
  align-items: center;

  padding: 28px 30px;

  border-bottom:
    1px solid var(--border);
}

.brand-mark {
  width: 58px;
  height: 58px;

  border-radius: 15px;

  background: var(--green);
  color: white;

  display: grid;
  place-items: center;

  font-size: 19px;
  font-weight: 700;

  letter-spacing: .06em;
}

.eyebrow {
  margin: 0 0 5px;

  color: var(--green);

  font-size: 13px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .08em;
}

h1 {
  margin: 0;

  font-size:
    clamp(23px, 5vw, 31px);

  line-height: 1.1;
}

.state {
  padding: 34px 30px 40px;
}

.hidden {
  display: none !important;
}

.state > h2 {
  margin: 26px 0 8px;

  font-size: 24px;
}

.state > p {
  color: var(--muted);

  line-height: 1.6;
}

.spinner {
  width: 38px;
  height: 38px;

  border:
    3px solid var(--border);

  border-top-color:
    var(--green);

  border-radius: 50%;

  animation:
    spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.status {
  display: flex;
  align-items: center;

  gap: 16px;

  padding: 19px;

  border-radius: 16px;
}

.status-icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  font-size: 26px;
  font-weight: 700;
}

.status div {
  display: grid;
  gap: 3px;
}

.status span:not(.status-icon) {
  font-size: 13px;
}

.status strong {
  font-size: 17px;

  letter-spacing: .025em;
}

.status-valid {
  background: var(--green-soft);
  color: var(--green-dark);
}

.status-valid .status-icon {
  color: white;
  background: var(--green);
}

.status-invalid {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-invalid .status-icon {
  color: white;
  background: var(--danger);
}

.status-error {
  background: var(--warning-soft);
  color: var(--warning);
}

.status-error .status-icon {
  background: var(--warning);
  color: white;
}


/* FOTO */

.photo-wrapper {
  width: 180px;
  height: 220px;

  margin:
    2px auto 26px;

  border-radius: 16px;

  overflow: hidden;

  background: #eef2ef;

  border:
    1px solid var(--border);

  box-shadow:
    0 8px 25px rgba(20, 50, 28, .08);
}

.employee-photo {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center top;
}

.photo-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 12px;

  color: var(--muted);

  text-align: center;

  padding: 20px;
}

.avatar-icon {
  font-size: 58px;

  filter:
    grayscale(1);

  opacity: .65;
}

.photo-placeholder small {
  line-height: 1.4;
}


/* EMPLEADO */

.employee {
  padding-top: 31px;

  text-align: center;
}

.employee-label {
  margin:
    0 0 7px;

  color: var(--muted);

  font-size: 13px;

  text-transform: uppercase;
  letter-spacing: .07em;
}

.employee h2 {
  margin: 0;

  font-size:
    clamp(26px, 6vw, 38px);

  line-height: 1.08;
}

dl {
  margin:
    31px 0 0;

  text-align: left;
}

dl > div {
  display: grid;

  grid-template-columns:
    165px 1fr;

  gap: 20px;

  padding: 16px 0;

  border-top:
    1px solid var(--border);
}

dt {
  color: var(--muted);

  font-size: 14px;
}

dd {
  margin: 0;

  font-weight: 600;

  overflow-wrap: anywhere;
}

.verification-note {
  margin-top: 30px;

  padding-top: 22px;

  border-top:
    1px solid var(--border);

  text-align: left;
}

footer {
  display: flex;

  justify-content:
    space-between;

  gap: 16px;

  flex-wrap: wrap;

  padding:
    17px 30px;

  background: #fafbfa;

  border-top:
    1px solid var(--border);

  color: var(--muted);

  font-size: 12px;
}

@media (max-width: 560px) {

  .page {
    padding: 0;

    align-items: stretch;
  }

  .verification {
    border: 0;
    border-radius: 0;

    min-height: 100vh;
  }

  .brand,
  .state,
  footer {
    padding-left: 22px;
    padding-right: 22px;
  }

  .photo-wrapper {
    width: 160px;
    height: 200px;
  }

  dl > div {
    grid-template-columns: 1fr;

    gap: 5px;
  }
}