/* ============================================================
   GMMG 2026 · estilos sobre Bootstrap 5.3
   ============================================================ */
:root,
[data-bs-theme="light"] {
  --gm-accent: #EB6E26;
  --gm-accent-rgb: 235, 110, 38;
  --gm-accent-dark: #c9561a;
  --gm-topbar: #17191d;
  --gm-pagehead: #ffffff;
  --gm-body: #f3f4f6;
  --bs-primary: #EB6E26;
  --bs-primary-rgb: 235, 110, 38;
  --bs-link-color: #c9561a;
  --bs-link-color-rgb: 201, 86, 26;
  --bs-link-hover-color: #9e4213;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .925rem;
  --bs-border-radius: .5rem;
}
[data-bs-theme="dark"] {
  --gm-pagehead: #1c1f24;
  --gm-body: #121417;
  --bs-body-bg: #121417;
  --bs-link-color: #f39a63;
  --bs-link-color-rgb: 243, 154, 99;
  --bs-link-hover-color: #ffb88c;
  --bs-primary: #EB6E26;
  --bs-primary-rgb: 235, 110, 38;
}

body { background: var(--gm-body); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.min-w-0 { min-width: 0; }

/* Botón primario con el naranja GMMG */
.btn-primary {
  --bs-btn-bg: var(--gm-accent); --bs-btn-border-color: var(--gm-accent);
  --bs-btn-hover-bg: var(--gm-accent-dark); --bs-btn-hover-border-color: var(--gm-accent-dark);
  --bs-btn-active-bg: #b34c16; --bs-btn-active-border-color: #b34c16;
  --bs-btn-disabled-bg: var(--gm-accent); --bs-btn-disabled-border-color: var(--gm-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--gm-accent-dark); --bs-btn-border-color: var(--gm-accent);
  --bs-btn-hover-bg: var(--gm-accent); --bs-btn-hover-border-color: var(--gm-accent);
  --bs-btn-active-bg: var(--gm-accent-dark); --bs-btn-active-border-color: var(--gm-accent-dark);
}
.text-bg-primary { background-color: var(--gm-accent) !important; }
.text-primary { color: var(--gm-accent) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: rgba(var(--gm-accent-rgb), .6);
  box-shadow: 0 0 0 .2rem rgba(var(--gm-accent-rgb), .2);
}
.form-check-input:checked { background-color: var(--gm-accent); border-color: var(--gm-accent); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--gm-accent); }
.nav-link { --bs-nav-link-color: var(--bs-body-color); }
.page-link { --bs-pagination-active-bg: var(--gm-accent); --bs-pagination-active-border-color: var(--gm-accent); --bs-pagination-color: var(--bs-body-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--gm-accent); }

/* ---------- Barra superior ---------- */
.gm-topbar { background: var(--gm-topbar); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.18); }
.gm-topbar .navbar-brand { font-size: 1.1rem; letter-spacing: .02em; }
.gm-topbar .nav-link { font-weight: 500; font-size: .9rem; border-radius: .4rem; padding: .45rem .75rem !important; color: rgba(255,255,255,.72); }
.gm-topbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.gm-topbar .nav-link.active { color: #fff; background: rgba(var(--gm-accent-rgb), .22); box-shadow: inset 0 -2px 0 var(--gm-accent); }
.gm-topbar .nav-link .bi { margin-right: .25rem; opacity: .9; }
.gm-topbar .dropdown-menu { --bs-dropdown-link-active-bg: var(--gm-accent); }
.gm-logo {
  width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #f28a4b, var(--gm-accent) 55%, #b84e14); color: #fff; font-weight: 800; font-size: 1.1rem;
}
.gm-brand-sub { color: rgba(255,255,255,.5); font-weight: 400; font-size: .85rem; margin-left: .25rem; }
.gm-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(var(--gm-accent-rgb), .9); color: #fff; font-weight: 700; font-size: .8rem;
}
@media (max-width: 991.98px) {
  .gm-topbar .navbar-collapse { padding: .5rem 0 1rem; }
  .gm-topbar .dropdown-menu { background: rgba(255,255,255,.04); border: 0; }
}

/* ---------- Encabezado de página ---------- */
.gm-pagehead { background: var(--gm-pagehead); }
.gm-pagehead .breadcrumb { --bs-breadcrumb-divider-color: var(--bs-secondary-color); }
.gm-pagehead .breadcrumb a { text-decoration: none; color: var(--bs-secondary-color); }
.gm-pagehead h1 { font-weight: 700; letter-spacing: -.01em; }
@media (max-width: 575.98px) { .gm-actions { width: 100%; } .gm-actions > .btn, .gm-actions > .dropdown, .gm-actions > form { flex: 1 1 auto; } .gm-actions .btn { width: 100%; } }

/* ---------- Tarjetas ---------- */
.card { --bs-card-border-color: var(--bs-border-color-translucent); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: transparent; font-weight: 600; }
.gm-kpi .card-body { display: flex; gap: 1rem; align-items: center; }
.gm-kpi .gm-kpi-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: rgba(var(--gm-accent-rgb), .12); color: var(--gm-accent); flex: 0 0 auto; }
.gm-kpi .gm-kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.gm-kpi .gm-kpi-label { color: var(--bs-secondary-color); font-size: .82rem; }

