/* QHIcloud · MASTER UI Core CSS (CANON)
 * Ruta: /assets/master/css/master-ui.css
 *
 * Rol:
 * - Design system base para TODOS los paneles MASTER (presentes y futuros).
 * - Tokens + componentes reutilizables.
 * - NO incluye lógica ni “CSS de un panel concreto” (eso vive en catalog.css / activity.css / capacity.css, etc.).
 *
 * CANON:
 * - Clases alineadas con el markup real del panel.
 * - Sin dependencias. Sin frameworks. Sin @import remoto.
 */

/* ===== Reset / Base ===== */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height: 1.42;
  background: var(--bg);
  color: var(--text);
}

/* ===== Tokens ===== */
:root{
  --bg:#050816;

  --panel:rgba(15,23,42,.96);
  --panel-2:rgba(15,23,42,.90);

  --border:rgba(148,163,184,.18);
  --border-2:rgba(55,65,81,.70);

  --text:#e5e7eb;
  --muted:#9ca3af;
  --muted-2:#6b7280;

  --ok:#22c55e;
  --warn:#eab308;
  --err:#ef4444;

  --shadow: 0 18px 45px rgba(15,23,42,.85), 0 0 0 1px rgba(15,23,42,.9);

  --r-xl:18px;
  --r-lg:14px;
  --r-md:12px;
  --r-sm:10px;

  --gap:16px;
}

a{ color:#93c5fd; text-decoration:none; }
a:hover{ text-decoration:underline; }

.qhi-muted{ color: var(--muted); }
.qhi-loading{ font-size:.85rem; color: var(--muted); }
.qhi-error{ font-size:.85rem; color: var(--err); }

/* ===== Layout shell ===== */
.qhi-dashboard{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.qhi-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.qhi-title-block h1{
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.qhi-title-block p{
  font-size: .95rem;
  color: var(--muted);
  margin-top: 4px;
}

.qhi-navbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: .8rem;
  color: var(--muted);
}
.qhi-navbar a{ color:#93c5fd; }

.qhi-navbar-current{
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  border: 1px solid rgba(148,163,184,.35);
  color: var(--text);
  font-weight: 500;
}

/* Grid principal (paneles con 2 columnas) */
.qhi-grid{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1.4fr);
  gap: var(--gap);
}
@media (max-width: 900px){
  .qhi-grid{ grid-template-columns: minmax(0,1fr); }
  .qhi-header{ flex-direction:column; align-items:flex-start; }
}

/* IMPORTANT: permite que secciones ocupen todo el ancho del grid */
.qhi-span-all{ grid-column: 1 / -1; }

/* ===== Card ===== */
.qhi-card{
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.22), transparent 55%),
    radial-gradient(circle at bottom right, rgba(37,99,235,.20), transparent 55%),
    var(--panel);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.qhi-card h2{
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.qhi-card-subtitle{
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 12px;
}

.qhi-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
}
.qhi-row--between{ justify-content:space-between; }
.qhi-row--center{ align-items:center; }

/* Mensajes / alerts */
.qhi-alert{
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.18);
  color: var(--text);
  font-size: .82rem;
}
.qhi-alert--success{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.28);
}
.qhi-alert--error{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
}

/* ===== Forms ===== */
.qhi-field{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 150px;
}
.qhi-field > span{
  font-size: .74rem;
  color: var(--muted);
}
.qhi-field--actions{ justify-content:flex-end; }

.qhi-input,
.qhi-select,
.qhi-textarea{
  width:100%;
  min-height: 36px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: var(--r-sm);
  background: rgba(2,6,23,.38);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: .82rem;
  outline: none;
}
.qhi-input:focus,
.qhi-select:focus,
.qhi-textarea:focus{
  border-color: rgba(59,130,246,.85);
  box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}
.qhi-input::placeholder,
.qhi-textarea::placeholder{ color: var(--muted-2); }

.qhi-filters{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 10px;
  align-items:end;
}

.qhi-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

/* ===== Buttons ===== */
.qhi-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.40);
  background: rgba(15,23,42,.95);
  color: var(--text);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  gap: 6px;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
  text-decoration:none;
  white-space:nowrap;
}
.qhi-button:hover{
  background: rgba(37,99,235,.25);
  border-color: rgba(59,130,246,.90);
  transform: translateY(-.5px);
  text-decoration:none;
}
.qhi-button:disabled{ opacity:.5; cursor:default; transform:none; }

.qhi-button--primary{
  background: linear-gradient(135deg,#38bdf8,#6366f1);
  border-color: rgba(129,140,248,.80);
  color:#0b1120;
}
.qhi-button--primary:hover{
  background: linear-gradient(135deg,#0ea5e9,#4f46e5);
}

/* ===== Badges / Status ===== */
.qhi-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.10);
  color: var(--ok);
  font-size: .8rem;
}
.qhi-badge--warn{ background: rgba(234,179,8,.12); color: var(--warn); }
.qhi-badge--error{ background: rgba(239,68,68,.12); color: var(--err); }

.qhi-badge-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px rgba(34,197,94,.80);
}
.qhi-badge-dot--warn{ background: var(--warn); box-shadow: 0 0 10px rgba(234,179,8,.80); }
.qhi-badge-dot--error{ background: var(--err); box-shadow: 0 0 10px rgba(239,68,68,.80); }

