/* TransmissionLine Ampacidad · PLS-CADD · TRLI-AMP-WEB-024 · © 2026 TransmissionLine. */
:root {
  --pls-blue: #0c87d8;
  --pls-blue-bright: #2da3f3;
  --pls-navy: #0a2947;
  --pls-ink: #102a43;
  --pls-muted: #526d86;
  --pls-line: #bed5e9;
  --pls-soft: #edf6fd;
  --pls-red: #ee2929;
}

.tool-tabs-band {
  grid-template-columns: minmax(8rem, 1.08fr) repeat(7, minmax(0, 1fr)) !important;
}

.amp-pls-panel {
  width: 100%;
  margin: .16rem 0 0;
  padding: .72rem;
  color: var(--pls-ink);
  background: #f7fbff;
  border: 1px solid var(--pls-line);
  border-radius: .65rem;
  box-shadow: 0 7px 22px rgba(12, 70, 116, .07);
  font-family: "Source Sans 3", sans-serif;
}

.amp-pls-panel[hidden] { display: none !important; }

body.amp-pls-active .tool-tabs-root > [role="tabpanel"] { display: none !important; }

.pls-header,
.pls-toolbar,
.pls-card-title,
.pls-actions,
.pls-mode,
.pls-input-shell,
.pls-result-cell,
.pls-validation > div {
  display: flex;
  align-items: center;
}

.pls-header {
  justify-content: space-between;
  gap: 1rem;
  padding: .12rem .12rem .58rem;
  border-bottom: 2px solid var(--pls-blue);
}

.pls-header h3 {
  margin: .05rem 0;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 1.22rem;
  line-height: 1.08;
  color: var(--pls-navy);
}

.pls-header > div > p:last-child,
.pls-card-title span,
.pls-chart-note {
  margin: 0;
  font-size: .76rem;
  color: var(--pls-muted);
}

.pls-eyebrow {
  margin: 0;
  color: #246b9e;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.pls-source-badge {
  flex: 0 0 auto;
  padding: .34rem .6rem;
  color: #0d5589;
  background: #e2f2ff;
  border: 1px solid #93c7ed;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
}

.pls-toolbar {
  justify-content: space-between;
  gap: .55rem;
  padding: .48rem 0;
}

.pls-mode,
.pls-actions { gap: .28rem; }

.pls-mode {
  padding: .16rem;
  background: #e6f1fa;
  border: 1px solid var(--pls-line);
  border-radius: .5rem;
}

.pls-mode button,
.pls-actions button {
  min-height: 34px;
  padding: .36rem .65rem;
  border: 1px solid #9cc3e1;
  border-radius: .42rem;
  color: #17486e;
  background: #fff;
  font: 700 .72rem/1.15 "Source Sans 3", sans-serif;
  cursor: pointer;
}

.pls-mode button.is-active,
.pls-actions button.is-primary {
  color: #fff;
  border-color: var(--pls-blue);
  background: var(--pls-blue);
}

.pls-mode button:focus-visible,
.pls-actions button:focus-visible,
.pls-input-shell input:focus-visible,
.amp-pls-tab:focus-visible {
  outline: 3px solid rgba(45, 163, 243, .32);
  outline-offset: 1px;
}

.pls-layout {
  display: grid;
  grid-template-columns: minmax(33rem, .92fr) minmax(31rem, 1.08fr);
  gap: .55rem;
  align-items: start;
}

.pls-form-column {
  display: grid;
  gap: .42rem;
  min-width: 0;
}

.pls-card,
.pls-chart-card {
  min-width: 0;
  padding: .52rem;
  background: #fff;
  border: 1px solid var(--pls-line);
  border-radius: .55rem;
}

.pls-card-title {
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .38rem;
}

.pls-card-title h4 {
  margin: 0;
  font-size: .84rem;
  line-height: 1.1;
  color: var(--pls-navy);
}

.pls-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem .42rem;
}

.pls-field {
  display: grid;
  min-width: 0;
  gap: .16rem;
  margin: 0;
}

.pls-field.is-wide { grid-column: 1 / -1; }

.pls-field > span {
  min-height: 1.2em;
  font-size: .61rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #173c5c;
}

.pls-input-shell {
  min-width: 0;
  min-height: 35px;
  overflow: hidden;
  background: #fbfdff;
  border: 1px solid #a9c8e1;
  border-radius: .42rem;
}

.pls-input-shell:focus-within {
  border-color: var(--pls-blue);
  box-shadow: 0 0 0 2px rgba(45, 163, 243, .13);
}

.pls-input-shell input {
  width: 100%;
  min-width: 0;
  height: 33px;
  padding: .28rem .48rem;
  color: var(--pls-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: 600 .76rem/1 "Source Sans 3", sans-serif;
}

.pls-input-shell input[readonly] { background: #eef5fa; }

.pls-input-shell small {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding: 0 .38rem;
  color: #42647f;
  text-align: center;
  font-size: .64rem;
}

.pls-analysis-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .42rem;
}

body.pls-mode-current #pls-target-temperature { opacity: .55; }
body.pls-mode-temperature #pls-current { opacity: .55; }

.pls-status {
  padding: .38rem .52rem;
  color: #195d8d;
  background: #e9f5ff;
  border-left: 3px solid var(--pls-blue-bright);
  font-size: .72rem;
}

.pls-status[data-type="error"] {
  color: #9f2929;
  background: #fff0f0;
  border-left-color: #d83c3c;
}

.pls-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .28rem;
}

