/* Fase 9.1 — wwwroot/css/smartreports.css verbatim; se carga al abrir SmartReports. Único cambio: toast → --z-toast (D-51).
   Nota: .sr-scope usa isolation + container-type a propósito (el toast y la hoja móvil se anclan a la pantalla y no suben
   sobre el menú del ERP); la pantalla no tiene modales, así que no atrapa ninguno. */
/* ============================================================================
   Vantastic SmartReports — CSS global de la pantalla de reportes
   Archivo: wwwroot/css/smartreports.css
   Referenciar en _Host.cshtml / index.html, SIEMPRE después de la paleta general:
     <link rel="stylesheet" href="css/vantastic-tokens.css" />
     <link rel="stylesheet" href="css/smartreports.css" />
   Paleta: Vantastic (tokens --vt-*). Este archivo no define ningún color propio.
   ============================================================================ */

.sr-scope {
  /* La paleta viene de wwwroot/css/vantastic-tokens.css (cargarlo ANTES que este
     archivo). Aquí solo se re-exponen los tokens con nombre local, para no repetir
     ningún valor de color: si cambia la paleta general, cambia esta pantalla. */
  --em-cobalt:        var(--vt-cobalt);
  --em-cobalt-deep:   var(--vt-cobalt-deep);
  --em-cobalt-light:  var(--vt-cobalt-light);
  --em-cobalt-pale:   var(--vt-cobalt-pale);
  --em-cobalt-subtle: var(--vt-cobalt-subtle);

  --sr-ground:    var(--vt-ground);
  --sr-surface:   var(--vt-surface);
  --sr-surface-2: var(--vt-surface-2);
  --sr-line:      var(--vt-line);
  --sr-line-soft: var(--vt-line-soft);
  --sr-ink:       var(--vt-ink);
  --sr-ink-2:     var(--vt-ink-2);
  --sr-muted:     var(--vt-muted);
  --sr-fav:       var(--vt-fav);
  --sr-ok:        var(--vt-ok);
  --sr-shadow:    var(--vt-shadow);
  --sr-lift:      var(--vt-shadow-lift);

  background: var(--sr-ground);
  color: var(--sr-ink);
  font-family: var(--vt-font);
  font-size: var(--vt-fs-base);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.sr-scope *, .sr-scope *::before, .sr-scope *::after { box-sizing: border-box; }
.sr-scope button { cursor: pointer; font: inherit; color: inherit; }
.sr-scope :focus-visible { outline: 2px solid var(--em-cobalt-light); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------- barra top --- */
.sr-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 54px; flex: 0 0 54px;
  background: linear-gradient(100deg, var(--em-cobalt-deep), var(--em-cobalt) 58%, var(--em-cobalt-light));
  color: #fff; position: sticky; top: 0; z-index: 30;
}
.sr-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sr-brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  background: rgba(255, 255, 255, .16); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.sr-brand-mark svg { width: 17px; height: 17px; }
.sr-brand-txt b {
  display: block; font-weight: 700; font-size: 15.5px; letter-spacing: .2px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-brand-txt span { display: block; font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; opacity: .78; }
.sr-top-spacer { flex: 1; }
.sr-top-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 31px; padding: 0 11px;
  border-radius: 5px; background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-size: 12.5px; white-space: nowrap;
}
.sr-top-chip svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------- sidebar --- */
.sr-body { display: flex; flex: 1; min-height: 0; align-items: stretch; }

.sr-sidebar {
  width: 252px; flex: 0 0 252px; background: var(--sr-surface);
  border-right: 1px solid var(--sr-line); display: flex; flex-direction: column;
  transition: width .22s ease, flex-basis .22s ease;
  position: sticky; top: 54px; height: calc(100vh - 54px); overflow: hidden;
}
.sr-collapsed .sr-sidebar { width: 60px; flex-basis: 60px; }

.sr-side-search { padding: 12px 12px 8px; display: flex; gap: 6px; align-items: center; }
.sr-collapsed .sr-side-search { padding: 12px 8px 8px; }
.sr-side-search .sr-field { position: relative; flex: 1; min-width: 0; }
.sr-collapsed .sr-side-search .sr-field { display: none; }
.sr-side-search input {
  width: 100%; height: 31px; border: 1px solid var(--sr-line); border-radius: 5px;
  background: var(--sr-surface-2); padding: 0 10px 0 29px; font-size: 12.5px; color: var(--sr-ink);
}
.sr-side-search input:focus { border-color: var(--em-cobalt-light); background: var(--sr-surface); outline: none; }
.sr-side-search .sr-field svg {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--sr-muted); pointer-events: none;
}
.sr-collapse-btn {
  width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid var(--sr-line); border-radius: 6px;
  background: var(--sr-surface-2); display: grid; place-items: center; color: var(--em-cobalt);
}
.sr-collapse-btn:hover { background: var(--em-cobalt-pale); border-color: var(--em-cobalt-light); }
.sr-collapse-btn svg { width: 15px; height: 15px; transition: transform .22s ease; }
.sr-collapsed .sr-collapse-btn svg { transform: rotate(180deg); }