.qhi-status-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
}
.qhi-status-pill--ok{ background: rgba(34,197,94,.12); color: var(--ok); }
.qhi-status-pill--warn{ background: rgba(234,179,8,.12); color: var(--warn); }
.qhi-status-pill--error{ background: rgba(239,68,68,.12); color: var(--err); }

.qhi-status-dot{ width: 8px; height: 8px; border-radius: 50%; }
.qhi-status-dot--ok{ background: var(--ok); }
.qhi-status-dot--warn{ background: var(--warn); }
.qhi-status-dot--error{ background: var(--err); }

/* ===== Key/Value blocks ===== */
.qhi-section-title{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}

.qhi-grid-2cols{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
@media (max-width: 720px){
  .qhi-grid-2cols{ grid-template-columns: 1fr; }
}

.qhi-kv{
  font-size: .85rem;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.qhi-kv-label{ font-size: .78rem; color: var(--muted); }
.qhi-kv-value{ font-size: .9rem; font-weight: 500; word-break: break-word; }

/* ===== Lists (services/events) ===== */
.qhi-services-list{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap: 8px;
  margin-top: 8px;
}

/* ===== Stats / tabs ===== */
.qhi-stat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(145px,1fr));
  gap: 10px;
}
.qhi-stat-card{
  min-height: 74px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: rgba(2,6,23,.28);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 4px;
}
.qhi-stat-card span{
  color: var(--muted);
  font-size: .76rem;
}
.qhi-stat-card strong{
  color: var(--text);
  font-size: 1.35rem;
  line-height:1.1;
}

.qhi-tabbar{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.qhi-tabbar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.72);
  color: var(--text);
  font-size: .78rem;
  text-decoration:none;
}
.qhi-tabbar a:hover{
  border-color: rgba(59,130,246,.80);
  background: rgba(37,99,235,.20);
  text-decoration:none;
}
.qhi-service-item{
  display:flex;
  flex-direction:column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.qhi-service-label{ font-size: .8rem; color: var(--text); }
.qhi-service-state{ font-size: .78rem; color: var(--muted); }

.qhi-events-list{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.qhi-event-item{
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  display:flex;
  flex-direction:column;
  gap: 4px;
  font-size: .82rem;
}
.qhi-event-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 8px;
}
.qhi-event-title{ font-weight: 500; }
.qhi-event-meta{ font-size: .75rem; color: var(--muted); }

.qhi-event-badge{
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  border: 1px solid rgba(148,163,184,.40);
}
.qhi-event-badge--info{ border-color: rgba(56,189,248,.80); color:#38bdf8; }
.qhi-event-badge--warn{ border-color: rgba(234,179,8,.80); color: var(--warn); }
.qhi-event-badge--error{ border-color: rgba(248,113,113,.80); color:#f87171; }

/* ===== Tables (CANON, usado por Inventory/Jobs/Orders/Nodes/etc) ===== */
.qhi-table-wrap{
  width:100%;
  overflow:auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  background: rgba(2,6,23,.25);
}

.qhi-table{
  width:100%;
  border-collapse: collapse;
  font-size: .82rem;
  line-height: 1.35;
}

.qhi-table thead th{
  text-align:left;
  font-weight:600;
  color: var(--text);
  padding: 10px 10px;
  border-bottom: 1px solid rgba(148,163,184,.20);
  background: rgba(15,23,42,.85);
  position: sticky;
  top: 0;
  z-index: 1;
}

.qhi-table tbody td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  vertical-align: top;
  color: var(--text);
  word-break: break-word;
}
.qhi-table tbody tr:hover td{
  background: rgba(56,189,248,.06);
}

.qhi-table th:last-child,
.qhi-table td:last-child{
  text-align:left;
}

/* ===== details/summary + pre ===== */
details > summary{
  cursor:pointer;
  user-select:none;
  list-style:none;
}
details > summary::-webkit-details-marker{ display:none; }
details > summary:before{
  content:"▸";
  display:inline-block;
  margin-right: 8px;
  color: var(--muted);
  transform: translateY(-1px);
}
details[open] > summary:before{ content:"▾"; }

.qhi-card pre{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: rgba(2,6,23,.35);
  overflow:auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .78rem;
  line-height: 1.35;
}

/* ===== Footer ===== */
.qhi-footer{
  margin-top: 20px;
  font-size: .75rem;
  color: var(--muted-2);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.qhi-tag{
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.30);
  font-size: .7rem;
}
.qhi-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}

/* ===== Utilities (espaciado real: evita “apelotonado”) ===== */
.qhi-mt-6{ margin-top: 6px; }
.qhi-mt-10{ margin-top: 10px; }
.qhi-mt-12{ margin-top: 12px; }
.qhi-mt-16{ margin-top: 16px; }

.qhi-mb-6{ margin-bottom: 6px; }
.qhi-mb-10{ margin-bottom: 10px; }
.qhi-mb-12{ margin-bottom: 12px; }
.qhi-mb-16{ margin-bottom: 16px; }

.qhi-ml-10{ margin-left: 10px; }
.qhi-hidden{ display:none !important; }
.qhi-hr{
  height:1px;
  background: rgba(148,163,184,.18);
  border:0;
  width:100%;
}