/*
Copyright (c) 2008, CorpoDSI. All rights reserved.
Code licensed under the BSD License:
http://developer.corpodsi.net/yui/license.txt
version: 2.6.0
*/
html {
  font-family: calibri, arial;
  font-size: 13px;
}

/*html{color:#4c4c4c;background:#fff;font-family: calibri, arial;}*/

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222;
  font-size: 1.54em;
  font-weight: normal;
  line-height: 24px;
  margin: 0 0 .46em;
}

.app-clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '.';
  clear: both;
  height: 0;
}

.app-header {
  position: relative;
  background: #0093b8;
  padding: 0 22px;
  color: #fff;
}

.app-header-content {
  padding: 8px 0 12px;
  position: relative;
}

.app-header-icon {
  /* float: left; */
  margin-right: 15px;
  height: 52px;
}

.app-header-title {
  font-size: 32px;
  display: block;
  /*line-height: 35px;*/
  margin-top: 10px;
}

.app-perfil-content {
  display: inline-block;
  text-align: left;
}

.app-perfil-content ul li {
  position: relative;
}

.app-perfil-content ul li:hover .app-perfil-list {
  display: block;
}

.app-button-perfil {
  float: right;
  padding: 2px 10px 2px 30px;
  border: solid 1px #fff;
  background: #fff url("../images/iuser.png") no-repeat;
  background-position: 4px center;
  color: #4c4c4c;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.app-button-perfil:hover {
  background: #0093b8 url("../images/iuserh.png") no-repeat;
  background-position: 4px center;
  color: #fff;
}

/*.app-button-perfil:hover .app-perfil-list {display: block !important;}*/

.app-perfil-list {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  padding: 8px 12px;
  border: solid 1px #d5d5d5;
  z-index: 300;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  overflow: hidden;
  width: 220px;
  display: none;
}

.app-perfil-list:hover {
  display: block;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}

.app-perfil-list ul li {
  margin-bottom: 15px;
}

.app-perfil-list ul li a {
  color: #256c89;
}

.app-info-perfil {
  color: #4c4c4c;
  font-size: 100%;
}

.app-info-perfil img {
  height: 60px;
  width: 60px;
  float: left;
  margin-right: 10px;
}

.app-body {
  position: relative;
}

.app-body-menu {
  background: #f2f2f2;
  width: 277px;
  border-right: solid 3px #d5d5d5;
  padding-left: 10px;
  position: absolute;
  bottom: 0;
  top: 0;
}

.app-menu-list {
  overflow-x: hidden;
  overflow-y: auto;
  border-bottom: solid 2px #d5d5d5;
}

.app-menu-list ul {
  margin-top: 22px;
}

.app-menu-list ul li {
  margin-bottom: 25px;
}

.app-menu-list ul li h1 {
  cursor: pointer;
  color: #a0a0a0;
}

.app-menu-list ul li h1:hover {
  color: #7E7E7E;
}

.app-menu-list ul li img {
  margin-right: 5px;
}

.app-menu-list ul li ul {
  margin-top: 5px;
}

