/* ============================================================================
   overlays.css — Capas flotantes: menús desplegables, paleta de comandos,
   modales, avisos flotantes y panel lateral de detalle.

   Son globales (y no CSS aislado de componente) porque el módulo
   wwwroot/js/ms-ui.js los coloca con position:fixed fuera de su contenedor.
   ========================================================================== */

/* ============================================================================
   MENÚS DESPLEGABLES
   ========================================================================== */
/* Contenedor de anclaje: el panel se posiciona respecto a su disparador,
   así no hace falta recolocarlo con JS ni sacarlo de su sitio en el DOM
   (que es justo lo que rompería el repintado de Blazor). */
.ms-pop { position: relative; }

.ms-menu {
  position: absolute; z-index: 1060;
  top: calc(100% + 8px); right: 0;
  isolation: isolate;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 24px));
  padding: 7px;
  background-color: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--ms-dur) var(--ms-ease), transform var(--ms-dur) var(--ms-ease), visibility var(--ms-dur);
}
.ms-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Alineaciones y anchos */
.ms-menu--start { left: 0; right: auto; }
.ms-menu--wide  { min-width: 320px; }

@media (max-width: 575.98px) {
  .ms-menu, .ms-menu--start { left: auto; right: 0; min-width: min(300px, calc(100vw - 24px)); }
}

.ms-menu__label {
  padding: 8px 10px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ms-text-3);
}
.ms-menu__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px 10px;
  font-size: 13px; font-weight: 700; color: var(--ms-text);
}
.ms-menu__item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: var(--ms-radius-sm);
  color: var(--ms-text-2); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background var(--ms-dur) var(--ms-ease), color var(--ms-dur) var(--ms-ease);
}
.ms-menu__item:hover { background: var(--ms-surface-2); color: var(--ms-text); }
.ms-menu__item > .ms-icon { color: var(--ms-text-3); }
.ms-menu__item.is-selected { background: var(--ms-brand-soft); color: var(--ms-text); font-weight: 600; }
.ms-menu__item.is-selected .ms-menu__check { opacity: 1; }
.ms-menu__check { margin-left: auto; opacity: 0; color: var(--ms-brand); }
.ms-menu__item--danger { color: var(--ms-danger); }
.ms-menu__item--danger > .ms-icon { color: var(--ms-danger); }
.ms-menu__item--danger:hover { background: var(--ms-danger-bg); color: var(--ms-danger); }
.ms-menu__item--link { color: var(--ms-brand); font-weight: 600; }
.ms-menu__item--link > .ms-icon { color: var(--ms-brand); }
.ms-menu__item--center { justify-content: center; }
.ms-menu__sep { height: 1px; background: var(--ms-border-soft); margin: 6px 4px; }
.ms-menu__meta { padding: 10px; display: flex; align-items: center; gap: 11px; }
.ms-menu__meta b { display: block; font-size: 13px; font-weight: 600; color: var(--ms-text); }
.ms-menu__meta > span:not(.ms-avatar) { display: block; }
.ms-menu__meta > span:not(.ms-avatar) span { display: block; font-size: 11px; color: var(--ms-text-3); }
/* El avatar con iniciales no debe heredar el estilo de texto del meta */
.ms-menu__meta .ms-avatar { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: calc(var(--size) * .36); line-height: 1; }

/* Texto de dos líneas dentro de un elemento de menú */
.ms-menu__twoline { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ms-menu__twoline b { font-size: 12.5px; font-weight: 600; color: var(--ms-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-menu__twoline span { font-size: 10.5px; color: var(--ms-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Notificación dentro de un menú */
.ms-menu__notif { align-items: flex-start; }
.ms-menu__notif .ms-menu__twoline b,
.ms-menu__notif .ms-menu__twoline span { white-space: normal; }
.ms-menu__time { margin-left: auto; flex: none; font-size: 10.5px; color: var(--ms-text-3); }

/* ============================================================================
   CAPA DE SUPERPOSICIÓN + PALETA DE COMANDOS
   ========================================================================== */
.ms-overlay {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; justify-content: center;
  padding: 11vh 16px 16px;
  background: var(--ms-overlay);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .16s var(--ms-ease), visibility .16s;
}
.ms-overlay.is-open { opacity: 1; visibility: visible; }

.ms-palette {
  width: 100%; max-width: 620px; align-self: flex-start;
  display: flex; flex-direction: column; max-height: 72vh;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-xl);
  box-shadow: var(--ms-shadow-lg);
  overflow: hidden;
  transform: translateY(-8px) scale(.985);
  transition: transform .16s var(--ms-ease);
}
.ms-overlay.is-open .ms-palette { transform: translateY(0) scale(1); }

.ms-palette__search {
  display: flex; align-items: center; gap: 11px;
  height: 54px; padding: 0 16px; flex: none;
  border-bottom: 1px solid var(--ms-border-soft);
}
.ms-palette__search > .ms-icon { color: var(--ms-text-3); }
.ms-palette__search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--ms-font); font-size: 15px; color: var(--ms-text);
}
.ms-palette__search input::placeholder { color: var(--ms-text-4); }

.ms-palette__results { flex: 1; overflow-y: auto; padding: 8px; }
.ms-palette__group {
  padding: 9px 10px 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ms-text-3);
}
.ms-palette__item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  border-radius: var(--ms-radius-sm);
  color: var(--ms-text-2); font-size: 13px;
  cursor: pointer;
}
.ms-palette__item > .ms-icon { color: var(--ms-text-3); }
.ms-palette__item:hover,
.ms-palette__item.is-active { background: var(--ms-surface-3); color: var(--ms-text); }
.ms-palette__item.is-active > .ms-icon { color: var(--ms-brand); }
.ms-palette__item b { font-weight: 600; }
.ms-palette__item small { margin-left: auto; font-size: 10.5px; color: var(--ms-text-4); }
.ms-palette__chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 10px 8px; }

