/* Synaria — ejemplos ilustrativos de las landings de sector (móviles de WhatsApp y paneles). */

.ss-demo { background: #f4f7f8; width: 100%; padding: 4rem 1.5rem; }
.ss-demo h2 { font-size: 1.5rem; font-weight: 700; color: #0f1a1b; text-align: center; }
.ss-demo .demo-sub { text-align: center; color: #4b5563; margin: .75rem auto 0; max-width: 38rem; }
.demo-grid { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin: 2.5rem 0 0; padding: 0; overflow: visible; justify-items: center; } }
.demo-item { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 300px; }
@media (min-width: 768px) { .demo-item { width: auto; max-width: 300px; } }
.demo-item h3 { font-weight: 700; color: #0f1a1b; text-align: center; }
.demo-item p { font-size: .9rem; color: #4b5563; text-align: center; }
.demo-phone { width: 260px; border-radius: 34px; background: #111; padding: 10px; box-shadow: 0 18px 40px rgba(15,26,27,.18); }
.demo-screen { border-radius: 26px; overflow: hidden; background: #efe7dd; display: flex; flex-direction: column; }
@media (min-width: 768px) { .demo-screen { min-height: 540px; } }
.demo-top { background: #075e54; color: #fff; padding: 14px 16px 10px; font-size: .9rem; font-weight: 600; }
.demo-top small { display: block; font-weight: 400; opacity: .8; font-size: .7rem; }
.demo-body { padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.demo-bubble { background: #fff; border-radius: 10px; padding: 9px 11px; font-size: .78rem; line-height: 1.45; color: #1f2933; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.demo-bubble.me { align-self: flex-end; background: #dcf8c6; }
.demo-bubble .t { display: block; text-align: right; font-size: .62rem; color: #8a8a8a; margin-top: 3px; }
.demo-btn { background: #fff; border-radius: 10px; text-align: center; padding: 8px; font-size: .78rem; font-weight: 600; color: #0b8f7f; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.demo-pdf { display: flex; align-items: center; gap: 8px; background: #f5f5f5; border-radius: 8px; padding: 8px; margin-bottom: 6px; }
.demo-pdf b { display: inline-block; background: #d93025; color: #fff; font-size: .6rem; border-radius: 3px; padding: 2px 4px; }
.demo-note { text-align: center; font-size: .75rem; color: #6b7280; font-style: italic; margin-top: 1.5rem; }
.demo-hint { text-align: center; font-size: .8rem; color: #289FB7; font-weight: 600; margin-top: .5rem; }
@media (min-width: 768px) { .demo-phone { width: 270px; } }
.demo-hint { display: none; }

.ss-panel { background: #ffffff; width: 100%; padding: 4rem 1.5rem; }
.ss-panel h2 { font-size: 1.5rem; font-weight: 700; color: #0f1a1b; text-align: center; }
.ss-panel .demo-sub { text-align: center; color: #4b5563; margin: .75rem auto 0; max-width: 38rem; }
.dp-wrap { margin-top: 2.5rem; }
.dp { min-width: 760px; background: #fff; border: 1px solid #cfe3e7; border-radius: 16px; overflow: hidden; font-size: 12px; color: #2a333a; box-shadow: 0 18px 40px rgba(15,26,27,.10); }
.dp-nav { display: flex; align-items: center; gap: 4px; background: #0f2a4a; color: #cfe3ec; padding: 0 14px; height: 42px; }
.dp-nav b { color: #fff; margin-right: 14px; }
.dp-nav span { padding: 6px 11px; border-radius: 8px; }
.dp-nav span.on { background: #289FB7; color: #fff; font-weight: 600; }
.dp-nav .dp-date { margin-left: auto; font-size: 11px; opacity: .85; }
.dp-body { display: grid; grid-template-columns: 1fr 220px; }
.dp-main { padding: 14px; }
.dp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.dp-kpis div { background: #f2f8f9; border: 1px solid #e1eef1; border-radius: 10px; padding: 8px 10px; font-size: 11px; color: #5d6b75; }
.dp-kpis b { display: block; font-size: 20px; color: #1257a8; }
.dp-grid { display: grid; grid-template-columns: 42px repeat(4, 1fr); gap: 4px; }
.dp-h { text-align: center; font-size: 11px; color: #5d6b75; font-weight: 600; }
.dp-t { font-size: 10px; color: #8a959c; padding-top: 6px; }
.dp-cell, .dp-ev { height: 32px; border-radius: 6px; }
.dp-cell { background: #f6f9fa; }
.dp-ev { padding: 0 8px; font-size: 10.5px; display: flex; align-items: center; color: #fff; }
.dp-ev.e1 { background: #1565c0; } .dp-ev.e2 { background: #289FB7; } .dp-ev.e3 { background: #7bc9cf; color: #0e3a44; } .dp-ev.e4 { background: #0f2a4a; }
.dp-side { border-left: 1px solid #e9eff1; padding: 14px; background: #fbfdfd; }
.dp-side b { display: block; font-size: 11.5px; margin-bottom: 6px; }
.dp-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid #eef3f4; font-size: 11px; }
.dp-st { border-radius: 10px; padding: 1px 8px; font-size: 10px; font-weight: 700; }
.dp-st.acc { background: #dff3e8; color: #1f7a4f; } .dp-st.pen { background: #eceff1; color: #59646b; } .dp-st.rej { background: #fde3e1; color: #b3372b; }
.dp-search { margin-top: 10px; border: 1px solid #d6e4e7; border-radius: 8px; padding: 7px 9px; color: #9aa5ad; font-size: 11px; }



/* Pantalla de app (notificaciones y horario) */
.demo-lock { background: linear-gradient(170deg, #1d4f6e, #0f2a4a); color: #fff; padding: 22px 12px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.demo-lock .clock { text-align: center; font-size: 2.6rem; font-weight: 300; line-height: 1; }
.demo-lock .date { text-align: center; font-size: .75rem; opacity: .85; margin-bottom: 10px; }
.demo-notif { background: rgba(255,255,255,.92); color: #1f2933; border-radius: 14px; padding: 9px 11px; font-size: .74rem; line-height: 1.4; }
.demo-notif .nh { display: flex; justify-content: space-between; font-size: .68rem; color: #5d6b75; font-weight: 600; margin-bottom: 2px; }
.demo-app { background: #f4f7f8; flex: 1; display: flex; flex-direction: column; }
.demo-apptop { background: #289FB7; color: #fff; padding: 14px 16px 12px; font-weight: 600; font-size: .9rem; }
.demo-apptop small { display: block; font-weight: 400; opacity: .85; font-size: .7rem; }
.demo-appbody { padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.demo-card { background: #fff; border-radius: 12px; padding: 10px 12px; font-size: .76rem; line-height: 1.4; color: #1f2933; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.demo-card .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.demo-card small { color: #6b7280; }
.demo-tag { border-radius: 10px; padding: 1px 8px; font-size: .64rem; font-weight: 700; }
.demo-tag.ok { background: #dff3e8; color: #1f7a4f; } .demo-tag.warn { background: #fff1de; color: #9a5b10; } .demo-tag.off { background: #fde3e1; color: #b3372b; }

/* Panel con tabla (comercio) */
.dp-full { padding: 14px; }
.dp-kpis.k6 { grid-template-columns: repeat(6, 1fr); }
.dp-kpis b.warn { color: #d97706; } .dp-kpis b.bad { color: #dc2626; }
.dp-kpis small { display: block; font-size: 10px; color: #8a959c; margin-top: 2px; }
.dp-filters { display: flex; gap: 6px; margin-bottom: 10px; }
.dp-filters span { border: 1px solid #d6e4e7; border-radius: 8px; padding: 5px 9px; font-size: 10.5px; color: #4b5860; background: #fff; }
.dp-filters span.grow { flex: 1; color: #9aa5ad; }
.dp-table { width: 100%; border-collapse: collapse; }
.dp-table th { text-align: left; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #6b7880; font-weight: 700; padding: 7px 6px; border-bottom: 1px solid #e3ebed; white-space: nowrap; }
.dp-table td { padding: 8px 6px; border-bottom: 1px solid #eef3f4; font-size: 10.5px; white-space: nowrap; }
.dp-table td.mono { font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
.dp-table td.amt { text-align: right; font-weight: 600; }
.dp-st.info { background: #e3efff; color: #1d5fc2; } .dp-st.warn { background: #fff1de; color: #9a5b10; }
.dp-date-ok { color: #1d5fc2; font-weight: 600; } .dp-date-late { color: #b3372b; font-weight: 600; }

/* Paneles en móvil: misma información, reorganizada en columna */
.dp-list { display: none; }
@media (max-width: 767px) {
  .dp, .dp[style] { min-width: 0 !important; }
  .dp-nav { overflow: hidden; white-space: nowrap; gap: 2px; padding: 0 10px; }
  .dp-nav b { margin-right: 6px; }
  .dp-nav span { padding: 5px 8px; }
  .dp-nav .dp-date, .dp-nav span:nth-of-type(n+4) { display: none; }
  .dp-body { grid-template-columns: 1fr; }
  .dp-side { border-left: none; border-top: 1px solid #e9eff1; }
  .dp-kpis, .dp-kpis.k6 { grid-template-columns: 1fr 1fr; }
  .dp-kpis.k6 div:nth-child(n+5) { display: none; }
  .dp-grid { display: none; }
  .dp-list { display: block; }
  .dp-list .dp-row { gap: 8px; }
  .dp-list .dp-row span:first-child { color: #8a959c; width: 40px; flex: 0 0 auto; }
  .dp-list .dp-row span.who { flex: 1; }
  .dp-filters span:not(.grow) { display: none; }
  .dp-table, .dp-table tbody { display: block; }
  .dp-table tr.dp-head { display: none; }
  .dp-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid #eef3f4; }
  .dp-table tr:nth-of-type(n+6) { display: none; }
  .dp-table td { display: block; border: none; padding: 0; }
  .dp-table td.c-id { grid-column: 1; }
  .dp-table td.c-amt { grid-column: 2; grid-row: 1; }
  .dp-table td.c-plat { grid-column: 1 / -1; color: #5d6b75; }
  .dp-table td.c-plat::after { content: " · " attr(data-prov); }
  .dp-table td.c-st { grid-column: 1; }
  .dp-table td.c-sti { grid-column: 2; }
  .dp-table td.c-prov, .dp-table td.c-pais, .dp-table td.c-date { display: none; }
}

/* Ocupación de clases (gimnasios) */
.occ-row { display: grid; grid-template-columns: 42px 1fr 1.2fr 44px 92px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef3f4; font-size: 11px; }
.occ-h { color: #8a959c; font-size: 10.5px; }
.occ-n b { display: block; font-size: 11.5px; } .occ-n small { color: #8a959c; font-size: 10px; }
.occ-bar { height: 8px; border-radius: 6px; background: #eef3f4; overflow: hidden; }
.occ-bar i { display: block; height: 100%; border-radius: 6px; background: #289FB7; }
.occ-bar i.full { background: #1257a8; }
.occ-c { font-weight: 700; color: #1d2329; text-align: right; }
@media (max-width: 767px) {
  .occ-row { grid-template-columns: 38px 1fr 40px; row-gap: 4px; }
  .occ-bar { grid-column: 2 / -1; grid-row: 2; }
  .occ-row .dp-st { grid-column: 2 / -1; justify-self: start; }
}