/* Formulario de creación y edición de grupos */

/*
 * TOKENS DE DISEÑO
 */
:root {
    /* Layout dinámico. Las dos primeras variables también las actualiza el JS. */
    --artist-site-header-height: 58px;
    --artist-form-sticky-offset: 170px;
    --artist-layout-max-width: 1320px;
    --artist-layout-sidebar-width: 15rem;
    --artist-layout-page-padding: clamp(1rem, 3vw, 2.5rem);
    --artist-layout-card-padding: clamp(1rem, 2vw, 1.45rem);
    --artist-layout-upload-width: 22rem;
    --artist-layout-gallery-width: 58rem;
    --artist-layout-danger-width: 36rem;
    /* Escala tipográfica */
    --artist-text-xs: .65rem;
    --artist-text-sm: .72rem;
    --artist-text-md: .8rem;
    --artist-text-base: .9rem;
    --artist-text-lg: 1rem;
    --artist-text-xl: 1.25rem;
    --artist-text-page-title: clamp(1.45rem, 2vw, 2rem);
    --artist-font-weight-medium: 650;
    --artist-font-weight-bold: 800;
    --artist-font-weight-heavy: 850;
    --artist-line-height-tight: 1.2;
    --artist-line-height-title: 1.35;
    --artist-line-height-body: 1.45;
    --artist-line-height-input: 1.55;
    /* Espaciado */
    --artist-space-1: .1rem;
    --artist-space-2: .25rem;
    --artist-space-3: .35rem;
    --artist-space-4: .45rem;
    --artist-space-5: .55rem;
    --artist-space-6: .65rem;
    --artist-space-7: .75rem;
    --artist-space-8: .85rem;
    --artist-space-9: 1rem;
    --artist-space-10: 1.25rem;
    --artist-space-11: 1.35rem;
    /* Radios */
    --artist-radius-sm: .4rem;
    --artist-radius-md: .55rem;
    --artist-radius-lg: .65rem;
    --artist-radius-xl: .75rem;
    --artist-radius-card: .85rem;
    --artist-radius-pill: 999px;
    /* Controles */
    --artist-control-min-height: 3rem;
    --artist-action-min-height: 2.45rem;
    --artist-file-min-height: 2.5rem;
    --artist-step-button-min-height: 2.8rem;
    --artist-step-button-min-width: 10.5rem;
    --artist-step-copy-max-width: 12rem;
    /* Canales RGB: cambia el color base y conserva todas sus transparencias. */
    --artist-rgb-primary: 111 182 255;
    --artist-rgb-primary-focus: 103 175 247;
    --artist-rgb-selected: 78 203 168;
    --artist-rgb-danger: 255 129 137;
    --artist-rgb-white: 255 255 255;
    --artist-rgb-black: 0 0 0;
    --artist-rgb-overlay: 5 12 22;
    /* Texto y estados */
    --artist-color-white: #fff;
    --artist-color-text: #eef5fc;
    --artist-color-text-soft: #b9c9da;
    --artist-color-text-muted: #8298af;
    --artist-color-text-on-light: #102033;
    --artist-color-placeholder: #8ca3ba;
    --artist-color-primary: #6fb6ff;
    --artist-color-primary-soft: #9dccff;
    --artist-color-primary-link: #8fc2ff;
    --artist-color-primary-text: #cce3ff;
    --artist-color-success: #5fe0aa;
    --artist-color-success-soft: #8af0cc;
    --artist-color-warning: #e9c46a;
    --artist-color-warning-soft: #ffd978;
    --artist-color-danger: #ff8189;
    --artist-color-danger-soft: #ffb0b5;
    --artist-color-danger-text: #ffacb1;
    /* Superficies */
    --artist-surface-form: #0c1826;
    --artist-surface-header: #091522;
    --artist-surface-sidebar: #0e1b2a;
    --artist-surface-deep: #07111d;
    --artist-surface-item: #091625;
    --artist-surface-button: #0d2032;
    --artist-surface-action: #0a1725;
    --artist-surface-control: #17283a;
    --artist-surface-control-hover: #1d3147;
    --artist-surface-control-focus: #203850;
    --artist-surface-control-disabled: #0d1825;
    --artist-surface-selected: #102a2b;
    --artist-surface-light: #eef4fa;
    --artist-surface-light-hover: #f8fbfe;
    --artist-surface-light-disabled: #152536;
    --artist-surface-button-disabled: #122234;
    /* Bordes y acciones */
    --artist-control-border: #36536f;
    --artist-control-border-hover: #4b6d8e;
    --artist-control-light-border: #91a9c1;
    --artist-control-light-border-hover: #b7c9da;
    --artist-control-disabled-border: #35495d;
    --artist-control-disabled-text: #72869a;
    --artist-action-primary: #347ed0;
    --artist-action-primary-hover: #3e91e8;
    --artist-action-primary-dark: #2868b7;
    --artist-action-primary-border: #4c9df0;
    --artist-action-primary-border-hover: #9acaff;
    --artist-action-disabled-border: #2a4057;
    --artist-action-disabled-text: #63788d;
    --artist-step-active: #2a6fae;
    /* Efectos */
    --artist-border: rgb(var(--artist-rgb-primary) / 24%);
    --artist-border-soft: rgb(var(--artist-rgb-primary) / 13%);
    --artist-shadow-header: 0 14px 30px rgb(var(--artist-rgb-black) / 24%);
    --artist-shadow-card: 0 18px 38px rgb(var(--artist-rgb-black) / 18%);
    --artist-shadow-panel: 0 12px 28px rgb(var(--artist-rgb-black) / 16%);
    --artist-shadow-dock: 0 12px 30px rgb(var(--artist-rgb-black) / 38%);
    --artist-focus-ring: 0 0 0 3px rgb(var(--artist-rgb-primary) / 13%);
    --artist-transition-fast: .16s ease;
    /* Alias semánticos */
    --artist-font-page-title: var(--artist-text-page-title);
    --artist-font-section-title: var(--artist-text-lg);
    --artist-font-control: var(--artist-text-base);
    --artist-font-help: var(--artist-text-md);
    --artist-font-counter: var(--artist-text-sm);
    --artist-font-label: var(--artist-text-sm);
    --artist-font-meta: var(--artist-text-xs);
    --artist-font-button: var(--artist-text-sm);
    --artist-font-button-strong: var(--artist-text-md);
}

