/* All raster materials are unmodified approved PNGs. Sections preserve corners. */
.metal-dialog {
  color-scheme: dark; color: #ead6b0; background: transparent; border: 0; padding: 0;
  width: min(360px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: none; max-height: min(85dvh, calc(var(--modal-view-height, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  position: fixed; top: calc(var(--modal-view-top, 0px) + env(safe-area-inset-top));
  bottom: env(safe-area-inset-bottom); margin: auto; overflow: hidden;
  font: 16px/1.4 Arial, Helvetica, sans-serif;
}
.metal-dialog::backdrop { background: rgb(0 0 0 / .7); }
.metal-dialog.modal-layout[open], .metal-dialog > .modal-layout { display: flex; flex-direction: column; min-height: 0; }
.metal-dialog > .modal-layout { max-height: inherit; }
.metal-dialog .modal-heading {
  flex: none; margin: 0; min-height: 56px; padding: 18px 29px 8px; font-size: 22px; line-height: 1.3;
  background: url('./assets/modals/modal_superior.png') center top / 100% auto no-repeat;
}
.metal-dialog .modal-body {
  min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #887047 #191d1f;
  padding: 4px 5px 8px; overflow-wrap: anywhere;
  border: solid transparent; border-width: 0 24px;
  border-image: url('./assets/modals/modal_panel_fuente.png') 352 95 434 95 fill / 0 24px stretch;
}
.metal-dialog .modal-footer {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px;
  margin: 0; min-height: 82px;
  border: solid transparent; border-width: 8px 24px 28px; padding: 3px 0 0;
  border-image: url('./assets/modals/modal_inferior.png') 30 95 110 95 fill / 8px 24px 28px 24px stretch;
}
.metal-dialog label { display: block; margin: 12px 0; }
.metal-dialog p { margin: 9px 0; }
.metal-dialog button {
  position: relative; color: #f5e5bf; font: 600 14px/1.25 Arial, sans-serif;
  min-height: 44px; min-width: 44px; padding: 8px 12px; cursor: pointer;
  background: transparent; border: 9px solid transparent; padding: 2px 5px;
  border-image: url('./assets/modals/boton_primario_latón_recortado.png') 100 120 fill / 9px 10px stretch;
}
.metal-dialog button.modal-primary {
  border-image-source: url('./assets/modals/boton_secundario_metal_recortado.png');
}
.metal-dialog button:active:not(:disabled) { transform: translateY(1px); }
.metal-dialog button:disabled { opacity: .5; cursor: default; }
.metal-dialog :focus-visible { outline: 2px solid #76dfd1; outline-offset: 2px; }
.metal-dialog select {
  appearance: none; display: block; width: 100%; min-height: 48px; margin-top: 5px;
  color: #ead6b0; font: 16px Arial, sans-serif; padding: 10px 42px 10px 15px;
  border: 0; border-radius: 0; background: url('./assets/modals/selector_desplegable_recortado.png') center / 100% auto no-repeat;
}
.metal-dialog option { background: #171b1e; color: #ead6b0; }
.metal-select { display: block; }
.metal-dialog .metal-select-button {
  appearance: none; display: block; width: 100%; min-height: 48px; margin-top: 5px;
  color: #ead6b0; font: 16px/1.35 Arial, sans-serif; text-align: left;
  padding: 10px 42px 10px 15px; border: 0; border-image: none; border-radius: 0;
  background: url('./assets/modals/selector_desplegable_recortado.png') center / 100% auto no-repeat;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.metal-dialog .metal-select-button:active:not(:disabled) { transform: none; }
.metal-select-options {
  display: block; max-height: min(240px, 30dvh); margin: 4px 0 8px; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #887047 #191d1f;
  border: 9px solid transparent;
  border-image: url('./assets/modals/campo_entrada_recortado.png') 90 fill / 9px stretch;
}
.metal-select-options [role='option'] {
  position: relative; display: block; min-height: 44px; padding: 11px 8px 11px 29px;
  color: #ead6b0; font: 16px/1.4 Arial, sans-serif; cursor: pointer;
  white-space: normal; word-break: normal; overflow-wrap: break-word; hyphens: none;
}
.metal-select-options [aria-selected='true']::before { content: '✓'; position: absolute; left: 7px; color: #9cefe1; }
.metal-select-options .is-active { background-color: rgb(118 223 209 / .15); outline: 1px solid #76dfd1; outline-offset: -2px; }
.metal-select-options [aria-disabled='true'] { opacity: .5; cursor: default; }
.metal-dialog textarea, .metal-dialog input:not([type='checkbox']):not([type='file']) {
  width: 100%; min-width: 0; box-sizing: border-box; color: #ead6b0; font: 16px/1.4 Arial, sans-serif;
  background: transparent; border: 9px solid transparent; padding: 4px;
  border-image: url('./assets/modals/campo_entrada_recortado.png') 90 fill / 9px stretch;
}
.metal-dialog textarea { resize: vertical; max-height: 32dvh; }
.metal-dialog input[type='file'] { width: 100%; font-size: 16px; }
.metal-dialog input[type='file']::file-selector-button { color: #ead6b0; background: #24292c; border: 1px solid #887047; padding: 9px; }
.metal-dialog .modal-checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.metal-dialog input[type='checkbox'] { appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 2px solid #92703c; border-radius: 4px; background: #080b0c; }
.metal-dialog input[type='checkbox']:checked::after { content: '✓'; color: #9cefe1; display: block; line-height: 16px; text-align: center; }
.metal-dialog a { color: #a0e2d8; }
.metal-dialog [role='alert'] { color: #ffb5a7; }
.metal-dialog details { margin-block: 12px; }
.metal-dialog summary { cursor: pointer; min-height: 44px; padding-top: 10px; }
#filters-dialog .modal-footer { flex-wrap: nowrap; gap: 5px; }
#filters-dialog .modal-footer button { flex: 1 1 auto; white-space: nowrap; font-size: 13px; padding-inline: 2px; }
#filters-dialog .modal-body { padding-top: 2px; padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .metal-dialog * { scroll-behavior: auto; transition: none; } }