/* ==========================================================================
 * TridicadSoft POS — Diseño unificado de pantallas (tridi-ui-paginas.css)
 * Encabezados de página, tarjetas, indicadores y tablas. Requiere tridi-ui.css (variables).
 * No se carga en el Punto de Venta (pv.php), que tiene su propio diseño de pantalla completa.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Encabezado de cada pantalla (unifica los dos estilos que existían:
 * ".pagetitle h1.h3" con migas de pan y "h3.fw-bold" con subtítulo)
 * ------------------------------------------------------------------------ */
.pagetitle { margin-bottom: 18px; }
.pagetitle h1,
.main h1.h3,
.main h1.fw-bold,
.main h3.fw-bold.mb-0,
.main h3.fw-bold.mb-1 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--t-texto);
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: .15rem;
}
.pagetitle h1 > i.bi:first-child,
.main h1.h3 > i.bi:first-child,
.main h1.fw-bold > i.bi:first-child,
.main h3.fw-bold.mb-0 > i.bi:first-child,
.main h3.fw-bold.mb-1 > i.bi:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: .55rem !important;
  border-radius: 10px;
  font-size: 1.1rem;
  background: rgba(var(--t-primario-rgb), .1);
}
/* Los títulos dentro de tarjetas/modales conservan su tamaño normal */
.main .card h3.fw-bold.mb-0,
.main .card h3.fw-bold.mb-1,
.main .modal h3.fw-bold.mb-0 { font-size: 1.25rem; display: block; }
.main .card h3.fw-bold > i.bi:first-child,
.main .modal h3.fw-bold > i.bi:first-child {
  display: inline; width: auto; height: auto; margin-right: .4rem !important;
  border-radius: 0; font-size: inherit; background: none;
}
.main h1.h3 + p,
.main h3.fw-bold + p,
.main h3.fw-bold + .text-muted { color: var(--t-texto-3); font-size: .9rem; }
.pagetitle .breadcrumb { font-size: .8rem; margin-top: 4px; }
.pagetitle .breadcrumb a { color: var(--t-texto-3); }
.pagetitle .breadcrumb .active { color: var(--t-texto-2); font-weight: 600; }

/* --------------------------------------------------------------------------
 * Tarjetas
 * ------------------------------------------------------------------------ */
.main .card {
  border: 1px solid var(--t-borde);
  border-radius: var(--t-radio);
  box-shadow: var(--t-sombra);
}
.main .card.border-0 { border: 1px solid var(--t-borde) !important; }
.main .card.shadow-sm { box-shadow: var(--t-sombra) !important; }
.main .card.rounded-4, .main .card.rounded-3 { border-radius: var(--t-radio) !important; }
.main .card-header,
.main .card-footer {
  background: var(--t-superficie);
  border-color: var(--t-borde);
  color: var(--t-texto-2);
}
.main .card-header:first-child { border-radius: var(--t-radio) var(--t-radio) 0 0; }
.main .card-title {
  font-family: var(--t-fuente);
  color: var(--t-texto);
  font-weight: 700;
  font-size: 1.02rem;
}
.main .card-title span { color: var(--t-texto-3); }
a.card:hover, .card[role="button"]:hover, .card.kpi[onclick]:hover { box-shadow: var(--t-sombra-hover); }

/* Indicadores (KPI) usados en varias pantallas */
.kpi .lbl, .kpi-lbl {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--t-texto-3);
}
.kpi .num, .kpi .n, .kpi-num {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
 * Tablas (incluye DataTables)
 * ------------------------------------------------------------------------ */
.main .table { --bs-table-hover-bg: #f8fafc; color: var(--t-texto); }
.main .table > thead > tr > th,
.main .table > thead.table-light > tr > th,
.main .table thead th {
  background: var(--t-superficie-2);
  color: var(--t-texto-3);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--t-borde);
  white-space: nowrap;
}
.main .table > :not(caption) > * > * { border-color: var(--t-borde); }
.main .table td { vertical-align: middle; }
div.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper .dataTables_length select,
div.dt-container .dt-search input,
div.dt-container .dt-length select {
  border: 1px solid var(--t-borde-2);
  border-radius: var(--t-radio-sm);
  padding: .3rem .6rem;
}
div.dataTables_wrapper .dataTables_info,
div.dt-container .dt-info { color: var(--t-texto-3); font-size: .82rem; }
.page-link { color: var(--t-primario); border-color: var(--t-borde); }
.page-item.active .page-link,
.active > .page-link { background: var(--t-primario); border-color: var(--t-primario); }