@charset "utf-8";

/* Fuentes */
/*@font-face {
    font-family: Public;
    src: url("../fonts/Roboto.ttf");
}*/

/* General */
form, fieldset, #boton-compra 
{
    background-color: #f8f8f8;
    text-align: center;
    border-radius: 5px;
}

#boton-compra 
{
	font-size: 1.1rem;
}

label 
{
    font-weight: 600;
    font-size: 1rem;
}

.campos, select, textarea, .boton {
    padding: 8px;
    border: 1px #ccc solid;
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    outline: none;
}

.campos, select, textarea
{
	
	color:#09f;
	font-size:1.2rem;
}

.campos:focus, select:focus, textarea:focus
{
	background-color:#FFFFD9;
	outline: none;
}

#nombre, #concepto
{
	text-transform: uppercase;
}

/* Formulario */
form {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
	border: 1px #ddd solid;
	padding: 2px;
}

form legend 
{
	border-radius: 5px;
}

form table, #resultado table 
{
    width: 98%;
    margin: 0 auto;
}

fieldset {
    padding: 0 0 15px;
	border: none;
}

legend {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    width: 100%;
    margin:0 auto;
    padding: 8px 0;
    box-sizing: border-box;
    background-color: #328399;
    color: #fff;
    font-weight: 500;
    font-size: 1.2rem;
}

.msg-azul 
{
    border-left: #50678C 10px solid;
}

/* Informe */

#informe-inicio 
{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px; /* separación entre texto e imagen */
    flex-wrap: wrap;
    width: 96%;
    max-width: 900px;
    margin: 0 auto;    
    
}

.img-informe
{
    width: 90%;
    max-width: 300px!important;
}


#informe-presentacion 
{
    width: auto;
    flex: 0 0 auto;
}

.informe-descripcion 
{
	padding: 8px 0;
    font-size: 1rem;
    line-height: 20px;
    box-sizing: border-box;
}

.informe-descripcion b 
{
    font-weight: 600;
    font-size: 1.1rem;
}

#informe-inicio img 
{
    max-width: 400px;
}


#informe {
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-evenly;
    align-items: center;
    max-width: 1300px;
    margin: 20px auto 0;
    font-size: 15px;
}

#informe > div:first-child, #informe-contiene {
    width: 96%;
    max-width: 450px;
    margin: 0 auto;
}

#informe-contiene {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    font-size: 1.11rem;
    line-height: 1.5em;
    color: #666;
}

.detalle-informe 
{
    font-size: 1.1rem;
    text-align: left;
    line-height: 1.6rem;
}

#informe-contiene ul 
{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: justify;
}


.mensaje, .dato, .box-pago 
{
    font-size: 1rem;
}

.mensaje 
{
    margin:0 auto;
    margin-top:20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    flex-wrap: nowrap;
    width: 96%;
    max-width: 550px;
    padding:10px;
    border-radius: 5px;
	font-size: 1.1rem;
    line-height: 1.4rem;
}

.mensaje ul 
{
    padding: 0;
}

.mensaje ul li 
{
    list-style-type: none;
}

.importe {
    font-size: 2.2rem;
    font-weight: 700;
    color:#FA4270;
    color:#D99B68!important;
    
    padding: 5px 0;
	line-height: 1.4rem;
}

.importe i, .importe del, .informe-descripcion, #resultado table td 
{
    
    font-weight: 100;
}

.importe del 
{
	font-size: 0.9rem;
}

.boton {
    display: inline-block;
	width: 90%;
    max-width: 220px;

    background-color: #D99B68;
    
    color: #fff;
    padding: 12px 0px;
    font-size: 1.1rem;
	border:none;
}

.boton:hover {
    cursor: pointer;
    background-color: #FA4270;

}

.pulse {
    animation: pulse 4s infinite; /* Repetir cada 4 segundos y ser infinita */
}

/* Definir la animación Pulse */
@keyframes pulse {
    0% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
}

.boton2
{
    border:1px #1790C5 solid;
    border-radius:5px;
    padding:8px;
    color:#1790C5;
    font-size: 0.95rem;
}

.boton2:hover
{
    background-color: #1790C5;
    color:#fff;
}



.infocheckout, .legendpago, .box-pago 
{
	width: 98%;
	max-width: 400px;
	background-color: #fff;
}

.infocheckout
{
	align-items: center;
	margin:0 auto;
	line-height: 20px;
	padding: 10px 0;
	font-size: 16px;
	border: 1px #ddd solid;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	display: inline-block;
    
}

.legendpago 
{
	color:#fff;
	padding: 10px 0;
	margin: 0 auto;
	border-radius: 5px 5px 0 0;
	font-size: 1rem;
}

.box-pago
{
	margin:0 auto;
	margin-top:10px;
	font-size: 1.1rem;
	line-height: 18px;
	text-align: center;
	padding: 5px;
	box-sizing: border-box;
    border: 1px #ddd solid;
	flex-wrap: nowrap;
	box-sizing: border-box;
	justify-content: space-between;
	border-radius: 3px;
}

.box-pago .titulo 
{
	font-size: 0.95rem;
	
    background-color: #D99B68;
    /*background-color: #35aa53;*/
	padding: 10px;
	border-radius: 3px;
	color:#fff;
    font-weight: 100;
}

.box-pago .texto 
{
    font-size: 0.9rem;
}

.box-pago .importe 
{
    font-size: 1.4rem;
}

.dato 
{
	font-size: 1.15rem;
}

.descripcion-servicio 
{
    font-size: 1.2rem;
}

.error 
{
    font-size: 0.9rem;
}


/* Media Queries */
@media only screen and (max-width: 976px) {
    #informe {
        flex-direction: column;
    }

    #informe > div:first-child, #informe-contiene {
        margin-top: 20px;
    }

    .msg-azul {
        border-top: #395F87 10px solid;
        border-left: none;
    }

    #informe-contiene ul
    {
        text-align: left;
    }

    #informe-inicio {
        flex-direction: column;
        text-align: center;
    }

    #informe-inicio > div:first-child {
        order: 2;
    }

    #informe-inicio img 
    {
        max-width: 70%;
    }

    #informe-presentacion 
    {
        box-sizing: border-box;
    }

    #informe-presentacion h1 
    {
        font-size: 24px;
    }

    #informe-presentacion h2 
    {
        font-size: 14px;
    }

    #informe-contiene 
    {
        width: 100%;
        background-color: #f5f5f5;
        padding: 10px;
    }
    
}

/*Efectos*/

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}