html, body {
  margin: 0;
  padding: 0;
}

.body-style {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* reutilizable */
/* -----------------------------------------
REUTILIZABLES: Fondo tipo lienzo
.mainLienzo ya no se usa, se elimina al finalizar limpieza de vistas
------------------------------------------ */
.mainLienzo {
  background: url('/images/Lienzo01vero.jpeg') center top repeat-y;
  background-size: 100% auto;
  background-attachment: fixed;
  padding: 1rem;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
}

/* -----------------------------------------
   REUTILIZABLES: Títulos y subtítulos
------------------------------------------ */
.titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.titulo h3 {
  padding-top: 0.5rem;
  font-size: 22px;
  color: white;
  text-align: center;
  border-bottom: 1px solid white;
  padding-bottom: 0.5rem;
  width: 90%;
  margin: 0 auto 1rem auto;
}

.titulo p {
  font-size: 16px;
  color: white;
  text-align: center;
  margin-bottom: 0.5rem;
}
/*
.titulo h2 {
  padding-top: 0.5rem;
  font-size: 22px;
  color: white;
  text-align: center;
  border-bottom: 1px solid white;
  padding-bottom: 0.5rem;
  width: 90%;
  margin: 0 auto 1rem auto;
}
*/
/* -----------------------------------------
   REUTILIZABLES: Botón primario
------------------------------------------ */
.btn-primary {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid white;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* -----------------------------------------
   REUTILIZABLES: Botón de consulta
------------------------------------------ */
.consultar a {
    background-color: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid white;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}
.consultar {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.consultar a:hover {
    background-color: rgba(255, 255, 255, 0.3);
}
.mainLienzo-register {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-image: url('/images/Lienzo01vero.jpeg');
    background-size: contain;
    background-repeat: repeat-y; /* clave: repite verticalmente */
    background-position: center top;
    background-attachment: fixed;
    overflow-y: auto;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
}
.button-access {
    background-color: #dc2626 !important; /* rojo fuerte */
    color: white !important;
    font-size: 1.1rem;
    border: 1px solid white;
    border-radius: 8px;
    width: 80%;
    height: 60px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    letter-spacing: 1px;
    text-transform: uppercase;  /* convierte texto a mayúscula */
    transition: background-color 0.3s ease;
    margin-top: 1rem;
}
.button-access:hover {
    background-color: #b91c1c !important;
}

.as-button {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 1rem;
  line-height: normal;
  height: auto;
  max-width: 40rem;
}

.display-flex-justify-center{
    display: flex;
    justify-content: center;
}

#h2-login {
  text-align: center;
  margin: 0 auto 0.5rem auto; /* ↓ bajamos el espacio superior */
  border-bottom: 1px solid white;
  padding-bottom: 0.5rem;
  width: 90%;
  font-size: 22px;
  color: white;
}


.subtituloCarrito {
  font-size: 1.2rem !important;
  color: white;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  width: 100%;
  text-align: center !important;
}

body {
  background-image: url('/images/Lienzo01vero.jpeg');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: center top;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}