.sr-side-scroll { flex: 1; overflow-y: auto; padding: 4px 10px 16px; scrollbar-width: thin; }
.sr-collapsed .sr-side-scroll { padding: 4px 8px 16px; }

.sr-side-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--sr-muted); padding: 14px 8px 6px;
}
.sr-side-label .sr-count {
  margin-left: auto; font-size: 10px; letter-spacing: 0; color: var(--sr-muted);
  font-variant-numeric: tabular-nums;
}
.sr-side-label .sr-rule { display: none; }
.sr-collapsed .sr-side-label { justify-content: center; padding: 12px 0 6px; }
.sr-collapsed .sr-side-label .sr-txt, .sr-collapsed .sr-side-label .sr-count { display: none; }
.sr-collapsed .sr-side-label .sr-rule { display: block; width: 20px; height: 1px; background: var(--sr-line); }

.sr-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: transparent; color: var(--sr-ink-2);
  padding: 7px 8px; border-radius: 7px; text-align: left; font-size: 13px;
  position: relative; transition: background .13s ease, color .13s ease;
}
.sr-nav-item:hover { background: var(--em-cobalt-subtle); color: var(--sr-ink); }
.sr-nav-item.sr-active { background: var(--em-cobalt-pale); color: var(--em-cobalt-deep); font-weight: 600; }
.sr-nav-item.sr-active::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--em-cobalt);
}
.sr-nav-item .sr-ico { flex: 0 0 18px; width: 18px; height: 18px; color: var(--em-cobalt); display: block; }
.sr-nav-item .sr-ico svg { width: 18px; height: 18px; display: block; }
.sr-nav-item .sr-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-nav-item .sr-num { font-size: 10.5px; color: var(--sr-muted); font-variant-numeric: tabular-nums; }
.sr-collapsed .sr-nav-item { justify-content: center; padding: 8px 0; }
.sr-collapsed .sr-nav-item .sr-txt, .sr-collapsed .sr-nav-item .sr-num { display: none; }
.sr-collapsed .sr-nav-item.sr-active::before { left: -8px; }

.sr-fav-nav {
  display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: transparent;
  color: var(--sr-ink-2); padding: 6px 8px; border-radius: 7px; text-align: left; font-size: 12.5px;
  animation: srFavIn .3s ease;
}
.sr-fav-nav:hover { background: var(--em-cobalt-subtle); color: var(--sr-ink); }
.sr-fav-nav .sr-ico { flex: 0 0 16px; color: var(--sr-fav); }
.sr-fav-nav .sr-ico svg { width: 16px; height: 16px; display: block; }
.sr-fav-nav .sr-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-fav-nav .sr-fopens { font-size: 10px; color: var(--sr-muted); font-variant-numeric: tabular-nums; }
.sr-collapsed .sr-fav-nav .sr-fopens { display: none; }
.sr-collapsed .sr-fav-nav { justify-content: center; padding: 7px 0; }
.sr-collapsed .sr-fav-nav .sr-txt { display: none; }
@keyframes srFavIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.sr-fav-empty { font-size: 11.5px; color: var(--sr-muted); padding: 2px 8px 6px; line-height: 1.45; }
.sr-collapsed .sr-fav-empty { display: none; }

/* ----------------------------------------------------------------- main ---- */
.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-main-inner { padding: 18px 22px 40px; max-width: 1180px; width: 100%; }

.sr-page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sr-crumb { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sr-muted); font-weight: 600; }
.sr-page-head h1 { font-size: 25px; font-weight: 700; margin: 2px 0 3px; letter-spacing: -.1px; text-wrap: balance; }
.sr-page-head p { margin: 0; color: var(--sr-muted); font-size: 13px; max-width: 62ch; }
.sr-head-actions { margin-left: auto; display: flex; gap: 7px; align-items: center; }

