/* Panel CatMedia · diseño nuevo (versión 2): movimiento.
 * Todo va dentro de html.ui2: si el diseño nuevo está apagado, nada de esto aplica. */

/* ---------- Aviso con "Deshacer" (sirve en los dos diseños) ---------- */
.toast.has-undo { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; }
.toast-undo { height: 34px; padding: 0 14px; border-radius: 10px; border: 0; background: rgba(18, 18, 63, .12); color: inherit; font-weight: 800; cursor: pointer; }
.toast-undo:hover { background: rgba(18, 18, 63, .2); }

html.ui2 .toast { border-radius: 999px; padding: 12px 20px; background: rgba(12, 11, 34, .92); color: #f4f4fb; border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); animation: cm-toast-in .42s cubic-bezier(.2, 1.3, .3, 1) both; }
html.ui2[data-theme="light"] .toast { background: rgba(18, 18, 63, .94); }
html.ui2 .toast.has-undo { padding: 6px 6px 6px 20px; }
html.ui2 .toast.bad { background: #c9374d; border-color: transparent; }
html.ui2 .toast.out { animation: cm-toast-out .26s ease both; }
html.ui2 .toast-undo { border-radius: 999px; background: #FBC924; color: #12123F; }
html.ui2 .toast-undo:hover { background: #FCDD60; }
@keyframes cm-toast-in { from { opacity: 0; transform: translate(-50%, 18px) scale(.94); } }
@keyframes cm-toast-out { to { opacity: 0; transform: translate(-50%, 10px) scale(.96); } }

/* ---------- Cambio suave entre pantallas ---------- */
html.ui2 #cm-view { view-transition-name: cm-view; }
::view-transition-group(root) { animation-duration: .24s; }
::view-transition-old(cm-view) { animation: cm-v-out .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(cm-view) { animation: cm-v-in .34s cubic-bezier(.2, .8, .2, 1) .05s both; }
::view-transition-group(cm-view) { animation: none; }
@keyframes cm-v-out { to { opacity: 0; filter: blur(10px); transform: scale(.985); } }
@keyframes cm-v-in { from { opacity: 0; filter: blur(10px); transform: translateY(10px) scale(.995); } }

/* ---------- La tarjeta que crece hasta el detalle ---------- */
::view-transition-group(cm-hero) { z-index: 50; overflow: hidden; border-radius: 24px; animation-duration: .46s; animation-timing-function: cubic-bezier(.22, .9, .24, 1); }
::view-transition-old(cm-hero) { animation: cm-h-out .22s ease both; }
::view-transition-new(cm-hero) { animation: cm-h-in .36s ease .06s both; }
::view-transition-image-pair(cm-hero) { isolation: isolate; }
@keyframes cm-h-out { to { opacity: 0; } }
@keyframes cm-h-in { from { opacity: 0; } }
/* Mientras la tarjeta crece, el resto de la pantalla se va sin desenfoque fuerte. */
html.vt-hero::view-transition-old(cm-view) { animation: cm-v-fade .2s ease both; }
html.vt-hero::view-transition-new(cm-view) { animation: cm-v-fadein .3s ease .12s both; }
@keyframes cm-v-fade { to { opacity: 0; transform: scale(.99); } }
@keyframes cm-v-fadein { from { opacity: 0; } }

/* ---------- Isla del cronómetro ---------- */
.island { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 85; width: min(330px, calc(100vw - 150px)); border-radius: 24px; background: #08071a; color: #f4f4fb; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden; transition: width .42s cubic-bezier(.2, 1.15, .3, 1), border-radius .42s cubic-bezier(.2, 1.15, .3, 1); }
.island.in { animation: cm-isl-in .55s cubic-bezier(.2, 1.3, .3, 1) both; }
.island.out { animation: cm-isl-out .3s ease both; pointer-events: none; }
@keyframes cm-isl-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.6); } }
@keyframes cm-isl-out { to { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.7); } }
.isl-pill { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 16px 0 14px; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.isl-dot { width: 9px; height: 9px; border-radius: 50%; background: #FBC924; box-shadow: 0 0 0 0 rgba(251, 201, 36, .6); flex: none; animation: cm-isl-dot 1.8s ease-out infinite; }
@keyframes cm-isl-dot { 0% { box-shadow: 0 0 0 0 rgba(251, 201, 36, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(251, 201, 36, 0); } }
.isl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.isl-clock { font-size: 13.5px; color: #FBC924; font-variant-numeric: tabular-nums; }
.isl-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2, 1.1, .3, 1); }
.isl-in { overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.island.open { width: min(380px, calc(100vw - 24px)); border-radius: 28px; }
.island.open .isl-more { grid-template-rows: 1fr; }
.island.open .isl-in { padding-bottom: 16px; }
.island.open .isl-clock { opacity: 0; }
.isl-meta { font-size: 12.5px; color: #a9a8cf; }
.isl-big { font-size: 34px; font-weight: 700; color: #FBC924; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.isl-acts { display: flex; gap: 8px; }
.isl-acts .btn { flex: 1; justify-content: center; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: #f4f4fb; }
.isl-acts .isl-stop { background: #FBC924; border-color: #FBC924; color: #12123F; }
@media (max-width: 640px) {
  .island { top: 70px; width: min(300px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .island, .isl-more { transition: none; }
  .island.in, .island.out, .isl-dot, html.ui2 .toast { animation: none; }
}
html:not(.ui2) .island { display: none; }
/* Con la isla visible, el contenido baja un poco para que no la tape. */
html.ui2.has-island .main { padding-top: 66px; transition: padding-top .3s ease; }
@media (max-width: 640px) { html.ui2.has-island .main { padding-top: 70px; } }