/* ============================================================================
   modals.css — Variantes de modal a prueba
   ----------------------------------------------------------------------------
   PRUEBA DE ESTILO. Aquí se ensayan alternativas al .ms-modal base para decidir
   cómo serán los modales INFORMATIVOS (los de sólo lectura) de toda la app.
   Los de formulario siguen con el .ms-modal de siempre.

   Se aplica añadiendo el modificador al modal:
       <div class="ms-modal ms-modal--elevated"> …

   Cuando se decida, o se sube la variante ganadora a overlays.css y se retira
   este archivo, o se borra sin más. Nada del sistema de diseño se ha tocado.
   ========================================================================== */

/* ============================================================================
   VARIANTE "ELEVATED CARD"
   ----------------------------------------------------------------------------
   La idea: que la ficha no parezca una ventana recortada sobre el fondo, sino
   una tarjeta física levantada por encima de la página.

   Tres decisiones que la separan del .ms-modal base:

   1. La profundidad la da la LUZ, no una línea. Fuera el borde de 1px; en su
      lugar, sombra en tres capas (contacto, media y ambiental) como la de un
      objeto real. Es lo que hace que se lea "elevada".

   2. Cero líneas divisorias dentro. Cabecera, cuerpo y pie se separan por
      espacio y por jerarquía tipográfica. Un modal informativo se lee de un
      vistazo; los tabiques lo trocean sin aportar nada.

   3. El tipo de hito manda. El icono de color es el ancla visual de la ficha
      y sustituye al badge suelto de la cabecera.
   ========================================================================== */

.ms-modal--elevated {
  max-width: 540px;
  border: none;
  border-radius: 20px;
  background: var(--ms-surface);
  box-shadow:
    0 2px 4px rgba(16, 25, 45, .04),
    0 12px 28px rgba(16, 25, 45, .12),
    0 32px 64px rgba(16, 25, 45, .16);
  overflow: hidden;
}

:root[data-ms-theme="dark"] .ms-modal--elevated {
  /* En oscuro la sombra sola no despega la tarjeta del fondo: se suma un
     filo superior de luz, como el borde iluminado de un objeto real. */
  background: var(--ms-surface-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 12px 28px rgba(0, 0, 0, .5),
    0 32px 64px rgba(0, 0, 0, .4);
}

/* --- Cabecera ------------------------------------------------------------- */
.ms-modal--elevated .ms-modal__header {
  align-items: center;
  gap: 14px;
  padding: 24px 24px 0;
  border: none;
}

/* Ancla visual: el icono del tipo, en grande y con su color semántico. */
.ms-modal--elevated .ms-modal__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--tono-bg, var(--ms-brand-soft));
  color: var(--tono, var(--ms-brand));
}

.ms-modal--elevated .ms-modal__icon .ms-icon { width: 21px; height: 21px; }

.ms-modal--elevated .ms-modal__header h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.ms-modal--elevated .ms-modal__header p {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ms-text-3);
}

/* Tonos del icono, por si la ficha es de otro módulo. */
.ms-modal--elevated .ms-modal__icon--brand   { --tono: var(--ms-brand);   --tono-bg: var(--ms-brand-soft); }
.ms-modal--elevated .ms-modal__icon--success { --tono: var(--ms-success); --tono-bg: var(--ms-success-bg); }
.ms-modal--elevated .ms-modal__icon--warning { --tono: var(--ms-warning); --tono-bg: var(--ms-warning-bg); }
.ms-modal--elevated .ms-modal__icon--danger  { --tono: var(--ms-danger);  --tono-bg: var(--ms-danger-bg); }
.ms-modal--elevated .ms-modal__icon--info    { --tono: var(--ms-info);    --tono-bg: var(--ms-info-bg); }
.ms-modal--elevated .ms-modal__icon--purple  { --tono: var(--ms-purple);  --tono-bg: var(--ms-purple-bg); }

/* --- Cuerpo --------------------------------------------------------------- */
.ms-modal--elevated .ms-modal__body {
  padding: 20px 24px 4px;
  max-height: 62vh;
}

/* Datos en pares etiqueta/valor apilados: la etiqueta pequeña y en mayúsculas
   deja de competir con el dato, que es lo que se viene a leer. */
.ms-modal--elevated .ms-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin: 0;
}

.ms-modal--elevated .ms-facts__item--wide { grid-column: 1 / -1; }

.ms-modal--elevated .ms-facts__label {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ms-text-4);
}

.ms-modal--elevated .ms-facts__value {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ms-text);
}

.ms-modal--elevated .ms-facts__value a { color: var(--ms-brand); }

@media (max-width: 575.98px) {
  .ms-modal--elevated .ms-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* --- Pie -----------------------------------------------------------------
   Sin línea ni fondo propio: la tarjeta es una sola pieza. La acción
   destructiva se va a la izquierda, separada de las otras, para que no se
   pulse por inercia al buscar "Cerrar". */
.ms-modal--elevated .ms-modal__footer {
  gap: 8px;
  padding: 20px 24px 22px;
  border-top: none;
  background: transparent;
}

.ms-modal--elevated .ms-modal__footer .ms-auto { margin-left: auto; }