/* Ordenador simulado y entregas visuales; todos los estilos quedan dentro de la demo. */
#win .win__body { height: clamp(650px, 78vh, 820px); }
#win.has-panel .win__body { grid-template-columns: 230px minmax(0, 1fr) 440px; }
#win .sim-brand { width: 195px; }
#win .panel__scroll { padding: 0; }
#win .studio-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; padding: 10px 12px; background: var(--bar); border-bottom: 1px solid var(--line); }
#win .studio-tabs button, #win .channel-switch button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--soft); font-size: 12px; }
#win .studio-tabs button[aria-pressed="true"], #win .channel-switch button[aria-pressed="true"] { background: var(--green-tint); color: var(--green); border-color: var(--green-line); }
#win .studio-tabs button:disabled { opacity: .4; cursor: default; }
#win .studio-content { padding: 12px; }
#win .studio-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 12px 0 0; }
#win .studio-empty { padding: 25px; border: 1px dashed var(--line-2); border-radius: 10px; }
#win .studio-empty p { color: var(--soft); font-size: 13px; margin-top: 10px; }
#win .computer-info { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 12px; }
#win .computer-info > div { display: grid; gap: 2px; }
#win .computer-info b { font-size: 15px; }
#win .computer-info span { font-size: 10px; color: var(--muted); }
#win .computer-info .computer-state { flex: none; max-width: 120px; color: var(--green); border-radius: 20px; padding: 4px 8px; background: var(--green-tint); text-align: center; }
#win .computer-desktop { border: 1px solid #46504f; border-radius: 9px; overflow: hidden; background: #f5f6f5; }
#win .desktop-title { display: flex; align-items: center; gap: 9px; padding: 8px; color: #e4e8e7; background: #2d363b; font-size: 10px; }
#win .desktop-title > span { color: #a3ae94; font-size: 8px; white-space: nowrap; }
#win .desktop-title b { flex: 1; }
#win .desktop-title small { font-size: 9px; color: #bcc5c9; }
#win .browser-address { display: flex; gap: 6px; align-items: center; padding: 7px; background: #e8ecee; border-bottom: 1px solid #d3dadd; color: #54616a; font-size: 10px; }
#win .browser-address > span:last-child { min-width: 0; flex: 1; background: white; border-radius: 5px; padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#win .computer-viewport { position: relative; min-height: 300px; max-height: 480px; overflow: auto; color: #263238; background: #f3f5f4; }
#win .desktop-home { min-height: 300px; display: grid; align-content: center; justify-items: center; padding: 28px; text-align: center; background: radial-gradient(ellipse at top, #263b33, #101a20); color: #e6ede5; }
#win .desktop-cloud { font-size: 48px; color: #b4c58b; }
#win .desktop-home h3 { font-size: 16px; margin: 8px 0; }
#win .desktop-home p { font-size: 12px; color: #bbc7c6; max-width: 280px; }
#win .desktop-apps { display: flex; gap: 18px; margin-top: 25px; }
#win .desktop-apps > span { display: grid; justify-items: center; gap: 6px; font-size: 10px; }
#win .desktop-apps img { width: 27px; height: 27px; }
#win .computer-caption { display: grid; gap: 8px; padding: 12px 0; font-size: 12px; color: var(--soft); }
#win .computer-caption button { justify-self: start; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--green); padding: 5px 10px; font-size: 11px; }
#win .computer-history { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 11px; color: var(--soft); }
#win .computer-history li { border-left: 2px solid var(--green-line); padding-left: 8px; }
#win .demo-pointer { position: absolute; top: 35%; left: 65%; color: #171e24; font-size: 25px; transform: rotate(-35deg); filter: drop-shadow(0 1px 1px white); animation: employee-pointer 1.6s ease-in-out infinite alternate; pointer-events: none; }
#win .demo-pointer small { position: absolute; top: 28px; left: 0; transform: rotate(35deg); background: #a9bb79; color: #10170c; border-radius: 4px; padding: 3px 6px; white-space: nowrap; font: 9px var(--sans); }
@keyframes employee-pointer { to { top: 62%; left: 40%; } }
#win .drive-preview { padding: 14px; background: #fff; min-height: 300px; }
#win .sheet-title { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 12px; border-bottom: 1px solid #dce2e5; }
#win .drive-preview .sheet-title { padding: 0 0 12px; }
#win .drive-files { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 15px; }
#win .drive-files > div { display: flex; flex-direction: column; border: 1px solid #d9e0e5; border-radius: 8px; overflow: hidden; background: #f6f8fa; }
#win .drive-files .selected-file { box-shadow: 0 0 0 2px #8aa0d1; }
#win .drive-files img { width: 100%; height: 110px; object-fit: cover; }
#win .drive-files b { font-size: 11px; padding: 8px 8px 0; }
#win .drive-files small { font-size: 9px; padding: 5px 8px 10px; color: #5a6670; }
#win .file-glyph { display: grid; place-items: center; height: 110px; font-size: 50px; color: #5381c5; background: #ebf1fa; }
#win .channel-switch { display: flex; gap: 8px; margin-bottom: 12px; }
#win .channel-switch button { flex: 1; border: 1px solid var(--line-2); }
#win .social-post { background: white; color: #263238; border: 1px solid #dce0e2; border-radius: 8px; overflow: hidden; font: 12px/1.5 var(--sans); }
#win .social-network { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f8fafb; border-bottom: 1px solid #e4e8eb; }
#win .social-network b { font-size: 12px; }
#win .social-network > span { font-size: 9px; color: #657078; margin-left: auto; }
#win .social-post header { display: flex; align-items: center; gap: 9px; padding: 13px 12px 5px; }
#win .social-post header > div { display: grid; }
#win .social-post header b { font-size: 12px; }
#win .social-post header small { font-size: 9px; color: #657078; }
#win .social-avatar { flex: none; display: grid; place-content: center; justify-items: center; width: 40px; height: 40px; background: #374631; color: #f3eadb; font: 24px/1 Georgia, serif; }
#win .social-avatar > span { font: 7px/1.5 var(--sans); }
#win .social-more { margin-left: auto; color: #7f878d; }
#win .post-copy { white-space: pre-line; padding: 9px 12px 13px; font-size: 12px; line-height: 1.6; }
#win .social-photo { display: block; width: 100%; height: auto; }
#win .social-actions { display: flex; justify-content: space-around; padding: 12px 5px; border-top: 1px solid #e7ebed; color: #606c74; font-size: 10px; }
#win .social-post--ig .social-avatar { border-radius: 50%; outline: 2px solid #b34b73; outline-offset: 2px; }
#win .social-post--ig .social-photo { aspect-ratio: 1; object-fit: cover; }
#win .social-ig-actions { padding: 10px 12px 0; font-size: 21px; }
#win .social-ig-actions > span { float: right; }
#win .approval-card { border: 1px solid var(--green-line); background: #202b20; border-radius: 10px; padding: 14px; margin-top: 12px; }
#win .approval-card > b { color: #dce7c9; font-size: 13px; }
#win .approval-card p { font-size: 12px; color: #bec8b8; margin: 6px 0 12px; }
#win .approval-card > div { display: flex; flex-wrap: wrap; gap: 7px; }
#win .approval-card button, #win .approve-primary { border: 1px solid #536447; border-radius: 7px; background: transparent; color: #d1dfc0; padding: 8px 10px; font-size: 11px; font-weight: 600; }
#win button.approve-primary { background: #a9bb79; color: #11180e; border-color: #a9bb79; }
#win .approval-card button:disabled { opacity: .5; cursor: default; }
#win .approval-card > small { display: block; font-size: 10px; color: #a7b49e; margin-top: 10px; }
#win .approval-complete { margin-top: 12px; border: 1px solid var(--green-line); padding: 14px; border-radius: 8px; display: grid; gap: 4px; color: var(--green); font-size: 13px; }
#win .approval-complete span { color: var(--muted); font-size: 11px; }
#win .result-attachment { display: flex; gap: 12px; padding: 10px; }
#win .result-attachment > img { width: 90px; height: 95px; object-fit: cover; border-radius: 5px; }
#win .result-attachment > div { display: grid; min-width: 0; gap: 5px; }
#win .result-attachment h3 { margin: 0; font-size: 13px; }
#win .result-attachment small, #win .result-attachment span { font-size: 10px; color: var(--muted); }
#win .result-attachment button { text-align: left; color: var(--green); background: transparent; border: 0; padding: 0; font-size: 12px; }
#win .result-file { font-size: 36px; color: var(--green); }
#win .mail-preview, #win .document-preview, #win .sheet-preview, #win .calendar-preview { background: white; color: #27333a; border: 1px solid #dde3e7; border-radius: 8px; overflow: hidden; font-size: 12px; }
#win .mail-folder { display: flex; align-items: center; gap: 7px; padding: 11px; border-bottom: 1px solid #e0e5e8; background: #f7f9fb; }
#win .mail-folder > span { margin-left: auto; font-size: 9px; color: #687680; }
#win .mail-preview h3 { padding: 14px 14px 6px; font-size: 15px; }
#win .mail-preview dl { padding: 0 14px 10px; font-size: 10px; color: #66737c; }
#win .mail-preview dl > div { display: flex; gap: 8px; }
#win .mail-preview dd { overflow-wrap: anywhere; }
#win .mail-body { border-top: 1px solid #e7ecef; padding: 14px; line-height: 1.65; }
#win .mail-body p { margin: 0 0 12px; }
#win .mail-signature { border-left: 3px solid #8ba36e; padding-left: 12px; display: grid; gap: 3px; font-size: 11px; }
#win .mail-signature b { font-size: 13px; }
#win .mail-signature small { font-size: 9px; color: #6d7a81; }
#win .mail-attachment { margin: 0 14px 14px; padding: 10px; background: #f2f5f6; border: 1px solid #dce2e5; border-radius: 5px; }
#win .mail-attachment small { display: block; font-size: 9px; color: #66737c; }
#win .mail-pending, #win .sent-receipt { padding: 10px 14px; font-size: 10px; background: #f4f1e5; color: #6a5c29; }
#win .sent-receipt { background: #eaf3e7; color: #365b32; }
#win .wa-preview { border-radius: 8px; overflow: hidden; background: #eee9dd; color: #203a36; }
#win .wa-preview > header { padding: 12px; background: #f2f5f4; display: flex; gap: 10px; align-items: center; }
#win .wa-preview header > div { display: grid; font-size: 12px; }
#win .wa-preview header small { font-size: 9px; color: #687e76; }
#win .wa-log { display: grid; gap: 20px; padding: 20px 12px; font-size: 12px; background: #eae6db; color: #203a36; }
#win .wa-log p { padding: 10px; border-radius: 8px; max-width: 85%; box-shadow: 0 1px 2px #0001; }
#win .wa-customer { background: #fff; justify-self: start; }
#win .wa-message { background: #d9f8c5; justify-self: end; }
#win .wa-message small { display: block; text-align: right; font-size: 9px; color: #60816c; margin-top: 6px; }
#win .wa-preview footer { font-size: 9px; padding: 10px; background: #f3f5f4; }
#win .sheet-preview table { width: 100%; border-collapse: collapse; font-size: 11px; }
#win .sheet-preview caption { text-align: left; padding: 10px; font-size: 9px; color: #69777e; }
#win .sheet-preview th, #win .sheet-preview td { padding: 8px; border: 1px solid #dce3e7; text-align: left; }
#win .sheet-preview th { background: #eef3f0; color: #5a6b62; font-weight: 500; }
#win .sheet-chart { padding: 20px 12px; display: grid; gap: 12px; }
#win .sheet-chart span { width: var(--bar); min-width: 150px; padding: 8px; background: #cfdfc2; color: #2e4c31; font-size: 10px; }
#win .calendar-slot { display: flex; gap: 15px; padding: 15px; border-top: 1px solid #e1e7eb; }
#win .calendar-slot time { color: #6b7880; font-size: 10px; }
#win .calendar-slot > div { border-left: 3px solid #7097d0; padding: 8px; background: #e8f0fb; display: grid; flex: 1; }
#win .calendar-slot small { font-size: 10px; color: #64778e; }
#win .calendar-preview > p { padding: 12px; font-size: 10px; }
#win .document-preview { padding: 22px; }
#win .document-preview > small { letter-spacing: .1em; color: #748762; font-size: 9px; }
#win .document-preview h3 { margin: 15px 0; font: 23px/1.2 Georgia, serif; }
#win .document-preview dl { display: grid; gap: 12px; }
#win .document-preview dt { color: #4f6541; font-weight: 600; }
#win .document-preview dd { margin: 4px 0; }
#win .document-preview footer { border-top: 1px solid #dce2df; padding-top: 15px; margin-top: 20px; font-size: 9px; color: #849087; }
#win .studio-routines { display: grid; gap: 10px; }
#win .studio-routines article { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--raise); }
#win .studio-routines b { font-size: 13px; }
#win .studio-routines small { display: block; color: var(--green); font-size: 11px; margin: 4px 0; }
#win .studio-routines p { color: var(--muted); font-size: 12px; }
@media (max-width: 1100px) {
  #win.has-panel .win__body { grid-template-columns: 230px minmax(0, 1fr); }
  #win .panel { width: min(460px, 92%); }
}
@media (max-width: 768px) {
  #win .win__body, #win.has-panel .win__body { grid-template-columns: minmax(0, 1fr); height: min(700px, calc(100svh - 70px)); min-height: 510px; }
  #win .panel { width: 100%; max-height: 94%; height: 94%; }
  #win .computer-viewport { max-height: 420px; }
  #win .sim-toolbar__end .sim-badge { display: none; }
  #win .sim-toolbar #trial-call { display: inline-block; font-size: 10px; padding: 5px 7px; }
  #win .sim-brand { width: auto; }
  #win .sim-toolbar { gap: 8px; }
  #win .sim-tab { display: none; }
  #win .result-attachment > img { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  #win .demo-pointer { animation: none; }
}

#win .side .search { min-width: 0; }
#win #studio-body[data-view="preview"] { display: flex; flex-direction: column; overflow: hidden; }
#win #studio-body[data-view="preview"] .studio-tabs { flex: none; }
#win #studio-body[data-view="preview"] .studio-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#win .preview-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
#win .approval-card, #win .approval-complete { flex: none; }
#win .approval-card { padding: 11px; }
#win .approval-card p { margin: 5px 0 9px; font-size: 11px; }