html,
body {
  font-size: 0.9em;
  background-color: #f2f2f2;
}

.celdaeditable {background: lightcyan}

#wndHijo {
  background-color: #f2f2f2;
}

#wndHijoIframe {
  background-color: #f2f2f2;
}

#divLogo {
  position: absolute;
}

/*----LAYOUT----*/

#header {
  background-color: #5c9ccc;
}

#txtDocumentoId {
  color: black;
}

#divArchivos {
  font-size: 12px;
  background-color: white;
}

.linkCabecera {
  display: block;
}

h2 {
  margin-bottom: 5px;
  margin-left: 2px;
}

#divFoto > img {
  border-radius: 20%;
  margin: 1px;
  padding: 2px;
  border: 2px solid #eee;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(0, 0, 0, 0.1)));
}

#divFoto > img:hover {
  opacity: 1;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(0, 0, 0, 0.4)));
  -webkit-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);
}

#divFondo img {
  display: block;
  margin: 0 auto;
}

#divFondo input {
  height: 30px;
  width: 160px;
}

#footer {
  padding-top: 1em;
  margin-top: 5em;
  border-top: 1px solid #999;
}

/*---- FIN LAYOUT----*/

/* --- Menú --- */

/* Contenedor principal del menú */
#divMenu {
    background-color: #dfeffc;
    position: fixed; /* Centrado en pantalla */
    top: 50%; /* Centrado vertical */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajusta el punto de referencia del menú */
    z-index: 1000; /* Garantiza que esté encima de otros elementos */
    width: 85%; /* Reduce el ancho total a un 90% de lo anterior */
    max-width: 1080px; /* Máximo ancho en pantallas grandes ajustado */
    max-height: 90vh; /* Limita la altura al 90% de la pantalla */
    border: 2px solid #5c9ccc; /* Borde para resaltar el menú */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    padding: 10px; /* Espaciado interno */
    overflow-y: auto; /* Activa el scroll vertical si el contenido excede la altura */
    overflow-x: hidden; /* Evita scroll horizontal */
}

/* Estilo para la caja de búsqueda */
/* Contenedor del campo de búsqueda */
.menu-search {
    position: relative;
    display: inline-block;
}

/* Input de búsqueda */
.menu-search input {
    width: 100%;
    padding: 8px;
    padding-right: 30px; /* Espacio para el botón de limpieza */
    border: 1px solid #5c9ccc;
    border-radius: 5px;
    font-size: 1em;
}

/* Botón de limpieza */
.menu-search button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 1.2em;
    cursor: pointer;
    display: none; /* Oculto por defecto */
}

.menu-search button:hover {
    color: #2e6e9e; /* Color al pasar el mouse */
}

/* Botón de cierre */
.menu-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 1.5em;
    cursor: pointer;
    color: #5c9ccc;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-close:hover {
    background-color: #eaf4fc; /* Fondo al pasar el mouse */
    color: #2e6e9e; /* Cambia el color del ícono */
}
/* Título de cada sección del menú */
.titulomenu {
    font-size: 1.2em;
    background-color: #baccda;
    color: #2e6e9e;
    font-weight: bold;Menu
    padding: 0.5vh;
    margin: 0.5vw auto;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Contenedor de los ítems del menú */
.menu {
    display: flex;
    flex-wrap: wrap; /* Permite múltiples filas de elementos */
    justify-content: space-between; /* Espacio uniforme entre los ítems */
    gap: 10px; /* Espaciado entre ítems */
    background-color: #f4f9ff;
    padding: 10px;
    border-radius: 8px;
}

/* Cada ítem del menú */
.menu-item {
    flex: 1 1 calc(10% - 10px); /* Mantén la distribución anterior */
    min-width: 7.5%; /* Ancho mínimo */
    max-width: 12.5%; /* Ancho máximo */
    text-align: center; /* Centra el contenido */
    background-color: #ffffff;
    border: 1px solid #5c9ccc;
    border-radius: 8px;
    padding: 15px; /* Mantén el padding anterior */
    transition: all 0.3s ease; /* Transiciones suaves */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
    overflow: hidden; /* Controla el desbordamiento general */
}

/* Enlaces dentro de los ítems */
.menu-item a {
    color: #333333; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Asegura que el enlace abarque todo el ítem */
    font-size: 0.9em; /* Tamaño de fuente consistente */
    font-weight: bold;
    word-wrap: break-word; /* Permite romper palabras largas */
    text-align: center; /* Centra el texto dentro del ítem */
    overflow-wrap: anywhere; /* Rompe las líneas donde sea necesario */
    line-height: 1.2em; /* Ajusta el espacio entre líneas */
}

.menu-item a:focus {
    outline: none;
    background-color: #eaf4fc; /* Fondo destacado */
    border: 2px solid #2e6e9e; /* Borde destacado */
    color: #2e6e9e; /* Texto destacado */
}

/* Etiquetas de texto en los ítems */
.menu-label {
    display: block;
    margin-top: 5px;
    font-size: 0.9em;
    color: #333333;
    font-weight: normal;
    word-wrap: break-word; /* Permite romper palabras largas */
    text-align: center; /* Centra el texto dentro del ítem */
    overflow-wrap: anywhere; /* Rompe las líneas donde sea necesario */
    line-height: 1.2em; /* Ajusta el espacio entre líneas */
}


.menu-item:hover {
    background-color: #eaf4fc; /* Cambio de color al pasar el mouse */
    transform: scale(1.05); /* Efecto de ampliación ligera */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra más prominente */
}

/* Enlaces dentro de los ítems */
.menu-item a {
    color: #333333; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Asegura que el enlace abarque todo el ítem */
    font-size: 0.9em;
    font-weight: bold;
}

.menu-item a:hover {
    color: #2e6e9e; /* Cambia de color al pasar el mouse */
}

/* Iconos dentro de los ítems */
.menu-item i {
    font-size: 2em;
    color: #5c9ccc;
    margin-bottom: 5px;
}

/* Etiquetas de texto en los ítems */
.menu-label {
    display: block;
    margin-top: 5px;
    font-size: 1em;
    color: #333333;
    font-weight: normal;
}

/* Responsividad */
@media (max-width: 768px) {
    #divMenu {
        width: 95%; /* Ajusta el ancho en pantallas medianas */
        max-width: 95%; /* Sin límite de ancho */
        max-height: 80vh; /* Reduce la altura máxima en pantallas pequeñas */
    }

    .menu-item {
        flex: 1 1 calc(20% - 10px); /* Ajusta a 5 ítems por fila */
        min-width: 15%; /* Ancho mínimo ajustado */
    }
}

