/* ============================================================================
   tptk-kit.css · Kit de componentes del rediseño Booker (figuras de Sebas)
   ----------------------------------------------------------------------------
   Port literal de las clases compartidas por las 10 figuras: tarjetas claras,
   tabla .stbl, pills de status (spec 10b), kit de listas (pagehead, searchbar,
   filtros .ftrig, stage-tabs) y pie de tabla. Lo usan Shows, Contactos,
   Talento, Comisiones, Agentes, Calendario y el Tablero.
   Cargado global en base.html después de tptk-shell.css.
   ========================================================================== */

/* ── Tarjetas claras ───────────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--ds-rule); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 16, 22, .08), 0 12px 30px -4px rgba(16, 16, 22, .20); overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #f2f2f5; border-bottom: 1px solid var(--ds-rule); }
.ct { font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--ds-ink); }
.card-h .link { font-size: 13px; color: var(--ds-ink-3); font-weight: 500; white-space: nowrap; text-decoration: none; }
.card-h .link:hover { color: var(--ds-ink); }
.titlerow { display: flex; align-items: center; gap: 14px; }

/* Toggle segmentado (30 días / 90 días / Todo) */
.seg { display: inline-flex; background: #fff; border: 1px solid var(--ds-rule); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { font: 600 12.5px/1 var(--ds-font-sans); border: 0; cursor: pointer; padding: 7px 13px; border-radius: 6px; background: transparent; color: var(--ds-ink-3); }
.seg button.on { background: var(--ds-accent); color: #fff; }

/* ── Tabla de shows (.stbl) ────────────────────────────────────────────── */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tw { overflow-x: auto; }
.stbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.stbl thead th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--ds-ink-4); padding: 10px 14px; background: #f2f2f5; border-bottom: 1px solid var(--ds-rule); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.stbl th:first-child, .stbl td:first-child { padding-left: 20px; }
.stbl th:last-child, .stbl td:last-child { padding-right: 20px; }
.stbl td { padding: 14px; border-bottom: 1px solid var(--ds-rule); white-space: nowrap; }
.stbl tbody tr:last-child td { border-bottom: 0; }
.stbl tbody tr:hover td { background: #f2f2f5; }
.stbl .show { font-weight: 600; }
.stbl .stt { color: var(--ds-ink-4); }
.stbl .dim { color: var(--ds-ink-4); }
.stbl td.money { text-align: right; font-weight: 700; }
.colh.money { text-align: right; }

/* Enlaces y celdas del kit de listas */
.card.deals .rowid, .stbl .rowid { color: var(--ds-ink-4); font-size: 11px; font-variant-numeric: tabular-nums; }
.card.deals .tlink, .stbl .tlink { color: #12161d; font-weight: 600; text-decoration: none; }
.card.deals .tlink:hover, .stbl .tlink:hover { color: var(--ds-accent); }
.card.deals .curr, .stbl .curr { font-size: 10px; color: var(--ds-ink-4); font-weight: 600; margin-left: 3px; }

/* ── Pills de status (spec 10b: tinte 13%) ─────────────────────────────── */
.pill { display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 0; font-family: var(--ds-font-sans); }
button.pill { cursor: pointer; }
.pill.green { color: #17a673; background: rgba(23, 166, 115, .13); }
.pill.amber { color: #b8801f; background: rgba(184, 128, 31, .13); }
.pill.rose  { color: #e0567f; background: rgba(224, 86, 127, .13); }
.pill.grey  { color: #5b6273; background: rgba(91, 98, 115, .15); }

/* ── Kit de listas: encabezado, acciones, buscador, filtros, etapas ────── */
.pagehead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pagehead .cnt-pill { font-size: 13px; font-weight: 600; color: var(--ds-ink-3); margin-left: 10px; }

.abtn { font: 600 12.5px/1 var(--ds-font-sans); background: #fff; border: 1px solid var(--ds-rule); color: var(--ds-ink-3); border-radius: 9px; padding: 10px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.abtn:hover { background: #f2f2f5; color: var(--ds-ink); }
.abtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.abtn.red { background: var(--ds-accent); color: #fff; border-color: var(--ds-accent); box-shadow: 0 1px 2px rgba(247, 52, 99, .35); }
.abtn.red:hover { background: var(--ds-accent-2); color: #fff; }

.searchbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ds-rule); border-radius: 11px; padding: 12px 15px; color: var(--ds-ink-3); font-size: 13px; box-shadow: 0 1px 2px rgba(16, 16, 22, .08), 0 12px 30px -4px rgba(16, 16, 22, .20); }
.searchbar svg { width: 17px; height: 17px; stroke: var(--ds-ink-4); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.searchbar input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: var(--ds-ink); }
.searchbar input::placeholder { color: var(--ds-ink-4); }

.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftrig { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--ds-font-sans); background: #fff; border: 1px solid var(--ds-rule); color: var(--ds-ink-3); border-radius: 9px; padding: 9px 12px; cursor: pointer; text-decoration: none; }
.ftrig:hover { background: #f2f2f5; color: var(--ds-ink); }
.ftrig svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ftrig .chev { width: 10px; height: 10px; opacity: .55; }
.ftrig.on { background: rgba(247, 52, 99, .09); border-color: rgba(247, 52, 99, .35); color: var(--ds-accent); }
.ftrig.on .badge { background: var(--ds-accent); color: #fff; border-radius: 20px; font-size: 10px; padding: 1px 6px; font-weight: 700; }

.stage-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--ds-rule); flex-wrap: wrap; }
.stab { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--ds-font-sans); color: var(--ds-ink-3); padding: 12px 14px; cursor: pointer; border: 0; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.stab:hover { color: var(--ds-ink); }
.stab.on { color: var(--ds-accent); border-bottom-color: var(--ds-accent); }
.stab .cnt { font-size: 11px; color: var(--ds-ink-4); background: #f2f2f5; border: 1px solid var(--ds-rule); border-radius: 20px; padding: 2px 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stab.on .cnt { color: var(--ds-accent); background: rgba(247, 52, 99, .10); border-color: rgba(247, 52, 99, .22); }
.stage-tabs .div { width: 1px; height: 16px; background: var(--ds-rule-2); margin: 0 6px; }

/* Franja resumen oscura (figura booker-comisiones) */
.sumbar { display: flex; flex-wrap: wrap; gap: 26px; background: var(--ds-dark-1); border: 1px solid var(--ds-dark-3); border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 16, 22, .08), 0 12px 30px -4px rgba(16, 16, 22, .20); padding: 15px 22px; color: #f4f4f6; margin-bottom: 18px; }
.sumbar .kv .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #9a9aa6; }
.sumbar .kv .v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; margin-top: 3px; }
.sumbar .kv .v.red { color: #ff6b8a; }

/* Estado con punto (figura booker-agentes) */
.act-dot { font-size: 12.5px; font-weight: 600; color: #17a673; white-space: nowrap; }
.act-dot::before { content: "●"; font-size: 9px; margin-right: 5px; vertical-align: 1px; }
.act-dot.off { color: var(--ds-ink-4); }

/* Género como pill neutra (figura booker-talento) */
.pill.genre { color: var(--ds-ink-2); background: #ececf0; }

/* ── Páginas legacy (.ds-page): tablas, títulos y calendario al lenguaje
   de las figuras (Contactos, Talento, Comisiones, Agentes, Calendario). ── */
.ds-page h1 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; }
.ds-page .ds-tbl thead th {
  font-size: 11.5px; font-weight: 500; color: var(--ds-ink-4);
  background: #f2f2f5; text-transform: none; letter-spacing: 0;
  padding: 10px 14px; border-bottom: 1px solid var(--ds-rule); white-space: nowrap;
}
.ds-page .ds-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--ds-rule); }
.ds-page .ds-tbl tbody tr:hover td { background: #f2f2f5; }
.ds-page .table thead th {
  font-size: 11.5px; font-weight: 500; color: var(--ds-ink-4);
  background: #f2f2f5; border-bottom: 1px solid var(--ds-rule);
}
.ds-page .card { border-radius: 14px; border-color: #dfe1e7; }
/* Avatares de listas: círculo oscuro (figuras talento/comisiones) */
.ds-page .tlist-photo--initials { background: #12161d !important; color: #fff !important; }
/* Botones de acción por fila: neutros (figura booker-agentes) */
.ds-page .table .btn-outline-warning, .ds-page .table .btn-outline-success,
.ds-page .table .btn-outline-info, .ds-page .table .btn-outline-primary,
.ds-page .table .btn-outline-secondary {
  border-color: var(--ds-rule-2); color: var(--ds-ink-3); background: #fff;
}
.ds-page .table .btn-outline-warning:hover, .ds-page .table .btn-outline-success:hover,
.ds-page .table .btn-outline-info:hover, .ds-page .table .btn-outline-primary:hover,
.ds-page .table .btn-outline-secondary:hover {
  background: #f2f2f5; color: var(--ds-ink); border-color: var(--ds-rule-2);
}
.ds-page .fc { background: #fff; border-radius: 14px; }

/* Eventos del calendario: 3px de borde + tinte 12% (figura booker-calendario) */
.ds-page .fc .cal-evt--tbc { background: rgba(184, 128, 31, .12); color: #96691a; border-color: transparent; border-left: 3px solid #e0a913; }
.ds-page .fc .cal-evt--confirmed { background: rgba(23, 166, 115, .12); color: #0f7a52; border-color: transparent; border-left: 3px solid #17a673; }
.ds-page .fc .cal-evt--settled { background: rgba(91, 98, 115, .12); color: #5b6273; border-color: transparent; border-left: 3px solid #8b92a1; }
.ds-page .fc .cal-evt--lost, .ds-page .fc .cal-evt--cancelled { background: rgba(224, 86, 127, .12); color: #c0335e; border-color: transparent; border-left: 3px solid #e0567f; }

/* ── Reportes (figura booker-reportes): fila de KPIs como tarjetas, el
   primero como hero rojo. La funcionalidad (GridStack, filtros, objetivos)
   no se toca. ── */
.rep-kpis.ds-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; background: transparent; border: 0;
}
.rep-kpis .ds-grid-cell {
  background: #fff; border: 1px solid #dfe1e7; border-radius: 12px;
  padding: 13px 15px; box-shadow: 0 1px 2px rgba(16, 16, 22, .08);
  display: flex; flex-direction: column; gap: 6px;
}
.rep-kpis .ds-grid-cell:first-child {
  background: var(--ds-accent); border-color: var(--ds-accent);
}
.rep-kpis .ds-grid-cell:first-child .ds-grid-lbl { color: rgba(255, 255, 255, .85); }
.rep-kpis .ds-grid-cell:first-child .ds-grid-val { color: #fff; }
.rep-kpis .ds-grid-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ds-ink-3);
}
.rep-kpis .ds-grid-val { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

/* Pie de tabla (dentro de la tarjeta) */
.tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; background: #f2f2f5; border-top: 1px solid var(--ds-rule); font-size: 12px; color: var(--ds-ink-3); }
.tfoot .pg { display: flex; gap: 6px; }
.tfoot .pg button, .tfoot .pg a { font: 600 12px/1 var(--ds-font-sans); background: #fff; border: 1px solid var(--ds-rule); color: var(--ds-ink-3); border-radius: 7px; padding: 6px 10px; cursor: pointer; text-decoration: none; }
.tfoot .pg button:hover, .tfoot .pg a:hover { color: var(--ds-ink); border-color: var(--ds-rule-2); }

/* ── Tarjetas de rail compartidas Tablero ↔ Calendario ─────────────────────
   Lote 3 de Sebas (2026-09-01, cross-pantalla a): el Calendario gana rail
   derecho con Ventas + TBC + Notas reusando las tarjetas del Tablero, así
   que .dcard y la TBC heat list suben del inline del Tablero a este kit. */
.dcard { background: var(--ds-dark-1); border: 1px solid var(--ds-dark-3); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 16, 22, .08), 0 12px 30px -4px rgba(16, 16, 22, .20); color: #f4f4f6; overflow: hidden; }
.dcard-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.dcard-h .t { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.015em; }
.dcard-h .meta { font-size: 12px; color: #9a9aa6; }

/* Ventas compacta (figura booker-calendario-rojo: mitad de alto, 2 columnas) */
.dcard.compact .dcard-h { padding: 14px 18px 4px; }
.dcard .vbody { padding: 2px 20px 20px; }
.dcard.compact .vbody { padding: 2px 18px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sale { padding: 8px 0; }
.dcard.compact .sale { padding: 0; }
.sale-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9a9aa6; font-weight: 500; }
.sale-h .dot { width: 9px; height: 9px; border-radius: 50%; }
.sale-h .dot.g { background: #13a06f; }
.sale-h .dot.p { background: #0b6e4c; }
.sale-h .cnt { margin-left: auto; font-size: 12.5px; color: #9a9aa6; }
.dcard.compact .sale-h .cnt { margin-left: 6px; font-size: 11.5px; }
.sale-v { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 6px 0 10px; }
.dcard.compact .sale-v { font-size: 22px; margin: 5px 0 8px; }
.meter { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 5px; }
.meter.thin { height: 6px; }
.m-green { background: #13a06f; }
.m-purple { background: #0b6e4c; }

/* TBC heat list (proximidad → calor) */
.tbc-list { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; }
.tbc-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: var(--rowbg); text-decoration: none; }
.tbc-row .d { width: 9px; height: 9px; border-radius: 50%; background: var(--rowc); flex-shrink: 0; }
.tbc-row .nm { font-size: 13.5px; font-weight: 600; color: var(--ds-ink); }
.tbc-row .cty { font-size: 12.5px; color: var(--ds-ink-3); }
.tbc-row .dt { margin-left: auto; font-size: 12px; color: var(--ds-ink-3); white-space: nowrap; }
.tbc-row.h1 { --rowc: #ef4444; --rowbg: rgba(239, 68, 68, .08); }
.tbc-row.h2 { --rowc: #f59042; --rowbg: rgba(245, 144, 66, .10); }
.tbc-row.h3 { --rowc: #e0a913; --rowbg: rgba(224, 169, 19, .12); }
.tbc-foot { text-align: center; padding: 6px 0 14px; }
.tbc-foot a { font-size: 12.5px; color: var(--ds-ink-3); font-weight: 600; text-decoration: none; }

/* Notas en lista (rail del Calendario) */
.notes-list { display: flex; flex-direction: column; }
.note-li { padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; }
.note-li + .note-li { border-top: 1px solid var(--ds-rule); }
.note-li .ntx { font-size: 12.5px; color: var(--ds-ink); line-height: 1.42; }
.note-li .nfoot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ds-ink-3); }
.note-li .nav { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.note-li .ntime { margin-left: auto; color: var(--ds-ink-4); font-size: 11.5px; }
.notes-foot { text-align: center; padding: 6px 0 14px; }
.notes-foot a { font-size: 12.5px; color: var(--ds-ink-3); font-weight: 600; text-decoration: none; }