/* Página */
.artist-create-page {
    overflow: visible;
}

.artist-create-page>.container {
    width: 100%;
    max-width: none;
    padding-inline: var(--artist-layout-page-padding);
}

.artist-create-head {
    position: sticky;
    top: var(--artist-site-header-height);
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--artist-space-9);
    margin: 0 auto 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--artist-border-soft);
    border-top: 0;
    border-radius: 0 0 .8rem .8rem;
    background: var(--artist-surface-header);
    box-shadow: var(--artist-shadow-header);
}

.artist-create-head>div:first-child {
    min-width: 0;
}

.artist-create-head h1 {
    margin: 0;
    color: var(--artist-color-white);
    font-size: var(--artist-font-page-title);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.artist-create-head p {
    max-width: var(--artist-layout-gallery-width);
    margin: .4rem 0 0;
    color: var(--artist-color-text-soft);
    font-size: var(--artist-text-base);
    line-height: var(--artist-line-height-body);
}

.artist-create-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: var(--artist-space-6);
}

.artist-create-head-actions .artist-btn,
.artist-create-head-actions .artist-dashboard-help {
    width: auto;
    min-height: 2.55rem;
    margin: 0;
    padding: .55rem .85rem;
    white-space: nowrap;
}

.artist-create-shell-with-sidebar {
    display: grid;
    grid-template-columns: minmax(13.5rem, var(--artist-layout-sidebar-width)) minmax(0, 1fr);
    align-items: start;
    gap: var(--artist-space-9);
    width: 100%;
    max-width: var(--artist-layout-max-width);
    margin-inline: auto;
}

.artist-form-column {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: var(--artist-space-7);
}

.artist-create-card {
    min-width: 0;
    padding: var(--artist-layout-card-padding);
    border: 1px solid var(--artist-border);
    border-radius: var(--artist-radius-card);
    background: var(--artist-surface-form);
    box-shadow: var(--artist-shadow-card);
}

/* Índice */
.artist-form-sidebar {
    position: sticky;
    top: calc(var(--artist-form-sticky-offset) + 1rem);
    z-index: 25;
    max-height: calc(100vh - var(--artist-form-sticky-offset) - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

.artist-form-index {
    padding: .75rem;
    border: 1px solid var(--artist-border);
    border-radius: var(--artist-radius-xl);
    background: var(--artist-surface-sidebar);
    box-shadow: var(--artist-shadow-panel);
}

.artist-progress-menu {
    display: grid;
    gap: var(--artist-space-3);
}

.artist-progress-menu-head {
    display: grid;
    gap: .15rem;
    margin-bottom: .35rem;
    padding: .15rem .25rem .6rem;
    border-bottom: 1px solid var(--artist-border-soft);
}

.artist-progress-menu-head>strong,
.artist-progress-menu-head [data-progress-percentage] {
    color: var(--artist-color-white);
}

.artist-progress-menu-head>strong {
    font-size: var(--artist-text-md);
}

.artist-progress-menu-head span {
    color: var(--artist-color-text-muted);
    font-size: var(--artist-text-sm);
}

.artist-progress-menu-head [data-progress-percentage] {
    font-size: var(--artist-text-base);
}

.artist-progress-menu a[data-form-step-link] {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--artist-space-4);
    min-height: var(--artist-control-min-height);
    padding: .45rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--artist-radius-md);
    color: var(--artist-color-text-soft);
    text-decoration: none;
}

