/* Establecer el fondo blanco

--amaranth-50: #fef2f3;
--amaranth-100: #fde3e5;
--amaranth-200: #fcccd0;
--amaranth-300: #f9a8ae;
--amaranth-400: #f3767f;
--amaranth-500: #e63946;
--amaranth-600: #d52d3a;
--amaranth-700: #b3222d;
--amaranth-800: #942029;
--amaranth-900: #7b2128;
--amaranth-950: #430c10;
 */

body {
    background-color: #FFF;
    color: #000000;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 14px;
    padding: 0 1em;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Eliminar el subrayado de los enlaces y agregarlo en hover */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


button {
    border-radius: .25em;
    border: none;
    background-color: #942029;
    color: #FFFFFF;
    transition: background-color 0.25s ease;
    margin: 2em auto 0 auto;
    min-width: 15em;
    display: block;
}

button a{
    color: #FFFFFF;
}

button:hover {
    background-color: #d52d3a;
    cursor: pointer;
}

button:active {
    background-color: #e63946;
}

button:disabled {
    color: #b3222d;
    background-color: #fcccd0;
    cursor: not-allowed;
}

button a, button[type="submit"]{
    line-height: 2.5em;
    padding: .25em 1.5em;
    display: block;
}

.campaing button {
    position: absolute;
    right: 1em;
    top: 1em;
    min-width: 8em;
}

button.sesioncerrar, .campaing.promodesc button{
    background-color: #FFF;
    border: 1px solid #b3222d;
    color: #b3222d;
}

button.sesioncerrar a, .campaing.promodesc button a{
    color: #b3222d;
}

button.sesioncerrar:hover, .campaing.promodesc button:hover {
    background-color: #fef2f3;
}

button.sesioncerrar:active, .campaing.promodesc button:active {
    background-color: #fde3e5;
}

.buscador button {
    margin: 0 auto;
}

header h1 {
    text-align: center;
}

h1 > .logotipo {
    /* Establece la imagen como fondo */
    background: url('../../img/Logo_Grupo-Gilar.svg') center center no-repeat;
    background-size: contain;
    /* Establece el tamaño de la imagen */
    width: 148px;
    height: 65px;
    margin: 0 auto 1em auto;
    /* Oculta el texto*/ 
    text-indent: -9999px;
    overflow: hidden;
    /* Asegura que la imagen sea visible incluso si el texto está oculto */
    display: block;
}

footer {
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 1em 0 0 0;
}

.content{
    flex-grow: 1;
}

.buscador {
    text-align: center;
    margin: 2em 0;
    padding: 2em;
    border: 1px solid #f3767f;
    display: block;
    border-radius: .5em;
}

.buscador label{
    display: block;
    line-height: 1.75em;
    margin: 1em auto 0 auto;
}

.buscador input[type="text"] {
    display: block;
    line-height: 2em;
    width: 90%;
    margin: 0 auto;
}

.botonera {
    text-align: center;
    margin: 2em auto;
}

form {
    margin-bottom: 2em;
}

form label {
    display: block;
    margin: 1em 0 .25em 0;
    font-size: 1.15em;
}

form label[for^="val"], label[for="campaing"], label[for="validez"]{
    display: inherit;
    width: 9.5em;
    float: left;
    text-align: right;
}

form input[type="text"], form input[type="password"], form textarea, input[type="number"]{
    width: 90%;
    line-height: 2em;
    display: inline-block;
    margin-bottom: .5em;
    border: 1px solid #b3222d;
    border-radius: .5em;
    padding: .25em 1em;
    background-color: #fef2f3;
    font-size: 1.5em;
}

form textarea {
    height: 7em;
}

form input[type="number"], .cuponcrear select, .cuponcodigo select {
    width: 6em;
    margin: 1em 0 0 1em;
    display: inline;
}

.cuponcrear select, .cuponcodigo select {
    width: 15em;
    padding: 1.5em .75em;
    margin-bottom: 1em;
    border:1px solid #e5e5e5;
    border-radius: .25em;
}

.cuponcrear form {
    width: 25em;
    margin: 0 auto;
    display: block;
}


label[for="campaing"], label[for="validez"]{
    width: 9.5em;
}

h2, h3, div.cuponstatus p {
    text-align: center;
}

div.cuponstatus p {
    line-height: 1.5em;
}

.no-sesion td:last-child, .no-sesion th:last-child {
    visibility: hidden;
    display: none;
    text-indent: -9999px;
}

.exito {
    display: block;
    width: 100%;
    background-color: #2ec4b6;
    color: #FFF;
    font-weight: bolder;
    text-align: center;
    font-size: 1.25em;
    line-height: 1.75em;
    padding: .5em;
}

.codigoBusqueda{
    background-color: #e63946;
    color: white;
    text-align: center;
    max-width: 20em;
    display: block;
    margin: 2em auto;
    padding: 1em;
    border: 2px dashed #000;
    border-radius: .75em;
}

.promo {
    border: 4px solid #FFF;
    padding: 2em;
    border-radius: .5em;

}

.codigoBusqueda h2 {
    font-size: 2em;
    font-weight: thin;
}

.codigoBusqueda p {
    font-size: .9em;
}

.campaing {
    margin: 1em auto;
    width: 70%;
    padding: 1.5em;
    border-radius: .75em;
    display:block;
    text-align: left;
    position: relative;
}

.campaing.promoact {
    background-color: #fef2f3;
    color: #000;
    border: 1px solid #f3767f;
}

.campaing.promodesc {
    background-color: #e63946;
    color: #FFF;
}

.campaing h3{
    color: #1d3557;
    width: 80%;
    text-align: left;
}

.campaing.promodesc h3 {
    color: #f1faee;
}

.campaing p {
    width: 80%;
}

@media screen and (min-width: 1000px) {
    .buscador input[type="text"] {
        width: 70%;
    }
}

@media screen and (max-width: 999px){

    .campaing button {
        position: initial;
        right: initial;
        top: initial;
    }
    .campaing h3, .campaing p {
        width: initial;
        text-align: center;
    }

    .cuponcrear form {
        width: inital;
        margin: initial;
        display: initial;
    }
}