/* Contenido del monitor: letra de pantalla clara sobre vidrio azul petróleo, títulos Fredoka, botones de píldora
   (≥ 44 px de alto) y animación de encendido de cada pantalla. Textos de datos ≥ 16 px. */
.mscreen { opacity: 0; transform: translateY(6px); }
.mscreen.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s var(--ease-soft); animation: m-flicker .5s steps(3) 1; }
@keyframes m-flicker { 0% { filter: brightness(2.2) contrast(.6); } 50% { filter: brightness(.7); } 100% { filter: none; } }
.rm .mscreen.is-on { animation: none; transition: opacity .2s; transform: none; }
.screen.has-more { -webkit-mask-image: linear-gradient(180deg, #000 78%, rgba(0, 0, 0, .25)); mask-image: linear-gradient(180deg, #000 78%, rgba(0, 0, 0, .25)); }
.mk { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 700 12px/1.2 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: #6FE0F0; }
.mk .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok-glow); animation: dot 1.4s ease-in-out infinite; }
@keyframes dot { 50% { opacity: .3; } }
.screen p { margin: 0; }
.screen .big { font: 600 21px/1.18 var(--font-head); color: #FFFFFF; text-shadow: 0 0 12px rgba(111, 224, 240, .35); }
.screen .big.hero { font-size: 24px; color: var(--theme-gold); }
.screen .sub { margin-top: 3px; font-size: 16px; color: #BFF6FF; }
.screen .msg { margin-top: 6px; font-size: 16px; color: #D9FBFF; }
.screen .addr { margin-top: 2px; font-size: 16px; color: #D9FBFF; }
.screen .note { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 16px; color: #BFF6FF; }
.screen .note span:first-child { flex: none; margin-top: 2px; color: #6FE0F0; }
/* Luna: fecha (dos renglones) y horario a la izquierda, "Agendar" a la derecha; cabe en el monitor de tamaño normal */
.mluna { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.mluna > * { grid-column: 1; }
.mluna .mk { grid-column: 1 / -1; }
.mluna .mdate { font-size: 18px; line-height: 1.12; }
.mluna .mdate span { display: block; white-space: nowrap; }
.mluna .sub { margin-top: 2px; white-space: nowrap; }
.magendar { grid-column: 2; grid-row: 2 / span 2; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 60px; min-height: 58px; padding: 6px 2px; border: 0; border-radius: 16px; cursor: pointer;
  font: 600 14px/1 var(--font-head); color: #0A2236; background: linear-gradient(180deg, #E9FEFF, #A8EEF7); box-shadow: 0 3px 0 #4FB6C6, 0 5px 10px rgba(0, 0, 0, .3); }
.magendar[hidden] { display: none; }
.magendar:active { transform: translateY(2px); box-shadow: 0 1px 0 #4FB6C6; }
.magendar:focus-visible { outline: 3px solid var(--theme-gold); outline-offset: 3px; }
.magendar svg { display: block; }
.mluna .mcal { grid-column: 1 / -1; }
.mbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 16px/1 var(--font-head); color: #0A2236; background: linear-gradient(180deg, #E9FEFF, #A8EEF7); box-shadow: 0 3px 0 #4FB6C6, 0 5px 10px rgba(0, 0, 0, .3); }
.mbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #4FB6C6; }
.mbtn.is-primary { color: var(--on-theme); background: linear-gradient(180deg, var(--theme-hi), var(--theme)); box-shadow: 0 3px 0 var(--theme-lo), 0 5px 10px rgba(0, 0, 0, .3); }
.mbtn.is-small { min-height: 44px; min-width: 56px; padding: 0 12px; font-size: 15px; }
.mbtn:focus-visible { outline: 3px solid var(--theme-gold); outline-offset: 3px; }
/* arranque */
/* arranque compacto (logo al lado del texto): cabe en el monitor más bajo sin deslizar */
.mboot { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; justify-content: center; align-content: center; min-height: calc(100% - 4px); text-align: left; }
.mboot .mlogo { grid-row: 1 / span 2; }
.mboot .mlogo svg { width: 46px; height: 46px; display: block; }
.mlogo { animation: logo-in .8s var(--ease-spring) both; }
@keyframes logo-in { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.mship { font: 700 15px/1 var(--font-head); letter-spacing: .16em; color: var(--theme-gold); }
.typing { min-height: 1.3em; font: 600 18px/1.3 var(--font-head); color: var(--ok); text-shadow: 0 0 10px var(--ok-glow); }
/* Gloobi dice */
.gsay { display: flex; align-items: flex-start; gap: 8px; }
.gsay.is-extra { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(111, 224, 240, .3); }
.gface { flex: none; animation: gface 2.4s ease-in-out infinite; }
@keyframes gface { 50% { transform: translateY(-3px) rotate(-4deg); } }
.bubble { position: relative; padding: 6px 10px; border-radius: 14px 14px 14px 4px; background: rgba(191, 246, 255, .12); border: 1px solid rgba(111, 224, 240, .35); font: 600 15px/1.25 var(--font-head); color: #FFFFFF; }
.gface svg { width: 36px; height: 36px; display: block; }
.gsay:not(.is-extra) { min-height: calc(100% - 4px); align-items: center; }
/* viaje */
.mtravel { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.mbar { height: 8px; margin-top: 10px; border-radius: 99px; background: rgba(191, 246, 255, .14); overflow: hidden; }
.mbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--theme-2), #FFFFFF); animation: mbar 1.2s ease-in-out both; transform-origin: left; }
@keyframes mbar { from { transform: scaleX(0); } }
/* plan de vuelo: se enciende renglón por renglón */
.itin { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.itin li { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 10px; background: rgba(191, 246, 255, .07); font-size: 16px; }
.itin .time { font: 600 16px/1.2 var(--font-head); color: var(--theme-gold); }
.itin .what { color: #FFFFFF; }
.itin li.is-anim { animation: row-on .45s ease-out both; animation-delay: calc(.25s + var(--i) * .28s); }
@keyframes row-on { 0% { opacity: .15; background: rgba(191, 246, 255, 0); } 60% { opacity: 1; background: rgba(124, 242, 166, .28); } 100% { opacity: 1; background: rgba(191, 246, 255, .07); } }
.rm .itin li.is-anim { animation: none; }
/* regalos */
.gifts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.gifts li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: rgba(191, 246, 255, .07); }
.gifts li.is-top { background: linear-gradient(90deg, rgba(242, 201, 76, .3), rgba(242, 201, 76, .08)); box-shadow: inset 0 0 0 1px rgba(242, 201, 76, .5); }
.gifts .gi { color: #6FE0F0; display: grid; } .gifts li.is-top .gi { color: var(--theme-gold); }
.gifts .gt { display: flex; flex-direction: column; }
.gifts .gn { font: 600 16px/1.2 var(--font-head); color: #FFFFFF; }
.gifts .gnote { font-size: 16px; color: #BFF6FF; }
/* álbum: rejilla que se acomoda de 1 a 10 fotos */
.pgrid { display: grid; gap: 6px; margin-top: 6px; grid-template-columns: repeat(3, 1fr); }
.pgrid.n1 { grid-template-columns: 1fr; } .pgrid.n2, .pgrid.n4 { grid-template-columns: repeat(2, 1fr); }
.pthumb { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: #0A2236; box-shadow: inset 0 0 0 2px rgba(191, 246, 255, .25); }
.pgrid.n1 .pthumb { aspect-ratio: 4 / 3; }
.pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pthumb:focus-visible { outline: 3px solid var(--theme-gold); outline-offset: 2px; }