.artist-progress-menu a[data-form-step-link]:hover,
.artist-progress-menu a[data-form-step-link]:focus-visible {
    border-color: rgb(var(--artist-rgb-primary) / 34%);
    background: rgb(var(--artist-rgb-primary) / 9%);
    color: var(--artist-color-white);
    outline: none;
}

.artist-progress-menu a[data-form-step-link].is-active {
    border-color: rgb(var(--artist-rgb-primary) / 65%);
    background: rgb(var(--artist-rgb-primary) / 16%);
    color: var(--artist-color-white);
    box-shadow: inset 3px 0 0 var(--artist-color-primary);
}

.artist-progress-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid var(--artist-border);
    border-radius: var(--artist-radius-pill);
    background: var(--artist-surface-deep);
    color: var(--artist-color-text-soft);
    font-size: var(--artist-text-xs);
    font-weight: var(--artist-font-weight-bold);
}

.artist-progress-menu a.is-active .artist-progress-step-number {
    border-color: var(--artist-color-primary);
    background: var(--artist-step-active);
    color: var(--artist-color-white);
}

.artist-progress-step-copy {
    display: grid;
    min-width: 0;
    gap: var(--artist-space-1);
}

.artist-progress-step-copy>span,
.artist-progress-step-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-progress-step-copy>span {
    color: inherit;
    font-size: var(--artist-text-sm);
    font-weight: var(--artist-font-weight-bold);
}

.artist-progress-step-copy small {
    color: var(--artist-color-text-muted);
    font-size: var(--artist-text-xs);
}

.artist-progress-menu a[data-form-step-link]>strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 1.3rem;
    padding: .1rem .32rem;
    border: 1px solid var(--artist-border);
    border-radius: var(--artist-radius-pill);
    background: var(--artist-surface-deep);
    color: var(--artist-color-text-soft);
    font-size: var(--artist-text-xs);
}

.artist-progress-menu a.is-required-missing>strong {
    color: var(--artist-color-warning-soft);
}

.artist-progress-menu a.is-required-ok>strong,
.artist-progress-menu a.is-complete>strong {
    color: var(--artist-color-success);
}

.artist-create-info-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--artist-space-5);
    margin-top: .35rem;
    padding: .55rem .5rem;
    color: var(--artist-color-primary-link);
    font-size: var(--artist-text-sm);
    font-weight: var(--artist-font-weight-bold);
    text-decoration: none;
}

.artist-progress-mobile-toggle {
    display: none;
}

/* Formulario */
.artist-group-form {
    min-width: 0;
}

.artist-group-form [hidden] {
    display: none !important;
}

.artist-hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.artist-form-step {
    min-width: 0;
}

.artist-form-step:focus {
    outline: none;
}

.artist-form-section {
    min-width: 0;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--artist-border-soft);
}

.artist-form-section:first-child {
    padding-top: 0;
}

.artist-form-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.artist-form-title {
    display: block;
    margin: 0;
    color: var(--artist-color-white);
    font-family: inherit;
    font-size: var(--artist-font-section-title);
    font-weight: var(--artist-font-weight-bold);
    line-height: var(--artist-line-height-title);
}

.artist-required-mark {
    color: var(--artist-color-danger);
}

.artist-optional-mark {
    color: var(--artist-color-text-muted);
    font-size: .75em;
    font-weight: var(--artist-font-weight-medium);
}

.artist-form-help {
    display: block;
    width: 100%;
    max-width: none;
    margin: .18rem 0 .22rem;
    color: var(--artist-color-text-muted);
    font-size: var(--artist-font-help);
    line-height: 1.4;
    text-align: left;
}

.artist-counter {
    display: block;
    margin: 0 0 .55rem;
    color: var(--artist-color-text-muted);
    font-size: var(--artist-font-counter);
    font-weight: var(--artist-font-weight-medium);
    line-height: var(--artist-line-height-tight);
    text-align: left;
}

.artist-counter.is-under-min {
    color: var(--artist-color-warning);
}

.artist-counter.is-valid,
.artist-counter.is-at-max {
    color: var(--artist-color-success);
}

