/* Fuentes */
@font-face {
  font-family: 'FiraSans-Regular';
  src: url('./fonts/FiraSans-Regular/FiraSans-Regular.eot');
  src: url('./fonts/FiraSans-Regular/FiraSans-Regular.eot?#iefix') format('embedded-opentype'),
       url('./fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'),
       url('./fonts/FiraSans-Regular/FiraSans-Regular.ttf') format('truetype'),
       url('./fonts/FiraSans-Regular/FiraSans-Regular.svg#opensanscondlight') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Reset y configuración base */
html {
  overflow-y: scroll;
  font-size: 16px; /* Base para calcular rem */
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  font-family: 'Fira Sans', sans-serif;
  margin: 0;
  padding: 0;
}

/* Encabezado */
.navbar-header-mju {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 1rem;
}

.navbar-header-mju :focus {
  outline: 1px solid red !important;
}

.logo {
  background: url(../img/logo-ministerio-justicia.svg) no-repeat left center;
  height: 4rem;       /* equivalente a 64px */
  width: 17.5rem;     /* equivalente a 280px */
  background-size: contain;
  display: block;
}

.nombreAplicacion {
  display: flex;
  align-items: center;
  margin-left: 1.875rem; /* 30px */
  margin-top: 0.875rem;  /* 14px */
  height: 3.125rem;      /* 50px */
}

/* Contenedor principal del formulario */
.form {
  background: #fff;
  padding: 1.563rem 2.5rem; /* 25px y 40px respectivamente */
  max-width: 45rem;        /* 720px */
  margin: 5vh auto;
  border-radius: 0.625rem;  /* 10px */
  border: 0.063rem solid #074E8E;
}

/* Layout del formulario y acceso digital */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  }

.signup,
.certificate {
  flex: 1 1 17.5rem;  /* mínimo 280px, se adaptan según espacio */
  max-width: 18.75rem; /* 300px */
}

/* Línea divisoria */
.centro {
  width: 0.063rem;      /* 1px */
  height: 15.625rem;    /* 250px */
  background: #074E8E;
  align-self: center;
  margin-top: 2rem;
}

/* Encabezados */
h1 {
  color: #074E8E;
  font-size: 1.5em;
  margin-bottom: 2.5rem;
  letter-spacing: 0.01em;
}

h2 {
  color: #464F59;
  font-size: 1.25em;
  font-weight: normal;
  margin: 1.875rem 0;
  letter-spacing: 0.0005em;
}

h3 {
  font-size: 1em;
  font-weight: normal;
}

/* Etiquetas e inputs */
label {
  color: #464F59;
  transition: all 0.25s ease;
  pointer-events: none;
  font-size: 0.85em;
  position: relative;
}

label .req {
  margin: 0.125rem;
}

label.active {
  transform: translateY(3.125rem);
  left: 0.125rem;
  font-size: 0.875em;
}

label.active .req {
  opacity: 0;
}

label.highlight {
  color: #fff;
}

/* Etiqueta flotante */
.labelStyle_pb4 {
  position: absolute;
  transform: translateY(-0.375rem);
  left: 14%;
  top: -0.188rem;
  font-size: 0.8em;
  background: white;
  height: 0.625rem; /* 10px */
}

.labelinfo {
  font-size: 0.7em;
  text-align: left;
  left: 10%;
  position: absolute;
  display: none;
}

/* Estilo para los controles del formulario */
.form-control {
  height: 2.625rem;  /* 42px */
  width: 80%;
  margin: 0 auto;
  padding: 0.625rem;
  background-color: #F5F7F9;
  color: #464F59;
  border-radius: 0.188rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  border: 0.063rem solid #C1C1C1;
  font-size: 1em;
}

input,
textarea {
  display: block;
  width: 80%;
  height: 100%;
  padding: 0.625rem;
  background-color: #F5F7F9;
  color: #464F59;
  border-radius: 0.188rem;
  margin: auto;
  border: 0.063rem solid #C1C1C1;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  font-size: 1em;
}

input:focus,
textarea:focus {
  outline: 1px solid red !important;
  border: 0.094rem solid #C1C1C1 !important; /* 1.5px */
}

.form-control:focus ~ .labelStyle_pb4 {
  top: -0.188rem;
  font-size: 0.8em;
  background: white;
}

