/* =====================================================================
   panel.css — Panel principal: sidebar + secciones
   ===================================================================== */
.pnl-layout { display:flex; min-height:100vh; }

/* Sidebar */
.pnl-side {
  width:220px; background:var(--surface); border-right:1px solid var(--border);
  flex-shrink:0; display:flex; flex-direction:column; padding:18px 0;
}
.pnl-brand { display:flex; align-items:center; gap:10px; padding:0 18px 16px;
  border-bottom:1px solid var(--border); margin-bottom:10px; }
.pnl-logo { width:36px; height:36px; border-radius:var(--radius-md); background:var(--brand-bg);
  display:flex; align-items:center; justify-content:center; }
.pnl-logo svg { width:22px; height:22px; stroke:var(--brand); }
.pnl-bname { font-weight:600; font-size:14px; }
.pnl-bver { font-size:11px; color:var(--faint); }

.pnl-nav { flex:1; }
.pnl-nav button { display:flex; align-items:center; gap:11px; padding:11px 18px; width:100%;
  border:0; background:none; color:var(--ink-soft); font-size:14px; cursor:pointer;
  font-family:inherit; text-align:left; }
.pnl-nav button svg { width:18px; height:18px; }
.pnl-nav button:hover { background:var(--border-soft); }
.pnl-nav button.active { color:var(--brand); background:var(--brand-bg); font-weight:500; }

.pnl-user { display:flex; align-items:center; gap:9px; padding:14px 18px 0;
  border-top:1px solid var(--border); }
.pnl-avatar { width:30px; height:30px; border-radius:50%; background:var(--brand-bg);
  color:var(--brand); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; flex-shrink:0; }
.pnl-uinfo { flex:1; min-width:0; font-size:12px; }
.pnl-uname { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pnl-urole { color:var(--faint); }
.pnl-logout { background:none; border:0; color:var(--faint); font-size:18px; cursor:pointer; padding:4px; }
.pnl-logout:hover { color:var(--ink-soft); }

/* Main */
.pnl-main { flex:1; padding:24px 28px; min-width:0; }
.pnl-loading { padding:40px; text-align:center; color:var(--muted); }
.pnl-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; }
.pnl-head h1 { font-size:18px; margin:0 0 3px; font-weight:600; }
.pnl-head p { margin:0; font-size:13px; color:var(--muted); }

/* Botones */
.btn { border:1px solid var(--border); background:var(--surface); color:var(--ink-soft);
  padding:8px 14px; border-radius:var(--radius-md); font-size:13px; cursor:pointer;
  font-family:inherit; }
.btn:hover { background:var(--border-soft); }
.btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-primary:hover { background:var(--brand-dark); }
.btn-primary:disabled { opacity:.6; cursor:default; }

/* Filtros */
.pnl-filters { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.pnl-filters select { padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:13px; font-family:inherit; background:var(--surface); outline:none; flex:1; min-width:130px; }
.pnl-filters select:focus { border-color:var(--brand); }
.pnl-filters .search { position:relative; flex:2; min-width:180px; }
.pnl-filters .search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--faint); }
.pnl-filters .search input { width:100%; padding-left:34px; }

/* Tabla */
.tablebox { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); }
.tablebox table { width:100%; border-collapse:collapse; font-size:13px; }
.tablebox th, .tablebox td { padding:9px 13px; text-align:left; white-space:nowrap; }
.tablebox th { background:var(--border-soft); font-weight:500; color:var(--ink-soft); position:sticky; top:0; }
.tablebox tbody tr { border-top:1px solid var(--border); }
.tablebox tbody tr:hover { background:var(--bg); }
.tablebox .code { font-weight:600; }
.tablebox .empty { padding:18px; color:var(--muted); text-align:center; }

.pill { padding:2px 9px; border-radius:999px; font-size:11px; font-weight:500; }
.pill-open { background:var(--success-bg); color:#065f46; }
.pill-closed { background:var(--danger-bg); color:#991b1b; }
.pill-temp { background:var(--warn-bg); color:#92400e; }
.pill-proj { background:var(--brand-bg); color:#1e40af; }
.pill-gray { background:var(--border-soft); color:var(--ink-soft); }

.ico-ok { color:var(--success); }
.ico-no { color:var(--faint); }
.ico-ok svg, .ico-no svg { vertical-align:-3px; }

.legend { font-size:12px; color:var(--muted); margin:12px 2px 0; display:flex; gap:18px; }
.legend svg { vertical-align:-3px; margin-right:3px; }

/* Cards / catálogos */
.muted { color:var(--faint); font-weight:400; }
.cards-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.cards-row .card { flex:1; min-width:240px; }
.card { border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px;
  background:var(--surface); margin-bottom:16px; }
.card h3 { margin:0 0 12px; font-size:14px; font-weight:600; }

.tree-zone { display:flex; justify-content:space-between; align-items:center; padding:8px 6px;
  cursor:pointer; border-radius:6px; font-size:13.5px; }
.tree-zone:hover { background:var(--border-soft); }
.tree-zone .zname { display:flex; align-items:center; gap:7px; }
.tree-zone .zname svg { width:15px; height:15px; stroke:var(--muted); transition:transform .15s; }
.tree-zone.open .zname svg { transform:rotate(90deg); }
.tree-subs { display:none; padding:2px 0 6px 28px; }
.tree-subs.open { display:block; }
.tree-sub { display:flex; justify-content:space-between; padding:4px 6px; color:var(--ink-soft); font-size:13px; }

.concepts { display:flex; flex-wrap:wrap; gap:8px; }
.concept-tag { background:var(--border-soft); color:var(--ink-soft); padding:4px 11px;
  border-radius:999px; font-size:12.5px; }

.sync-row { display:flex; justify-content:space-between; align-items:center; gap:16px; }

/* Botones mini (acciones de tabla) */
.btn-mini { padding:5px 10px; font-size:12px; margin-left:4px; }
.btn-mini svg { vertical-align:-2px; margin-right:2px; }

/* Modal */
.modal-ov { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex;
  align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-box { background:var(--surface); border-radius:var(--radius-lg); padding:20px 22px;
  width:100%; max-width:440px; box-shadow:0 10px 40px rgba(0,0,0,0.25); }
.modal-head { display:flex; justify-content:space-between; align-items:center;
  font-size:15px; font-weight:600; margin-bottom:4px; }
.modal-x { background:none; border:0; font-size:16px; color:var(--faint); cursor:pointer; }
.modal-x:hover { color:var(--ink-soft); }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.flabel { display:block; font-size:12px; color:var(--ink-soft); margin-bottom:5px; }
.radio-row { display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; margin-bottom:6px; }
.radio-row input { width:auto; }

@media (max-width:720px) {
  .pnl-side { width:64px; }
  .pnl-bname, .pnl-bver, .pnl-nav span, .pnl-uinfo { display:none; }
  .pnl-nav button { justify-content:center; }
}