.artist-counter.is-valid::before,
.artist-counter.is-at-max::before {
    content: "✓ ";
    font-weight: var(--artist-font-weight-heavy);
}

.artist-counter.is-over-max {
    color: var(--artist-color-danger);
}

.artist-counter.is-over-max::before {
    content: "! ";
    font-weight: var(--artist-font-weight-heavy);
}

.artist-counter--small {
    margin: .2rem 0 .45rem;
    font-size: var(--artist-text-xs);
}

.artist-form-note {
    margin: .8rem 0 0;
    color: var(--artist-color-text-muted);
    font-size: var(--artist-text-xs);
    line-height: var(--artist-line-height-body);
}

.artist-control {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--artist-control-min-height);
    padding: .65rem .8rem;
    border: 1px solid var(--artist-control-border);
    border-radius: var(--artist-radius-md);
    background: var(--artist-surface-control);
    color: var(--artist-color-text);
    font: inherit;
    font-size: var(--artist-font-control);
}

.artist-control:hover {
    border-color: var(--artist-control-border-hover);
    background: var(--artist-surface-control-hover);
}

.artist-control:focus {
    border-color: var(--artist-color-primary);
    background: var(--artist-surface-control-focus);
    box-shadow: var(--artist-focus-ring);
    outline: none;
}

.artist-control::placeholder {
    color: var(--artist-color-placeholder);
    opacity: 1;
}

.artist-control:disabled {
    border-color: var(--artist-border-soft);
    background: var(--artist-surface-control-disabled);
    color: var(--artist-color-text-muted);
    opacity: .65;
    cursor: not-allowed;
}

.artist-control--textarea {
    min-height: 8rem;
    line-height: var(--artist-line-height-input);
    resize: vertical;
}

.artist-control--compact {
    min-height: 6rem;
}

.artist-control--long {
    min-height: 13rem;
}

.artist-group-form input:-webkit-autofill,
.artist-group-form input:-webkit-autofill:hover,
.artist-group-form input:-webkit-autofill:focus,
.artist-group-form textarea:-webkit-autofill,
.artist-group-form select:-webkit-autofill {
    -webkit-text-fill-color: var(--artist-color-text) !important;
    caret-color: var(--artist-color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--artist-surface-control) inset !important;
}

/* Selecciones */
.artist-choice-selected {
    display: grid;
    gap: var(--artist-space-5);
    margin-bottom: .8rem;
}

.artist-choice-selected:empty {
    display: none;
}

.artist-choice-item {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--artist-space-4);
    min-height: 2.65rem;
    padding: .45rem .5rem;
    border: 1px solid rgb(var(--artist-rgb-selected) / 42%);
    border-radius: var(--artist-radius-md);
    background: var(--artist-surface-selected);
    box-shadow: inset 3px 0 0 rgb(var(--artist-rgb-selected) / 72%);
}

.artist-choice-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: var(--artist-radius-pill);
    background: rgb(var(--artist-rgb-selected) / 18%);
    color: var(--artist-color-success-soft);
    font-size: var(--artist-text-xs);
    font-weight: var(--artist-font-weight-bold);
}

.artist-choice-item strong {
    min-width: 0;
    color: var(--artist-color-white);
    font-size: var(--artist-text-sm);
    overflow-wrap: anywhere;
}

.artist-choice-item button,
.artist-gallery-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 .45rem;
    border: 1px solid rgb(var(--artist-rgb-primary) / 20%);
    border-radius: var(--artist-radius-sm);
    background: var(--artist-surface-action);
    color: var(--artist-color-primary-link);
    font: inherit;
    font-size: var(--artist-text-xs);
    cursor: pointer;
}

.artist-choice-item button:hover,
.artist-choice-item button:focus-visible,
.artist-gallery-actions button:hover,
.artist-gallery-actions button:focus-visible {
    border-color: var(--artist-color-primary);
    color: var(--artist-color-white);
    outline: none;
}

.artist-choice-item [data-choice-remove],
.artist-gallery-actions [data-gallery-remove] {
    border-color: rgb(var(--artist-rgb-danger) / 28%);
    color: var(--artist-color-danger-soft);
}

.artist-choice-item button:disabled,
.artist-gallery-actions button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.artist-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.artist-add-row .artist-control {
    border-color: var(--artist-control-light-border);
    background: var(--artist-surface-light);
    color: var(--artist-color-text-on-light);
}

.artist-add-row .artist-control:hover {
    border-color: var(--artist-control-light-border-hover);
    background: var(--artist-surface-light-hover);
}

.artist-add-row .artist-control:focus {
    border-color: var(--artist-color-primary);
    background: var(--artist-color-white);
    box-shadow: 0 0 0 3px rgb(var(--artist-rgb-primary-focus) / 20%);
}

