/* Shared visual language for tools embedded in Agenda Prink V2. */

:is(html.agenda-tool, html.agenda-embedded) {
  color-scheme: light;
  --tool-ink: #17191d;
  --tool-ink-soft: #25282e;
  --tool-muted: #656b75;
  --tool-subtle: #8b919b;
  --tool-line: #d9dde3;
  --tool-line-strong: #c8cdd5;
  --tool-surface: #ffffff;
  --tool-surface-soft: #f5f6f8;
  --tool-red: #e3062e;
  --tool-red-dark: #b90024;
  --tool-red-soft: #fff0f3;
  --tool-success: #18864b;
  --tool-shadow: 0 1px 2px rgba(23, 25, 29, 0.04), 0 10px 28px rgba(23, 25, 29, 0.06);
  --tool-focus: 0 0 0 3px rgba(227, 6, 46, 0.12);
}

:is(html.agenda-tool, html.agenda-embedded),
:is(html.agenda-tool, html.agenda-embedded) body {
  background: transparent;
  color: var(--tool-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  min-height: 0;
  overflow-x: hidden;
}

:is(html.agenda-tool, html.agenda-embedded) button,
:is(html.agenda-tool, html.agenda-embedded) input,
:is(html.agenda-tool, html.agenda-embedded) select,
:is(html.agenda-tool, html.agenda-embedded) textarea {
  font: inherit;
  letter-spacing: 0;
}

:is(html.agenda-tool, html.agenda-embedded) button {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

:is(html.agenda-tool, html.agenda-embedded) input:not([type="checkbox"]):not([type="radio"]),
:is(html.agenda-tool, html.agenda-embedded) select,
:is(html.agenda-tool, html.agenda-embedded) textarea {
  border-color: var(--tool-line-strong);
  border-radius: 6px;
}

:is(html.agenda-tool, html.agenda-embedded) input:not([type="checkbox"]):not([type="radio"]):focus,
:is(html.agenda-tool, html.agenda-embedded) select:focus,
:is(html.agenda-tool, html.agenda-embedded) textarea:focus {
  border-color: var(--tool-red);
  box-shadow: var(--tool-focus);
  outline: none;
}

/* PVP */

html.agenda-tool-pvp .app-shell {
  padding-bottom: 26px;
}

html.agenda-tool-pvp .topbar {
  align-items: center;
  background: #eef0f3;
  border: 1px solid var(--tool-line);
  border-radius: 7px;
  box-shadow: none;
  margin-bottom: 14px;
  min-height: 46px;
  padding: 4px 5px;
}

html.agenda-tool-pvp .tool-header-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

html.agenda-tool-pvp .sync-status {
  padding-left: 9px;
}

html.agenda-tool-pvp .settings-button {
  background: var(--tool-ink);
  border-color: var(--tool-ink);
  min-height: 36px;
}

html.agenda-tool-pvp .settings-button:hover {
  background: #30333a;
  border-color: #30333a;
}

html.agenda-tool-pvp .calculator-grid {
  gap: 16px;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
}

html.agenda-tool-pvp .panel,
html.agenda-tool-pvp .settings-panel {
  background: var(--tool-surface);
  border-color: var(--tool-line);
  border-radius: 7px;
  box-shadow: var(--tool-shadow);
}

html.agenda-tool-pvp .input-panel {
  padding: 20px;
}

html.agenda-tool-pvp label {
  color: var(--tool-ink);
  font-size: 13px;
}

html.agenda-tool-pvp .money-input,
html.agenda-tool-pvp select,
html.agenda-tool-pvp .quick-adjust-input {
  border-color: var(--tool-line-strong);
  border-radius: 6px;
}

html.agenda-tool-pvp .money-input:focus-within,
html.agenda-tool-pvp .quick-adjust-input:focus-within {
  border-color: var(--tool-red);
  box-shadow: var(--tool-focus);
  outline: none;
}

html.agenda-tool-pvp .mode-summary {
  background: var(--tool-surface-soft);
  border-color: var(--tool-line);
  border-left: 3px solid var(--tool-red);
  border-radius: 6px;
}

html.agenda-tool-pvp .quick-adjust {
  background: #fafbfc;
  border-color: var(--tool-line-strong);
  border-radius: 6px;
}

html.agenda-tool-pvp .toggle-row input {
  accent-color: var(--tool-red);
}

html.agenda-tool-pvp .secondary-button,
html.agenda-tool-pvp .primary-button,
html.agenda-tool-pvp .settings-button,
html.agenda-tool-pvp .icon-button,
html.agenda-tool-pvp .remove-button {
  border-radius: 6px;
}

html.agenda-tool-pvp .primary-button {
  background: var(--tool-red);
  border-color: var(--tool-red);
}

html.agenda-tool-pvp .primary-button:hover {
  background: var(--tool-red-dark);
  border-color: var(--tool-red-dark);
}

html.agenda-tool-pvp .result-panel {
  background: var(--tool-ink);
  border-color: var(--tool-ink);
  min-height: 318px;
}

html.agenda-tool-pvp .result-panel::before {
  background: var(--tool-red);
  height: 4px;
}

html.agenda-tool-pvp .result-price {
  color: #ff3155;
}

html.agenda-tool-pvp .result-panel .metric-grid > div {
  background: var(--tool-ink-soft);
  border-color: #3a3e46;
  border-radius: 6px;
}

html.agenda-tool-pvp .result-panel .metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.agenda-tool-pvp .settings-dialog {
  border: 1px solid var(--tool-line);
  border-radius: 8px;
}

html.agenda-tool-pvp .settings-product {
  background: var(--tool-surface-soft);
  border-color: var(--tool-line);
  border-radius: 6px;
}

/* Encuadernaciones */

html.agenda-tool-binding .app-header {
  align-items: center;
  background: #eef0f3;
  border: 1px solid var(--tool-line);
  border-radius: 7px;
  box-shadow: none;
  margin-bottom: 14px;
  min-height: 46px;
  padding: 4px 5px;
}

html.agenda-tool-binding .tool-header-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

html.agenda-tool-binding .sync-status {
  padding-left: 9px;
}

html.agenda-tool-binding .tabs {
  background: transparent;
  border: 0;
  gap: 3px;
  padding: 0;
}

html.agenda-tool-binding .tab {
  border-radius: 5px;
  font-size: 13px;
  font-weight: 850;
  min-height: 36px;
  padding: 7px 15px;
}

html.agenda-tool-binding .tab.is-active {
  background: var(--tool-ink);
  color: #fff;
  box-shadow: none;
}

html.agenda-tool-binding main {
  padding-bottom: 30px;
}

html.agenda-tool-binding .calculator-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: none;
  padding: 0;
}

html.agenda-tool-binding .calculator-panel > .panel-heading {
  margin: 0 0 12px;
  padding: 0 2px;
}

html.agenda-tool-binding .panel-heading h2 {
  color: var(--tool-ink);
  font-size: 19px;
  font-weight: 900;
}

html.agenda-tool-binding .calculator-grid {
  gap: 16px;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
}

html.agenda-tool-binding .calculator-fields {
  background: var(--tool-surface);
  border: 1px solid var(--tool-line);
  border-radius: 7px;
  box-shadow: var(--tool-shadow);
  padding: 20px;
}

html.agenda-tool-binding .panel {
  background: var(--tool-surface);
  border-color: var(--tool-line);
  border-radius: 7px;
  box-shadow: var(--tool-shadow);
}

html.agenda-tool-binding .field span,
html.agenda-tool-binding .check-row span,
html.agenda-tool-binding .charge-panel legend {
  color: var(--tool-muted);
  font-size: 13px;
}

html.agenda-tool-binding .field input,
html.agenda-tool-binding .field select,
html.agenda-tool-binding td input,
html.agenda-tool-binding td select {
  border-color: var(--tool-line-strong);
  border-radius: 6px;
}

html.agenda-tool-binding .charge-panel {
  background: var(--tool-surface-soft);
  border-color: var(--tool-line);
  border-radius: 6px;
}

html.agenda-tool-binding .check-row input {
  accent-color: var(--tool-red);
}

html.agenda-tool-binding .total-box {
  align-content: start;
  background: var(--tool-ink);
  border: 1px solid var(--tool-ink);
  border-radius: 7px;
  box-shadow: var(--tool-shadow);
  justify-items: end;
  overflow: hidden;
  position: relative;
  text-align: right;
}

html.agenda-tool-binding .total-box::before {
  background: var(--tool-red);
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

html.agenda-tool-binding .total-box > span {
  color: #aeb3bc;
  font-size: 13px;
  font-weight: 650;
  text-transform: uppercase;
  width: 100%;
}

html.agenda-tool-binding .total-box > strong {
  color: #ff3155;
  font-size: clamp(54px, 7vw, 86px);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 12px;
}

html.agenda-tool-binding .total-breakdown {
  width: 100%;
}

html.agenda-tool-binding .total-breakdown dt {
  text-align: left;
}

html.agenda-tool-binding .primary-button,
html.agenda-tool-binding .secondary-button,
html.agenda-tool-binding .danger-button {
  border-radius: 6px;
}

html.agenda-tool-binding .primary-button {
  background: var(--tool-red);
  border-color: var(--tool-red);
}

html.agenda-tool-binding .primary-button:hover {
  background: var(--tool-red-dark);
  border-color: var(--tool-red-dark);
}

html.agenda-tool-binding td.calculated {
  color: var(--tool-red-dark);
}

/* Precios xTool / 3D */

html.agenda-embedded {
  --background: transparent;
  --foreground: var(--tool-ink);
  --muted: var(--tool-muted);
  --line: var(--tool-line);
  --panel: var(--tool-surface);
  --panel-2: var(--tool-surface-soft);
  --accent: var(--tool-red);
  --accent-dark: var(--tool-red-dark);
  --accent-2: var(--tool-ink);
  --accent-3: var(--tool-muted);
  --ink: var(--tool-ink);
  --danger: #b42318;
  --shadow: var(--tool-shadow);
}

html.agenda-embedded body {
  background: transparent;
}

.agenda-embedded .app-shell {
  margin: 0;
  max-width: none;
  padding: 0 1px 28px;
  width: 100%;
}

@media (min-width: 681px) {
  .agenda-embedded .app-shell {
    align-items: start;
    column-gap: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .agenda-embedded .tabs {
    align-self: start;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-bottom: 14px;
  }

  .agenda-embedded .mode-switch {
    align-self: start;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .agenda-embedded .app-shell > .workspace,
  .agenda-embedded .app-shell > .settings-area,
  .agenda-embedded .app-shell > .panel {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
}

.agenda-embedded .tabs {
  background: #eef0f3;
  border: 1px solid var(--tool-line);
  border-radius: 7px;
  box-shadow: none;
  display: inline-grid;
  gap: 3px;
  grid-template-columns: repeat(3, max-content);
  margin: 0 0 10px;
  max-width: 100%;
  overflow: visible;
  padding: 3px;
  position: static;
  width: fit-content;
}

.agenda-embedded .tabs button,
.agenda-embedded .mode-switch button,
.agenda-embedded .subtabs button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--tool-muted);
  font-size: 13px;
  font-weight: 850;
  min-height: 38px;
}

.agenda-embedded .tabs button,
.agenda-embedded .mode-switch button {
  padding-inline: 14px;
  white-space: nowrap;
}

.agenda-embedded .tabs button:hover,
.agenda-embedded .mode-switch button:hover,
.agenda-embedded .subtabs button:hover {
  background: #e3e5e9;
  border-color: transparent;
  color: var(--tool-ink);
}

.agenda-embedded .tabs button.active,
.agenda-embedded .tabs button.active:hover,
.agenda-embedded .mode-switch button.active,
.agenda-embedded .mode-switch button.active:hover,
.agenda-embedded .subtabs button.active,
.agenda-embedded .subtabs button.active:hover {
  background: var(--tool-ink);
  border-color: var(--tool-ink);
  color: #fff;
}

.agenda-embedded .mode-switch,
.agenda-embedded .subtabs {
  background: #eef0f3;
  border: 1px solid var(--tool-line);
  border-radius: 7px;
  box-shadow: none;
  display: grid;
  gap: 3px;
  max-width: none;
  padding: 3px;
  width: 100%;
}

.agenda-embedded .mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, max-content);
  margin-bottom: 14px;
  max-width: 100%;
  width: fit-content;
}

.agenda-embedded .subtabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agenda-embedded .workspace {
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}

.agenda-embedded .panel {
  background: var(--tool-surface);
  border: 1px solid var(--tool-line);
  border-radius: 7px;
  box-shadow: var(--tool-shadow);
  padding: 18px;
}

.agenda-embedded .form-panel {
  gap: 18px;
}

.agenda-embedded .section-title {
  align-items: start;
  border-color: var(--tool-line);
  padding-bottom: 10px;
}

.agenda-embedded .section-title h2 {
  color: var(--tool-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.agenda-embedded .section-title p {
  color: var(--tool-muted);
  font-size: 13px;
}

.agenda-embedded .field {
  gap: 6px;
}

.agenda-embedded .field > span,
.agenda-embedded .field > label {
  color: var(--tool-muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.agenda-embedded input:not([type="checkbox"]):not([type="radio"]),
.agenda-embedded select,
.agenda-embedded textarea {
  background: #fff;
  border: 1px solid var(--tool-line-strong);
  border-radius: 6px;
  color: var(--tool-ink);
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.agenda-embedded input[type="checkbox"],
.agenda-embedded input[type="radio"] {
  accent-color: var(--tool-red);
}

.agenda-embedded .switch-row {
  background: var(--tool-surface-soft);
  border-color: var(--tool-line);
  border-radius: 6px;
}

.agenda-embedded button {
  border-radius: 6px;
}

.agenda-embedded button.primary {
  background: var(--tool-red);
  border-color: var(--tool-red);
  color: #fff;
}

.agenda-embedded button.primary:hover {
  background: var(--tool-red-dark);
  border-color: var(--tool-red-dark);
}

.agenda-embedded .summary-panel {
  background: var(--tool-ink);
  border-color: var(--tool-ink);
  color: #fff;
  order: 0;
  overflow: hidden;
  padding: 0;
}

.agenda-embedded .price-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 4px solid var(--tool-red);
  box-shadow: none;
  padding: 20px;
}

.agenda-embedded .price-card span {
  color: #ff9caf;
  text-align: right;
  width: 100%;
}

.agenda-embedded .price-card strong {
  color: #ff3155;
  font-size: clamp(54px, 7vw, 86px);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 12px;
  text-align: right;
  text-wrap: balance;
}

.agenda-embedded .price-card small {
  color: #cfd2d8;
  text-align: right;
  width: 100%;
}

.agenda-embedded .internal-panel,
.agenda-embedded .cost-accordion {
  background: var(--tool-ink-soft);
  border-color: #3a3e46;
  border-radius: 6px;
}

.agenda-embedded .summary-panel .internal-panel {
  margin: 0 14px 14px;
}

.agenda-embedded .summary-panel .internal-panel summary,
.agenda-embedded .summary-panel .breakdown dd,
.agenda-embedded .summary-panel .metric strong {
  color: #fff;
}

.agenda-embedded .summary-panel .internal-panel summary strong,
.agenda-embedded .summary-panel .breakdown dt,
.agenda-embedded .summary-panel .metric span {
  color: #aeb3bc;
}

.agenda-embedded .summary-panel .internal-panel summary::before,
.agenda-embedded .summary-panel .cost-accordion summary::before {
  background: #3a3e46;
  color: #fff;
}

.agenda-embedded .summary-panel .metric {
  background: #2c3036;
  border-color: #40454e;
  border-radius: 6px;
}

.agenda-embedded .history-card,
.agenda-embedded .metric,
.agenda-embedded .cost-accordion {
  border-radius: 6px;
}

.agenda-embedded .save-notice {
  background: #edf8f1;
  border-color: #b9dfc8;
  color: #146c3c;
}

.agenda-embedded .app-footer {
  display: none;
}

@media (max-width: 980px) {
  html.agenda-tool-pvp .calculator-grid,
  html.agenda-tool-binding .calculator-grid,
  .agenda-embedded .workspace {
    grid-template-columns: 1fr;
  }

  .agenda-embedded .summary-panel {
    order: 0;
    position: static;
  }
}

@media (max-width: 680px) {
  html.agenda-tool-pvp .app-shell,
  .agenda-embedded .app-shell {
    padding-bottom: 18px;
  }

  html.agenda-tool-pvp .topbar,
  html.agenda-tool-binding .app-header {
    margin-bottom: 10px;
  }

  html.agenda-tool-pvp .input-panel,
  html.agenda-tool-pvp .result-panel,
  html.agenda-tool-binding .calculator-fields,
  html.agenda-tool-binding .panel,
  .agenda-embedded .panel {
    padding: 14px;
  }

  html.agenda-tool-pvp .tool-header-actions,
  html.agenda-tool-binding .tool-header-actions {
    align-items: center;
    flex-direction: row;
  }

  html.agenda-tool-binding .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
  }

  html.agenda-tool-binding .tab {
    min-height: 36px;
  }

  html.agenda-tool-binding .total-box > strong {
    font-size: clamp(48px, 15vw, 70px);
  }

  .agenda-embedded .tabs,
  .agenda-embedded .mode-switch,
  .agenda-embedded .subtabs {
    margin-inline: 0;
    position: static;
  }

  .agenda-embedded .tabs button,
  .agenda-embedded .mode-switch button,
  .agenda-embedded .subtabs button {
    min-width: 0;
    min-height: 40px;
    padding-inline: 7px;
    white-space: normal;
  }

  .agenda-embedded .tabs button,
  .agenda-embedded .mode-switch button {
    padding-inline: 11px;
    white-space: nowrap;
  }

  .agenda-embedded .section-title p {
    display: none;
  }

  .agenda-embedded .price-card {
    padding: 16px;
  }

  .agenda-embedded .price-card strong {
    font-size: clamp(48px, 15vw, 70px);
  }

  .agenda-embedded .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agenda-embedded .actions button {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 440px) {
  html.agenda-tool-pvp .sync-status,
  html.agenda-tool-binding .sync-status {
    font-size: 10px;
    padding-left: 6px;
  }

  html.agenda-tool-pvp .settings-button,
  html.agenda-tool-binding .tab {
    font-size: 12px;
    padding-inline: 11px;
  }

  .agenda-embedded .tabs button,
  .agenda-embedded .mode-switch button,
  .agenda-embedded .subtabs button {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(html.agenda-tool, html.agenda-embedded) button {
    transition: none;
  }
}