/*ESTILOS DE LA VENTANA DE LOGIN*/

/* BASIC */

html {
  /*background-color: #56baed;*/
}

body {
  font-family: "Poppins", sans-serif;
  height: 100vh;
  background-color: #f4f4f4;
}


.container {
    max-width: 90%;
}

/*.td_programacion{
  font-size: 0.9em;
  padding:0.25em;
}*/
/*.table_programacion{
  margin:0;
}*/


/*TABLA PARA PRESENTACION DE PROGRAMACION*/
/*---------------------------------------------------------------------------*/
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

/* Estilos para celdas y cabeceras */
th, td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
}

/* Estilos específicos para la cabecera */
th {
    background-color: #054c9e;
    color: #fff;
}

/* Hover en filas */
tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}

/* Estilos para botón de dropdown - Tabla de programación*/
.notas_documentos {
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}
.notas_documentos:hover {
    background-color: #0056b3;
}


/* Contenido del dropdown */
.dropdown-content-documentos {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 1;
    right: 10%; /* Alinea el borde derecho del dropdown con el botón */
    left:70%;
    white-space: nowrap; /* Evita que el texto se apile en varias líneas */
    max-width: calc(100vw - 20px); /* Ajusta el ancho máximo para no exceder el viewport */
}

/* Enlaces dentro del contenido dropdown */
.dropdown-content-documentos a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #ddd;
}
.dropdown-content-documentos a:last-child {
    border-bottom: none;
}
.dropdown-content-documentos a:hover {
    background-color: #f1f1f1;
}

/*Cambios en la tabla de programación en displays delgados*/
@media screen and (max-width: 768px) {
    th:not([view="celular"]), td:not([view="celular"]) {
        display: none;  /* Oculta las celdas que no están marcadas para ser visibles en móviles */
    }
    th.acciones, td.acciones {
        width: 70px;
    }
    .notas_documentos{
        width:100%;
        margin: 0 auto;
    }
    .dropdown-content-documentos {
        left:10%; /* Asegura un margen mínimo desde el borde izquierdo */
        right:20%;
    }
}
/*TABLA PARA PRESENTACION DE PROGRAMACION*/
/*---------------------------------------------------------------------------*/




/*Submenus de bootstrap*/
.dropdown-submenu {
  position: relative;
}
.en_programacion {
  position:fixed;
  right:50px;
  top:20px;
  z-index: 5;

}
.btn-info {
  color: #fff;
    background-color: #054c9e;
    border-color: #083b75;
}
.btn-info:hover {
    background-color: #2573cc;
}


.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 80%;
  margin-left: .1rem;
  margin-right: .1rem;
}

a {
  color: #92badd;
  display:inline-block;
  text-decoration: none;
  font-weight: 400;
}

h2 {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  display:inline-block;
  margin: 40px 8px 10px 8px; 
  color: #cccccc;
}


.nav-estatico{
  padding:3px 20px;
  background-color: #ebebeb; 
  margin-bottom: -7px;
}
#verde1 {
  background-color:#88bf90;
}
#verde2 {
  background-color:#64a16d;
}
#verde3 {
  background-color:#3d7546;
}
#verde4 {
  background-color:#24522b;
}

#azul1 {
  background-color:#98cefa;
}
#azul2 {
  background-color:#6dabe6;
}
#azul3 {
  background-color:#4f8fcc;
}
#azul4 {
  background-color:#106ab5;
}
  .margen_colores {
    margin:0 -2px;
    display:inline-block;
    width:25%;
    height: 10px;
  }

#subrayado {
    background: linear-gradient(to right, #98cefa, #6dabe6, #4f8fcc, #106ab5);
    margin:0 -2px;
/*    display:inline-block;*/
    height: 10px;
}



/* STRUCTURE */

.centrado-vertical {
  display:flex;
  align-items: center;
  justify-content: center;
  
}
.centrado-vertical h5{
  font-size: 1.3em;
}


.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column; 
  justify-content: center;
  width: 100%;
  min-height: 100%;
  /*padding: 20px;*/
}

#formContent {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  background: #fff;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  position: relative;
  padding: 0px;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  text-align: center;
}

#formFooter {
  background-color: #f6f6f6;
  border-top: 1px solid #dce8f1;
  padding: 25px;
  text-align: center;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}



/* TABS */

h2.inactive {
  color: #cccccc;
}

h2.active {
  color: #0d0d0d;
  border-bottom: 2px solid #5fbae9;
}



/* FORM TYPOGRAPHY*/

input[type=button], input[type=submit], input[type=reset]  {
  background-color: #56baed;
  border: none;
  color: white;
  padding: 15px 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  font-size: 13px;
  -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  margin: 5px 20px 40px 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
  background-color: #39ace7;
}

input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}

#login, #password {
  width:80%;
  color:red;
  background-color: #f6f6f6;
  border: none;
  color: #0d0d0d;
  padding: 15px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px;
  border: 2px solid #f6f6f6;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
#submit_password{
  width:80%;
  font-size: 1.4em;
}

input[type=text]:focus {
  background-color: #fff;
  border-bottom: 2px solid #5fbae9;
}

input[type=text]:placeholder {
  color: #cccccc;
}



/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after{
  width: 100%;
}

h1{
    color:gray;
}

/* OTHERS */

*:focus {
    outline: none;
} 

#icon {
  width:30%;
}

/*TERMINA ESTILOS DE VENTANA DE LOGIN*/




div  {
	/*border:1px solid gray;*/
}

.flex-centrar{
	display: flex;
	align-items: center;
	justify-content: center;
}


.felx-alinear{
	/*border:2px solid salmon;*/
	display:flex;
	flex-direction:row;
	align-items: center;
}
.flex-horizontal {
  display:flex;
  align-content:center;
}

.card {
	margin:10px 0;
}

/*.flex-between {
	display:flex;
	justify-content: space-between;
	margin-right:0;
}*/

.flex-between {
    display: flex; /* Establece el contenedor como un contenedor Flexbox */
    justify-content: space-between; /* Distribuye el espacio entre los elementos internos */
/*    align-items: center; /* Alinea los elementos internos en el centro a lo largo del eje transversal (vertical) */*/
    align-content: center;
}

/*Estilos del formulario de multas*/

.etapa_formulario {
	border: 4px solid #232F3E;
	border-radius: 15px;
	padding: 10px 20px;
  background-color: #76A9E8;
}

.inputDHP {
  width:100%;
  height:2em;

}
.subrayar {
	background-color: yellow;
	color:black;
}

/*#salir, .cerrar_funcionalidad {
  width:100px;
  height:40px;
}*/


/* Estilo base para el botón */
#salir {
    background-color: #106ab5; /* Azul marino oscuro similar al de Amazon */
    color: white; /* Texto blanco para contraste */
    border: none; /* Sin borde para un look más limpio */
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

/* Estilo para cuando el cursor pasa sobre el botón */
#salir:hover {
    background-color: #0f1419; /* Un azul aún más oscuro para el efecto hover */
    border: none; /* Sin borde para un look más limpio */
}



.titulo_funcionalidad {
  font-size:1.6em;
}
#num_pendientes{
  font-size: 1.2em;
}
#imprimir_pendientes {
  margin-top:12px;
}

a, a:hover, a:visited, a:active {
    color: inherit; /* Esto hará que el enlace use el color de texto del elemento padre */
    text-decoration: none; /* Elimina el subrayado */
}

.arial {

    font-family: Arial, Helvetica, sans-serif;
    
}