.artist-add-row .artist-control:disabled {
    border-color: var(--artist-control-disabled-border);
    background: var(--artist-surface-light-disabled);
    color: var(--artist-control-disabled-text);
    opacity: 1;
}

.artist-add-row .artist-control option {
    background: var(--artist-color-white);
    color: var(--artist-color-text-on-light);
}

.artist-action-button,
.artist-remove-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--artist-action-min-height);
    padding: .5rem .75rem;
    border: 1px solid rgb(var(--artist-rgb-primary) / 42%);
    border-radius: var(--artist-radius-md);
    background: rgb(var(--artist-rgb-black));
    color: var(--artist-color-primary-soft);
    font: inherit;
    font-size: var(--artist-font-button);
    font-weight: var(--artist-font-weight-bold);
    cursor: pointer;
}

.artist-action-button:hover,
.artist-action-button:focus-visible {
    border-color: var(--artist-color-primary);
    color: var(--artist-color-white);
    outline: none;
}

.artist-action-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.artist-remove-button {
    justify-self: start;
    border-color: rgb(var(--artist-rgb-danger) / 32%);
    background: rgb(var(--artist-rgb-danger) / 7%);
    color: var(--artist-color-danger-soft);
}

.artist-check-list {
    display: grid;
    gap: var(--artist-space-5);
    margin-top: .8rem;
}

.artist-check {
    display: flex;
    align-items: flex-start;
    gap: var(--artist-space-5);
    color: var(--artist-color-text-soft);
    font-size: var(--artist-text-sm);
    line-height: 1.4;
    cursor: pointer;
}

.artist-check input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: .08rem;
    accent-color: var(--artist-action-primary);
}

/* Imágenes */
.artist-upload {
    position: relative;
    display: grid;
    gap: var(--artist-space-5);
    width: min(100%, var(--artist-layout-upload-width));
}

.artist-upload-preview,
.artist-gallery-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border: 1px dashed rgb(var(--artist-rgb-primary) / 30%);
    border-radius: var(--artist-radius-lg);
    background: var(--artist-surface-deep);
    color: var(--artist-color-text-muted);
    font-size: var(--artist-text-sm);
}

.artist-upload-preview {
    aspect-ratio: 1 / 1;
}

.artist-gallery-preview {
    aspect-ratio: 4 / 3;
}

.artist-upload-preview img,
.artist-gallery-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.artist-file-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--artist-file-min-height);
    padding: .5rem .75rem;
    overflow: hidden;
    border: 1px solid rgb(var(--artist-rgb-primary) / 42%);
    border-radius: var(--artist-radius-md);
    background: rgb(var(--artist-rgb-primary) / 9%);
    color: var(--artist-color-primary-soft);
    font-size: var(--artist-font-button);
    font-weight: var(--artist-font-weight-bold);
    cursor: pointer;
}

.artist-file-button:hover,
.artist-file-button:focus-within {
    border-color: var(--artist-color-primary);
    color: var(--artist-color-white);
}

.artist-file-button input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.artist-image-clear {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 2;
    min-height: 1.9rem;
    padding: .25rem .55rem;
    border: 1px solid rgb(var(--artist-rgb-danger) / 40%);
    border-radius: var(--artist-radius-pill);
    background: rgb(var(--artist-rgb-overlay) / 90%);
    color: var(--artist-color-danger-soft);
    font: inherit;
    font-size: var(--artist-text-xs);
    cursor: pointer;
}

.artist-input-error {
    margin: .45rem 0 0;
    color: var(--artist-color-danger-text);
    font-size: var(--artist-text-xs);
    line-height: 1.4;
}

.artist-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--artist-space-7);
    max-width: var(--artist-layout-gallery-width);
    margin-bottom: .75rem;
}

.artist-gallery-item {
    position: relative;
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--artist-border-soft);
    border-radius: var(--artist-radius-lg);
    background: var(--artist-surface-item);
}

.artist-gallery-item--main {
    border-color: rgb(var(--artist-rgb-primary) / 38%);
}

.artist-media-badge {
    position: absolute;
    top: .95rem;
    left: .95rem;
    z-index: 2;
    display: inline-flex;
    padding: .25rem .5rem;
    border: 1px solid rgb(var(--artist-rgb-white) / 24%);
    border-radius: var(--artist-radius-pill);
    background: rgb(var(--artist-rgb-overlay) / 78%);
    color: var(--artist-color-white);
    font-size: var(--artist-text-xs);
    font-weight: var(--artist-font-weight-bold);
}