.app-menu-list ul li ul li {
  padding: 5px 0 5px 22px;
  margin-bottom: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.app-menu-list ul li ul li:hover {
  background-color: #7f7f7f;
  color: #fff;
}

.app-menu-list ul li ul li.current-child {
  background-color: #0093b8;
  color: #fff;
}

.app-menu-list ul li ul li.current-child:hover {
  background-color: #0093b8;
  color: #fff;
}

.app-body-content {
  position: absolute;
  top: 0;
  bottom: 0;
}

/*.app-menu-content {padding: 10px 10px 0 0; overflow-x: hidden; overflow-y: auto;}*/
.app-menu-content {
  padding: 0 10px 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/*.app-menu-content ul {border: 0; border-bottom: solid 2px #d5d5d5; background-color: #fff;}
.app-menu-content ul li {display: inline-block; position: relative; border: 0; top: 0; background: #fff;}
.app-menu-content ul li a {display: block; padding: 5px 8px;}
.app-menu-content ul li.active-menu {top: 2px;}
.app-menu-content ul li.active-menu a {border: solid 2px #d5d5d5; border-bottom: 0;}*/
.app-container-model {
  position: relative;
  padding-left: 20px;
}

.app-button-divs {
  padding: 10px 0 15px;
  text-align: right;
}

.app-button-divs-fixed {
  position: fixed;
  z-index: 60;
  background-color: #fff;
  display: block;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  /*box-shadow: 0 0 9px 0 #490F76*/
  ;
  padding-right: 10px;
}

/*.app-footer {margin: 0 10px;border-top: solid 3px #d5d5d5;padding: 12px 0 18px;font-size: .8em;}*/
.app-footer {
  margin: 0 10px;
  padding: 8px 0 12px;
  font-size: .8em;
}

.app-footer ul li {
  display: inline-block;
  margin-right: 10px;
}


/* eventos para el contenido del iframe */
.app-body-iframe {
  padding: 0 10px 10px 10px;
}

.app-button-divs-iframe {
  text-align: right;
  padding: 5px 10px 12px 10px;
  position: fixed;
  z-index: 100;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
}

.app-button-divs-iframe-fixed {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}

.app-content-grilla {
  margin-top: 68px;
}

.app-content-adicional {
  display: inline-block;
  margin-left: 15px;
}

/* estilos ui */
#app-tabs-li-initial {
  border-color: #fff !important;
  top: -1px;
  padding: .5em 0;
  cursor: default;
}

.ui-dialog-titlebar .ui-dialog-titlebar-close {
  width: 27px;
  height: 27px;
}

.ui-dialog-titlebar-close {
  background-image: none !important;
}

.ui-dialog-titlebar-close.ui-state-hover {
  background: none !important;
}

.ui-dialog-titlebar .ui-state-hover {
  background: none;
  border: none;
}

.ui-dialog-titlebar-close .ui-icon {
  width: 21px;
  height: 22px;
}

.ui-dialog-titlebar a .ui-icon-closethick {
  background-image: url("../images/icon_close.png");
  background-position: 0 0;
}

.ui-dialog-titlebar a.ui-state-hover .ui-icon-closethick {
  background-image: url("../images/icon_close.png") !important;
  background-position: 0 -22px;
}

.app-btn {
  border: 1px;
}

.app-btn .ui-button-text {
  padding: 2px 12px;
  font-weight: normal;
  line-height: normal;
}

.app-btn-icon {
  width: 16px;
  height: 16px;
  vertical-align: bottom;
}

.app-btn-icon .ui-icon {
  margin-left: -9px !important;
  margin-top: -9px !important;
}


/* fondo de la barra del scrol */
::-webkit-scrollbar {
  width: 13px;
  height: 13px;
  border: none;
  background-color: #d5d5d5;
}

/* barra scrol */
::-webkit-scrollbar-thumb {
  background-color: #9d9d9d;
  border: 1px solid #9d9d9d;
}

/* extremos de la barra scrol */
/*::-webkit-scrollbar-button {background-color: #d5d5d5;background-image: url(hig/img/controls.png);background-repeat: no-repeat;}*/

/* corner o cruce de los scrol */
::-webkit-scrollbar-corner {
  background-color: #f0f0f0;
}

/*@-moz-document url(http://localhost/framework/), url-prefix(http://localhost/framework/),url-prefix(https://localhost/framework/) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }

    scrollbarbutton {
       display: none !important;
    }

    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}*/


tr.single_select_grilla td {
  /*background-color: #0093b8 !important;*/
  /*color: #fff;*/
  background-color: #eeeeee !important;
}

h1.title-new {
  font-size: 21px;
}


/* para el loding */
.v-loading-indicator,
.v-loading-indicator-delay,
.v-loading-indicator-wait {
  position: absolute;
  z-index: 30000;
  background: url("../images/img/dk_loading_gray.gif") no-repeat center center;
  /*opacity: 0.30;filter:Alpha(Opacity=30);*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}


/* Estilos de las ventanas de alertas, confirmacion */
.ventana-all-content {
  /*font-size: 16px;*/
}

.ventana-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1039;
}

.ventana-container {
  position: absolute;
  border: solid 1px #000;
  top: 50%;
  left: 50%;
  background-color: #f2f2f2;
  box-shadow: 0 12px 40px 0px rgba(0, 0, 0, .3);
  z-index: 1040;
}

.ventana-toolbar {
  margin: 0;
  background-color: #282828;
  padding: 15px 10px;
  /*color: #d6d6d6;*/
  color: #fff;
}

.ventana-content {
  margin: 0;
  color: #545454;
  padding: 5px 15px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ventana-content-title {
  font-weight: bold;
  display: block;
}

.ventana-content-message {
  height: 100px;
  width: 350px;
  word-wrap: break-word;
}

.ventana-buttons {
  text-align: right;
  padding: 5px;
  margin: 10px 0 5px;
}

.ventana-btn {
  text-decoration: none;
  background-color: #7f7f7f;
  padding: 6px 16px;
  margin-right: 10px;
  color: #fff;
  /*-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;*/
  display: inline-block;
}

.ventana-btn:hover,
.ventana-btn:focus {
  background-color: #0099cc;
  text-decoration: none;
}

.ventana-btn-action {
  font-weight: bold;
}

.ventana-icon {
  background: url("icons_small.png");
  background-repeat: no-repeat;
  height: 24px;
  display: inline-block;
  width: 26px;
  vertical-align: middle;
  margin-right: 5px;
}

.ventana-icon-information {
  background-position: 0 0;
  width: 25px;
}

.ventana-icon-warning {
  background-position: -25px 0;
}

.ventana-icon-success {
  background-position: -50px 0;
}

.ventana-icon-error {
  background-position: -75px 0;
}

.ventana-timer {
  font-weight: normal;
  margin-right: 4px;
}

/* fin de los estilos de la ventana alerta */



/*************************** arbol para el modulo de acceso *******************/
div.tree-content * {
  /* margin: 0; */
  padding: 0;
  /*border: 1;*/
  font-size: 14px;
}

.tree-content {
  margin-top: 16px !important;
  margin-left: 28px !important;
  margin-bottom: 30px !important;
  /*    border-bottom: solid 1px #ccc;
    width: 300px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;*/
}

/*.tree-module {
    width: 300px;
}*/
.tree-content ul li input[type=checkbox] {
  float: none !important;
  margin: 0px !important;
}

.tree-content ul li label {
  width: 400px !important;
  float: none !important;
  padding: 0px 0px 0px 5px !important;
  font-size: inherit !important;
  display: inline;
}

.tree-content ul,
.tree-content li {
  display: block;
  line-height: 20px;
  list-style-type: none;
}

.list-child {
  margin-left: 36px;
}

.list-parent {
  margin-top: 5px;
}

.list-content:hover {
  color: #0093b8;
  /*color: #72c6e4;*/
  /*font-weight: bold;*/
}

.e-list-parent {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0px;
  padding: 0px;
  background-color: transparent;
  background-repeat: no-repeat;
  cursor: pointer;
}

.e-list-parent-open {
  background-image: url("../images/tree/folder-open.png");
  /*background-image: url("../images/img/folder-open.gif");*/
}

.e-list-parent-close {
  background-image: url("../images/tree/folder-close.png");
  /*background-image: url("../images/img/folder.gif");*/
}

/* estilo de los formularios */
.app-form table {
  margin: auto;
}

.app-form table tr td:not(:first-child) {
  padding-left: 15px;
}

.app-form label {
  display: block;
  margin: 5px 8px 2px 0;
}

.app-form label.required::after {
  content: " *";
  color: #F00;
  font-weight: bold;
  font-size: 14px;
}

.app-form textarea,
.app-form select,
.app-form input:not([type="submit"]):not([type="button"]):not([type="file"]):not([type="reset"]) {
  padding: 2px 0 2px 3px;
  text-transform: uppercase;
}

.app-form input.no-text-transform {
  text-transform: none !important;
}

.app-form textarea,
.app-form select,
.app-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="reset"]) {
  width: 210px;
}