.ms-palette__foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 16px; flex: none;
  border-top: 1px solid var(--ms-border-soft);
  background: var(--ms-surface-2);
  font-size: 11px; color: var(--ms-text-3);
}
.ms-palette__foot .ms-kbd { height: 18px; font-size: 9.5px; }
.ms-palette__foot-end { margin-left: auto; }
@media (max-width: 575.98px) { .ms-palette__foot-end { display: none; } }

/* ============================================================================
   MODAL GENÉRICO
   ========================================================================== */
.ms-modal {
  width: 100%; max-width: 560px; align-self: flex-start;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-xl);
  box-shadow: var(--ms-shadow-lg);
  overflow: hidden;
  transform: translateY(-8px) scale(.985);
  transition: transform .16s var(--ms-ease);
}
.ms-overlay.is-open .ms-modal { transform: translateY(0) scale(1); }
.ms-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 16px 12px;
}
.ms-modal__header h3 { font-size: 15px; font-weight: 700; }
.ms-modal__header p { font-size: 12.5px; color: var(--ms-text-3); margin-top: 3px; }
.ms-modal__body { padding: 0 16px 16px; max-height: 60vh; overflow-y: auto; }
.ms-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ms-border-soft);
  background: var(--ms-surface-2);
}

/* En el móvil el modal deja de ser un cuadro centrado y pasa a ser una hoja a
   pantalla completa. Con el teclado virtual abierto, los 11vh de aire de arriba
   más el tope de 60vh del cuerpo dejaban el formulario en una rendija.
   El :has() limita el cambio a los overlays que llevan modal: la paleta de
   comandos conserva su aire. */
@media (max-width: 575.98px) {
  .ms-overlay:has(.ms-modal) { padding: 0; }
  .ms-modal {
    max-width: none;
    /* Altura exacta, no minima: es lo que deja que el cuerpo se lleve el
       espacio sobrante y sea el unico que hace scroll, con la cabecera y los
       botones siempre a la vista. */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
  }
  /* EditForm de Blazor mete un <form> entre el modal y sus tres bloques, asi
     que la columna flexible tiene que continuar ahi dentro: si no, cabecera,
     cuerpo y pie no son elementos flexibles del modal y el pie se va fuera. */
  .ms-modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .ms-modal__header, .ms-modal__footer { flex: none; }
  /* min-height: 0 es imprescindible: sin el, un elemento flexible no baja de
     la altura de su contenido y no llega a hacer scroll. */
  .ms-modal__body { max-height: none; flex: 1 1 auto; min-height: 0; }
}

.ms-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.ms-shortcuts__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--ms-border-soft);
  font-size: 12.5px; color: var(--ms-text-2);
}
@media (max-width: 575.98px) { .ms-shortcuts { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   AVISOS FLOTANTES
   ========================================================================== */
.ms-toasts {
  position: fixed; z-index: 1090;
  right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.ms-toast {
  display: flex; align-items: center; gap: 10px;
  min-width: 260px; max-width: 380px;
  padding: 11px 14px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-lg);
  font-size: 12.5px; color: var(--ms-text);
  pointer-events: auto;
  animation: ms-toast-in .22s var(--ms-ease);
}
.ms-toast .ms-icon { flex: none; color: var(--ms-text-3); }
.ms-toast--success .ms-icon { color: var(--ms-success); }
.ms-toast--danger  .ms-icon { color: var(--ms-danger); }
.ms-toast--info    .ms-icon { color: var(--ms-info); }
.ms-toast.is-out { animation: ms-toast-out .18s var(--ms-ease) forwards; }
@keyframes ms-toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ms-toast-out { to { opacity: 0; transform: translateY(6px); } }
@media (max-width: 575.98px) { .ms-toasts { left: 16px; right: 16px; } .ms-toast { max-width: none; } }

/* ============================================================================
   PANEL LATERAL DE DETALLE
   ========================================================================== */
.ms-drawer-right {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1085;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--ms-surface);
  border-left: 1px solid var(--ms-border);
  box-shadow: var(--ms-shadow-lg);
  transform: translateX(100%);
  transition: transform .22s var(--ms-ease);
}
.ms-drawer-right.is-open { transform: translateX(0); }
.ms-drawer-right__header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; flex: none;
  border-bottom: 1px solid var(--ms-border);
}
.ms-drawer-right__body { padding: 16px; overflow-y: auto; flex: 1; }

/* Mensaje cuando la búsqueda no devuelve nada. */
.ms-palette__empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ms-text-3);
}