.artist-subfield {
    display: block;
    margin: .65rem 0 0;
    color: var(--artist-color-text);
    font-size: var(--artist-font-label);
    font-weight: var(--artist-font-weight-bold);
}

.artist-gallery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--artist-space-3);
    margin-top: .55rem;
}

/* Vídeos */
.artist-video-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--artist-space-6);
    padding: .75rem 0;
    border-top: 1px solid var(--artist-border-soft);
}

.artist-video-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.artist-video-item .artist-subfield {
    min-width: 0;
    margin: 0;
}

.artist-video-item .artist-control {
    margin-top: .4rem;
}

/* FAQs */
.artist-item-list {
    display: grid;
    gap: var(--artist-space-8);
    margin-bottom: .75rem;
}

.artist-faq-item {
    padding: .85rem;
    border: 1px solid var(--artist-border-soft);
    border-radius: var(--artist-radius-lg);
    background: var(--artist-surface-item);
}

.artist-faq-item h3 {
    margin: 0 0 .7rem;
    color: var(--artist-color-white);
    font-family: inherit;
    font-size: var(--artist-text-md);
}

.artist-faq-item .artist-control+.artist-subfield {
    margin-top: .75rem;
}

.artist-faq-item .artist-remove-button {
    margin-top: .7rem;
}

/* Revisión */
.artist-review-list {
    display: grid;
    gap: var(--artist-space-5);
}

.artist-review-item {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--artist-space-6);
    padding: .7rem .75rem;
    border: 1px solid var(--artist-border-soft);
    border-radius: var(--artist-radius-md);
    background: var(--artist-surface-item);
}

.artist-review-item>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--artist-radius-pill);
    background: rgb(var(--artist-rgb-primary) / 14%);
    color: var(--artist-color-primary-soft);
    font-size: var(--artist-text-xs);
    font-weight: var(--artist-font-weight-bold);
}

.artist-review-item strong,
.artist-review-item small {
    display: block;
}

.artist-review-item strong {
    color: var(--artist-color-white);
    font-size: var(--artist-text-sm);
}

.artist-review-item small {
    margin-top: .1rem;
    color: var(--artist-color-text-muted);
    font-size: var(--artist-text-xs);
}

.artist-review-item b {
    color: var(--artist-color-text-muted);
    font-size: var(--artist-text-xs);
    text-align: right;
}

.artist-review-item[data-status="complete"] b {
    color: var(--artist-color-success);
}

.artist-review-item[data-status="pending"] b {
    color: var(--artist-color-danger);
}

/* Eliminar grupo */
.artist-delete-section {
    padding-top: 1rem;
}

.artist-delete-disclosure {
    overflow: hidden;
    border: 1px solid var(--artist-border-soft);
    border-radius: var(--artist-radius-md);
    background: var(--artist-surface-item);
}

.artist-delete-disclosure summary {
    padding: .7rem .8rem;
    color: var(--artist-color-text-muted);
    font-size: var(--artist-text-sm);
    font-weight: var(--artist-font-weight-bold);
    cursor: pointer;
}

.artist-delete-disclosure[open] {
    border-color: rgb(var(--artist-rgb-danger) / 32%);
}

.artist-delete-disclosure[open] summary {
    border-bottom: 1px solid rgb(var(--artist-rgb-danger) / 20%);
    color: var(--artist-color-danger);
}

.artist-danger-zone {
    display: grid;
    gap: var(--artist-space-6);
    box-sizing: border-box;
    width: 100%;
    max-width: var(--artist-layout-danger-width);
    min-width: 0;
    padding: .85rem;
}

.artist-danger-zone p {
    margin: 0;
    color: var(--artist-color-text-muted);
    font-size: var(--artist-text-sm);
    line-height: 1.5;
}

.artist-danger-zone .artist-btn-danger {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
}

/* Navegación inferior */
.artist-form-step-dock {
    position: sticky;
    bottom: max(.65rem, env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--artist-space-7);
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid rgb(var(--artist-rgb-primary) / 28%);
    border-radius: var(--artist-radius-xl);
    background: var(--artist-surface-header);
    box-shadow: var(--artist-shadow-dock);
}

.artist-form-step-dock [hidden] {
    display: none !important;
}

.artist-form-step-dock-slot {
    display: flex;
    align-items: center;
    min-width: 0;
}

.artist-form-step-dock-slot--previous {
    justify-content: flex-start;
}

.artist-form-step-dock-slot--next {
    justify-content: flex-end;
}

.artist-form-step-position {
    display: grid;
    gap: .04rem;
    min-width: 0;
    text-align: center;
}

.artist-form-step-position small {
    color: var(--artist-color-text-muted);
    font-size: var(--artist-font-counter);
    line-height: var(--artist-line-height-tight);
}