.app-img-temp {
  height: 142px;
  text-align: center;
  background: url("../images/_foto.png") no-repeat center center;
  cursor: pointer;
}

.app-img-temp img:first-child {
  width: 140px;
  height: 140px;
}

.app-img-temp2 {
  height: 30px;
  text-align: center;
  background: url("../images/_foto.png") no-repeat center center;
  cursor: pointer;
  float: left;
  margin-right: 10px;
  margin-left: 10px;
}

.app-img-temp2 img:first-child {
  width: 25px;
  height: 25px;
}

.table-details input[type="text"],
.table-details textarea {
  width: 90%;
  padding: 1px !important;
  text-transform: none;
  border: 0;
}

.table-details select {
  width: 98% !important;
  padding: 1px !important;
  text-transform: none;
}

.table-details input.editable,
.table-details textarea.editable {
  border: solid 1px #ccc;
}

.table-details tr td {
  padding: 0 !important;
}

a.tr-remove {
  /*visibility:hidden;*/
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAyUlEQVR42rWSsQ3DMAwEM4LbbMERNEZKV5rDm2gETZAZNIJG0Ag0CbD4fBEBDFIcQOP5ol/iQ1U/qLUexmlcTtQH97HJG5ehxHINe9HUDN3Q0OimAuLAqVEP+C5o7CgY4oZA6OCORs4jCOdmIzIh+2Q9PTGfMX+r+XfMb86vu7rnf8bn630Yp3E5UX//1WhchhLLNexFUzN0Q0OjmwqIA6dGPeC7oLGjYIgbAqGDOxo5jyCcm43IhOyT9fTEdMb8rebfMb85+V29AXAYhSZOQVSlAAAAAElFTkSuQmCC");
  height: 13px;
  width: 14px;
  display: inline-block;
  /*top:-2px;*/
  position: relative;
  /*left:1px*/
}

