@font-face{
	font-family:avenir;
	src:url(../fonts/avenir.ttf);
}
body{
	margin:0px;
	background-color: #FFF; 
	font-family: avenir;
}

header{
	top:-0px;
	height: 40px;
	padding: 10px;
	border-bottom: solid 1px #2c3E4F;
	background-color: #ECF0F1;
	width: 100%;
	position: fixed;
	z-index: 35986;
}
main{
	margin-top: 40px;
	min-height: 75vh;
}
.logo{
	float:left;
}
main{
	padding:20px;
}
.alerta {
  animation: parpadeo 0.5s step-start infinite;
  color: #E30E12;
}

@keyframes parpadeo {
  50% {
    opacity: 0;
  }
}
.formulario h2{
	text-align:center;
	color:#D4070A;
}
.formulario div:not(.facturacion){
	width:40%;
	display: inline-block;
	margin-top: 20px;
}
.formulario .span{
	width:120px;
	display:inline-block;
	height: 30px;
	padding-top: 2px;
	
}
.formulario input, select, input:not([type="file"]){
	height: 30px;
	margin:5px 0px 2px 0px;
	display:inline-block;
	border: none;
	border-bottom: solid 1px #4F4F4F;
}
.formulario input:focus, select:focus{	
	border: none;
	border-bottom: solid 1px #6E1618;
	background-color: #F7CACB;
	outline: none;
}
.formulario input:active{	
	border: none;
	border-bottom: solid 1px #6E1618;
	background-color: #CADFF7;
}
/*Estilos input type file*/
.fancy-file{
    display: none;
}
.fancy-file + label{
	width: 300px;
    display:inline-flex;
    flex: 1;
}
.fancy-file__fancy-file-name,
.fancy-file__fancy-file-button{
    padding: 5px 10px;
}

.fancy-file__fancy-file-name{
    background: #EEE;
    border: 1px solid #CACACA;
    flex: 1;
    border-radius: 4px 0 0 4px;
}

.fancy-file__fancy-file-name span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 0px;
    display: block;
}

.fancy-file__fancy-file-button{
    background: #5BC0DE url(./folder.png) 4px center/25px no-repeat;
    border: 1px solid #5BC0DE;
    color: white;
    white-space: nowrap;
    border-radius: 0 4px 4px 0;
    padding-left: 33px;
    cursor: pointer;
}

.fancy-file.red + label > .fancy-file__fancy-file-button{
    background-color: #D9534F;
    border-color:#D64641;
}
/*Fin Estilos input type file*/

#tiempos{
	float: right;
	position: fixed;
	top:80px;
	right: 10px;
	border-radius: 10px;
	min-width: 100px;
	background-color: rgba(213,213,213,0.50);
	padding: 5px;
	font-size: 8px;
	z-index: 323333;
}
#tiempos h2{
	font-size: 10px;
}
#empresa, #documentos, #docempresa{
	clear: both;
	width: 100%;
}
.btn{	
	padding: 10px 20px 10px;
	border: none;
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 0.3s, transform 0.2s;
}
.btn:hover{
	box-shadow: 2px 2px 3px #000;
	transform: scale(1.05);
}
.btnpeque{
	padding:2px 10px;
	border: none;
	border-radius: 5px;
	font-size: 10px;
	text-decoration: none;
	cursor:pointer;
}
.verde{
	background:#14D118;
	color: #013D15;
}
.verde:hover{
	background:#007402;
	color: #83C79A;
}
.amarillo{
	background:#FFEB67;
	color: #534B00;
}
.amarillo:hover{
	background:#FFD600;
	color: #000;
}

