/* ═══════════════════════════════════════════════════════════════════════
   Compras GP1 · TEMA «MASTER» (propuesta, 22-oct-2026)
   Toma los tokens de Master GP1 (public/css/app.css): rampa neutra cálida,
   barra lateral oscura con acento menta, tarjetas blancas, tabla densa con
   encabezado en versalitas. Todo va bajo body.tema-master: sin esa clase,
   este archivo no toca nada y la app se ve como antes.
   ═══════════════════════════════════════════════════════════════════════ */

body.tema-master {
  --n-0:#ffffff; --n-25:#faf9f6; --n-50:#f5f4f0; --n-100:#eceae3; --n-200:#e2e0d8;
  --n-300:#cecbc0; --n-400:#a5a299; --n-500:#767469; --n-600:#5f5e58; --n-700:#454440;
  --n-800:#2b2a27; --n-900:#1a1a18;
  --bg:var(--n-50); --surface:var(--n-0); --surface-alt:var(--n-25);
  --border:var(--n-200); --border-sutil:var(--n-100); --border-fuerte:var(--n-300);
  --text-1:var(--n-900); --text-2:var(--n-600); --text-3:var(--n-500);
  --accion:#0f6e56; --accion-h:#0c5945; --menta:#5DCAA5; --foco:#185fa5;
  --anillo:0 0 0 3px rgba(24,95,165,.25);
  --ok-fg:#067a57; --ok-bg:#e1f5ee; --warn-fg:#8f5700; --warn-bg:#faeeda;
  --err-fg:#c62828; --err-bg:#fcebeb; --info-fg:#185fa5; --info-bg:#e6f1fb;
  --fs-100:11px; --fs-200:12px; --fs-300:13px; --fs-400:14px; --fs-500:16px;
  --r-sm:6px; --r:8px; --r-lg:12px;
  --sombra-1:0 1px 2px rgba(26,26,24,.06);

  background: var(--bg); color: var(--text-1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-300);
}

/* ── Marco: barra lateral fija oscura + contenido ───────────────────────── */
.tema-master .gp1-marco { display: block; min-height: 0; }
.tema-master .gp1-menu {
  position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 100;
  background: var(--text-1); border: 0; padding: 0;
  display: flex; flex-direction: column; overflow-y: auto;
}
.tema-master .gp1-banda ~ .gp1-marco .gp1-menu { top: 30px; }
.tema-master .gp1-logo {
  display: block; padding: 1.25rem 16px 16px; color: #fff;
  font-size: var(--fs-500); font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.1);
}
.tema-master .gp1-logo span { color: var(--menta); }
.tema-master .gp1-quien {
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff; font-size: var(--fs-300); font-weight: 500;
}
.tema-master .gp1-quien a { color: rgba(255,255,255,.5); font-size: var(--fs-200); font-weight: 400; }
.tema-master .gp1-quien a:hover { color: #fff; }
.tema-master .gp1-grupo {
  font-size: var(--fs-100); color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .8px; padding: 14px 16px 4px;
}
.tema-master .gp1-menu > a {
  display: block; padding: 8px 16px; color: rgba(255,255,255,.7);
  font-size: var(--fs-300); border-left: 3px solid transparent; transition: background .15s;
}
.tema-master .gp1-menu > a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.tema-master .gp1-menu > a.activo {
  background: rgba(255,255,255,.1); color: #fff; border-left-color: var(--menta);
}
.tema-master .gp1-pie {
  margin-top: auto; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1);
}
.tema-master .gp1-pie a { color: rgba(255,255,255,.5); font-size: var(--fs-200); }
.tema-master .gp1-pie a:hover { color: #fff; }

.tema-master .gp1-contenido { margin-left: 220px; padding: 0; min-width: 0; }
.tema-master .gp1-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: .875rem 24px; font-size: var(--fs-500); font-weight: 600;
}
.tema-master .gp1-topbar small { color: var(--text-3); font-weight: 400; font-size: var(--fs-300); margin-right: 6px; }
.tema-master .gp1-cuerpo { padding: 24px; }