.artist-form-step-position strong {
    overflow: hidden;
    color: var(--artist-color-white);
    font-size: var(--artist-font-control);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-form-step-button-copy small {
    font-size: var(--artist-font-meta);
    line-height: 1.15;
    opacity: .82;
}

.artist-form-step-button-copy strong {
    max-width: var(--artist-step-copy-max-width);
    overflow: hidden;
    font-size: var(--artist-font-button-strong);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-form-step-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--artist-space-4);
    min-width: var(--artist-step-button-min-width);
    min-height: var(--artist-step-button-min-height);
    padding: .5rem .8rem;
    border: 1px solid rgb(var(--artist-rgb-primary) / 45%);
    border-radius: var(--artist-radius-md);
    background: var(--artist-surface-button);
    color: var(--artist-color-primary-text);
    font: inherit;
    cursor: pointer;
}

.artist-form-step-button--primary {
    border-color: var(--artist-action-primary-border);
    background: linear-gradient(180deg, var(--artist-action-primary), var(--artist-action-primary-dark));
    color: var(--artist-color-white);
}

.artist-form-step-button:hover,
.artist-form-step-button:focus-visible {
    border-color: var(--artist-color-primary);
    color: var(--artist-color-white);
    outline: none;
}

.artist-form-step-button-copy {
    display: grid;
    min-width: 0;
    text-align: center;
}

[id^="form-"] {
    scroll-margin-top: calc(var(--artist-form-sticky-offset) + 1rem);
}

/* Responsive */

@media (max-width: 980px) {
    .artist-create-shell-with-sidebar {
        grid-template-columns: 1fr;
    }

    .artist-form-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .artist-progress-menu {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--artist-space-3);
    }

    .artist-progress-menu-head,
    .artist-create-info-link {
        grid-column: 1 / -1;
    }

    .artist-progress-menu a[data-form-step-link] {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 3.2rem;
    }

    .artist-progress-menu a[data-form-step-link]>strong {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 760px) {
    :root {
        --artist-layout-page-padding: .7rem;
        --artist-layout-card-padding: .85rem;
        --artist-control-min-height: 3.1rem;
        --artist-font-control: var(--artist-text-lg);
        --artist-font-page-title: var(--artist-text-xl);
    }

    .artist-create-head {
        position: static;
        align-items: flex-start;
        gap: var(--artist-space-7);
        margin-bottom: .75rem;
        padding: .75rem .8rem;
        border-top: 1px solid var(--artist-border-soft);
        border-radius: var(--artist-radius-xl);
        box-shadow: none;
    }

    .artist-create-head p {
        font-size: var(--artist-text-sm);
    }

    .artist-progress-menu {
        grid-template-columns: 1fr;
    }

    .artist-progress-menu-head {
        display: none;
    }

    .artist-progress-mobile-toggle[hidden] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: var(--artist-space-6);
        width: 100%;
        min-height: 3.4rem;
        padding: .6rem .7rem;
        border: 1px solid var(--artist-border);
        border-radius: var(--artist-radius-md);
        background: var(--artist-surface-item);
        color: var(--artist-color-text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .artist-progress-mobile-toggle-copy {
        display: grid;
        min-width: 0;
        gap: var(--artist-space-1);
    }

    .artist-progress-mobile-toggle-copy small {
        color: var(--artist-color-text-muted);
        font-size: var(--artist-text-xs);
    }

    .artist-progress-mobile-toggle-copy strong {
        overflow: hidden;
        color: var(--artist-color-white);
        font-size: var(--artist-text-sm);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .artist-progress-mobile-toggle-step {
        color: var(--artist-color-text-soft);
        font-size: var(--artist-text-xs);
        white-space: nowrap;
    }

    .artist-progress-mobile-toggle>i {
        color: var(--artist-color-text-muted);
        font-size: var(--artist-text-sm);
        transition: transform var(--artist-transition-fast);
    }

    .artist-progress-menu.is-mobile-open .artist-progress-mobile-toggle>i {
        transform: rotate(180deg);
    }

    .artist-progress-menu:not(.is-mobile-open) a[data-form-step-link],
    .artist-progress-menu:not(.is-mobile-open) .artist-create-info-link {
        display: none;
    }

    .artist-progress-menu a[data-form-step-link] {
        grid-template-columns: 1.8rem minmax(0, 1fr) auto;
        min-height: 2.85rem;
    }

    .artist-progress-menu a[data-form-step-link]>strong {
        grid-column: auto;
        justify-self: auto;
    }

    .artist-form-section {
        padding-block: 1.05rem;
    }

    select.artist-control {
        padding-block: .7rem;
    }

    .artist-choice-item {
        grid-template-columns: 1.55rem minmax(0, 1fr) auto auto auto;
        align-items: start;
    }

    .artist-add-row,
    .artist-gallery-grid {
        grid-template-columns: 1fr;
    }

    .artist-review-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .artist-review-item b {
        grid-column: 2;
        text-align: left;
    }

    .artist-form-step-dock {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--artist-space-4);
        padding: .48rem;
    }

    .artist-form-step-position {
        grid-row: 1;
        grid-column: 1 / -1;
        padding-bottom: .35rem;
        border-bottom: 1px solid var(--artist-border-soft);
    }

    .artist-form-step-dock-slot,
    .artist-form-step-button {
        width: 100%;
        min-width: 0;
    }

    .artist-form-step-dock-slot--previous {
        grid-column: 1;
    }

    .artist-form-step-dock-slot--next {
        grid-column: 2;
    }

    .artist-form-step-button-copy strong {
        max-width: none;
        white-space: normal;
    }

    .artist-video-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .artist-video-item .artist-remove-button {
        justify-self: start;
    }
}

@media (max-width: 520px) {
    :root {
        --artist-font-page-title: 1.1rem;
        --artist-step-button-min-height: 2.65rem;
    }

    .artist-create-head {
        gap: var(--artist-space-4);
        padding: .6rem .65rem;
    }

    .artist-create-head p {
        font-size: var(--artist-text-xs);
    }

    .artist-create-head-actions .artist-dashboard-help,
    .artist-create-head-actions .artist-btn {
        min-height: 2.15rem;
        padding-inline: .55rem;
        font-size: var(--artist-text-xs);
    }

    .artist-form-step-dock {
        bottom: max(.45rem, env(safe-area-inset-bottom, 0px));
    }

    .artist-form-step-button {
        padding-inline: .5rem;
    }
}

/* Validación guiada del formulario de grupos */

.artist-form-step-dock-validation[hidden] {
    display: none !important;
}

.artist-form-step-dock-validation {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--artist-space-9);
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid rgb(var(--artist-rgb-danger) / 42%);
    border-radius: var(--artist-radius-md);
    background: rgb(var(--artist-rgb-danger) / 10%);
}

