/* ------------------------------------------------------------------
   Pestañas de sección (lib/tabs.js) — el alta, el histórico y los
   subtotales de una vista, cada uno en su pestaña.

   Se dibujan como las de un navegador: la activa comparte el fondo del
   panel y le tapa la línea de arriba, así se lee pegada a su contenido
   en vez de flotando sobre él. `.tab` ya es la del menú lateral, de ahí
   el prefijo `sec-`.
   ------------------------------------------------------------------ */
.sec-tabs-wrap {
  margin-bottom: 16px;
}

.sec-tabs {
  display: flex;
  gap: 3px;
  padding: 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sec-tabs::-webkit-scrollbar {
  display: none;
}

/* En el celular las pestañas no entran y la tira se desliza, pero sin barra
   visible no se nota que hay más. El borde se desvanece hacia el lado que
   queda por recorrer —las clases las pone lib/tabs.js al medir— y se apaga al
   llegar al final. Va con `mask` y no con un degradado de color para no
   depender del fondo: sirve igual en claro y en oscuro. */
.sec-tabs.mas-der {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.sec-tabs.mas-izq {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}

.sec-tabs.mas-izq.mas-der {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.sec-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.sec-tab:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.sec-tab.active {
  color: var(--text);
  background: var(--bg);
  box-shadow: inset 0 2px 0 var(--arrenda-teal);
  cursor: default;
}

/* El milímetro que une la pestaña con el panel. */
.sec-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--bg);
}

.sec-tab-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-soft);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}

.sec-tab.active .sec-tab-badge {
  color: var(--arrenda-teal);
  border-color: var(--arrenda-teal);
  background: transparent;
}

.sec-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 18px;
  min-width: 0;
}

/* La barra de filtros compartida: primera cosa del panel, separada del
   contenido que recorta. */
.sec-panel > .filters {
  margin: -2px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}

/* Un bloque dentro del panel no repite borde ni fondo: ya los tiene el panel. */
.sec-panel > .sec-panel-item > .block {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

/* El calendario trae sus propios márgenes internos (y su panel lateral pegado
   al borde): va al ras del panel, no adentro del padding. */
.sec-panel {
  overflow: hidden;
}

.sec-panel-item > .ocu-cal {
  margin: -18px;
}

@media (max-width: 768px) {
  .sec-tabs {
    padding: 0;
  }

  .sec-tab {
    padding: 8px 12px;
    font-size: 12px;
  }

  .sec-panel {
    padding: 14px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  }

  .sec-panel-item > .ocu-cal {
    margin: -14px;
  }
}