@media (max-width: 480px) {
    .menu-item {
        flex: 1 1 calc(33.33% - 10px); /* Ajusta a 3 ítems por fila */
        min-width: 25%; /* Ancho mínimo ajustado */
    }
}



/* Fin --- Menú --- */

/* --- Vistas ---- */

.titulo {
  margin-top: 5px;
  color: #3162a6;
  font-family: Tahoma, Verdana, Arial, Helvetica;
  font-size: 14px;
  font-weight: bold;
  text-transform: none;
  margin-bottom: 10px;
}

#divBuscar {
  margin-top: 0px;
  margin-bottom: 5px;
}

#divBotonera {
  float: right;
}

#divLista {
  width: 99%;
}

/* Fin --- Vistas ---- */

/* Formulario */
.number {
  /* Esta es clase del jquery validate */
  text-align: right;
}
.digits {
  /* Esta es clase del jquery validate */
  text-align: right;
}

/*---- jquery.validate -----*/
label.error {
  display: block;
  color: red;
}

/* Mensaje de Error del Zend_form */
.errors {
  display: block;
  color: red;
}
/* Fin ---- Formulario ---- */

/* Para aplicar estilos personalizados a JqueryUI*/
.ui-tabs .ui-tabs-nav li {
  padding: 0.5em 1em;
}

.ui-button-text-only .ui-button-text {
  font-size: 0.8em;
}

/* Color negro a las letras del datepicker */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  color: black;
}

/* Hago un poco más oscuro el fondo, al cargar un diálogo */
.ui-widget-overlay {
  opacity: 0.5;
}

/*Para la venta eliminar del jqgrid*/
/* Al aplicar bootstrap el título de la ventana dialog que se muestra al eliminar 
un registro queda muy pequeño. Con esto lo ajustamos */
.ui-jqdialog .ui-jqdialog-titlebar {
  height: 30px;
}
.fm-button {
  height: 30px;
}

/* Para hacer los dialog responsive */
.ui-dialog {
  top: 0;
  left: 0;
  margin: auto;
  /*    position: fixed;  Esto no dejaba escribir en el movil.  el teclado ocultaba el campo de texto. */
  max-width: 100%;
  max-height: 100%;
  flex-direction: column;
  align-items: stretch;
}
.ui-dialog .ui-dialog-content {
  flex: 1;
}

/* Para smartphones */
@media (max-width: 600px) {
  #menu {
    display: none;
  }

  #divMenu {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #divFondo {
    padding-top: 2vh;
  }

  #header > #divNombreSistema {
    height: 45px;
    background-color: #5c9ccc;
    border-color: #d9edf7;
    border-style: solid;
    border-width: 0.1px;
  }

  #header > #divVerTramite {
    height: 65px;
    background-color: #5c9ccc;
    text-align: center;
    border-color: #d9edf7;
    border-style: solid;
    border-width: 0.1px;
  }

  #header > #divPuerta {
    text-align: right;
    padding: 10px;
  }

  #txtDocumentoId {
    width: 60px;
  }

  /* Para formularios*/
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  textarea,
  select {
    width: 100%;
  }

  /* Para el Notify */
  .ui-pnotify-mobile-able.ui-pnotify {
    width: 100vw !important;
  }
}

/* Para escritorio */
@media (min-width: 600px) {
  #header {
    height: 70px;
  }

  #divFondo {
    padding-top: 10vh;
  }

  #header > #divNombreSistema {
    height: 70px;
    background-color: #5c9ccc;
    border-color: #d9edf7;
    border-style: solid;
    border-width: 0.1px;
  }

  #header > #divVerTramite {
    height: 70px;
    background-color: #5c9ccc;
    text-align: center;
    border-color: #d9edf7;
    border-style: solid;
    border-width: 0.1px;
  }

  #header > #divPuerta {
    height: 70px;
    background-color: #5c9ccc;
    text-align: right;
    border-color: #d9edf7;
    border-style: solid;
    border-width: 0.1px;
  }

  /* Para formulario */
  .zend_form {
    width: 100%;
    margin: 5px auto;
    padding: 0;
    overflow: auto;
  }

  .zend_form dt {
    padding: 0;
    clear: both;
    width: 25%;
    float: left;
    text-align: right;
    margin: 5px 5px 5px 0;
  }

  .zend_form dd {
    padding: 0;
    float: left;
    width: 68%;
    margin: 2px 2px 5px 0;
  }
}

/* Para los iconos de Material Design */
.material-icons.md-18 {
  font-size: 18px;
}
.material-icons.md-24 {
  font-size: 24px;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}