.pls-result-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .25rem;
  min-height: 38px;
  padding: .3rem .42rem;
  background: #f1f7fc;
  border: 1px solid #d2e2ef;
  border-radius: .38rem;
}

.pls-result-cell span {
  font-size: .62rem;
  line-height: 1.1;
  color: #49687f;
}

.pls-result-cell strong {
  font-size: .8rem;
  color: var(--pls-navy);
}

.pls-result-cell small {
  font-size: .58rem;
  color: #57748b;
}

.pls-validation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .32rem;
  padding: .42rem .5rem;
  color: #224c6b;
  background: #eef7ff;
  border: 1px solid #acd3f1;
  border-radius: .48rem;
  font-size: .68rem;
}

.pls-validation > div {
  align-items: flex-start;
  flex-direction: column;
  gap: .05rem;
}

.pls-validation p {
  grid-column: 1 / -1;
  margin: .05rem 0 0;
  color: #597386;
}

.pls-chart-card {
  position: sticky;
  top: .45rem;
}

.pls-chart {
  width: 100%;
  min-height: 370px;
  overflow: hidden;
  background: #fff;
}

.pls-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68vh;
}

.pls-chart-bg { fill: #fff; stroke: #101010; stroke-width: 1.4; }
.pls-chart-grid line { stroke: #111; stroke-width: .7; opacity: .72; shape-rendering: crispEdges; }
.pls-chart-grid text { fill: #111; font: 14px Arial, sans-serif; }
.pls-chart-curve,
.pls-chart-zero { fill: none; stroke: var(--pls-red); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.pls-chart-point { fill: var(--pls-blue); stroke: #fff; stroke-width: 2.5; }
.pls-chart-guide { stroke: var(--pls-blue); stroke-width: 1.4; stroke-dasharray: 6 5; }
.pls-chart-axis-label { fill: #111; font: 17px Arial, sans-serif; }
.pls-chart-note { padding: 0 .2rem .1rem; }

.amp-pls-tab .tool-tabs-trigger-primary { color: inherit; }

.tool-nav-item.amp-pls-side {
  width: 100%;
  color: rgba(246, 244, 234, .95);
}

.tool-nav-item.amp-pls-side.is-active {
  background: linear-gradient(135deg, rgba(12, 135, 216, .38), rgba(45, 163, 243, .2)) !important;
  border-color: rgba(143, 208, 255, .72) !important;
  box-shadow: inset 3px 0 0 var(--pls-blue-bright), 0 7px 16px rgba(2, 22, 40, .2);
}

.tool-nav-item.amp-pls-side.is-active .tool-nav-index,
.tool-nav-item.amp-pls-side.is-active span {
  color: #fff !important;
}

@media (max-width: 1180px) {
  .pls-layout { grid-template-columns: 1fr; }
  .pls-chart-card { position: static; }
  .pls-chart { min-height: 320px; }
}

@media (max-width: 820px) {
  .tool-tabs-band { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .amp-pls-panel { padding: .52rem; }
  .pls-header { align-items: flex-start; flex-direction: column; gap: .38rem; }
  .pls-toolbar { align-items: stretch; flex-direction: column; }
  .pls-mode,
  .pls-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .pls-actions button.is-primary { grid-column: 1 / -1; }
  .pls-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pls-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .tool-tabs-band { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .amp-pls-panel { padding: .42rem; border-radius: .5rem; }
  .pls-header h3 { font-size: 1.08rem; }
  .pls-header > div > p:last-child { font-size: .72rem; }
  .pls-mode,
  .pls-actions,
  .pls-form-grid,
  .pls-analysis-fields,
  .pls-results,
  .pls-validation { grid-template-columns: 1fr; }
  .pls-actions button.is-primary { grid-column: auto; }
  .pls-mode button,
  .pls-actions button { min-height: 44px; }
  .pls-input-shell { min-height: 42px; }
  .pls-input-shell input { height: 40px; font-size: 1rem; }
  .pls-result-cell { min-height: 42px; }
  .pls-validation p { grid-column: auto; }
  .pls-chart { min-height: 235px; overflow: hidden; }
  .pls-chart svg { min-width: 0; max-height: none; }
  .pls-chart-grid text { font-size: 12px; }
  .pls-chart-axis-label { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .amp-pls-panel *,
  .amp-pls-panel *::before,
  .amp-pls-panel *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .amp-pls-panel { box-shadow: none; border-color: #aac5da; }
  .pls-toolbar { display: none; }
  .pls-layout { grid-template-columns: 1fr; }
  .pls-chart-card { position: static; break-inside: avoid; }
}