a.tr-remove:hover {
  background-position: 0 -15px;
}

.selected_row {
  background: url("../images/img/apply2.gif") no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  display: block;
  margin: auto
}

.selected_row:hover {
  background: url("../images/img/apply.gif") no-repeat;
}



.box-form {
  margin-top: 10px;
  border: solid 1px #ccc;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding-bottom: 8px;
}

.box-form legend {
  color: #15C;
  /*font-weight:bold;*/
  padding: 0 6px;
  margin: 0 10px;
  text-align: left;
}

/************************ para la lista de usuarios ************************/

.clu {
  width: 170px;
  margin-left: 8px;
  margin-top: 5px;
}

.dfu button {
  margin: 0;
}

.dfu .ui-button-text {
  padding: 2px 6px 2px 21px !important;
}

.dfu .ui-icon {
  left: 2px !important;
  top: 14px !important;
}

.dlu {
  padding-top: 5px;
}

.dlu ul li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* text-indent: 4px; */
  cursor: pointer;
  padding: 2px 0;

  background: no-repeat url("images/icons_g.png") -17px 0;
  padding-left: 20px;
}

.dlu ul li:hover {
  background-color: #e2f0ff;
}

/* .dlu ul .d {
	background: no-repeat url("images/icons_g.png") -17px 0;
	padding-left: 20px;
} */

.dlu ul .c {
  background: no-repeat url("images/icons_g.png") 0 -51px;
  /* width: 16px;
	height: 16px;
	display: inline-block; */
  padding-left: 40px;
}


/***************************** para las ventanas de chat *****************************/

.content-chats {
  position: fixed;
  right: 7px;
  bottom: 0;
  z-index: 1036;
  display: inline-block;
}

.show {
  display: block !important;
}

.wc {
  width: 248px;
  /* height: 210px; */
  float: right;
  margin-right: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px;
  background-color: #fff;
  border: solid 1px #d5d5d5;
  display: none;
}

.hwc {
  position: relative;
  background-color: #282828;
  padding: 1px 2px;
}

.thwc {
  color: #fff;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0;
}

.ihwc {
  background: no-repeat url("images/icons_g.png") -17px 0;
  width: 16px;
  height: 16px;
  display: inline-block;
}

.thwc .c {
  background: no-repeat url("images/icons_g.png") 0 -51px;
  width: 16px;
  height: 16px;
  display: inline-block;
}

.bhwc {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #7f7f7f;
}

.bhwc a {
  text-decoration: none;
  color: #7f7f7f;
  font-size: 1.5em;
  width: 14px;
  height: 18px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}

.bhwc a:hover {
  color: #fff;
}

.bwc {
  height: 120px;
  padding: 1px 5px;
  overflow-x: hidden;
  overflow-y: auto;
  word-wrap: break-word;
}

.bwc p {
  margin: 2px 0;
}

.bwc p strong {
  font-weight: bold;
}

.fwc {
  padding: 1px 2px 0;
  border: 1px solid #F1F1F1;
}

.mfwc {
  width: 230px;
  height: 50px;
  margin: 4px 2px 3px;
  padding: 1px 2px;
  resize: none;
}

/************************* para los mensajes de mail ******************/
.message-list {
  padding: 0;
  width: 300px;
}

.message-list-header {
  color: #000;
  border-bottom: solid 2px #d5d5d5;
  padding: 8px 0 8px 12px;
  font-size: 1.1em;
  font-weight: bold;
}

