/* Visualización del detalle de un registro: fila expandible, inline, panel lateral, dividido, panel inferior, modal y página completa.
   Genérico (prefijo dr-): lo usa cualquier pantalla con EasyGrid. Solo usa los tokens --easy-*, así sigue el tema elegido.
   Esquinas: ningún radio fijo, todo sale de --easy-radio-base (escala sm / base / lg). */

.dr-layout {
    --dr-radio: var(--easy-radio-base, 8px);
    --dr-radio-sm: calc(var(--dr-radio) * .75);
    --dr-radio-lg: calc(var(--dr-radio) * 1.5);
    --dr-borde: var(--easy-color-borde, #e5e7eb);
    --dr-tenue: var(--easy-color-texto-tenue, #6b7280);
    --dr-texto: var(--easy-color-texto, #1f2430);
    --dr-superficie: var(--easy-color-superficie, #fff);
    --dr-primario: var(--easy-color-primario, #940404);
    --dr-overlay: var(--easy-color-overlay, rgba(0, 0, 0, .45));
    flex: 1 1 100%;
    min-width: 0;
}

/* ---------- Tarjeta de detalle ---------- */
.dr {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--easy-color-superficie, #fff);
    color: var(--easy-color-texto, #1f2430);
    border: 1px solid var(--easy-color-borde, #e5e7eb);
    border-radius: var(--easy-radio-base, 8px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.dr-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--easy-color-borde, #e5e7eb);
}
.dr-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--easy-color-primario-suave, #fbeaea);
    color: var(--easy-color-primario, #940404);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
}
.dr-id { flex: 1 1 auto; min-width: 120px; }
/* Botones que el contenido pone en el encabezado (p. ej. Guardar y Cancelar), a la altura del título */
.dr-acciones-form { display: flex; align-items: center; gap: 8px; flex: none; }
.dr-head { flex-wrap: wrap; row-gap: 8px; }
/* El desplazamiento es del panel de la pestaña, no de la tarjeta: el encabezado (con Guardar y Cancelar) y la tira de pestañas siempre se ven.
   Cadena de alturas: .dr (alto limitado) > .dr-cuerpo > .easy-tabs > .easy-tabpanels (aquí está el scroll). */
.dr { min-height: 0; }
.dr-head { flex: none; }
.dr-cuerpo > .easy-tabs { flex: 1 1 auto; min-height: 0; }
.dr-cuerpo .easy-tablist { flex: none; }
.dr-cuerpo .easy-tabpanels { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Inline: la tarjeta vive dentro del scroll del grid, así que se limita su alto para que el panel de la pestaña sea el que se desplaza */
.easy-grid-detail .dr { max-height: max(340px, calc(100vh - 360px)); }
@media (max-width: 700px) {
    .dr-acciones-form { order: 5; width: 100%; justify-content: flex-end; }
}
.dr-nombre { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-sub { margin: 2px 0 0; font-size: .85rem; color: var(--easy-color-texto-tenue, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-acciones { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.dr-cuerpo { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 4px 8px 8px; }

.dr-compacto .dr-head { padding: 10px 14px; }
.dr-compacto .dr-avatar { width: 38px; height: 38px; font-size: .9rem; }
.dr-compacto .dr-nombre { font-size: .98rem; }

/* ---------- Avisos (barra del grid) ---------- */
.dr-hint { font-size: .8rem; color: var(--easy-color-texto-tenue, #6b7280); }

/* ---------- Fila activa (variantes con panel) ---------- */
.easy-grid-row.dr-activa { --easy-grid-row-bg: var(--easy-color-seleccion, #fbeaea); }
.easy-grid-row.dr-activa > .easy-grid-cell:first-child { box-shadow: inset 3px 0 0 var(--easy-color-primario, #940404); }

/* ---------- Disposición ---------- */
.dr-main { min-width: 0; }
.dr-v-dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 42%); gap: 12px; align-items: start; }
.dr-v-dividido .dr-side { position: sticky; top: 8px; height: calc(100vh - 32px); min-height: 0; display: flex; flex-direction: column; }
.dr-v-dividido .dr-side > .dr { flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Panel inferior: la tabla y el detalle se reparten a la mitad el alto útil de la ventana (la ventana menos ~150px de encabezado y márgenes).
   La tabla no baja de 300px para que el menú del selector de detalle (que abre dentro de ella) se vea completo. */
.dr-v-inferior { --dr-mitad: max(300px, calc((100vh - 150px) / 2 - 5px)); }
.dr-v-inferior .dr-bottom { margin-top: 10px; height: var(--dr-mitad); display: flex; flex-direction: column; }
.dr-v-inferior .dr-bottom > .dr { flex: 1 1 auto; min-height: 0; overflow: hidden; }

.dr-vacio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
    color: var(--easy-color-texto-tenue, #6b7280);
    border: 1px dashed var(--easy-color-borde, #e5e7eb);
    border-radius: var(--easy-radio-base, 8px);
    background: var(--easy-color-superficie-alterna, #f9fafb);
}
.dr-vacio strong { color: var(--easy-color-texto, #1f2430); font-weight: 600; }

/* Capas: por encima del encabezado y el menú del shell (z-index hasta 1061) para que el panel no quede tapado; por debajo de los popups de EasyCombo y EasyGrid (9998 en adelante) */
.dr-scrim { position: fixed; inset: 0; z-index: 1100; background: var(--easy-color-overlay, rgba(0, 0, 0, .45)); animation: dr-fade .15s ease-out; }
.dr-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1110;
    width: min(980px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--easy-color-superficie, #fff);
    box-shadow: -14px 0 36px rgba(0, 0, 0, .22);
    animation: dr-slide .2s ease-out;
    outline: 0;
}
.dr-drawer > .dr { flex: 1 1 auto; min-height: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
.dr-modal-back { position: fixed; inset: 0; z-index: 1110; display: grid; place-items: center; padding: 16px; background: var(--easy-color-overlay, rgba(0, 0, 0, .45)); animation: dr-fade .15s ease-out; }
.dr-modal {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    height: min(86vh, 820px);
    border-radius: calc(var(--easy-radio-base, 8px) * 1.5);
    overflow: hidden;
    background: var(--easy-color-superficie, #fff);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    animation: dr-pop .18s ease-out;
    outline: 0;
}
.dr-modal > .dr { flex: 1 1 auto; min-height: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }

/* ---------- Página completa ---------- */
.dr-pagina { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.dr-migas { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--easy-color-texto-tenue, #6b7280); font-size: .9rem; }
.dr-migas b { color: var(--easy-color-texto, #1f2430); font-weight: 600; }

@keyframes dr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dr-slide { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dr-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 1100px) {
    .dr-v-dividido { grid-template-columns: minmax(0, 1fr); }
    .dr-v-dividido .dr-side { position: static; height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
    .dr-scrim, .dr-drawer, .dr-modal-back, .dr-modal { animation: none; }
}