/* ═══════════════════════════════════════
   ▓ COMPONENTE · TarjetaPestanas — gemelo vanilla ▓
   v1.0 · 2026-09-17. Ficha: `design-system/COMPONENTE_TARJETA_PESTANAS.md`
   Kit: `catalogo-cd/components/TarjetaPestanas.jsx`

   La Card cuya CABECERA es la banda de Tabs (invento I-2, cosecha del handoff «Detalle de
   contrato»). DECISION-FUENTE: Ricardo, 2026-09-17 — «3A» (D3 de
   plans/handoff/detalle_contrato/DECISIONES.md). Actualiza COMPONENTE_TABS.md § LA BANDA
   SIEMPRE VA ASÍ con una excepción declarada para pantallas de detalle.

   COMPOSICIÓN — esta hoja SÓLO distribuye. La caja es `.exds-card` (componentes/card/card.css),
   la banda es `.exds-tabs[data-en-tarjeta="true"]` (componentes/tabs/tabs.css, sticky=false),
   el pie es `.exds-pielista` (componentes/pie-lista/) — NINGUNA de esas clases se repite aquí.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. `componentes/card/card.css` y `componentes/tabs/tabs.css` (+ `tabs.js`) cargadas.
   ═══════════════════════════════════════ */

/* La banda: Tabs a la izquierda (flex:1, sin su propio border-bottom vía data-en-tarjeta) + la
   ranura de acción a la derecha. El hairline lo pinta ESTE contenedor para que recorra todo el
   ancho de la banda, incluida la ranura — si lo pintara Tabs, se detendría donde termina la
   última pestaña. */
.exds-tpest-banda {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
}
.exds-tpest-banda .exds-tabs { flex: 1; min-width: 0; }
/* Relleno lateral de la banda (medido del handoff, tabsExtra padding:'0 20px'): 20 a la izquierda
   separa la primera pestaña del borde de la card, 20 a la derecha separa la última pestaña de la
   ranura de acción. Especificidad 0-3-0 A PROPÓSITO — tiene que ganarle a
   `.exds-tabs[data-en-tarjeta="true"]` (0-2-0, en tabs.css) sin importar el orden de carga de las
   dos hojas: el kit inyecta el `<style>` de esta pieza ANTES que el de Tabs (Estilos antecede a
   Card en el árbol), así que a igual especificidad Tabs ganaría por orden de fuente. */
.exds-tpest-banda .exds-tabs[data-en-tarjeta="true"] { padding: 0 20px; }

/* La ranura de acción (Descargar): medido del handoff, padding-right 12 para separarla del
   borde de la card sin repetir el relleno lateral de una pestaña. */
.exds-tpest-accion {
  flex: none;
  display: flex;
  align-items: center;
  padding-right: 12px;
}

/* El cuerpo: relleno canónico de Card (24) por defecto. `data-padded="false"` (mock: Amortización,
   Pagos y Bitácora van a SANGRE — Tabla/RegistroActividad sin marco, y el relleno lo llevan sus
   propias columnas/filas) quita el relleno para que el contenido llegue al borde de la card. */
.exds-tpest-cuerpo { padding: 24px; }
.exds-tpest-cuerpo[data-padded="false"] { padding: 0; }

/* Recorta el contenido a sangre al radio de la card (Tabla/RegistroActividad a sangre pintan
   fondos cuadrados que, sin esto, sobresalen de las esquinas redondeadas del borde inferior).
   Declarado sólo en `.exds-card[data-tpest="true"]` — nunca en `.exds-card` a secas — para no
   tocar el resto del catálogo. Comprobado en Chromium que NO recorta el Tooltip de la ranura de
   acción (placement="bottom", 32×32, dentro del alto de la banda): el tooltip cae dentro del
   rectángulo de la card, nunca fuera de él. */
.exds-card[data-tpest="true"] { overflow: hidden; }

/* La nota bajo la card (p. ej. «El orden de cobro lo fija la prelación del producto»): 12 · fg3,
   fuera de la superficie de la tarjeta. */
.exds-tpest-nota {
  margin: 8px 0 0;
  font-size: var(--fs-caption, 12px);
  color: var(--fg3, #5C6B7A);
}