.message-list-body {
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

.message-list-body li {
  margin: 0 !important;
  padding: 8px;
}

.message-list-body li.list-item {
  border-bottom: solid 1px #EBEBEB;
}

.message-list-body li.list-item:hover {
  /* background-color: #EBEBEB; */
  background-color: #F0F0F0;
}

.list-item p {
  margin-bottom: 2px;
  width: 270px;
  position: relative;
}

.list-item img.icon-user {
  height: 40px;
  width: 40px;
  float: left;
  margin-right: 8px;
}

.list-item b.username {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 135px;
  display: inline-block;
}

.list-item span.time {
  font-weight: normal;
  font-size: .79em;
  color: #999;
  position: absolute;
  top: 0;
  right: 0;
}

.message-list-footer {
  padding: 8px 0 8px 8px;
  text-align: center;
  border-top: solid 1px #d5d5d5;
  text-align: center;
}

a#readAllMessage {
  color: #256c89;
}

/******************************** trash *******************************/

.trash {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: none;
  border: none;
  cursor: pointer;
  display: inline;
  outline: none;
  padding: 0;
  position: relative;
  width: 30px;
}

.trash>span {
  display: inline-block;
}

.trash>.can,
.trash>.lid {
  background: url('trash.gif') 0 0 no-repeat;
  left: 0;
  position: absolute;
  right: 0;
  top: 2px;
}

.trash>.edit {
  background: url('edit.gif') 0 0 no-repeat;
  left: 0;
  position: absolute;
  right: 0;
  top: 2px;
  height: 16px;
  width: 16px;
}

.trash>.lid {
  transform-origin: 25% 100%;
  -webkit-transform-origin: 25% 100%;
  -moz-transform-origin: 25% 100%;
  /*    transform-origin: -7% 100%;
  -webkit-transform-origin: -7% 100%;
  -moz-transform-origin: -7% 100%;*/

  transition: transform 150ms;
  -webkit-transition: -webkit-transform 150ms;
  -moz-transition: -moz-transform 150ms;

  height: 6px;
  width: 13px;
}

html[dir='rtl'] .trash>.lid {
  transform-origin: 107% 100%;
  -webkit-transform-origin: 107% 100%;
  -moz-transform-origin: 107% 100%;
}

.trash:focus>.lid,
.trash:hover>.lid {
  transform: rotate(-33deg);
  -webkit-transform: rotate(-33deg);
  -moz-transform: rotate(-33deg);
  /*    transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);*/

  transition: trasform 250ms;
  -webkit-transition: -webkit-transform 250ms;
  -moz-transition: -moz-transform 250ms;
}

html[dir='rtl'] .trash:focus>.lid,
html[dir='rtl'] .trash:hover>.lid {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}

.trash>.can {
  background-position: -1px -6px;
  height: 11px;
  /* The margins match the background position offsets. */
  margin-left: 1px;
  /* The right margin is one greater due to a shadow on the trash image. */
  margin-right: 2px;
  margin-top: 6px;
  width: 11px;
}

.block_content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.msg,
.msg_su {
  font-weight: bold;
  color: red;
}

.ui-state-error {
  border-color: #c31d1d !important;
}

.border {
  border: 1px solid #a9a9a9;
  border-radius: 3px;
}

input[readonly="readonly"] {
  background-color: #ebebe4;
  border: 1px solid #a9a9a9;
  cursor: not-allowed;
}

textarea[readonly="readonly"] {
  background-color: #ebebe4;
  border: 1px solid #a9a9a9;
  cursor: not-allowed;
}

/************* para las leyendas de las tablas *************/
.leyenda {
  margin: 10px auto 5px;
  text-align: center;
}

.leyenda ul {
  list-style: none;
}

.leyenda ul li {
  display: inline-block;
  margin-right: 20px;
}

.cubo {
  width: 16px;
  height: 8px;
  display: inline-block;
}

li.red .cubo,
tr.red,
tr.red td.sorting_1 {
  background-color: #d9534f;
}

li.skyblue .cubo,
tr.skyblue,
tr.skyblue td.sorting_1 {
  background-color: #54D4D4;
}

li.blue .cubo,
tr.blue,
tr.blue td.sorting_1 {
  background-color: #3466FD;
}

li.yellow .cubo,
tr.yellow,
tr.yellow td.sorting_1 {
  background-color: #FBF257;
}

