/*
 * Pagina publica de verificacion de diplomas.
 * Se apoya en los tokens de estilo.css y agrega solo lo propio del veredicto.
 *
 * El criterio de diseno aca es que el resultado se entienda de un vistazo,
 * desde el telefono, con el diploma de papel en la otra mano: primero un
 * cartel grande que diga valido o no valido, y recien despues los datos. Por
 * eso el veredicto no usa los colores de la marca — usa verde y rojo, que se
 * entienden sin leer — y la marca queda arriba, en la cabecera.
 */

.pagina-publica {
  background: var(--color-fondo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cabecera-publica {
  background: var(--color-superficie);
  border-top: 4px solid var(--color-acento);
  border-bottom: 1px solid var(--color-borde);
  padding: 1.75rem 1.25rem 2rem;
  text-align: center;
}

.cabecera-publica .marca {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  text-decoration: none;
  color: var(--color-texto);
}

.cabecera-publica .logo-marca {
  height: 40px;
}

.cabecera-publica h1 {
  font-size: 1.6rem;
  margin: 0 0 .6rem;
}

.cabecera-publica .bajada {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--color-texto-suave);
  font-size: .98rem;
}

.contenedor-publico {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  flex: 1 1 auto;
  padding: 2rem 1.25rem 3rem;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

@media (max-width: 640px) {
  .cabecera-publica .logo-marca {
    height: 32px;
  }
  .cabecera-publica h1 {
    font-size: 1.35rem;
  }
}

/* ---- Veredicto ---- */

.veredicto {
  border-radius: var(--radio);
  border: 1px solid transparent;
  border-left-width: 8px;
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sombra);
}

.veredicto-etiqueta {
  margin: 0 0 .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.veredicto-titulo {
  margin: 0 0 .7rem;
  font-size: 1.9rem;
  letter-spacing: -.015em;
  line-height: 1.15;
}

.veredicto-detalle {
  margin: 0;
  font-size: 1rem;
  max-width: 52ch;
}

.veredicto-nota {
  margin: 1rem 0 0;
  font-size: .88rem;
}

.veredicto-valido {
  background: var(--color-exito-suave);
  border-color: var(--color-exito);
  color: #10402A;
}

.veredicto-invalido {
  background: var(--color-peligro-suave);
  border-color: var(--color-peligro);
  color: #6B1611;
}

@media (max-width: 640px) {
  .veredicto {
    padding: 1.25rem 1.2rem;
    border-left-width: 6px;
  }
  .veredicto-titulo {
    font-size: 1.55rem;
  }
}

/* ---- Ficha de datos ---- */

.ficha .datos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.15rem 1.5rem;
}

.dato-ancho {
  grid-column: 1 / -1;
}

.dato dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  margin-bottom: .25rem;
}

.dato dd {
  margin: 0;
  font-size: 1rem;
  overflow-wrap: break-word;
}

.dato dd.destacado {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.codigo {
  font-family: var(--fuente-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: 6px;
  padding: .2rem .5rem;
  display: inline-block;
  overflow-wrap: break-word;
}

/* El codigo se escribe en mayusculas aunque la persona lo teclee en minusculas
   (la verificacion no distingue caso, ver lib/acciones.php). */
.formulario-codigo input[type="text"] {
  font-family: var(--fuente-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* El texto de ejemplo NO se pone en mayusculas: si no, parece un valor ya
   escrito en vez de una pista. */
.formulario-codigo input[type="text"]::placeholder {
  text-transform: none;
  letter-spacing: .03em;
  font-weight: 400;
}

.pie-publico {
  margin: 2.25rem auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: .85rem;
  color: var(--color-texto-suave);
}