.azul{
	background:#007bff;
	color: #87A3FB;
}
.azul:hover{
	background:#0056b3;
	color: #BFCCFF;
	 
}
.rojo{
	background:#D11313;
	color: #FBD6D6;
}
.rojo:hover{
	background:#620000;
	color: #FFFFFF;
}
.luzroja{
	display: inline-table;
	background-color:#F00;
	min-width:10px;
	min-height:10px;
	border-radius:100%;
	box-shadow:2px 2px 3px #F00;
}
.luzverde{
	display: inline-table;
	background-color:#03A601;
	min-width:10px;
	min-height:10px;
	border-radius:100%;
	box-shadow:2px 2px 3px #03A601;
}
.revision{
	width: 45%;
	display: inline-table;
	min-height: 300px;
	margin:20px 2.3%;
	border: 1px solid #9E1316;
	border-radius: 10px;
	overflow: hidden;	
}
.revision h2{
	width: 100%;
	text-align: center;
	font-size: 14px;
	text-transform: uppercase;
	background: #9E1316;
	color:#FFF;
	padding: 3px;
	margin-top: -3px;
}
.revision table{
	font-size:10px;
	width: 100%;
}
.revision table tr{
	height: 20px;
}
.caduca{
	width: 94%;
	display: inline-table;
	min-height: 300px;
	margin:-150px 2.3% 0px;
	border: 1px solid #9E1316;
	border-radius: 10px;
	overflow: hidden;
	margin-top: -160px;
	margin-bottom: 160px;
}
.caduca h2{
	width: 100%;
	text-align: center;
	font-size: 14px;
	text-transform: uppercase;
	background: #9E1316;
	color:#FFF;
	padding: 3px;
	margin-top: -3px;
}
.caduca table{
	font-size:10px;
	width: 100%;
}
.caduca table tr{
	height: 20px;
}
.file{
	cursor:pointer;
}
i[class^='file']{
    color: #F00;
	cursor:pointer;
	font-size: 24px;
}
.ok{
	color: #0F860A;
}
.nook{
	color:#F4080C;
}
.completo{
	width: 50%;
}
.centrado{
	position: absolute;
	padding: 20px;
	text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	background-color: #FFFFFF;
	border:solid 1px #3B3B3B;
	border-radius: 10px;
	box-shadow: 5px 5px 5px #000;
}
.centrado input{
	width: 90%;
	height: 30px;
	margin: 5px 0px;
}
.centrado input:focus{
	border:#D00000;
}
.resp{
	display: inline-block;
	color:#B34445;
	width:50px;
}
footer{
	border-top: solid 1px #2c3E4F;	
	color: #ECF0F1;
	bottom: 0px;
	width: 100%;
	height: 150px;
	text-align: center;
	background-color: #2c3E4F;	
	padding-top: 15px;
}
footer a{
	text-decoration: none;
	color: #ECF0F1;
}
footer #redes{
	width: 40%;
	float: left;
	margin-left: 40px;
}
footer #direc{
	width: 40%;
	float: right;
	margin-left: 40px;
	font-size: 14px;
}
footer #pie{
	clear: both;
	width: 100%;
	font-size: 12px;
}
footer i{
	color:#ECF0F1;
	font-size: 25px;
	margin: 8px;	
}

footer i:hover{
	color:#d42c28;		
}

footer h2{
	font-size: 28px;
	margin:0px;
}
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #F3BC00;
	border-radius: 50%;
	border:3px solid #111;
    color: #111;
    font-size: 120%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}