li.purple .cubo,
tr.purple,
tr.purple td.sorting_1 {
  background-color: #8459FE;
}

li.green .cubo,
tr.green,
tr.green td.sorting_1 {
  background-color: #5cb85c;
}

li.orange .cubo,
tr.orange,
tr.orange td.sorting_1 {
  background-color: #F19800;
}


.btn-verde {
  background: linear-gradient(45deg, #28a745, #34d058) !important;
  color: white !important;
  border: none !important;
  transition: all 0.3s ease;
}

.btn-verde:hover {
  background: linear-gradient(45deg, #218838, #28a745) !important;
  transform: scale(1.05);
}

.btn-azul {
  background: linear-gradient(45deg, #007bff, #3399ff) !important;
  color: white !important;
  border: none !important;
  transition: all 0.3s ease;
}

.btn-azul:hover {
  background: linear-gradient(45deg, #0069d9, #007bff) !important;
  transform: scale(1.05);
}

.btn-naranja {
  background: linear-gradient(45deg, #ff9800, #ffb84d) !important;
  color: white !important;
  border: none !important;
  transition: all 0.3s ease;
}

.btn-naranja:hover {
  background: linear-gradient(45deg, #e68a00, #ff9800) !important;
  transform: scale(1.05);
}

.btn-rojo {
  background: linear-gradient(45deg, #dc3545, #ff4d5a) !important;
  color: white !important;
  border: none !important;
  transition: all 0.3s ease;
}

.btn-rojo:hover {
  background: linear-gradient(45deg, #c82333, #dc3545) !important;
  transform: scale(1.05);
}

/*stado para pintar las filas  */
.estado-aceptado {
  color: #000;
  /* negro */
  font-weight: bold;
}

.estado-registrado {
  color: #2196F3;
  /* azul */
  font-weight: bold;
}

.estado-transferido {
  color: #4CAF50;
  /* verde */
  font-weight: bold;
}

.estado-rechazado {
  color: #F44336;
  /* rojo */
  font-weight: bold;
}

/* FIN pintado para pintar las filas  */

/* inicio de cargar pdf   */

.upload-container {
  margin: 10px 0;
}

.drop-area {
  border: 2px dashed #aaa;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  background: #f9f9f9;
  transition: 0.2s;
}

.drop-area.dragover {
  border-color: #007bff;
  background: #eef6ff;
}

.hidden-input {
  display: none;
}

.file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 8px 12px;
  background: #f1f1f1;
  border-radius: 6px;
}

.file-name {
  font-size: 14px;
  color: #333;
}

.remove-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: red;
}


/* Fin de cargar pdf   */
/* inciao de enviar doc - extens   */
#form-extends {
  max-width: 600px;
  /* ancho controlado */
  margin: 0 auto;
  /* centrado */
  padding: 20px;
}

#form-extends table {
  width: 100%;
  border-spacing: 0 12px;
  /* espacio vertical entre filas */
}

#form-extends label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #444;
}

#form-extends .form-control,
#form-extends .form-select,
#form-extends textarea,
#form-extends input[type="text"] {
  width: 98%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#form-extends .form-control:focus,
#form-extends .form-select:focus,
#form-extends textarea:focus {
  border-color: #3b82f6;
  /* azul elegante */
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
  outline: none;
}

#form-extends textarea {
  min-height: 90px;
  resize: vertical;
}

#form-extends .msg-user {
  margin-top: 15px;
}

/* fin de enviar doc - extens   */


/* INIOC de archivar doc - extens   */
/* Contenedor general */
#form-archivar {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

.archivar-container h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

/* Textarea */
#form-archivar textarea {
  width: 98%;
  min-height: 90px;
  resize: vertical;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#form-archivar textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
  outline: none;
}

/* Tabla de trámites */
.tabla-tramites {
  width: 98%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 14px;
}

.tabla-tramites th {
  text-align: left;
  padding: 10px;
  background: #f1f5f9;
  border-bottom: 2px solid #e2e8f0;
  color: #444;
  font-weight: 600;
}

.tabla-tramites td {
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}

