// Importación de estilos
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
//@import "variables";

// Necesario para las fuentes de los iconos
//$icon-font-path:    "../../node_modules/bootstrap/fonts/";

// Necesario para los estilos personalizados de los paneles
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/panels";

// Mis variables
/* Variables generales */
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee

/* Variables correspondientes a la barra de navegación */
$nav-bg-color-hover: #0088cc !important;
$nav-color-hover: #fff !important;
$dropdown-menu-bg-color-hover: #f5f5f5 !important;
$dropdown-menu-color-hover: #999 !important;
$separador-raya-color: #999 !important;

/* Variables correspondientes al pie de página (footer) */

$footer-color: lighten(#494c49, 20%) !default;
$footer-bg-color: lighten($footer-color, 30%) !default;
$footer-link-color: lighten(#494c49, 20%) !default;
$footer-link-color-hover: #494c49 !default;
$footer-width: 100% !default;
$footer-navbar-valor-color: #000 !default;
$footer-glyphicon-fontsize: 20px !default;
$footer-guardado-color: green !default;
$footer-noguardado-color: red !default;
$footer-mensaje: #1b8ac6 !default;
$footer-mensaje-background: rgb(255, 255, 255) !default;
$footer-mensaje-border: 2px solid rgb(221, 221, 221);
$footer-mensaje-error: red !default;
$footer-label-color: #084ca0 !default;

/* Variables correspondientes a la miga de pan */

$breadbtn-margin-top: 60px !default;
$breadbtn-margin-top-lite: 20px !default;

/* variables correspondientes al filtro de búsqueda */

$panel-filtro-text: #fff !default;
$panel-filtro-border: #d6d8d6 !default;
$panel-filtro-heading-bg: #d6d8d6 !default;
$panel-filtro-shadow: #d6d8d6 !default;
$input-bg-date: #fdecd3 !default;

/* variables correspondientes al listado */

$listado-th-check-width: 120px !default;

/* Variables correspondientes a los tabs */

$tab-background-active: #f44029 !important;
$tab-background-hover: lighten($gray-base, 65%) !important;
$tab-border-left-active: 4px solid lighten($gray-base, 55%) !important;
$tab-contenedor-border-left: 1px solid lighten($gray-base, 55%) !important;

/*  Variables correspondientes a los paneles */
$panel-inner-border: #ddd !default;
$panel-background-head: #fff !important;
$panel-background-info: #fff !important;
$panel-border-info: 2px solid #f44c29 !important;

/*  Variables correspondientes al grid */

$row-margin-top-bottom: 10px !important;

/* Variables para iconos favoritos */
$favorito-color-on: #edbe1c !important;
$favorito-color-off: lighten($gray-base, 55%) !default;
$favorito-color-hover: #edbe1c !default;

/* Variables para los input-group */
$input-group-i-color: lighten($gray-base, 40%) !default;

/* Variables para los iconos de los inputs */

$icono-input-color: #999 !important;
$icono-input-bgcolor: #fff !important;

/* Variables para el contenedor inicial */

$cont-ini-bg-color: #fff !important;
$cont-ini-border: 0px !important;
$cont-ini-color: #999 !important;
$cont-ini-font-size: 20px !important;

/* Variables para los botones */

$btn-transparent-color: $gray-base !default;
$btn-transparent-bg: transparent !default;
$btn-transparent-border: #fff !default;

$btn-transparent-color-hover: #0088cc !important;
$btn-transparent-bg-hover: #fff !important;
$btn-transparent-border-hover: #0088cc !important;

$btn-transparent-danger-color-hover: #f44029 !important;
$btn-transparent-danger-bg-hover: #fff !important;
$btn-transparent-danger-border-hover: #f44029 !important;

$btn-upload-color: #fff !default;
$btn-upload-bg: #0088cc !default;
$btn-upload-border: #0088cc !default;

$btn-upload-color-hover: #fff !important;
$btn-upload-bg-hover: #027dbb !important;
$btn-upload-border-hover: #027dbb !important;

$btn-accion-color: #fff !default;
$btn-accion-bg: #e68000 !default;
$btn-accion-border: #e68000 !default;

$btn-accion-color-hover: #fff !important;
$btn-accion-bg-hover: #d07400 !important;
$btn-accion-border-hover: #d07400 !important;

// Otras variables

$color-fondo-lectura: #ddefff;
$color-lectura: #000;
$color-borde-lectura: #b8dbf9;

// Mis estilos

body {
  font-size: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

h4 {
  margin: 5px 0px 5px 0px !important;
}

.div-lectura {
  border-top: 1px solid #b8dbf9;
  padding-top: 10px;
}

// Estilos para los contenedores
@media (min-width: 1200px) {
  .container {
    width: 1270px !important;
  }
}

.container {
  margin-bottom: 75px;
}

.container-top {
  padding-top: 112px;
}

.container-bread-btn-fixed {
  position: fixed;
  top: 36px;
  background: #fff;
  z-index: 10;
  padding-top: 20px;
}

.contenedor-datos-cita-actual {
  border: 1px solid #c8c8c8;
  background: #f2f2f2;
  padding: 10px 20px 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

// Estilos para el aspecto de texto

.negrita {
  font-weight: bold !important;
}

.color-negro {
  color: #000 !important;
}

// Estilos para espaciados

.pad-top-toolbar {
  padding-top: 18px;
}

.pad-top-10 {
  padding-top: 10px;
}

.pad-top-20 {
  padding-top: 20px;
}

// Estilos para la posición de elementos

.centrado {
  text-align: center;
}

.pos-relativo {
  position: relative;
}

// Estilos para la barra de navegación

ul.nav > li a:hover {
  background-color: $nav-bg-color-hover;
  color: $nav-color-hover;
}

ul.nav ul.dropdown-menu > li a:hover {
  background-color: $dropdown-menu-bg-color-hover;
  color: $dropdown-menu-color-hover;
}

// Estilos que para la miga de pan

.cotainer-bread-btn {
  margin-top: $breadbtn-margin-top;
}

.cotainer-bread-btn-lite {
  margin-top: $breadbtn-margin-top;
}

// Estilos para los botones

.btn-default {
  color: #494c49;
  background-color: #d6d8d6;
  border-color: #ccc;
}

.btn-default:hover {
  background-color: #b1b1b1;
}

.btn:hover {
  color: #fff !important;
}

.btn-transparent,
.btn-transparent-danger {
  color: $btn-transparent-color;
  background: $btn-transparent-bg;
  border-color: $btn-transparent-border;
}

.btn-transparent:hover {
  color: $btn-transparent-color-hover;
  background: $btn-transparent-bg-hover;
  border: 1px solid $btn-transparent-border-hover;
}

.btn-transparent-danger:hover {
  color: $btn-transparent-danger-color-hover;
  background: $btn-transparent-danger-bg-hover;
  border: 1px solid $btn-transparent-danger-border-hover;
}

.btn-accion {
  color: $btn-accion-color;
  background-color: $btn-accion-bg;
  border-color: $btn-accion-border;
}

.btn-accion:hover {
  color: $btn-accion-color-hover;
  background: $btn-accion-bg-hover;
  border: 1px solid $btn-accion-border-hover;
}

/*.btn-upload {
  @include button-variant($btn-upload-color, $btn-upload-bg, $btn-upload-border);
}*/

.btn-upload:hover {
  color: $btn-upload-color-hover;
  background: $btn-upload-bg-hover;
  border: 1px solid $btn-upload-border-hover;
}

.btn[disabled] {
  opacity: 0.25 !important;
}

.btn[disabled]:hover {
  color: #494c49 !important;
}

.btn-success[disabled]:hover {
  color: #fff !important;
}

.btn-transparent[disabled]:hover {
  color: #494c49 !important;
  border-color: #fff !important;
}

.btn-ayuda {
  background: #ccc;
  height: 15px;
  width: 15px;
  top: 21px;
  right: 15px;
  border-radius: 2px;
  color: #fff !important;
  padding: 1px 4px;
}

.btn-ayuda-checkbox {
  background: #ccc;
  height: 15px;
  width: 15px;
  top: 27px;
  border-radius: 2px;
  color: #fff !important;
  padding: 1px 4px;
  float: right;
  position: relative;
  margin-right: 20px;
}

.btn-ayuda:hover,
.btn-ayuda-checkbox:hover {
  background: #08c;
}

.btn-input {
  position: absolute !important;
  top: 22px !important;
  right: 16px !important;
  //height: 30px !important;
  //border-top-left-radius: 0px !important;
  //border-bottom-left-radius: 0px !important;
  //border: 1px solid #1b8ac6  !important;
  background: transparent;
}

.btn-resumen {
  position: absolute !important;
  top: 25px !important;
  right: 17px !important;
  //height: 30px !important;
  //border-top-left-radius: 0px !important;
  //border-bottom-left-radius: 0px !important;
  //border: 1px solid #c78e0f  !important;
  background: transparent;
}

.btn-input .fa {
  color: #1b8ac6 !important;
}

.btn-input .fa:hover {
  color: #084ca0 !important;
}

.btn-resumen .fa {
  color: #a27116 !important;
}

.btn-select {
  position: absolute !important;
  top: 21px !important;
  right: -85px !important;
  height: 30px !important;
}

.btn-select .fa {
  color: #fff !important;
}

.btn-alineado {
  margin-top: 20px;
}

// Estilos para el filtro de búsqueda

.panel-filtro {
  border: 1px solid #d6d8d6 !important;
  box-shadow: 0px 5px 15px $panel-filtro-shadow !important;
}

.panel-filtro div.panel-heading {
  color: #fff;
  font-size: 17px;
  background: $panel-filtro-heading-bg;
  border-color: $panel-filtro-border;
}

.panel-filtro div.panel-footer {
  background-color: #fff !important;
  border-top: 1px dashed $panel-inner-border !important;
}

input[type="date"] {
  background-color: $input-bg-date !important;
}

.panel-filtro h3 {
  color: #f44029 !important;
}

.mar-filtro {
  margin: 20px;
}

.filtro-lista-check input.form-control {
  margin-bottom: 20px;
}

.panel-resumen {
  padding: 0px 20px !important;
  border: 1px solid #e6c06c !important;
  background: #fbebc8 !important;
}

.panel-resumen label {
  color: #a27104 !important;
}

.panel-resumen .lectura {
  border-color: #e6c06c !important;
  background: #f9f4eb !important;
  color: #000 !important;
}

.panel-resumen div.panel-body {
  padding: 0px !important;
}

// Estilos para el listado principal

.check {
  width: $listado-th-check-width;
}

.check input[type="checkbox"] {
  margin-left: 15px !important;
}

// Estilos para los formularios

.form-control {
  font-size: 13px !important;
  min-height: 34px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.075) !important;
}

textarea.h-50 {
  height: 50px !important;
}

textarea.h-100 {
  height: 100px !important;
}

textarea.h-150 {
  height: 150px !important;
}

textarea.h-200 {
  height: 200px !important;
}

textarea.h-250 {
  height: 250px !important;
}

textarea.h-300 {
  height: 300px !important;
}

textarea.h-350 {
  height: 350px !important;
}

textarea.h-400 {
  height: 400px !important;
}

textarea.h-450 {
  height: 450px !important;
}

label {
  //color: #757575;
  font-weight: normal !important;
  color: #0088cc;
}

.label i {
  color: #fff !important;
}

// Estilos botones

.btn {
  font-size: 13px !important;
}

.btn-buscar-input {
  position: relative;
  top: 22px;
  left: -22px;
}

/*.btn-group > .btn-dinamico:first-child {
    margin-left: 4px !important;
}*/

.btn-group {
  padding: 0px 2px;
}

.btn-inline {
  display: inline-block;
}

// Estilos para los diálogos

ul {
  list-style: none;
}

// Estilos para los tabs

.contenedor-tabs {
  padding: 0px 20px 0px 0px !important;
  border-left: $tab-contenedor-border-left;
}

.nav-pills a {
  border-radius: 0px !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.nav-pills a:hover {
  background-color: $tab-background-hover;
}

.nav-pills li.active a {
  background-color: $tab-background-active;
  border-left: $tab-border-left-active;
}

.tab-toolbar {
  position: relative;
  top: -36px;
  float: right;
}

// Estilos para los acordeones

.acordion-toolbar {
  position: relative;
  top: -43px;
  left: 20px;
  float: right;
}

.acordion-toolbar .btn {
  border-left: 1px solid #fff !important;
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  padding: 4px 12px !important;
}

// Estilos para las tipografías

.seccion {
  color: #f44029;
  display: inline-block;
  font-size: 16px !important;
}

.seccion i {
  color: #f44029 !important;
}

// Estilos para los paneles

.panel-informacion {
  border: 0px !important;
  background-color: $panel-background-info;
  border: $panel-border-info;
}

.panel-copiar {
  padding: 12px;
  background: #e4e4e4;
  border-radius: 4px;
}

.panel-copiar label {
  color: #666 !important;
}

// Estilos para el pie de página (footer)

.footer {
  background: $footer-bg-color;
  width: $footer-width;
  color: $footer-color;
  height: 50px;
}

.footer a {
  color: $footer-link-color;
  text-decoration: none;
}

.footer a:hover {
  color: $footer-link-color-hover;
  text-decoration: none;
}

.footer ul.paginas {
  list-style: none;
  padding: 5px 0px;
  margin: 0px;
  float: left;
}

footer ul.paginas li {
  float: left;
  padding: 0px 2px;
}

footer ul.paginas li:first-child label,
footer ul.paginas li.valor span {
  position: relative;
  top: 12px !important;
}

footer ul.paginas li.valor {
  color: $footer-navbar-valor-color;
}

footer label {
  color: $footer-label-color;
}

span.guardado,
span.noguardado {
  font-size: $footer-glyphicon-fontsize;
}

/*span.guardado {
	@extend .glyphicon;
	@extend .glyphicon-floppy-saved;
    color: $footer-guardado-color;
}*/

/*span.noguardado {
	@extend .glyphicon;
	@extend .glyphicon-floppy-disk;
    color: $footer-noguardado-color;
}*/

.mensaje {
  position: relative;
  top: 16px !important;
  right: 30px;
  padding: 5px 15px;
  border-radius: 4px;
}

.mensaje-informacion {
  color: #fff;
  background-color: $footer-mensaje;
  margin-right: 4px;
}

.mensaje-error {
  color: #fff;
  background-color: $footer-mensaje-error;
}

.mensaje i {
  left: -35px;
  font-size: 20px;
  position: absolute;
  top: 3px;
}

.mensaje-informacion i {
  color: $footer-mensaje !important;
}

.mensaje-error i {
  color: $footer-mensaje-error !important;
}

// Estilos para el grid

.separador {
  margin-top: $row-margin-top-bottom;
  margin-bottom: $row-margin-top-bottom;
}

.separador:first-child {
  margin-top: 10px !important;
}

.raya-puntos {
  border-top: 1px dashed $separador-raya-color;
}

// Estilos para los iconos de favoritos

.favorito-on {
  color: $favorito-color-on;
}

.favorito {
  color: $favorito-color-off;
}

// Estilos para los input-group

i {
  color: $input-group-i-color;
}

// Estilos para los iconos de los inputs

.icono-input {
  position: absolute !important;
  right: 25px !important;
  top: 30px !important;
  padding-left: 10px;
  color: $icono-input-color;
  background: $icono-input-bgcolor;
}

.form-inline .icono-input {
  position: relative !important;
  right: 37px !important;
  top: 3px !important;
  padding-left: 10px;
  color: $icono-input-color;
  background: $icono-input-bgcolor;
}

div.fechaPlanificacion .icono-input {
  top: 8px !important;
}

div.fechaPlanificacion {
  padding-bottom: 10px;
}

.has-feedback .form-control {
  padding-right: 25px !important;
}

// Estilos para el formateado de código (PRE)

pre {
  overflow-x: scroll !important;
}

// Otros estilos

.cont-ini {
  margin-top: 150px;
  background: $cont-ini-bg-color;
  border: $cont-ini-border;
  font-size: $cont-ini-font-size;
  color: $cont-ini-color;
}

.cont-ini i {
  position: relative;
  top: 4px;
  font-size: 30px;
}

.titulo-aplicacion {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 101;
}

.mensaje-error-input {
  /*white-space: nowrap;*/
  position: relative;
  top: 5px;
  color: red;
}

.medio {
  position: absolute;
  top: 25px;
}

.lectura {
  //background: $color-fondo-lectura;
  min-height: 34px;
  //border-radius: 4px;
  padding: 8px;
  cursor: not-allowed;
  color: $color-lectura;
  border-top: 1px solid $color-borde-lectura;
}

.obligatorio {
  color: red !important;
  font-size: 8px !important;
  top: -4px;
  position: relative;
}

.doc-salida {
  border-top: 1px dotted #7b807b;
  padding: 0.5em;
}

/*.doc-salida:hover {
    background-color: #f0f0f0;
}*/

// estilos para el upload

// input[type="file"] {
//     display: none !important;
// }

.fa-cloud-upload {
  color: #fff !important;
}

.button-upload {
  border: 1px solid #e8e8e8;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #f5f5f5;
}

.doclist-upload {
  border: 1px solid #e8e8e8;
  border-top: 0px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  display: flex;
}

.doclist-upload div.container {
  padding: 10px;
}

.button-upload,
.doclist-upload {
  padding: 10px;
}

.row-upload {
  border-bottom: 0px dotted #e8e8e8;
  padding: 0px;
}

.row-upload span.fa {
  color: #000 !important;
}

// estilos para los avisos

.mensaje-aviso {
  background-color: #084ca0;
  color: #fff;
  cursor: pointer !important;
  width: 40px;
}

.mensaje-aviso span.numero {
  background: #ff0000;
  border-radius: 100%;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: bold;
  position: absolute;
  top: -6px;
  right: -9px;
  z-index: 1000;
  box-shadow: -2px 1px 5px #313131;
}

.ventana-aviso {
  background: #fff;
  position: absolute;
  top: -350px;
  right: 10px;
  width: 65%;
  border-radius: 4px;
  box-shadow: -3px 1px 15px rgba(135, 136, 135, 0.5);
  border: 2px solid #0088cc;
}

.ventana-aviso table td,
.ventana-aviso table th {
  padding: 10px !important;
  color: #1b8ac6;
  min-width: 60px;
  vertical-align: top;
}

.ventana-aviso table td {
  color: #000 !important;
}

.ventana-aviso table thead tr th {
  border-bottom: 1px solid #b5b5b5;
}

.scroll-avisos {
  overflow-y: auto;
  height: 230px;
  padding: 10px;
  margin-bottom: 10px;
}

.aviso-cerrar {
  float: right;
  color: #fff;
  font-size: 16px;
}

.aviso-cerrar:hover {
  color: #fff;
}

.mensaje-sinavisos {
  padding: 14% 20px;
}

.aviso-header {
  padding: 10px 20px;
  background: #08c;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.aviso-footer {
  background: #eee;
  padding: 10px;
}

// estilos pendientes de ubicar

.inactivo {
  color: red;
}

span.role-box {
  padding: 2px;
  font-weight: bold;
  border-radius: 3px;
  margin: 2px;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
}

span.role-box.admin {
  background-color: grey;
  color: white;
}

span.role-box.developer {
  background-color: darkblue;
  color: white;
}

span.role-box.tramitacion {
  background-color: lightsalmon;
  color: black;
}

span.role-box.inspeccion {
  background-color: slateblue;
  color: white;
}

span.role-box.denuncias {
  background-color: orange;
  color: black;
}

div.row.leyenda {
  margin: 20px 0;
  font-weight: bold;
  color: #a2a2a2;
}

.alert-danger span.fa {
  color: #a94442 !important;
}

.mensaje-input {
  position: relative;
  top: 30px;
}

.ui-autocomplete {
  width: 100%;
}

// Estilos para el listado de documentos de entrada

div.tabla-doc-cabecera {
  border-bottom: 2px solid #ddd;
  font-weight: bold;
  color: #000;
}

.tabla-doc-entrada div.fila:last-child {
  border-bottom: 1px dotted #c7c7c7;
  padding-bottom: 10px;
}

.btn-upload-simple {
  position: relative;
  top: -15px;
}

.doclist-upload-simple {
  width: 425px;
  position: relative;
  top: -43px;
  left: 98px;
  border: 0px;
}

.doclist-upload-simple div.simple {
  width: 100%;
}

.mensaje-dialogo {
  padding: 20px;
}

dato-item-seccion h3 {
  padding: 4px 10px;
  color: #fff;
  background: #81bfe0;
  border-radius: 3px;
  font-size: 20px;
}

/* estilos para las ventanas de ayuda */

.ventana-ayuda {
  position: fixed;
  top: 50px;
  max-width: 800px;
  right: 14px;
  background: #fff;
  box-shadow: -3px 1px 15px rgba(135, 136, 135, 0.5);
  border-radius: 4px;
  border: 2px solid #08c;
}

.ayuda-header {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  background: #0088cc;
}

.ayuda-body {
  max-height: 600px;
  overflow-y: auto;
}

.ayuda-header .fa {
  float: right;
}

.ayuda-body {
  padding: 20px 30px;
}

.ayuda-subtitulo {
  font-weight: bold;
  color: #0088cc;
  font-size: 15px;
}

h1.ayuda {
  font-size: 1.8em;
}

span.opcion-desactivada {
  color: red;
}

.avisoMetaTramite {
  cursor: pointer;
  border-radius: 5px;
  padding: 0.6em;
  margin-bottom: 1em;
  border: 1px solid #e6c06c !important;
  background: #fbebc8 !important;
  color: #a27104;
}

.avisoMetaTramite.grave {
  border-color: #ff0000 !important;
  background-color: #ffe9e9 !important;
  cursor: auto;
  color: #ca0000;
}

.avisoMetaTramite.grave .fa {
  font-size: 2em;
}

.importitem-WARNING {
  color: #ffa500;
}

.importitem-ERROR {
  color: #f00;
}

// protocolos de inspección

table.tablaProtocoloInspeccion {
  width: 100%;
}

table.tablaProtocoloInspeccion th,
table.tablaProtocoloInspeccion td {
  padding: 5px;
}

table.tablaProtocoloInspeccion th.mini,
table.tablaProtocoloInspeccion td.mini {
  width: 50px;
  text-align: center;
}

table.tablaProtocoloInspeccion tr.noEvaluada {
  color: lightgray;
}

table.tablaProtocoloInspeccion tr.deficiencia {
  color: red;
}

.autoevaluacion {
  border: 1px solid #ccc;
}

table.tablaAutoevaluacion {
  border-collapse: collapse;
  //border-style: hidden;
  width: 100%;

  thead,
  tfoot {
    background-color: #eee;
  }

  tbody {
    input[type="text"] {
      width: 40px;
    }

    input.medium {
      width: 120px;
    }

    input.large {
      width: 220px;
    }

    input.stacked {
      margin-top: 5px;
    }

    input.requisito {
      width: 25px;
    }

    i.dragHandle {
      cursor: move;
    }

    i.btnRemove {
      cursor: pointer;
    }

    td input {
      border-radius: 2px;
      border: 1px solid #ccc;
      padding: 4px;
    }
  }

  tfoot {
    input[type="text"] {
      width: 30px;
    }
  }

  th,
  td {
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
    padding: 5px;
  }

  tr.filaSeccion {
    background-color: lightyellow;

    input {
      width: 100%;
    }
  }

  tr.tieneErrores {
    background-color: #ffe0e0;
  }

  input[disabled] {
    background: transparent;
    border: 0px;
  }

  td.drag-drop i {
    color: #81bfe0 !important;
  }
}

table.tablaMinimos {
  margin-top: 1em;

  input {
    width: 100% !important;
    text-align: center;
  }
}

.agrupacion-dark-blue {
  background: #81bfe0;
  color: #fff;
}
.agrupacion-dark-orange {
  background: #e68000;
  color: #fff;
}
.light-blue {
  background: #ecf8ff;
}
.light-orange {
  background: #ffefda;
}

.pregunta-eliminar {
  background: #fdd;
}

.pregunta-eliminar i {
  color: red !important;
}

.pregunta-eliminar:hover {
  background: red;
}
.pregunta-eliminar:hover i {
  color: #fff !important;
}

// inspección de autoevaluación

table.tablaInspeccionAutoevaluacion {
  border-collapse: collapse;
  width: 100%;

  thead,
  tfoot {
    background-color: #eee;
  }

  th {
    text-align: center;
  }

  th,
  td {
    vertical-align: middle;
    border: 1px solid #ccc;
    padding: 5px;
  }

  td {
    width: 40px;
  }

  td.criterio {
    width: 100%;
  }

  td.incumpleRequisito {
    background-color: lightcoral;
  }

  tbody {
    td.nombreSeccion {
      background-color: lightyellow;
      font-weight: bold;
    }
  }

  input[disabled] {
    background: transparent;
    border: 0px;
  }
}

//estilos para el log del menú developer
pre {
  outline: 2px solid #ccc;
  padding: 5px;
  margin: 5px;
}
.string {
  color: green;
}
.number {
  color: darkorange;
}
.boolean {
  color: blue;
}
.null {
  color: magenta;
}
.key {
  color: red;
}

// estilos loading

.icono-loading {
  position: fixed;
  right: 20px;
  top: 50px;
  z-index: 10000;
  width: 75px;
}

/*.icono-loading {
    background: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    transition: all .5s;
    z-index: 10000;
}

.icono-loading img {
    width: 6%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    box-shadow: 4px 4px 10px #c8c8c8;
    border-radius: 10px;
}*/

div#modificacioncita {
  .ui-datepicker-prev,
  .ui-datepicker-next {
    display: none !important;
  }
}

// controles de usuario

span.userControls {
  font-size: 14px;
  font-weight: normal;
}

span.userControls span.fa-user {
  color: #a1dbff !important;
}

tr.sombreado {
  color: blue;
}

// estilos incrustados en un grid de planificación desde el componente padre

span.red {
  color: red;
}

.tooltip-cabecera {
  background: #81bfe0;
  font-weight: bold;
  padding: 4px;
  color: #fff;
}

.tooltip-contenedor {
  padding: 10px;
  color: #000;
}

.tooltip-pad {
  padding: 4px;
  z-index: 10; /* tooltip aparece encima de otros elementos */
}

.tooltip-label {
  color: #666 !important;
}

// tabla agenda recurso

.tabla-agenda-recurso table {
  margin-top: 10px;
}

.tabla-agenda-recurso table,
td,
tr {
  border-color: #c8c8c8 !important;
}

.tabla-agenda-recurso tr.header td {
  background: #deeef9;
  color: #1b8ac6 !important;
}

.tabla-agenda-recurso button.btn-agenda-recurso {
  float: right;
}

.tabla-agenda-recurso .nombre-recurso {
  position: relative;
  top: 5px;
  color: #c77900;
}

.tabla-agenda-recurso .nombre-recurso span.fa {
  color: #fff;
  background: #c77900;
  padding: 6px 8px;
  border-radius: 4px;
}

// horario agenda

.fila-horario label {
  display: none !important;
}

.fila-horario input {
  position: relative;
  bottom: 7px;
}

.fila-horario .lectura {
  position: relative;
  top: -8px;
  border: 0px;
}

// árbol usuarios

.titulo-arbol,
.subtitulo-arbol li:first-child {
  font-weight: bold;
  color: #1b8ac6;
  padding: 10px 0px;
}

.subtitulo-arbol li:first-child {
  color: #000;
}

.subtitulo-arbol li:last-child {
  padding-bottom: 10px;
}

// estilos diálogos

.cerrar-dialogo {
  position: absolute;
  right: 15px;
  top: 20px;
}

/* Estilos desplegable de acciones */

// Hack para poder utilizar los "dropdown" de Bootstrap3 sin necesidad de traerse el JS de la librería
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: -1px;
  margin-left: 4px;
}

.desplegable-accion {
  color: #fff !important;
  background-color: #e68000 !important;
  padding: 10px 20px 10px 20px !important;
}

.desplegable-accion a {
  color: #fff !important;
  display: block !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap;
  padding: 2px 0px;
}

.desplegable-accion a:hover span.fa {
  color: #864a00 !important;
}

/* editor HTML */
div.editor > div.ui-widget-header {
  border: 1px solid #d9d9d9 !important;
  background: #f6f7f9 !important;
  color: #1b1d1f !important;
  font-weight: normal !important;
}
/* editor HTML . Customizacion textos */
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "Introduïu l'enllaç:" !important;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  content: "Desa" !important;
}
.ql-snow .ql-tooltip::before {
  content: "Aneu a l'enllaç:" !important;
}
.ql-snow .ql-tooltip a.ql-action::after {
  content: "Edita" !important;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: "Elimina" !important;
}

.visor-imagen {
  padding: 7px;
  background: #cccccc;
  display: inline-block;
  border-radius: 5px;
  float: right;
}

.visor-imagen img {
  border: 2px solid #fff;
  border-radius: 5px;
  width: 150px;
}

.imagen-zoom img {
  max-width: 500px;
  box-shadow: 4px 4px 15px #494c49;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 10;
  border: 10px solid #fff;
  border-radius: 5px;
}

.icono-img {
  position: absolute;
  cursor: pointer;
  color: #000;
  padding: 7px 7px 7px 10px;
}

.icono-img-zoom {
  bottom: 7px;
  right: 22px;
  background: #cccccc;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  font-size: 16px;
}

.icono-img-cerrar {
  top: 7px;
  right: 7px;
  background: #fff;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-left-radius: 5px;
  z-index: 100;
  font-size: 17px;
}

// Estilos para los uploads

.doclist-upload-simple {
  width: 425px;
  position: relative;
  top: -43px;
  left: 98px;
  border: 0px;
}

.doclist-upload-simple div.simple {
  width: 100%;
}

.fa-cloud-upload {
  color: #fff !important;
}

.button-upload {
  border: 1px solid #e8e8e8;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #f5f5f5;
}

.doclist-upload {
  display: flex;
}

.doclist-upload div.container {
  padding: 10px;
}

.button-upload,
.doclist-upload {
  padding: 10px;
}

.row-upload {
  border-bottom: 0px dotted #e8e8e8;
  padding: 0px;
}

.row-upload span.fa {
  color: #000 !important;
}

.upload-contenedor {
  margin-top: 5px;
}

// Selector de orden en los filtros

.panel-filtro div.panel-footer.filter-order {
  margin: 0 !important;
  padding: 0px 15px;
}

.panel-filtro div.panel-footer.filter-order input {
  margin-right: 3px;
}

.panel-filtro div.panel-footer.filter-order span {
  margin-right: 1em;
}

// Estilos para fuentes del bit-editor

.ql-font span[data-label="Sans Serif"]::before {
  font-family: Arial, Helvetica, sans-serif;
}
.ql-font span[data-label="Serif"]::before {
  font-family: "Times New Roman", Times, serif;
}
.ql-font span[data-label="Monospace"]::before {
  font-family: "Courier New", Courier, monospace;
}
.ql-font-sansserif {
  font-family: Arial, Helvetica, sans-serif;
}
.ql-font-serif {
  font-family: "Times New Roman", Times, serif;
}
.ql-font-monospace {
  font-family: "Courier New", Courier, monospace;
}