/* ============================================================
   SYMPHO · PAKAL — DCIM styles
   rack elevation · component tree · lifecycle · copilot · photo slots
   accent: --pakal (blue). Reuses shared primitives from sympho.css.
   ============================================================ */

.pakal { --c: var(--pakal); }

/* ---------------- role switcher (vertical, 5 roles) reuses root pattern ---------------- */

/* ---------------- page head ---------------- */
.pk-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }

/* ---------------- KPI / cockpit ---------------- */
.pk-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 1100px) { .pk-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.pk-health-ring { position: relative; width: 132px; height: 132px; flex: none; }

/* state pill colors (asset states) */
.pk-state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.pk-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pk-state[data-s="Producción"] { background: color-mix(in oklch, var(--ok) 16%, transparent); color: color-mix(in oklch, var(--ok) 82%, white); }
.pk-state[data-s="Bodega"] { background: color-mix(in oklch, var(--pakal) 16%, transparent); color: color-mix(in oklch, var(--pakal) 82%, white); }
.pk-state[data-s="Reservado"] { background: color-mix(in oklch, var(--zamna) 18%, transparent); color: color-mix(in oklch, var(--zamna) 82%, white); }
.pk-state[data-s="RMA"] { background: color-mix(in oklch, var(--warn) 20%, transparent); color: color-mix(in oklch, var(--warn) 80%, white); }
.pk-state[data-s="Retiro"] { background: color-mix(in oklch, var(--bad) 20%, transparent); color: color-mix(in oklch, var(--bad) 84%, white); }
.pk-state[data-s="Desmontado"] { background: var(--surface-3); color: var(--text-3); }

/* health dot inline */
.pk-health { display: inline-flex; align-items: center; gap: 7px; }
.pk-health-bar { width: 46px; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pk-health-bar > i { display: block; height: 100%; border-radius: 999px; }

/* ---------------- master/detail (parque) ---------------- */
.pk-split { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .pk-split { grid-template-columns: 1fr; } }

.pk-row-sel { background: var(--pakal-dim) !important; box-shadow: inset 3px 0 0 var(--pakal); }

/* ---------------- asset detail / ficha ---------------- */
.pk-ficha { position: sticky; top: 0; }
.pk-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pk-spec > div { background: var(--surface); padding: 10px 12px; }
.pk-spec .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-4); }
.pk-spec .v { font-size: 13px; color: var(--text); margin-top: 3px; }

/* component tree */
.pk-comp { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); }
.pk-comp-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--pakal-dim); color: var(--pakal); }
.pk-comp-q { font-family: var(--mono); font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }

