.input-layout {
    display: flex;
    flex-direction: column;
    background-color: var(--lumo-contrast-5pct);
    max-height: 400px;
    padding: var(--lumo-space-s);
    margin-top: var(--lumo-space-l);
    margin-inline: auto;
    max-width: 768px;
    box-shadow: var(--custom-box-shadow);
    box-sizing: border-box;
    row-gap: var(--lumo-space-s);
    column-gap: var(--lumo-space-s);
    border-radius: var(--lumo-border-radius-l);
    --lumo-utility-border-color: var(--lumo-contrast-5pct);
    border: 1px var(--lumo-utility-border-style,solid) var(--lumo-utility-border-color,var(--lumo-contrast-10pct));
}

.vertical-area {
    cursor: pointer;
    height: 350px;
    width: 100%;
    padding: 0px;
    overflow: auto;
}

.attachment {
    cursor: pointer;
    color: var(--lumo-secondary-text-color);
    padding: 0;
    margin-block: 0;
    border-radius: 9999px;
    --lumo-utility-border-color: var(--lumo-contrast-20pct);
    border: 1px var(--lumo-utility-border-style,solid) var(--lumo-utility-border-color,var(--lumo-contrast-10pct));
    background-color: transparent;
}

.validate-button {
    cursor: pointer;
    padding: var(--lumo-space-s);
    margin: 0;
    border-radius: var(--lumo-border-radius-l);
}

.anchor-downloader {
    display: block;
    width: 100%;
    text-decoration: none !important;
}

.actions {
    justify-content: justify-between;
    align-items: center;
}

.close-button-hover:hover {
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 15px;
  transition: background-color 0.2s ease;
}

.copy-button-hover:hover {
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 15px;
  transition: background-color 0.2s ease;
  --lumo-button-size: var(lumo-size-small);
}

.icon-hover-effect {
    padding: 4px;
    border-radius: 50%; /
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.icon-hover-effect:hover {
    background-color: rgba(128, 128, 128, 0.2); /* Grisáceo con transparencia */
}

vaadin-menu-bar-item.menu-item-no-checkmark::part(checkmark)::before {
  display: none;
}

vaadin-menu-bar-item.menu-item-no-checkmark {
  padding-left: var(--lumo-space-s);
  justify-content: flex-start;
}

vaadin-menu-bar-item.delete:hover {
  background-color: var(--red-error-color);
  color: #d50018;
}

.div-files-wrapper {
    display: flex;
    align-items: start;
    width: 100%;
}

.fixed-menu {
    flex-shrink: 0;
}

.search-animation {
    display: inline-flex;
    align-items: center;
    min-width: 4.5ch;
}

.search-animation::after {
    content: "";
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid var(--lumo-primary-color);
    animation: typingCycleFixed 6s infinite;
}

@keyframes typingCycleFixed {
    0%   { content: " .xml"; width: 0;    border-color: transparent;}
    5%   { content: " .xml"; width: 0;    border-color: var(--lumo-primary-color);}
    20%  { content: " .xml"; width: 4ch; }
    40%  { content: " .xml"; width: 4ch; } /* Pausa para leer */
    50%  { content: " .xml"; width: 0; }   /* Borra */

    51%  { content: " .xsd"; width: 0;    border-color: transparent;}
    55%  { content: " .xsd"; width: 0;    border-color: var(--lumo-primary-color);}
    70%  { content: " .xsd"; width: 4ch; }
    90%  { content: " .xsd"; width: 4ch; }
    100% { content: " .xsd"; width: 0;    border-color: transparent;}
}

vaadin-button.button-search {
    width: 300px;
    border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
    cursor: pointer;
    color: var(--lumo-secondary-text-color);
}

vaadin-button.button-search::part(prefix) {
    margin-inline-end: auto;
}