.artist-form-step-dock-validation>div {
    display: grid;
    gap: var(--artist-space-1);
    min-width: 0;
}

.artist-form-step-dock-validation strong {
    color: var(--artist-color-white);
    font-size: var(--artist-text-sm);
}

.artist-form-step-dock-validation span {
    overflow: hidden;
    color: var(--artist-color-text-soft);
    font-size: var(--artist-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-form-step-dock-validation button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--artist-space-4);
    min-height: 2.35rem;
    padding: .5rem .75rem;
    border: 1px solid rgb(var(--artist-rgb-danger) / 46%);
    border-radius: var(--artist-radius-sm);
    background: rgb(var(--artist-rgb-danger) / 14%);
    color: var(--artist-color-white);
    font: inherit;
    font-size: var(--artist-text-sm);
    font-weight: var(--artist-font-weight-bold);
    white-space: nowrap;
    cursor: pointer;
}

.artist-form-step-dock-validation button:hover,
.artist-form-step-dock-validation button:focus-visible {
    border-color: rgb(var(--artist-rgb-danger) / 70%);
    background: rgb(var(--artist-rgb-danger) / 22%);
    outline: none;
}

.artist-form-section.has-validation-error {
    border-color: rgb(var(--artist-rgb-danger) / 52%);
    background: linear-gradient(90deg,
            rgb(var(--artist-rgb-danger) / 7%),
            transparent 28rem);
}

.artist-form-section [aria-invalid="true"] {
    border-color: rgb(var(--artist-rgb-danger) / 70%);
    box-shadow: 0 0 0 3px rgb(var(--artist-rgb-danger) / 10%);
}

.artist-form-inline-error {
    margin: .7rem 0 0;
    padding: .55rem .7rem;
    border-left: 3px solid var(--artist-color-danger);
    border-radius: 0 var(--artist-radius-sm) var(--artist-radius-sm) 0;
    background: rgb(var(--artist-rgb-danger) / 10%);
    color: var(--artist-color-danger);
    font-size: var(--artist-text-sm);
    font-weight: var(--artist-font-weight-bold);
    line-height: var(--artist-line-height-body);
}

@media (max-width: 620px) {
    .artist-form-step-dock-validation {
        align-items: stretch;
        flex-direction: column;
        gap: var(--artist-space-5);
        padding: .65rem;
    }

    .artist-form-step-dock-validation button {
        width: 100%;
    }

    .artist-form-step-dock-validation span {
        white-space: normal;
    }
}