@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700&display=swap");

:root {
  --orca-ink: #3a3c6a;
  --orca-purple: #4b3c69;
  --orca-red: #c8102e;
  --orca-active: #c84210;
  --shiny-fade-opacity: 1;
}

html,
body {
  font-family: "Fira Sans", sans-serif !important;
  color: var(--orca-ink) !important;
}

/* Shiny deja los outputs en 0.3 mientras recalcula. Los controles
   tienen que seguir leyéndose. */
#menu_buttons.recalculating,
#controls.recalculating,
#viz_icons.recalculating,
#descargas.recalculating,
#controls .recalculating,
.shinybusy-auto-recalculating {
  opacity: 1 !important;
}

.load-container {
  z-index: auto !important;
}

.layout-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.layout-panels {
  background-color: #fbfdfe;
  flex-grow: 1;
  flex-shrink: 1;
  overflow-x: auto;
  padding: 1rem;
}

.app-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.panel {
  background: #ffffff;
  box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-right: 1.3rem;
  overflow-y: auto;
  padding: 0;
}

.panel-body {
  flex-grow: 1;
  margin-top: 1rem;
  padding: 0 2rem;
}

.top-malibu {
  border-top: 0;
  width: 280px;
}

.head-viz {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#menu_buttons {
  display: flex;
  margin-bottom: 10%;
}

.basic_active {
  color: #ffffff !important;
  background-color: var(--orca-purple) !important;
  border-color: var(--orca-purple) !important;
  opacity: 1 !important;
}

.control-label,
.form-control,
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  color: var(--orca-ink) !important;
  opacity: 1 !important;
}

.bootstrap-select > .dropdown-toggle {
  background-color: #ffffff !important;
}

.control-label[for="apre_cierreId"] {
  background-color: var(--orca-purple) !important;
  color: #ffffff !important;
  padding: 0.5rem !important;
}

.buttons-group {
  display: flex !important;
  gap: 20px !important;
  padding: 0 !important;
}

.buttons-group .button-style {
  width: 30px !important;
  height: 30px !important;
  opacity: 1 !important;
}

.buttons-group .button-container {
  height: fit-content !important;
  border-radius: 11px !important;
}

.buttons-group .button-style .image-style,
.buttons-group .button-style.active-btn .image-style {
  filter: none;
  opacity: 1;
}

.buttons-group .button-style.active-btn,
.buttons-group .button-style.active-btn:hover {
  background: var(--orca-active) !important;
  background-color: var(--orca-active) !important;
  color: #ffffff !important;
  filter: none !important;
}

.button-checkmark {
  display: none;
}

.viz-nucleo,
.viz-center,
.viz-center > div {
  position: relative;
}

.viz-nucleo {
  border: 1px solid #c1c0c0;
  margin: 1% 0;
  padding: 5px;
}

.viz-center {
  border: 1px solid #c1c0c0;
  margin: 5% 0;
  padding: 5px;
  width: 320px;
}

.section_0 {
  margin-top: 3%;
}

.map-title {
  font-weight: 700;
}

.dropdown-toggle {
  border: 1px solid #1b365d;
  border-radius: 11px;
}

.dropdown-action-trigger {
  background-color: var(--orca-red) !important;
  font-family: "Fira Sans", sans-serif !important;
  letter-spacing: 1px !important;
  color: #fafafa !important;
  opacity: 1 !important;
}

.dropdown-action-item {
  font-family: "Fira Sans", sans-serif !important;
  letter-spacing: -0.2px !important;
  color: #212121 !important;
}

.dropdown-action-list {
  width: max-content !important;
}

#treemap_extra,
#treemap_extra_apreh {
  margin-top: 4%;
}

#extra_viz_1-downMap,
#extra_viz_1-downTree,
#extra_viz_1-downBar {
  float: right;
}

#descargas,
#download_map-dropdown,
#download_tree-dropdown,
#download_tree_apreh-dropdown {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  margin: 0;
}

#download_map-dropdown,
#download_tree-dropdown,
#download_tree_apreh-dropdown {
  width: 50px !important;
}

.img-down {
  width: 15px;
  height: 15px;
}

.footer {
  margin: 15px 20px;
}

/* Se oculta el enlace a Leaflet. El crédito de OpenStreetMap es
   obligatorio según su política de uso de teselas. */
.leaflet-control-attribution a:first-child {
  display: none;
}