.sr-toolbar {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: 10px;
  padding: 9px 10px; box-shadow: var(--sr-shadow); margin-bottom: 14px;
}
.sr-search { position: relative; flex: 1; min-width: 210px; }
.sr-search input {
  width: 100%; height: 31px; border: 1px solid var(--sr-line); border-radius: 5px;
  background: var(--sr-surface-2); padding: 0 30px; font-size: 13px; color: var(--sr-ink);
}
.sr-search input:focus { border-color: var(--em-cobalt-light); background: var(--sr-surface); outline: none; }
.sr-search > svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--sr-muted); }
.sr-search-clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 21px; height: 21px; border: none; background: transparent; color: var(--sr-muted);
  display: grid; place-items: center; border-radius: 4px;
}
.sr-search-clear:hover { background: var(--sr-line-soft); color: var(--sr-ink); }
.sr-search-clear svg { width: 12px; height: 12px; }

.sr-seg { display: inline-flex; background: var(--sr-surface-2); border: 1px solid var(--sr-line); border-radius: 5px; padding: 2px; gap: 2px; }
.sr-seg button {
  border: none; background: transparent; color: var(--sr-muted); font-size: 12.5px; font-weight: 600;
  padding: 0 10px; height: 25px; border-radius: 3px; white-space: nowrap;
}
.sr-seg button.sr-on { background: var(--em-cobalt); color: #fff; }
.sr-seg button:not(.sr-on):hover { color: var(--sr-ink); }
.sr-seg.sr-icons button { width: 27px; padding: 0; display: grid; place-items: center; }
.sr-seg.sr-icons svg { width: 14px; height: 14px; }

.sr-sel {
  height: 31px; border: 1px solid var(--sr-line); border-radius: 5px;
  background: var(--sr-surface-2); padding: 0 8px; font-size: 12.5px; color: var(--sr-ink-2);
}
.sr-sel:focus { border-color: var(--em-cobalt-light); outline: none; }

.sr-result-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--sr-muted); margin: 0 2px 12px; }
.sr-result-line b { color: var(--sr-ink); }
.sr-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px 0 9px;
  border-radius: 999px; background: var(--em-cobalt-pale); color: var(--em-cobalt-deep);
  font-size: 12px; font-weight: 600;
}
.sr-chip button { border: none; background: transparent; color: inherit; display: grid; place-items: center; padding: 0; width: 16px; height: 16px; border-radius: 50%; }
.sr-chip button:hover { background: rgba(26, 79, 186, .16); }
.sr-chip svg { width: 10px; height: 10px; }

/* ------------------------------------------------------------- reportes ---- */
.sr-group-block { margin-bottom: 26px; }
.sr-group-head { display: flex; align-items: center; gap: 9px; margin: 0 2px 10px; }
.sr-group-head .sr-gico {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--em-cobalt-pale); color: var(--em-cobalt);
}
.sr-group-head .sr-gico svg { width: 16px; height: 16px; }
.sr-group-head h2 { font-size: 16.5px; font-weight: 700; margin: 0; letter-spacing: .1px; }
.sr-group-head .sr-gdesc {
  font-size: 12px; color: var(--sr-muted); margin-left: 2px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-group-head .sr-gcount { font-size: 11px; color: var(--sr-muted); font-variant-numeric: tabular-nums; }

.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 11px; }