.form-control:focus ~ .labelinfo {
  display: block;
}

.form-control:focus ~ .icono-user,
.form-control:focus ~ .icono-candado {
  display: none;
}

/* Wrapper de campo */
.field-wrap {
  position: relative;
  margin-bottom: 2.5rem;
}

/* Botones */
.button {
  border: 0;
  outline: none;
  padding: 0.938rem 0;
  font-size: 0.875em;
  text-transform: uppercase;
  background: #074E8E;
  color: #fff;
  transition: all 0.5s ease;
  border-radius: 0.25rem;
  max-width: 10.5rem; /* 168px */
  cursor: pointer;
  box-shadow: 3px 3px 3px rgba(33, 75, 146, 0.3);
  margin: auto;
  text-align: center;
  display: block;
}

.button:hover {
  background: #032545;
}

.button:focus {
  border: 0.125rem solid red; /* 2px */
}

.button-block {
  display: block;
  width: 100%;
}

/* Iconos para certificación y otros */
.certificacion {
  width: 100%;
  text-align: center;
  padding: 0.938rem;
  margin-bottom: 1.375rem;
}

.icono-certificado::before {
  content: url(../img/certificado.svg);
  display: inline;
}

.icono-candado::before {
  content: url(../img/candado.svg);
  display: inline;
  position: absolute;
  top: 0.188rem;
  right: 12%;
}

.icono-user::before {
  content: url(../img/user.svg);
  display: inline;
  position: absolute;
  top: 0.25rem;
  right: 12%;
}

/* Enlaces e icono de info */
.forget {
  position: relative;
}

.info {
  font-size: 0.85em;
  border: 0.063rem solid #074E8E;
  width: 1.25rem;  /* 20px */
  height: 1.25rem; /* 20px */
  color: #074E8E;
  margin: auto;
  border-radius: 50%;
  position: absolute;
  left: 5%;
  top: 1.188rem;
  display: inline;
}

.info:hover,
.info:focus {
  font-weight: bold;
  border: 0.125rem solid #074E8E;
}

.g-recaptcha div {
  width: auto !important;
  height: auto !important;
  text-align: center;
}

/* Pie de página */
.parrafo-bottom {
  text-align: center;
  border-top: 0.063rem solid #C1C1C1;
  padding-top: 0.938rem;
  margin-top: 0.625rem;
}

.parrafo-bottom p {
  font-size: 0.7rem;
  font-weight: normal;
  color: #464F59;
}

/* Tablas */
table {
  border: 0.063rem solid #074E8E;
  border-spacing: 0;
  text-align: left;
  width: 100%;
  font-size: 0.8em;
  font-weight: normal;
}

table thead {
  padding: 0.313rem;
}

table th {
  background-color: #074E8E;
  color: #fff;
  padding: 0.625rem;
}

table td {
  color: #464F59;
  padding: 0.625rem;
}

table tr:nth-child(odd) {
  background: #F5F7F9;
  border-bottom: 0.063rem solid #C7CACD;
}

table tr:nth-child(even) {
  background: #fff;
}

table tr:last-child {
  border-bottom: none;
}

caption h2 {
  font-size: 1.5em;
}

/* Mensajes de alerta */
.success,
.warning,
.error,
.validation {
  border: 0.063rem solid;
  margin: 0.625rem 0;
  padding: 0.938rem 0.625rem 0.938rem 3.125rem;
  background-repeat: no-repeat;
  background-position: 0.625rem center;
}

.success {
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image: url(../img/Q9BGTuy.png);
}

.warning {
  color: #9F6000;
  background-color: #FEEFB3;
  background-image: url(../img/Z8q7ww7.png);
}

.error {
  color: #D8000C;
  background-color: #FFBABA;
  background-image: url(../img/GnyDvKN.png);
}

.validation {
  color: #D63301;
}

/* Media Queries para móviles */
@media only screen and (max-width: 768px) {
  .navbar-header-mju {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    width: 70%;
  }

  .nombreAplicacion {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .grid {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .signup,
  .certificate {
    max-width: 100%;
  }
  
  /* Ocultamos la línea divisoria en móviles */
  .centro {
    display: none;
  }

  .parrafo-bottom {
    margin-top: 1.875rem;
  }
}