/* Client export of the Action plan (flag new_ui): diseno/new-ui/export-client.html.
   A preview over the app; the document itself (.xp-doc.ui-light) is always
   light because it is the PDF the client reads. The stand tiles reuse
   dashboard.css. Colors from css/ui-tokens.css. */
body.new-ui.xp-open { overflow: hidden; }
body.new-ui .xp-back {
  position: fixed; inset: 0; z-index: 960; display: flex; flex-direction: column;
  background: var(--ui-paper-2); font: 14.5px/1.55 var(--ui-font); color: var(--ui-ink);
}
body.new-ui .xp-back[hidden] { display: none; }
body.new-ui .xp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--ui-line); background: var(--ui-card);
}
body.new-ui .xp-bar > span { font-weight: 600; font-size: 14.5px; }
body.new-ui .xp-bar-acts { display: flex; align-items: center; gap: 8px; }
body.new-ui .xp-bar .upg-x { position: static; }
body.new-ui .xp-scroll { flex: 1; overflow: auto; padding: 32px 16px 64px; }

body.new-ui .xp-doc {
  max-width: 760px; margin: 0 auto; padding: 44px 52px 36px; box-sizing: border-box;
  background: var(--ui-card); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 12px;
  box-shadow: var(--ui-shadow);
}
body.new-ui .xp-doc :is(h1, h2, h3) { font-family: var(--ui-font); color: var(--ui-ink); }
body.new-ui .xp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--ui-line-2); }
body.new-ui .xp-ag { display: flex; align-items: center; gap: 10px; font-size: 15px; }
body.new-ui .xp-logo {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; flex: none;
  background: var(--ui-ink); color: var(--ui-card); font: 600 14px var(--ui-font);
}
body.new-ui .xp-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--ui-card); }
body.new-ui .xp-for { display: grid; text-align: right; font-size: 13px; color: var(--ui-ink-2); }
body.new-ui .xp-doc h1 { margin: 30px 0 4px; font-size: 30px; line-height: 1.15; letter-spacing: -.03em; font-weight: 600; }
body.new-ui .xp-lede { margin: 0; color: var(--ui-ink-2); }
body.new-ui .xp-doc section { margin-top: 30px; }
body.new-ui .xp-doc h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
body.new-ui .xp-muted { margin: 0; color: var(--ui-ink-2); font-size: 14px; }

/* The agency note: the voice that keeps the client. */
body.new-ui .xp-note { padding: 18px 20px; border-radius: 10px; background: var(--ui-paper-2); border: 1px solid var(--ui-line-2); }
body.new-ui .xp-note label { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ui-ink-3); margin-bottom: 6px; }
body.new-ui .xp-note label .ui-link { font-size: 12.5px; white-space: nowrap; flex: none; }
body.new-ui .xp-note textarea {
  box-sizing: border-box; min-height: 96px; field-sizing: content; resize: vertical; padding: 8px 10px; margin: 0 -10px;
  width: calc(100% + 20px); border: 1px dashed var(--ui-line); border-radius: 8px; background: transparent;
  font: 15.5px/1.6 var(--ui-font); color: var(--ui-ink); white-space: pre-wrap;
}
body.new-ui .xp-note textarea:focus { outline: 2px solid var(--ui-accent); outline-offset: 0; border-color: transparent; background: var(--ui-card); }
body.new-ui .xp-note-print { display: none; white-space: pre-wrap; font-size: 15.5px; line-height: 1.6; }
body.new-ui .xp-sign { margin: 10px 0 0; font-size: 13.5px; color: var(--ui-ink-2); }

/* Where the brand stands: the dashboard's tiles, side by side, without cards. */
body.new-ui .xp-stand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ui-line); border-radius: 10px; }
body.new-ui .xp-stand > .ui-kpi { padding: 16px 18px; min-width: 0; }
body.new-ui .xp-stand > .ui-kpi + .ui-kpi { border-left: 1px solid var(--ui-line-2); }
body.new-ui .xp-stand .big { font-size: 34px; }
body.new-ui .xp-stand .mid { font-size: 17px; }

body.new-ui .xp-did { list-style: none; margin: 0; padding: 0; }
body.new-ui .xp-did li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--ui-line-2); }
body.new-ui .xp-did li:first-child { padding-top: 0; }
body.new-ui .xp-date { font: 13px var(--ui-mono); color: var(--ui-ink-3); padding-top: 2px; }
body.new-ui .xp-did b { font-weight: 500; display: block; }
body.new-ui .xp-did span:not(.xp-date):not(.ui-tchip) { font-size: 13.5px; color: var(--ui-ink-2); }
body.new-ui .xp-note-s { margin: 12px 0 0; font-size: 13px; color: var(--ui-ink-3); }

body.new-ui .xp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
body.new-ui .xp-cols.one { grid-template-columns: minmax(0, 1fr); }
body.new-ui .xp-noneed { margin: 10px 0 0; }
body.new-ui .xp-did-free input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 15px;
  color: var(--ui-ink); background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 10px; }