.sr-rep {
  position: relative; background: var(--sr-surface); border: 1px solid var(--sr-line);
  border-radius: 11px; padding: 12px 13px; display: flex; gap: 11px; align-items: flex-start;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
  cursor: pointer; text-align: left; width: 100%;
}
.sr-rep:hover { border-color: var(--em-cobalt-light); box-shadow: var(--sr-lift); transform: translateY(-1px); }
.sr-rep .sr-rico {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--em-cobalt-subtle); color: var(--em-cobalt); border: 1px solid var(--sr-line-soft);
}
.sr-rep .sr-rico svg { width: 17px; height: 17px; }
.sr-rep-main { flex: 1; min-width: 0; }
.sr-rep-title {
  display: flex; align-items: baseline; gap: 7px; font-weight: 600; font-size: 13.5px;
  color: var(--sr-ink); margin-bottom: 2px; padding-right: 30px;
}
.sr-rep-title .sr-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-rep-code { font-size: 10.5px; color: var(--sr-muted); letter-spacing: .2px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.sr-rep-desc {
  font-size: 12px; color: var(--sr-muted); line-height: 1.45; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-rep-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sr-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--sr-surface-2);
  color: var(--sr-muted); border: 1px solid var(--sr-line-soft);
}
.sr-tag.sr-t-graf { background: rgba(26, 79, 186, .09); color: var(--em-cobalt); border-color: transparent; }
.sr-tag.sr-t-matriz { background: rgba(17, 128, 90, .1); color: var(--sr-ok); border-color: transparent; }
.sr-tag.sr-t-new { background: rgba(224, 36, 94, .1); color: var(--sr-fav); border-color: transparent; }
.sr-tag.sr-t-ia {
  background: linear-gradient(100deg, var(--em-cobalt), var(--em-cobalt-light));
  color: #fff; border-color: transparent; display: inline-flex; align-items: center; gap: 4px;
}
.sr-tag.sr-t-ia svg { width: 10px; height: 10px; }
.sr-rep-used { font-size: 10.5px; color: var(--sr-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* contador de aperturas del usuario */
.sr-opens {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: 10.5px; font-weight: 600; color: var(--sr-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sr-opens svg { width: 11px; height: 11px; opacity: .75; }
.sr-opens.sr-hot { color: var(--em-cobalt); }
.sr-opens .sr-never { font-weight: 400; opacity: .8; }
.sr-opens.sr-bump { animation: srBump .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes srBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.25); color: var(--em-cobalt); }
  100% { transform: scale(1); }
}

/* badge de favorito accionable */
.sr-fav-btn {
  position: absolute; top: 9px; right: 9px; width: 31px; height: 31px; border: none; border-radius: 8px;
  background: transparent; display: grid; place-items: center; color: var(--sr-muted);
  transition: background .13s ease, color .13s ease;
}
.sr-fav-btn:hover { background: var(--em-cobalt-subtle); color: var(--sr-fav); }
.sr-fav-btn svg { width: 17px; height: 17px; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1); }
.sr-fav-btn.sr-on { color: var(--sr-fav); }
.sr-fav-btn.sr-on svg { fill: currentColor; }
.sr-fav-btn.sr-pop svg { animation: srPop .42s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes srPop {
  0% { transform: scale(.6); } 40% { transform: scale(1.32); }
  70% { transform: scale(.94); } 100% { transform: scale(1); }
}
.sr-fav-btn::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--sr-fav);
  opacity: 0; transform: scale(.5); pointer-events: none;
}
.sr-fav-btn.sr-pop::after { animation: srRing .5s ease-out; }
@keyframes srRing { 0% { opacity: .55; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.75); } }

/* vista lista */
.sr-list .sr-grid { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--sr-line); border-radius: 11px; overflow: hidden; background: var(--sr-surface); }
.sr-list .sr-rep {
  border-radius: 0; border-left: none; border-right: none; border-top: none;
  border-bottom: 1px solid var(--sr-line-soft); padding: 9px 12px;
  transform: none !important; box-shadow: none !important; align-items: center;
}
.sr-list .sr-rep:hover { background: var(--em-cobalt-subtle); border-color: var(--sr-line-soft); }
.sr-list .sr-rep:last-child { border-bottom: none; }
.sr-list .sr-rep .sr-rico { width: 26px; height: 26px; flex-basis: 26px; border-radius: 7px; }
.sr-list .sr-rep .sr-rico svg { width: 14px; height: 14px; }
.sr-list .sr-rep-desc { -webkit-line-clamp: 1; margin-bottom: 0; }
.sr-list .sr-rep-title { margin-bottom: 1px; }
/* en vista lista se ocultan las etiquetas pero el contador se mantiene */
.sr-list .sr-rep-meta { display: flex; margin-top: 1px; }
.sr-list .sr-rep-meta .sr-tag { display: none; }

/* estados */
.sr-empty {
  text-align: center; padding: 52px 20px; color: var(--sr-muted);
  border: 1px dashed var(--sr-line); border-radius: 12px; background: var(--sr-surface);
}
.sr-empty svg { width: 30px; height: 30px; color: var(--em-cobalt-light); opacity: .6; margin-bottom: 8px; }
.sr-empty b { display: block; color: var(--sr-ink); font-size: 14px; margin-bottom: 3px; }