/* photo slot (user drops images) */
.pk-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk-photo { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
.pk-photo image-slot { width: 100%; height: 100%; display: block; }

/* ---------------- rack elevation ---------------- */
.pk-rack-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
@media (max-width: 980px) { .pk-rack-wrap { grid-template-columns: 1fr; } }
.pk-rack {
  width: 300px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 12px; box-shadow: var(--shadow);
}
.pk-rack-top, .pk-rack-bottom { height: 16px; border-radius: 7px; background: var(--surface-3); margin-bottom: 8px; display: grid; place-items: center; }
.pk-rack-bottom { margin: 8px 0 0; }
.pk-rack-grid { display: flex; flex-direction: column-reverse; gap: 2px; }
.pk-u {
  display: flex; align-items: center; gap: 8px; border-radius: 5px; padding: 0 9px;
  font-size: 11px; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.pk-u .pk-u-n { font-family: var(--mono); font-size: 9px; color: var(--text-4); width: 22px; flex: none; }
.pk-u .pk-u-label { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-u[data-cat="Servidores"] { background: color-mix(in oklch, var(--pakal) 16%, var(--surface)); border-color: color-mix(in oklch, var(--pakal) 36%, var(--line)); }
.pk-u[data-cat="Networking"] { background: color-mix(in oklch, var(--manik) 16%, var(--surface)); border-color: color-mix(in oklch, var(--manik) 36%, var(--line)); }
.pk-u[data-cat="Reservado"] { background: color-mix(in oklch, var(--zamna) 14%, var(--surface)); border-color: color-mix(in oklch, var(--zamna) 32%, var(--line)); border-style: dashed; }
.pk-u[data-cat="Pasivo"] { background: var(--surface-2); }
.pk-u[data-cat="Libre"] { background: repeating-linear-gradient(135deg, transparent, transparent 6px, oklch(1 0 0 / 0.025) 6px, oklch(1 0 0 / 0.025) 12px); border-style: dashed; color: var(--text-4); }
.pk-u[data-rma="true"]::after { content: "RMA"; position: absolute; right: 8px; font-family: var(--mono); font-size: 8.5px; color: var(--warn); letter-spacing: 0.1em; }
.pk-u.clk { cursor: pointer; transition: filter 0.12s; }
.pk-u.clk:hover { filter: brightness(1.12); }

/* location tree (CPD > fase > jaula > rack) */
.pk-loc-node { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
.pk-loc-node:hover { background: var(--surface-2); }
.pk-loc-node[data-on="true"] { background: var(--pakal-dim); }
.pk-loc-rail { display: flex; flex-direction: column; gap: 4px; }

/* ---------------- RMA logistics dual track ---------------- */
.pk-rma-steps { display: flex; flex-direction: column; }
.pk-rma-step { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; position: relative; }
.pk-rma-line { position: absolute; left: 13px; top: 26px; bottom: -2px; width: 2px; background: var(--line-2); }
.pk-rma-node { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: var(--surface-3); color: var(--text-4); border: 1px solid var(--line-2); }
.pk-rma-step[data-done="true"] .pk-rma-node { background: var(--pakal); color: oklch(0.16 0.02 264); border-color: transparent; }
.pk-rma-body { padding: 2px 0 18px; }

.pk-track { display: flex; gap: 12px; }
.pk-track-card { flex: 1; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; background: var(--bg-2); }
.pk-track-card[data-dir="in"] { border-color: color-mix(in oklch, var(--ok) 30%, var(--line-2)); }
.pk-track-card[data-dir="out"] { border-color: color-mix(in oklch, var(--warn) 30%, var(--line-2)); }

/* ---------------- lifecycle timeline ---------------- */
.pk-life { display: flex; align-items: stretch; gap: 0; }
.pk-life-stage { flex: 1; text-align: center; position: relative; padding: 0 6px; }
.pk-life-dot { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 12px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2); }
.pk-life-line { position: absolute; top: 23px; left: 50%; right: -50%; height: 2px; background: var(--line-2); z-index: 0; }
.pk-life-stage:last-child .pk-life-line { display: none; }

/* ---------------- matching / disponibilidad ---------------- */
.pk-req { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .pk-req { grid-template-columns: repeat(2, 1fr); } }
.pk-cand { border: 1px solid var(--line-2); border-radius: 13px; padding: 16px; background: var(--surface); transition: border-color 0.16s, transform 0.16s; }
.pk-cand:hover { border-color: color-mix(in oklch, var(--pakal) 42%, var(--line-2)); transform: translateY(-2px); }
.pk-cand[data-kind="whole"] { border-left: 3px solid var(--ok); }
.pk-cand[data-kind="parts"] { border-left: 3px solid var(--pakal); }
.pk-meter { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pk-meter > i { display: block; height: 100%; border-radius: 999px; background: var(--pakal); }

/* requirement chip */
.pk-reqchip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px;
  background: var(--pakal-dim); border: 1px solid color-mix(in oklch, var(--pakal) 38%, transparent);
  color: color-mix(in oklch, var(--pakal) 80%, white); font-size: 12.5px; font-family: var(--mono); }

/* ---------------- copilot chat (pakal blue) ---------------- */
.pk-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pk-chat-scroll { flex: 1; overflow-y: auto; padding: 8px 2px; display: flex; flex-direction: column; gap: 16px; }
.pk-msg { display: flex; gap: 11px; max-width: 92%; }
.pk-msg[data-role="user"] { align-self: flex-end; flex-direction: row-reverse; }
.pk-msg-av { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.pk-msg-av[data-role="ai"] { background: linear-gradient(150deg, color-mix(in oklch, var(--pakal) 96%, white), color-mix(in oklch, var(--pakal) 72%, black)); color: oklch(0.16 0.02 264); }
.pk-msg-av[data-role="user"] { background: var(--surface-3); color: var(--text-2); }
.pk-bubble { padding: 12px 15px; border-radius: 13px; font-size: 13.5px; line-height: 1.6; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); white-space: pre-wrap; }
.pk-msg[data-role="user"] .pk-bubble { background: var(--pakal-dim); border-color: color-mix(in oklch, var(--pakal) 30%, transparent); }
.pk-bubble.thinking { color: var(--text-3); }
.pk-typing { display: inline-flex; gap: 4px; align-items: center; }
.pk-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-4); animation: pkType 1.2s infinite var(--ease); }
.pk-typing i:nth-child(2) { animation-delay: 0.18s; }
.pk-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pkType { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.pk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-chip-q { padding: 8px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--text-2); font-size: 12.5px; cursor: pointer; transition: all 0.14s; font-family: var(--ui); text-align: left; }
.pk-chip-q:hover { border-color: color-mix(in oklch, var(--pakal) 50%, var(--line-2)); color: var(--text); background: var(--surface-3); }
.pk-composer { display: flex; gap: 9px; align-items: flex-end; padding-top: 12px; }
.pk-composer textarea { flex: 1; resize: none; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 12px 14px; color: var(--text); font-family: var(--ui); font-size: 13.5px; line-height: 1.5; outline: none; max-height: 120px;
  transition: border-color 0.15s, box-shadow 0.15s; }
.pk-composer textarea:focus { border-color: color-mix(in oklch, var(--pakal) 60%, var(--line-2)); box-shadow: 0 0 0 3px var(--pakal-dim); }
.pk-send { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--pakal); color: oklch(0.16 0.02 264); border: none; cursor: pointer; transition: filter 0.14s; }
.pk-send:hover { filter: brightness(1.06); }
.pk-send:disabled { opacity: 0.5; cursor: default; }
.pk-cite { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-family: var(--mono); font-size: 10.5px; color: var(--text-4); }

/* sync-with-manik badge */
.pk-sync { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 6px;
  background: var(--manik-dim); color: color-mix(in oklch, var(--manik) 82%, white); font-family: var(--mono); font-size: 10.5px; }