body.new-ui .xp-did-free input:focus { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
body.new-ui .xp-did-print { display: none; margin: 0; font-size: 15px; line-height: 1.6; }
body.new-ui .xp-did-free .xp-empty-did { margin-top: 10px; }
body.new-ui .xp-empty-did { margin: 18px 0 0; padding: 12px 14px; border: 1px dashed var(--ui-line); border-radius: 10px; color: var(--ui-ink-2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
body.new-ui .xp-col { padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: 10px; min-width: 0; }
body.new-ui .xp-col h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--ui-ink-2); }
body.new-ui .xp-task + .xp-task { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ui-line-2); }
body.new-ui .xp-task b { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
body.new-ui .xp-task p { margin: 4px 0 0; font-size: 13.5px; color: var(--ui-ink-2); }
body.new-ui .xp-k { display: inline-block; margin-bottom: 6px; font-size: 12px; color: var(--ui-accent-ink); font-weight: 500; }
body.new-ui .xp-task pre { margin: 10px 0 6px; padding: 10px 12px; border-radius: 8px; background: var(--ui-paper-2); font: 12.5px/1.5 var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
body.new-ui .xp-task .ui-link { font-size: 13px; }

body.new-ui .xp-link { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
body.new-ui .xp-link a { color: var(--ui-accent-ink); font-weight: 500; text-decoration: none; }
body.new-ui .xp-link a:hover { text-decoration: underline; }
body.new-ui .xp-link .xp-muted { font-size: 13px; }
body.new-ui .xp-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--ui-line-2); font-size: 12.5px; color: var(--ui-ink-3); }
body.new-ui .xp-foot span:last-child { white-space: nowrap; }

@media (max-width: 900px) {
  body.new-ui .xp-bar { padding: 8px 12px; }
  body.new-ui .xp-bar > span { flex: 1 1 100%; }
  body.new-ui .xp-bar-acts { width: 100%; }
  body.new-ui .xp-bar-acts .ui-btn { flex: 1; height: 44px; justify-content: center; }
  body.new-ui .xp-scroll { padding: 12px 8px 40px; }
  body.new-ui .xp-doc { padding: 24px 18px; border-radius: 10px; }
  body.new-ui .xp-top { flex-direction: column; }
  body.new-ui .xp-for { text-align: left; }
  body.new-ui .xp-doc h1 { font-size: 24px; margin-top: 22px; }
  body.new-ui .xp-stand, body.new-ui .xp-cols { grid-template-columns: minmax(0, 1fr); }
  body.new-ui .xp-stand > .ui-kpi + .ui-kpi { border-left: 0; border-top: 1px solid var(--ui-line-2); }
  body.new-ui .xp-did li { grid-template-columns: 56px minmax(0, 1fr); }
  body.new-ui .xp-did .ui-tchip { grid-column: 2; justify-self: start; }
  body.new-ui .xp-foot { flex-direction: column; }
  body.new-ui :is(.xp-task, .xp-note label, .xp-link) .ui-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Download PDF: only the document, on white, as it looks on screen. */
@media print {
  body.new-ui.xp-printing > *:not(#xpBack) { display: none !important; }
  body.new-ui.xp-printing { overflow: visible; background: #fff; }
  body.new-ui.xp-printing .xp-back { position: static; background: #fff; display: block; }
  body.new-ui.xp-printing :is(.xp-bar, .xp-noprint, .xp-note textarea) { display: none !important; }
  body.new-ui.xp-printing .xp-note-print { display: block; }
  body.new-ui.xp-printing .xp-did-free input { display: none; }
  body.new-ui.xp-printing .xp-did-print { display: block; }
  body.new-ui.xp-printing .xp-did-free.empty { display: none; }
  body.new-ui.xp-printing .xp-scroll { padding: 0; overflow: visible; }
  body.new-ui.xp-printing .xp-doc { border: 0; box-shadow: none; padding: 0; max-width: none; zoom: .8; }
  body.new-ui.xp-printing :is(.xp-stand, .xp-col, .xp-task, .xp-note) { break-inside: avoid; }
  /* An A4 page is narrower than the phone breakpoint: keep the desktop layout. */
  body.new-ui.xp-printing .xp-top { flex-direction: row; }
  body.new-ui.xp-printing .xp-for { text-align: right; }
  body.new-ui.xp-printing .xp-doc h1 { font-size: 24px; margin-top: 18px; }
  body.new-ui.xp-printing .xp-doc section { margin-top: 18px; }
  body.new-ui.xp-printing .xp-stand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.new-ui.xp-printing .xp-stand > .ui-kpi + .ui-kpi { border-top: 0; border-left: 1px solid var(--ui-line-2); }
  body.new-ui.xp-printing .xp-stand .big { font-size: 28px; }
  body.new-ui.xp-printing .xp-cols { grid-template-columns: 1fr 1fr; }
  body.new-ui.xp-printing .xp-cols.one { grid-template-columns: 1fr; }
  body.new-ui.xp-printing .xp-did li { grid-template-columns: 64px minmax(0, 1fr) auto; }
  body.new-ui.xp-printing .xp-did .ui-tchip { grid-column: auto; }
  body.new-ui.xp-printing .xp-foot { flex-direction: row; margin-top: 20px; }
  body.new-ui.xp-printing .xp-link { margin-top: 16px; }
}
/* Page margins for the PDF, on a named page so the app's other prints keep theirs. */
body.new-ui.xp-printing .xp-back { page: xp; }
@page xp { size: A4; margin: 16mm; }