/* Contenedor raíz (oculto por defecto) */
.mtd-modal[aria-hidden="true"] { display: none; }
.mtd-modal[aria-hidden="false"] { display: block; }

.mtd-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden; /* evitamos scroll del contenedor */
  visibility: hidden;       /* <- en vez de display:none */
  pointer-events: none;
}

.mtd-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop */
.mtd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 220ms ease;
}

.mtd-modal.is-active .mtd-backdrop {  /* se activa en el 2do frame */
  opacity: 1;
}

/* Sheet (panel) */
.mtd-sheet {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); /* arriba, fuera */
  top: 0;
  width: 90%;
  max-height: 90vh;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}

/* Estados abiertos */
.mtd-modal[aria-hidden="false"] .mtd-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.mtd-modal[aria-hidden="false"] .mtd-sheet {
  transform: translate(-50%, 24px); /* desciende desde arriba */
}

/* Layout interno */
.mtd-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.mtd-header, .mtd-footer {
  padding: 14px 18px;
  background: #fafafa;
  border-bottom: 1px solid #eee;
}
.mtd-footer { 
  border-top: 1px solid #eee; 
  border-bottom: none; 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Estado “activa”: ya visible y animando hacia abajo */
.mtd-modal.is-active .mtd-sheet {
  transform: translate(-50%, 24px);
}

.mtd-content {
  padding: 10px;
  overflow: auto;
  max-height: calc(88vh - 120px);
  background-color: #a0a0a0;
}

/* Cerrar */
.mtd-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
}

/* Grid de Apps (ejemplo) */
.apps-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.app-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  -webkit-box-shadow: 6px 5px 5px -2px rgba(48, 48, 48, 0.66); 
  box-shadow: 6px 5px 5px -2px rgba(48, 48, 48, 0.66);
  width: 220px;
  min-width: 220px;
  background-color: white;
  margin: 10px;
}
.app-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #eee;
  text-decoration: none;
}
.app-tile:hover { background: #f7f7f7; }


/* -------- Variant: BOND -------- */
/* Variables de tamaño final del “cuadro” */
.mtd-modal.bond {
  --mtd-w: 100%;
  --mtd-h: 90vh;
  --mtd-enter-time: 1.5s;
  --mtd-backdrop-time: .5s;
}

/* Estado base oculto, pero animable */
.mtd-modal {
  position: fixed;
  top: 0;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.mtd-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop base */
.mtd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  width: 100%;
  height: 100%;
}

/* Sheet base (usa tu estilo general de mtd-sheet) */
.mtd-sheet {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translate(-50%);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  width: var(--mtd-w, 100%);
  max-width: var(--mtd-w, 100%);
  max-height: var(--mtd-h, 90vh);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

/* ------- Apertura Bond ------- */
.mtd-modal.bond.is-active .mtd-backdrop {
  animation: mtd-bond-fadeIn var(--mtd-backdrop-time) ease forwards;
}

.mtd-modal.bond.is-active .mtd-sheet {
  /* inicia como círculo que entra desde la derecha y se “cuadra” */
  animation: mtd-bond-in var(--mtd-enter-time) cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
  overflow: hidden;
  /*width: 100% !important;*/
}

/* Mostramos el contenido después del 90% de la entrada (suave) */
.mtd-modal.bond.is-active .mtd-sheet .mtd-header,
.mtd-modal.bond.is-active .mtd-sheet .mtd-content,
.mtd-modal.bond.is-active .mtd-sheet .mtd-footer {
  opacity: 0;
  animation: mtd-bond-content-in .5s linear forwards;
  animation-delay: calc(var(--mtd-enter-time) - .1s);
}

/* ------- Cierre Bond ------- */
.mtd-modal.bond.is-closing .mtd-backdrop {
  animation: mtd-bond-fadeToRed 1s forwards;
}

.mtd-modal.bond.is-closing .mtd-sheet {
  /* “disparo” hacia abajo al cerrar */
  animation: mtd-bond-kill 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

/* Cuando termina todo, desvanecemos contenedor para liberar clicks */
.mtd-modal.bond.is-closing::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: mtd-bond-slowFade .2s 1.5s linear forwards;
}

/* -------- Keyframes -------- */
@keyframes mtd-bond-fadeIn {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(0,0,0,.7); }
}

/* Entrada: círculo 75x75 entra desde la derecha y se convierte en rectángulo */
@keyframes mtd-bond-in {
  0% {
    transform: translate(calc(50vw + 1000px), -50%); /* desde la derecha */
    left: 0; /* hack visual, transform manda */
    width: 75px; height: 75px; border-radius: 50%;
  }
  80% {
    transform: translate(-50%,-50%);
    width: 75px; height: 75px; border-radius: 50%;
  }
  90% {
    width: calc(var(--mtd-w) + 20px);
    height: calc(var(--mtd-h) + 20px);
    border-radius: 6px;
  }
  100% {
    width: var(--mtd-w);
    height: var(--mtd-h);
    border-radius: 6px;
  }
}

/* Contenido aparece suave */
@keyframes mtd-bond-content-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fondo cambia a azul mientras cierra (como el demo) */
@keyframes mtd-bond-fadeToRed {
  from { background-color: #a3e3f0; }
  to   { background-color: transparent }
}

/* Disparo hacia abajo + rotación */
@keyframes mtd-bond-kill {
  from { transform: translate(-50%,-50%) rotate(0deg); opacity: 1; }
  to   { transform: translate(-50%, calc(-50% + 300px)) rotate(45deg); opacity: 0; }
}

/* Contenedor se apaga al final del cierre */
@keyframes mtd-bond-slowFade {
  from { opacity: 1; transform: scale(1); }
  99.9% { opacity: 0; transform: scale(1); }
  to { transform: scale(0); }
}