@media (max-width: 575.98px) {
  .gm-kpi .gm-kpi-icon { display: none; }
  .gm-kpi .card-body { padding: .85rem; }
  .gm-kpi .gm-kpi-value { font-size: 1.35rem; }
}
.input-group > .form-control-color { flex: 0 0 3.25rem; width: 3.25rem; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; border-bottom-width: 1px; }
.table > :not(caption) > * > * { padding: .65rem .75rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(var(--gm-accent-rgb), .045); }
.gm-row-actions { white-space: nowrap; text-align: right; }
.gm-row-actions .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .45rem; }
tr.gm-selected > * { --bs-table-bg-state: rgba(var(--gm-accent-rgb), .08) !important; }
.gm-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent); margin: 0 .2rem .2rem 0; white-space: nowrap; }
.gm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* Barra de acciones masivas */
.gm-bulkbar { position: sticky; top: 64px; z-index: 5; display: none; }
.gm-bulkbar.show { display: flex; }

/* ---------- Filtros ---------- */
.gm-filters .form-control, .gm-filters .form-select { min-width: 160px; }

/* ---------- Modales ---------- */
.modal-content { border: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-header { border-bottom-color: var(--bs-border-color-translucent); }
.modal-footer { border-top-color: var(--bs-border-color-translucent); }
@media (max-width: 575.98px) { .modal-dialog:not(.modal-fullscreen) { margin: .5rem; } }

/* ---------- Editor / preview ---------- */
.gm-preview-frame { width: 100%; min-height: 70vh; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: #fff; }
textarea.gm-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; min-height: 60vh; }
.gm-device-toggle .btn.active { background: var(--gm-accent); color: #fff; border-color: var(--gm-accent); }
.gm-preview-wrap { display: flex; justify-content: center; background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .75rem; }
.gm-preview-wrap.mobile .gm-preview-frame { max-width: 390px; }

/* Fotos */
.gm-photo-card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: .4rem .4rem 0 0; }
.gm-dropzone { border: 2px dashed var(--bs-border-color); border-radius: .75rem; padding: 1.5rem; text-align: center; color: var(--bs-secondary-color); cursor: pointer; transition: .15s; }
.gm-dropzone:hover, .gm-dropzone.drag { border-color: var(--gm-accent); background: rgba(var(--gm-accent-rgb), .05); color: var(--bs-body-color); }

/* Encabezados */
.gm-header-thumb { width: 100%; aspect-ratio: 600/150; object-fit: cover; background: var(--bs-tertiary-bg); border-radius: .4rem; }
.gm-header-pick input:checked + label { outline: 3px solid var(--gm-accent); }
.gm-header-pick label { cursor: pointer; border-radius: .5rem; display: block; }

/* Envíos */
.gm-progress { height: 14px; border-radius: 999px; }
.gm-pulse { animation: gm-pulse 1.6s ease-in-out infinite; }
@keyframes gm-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.gm-bigsend { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; padding: .9rem 1.4rem; }
.gm-step { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--gm-accent); color: #fff; font-weight: 700; font-size: .85rem; margin-right: .5rem; flex: 0 0 auto; }
.gm-list-pick { max-height: 360px; overflow: auto; }
.gm-list-pick .list-group-item { cursor: pointer; }

/* ---------- Login ---------- */
.gm-auth { background: radial-gradient(1200px 600px at 10% -10%, rgba(var(--gm-accent-rgb), .35), transparent 60%), linear-gradient(160deg, #1b1d22, #0f1012); }
.gm-auth-card { max-width: 420px; width: 100%; border: 0; border-radius: 1rem; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.gm-auth .gm-logo { width: 52px; height: 52px; font-size: 1.6rem; border-radius: 14px; }

/* Utilidades */
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.gm-empty { padding: 3rem 1rem; text-align: center; color: var(--bs-secondary-color); }
.gm-empty .bi { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .5; }

/* ---------- Métricas ---------- */
.gm-chart { position: relative; height: 260px; }
.gm-chart.sm { height: 190px; }
.gm-meter { height: 8px; border-radius: 4px; background: var(--bs-tertiary-bg); overflow: hidden; min-width: 60px; }
.gm-meter > span { display: block; height: 100%; background: var(--gm-accent); border-radius: 4px; }
.gm-funnel-row { display: grid; grid-template-columns: 130px 1fr 92px; gap: .75rem; align-items: center; padding: .45rem 0; }
.gm-funnel-bar { height: 22px; border-radius: 4px; background: var(--gm-accent); min-width: 3px; }
.gm-funnel-row:nth-child(n+3) .gm-funnel-bar { opacity: .85; }
.gm-timeline { position: relative; padding-left: 2.1rem; }
.gm-timeline::before { content: ""; position: absolute; left: .8rem; top: .3rem; bottom: .3rem; width: 2px; background: var(--bs-border-color); }
.gm-timeline > li { position: relative; padding-bottom: .9rem; }
.gm-timeline > li:last-child { padding-bottom: 0; }
.gm-tl-icon { position: absolute; left: -2.1rem; top: -.1rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center; background: var(--bs-body-bg); border: 2px solid var(--bs-border-color); font-size: .8rem; }
.gm-tl-icon.text-bg-primary { border-color: var(--gm-accent); }
@media (max-width: 575.98px) { .gm-funnel-row { grid-template-columns: 96px 1fr 76px; gap: .5rem; } }
@media (min-width: 1200px) { .border-start-xl { border-left: 1px solid var(--bs-border-color-translucent); } }
@media (min-width: 992px) { .border-start-lg { border-left: 1px solid var(--bs-border-color-translucent); } }