.tabla, .tabla td{
	min-width: 50%;
	border-collapse: collapse;
	border:1px solid #909090;
}
.tabla th{
	background-color: #C71316;
	color:#FFF;
}
.oculto {
	display: none;
}
 .container {
            display: flex;
            flex-wrap: wrap; /* Permite que las tarjetas salten de línea */
            gap: 20px; /* Espacio entre las tarjetas */
            justify-content: center; /* Centra las tarjetas dentro del contenedor */
            max-width: 1200px; /* Ancho máximo del contenedor */
			margin-left: auto;   /* Centra el contenedor horizontalmente */
			margin-right: auto;  /* Centra el contenedor horizontalmente */
        }

        /* Estilo de cada tarjeta */
        .card {
            background-color: #fff; /* Fondo blanco */
            border-radius: 8px; /* Bordes redondeados */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
            overflow: hidden; /* Oculta contenido que se desborde, como las esquinas de la imagen */
            width: 300px; /* Ancho fijo de la tarjeta */
            text-decoration: none; /* Quita el subrayado de los enlaces */
            color: inherit; /* Hereda el color de texto del padre */
            display: flex;
            flex-direction: column; /* Organiza los elementos en columna (imagen, título, texto) */
            transition: transform 0.2s ease-in-out; /* Transición suave al pasar el ratón */
        }

        .card:hover {
            transform: translateY(-5px); /* Efecto de elevar la tarjeta al pasar el ratón */
			box-shadow: 0px 0px 4px #B00F0F;
        }
		/* Nuevos estilos para el hover del título y la descripción */
        .card:hover .card-content h3 {
            color: #B00F0F; /* El título se vuelve rojo al pasar el ratón sobre la tarjeta */
            transition: color 0.2s ease-in-out; /* Transición suave para el cambio de color */
        }

        .card:hover .card-content p {
            color: #0056b3; /* La descripción cambia a un azul oscuro al pasar el ratón */
            transition: color 0.2s ease-in-out; /* Transición suave para el cambio de color */
        }

        /* Estilo de la imagen dentro de la tarjeta */
        .card img {
            width: 100%; /* La imagen ocupa todo el ancho de la tarjeta */
            height: 180px; /* Altura fija de la imagen */
            object-fit: cover; /* Ajusta la imagen para cubrir el área sin distorsionarse */
        }

        /* Contenido de texto de la tarjeta */
        .card-content {
            padding: 15px; /* Espaciado interno */
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* Permite que el contenido crezca para ocupar el espacio disponible */
        }

        .card-content h3 {
            margin-top: 0; /* Elimina margen superior por defecto */
            margin-bottom: 10px; /* Margen inferior para separar del texto */
            color: #333; /* Color oscuro para el título */
        }

        .card-content p {
            font-size: 0.9em; /* Tamaño de fuente ligeramente más pequeño */
            color: #666; /* Color gris para el texto */
            line-height: 1.4; /* Espaciado entre líneas */
            flex-grow: 1; /* Permite que el párrafo crezca para ocupar espacio */
        }

        /* Ajustes Responsive (para diferentes tamaños de pantalla) */
        @media (max-width: 768px) {
            .container {
                flex-direction: column; /* Apila las tarjetas verticalmente */
                align-items: center; /* Centra las tarjetas apiladas */
            }
            .card {
                width: 90%; /* Las tarjetas ocupan el 90% del ancho */
                max-width: 350px; /* Máximo 350px de ancho */
            }
        }

        @media (max-width: 480px) {
            .card-content {
                padding: 10px; /* Reduce el padding en pantallas muy pequeñas */
            }
            .card-content h3 {
                font-size: 1.1em; /* Ajusta el tamaño del título */
            }
            .card-content p {
                font-size: 0.85em; /* Ajusta el tamaño del párrafo */
            }
        }
@media (max-width: 1000px) { 
	.logo{
		margin-left: 30%;
		width: 40%;
	}
	#mcmenu{
		margin-top: 0px;
	}
	#menu-icon-wrapper{
		margin-top: -20px;
	}

	.formulario div:not(.facturacion){
		width:98%;
		display:inline-block;
	}
	.revision{
		width: 95%;
		display: inline-table;
		min-height: 300px;
		margin:2%;		
	}
}
@media (max-width: 600px) { 
	form div *{
		display: inline;
		width: 100%;
	}
	.formulario div:not(.facturacion){
		width:98%;
		display:block;		
	}
	
	#empresa, #documentos, #docempresa{
		clear: both;
		width: 100%;		
		display: block;
	}
	
	.facturacion{
		display: block;
	}
	.logo{
		margin-left: 30%;
		width: 40%;
	}
	.p25{
		width:100%;
	}
	footer{	
		height: 300px;	
		bottom: auto;
		position: relative;
	}
	footer #redes,footer #direc{
		width: 100%;
		margin:10px 0px ;
	}
	.formulario .span{
		width:100%;
		display:block;
		height: 30px;
		padding-top: 2px;
		box-sizing: border-box; /* Para que el padding no afecte al ancho */
	}
	.formulario input, select{
		display:block;
		width: 100%;
		height: 30px;
		border-radius: 5px;
		border-left: solid 1px #CCCCCC;
		border-right: solid 1px #CCCCCC;
		border-top: solid 1px #CCCCCC;
	}
	#mismo,#otro{
		display: inline;
		width: 100%;
	}
	#mismo *, #otro *{
		width: 100%;
		display: block;
	}
}