/* ==========================================================================
   BodegaFlex POS — Estilo B en Facturas del Día y Dashboard (1-nov-2026, Claude).
   Mismos colores y tamaños que la Caja y el Inventario (variables --b-* de estilo-b.css, claro y oscuro).
   Solo apariencia: no cambia qué datos se muestran ni cómo se calculan.
   ========================================================================== */

/* ---------- Facturas del Día: cabecera ---------- */
html[data-estilo="b"] #panel-facturas-dia { background: var(--b-fondo); }
html[data-estilo="b"] #panel-facturas-dia .module-title { color: var(--b-texto); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
html[data-estilo="b"] #panel-facturas-dia .module-subtitle { color: var(--b-texto-2); }
html[data-estilo="b"] #badge-facturas-dia-resumen:not(#_) {
  background: var(--b-tarjeta) !important;
  border: 1px solid var(--b-borde) !important;
  color: var(--b-texto) !important;
  border-radius: 12px;
  box-shadow: var(--b-sombra);
  font-weight: 700;
}
html[data-estilo="b"] #panel-facturas-dia .module-header button:not(#_) {
  min-height: 44px;
  border-radius: 12px !important;
  background: var(--b-tarjeta) !important;
  border: 1px solid var(--b-borde) !important;
  color: var(--b-marca) !important;
  font-weight: 700;
  box-shadow: none !important;
}
html[data-estilo="b"] #search-facturas-dia {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--b-borde);
  background: var(--b-tarjeta);
  color: var(--b-texto);
}
html[data-estilo="b"] #panel-facturas-dia .table-responsive-wrapper:not(#_):not(#_):not(#_):not(#_) {
  background: var(--b-tarjeta) !important;
  border: 1px solid var(--b-borde) !important;
  border-radius: 16px;
  box-shadow: var(--b-sombra) !important;
}
@media (max-width: 767px) {
  /* En el teléfono cada factura ya es su propia tarjeta */
  html[data-estilo="b"] #panel-facturas-dia .table-responsive-wrapper:not(#_):not(#_):not(#_):not(#_) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}
html[data-estilo="b"] #table-facturas-dia thead th { color: var(--b-texto-2); background: transparent; }

/* ---------- Botones de cada factura (todas las pantallas) ---------- */
html[data-estilo="b"] #table-facturas-dia .bf-fac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--b-borde);
  background: var(--b-tarjeta);
  color: var(--b-marca);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  margin: 2px;
}
html[data-estilo="b"] #table-facturas-dia .bf-fac-wa { color: var(--b-exito); }
/* El modo noche viejo (tema-noche.css) pintaba PDF de azul y WhatsApp de verde: aquí mandan los colores B */
html[data-estilo="b"] #panel-facturas-dia #table-facturas-dia .bf-fac-btn:not(#_) {
  background: var(--b-tarjeta) !important;
  border: 1px solid var(--b-borde) !important;
  color: var(--b-marca) !important;
  box-shadow: none !important;
}
html[data-estilo="b"][data-tema="noche"] #panel-facturas-dia #table-facturas-dia .bf-fac-btn:not(#_) { color: var(--b-accion) !important; }
html[data-estilo="b"] #panel-facturas-dia #table-facturas-dia .bf-fac-wa:not(#_) { color: var(--b-exito) !important; }
html[data-estilo="b"][data-tema="noche"] #panel-facturas-dia #table-facturas-dia .bf-fac-wa:not(#_) { color: #4ADE80 !important; }
html[data-estilo="b"] #panel-facturas-dia #table-facturas-dia .bf-fac-anular:not(#_) { background: transparent !important; border-color: transparent !important; color: var(--b-peligro) !important; }
html[data-estilo="b"][data-tema="noche"] #panel-facturas-dia #table-facturas-dia .bf-fac-anular:not(#_) { color: #F87171 !important; }
html[data-estilo="b"] #table-facturas-dia .bf-fac-anular {
  border-color: transparent;
  background: transparent;
  color: var(--b-peligro);
}

