/**
 * ymk-dialog — estilos base del <dialog> genérico
 * KB: —
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */

.ymk-dialog {
    --ymk-dialog-blur: 2px;
    border: none;
    border-radius: 0.5rem;
    padding: 0;
    max-width: min(560px, 92vw);
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    position: relative;
    animation: ymk-dialog-in .2s ease;
}

.ymk-dialog::backdrop {
    background: rgba(0,0,0,.45);
    backdrop-filter: blur( var(--ymk-dialog-blur) );
    animation: ymk-backdrop-in .2s ease;
}

/* ── Anchos ───────────────────────────────────────────────────────────────── */

.ymk-dialog.ymk-dialog--wide {
    max-width: min(960px, 96vw);
}

.ymk-dialog.ymk-dialog--full {
    max-width: 100vw;
    width: 100vw;
    border-radius: 0;
    margin: 0;
    inset: 0;
    max-height: 100dvh;
    overflow-y: auto;
}

@keyframes ymk-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

@keyframes ymk-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Botón cerrar ─────────────────────────────────────────────────────────── */

.ymk-dialog__close {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    opacity: .5;
    font-size: 1.4rem;
    cursor: pointer;
    transition: opacity .15s;
    line-height: 1;
}

.ymk-dialog__close:hover { opacity: 1; }

/* ── Cuerpo — sin estilos propios, el contenido manda ────────────────────── */

.ymk-dialog__body { margin: 0; padding: 0; }

.ymk-dialog__error {
    text-align: center;
    opacity: .6;
    padding: 1.5rem 0;
    font-size: .9rem;
}

/* ── Loader ───────────────────────────────────────────────────────────────── */

.ymk-dialog__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 0;
}

.ymk-dialog__loader span {
    display: block;
    width: 2rem;
    height: 2rem;
    border: 3px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .35;
    animation: ymk-spin .7s linear infinite;
}

@keyframes ymk-spin {
    to { transform: rotate(360deg); }
}

/* ── Lateral izquierdo ────────────────────────────────────────────────────── */

.ymk-dialog.ymk-dialog--lateral-left {
    max-width: none;
    width: min(calc(100dvh * 2 / 3), 92vw);
    height: fit-content;
    max-height: 100dvh;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 0;
    inset: 0 auto 0 0;
    animation: ymk-dialog-left-in .25s ease;
    overflow-y: auto;
}

@keyframes ymk-dialog-left-in {
    from { opacity: 0; transform: translateX(-100%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Lateral derecho ──────────────────────────────────────────────────────── */

.ymk-dialog.ymk-dialog--lateral-right {
    max-width: none;
    width: min(calc(100dvh * 2 / 3), 92vw);
    height: fit-content;
    max-height: 100dvh;
    border-radius: 0.5rem 0 0 0.5rem;
    margin-block: 0;
    margin-inline-start: auto;
    margin-inline-end: 0;
    animation: ymk-dialog-right-in .25s ease;
    overflow-y: auto;
}

@keyframes ymk-dialog-right-in {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Bottom sheet ─────────────────────────────────────────────────────────── */

.ymk-dialog.ymk-dialog--bottom {
    max-width: none;
    width: 100%;
    border-radius: 0.75rem 0.75rem 0 0;
    margin: auto auto 0 auto;
    inset: auto 0 0 0;
    animation: ymk-dialog-bottom-in .25s ease;
    max-height: 80dvh;
    overflow-y: auto;
}

@keyframes ymk-dialog-bottom-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}