/* Botón de acción */
.btn-accion {
  padding: 6px 14px;
  font-size: 13px;
  border: none;
  border-radius: 6px;
  background: #ef4444;
  /* rojo elegante */
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-accion:hover {
  background: #dc2626;
}

/* fin de archivar doc - extens   */


/* Estilo general del formulario */
#form-data {
  max-width: 700px;
  /* ancho controlado */
  margin: 0px auto;
  /* centrado */
  padding: 0px 25px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

/* Títulos */
#form-data h1 {
  font-size: 20px;
  margin-bottom: 15px;
  text-align: center;
  color: #1f2937;
  /* gris oscuro elegante */
}

/* Fieldset */
#form-data fieldset {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 15px 20px;
}

#form-data legend {
  font-weight: 600;
  color: #3b82f6;
  /* azul moderno */
  padding: 0 8px;
}

/* Tablas dentro del formulario */
#form-data table {
  width: 100%;
  border-spacing: 0 12px;
  /* espacio vertical entre filas */
}

#form-data td {
  vertical-align: middle;
  padding-right: 10px;
}

/* Inputs y textarea */
#form-data input[type="text"],
#form-data input[type="hidden"],
#form-data input[type="file"],
#form-data .form-select,
#form-data textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#form-data input[readonly] {
  background: #f9fafb;
  color: #555;
}

#form-data input:focus,
#form-data .form-select:focus,
#form-data textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
  outline: none;
}

/* Textarea */
#form-data textarea {
  min-height: 80px;
  resize: vertical;
}

/* Sección de subida de archivo */
#form-data .upload-container {
  margin-top: 10px;
}

#form-data .drop-area {
  border: 2px dashed #bbb;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  color: #555;
  transition: border-color 0.2s, background 0.2s;
}

#form-data .drop-area:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
}

#form-data .upload-note {
  font-size: 12px;
  color: #666;
}

/* Botones (si luego agregas) */
#form-data button {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

#form-data button:hover {
  background: #2563eb;
}

/* fin de from-data - extens   */

/*NICIO */
/* ---------- Contenedor de formularios ---------- */
form {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

/* Títulos en los formularios */
form h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

/* ---------- Inputs, Selects y Textareas ---------- */
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
  width: 98%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  color: #333;
}

/* Textarea específico */
form textarea {
  min-height: 90px;
  resize: vertical;
}

/* Foco en campos */
form input:focus,
form select:focus,
form textarea:focus {
  border-color: #3b82f6;
  /* azul */
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
  outline: none;
}

/* ---------- Tablas en formularios ---------- */
form table {
  width: 98%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 14px;
}

form table th {
  text-align: left;
  padding: 10px;
  background: #f1f5f9;
  border-bottom: 2px solid #e2e8f0;
  color: #444;
  font-weight: 600;
}

form table td {
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}

/* ---------- Botones de acción ---------- */
button,
.btn-accion {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  /* azul elegante */
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

/* Hover botones */
button:hover,
.btn-accion:hover {
  background: #1d4ed8;
}

/* Botón de advertencia / eliminar */
.btn-danger {
  background: #ef4444;
}

.btn-danger:hover {
  background: #dc2626;
}

/* Botón secundario */
.btn-secondary {
  background: #6b7280;
}

.btn-secondary:hover {
  background: #4b5563;
}

/*INICIO*/


/* Ocultar botones por defecto */
.acciones {
  display: none;
  gap: 6px;
}

/* Mostrar solo al hacer hover sobre la fila */
tr:hover .acciones {
  display: flex;
}

/* Botones de acción estilo moderno */
.acciones button {
  border: none;
  background: #f1f5f9;
  color: #333;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 13px;
}

.acciones button:hover {
  background: #2563eb;
  color: #fff;
}

.right_header {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Buscador */
.app-search {
  display: flex;
  align-items: center;
  margin-left: auto;
  /* 👉 derecha */
  /* margin: 0 auto;  👉 centro (usa uno u otro) */
}

.app-search input {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.app-search button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #ccc;
  background: #007bff;
  color: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.app-search button:hover {
  background: #0056b3;
}

/* incio del buscardor central de tramites */
.app-search {
  display: inline-flex;
  /* 👈 clave */
  align-items: center;
  /* 👈 alinea vertical */
  margin-right: 15px;
}

.app-search input {
  height: 32px;
  /* 👈 misma altura */
  padding: 0 10px;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.app-search button {
  height: 32px;
  /* 👈 misma altura */
  padding: 0 12px;
  border: 1px solid #ccc;
  background: #007bff;
  color: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.app-search button:hover {
  background: #0056b3;
}