/* Maquetas de producto. Aspecto de aplicación fijo (claro), independiente del tema de la página.
   Todo el tamaño sale de em; el cuerpo escala con el ancho de la maqueta (container queries). */

.mock-wrap { position: relative; }
.mock {
  --m-bg: #F3F5F9; --m-s: #FFFFFF; --m-ink: #17294D; --m-mute: #666C86; --m-line: #E3E6EE; --m-side: #0E1C3A;
  --m-ok: #17794F; --m-okbg: #DDF4E8; --m-warn: #9A5600; --m-warnbg: #FFEFD4; --m-info: #2850C8; --m-infobg: #E3EAFF; --m-bad: #B13030; --m-badbg: #FBE3E3;
  --m-acc: #FF7200; --m-acc-bg: #FFF0E3;
  container-type: inline-size;
  border-radius: var(--r); overflow: hidden; background: var(--m-s); color: var(--m-ink);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: 0 2px 4px rgb(15 30 61 / .06), 0 44px 80px -42px rgb(15 30 61 / .55);
  font-family: var(--body); line-height: 1.35; text-align: left; font-weight: 400;
}
.mock * { box-sizing: border-box; }
.mock p, .mock b, .mock small { margin: 0; }
.mock b { font-weight: 700; }

.mock-bar { display: flex; align-items: center; gap: .7em; padding: .75em 1em; background: #E9ECF3; border-bottom: 1px solid var(--m-line); font-size: clamp(7px, 1.55cqw, 12px); }
.mock-bar i { width: .85em; height: .85em; border-radius: 50%; background: #C5CAD8; flex: none; }
.mock-bar span { margin-left: .8em; background: #fff; border-radius: .5em; padding: .3em 1em; color: var(--m-mute); font-weight: 500; flex: 0 1 22em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mock-body { display: grid; grid-template-columns: 17% minmax(0, 1fr); aspect-ratio: 16 / 10.2; font-size: clamp(6.8px, 1.72cqw, 14px); }
.m-side { background: var(--m-side); color: #B9BDD6; padding: 1.4em .9em; display: flex; flex-direction: column; gap: .3em; }
.m-brand { display: flex; align-items: center; gap: .55em; font: 800 1.55em/1 var(--head); color: #fff; letter-spacing: -.02em; margin: 0 .3em 1.3em; }
.m-brand::before { content: ""; width: .8em; height: .8em; border-radius: .22em; background: var(--m-acc); flex: none; }
.m-nav { padding: .65em .85em; border-radius: .6em; font-weight: 600; white-space: nowrap; }
.m-nav.on { background: rgb(255 114 0 / .2); color: #fff; box-shadow: inset .22em 0 0 var(--m-acc); }
.m-user { margin-top: auto; display: flex; align-items: center; gap: .6em; padding: .6em .4em 0; color: #8C90AE; font-size: .92em; border-top: 1px solid rgb(255 255 255 / .1); }
.m-user i { width: 2em; height: 2em; border-radius: 50%; background: #2B2F4D; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; font-size: .85em; flex: none; }

.m-main { background: var(--m-bg); padding: 1.35em 1.5em; display: flex; flex-direction: column; gap: 1.05em; min-width: 0; overflow: hidden; }
.m-top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.m-title { font: 700 1.6em/1.1 var(--head); letter-spacing: -.02em; }
.m-sub { color: var(--m-mute); font-size: .95em; margin-top: .2em; }
.m-btn { background: var(--m-acc); color: #17294D; font-weight: 700; padding: .6em 1.1em; border-radius: .6em; white-space: nowrap; font-family: var(--head); }

.m-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85em; }
.m-kpi { background: #fff; border: 1px solid var(--m-line); border-radius: .8em; padding: .85em 1em; min-width: 0; }
.m-kpi small { display: block; color: var(--m-mute); font-size: .92em; }
.m-kpi b { display: block; font: 700 1.65em/1.15 var(--head); letter-spacing: -.025em; margin-top: .15em; white-space: nowrap; }
.m-kpi em { font-style: normal; font-size: .88em; font-weight: 700; color: var(--m-ok); }

.m-card { background: #fff; border: 1px solid var(--m-line); border-radius: .8em; overflow: hidden; min-width: 0; }
.m-card > header { padding: .75em 1em; border-bottom: 1px solid var(--m-line); font-weight: 700; display: flex; justify-content: space-between; gap: 1em; font-family: var(--head); }
.m-card > header span { color: var(--m-mute); font-weight: 500; font-family: var(--body); }
.m-row { display: grid; grid-template-columns: 3.5em minmax(0, 1fr) auto; gap: .9em; align-items: center; padding: .7em 1em; border-bottom: 1px solid var(--m-line); }
.m-row:last-child { border-bottom: 0; }
.m-row time { color: var(--m-mute); font-variant-numeric: tabular-nums; font-weight: 600; }
.m-row b { display: block; }
.m-row small { color: var(--m-mute); font-size: .92em; }
.m-row.hot { background: var(--m-acc-bg); }
.chip { display: inline-block; padding: .18em .75em; border-radius: 99px; font-weight: 700; font-size: .9em; white-space: nowrap; }
.chip.ok { background: var(--m-okbg); color: var(--m-ok); }
.chip.warn { background: var(--m-warnbg); color: var(--m-warn); }
.chip.info { background: var(--m-infobg); color: var(--m-info); }
.chip.bad { background: var(--m-badbg); color: var(--m-bad); }
.chip.acc { background: var(--m-acc); color: #17294D; }
.m-note { font-size: .85em; color: var(--m-mute); margin-top: auto; }

/* Compy */
.m-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .85em; flex: 1; min-height: 0; }
.m-bars { display: flex; align-items: flex-end; gap: .55em; height: 8.2em; padding: 1em 1em .4em; }
.m-bars i { flex: 1; border-radius: .3em .3em 0 0; background: #FFD6B5; height: var(--h); transform-origin: bottom; }
.m-bars i.now { background: var(--m-acc); }
.m-axis { display: flex; justify-content: space-between; padding: 0 1em .8em; color: var(--m-mute); font-size: .85em; }
.m-alert { display: flex; justify-content: space-between; gap: .8em; align-items: center; padding: .65em 1em; border-bottom: 1px solid var(--m-line); }
.m-alert:last-child { border-bottom: 0; }

/* Conversa */
.mock.crm .mock-body { grid-template-columns: 25% minmax(0, 1fr) 28%; }
.m-inbox { background: #fff; border-right: 1px solid var(--m-line); display: flex; flex-direction: column; min-width: 0; }
.m-inbox header { padding: 1.1em 1em .7em; font: 700 1.25em var(--head); }
.m-chatrow { padding: .75em 1em; border-top: 1px solid var(--m-line); display: grid; gap: .1em; }
.m-chatrow b { display: flex; justify-content: space-between; gap: .5em; }
.m-chatrow b span { font-weight: 500; color: var(--m-mute); font-size: .85em; }
.m-chatrow small { color: var(--m-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-chatrow.on { background: var(--m-acc-bg); box-shadow: inset .22em 0 0 var(--m-acc); }
.m-chat { background: #EEE9E0; display: flex; flex-direction: column; min-width: 0; }
.m-chat header { background: #fff; border-bottom: 1px solid var(--m-line); padding: .85em 1.1em; display: flex; justify-content: space-between; align-items: center; gap: .8em; }
.m-chat header b { font-family: var(--head); }
.m-msgs { flex: 1; min-height: 0; overflow: hidden; padding: 1.1em 1.1em 1.5em; display: flex; flex-direction: column; gap: .6em; justify-content: flex-end; }   /* la última burbuja no toca el borde */
.msg { max-width: 82%; padding: .6em .9em; border-radius: .2em .9em .9em .9em; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.msg.me { align-self: flex-end; background: #DDF4C9; border-radius: .9em .2em .9em .9em; }
.msg small { display: block; color: var(--m-mute); font-size: .82em; margin-top: .15em; text-align: right; }
.msg.me small { color: #4F5A70; }
.msg .tag { display: inline-block; font-size: .78em; font-weight: 700; background: var(--m-ink); color: #fff; padding: .05em .55em; border-radius: 99px; margin-bottom: .3em; }
.m-lead { background: #fff; border-left: 1px solid var(--m-line); padding: 1.1em 1em; display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.m-lead .t { font: 700 1.2em var(--head); }
.m-field small { display: block; color: var(--m-mute); font-size: .88em; }
.m-field b { display: block; }
.m-lead .m-btn { text-align: center; margin-top: auto; }

/* Animación: solo cuando la maqueta entra en juego (.play) */
@media (prefers-reduced-motion: no-preference) {
  .js .mock:not(.play) .a { opacity: 0; }
  .js .mock:not(.play) .m-bars i { transform: scaleY(0); }
  .mock.play .a { animation: mIn .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
  .mock.play .a.late { animation-delay: calc(var(--i, 0) * 110ms + 250ms); animation-duration: .9s; }
  .mock.play .m-bars i { animation: mBar 1s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 70ms + 500ms); }
  .mock.play .chip.pulse { animation: mPulse 1.8s 1.6s ease-in-out infinite; }
  .mock.play .msg.a { animation-name: mMsg; animation-duration: .55s; animation-delay: calc(var(--i, 0) * 1000ms + 400ms); }
  .mock.play .m-row.hot.a { animation-name: mHot; }
}
@keyframes mIn { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: none; } }
@keyframes mMsg { from { opacity: 0; transform: translateY(.7em) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(40 80 200 / .0); } 50% { box-shadow: 0 0 0 .45em rgb(40 80 200 / .16); } }
@keyframes mHot { 0% { opacity: 0; transform: translateY(-.8em); background: #FFD3AE; } 60% { opacity: 1; transform: none; background: #FFD3AE; } 100% { opacity: 1; transform: none; background: var(--m-acc-bg); } }

/* Maquetas chicas: sin barra lateral, texto más legible */
@container (max-width: 520px) {
  .mock-body { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; font-size: clamp(10.5px, 3cqw, 12px); }   /* en celular el texto chico queda en unos 9 px */
  .mock-bar { font-size: 10px; }
  .m-side { display: none; }
  .m-main { padding: 1.1em 1.1em 1.3em; }
  .m-kpi b { font-size: 1.4em; }
  .m-split { grid-template-columns: 1fr; }
  .m-split .m-card:nth-child(2) { display: none; }
  .m-bars { height: 6em; }
  .mock.crm .mock-body { grid-template-columns: minmax(0, 1fr); }
  .m-inbox, .m-lead { display: none; }
  .m-msgs { min-height: 22em; }
  .m-row.drop { display: none; }
}

/* Ajustes */
.m-alert b { display: block; }
.m-alert small { color: var(--m-mute); font-size: .92em; }
.m-split .m-card { display: flex; flex-direction: column; }
.m-split .m-bars { flex: 1; height: auto; min-height: 7em; }

/* RispyOdo: odontograma FDI por caras */
.mock.odo .m-main { gap: .8em; }
.m-odo { padding-bottom: .5em; }
.m-teeth { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: .25em; padding: .55em .8em 0; }
.m-teeth.lo { padding-top: .35em; }
.m-teeth .t { display: grid; justify-items: center; gap: .1em; min-width: 0; }
.m-teeth .t small { font-size: .72em; color: var(--m-mute); font-variant-numeric: tabular-nums; }
.m-teeth.lo .t { grid-template-rows: auto auto; }
.m-teeth.lo .t small { order: 2; }
.m-teeth .t:nth-child(8) { margin-right: .35em; }
.m-teeth svg { width: 100%; max-width: 2em; aspect-ratio: 1; display: block; }
.m-teeth polygon { stroke: #C5CBD9; stroke-width: .9; stroke-linejoin: round; }
.m-teeth .f { fill: #fff; }
.m-teeth .car { fill: #E25B4B; }
.m-teeth .res { fill: #3E63C9; }
.m-teeth .plan { fill: var(--m-acc); }
.m-teeth .t.cor svg { outline: .14em solid var(--m-acc); outline-offset: .06em; border-radius: .2em; }
.m-teeth .t.aus svg { opacity: .3; }
.m-teeth .t.aus::after { content: ""; position: relative; margin-top: -1.95em; width: 1.6em; height: .14em; background: var(--m-ink); transform: rotate(-45deg); border-radius: 1em; }
.m-legend { display: flex; gap: 1em; padding: .5em .8em 0; font-size: .82em; color: var(--m-mute); }
.m-legend span::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: .2em; margin-right: .35em; vertical-align: -.1em; }
.m-legend .car::before { background: #E25B4B; } .m-legend .res::before { background: #3E63C9; } .m-legend .plan::before { background: var(--m-acc); }
.mock.odo .m-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.mock.odo .m-row { grid-template-columns: 2.2em minmax(0, 1fr) auto; padding: .5em .8em; }
.mock.odo .m-row time { font-weight: 800; color: var(--m-ink); }
.m-fin { display: grid; align-content: start; gap: .3em; padding: .8em .9em; }
.m-fin small { color: var(--m-mute); font-size: .9em; }
.m-fin b { font: 700 1.45em/1.1 var(--head); letter-spacing: -.02em; white-space: nowrap; }
.m-fin em { font-style: normal; font-size: .88em; font-weight: 700; color: var(--m-ok); }
.m-fin .chip { justify-self: start; width: fit-content; margin-top: .3em; font-size: .8em; }