.sr-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 11px; }
.sr-skeleton div {
  height: 92px; border-radius: 11px; border: 1px solid var(--sr-line);
  background: linear-gradient(100deg, var(--sr-surface) 30%, var(--sr-surface-2) 50%, var(--sr-surface) 70%);
  background-size: 300% 100%; animation: srShimmer 1.2s linear infinite;
}
@keyframes srShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.sr-alert {
  display: flex; gap: 9px; align-items: flex-start; background: #fff5f5; border: 1px solid #f5c2c2;
  border-left: 3px solid #dc2626; border-radius: 9px; padding: 10px 12px; color: #7f1d1d; font-size: 12.5px;
}
.sr-alert svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

/* botones de acción (estándar Vantastic) */
.sr-icon-btn {
  width: 31px; height: 31px; border: none; border-radius: 6px; display: grid; place-items: center;
  color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.sr-icon-btn svg { width: 14px; height: 14px; }
.sr-icon-btn:hover { filter: brightness(1.1); }

/* toast */
.sr-toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(14px);
  background: var(--sr-ink); color: #fff; padding: 8px 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: all .22s ease; z-index: var(--z-toast); /* D-51 (era 90) */ box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  display: flex; align-items: center; gap: 7px;
}
.sr-toast svg { width: 14px; height: 14px; }
.sr-toast.sr-show { opacity: 1; transform: translateX(-50%); }

