/* The extranet over the PMS's stylesheets (lab/04-pms/podpad/index.css, design/studio.css, lab/05-hr/ui.css, the
   modules' crm/gym/store.css): its sections' colors and the few parts the PMS has no use for (tables, raw documents,
   the alerts pane, temperature lines). Loaded after the design, so its section hues win the tie with Studio's default.

   Sections are grouped by function, a band of hue each (Studio's rule: g1 at least ~25° from its neighbors, g2 follows
   in the band, g3 is g1 at ~9 % lightness). An object's icon wears its owner's hue: a tender is cyan wherever it shows.
     Buying, blue 190–250°        Licitaciones ~195°, Pedidos ~220°, EDI (the pipe orders travel in) ~245°
     Learning, violet ~272°       Universidad
     The market, magenta 295–335° Directorio ~300° (who), Catálogo ~330° (what they sell)
     Agreements and value         Contratos gold ~45°, Ahorros chartreuse ~72°
     Making, warm 15–35°          Producción ~25° (logistics, export)
     Quality, green 140–160°      Calidad ~150° (lots, cold chain)
     System, slate                Inicio, Perfil (Studio's default)
   Red and green stay for status (kept, broken), never for a section. */
html[data-design="studio"][data-section="tenders"], html[data-design="studio"] [data-section="tenders"] { --g1: #2ec5f0; --g2: #2f8bff; --g3: #05263a; }
html[data-design="studio"][data-section="orders"], html[data-design="studio"] [data-section="orders"] { --g1: #4f8bff; --g2: #5a5cff; --g3: #081a3a; }
html[data-design="studio"][data-section="edi"], html[data-design="studio"] [data-section="edi"] { --g1: #7066ff; --g2: #9a4dff; --g3: #0e0b38; }
html[data-design="studio"][data-section="learn"], html[data-design="studio"] [data-section="learn"] { --g1: #a85cff; --g2: #7f5cff; --g3: #1a0a30; }
html[data-design="studio"][data-section="directory"], html[data-design="studio"] [data-section="directory"] { --g1: #e85ce8; --g2: #b04dff; --g3: #2a0a2b; }
html[data-design="studio"][data-section="catalog"], html[data-design="studio"] [data-section="catalog"] { --g1: #ff4fa7; --g2: #ff6f7f; --g3: #2b0819; }
html[data-design="studio"][data-section="contracts"], html[data-design="studio"] [data-section="contracts"] { --g1: #f5c84b; --g2: #d9a520; --g3: #261b06; }
html[data-design="studio"][data-section="savings"], html[data-design="studio"] [data-section="savings"] { --g1: #c4e04a; --g2: #8fcf3a; --g3: #1d2606; }
html[data-design="studio"][data-section="production"], html[data-design="studio"] [data-section="production"] { --g1: #ff9a3d; --g2: #ff5a3d; --g3: #2c1206; }
html[data-design="studio"][data-section="quality"], html[data-design="studio"] [data-section="quality"] { --g1: #34d67f; --g2: #1fc7b0; --g3: #052a22; }

/* Icons in the pages: an object's mark and a task's icon in their section's hue (Studio paints every avatar one purple). */
html[data-design="studio"] .x .avatar.mark[data-section], html[data-design="studio"] .x .task-icon[data-section] {
  color: #fff; background: linear-gradient(145deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px -8px color-mix(in srgb, var(--g1) 80%, transparent);
}
html[data-design="studio"] .x .avatar.mark[style*="--mk"] { color: #fff; background: linear-gradient(145deg, var(--mk), color-mix(in srgb, var(--mk) 65%, #000)); }
html[data-design="studio"] .x .row-btn.on .avatar.mark { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }

#x-root { min-height: 100%; }
.x .page.wide { max-width: 1180px; }
.x .x-table { overflow-x: auto; }
.x .x-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.x .x-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.x .x-table td { padding: 9px 12px; vertical-align: top; }
.x .x-table tr + tr td { border-top: 1px solid var(--hairline); }
.x .x-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.x .x-table input, .x .x-table select { font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--label); max-width: 260px; }
.x .x-table input[type=number] { width: 96px; }
.x .x-table small { font-size: 11.5px; }
.x .x-pre, .x.sheet .x-pre { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--fill); font: 12px/1.5 var(--mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-all; max-height: 60vh; overflow: auto; }
.x .file .actions .btn, .x .file > div > .btn { margin: 0; }
.x .hero .avatar.xl { width: 64px; height: 64px; }
.x .head-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.x .form-card textarea, .x .form-card input:not([type=checkbox]), .x .form-card select { font: inherit; }
.x textarea.mono { font: 12px/1.5 var(--mono, ui-monospace, monospace); }
.x .x-spark { display: block; flex: none; }
.x .rows .wide .t { min-width: 0; }
.x .search { margin: 0; }
.x .task-icon .i { width: 19px; height: 19px; }

/* The alerts pane in the master pane (Menu | Alerts), in place of the PMS's Assistant. */
#alerts { padding: 0 12px 16px; }
#alerts .alerts-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 2px; }
#alerts .alerts-note { margin: 0 4px 8px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
#alerts .alerts-note .i { width: 14px; height: 14px; }
#alerts .alert { display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.35; }
#alerts .alert:hover { background: var(--fill-2, rgba(127, 127, 127, 0.12)); }
#alerts .alert.unread { font-weight: 600; }
#alerts .alert.unread::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--g1, #2ec5f0); margin-right: 7px; vertical-align: 1px; }
#alerts .alert small { display: block; color: var(--secondary); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
@media (max-width: 767px) { .x .x-table table { font-size: 12.5px; } .x .x-table td, .x .x-table th { padding: 8px; } }