/* Diálogos (EasyComponentes/Dialogos): EasyDialog y EasyDialogosHost. Usa el elemento <dialog> modal del navegador.
   Solo tokens --easy-* con valores por omisión. Esquinas: salen de --easy-radio-base con la escala de la librería (ver easygrid.css). */

.easy-dialog {
    box-sizing: border-box;
    width: min(var(--easy-dialog-ancho, 640px), calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--easy-color-campo-texto, #1f2430);
    background: var(--easy-color-popup, #fff);
    border: 1px solid var(--easy-color-borde, #e5e7eb);
    border-radius: calc(var(--easy-radio-base, 8px) * 1.5);
    box-shadow: var(--easy-sombra-popup, 0 10px 30px rgba(0, 0, 0, .3));
    font-family: var(--easy-fuente-base, inherit);
    font-size: calc(14px * var(--easy-escala-fuente, 1));
    outline: 0;
}
.easy-dialog[open] { display: flex; flex-direction: column; animation: easy-dialog-entra var(--easy-duracion-entrada, .22s) ease-out; }
.easy-dialog::backdrop { background: var(--easy-color-overlay, rgba(0, 0, 0, .45)); animation: easy-dialog-fondo var(--easy-duracion-entrada, .22s) ease-out; }

/* Con un diálogo abierto la página de atrás no se desplaza */
html:has(dialog.easy-dialog[open]) { overflow: hidden; }

.easy-dialog-compacto { --easy-dialog-ancho: 440px; }

/* Panel lateral */
.easy-dialog-drawer {
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border-width: 0 0 0 1px;
    border-radius: calc(var(--easy-radio-base, 8px) * 1.5) 0 0 calc(var(--easy-radio-base, 8px) * 1.5);
}
.easy-dialog-drawer[open] { animation-name: easy-dialog-lateral; }

.easy-dialog-cab {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--easy-color-borde, #e5e7eb);
}
.easy-dialog-titulo { margin: 0; font-size: calc(16px * var(--easy-escala-fuente, 1)); font-weight: 700; }

/* Un EditForm (u otro contenedor directo) puede envolver cuerpo y pie */
.easy-dialog > form,
.easy-dialog > .easy-dialog-contenido { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.easy-dialog-cuerpo { flex: 1; min-height: 0; padding: 16px 18px; overflow: auto; }
.easy-dialog-pie {
    flex: none;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--easy-color-borde, #e5e7eb);
    background: var(--easy-color-superficie-alterna, transparent);
}
.easy-dialog-mensaje { margin: 0 0 8px; line-height: 1.45; }

/* Rejilla de 12 columnas para los campos del formulario */
.easy-dialog-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.easy-dialog-c2 { grid-column: span 2; }
.easy-dialog-c3 { grid-column: span 3; }
.easy-dialog-c4 { grid-column: span 4; }
.easy-dialog-c5 { grid-column: span 5; }
.easy-dialog-c6 { grid-column: span 6; }
.easy-dialog-c8 { grid-column: span 8; }
.easy-dialog-c9 { grid-column: span 9; }
.easy-dialog-c12 { grid-column: span 12; }
.easy-dialog-sec { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--easy-color-borde, #e5e7eb); font-size: calc(13px * var(--easy-escala-fuente, 1)); font-weight: 700; color: var(--easy-color-texto-tenue, #6b7280); }

@media (max-width: 640px) {
    .easy-dialog-grid > [class*="easy-dialog-c"] { grid-column: span 12; }
}

@keyframes easy-dialog-entra { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes easy-dialog-lateral { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes easy-dialog-fondo { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .easy-dialog[open], .easy-dialog::backdrop { animation: none; }
}