/* responsive */
@media (max-width: 760px) {
  .sr-sidebar { position: fixed; z-index: 40; box-shadow: var(--sr-lift); }
  .sr-scope:not(.sr-collapsed) .sr-sidebar { width: 240px; flex-basis: 240px; }
  .sr-collapsed .sr-sidebar { width: 54px; flex-basis: 54px; }
  .sr-body { padding-left: 54px; }
  .sr-main-inner { padding: 14px 16px 40px; }
  .sr-page-head h1 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-scope *, .sr-toast { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Botón de recargar — cobalto, con fallback por si los tokens no cargaron */
.sr-icon-btn.sr-ib-refresh {
    background: linear-gradient(100deg, var(--em-cobalt, #1a4fba), var(--em-cobalt-light, #2d6ae0));
    color: #fff;
    transition: filter .13s ease, transform .1s ease;
}

    .sr-icon-btn.sr-ib-refresh:hover {
        filter: brightness(1.08);
    }

    .sr-icon-btn.sr-ib-refresh:active {
        transform: translateY(1px);
    }

    .sr-icon-btn.sr-ib-refresh:disabled {
        opacity: .55;
        cursor: not-allowed;
        filter: none;
    }
/* ============ Vista tarjetas: título completo y tarjetas parejas ============ */

/* El título deja de truncarse: envuelve hasta 2 líneas y el código baja debajo */
.sr-scope:not(.sr-list) .sr-rep-title {
    display: block;
    padding-right: 34px; /* espacio para el corazón */
    line-height: 1.3;
    margin-bottom: 3px;
}

    .sr-scope:not(.sr-list) .sr-rep-title .sr-nm {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        min-height: 2.6em; /* reserva 2 líneas: los códigos quedan alineados */
    }

.sr-scope:not(.sr-list) .sr-rep-code {
    display: block;
    margin-top: 1px;
}

/* Las etiquetas y el contador se pegan abajo: todas las tarjetas quedan parejas */
.sr-scope:not(.sr-list) .sr-rep {
    align-items: stretch;
}

.sr-scope:not(.sr-list) .sr-rep-main {
    display: flex;
    flex-direction: column;
}

.sr-scope:not(.sr-list) .sr-rep-desc {
    min-height: 2.9em;
}

.sr-scope:not(.sr-list) .sr-rep-meta {
    margin-top: auto;
    padding-top: 2px;
}
/* ============================================================================
   SMARTREPORTS RESPONSIVO — bloque agregado 2026-10-02
   ----------------------------------------------------------------------------
   Nada de lo anterior se modifica: esto solo agrega comportamiento por ancho.

   REGLA DE ORO: el módulo mide SU PROPIA caja, no la pantalla, y todo lo
   flotante (barra inferior, hoja de grupos, velo) es position:absolute DENTRO
   de .sr-scope. Así el menú del ERP nunca compite con el de SmartReports.

   Tres comportamientos:
     compact   < 768px    teléfono  → sin sidebar, barra inferior + hoja
     medium    768-1199px tablet    → sidebar en riel de iconos, 2 columnas
     expanded  >= 1200px  escritorio → tal cual está hoy (no se toca)

   Variables que puede ajustar el layout anfitrión:
     --sr-bottom-offset  alto de la barra inferior DEL ERP, si existe (def 0px)
     --sr-vh-offset      alto del header DEL ERP por encima del módulo (def 0px)
     --sr-bar-h          alto de la barra inferior del módulo (def 58px)
   Ejemplo, si el ERP ya tiene su propia barra de 56px en móvil:
     .sr-scope { --sr-bottom-offset: 56px; }
   ============================================================================ */

.sr-scope {
    position: relative;          /* ancla de la barra inferior y de la hoja     */
    isolation: isolate;          /* z-index local: no sube sobre el menú del ERP*/
    container-type: inline-size; /* los breakpoints miden ESTA caja             */
    container-name: srhost;
    width: 100%;                 /* el contenedor mide su caja: no depende del contenido */
    max-width: 100%;
    --sr-bottom-offset: 0px;
    --sr-vh-offset: 0px;
    --sr-bar-h: 58px;
}

/* Piezas que solo existen en móvil y tablet: ocultas por defecto */
.sr-m-menu, .sr-bottom, .sr-sheet, .sr-veil { display: none; }

/* ======================= MÓVIL Y TABLET (hasta 1199px) ======================
   El módulo toma su propio alto y el scroll pasa a .sr-main. Sin esto, una
   barra anclada abajo quedaría al final del documento en lugar de en pantalla. */
@container srhost (max-width: 1199px) {

    .sr-scope { height: calc(100dvh - var(--sr-vh-offset)); min-height: 0; overflow: hidden; }
    .sr-body { min-height: 0; overflow: hidden; position: relative; }
    .sr-main { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .sr-main-inner { max-width: none; }

    /* el sidebar deja de ser sticky con 100vh: ahora vive dentro del módulo */
    .sr-sidebar { position: static; height: auto; top: auto; min-height: 0; }

    /* botón que abre la hoja de grupos, en la barra superior */
    .sr-m-menu {
        display: grid; place-items: center;
        width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
        background: rgba(255, 255, 255, .16); color: #fff; border: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    }
    .sr-m-menu svg { width: 17px; height: 17px; }
    .sr-m-menu:active { background: rgba(255, 255, 255, .26); }

    /* ---------------------------- hoja de grupos ---------------------------- */
    .sr-veil {
        display: block; position: absolute; inset: 0; z-index: 50;
        background: rgba(12, 18, 34, .42);
        opacity: 0; pointer-events: none; transition: opacity .18s ease;
    }
    .sr-veil.sr-show { opacity: 1; pointer-events: auto; }

    .sr-sheet {
        display: flex; flex-direction: column;
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
        max-height: 78%; background: var(--sr-surface);
        border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(10, 16, 34, .22);
        transform: translateY(102%); transition: transform .24s cubic-bezier(.3, .8, .3, 1);
    }
    .sr-sheet.sr-show { transform: translateY(0); }

    .sr-sheet-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--sr-line); margin: 9px auto 2px; }
    .sr-sheet-head {
        display: flex; align-items: center; gap: 8px; padding: 4px 14px 9px;
        border-bottom: 1px solid var(--sr-line);
    }
    .sr-sheet-head b { font-size: 14px; font-weight: 700; }
    .sr-sheet-count {
        font-size: 11px; font-weight: 600; color: var(--em-cobalt-deep);
        background: var(--em-cobalt-pale); border-radius: 999px; padding: 1px 8px;
        font-variant-numeric: tabular-nums;
    }
    .sr-sheet-x {
        margin-left: auto; width: 31px; height: 31px; border-radius: 6px; border: 1px solid var(--sr-line);
        background: var(--sr-surface-2); display: grid; place-items: center; color: var(--sr-ink-2);
    }
    .sr-sheet-x svg { width: 14px; height: 14px; }
    .sr-sheet-body {
        overflow-y: auto; padding: 8px 10px calc(16px + env(safe-area-inset-bottom, 0px));
        display: flex; flex-direction: column; gap: 2px;
    }

    /* dentro de la hoja los textos SIEMPRE se ven, aunque el sidebar
       del escritorio haya quedado colapsado (.sr-collapsed) */
    .sr-sheet .sr-nav-item, .sr-sheet .sr-fav-nav { justify-content: flex-start; padding: 11px 10px; font-size: 14px; }
    .sr-sheet .sr-side-label { justify-content: flex-start; padding: 14px 8px 6px; }
    .sr-sheet .sr-nav-item .sr-txt, .sr-sheet .sr-nav-item .sr-num,
    .sr-sheet .sr-fav-nav .sr-txt, .sr-sheet .sr-fav-nav .sr-fopens,
    .sr-sheet .sr-side-label .sr-txt, .sr-sheet .sr-side-label .sr-count { display: block; }
    .sr-sheet .sr-side-label .sr-rule { display: none; }
    .sr-sheet .sr-nav-item .sr-txt, .sr-sheet .sr-fav-nav .sr-txt { flex: 1; }
}

/* ============================ TABLET: 768-1199px ============================
   Sidebar en riel de iconos. El título de cada grupo se consulta en la hoja,
   que aquí se abre con el botón de la barra superior. */
@container srhost (min-width: 768px) and (max-width: 1199px) {

    .sr-sidebar { width: 60px; flex: 0 0 60px; }
    .sr-side-search { padding: 12px 8px 8px; }
    .sr-side-search .sr-field { display: none; }
    .sr-collapse-btn { display: none; }
    .sr-side-scroll { padding: 4px 8px 16px; }

    .sr-side-label { justify-content: center; padding: 12px 0 6px; }
    .sr-side-label .sr-txt, .sr-side-label .sr-count { display: none; }
    .sr-side-label .sr-rule { display: block; width: 20px; height: 1px; background: var(--sr-line); }

    .sr-nav-item { justify-content: center; padding: 8px 0; }
    .sr-nav-item .sr-txt, .sr-nav-item .sr-num { display: none; }
    .sr-nav-item.sr-active::before { left: -8px; }
    .sr-fav-nav { justify-content: center; padding: 7px 0; }
    .sr-fav-nav .sr-txt, .sr-fav-nav .sr-fopens { display: none; }
    .sr-fav-empty { display: none; }

    .sr-main-inner { padding: 14px 16px 34px; }
    .sr-page-head h1 { font-size: 22px; }
    .sr-grid, .sr-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================= MÓVIL: < 768px ============================== */
@container srhost (max-width: 767px) {

    /* el sidebar no existe en teléfono: su contenido está en la hoja */
    .sr-sidebar { display: none; }
    .sr-body { padding-left: 0; }

    /* barra superior compacta */
    .sr-topbar { height: 48px; flex: 0 0 48px; padding: 0 10px; gap: 9px; }
    .sr-brand-mark { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; }
    .sr-brand-mark svg { width: 15px; height: 15px; }
    .sr-brand-txt b { font-size: 14px; }
    .sr-brand-txt span { display: none; }
    .sr-top-chip { display: none; }

    /* contenido: deja aire abajo para la barra inferior */
    .sr-main-inner { padding: 12px 12px calc(var(--sr-bar-h) + var(--sr-bottom-offset) + 18px); }
    .sr-crumb { display: none; }
    .sr-page-head { gap: 10px; margin-bottom: 10px; }
    .sr-page-head h1 { font-size: 19px; margin-top: 0; }
    .sr-page-head p {
        font-size: 12px; max-width: none;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* la barra de herramientas se queda pegada arriba mientras se baja */
    .sr-toolbar {
        position: sticky; top: 0; z-index: 20;
        padding: 8px; gap: 7px; border-radius: 9px; margin-bottom: 12px;
    }
    .sr-toolbar .sr-seg:not(.sr-icons) { display: none; }  /* ámbitos → barra inferior */
    .sr-search { flex: 1 1 100%; min-width: 0; }
    .sr-sel { flex: 1 1 auto; min-width: 0; }

    .sr-result-line { font-size: 12px; margin-bottom: 10px; }
    .sr-grid, .sr-skeleton { grid-template-columns: 1fr; }
    .sr-group-block { margin-bottom: 20px; }
    .sr-group-head h2 { font-size: 15px; }
    .sr-group-head .sr-gdesc { display: none; }

    /* zonas de toque: marcar favorito no debe abrir el reporte */
    .sr-rep { touch-action: manipulation; }
    .sr-fav-btn { width: 38px; height: 38px; top: 6px; right: 6px; }
    .sr-fav-btn svg { width: 19px; height: 19px; }
    .sr-scope:not(.sr-list) .sr-rep-title { padding-right: 42px; }
    .sr-opens { padding: 4px 0; }

    /* ------------------------- barra inferior ------------------------- */
    .sr-bottom {
        display: flex; gap: 2px;
        position: absolute; left: 0; right: 0; bottom: var(--sr-bottom-offset); z-index: 40;
        background: var(--sr-surface); border-top: 1px solid var(--sr-line);
        box-shadow: 0 -6px 18px rgba(14, 22, 45, .07);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .sr-bt {
        flex: 1 1 0; min-width: 0; border: none; background: transparent;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 5px 2px; border-radius: 9px;
        font-size: 10.5px; font-weight: 600; color: var(--sr-muted);
    }
    .sr-bt svg { width: 19px; height: 19px; }
    .sr-bt span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .sr-bt.sr-on { color: var(--em-cobalt); }
    .sr-btw { position: relative; display: grid; place-items: center; }
    .sr-bt.sr-on .sr-btw::after {
        content: ""; position: absolute; inset: -5px -11px; border-radius: 999px;
        background: var(--em-cobalt-pale); z-index: -1;
    }
    .sr-bt-dot {
        position: absolute; top: -3px; right: -7px; min-width: 14px; height: 14px;
        padding: 0 3px; border-radius: 999px; background: var(--sr-fav); color: #fff;
        font-size: 9px; font-weight: 700; display: grid; place-items: center;
        font-variant-numeric: tabular-nums;
    }

    /* el toast no se monta sobre la barra */
    .sr-toast { bottom: calc(var(--sr-bar-h) + var(--sr-bottom-offset) + 14px); }
}

/* Respaldo para navegadores sin container queries (Chromium < 105, WebView2
   antiguo): los mismos cortes medidos contra la ventana. */
@supports not (container-type: inline-size) {
    @media (max-width: 1199px) {
        .sr-scope { height: calc(100dvh - var(--sr-vh-offset)); min-height: 0; overflow: hidden; }
        .sr-body { min-height: 0; overflow: hidden; position: relative; }
        .sr-main { min-height: 0; overflow-y: auto; }
        .sr-sidebar { position: static; height: auto; top: auto; }
        .sr-m-menu { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
                     border-radius: 8px; background: rgba(255,255,255,.16); color: #fff; border: none; }
        .sr-m-menu svg { width: 17px; height: 17px; }
        .sr-veil { display: block; position: absolute; inset: 0; z-index: 50;
                   background: rgba(12,18,34,.42); opacity: 0; pointer-events: none; }
        .sr-veil.sr-show { opacity: 1; pointer-events: auto; }
        .sr-sheet { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; bottom: 0;
                    z-index: 60; max-height: 78%; background: var(--sr-surface);
                    border-radius: 16px 16px 0 0; transform: translateY(102%); transition: transform .24s ease; }
        .sr-sheet.sr-show { transform: translateY(0); }
        .sr-sheet .sr-nav-item .sr-txt, .sr-sheet .sr-nav-item .sr-num { display: block; flex: 1; }
    }
    @media (max-width: 767px) {
        .sr-sidebar { display: none; }
        .sr-body { padding-left: 0; }
        .sr-grid, .sr-skeleton { grid-template-columns: 1fr; }
        .sr-bottom { display: flex; position: absolute; left: 0; right: 0; bottom: var(--sr-bottom-offset);
                     z-index: 40; background: var(--sr-surface); border-top: 1px solid var(--sr-line);
                     padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
        .sr-bt { flex: 1 1 0; border: none; background: transparent; display: flex; flex-direction: column;
                 align-items: center; gap: 3px; padding: 5px 2px; font-size: 10.5px; font-weight: 600;
                 color: var(--sr-muted); }
        .sr-bt svg { width: 19px; height: 19px; }
        .sr-bt.sr-on { color: var(--em-cobalt); }
        .sr-main-inner { padding: 12px 12px calc(var(--sr-bar-h) + var(--sr-bottom-offset) + 18px); }
    }
}

/* ── CloudERP (Fase 9.1): ajuste al shell ─────────────────────────────────────
   Una @container query no puede dar estilo al propio contenedor, así que el alto de
   .sr-scope (necesario para que la barra inferior y la hoja de grupos queden en
   pantalla en móvil/tablet) se fija aquí con @media, descontando la barra superior
   del ERP (48px) y, en móvil, su barra inferior (58px). Es el ajuste previsto en
   las variables --sr-vh-offset / --sr-bottom-offset de esta hoja. */
@media (max-width: 1199px) {
    .sr-scope { --sr-vh-offset: 48px; height: calc(100dvh - var(--sr-vh-offset)); min-height: 0; overflow: hidden; }
}
@media (max-width: 600px) {
    .sr-scope { --sr-vh-offset: 106px; }
}