/* TP Context | Monitores V2 | Brand finish. Scoped to the existing Monitores route only. */
#view-monitors .tpm-shell {
  --tpm-mint: #20a0d7;
  --tpm-cyan: #70dcf2;
  --tpm-electric: #438bff;
  --tpm-line: rgba(97,184,221,.19);
  isolation: isolate;
  position: relative;
  padding: clamp(16px,2.5vw,36px);
  border: 1px solid rgba(91,159,202,.12);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 57% 30% at 86% 5%, rgba(22,131,183,.15), transparent 80%),
    radial-gradient(ellipse 31% 23% at 2% 53%, rgba(19,121,165,.10),transparent 85%),
    linear-gradient(90deg, rgba(76,158,199,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(76,158,199,.045) 1px, transparent 1px),
    linear-gradient(165deg, rgba(4,19,32,.97), rgba(3,14,25,.985));
  background-size: auto,auto,68px 68px,68px 68px,auto;
  box-shadow: 0 26px 65px rgba(1,7,14,.24), inset 0 1px 0 rgba(111,204,240,.07);
}
#view-monitors .tpm-shell::before {
  content: ''; position: absolute; inset:0 0 auto; height:3px;
  border-radius:22px 22px 0 0;
  background:linear-gradient(90deg, transparent, rgba(45,170,223,.8) 20%, rgba(56,131,255,.75) 59%,transparent);
  opacity:.75; pointer-events:none;
}
#view-monitors .tpm-heading { padding: 8px 0 8px; }
#view-monitors .tpm-heading h2 {
  font-size:clamp(34px,3.5vw,53px);
  color: #f6fbff;
  letter-spacing:-.055em;
  text-shadow: 0 4px 24px rgba(17,92,128,.18);
}
#view-monitors .tpm-heading .eyebrow {
  display:inline-flex;align-items:center;gap:10px;
  color:#69dff0;font-weight:800;letter-spacing:.145em;font-size:11px;
}
#view-monitors .tpm-heading .eyebrow::before {
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#2cabe1;
  box-shadow:0 0 0 4px rgba(44,171,225,.08),0 0 14px rgba(44,171,225,.6);
}
#view-monitors .tpm-heading p { color:#a9c4d4;max-width:710px;font-size:14px; }
#view-monitors .tpm-primary {
  border-color:rgba(59,188,244,.65);
  background:linear-gradient(110deg,#31a9dd 0%,#1597cf 60%,#1788b8 100%);
  color:#04232c;
  box-shadow:0 8px 30px rgba(7,148,208,.12),inset 0 1px 0 rgba(255,255,255,.26);
  transition:box-shadow .18s ease, filter .18s ease;
}
#view-monitors .tpm-primary:hover:not(:disabled) {filter:brightness(1.08);box-shadow:0 10px 34px rgba(7,148,208,.2)}
#view-monitors .tpm-primary:focus-visible,
#view-monitors .tpm-actions button:focus-visible,
#view-monitors .tpm-chart:focus-visible,
#view-monitors .tpm-rule-link:focus-visible {outline:2px solid #6cdeee;outline-offset:3px}
#view-monitors .tpm-summary {gap:14px; margin-top:10px;margin-bottom:26px;}
#view-monitors .tpm-summary>div {
  position:relative;min-height:104px;
  background:linear-gradient(137deg,rgba(23,59,82,.76),rgba(6,26,43,.94) 74%);
  border-color:var(--tpm-line);
  box-shadow:inset 0 1px 0 rgba(190,239,255,.07),0 12px 28px rgba(0,0,0,.12);
  overflow:hidden;
}
#view-monitors .tpm-summary>div::after {
  content:'';position:absolute;right:-17px;top:-32px;width:104px;height:104px;border-radius:50%;
  border:1px solid rgba(81,188,224,.13);box-shadow:0 0 0 25px rgba(83,186,238,.025);
  pointer-events:none;
}
#view-monitors .tpm-summary>div:nth-child(3) {border-color:rgba(34,156,209,.27);background:linear-gradient(137deg,rgba(10,53,71,.62),rgba(7,32,45,.94))}
#view-monitors .tpm-summary>div:nth-child(3) strong {color:#56c2f1}
#view-monitors .tpm-summary span {color:#a5c7d8;letter-spacing:.012em}
#view-monitors .tpm-summary strong {font-size:clamp(27px,2.6vw,38px);color:#f1fbff;letter-spacing:-.03em}
#view-monitors .tpm-toolbar{border:1px solid rgba(95,157,192,.15);padding:16px;background:linear-gradient(135deg,rgba(10,32,50,.6),rgba(5,21,34,.75));border-radius:17px;margin-bottom:13px}
#view-monitors .tpm-toolbar label {color:#a7c7d8;font-weight:600}
#view-monitors .tpm-toolbar input,
#view-monitors .tpm-toolbar select,
#view-monitors .tpm-dialog input:not([type='checkbox']),
#view-monitors .tpm-dialog select {
  background:rgba(6,22,36,.94);border-color:rgba(108,177,208,.29);color:#eefaff;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.13);
}
#view-monitors .tpm-toolbar input:focus,
#view-monitors .tpm-toolbar select:focus,
#view-monitors .tpm-dialog input:focus,
#view-monitors .tpm-dialog select:focus {outline:2px solid rgba(64,170,215,.58);outline-offset:1px}
#view-monitors .tpm-feedback{color:#87bdcc;min-height:20px}
#view-monitors .tpm-table-scroll{border-color:rgba(73,156,189,.26);box-shadow:0 13px 32px rgba(0,0,0,.19);background:linear-gradient(155deg,rgba(13,36,54,.95),rgba(5,19,32,.99))}
#view-monitors .tpm-table thead {background:linear-gradient(100deg,rgba(18,54,71,.97),rgba(16,43,66,.99))}
#view-monitors .tpm-table th {color:#96ddeb;font-size:10.5px;border-bottom-color:rgba(77,174,208,.35);letter-spacing:.08em}
#view-monitors .tpm-table .tpm-empty{grid-column:1 / -1}
#view-monitors .tpm-table td {border-bottom-color:rgba(92,178,212,.12)}
#view-monitors .tpm-table tbody tr:hover {background:rgba(31,111,137,.12)}
#view-monitors .tpm-name strong {font-size:13px;font-weight:750}
#view-monitors .tpm-chart {color:#5abee9;font-weight:650}
#view-monitors .tpm-chart:hover {color:#a1e3ff}
#view-monitors .tpm-engine-label {color:#b4d1db;line-height:1.35;display:inline-block}
#view-monitors .tpm-badge {border-radius:7px;}
#view-monitors .tpm-badge.active {box-shadow:0 0 18px rgba(32,150,201,.055)}
#view-monitors .tpm-actions button {background:linear-gradient(147deg,rgba(31,74,96,.89),rgba(11,42,63,.97));border-color:rgba(103,184,211,.31);transition:background .18s ease,border-color .18s ease}
#view-monitors .tpm-actions button:hover:not(:disabled) {border-color:rgba(86,185,228,.75);background:#184763}
#view-monitors .tpm-caption{color:#9ab8c9;margin-top:16px}
#view-monitors .tpm-help {background:linear-gradient(105deg,rgba(9,37,53,.88),rgba(3,20,33,.95));border-color:rgba(77,169,208,.26);box-shadow:inset 3px 0 0 #2499cb,0 8px 25px rgba(0,0,0,.09)}
#view-monitors .tpm-dialog {border-color:rgba(103,197,218,.48);background:radial-gradient(ellipse 85% 45% at 86% 0%,rgba(14,134,162,.16),transparent),linear-gradient(150deg,#153549,#061827 85%);box-shadow:0 35px 100px rgba(0,0,0,.79),inset 0 1px 0 rgba(135,211,240,.17)}
#view-monitors .tpm-dialog::backdrop{background:rgba(0,9,17,.82)}
#view-monitors .tpm-dialog .eyebrow {color:#70c2e5}
#view-monitors .tpm-rule-link {color:#77e3ef;font-size:12px;text-decoration:underline;text-underline-offset:3px;line-height:1.4}
#view-monitors .tpm-rule-link[hidden] {display:none}
#view-monitors .tpm-hint {color:#abc9d4}
@media(max-width:760px){
  #view-monitors .tpm-shell{padding:16px 12px 88px;border-radius:14px;background-size:auto,auto,48px 48px,48px 48px,auto}
  #view-monitors .tpm-heading h2{font-size:38px}
  #view-monitors .tpm-summary{gap:10px}
  #view-monitors .tpm-summary>div{min-height:88px;padding:14px}
  #view-monitors .tpm-summary strong{font-size:27px}
  #view-monitors .tpm-toolbar{padding:11px}
  #view-monitors .tpm-table tbody tr {background:linear-gradient(140deg,rgba(18,53,72,.96),rgba(4,23,39,.98));border-color:rgba(83,176,205,.29);box-shadow:inset 0 1px 0 rgba(154,219,242,.07),0 9px 26px rgba(0,0,0,.12)}
  #view-monitors .tpm-dialog{max-height:90dvh}
}
@media(prefers-reduced-motion:reduce){#view-monitors .tpm-primary,#view-monitors .tpm-actions button{transition:none}}