/* ── Tarjetas de xCrud ──────────────────────────────────────────────────── */
.tema-master .xcrud .card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sombra-1);
}
.tema-master .xcrud .card-body { padding: 1.25rem 24px; }
.tema-master .xcrud h2 {
  font-size: var(--fs-400); font-weight: 600; color: var(--text-1);
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.tema-master .xcrud h2 small { color: var(--text-3); font-size: var(--fs-300); }
.tema-master .xcrud-nested-container .card { box-shadow: none; border-color: var(--border-sutil); }

/* ── Botones: negro = principal, verde = crear/autorizar, contorno = el resto ── */
.tema-master .xcrud .btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: var(--r); font-size: var(--fs-300); font-weight: 500;
  padding: 6px 14px; box-shadow: none; border: 1px solid transparent;
}
.tema-master .xcrud .btn-sm { padding: 3px 10px; font-size: var(--fs-200); }
.tema-master .xcrud .btn-group > .btn { border-radius: 0; }
.tema-master .xcrud .btn-group > .btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.tema-master .xcrud .btn-group > .btn:last-child { border-radius: 0 var(--r) var(--r) 0; }
.tema-master .xcrud .btn-group > .btn:only-child { border-radius: var(--r); }
.tema-master .xcrud .btn-primary { background: var(--n-900); border-color: var(--n-900); color: #fff; }
.tema-master .xcrud .btn-primary:hover { background: var(--n-700); }
.tema-master .xcrud .btn-success { background: var(--accion); border-color: var(--accion); color: #fff; }
.tema-master .xcrud .btn-success:hover { background: var(--accion-h); }
.tema-master .xcrud .btn-warning,
.tema-master .xcrud .btn-info,
.tema-master .xcrud .btn-light,
.tema-master .xcrud .btn-secondary,
.tema-master .xcrud .btn-dark {
  background: var(--surface); border-color: var(--border); color: var(--text-1);
}
.tema-master .xcrud .btn-warning:hover,
.tema-master .xcrud .btn-info:hover,
.tema-master .xcrud .btn-light:hover,
.tema-master .xcrud .btn-secondary:hover { background: var(--bg); }
.tema-master .xcrud .btn-danger { background: var(--surface); border-color: var(--err-fg); color: var(--err-fg); }
.tema-master .xcrud .btn-danger:hover { background: var(--err-bg); }
.tema-master .xcrud .btn.active,
.tema-master .xcrud .btn-light.active { background: var(--n-900); border-color: var(--n-900); color: #fff; }
.tema-master .xcrud .btn:focus { box-shadow: var(--anillo); }
.tema-master .xcrud-top-actions { margin-bottom: 12px; }
.tema-master .xcrud-search-toggle { margin-left: 6px; }

/* ── Tabla densa ────────────────────────────────────────────────────────── */
.tema-master .xcrud-list-container { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.tema-master .xcrud-list.table { margin: 0; font-size: 12.5px; border: 0; background: var(--surface); }
.tema-master .xcrud-list.table th {
  font-size: var(--fs-100); font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
  background: var(--bg); border: 0; border-bottom: 1px solid var(--border-fuerte);
  padding: 10px 10px;
}
.tema-master .xcrud-list.table th a, .tema-master .xcrud-list.table th { text-decoration: none; }
.tema-master .xcrud-list.table td {
  padding: 6px 10px; border: 0; border-bottom: 1px solid var(--border-sutil);
  vertical-align: middle; line-height: 1.3;
}
.tema-master .xcrud-list.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.tema-master .xcrud-list.table-hover tbody tr:hover { background: var(--surface-alt); }
.tema-master .xcrud-list .xcrud-num { color: var(--text-3); width: 1%; }
.tema-master .xcrud-list td .btn-group { white-space: nowrap; flex-wrap: nowrap; }
/* Los highlight() de las pantallas pintan la celda completa: se suavizan con un borde redondeado. */
.tema-master .xcrud-list td[style*="background"] { border-radius: 4px; }

/* Paginación y «10 25 50 100» */
.tema-master .xcrud-nav { margin-top: 12px; }
.tema-master .xcrud-nav .btn { background: var(--surface); border-color: var(--border); color: var(--text-1); }
.tema-master .pagination .page-link { color: var(--text-1); border-color: var(--border); font-size: var(--fs-300); }
.tema-master .pagination .page-item.active .page-link { background: var(--n-900); border-color: var(--n-900); color: #fff; }

/* ── Pestañas ───────────────────────────────────────────────────────────── */
.tema-master .xcrud .nav-tabs { border-bottom: 1px solid var(--border); gap: 2px; margin-bottom: 16px; }
.tema-master .xcrud .nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--text-2); font-size: var(--fs-300); font-weight: 500; padding: 8px 12px;
}
.tema-master .xcrud .nav-tabs .nav-link:hover { color: var(--text-1); border-bottom-color: var(--border-fuerte); }
.tema-master .xcrud .nav-tabs .nav-link.active {
  background: transparent; color: var(--text-1); border-bottom-color: var(--accion);
}

/* ── Formularios y vista de detalle ─────────────────────────────────────── */
.tema-master .xcrud .form-control {
  height: 32px; font-size: var(--fs-300); border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text-1);
}
.tema-master .xcrud textarea.form-control { height: auto; min-height: 80px; }
.tema-master .xcrud .form-control:focus { border-color: var(--foco); box-shadow: var(--anillo); }
.tema-master .xcrud .form-horizontal td { border: 0; border-bottom: 1px solid var(--border-sutil); padding: 8px 10px; vertical-align: middle; }
.tema-master .xcrud .form-horizontal .control-label {
  color: var(--text-2); font-size: var(--fs-200); font-weight: 500; white-space: nowrap; width: 200px;
}
.tema-master .select2-container--default .select2-selection--single {
  height: 32px; border: 1px solid var(--border); border-radius: var(--r-sm);
}
.tema-master .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px; font-size: var(--fs-300); }

/* ── Mensajes ───────────────────────────────────────────────────────────── */
.tema-master .xcrud .alert { border-radius: var(--r); font-size: var(--fs-300); border: 1px solid transparent; }
.tema-master .xcrud .alert-success { background: var(--ok-bg); color: var(--ok-fg); }
.tema-master .xcrud .alert-danger { background: var(--err-bg); color: var(--err-fg); }

/* ── Login ──────────────────────────────────────────────────────────────── */
.tema-master.gp1-login { background: var(--text-1); }
.tema-master .gp1-caja { border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.tema-master .gp1-caja h1 { font-size: 26px; font-weight: 700; }
.tema-master .gp1-caja h1 span { color: var(--accion); }
.tema-master .gp1-caja .btn-primary { background: var(--n-900); border-color: var(--n-900); border-radius: var(--r); }

/* ── Teléfono ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .tema-master .gp1-menu { position: static; width: auto; }
  .tema-master .gp1-contenido { margin-left: 0; }
  .tema-master .gp1-cuerpo { padding: 16px; }
}

/* ── Colores de estado de las pantallas (highlight) → paleta semántica de Master ──
   Las pantallas de Angel pintan la celda con colores fosforescentes en línea
   (style="background-color:#00FC1B"). Aquí se traducen por significado; sin el
   tema, siguen como siempre. */
.tema-master .xcrud-list td[style*="#00FC1B" i],
.tema-master .xcrud-list td[style*="#46fa40" i],
.tema-master .xcrud-list td[style*="#a5faa2" i],
.tema-master .xcrud-list td[style*="#90f399" i] { background-color: var(--ok-bg) !important; color: var(--ok-fg); font-weight: 600; }
.tema-master .xcrud-list td[style*="#f79d97" i],
.tema-master .xcrud-list td[style*="#f5af96" i] { background-color: var(--err-bg) !important; color: var(--err-fg); font-weight: 600; }
.tema-master .xcrud-list td[style*="#a1c8f7" i] { background-color: var(--info-bg) !important; color: var(--info-fg); font-weight: 600; }
.tema-master .xcrud-list td[style*="#BFC0BF" i] { background-color: var(--n-100) !important; color: var(--text-2); font-weight: 600; }
.tema-master .xcrud-list td[style*="#FCDD00" i],
.tema-master .xcrud-list td[style*="#facb73" i] { background-color: var(--warn-bg) !important; color: var(--warn-fg); font-weight: 600; }