/* ---------- Facturas del Día en el teléfono: una tarjeta compacta por factura ---------- */
@media (max-width: 767px) {
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num hora estado"
      "cliente cliente cliente"
      "items items items"
      "metodo total total"
      "acciones acciones acciones";
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
    border: 1px solid var(--b-borde) !important;
    background: var(--b-tarjeta) !important;
    box-shadow: var(--b-sombra) !important;
  }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac.bf-fac-anulada { opacity: 0.6; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    text-align: left !important;
    color: var(--b-texto) !important;
  }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td::before { display: none !important; content: none !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-num { grid-area: num; font-size: 1rem !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-hora { grid-area: hora; justify-self: start; text-align: left !important; color: var(--b-texto-2) !important; font-size: 0.9rem !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-estado { grid-area: estado; text-align: right !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-cliente { grid-area: cliente; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-cliente > div { display: inline; color: inherit !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-cliente > div + div { margin-left: 6px; color: var(--b-texto-2) !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-items { grid-area: items; color: var(--b-texto-2) !important; font-size: 0.9rem !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-metodo { grid-area: metodo; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-total { grid-area: total; text-align: right !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-total > div:first-child { font-size: 1.35rem; color: var(--b-precio) !important; line-height: 1.15; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac-anulada td.bf-fac-total > div:first-child { color: var(--b-texto-2) !important; text-decoration: line-through; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-total > div + div { color: var(--b-bs) !important; font-size: 0.85rem !important; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-acciones {
    grid-area: acciones;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
    padding-top: 10px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--b-borde) !important;
    white-space: normal !important;
  }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-acciones .bf-fac-btn {
    width: 100%;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
  }
  /* Anular / Cancelar: una línea discreta debajo, a todo lo ancho */
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-acciones > :nth-child(4) { grid-column: 1 / -1; justify-self: center; }
  html[data-estilo="b"] #table-facturas-dia tbody tr.bf-fac > td.bf-fac-acciones .bf-fac-anular { width: auto; min-height: 40px !important; }
}

/* ==========================================================================
   Dashboard: tarjetas limpias con una franja de color a la izquierda según el tipo
   ========================================================================== */
html[data-estilo="b"] #panel-dashboard { background: var(--b-fondo); }
html[data-estilo="b"] #panel-dashboard .module-title { color: var(--b-texto); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
html[data-estilo="b"] #panel-dashboard .module-subtitle { color: var(--b-texto-2); }
html[data-estilo="b"] #panel-dashboard .module-header button:not(#_):not(#_) {
  min-height: 44px;
  border-radius: 12px !important;
  background: var(--b-tarjeta) !important;
  border: 1px solid var(--b-borde) !important;
  color: var(--b-marca) !important;
  font-weight: 700;
  box-shadow: none !important;
}
html[data-estilo="b"][data-tema="noche"] #panel-dashboard .module-header button:not(#_):not(#_) { color: var(--b-accion) !important; }

/* Títulos de cada bloque */
html[data-estilo="b"] #panel-dashboard h3:not(.kpi-value):not(#_):not(#_),
html[data-estilo="b"] #panel-dashboard .chart-title:not(#_) { color: var(--b-texto) !important; font-weight: 800; }
html[data-estilo="b"] #panel-dashboard small:not(.kpi-subtext):not(#_):not(#_),
html[data-estilo="b"] #panel-dashboard .chart-subtitle:not(#_) { color: var(--b-texto-2) !important; }

/* Todas las tarjetas */
html[data-estilo="b"] #panel-dashboard :is(.kpi-card, .patrimonio-card, .chart-card, .dashboard-arqueo-panel, .dashboard-overdue-section, .dashboard-audit-logs-card):not(#_):not(#_):not(#_) {
  background: var(--b-tarjeta) !important;
  border: 1px solid var(--b-borde) !important;
  border-radius: 16px !important;
  box-shadow: var(--b-sombra) !important;
}
html[data-estilo="b"] #panel-dashboard :is(.kpi-card, .patrimonio-card):not(#_):not(#_):not(#_) {
  box-shadow: inset 4px 0 0 var(--bf-franja, var(--b-borde)), var(--b-sombra) !important;
}
html[data-estilo="b"] #panel-dashboard :is(.kpi-card-income, .kpi-card-cierres-capital, .patrimonio-card.ganancia) { --bf-franja: var(--b-exito); }
html[data-estilo="b"] #panel-dashboard :is(.kpi-card-expense, .kpi-card-cierres-gastos) { --bf-franja: var(--b-peligro); }
html[data-estilo="b"] #panel-dashboard :is(.kpi-card-balance, .kpi-card-collected, .kpi-card-clients, .patrimonio-card.intocable) { --bf-franja: var(--b-marca); }
html[data-estilo="b"] #panel-dashboard :is(.kpi-card-pending, .kpi-card-overdue, .patrimonio-card.gancho) { --bf-franja: var(--b-aviso); }
html[data-estilo="b"] #panel-dashboard .patrimonio-card.inventario { --bf-franja: var(--b-texto-2); }
html[data-estilo="b"][data-tema="noche"] #panel-dashboard :is(.kpi-card-balance, .kpi-card-collected, .kpi-card-clients, .patrimonio-card.intocable) { --bf-franja: var(--b-accion); }

/* Textos dentro de las tarjetas */
html[data-estilo="b"] #panel-dashboard :is(.kpi-label, .patrimonio-title):not(#_):not(#_):not(#_) {
  color: var(--b-texto) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html[data-estilo="b"] #panel-dashboard :is(.kpi-subtext, .patrimonio-desc):not(#_):not(#_):not(#_) { color: var(--b-texto-2) !important; }
html[data-estilo="b"] #panel-dashboard :is(.patrimonio-val-bs, #kpi-ingresos-mes-bs, #kpi-gastos-mes-bs):not(#_):not(#_):not(#_) { color: var(--b-bs) !important; }
html[data-estilo="b"] #panel-dashboard .kpi-value:not(#kpi-balance-neto-mes):not(#_):not(#_),
html[data-estilo="b"] #panel-dashboard .patrimonio-val-usd:not(#patrimonio-ganancia-libre):not(#_):not(#_) {
  color: var(--b-precio) !important;
  font-weight: 800 !important;
}
/* Los dos números que dicen si entra o sale dinero conservan su color */
html[data-estilo="b"] #panel-dashboard #kpi-ingresos-mes:not(#_):not(#_) { color: var(--b-exito) !important; }
html[data-estilo="b"] #panel-dashboard #kpi-gastos-mes:not(#_):not(#_) { color: var(--b-peligro) !important; }
html[data-estilo="b"][data-tema="noche"] #panel-dashboard #kpi-ingresos-mes:not(#_):not(#_) { color: #4ADE80 !important; }
html[data-estilo="b"][data-tema="noche"] #panel-dashboard #kpi-gastos-mes:not(#_):not(#_) { color: #F87171 !important; }

/* Iconos de las tarjetas: un círculo suave */
html[data-estilo="b"] #panel-dashboard .kpi-icon-wrap:not(#_):not(#_):not(#_) {
  background: var(--b-suave) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html[data-estilo="b"][data-tema="noche"] #panel-dashboard .kpi-icon-wrap:not(#_):not(#_):not(#_) { background: #22304A !important; }

/* Arqueo: las tres cajitas internas */
html[data-estilo="b"] #dashboard-arqueo-panel > div:nth-child(2) > div:not(#_):not(#_):not(#_) {
  background: var(--b-fondo) !important;
  border: 1px solid var(--b-borde) !important;
  border-radius: 12px !important;
}
html[data-estilo="b"] #dashboard-arqueo-panel > div:nth-child(2) > div > div:first-child > span:first-child:not(#_):not(#_):not(#_) { color: var(--b-texto) !important; }

/* Etiquetas y cifras de las gráficas */
html[data-estilo="b"] #panel-dashboard :is(.chart-badge-gold, .chart-badge-navy):not(#_):not(#_) {
  background: var(--b-suave) !important;
  color: var(--b-marca) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800;
}
html[data-estilo="b"][data-tema="noche"] #panel-dashboard :is(.chart-badge-gold, .chart-badge-navy):not(#_):not(#_) { background: #22304A !important; color: #C7D8FF !important; }
/* La franja de color vieja (styles.css, ::before) se reemplaza por la del borde izquierdo */
html[data-estilo="b"] #panel-dashboard .kpi-card::before { display: none !important; }