/* =========================================================
   Pantallas (lado derecho): piezas comunes para que todas se vean iguales en celular,
   laptop y monitor grande. Usa solo los tokens de tema.css (colores, radios, sombras).

   Como se usan (HTML):
   - Encabezado:   <div class="encabezado-pantalla"><h1>Titulo <small>detalle</small></h1>
                     <div class="acciones-pantalla"> botones </div></div>
   - Filtros:      <form class="barra-filtros"><div class="campo"><label>..</label><input class="form-control"></div>
                     ... <div class="campo campo-boton"><button class="btn btn-primary">Filtrar</button></div></form>
   - Datos clave:  <dl class="datos-clave"><div><dt>Cliente</dt><dd>Maria</dd></div> ... </dl>   (dentro de .tarjeta)
   - Tarjeta:      <div class="tarjeta"><h2 class="tarjeta-titulo">..</h2> contenido </div>
   - Totales:      <div class="totales"><div class="fila"><span>Subtotal</span><b>Bs 10.00</b></div>
                     <div class="fila fila-total"><span>Total</span><b>Bs 11.30</b></div></div>
   - Cifras:       <td class="num"> / <th class="num">  (alineadas a la derecha, digitos parejos)
   - Estados:      <span class="estado estado-ok|estado-aviso|estado-peligro|estado-neutro">Pagado</span>
   - Vacio:        <div class="vacio"><i class="fa fa-inbox"></i><p>Todavia no hay ventas.</p></div>
   - Detalle:      <div class="detalle"> <div class="detalle-principal">..</div> <aside class="detalle-lateral">..</aside> </div>
   - Formulario:   <div class="formulario-angosto"> ... </div>  (formularios que no deben estirarse en monitores)
   ========================================================= */

/* ---------- Encabezado de la pantalla ---------- */
.tema-plus .encabezado-pantalla{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin: 4px 0 20px;
}
.tema-plus .encabezado-pantalla h1{ font-size: 30px; margin: 0; line-height: 1.2; }
.tema-plus .encabezado-pantalla h1 small{ font-family: var(--fuente-texto); font-size: 15px; color: var(--texto-suave); margin-left: 6px; }
.tema-plus .encabezado-pantalla .acciones-pantalla{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tema-plus .encabezado-pantalla .acciones-pantalla .btn-group{ display: inline-flex; }
.tema-plus .subtitulo-pantalla{ font-size: 22px; margin: 26px 0 12px; }
.tema-plus .texto-ayuda-pantalla{ color: var(--texto-suave); margin: -10px 0 18px; max-width: 820px; }

/* ---------- Tarjetas ---------- */
.tema-plus .tarjeta{
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 20px;
}
.tema-plus .tarjeta > .table:last-child, .tema-plus .tarjeta > .table-responsive:last-child{ margin-bottom: 0; }
.tema-plus .tarjeta-titulo{
  font-size: 19px; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tema-plus .tarjeta-titulo small{ font-family: var(--fuente-texto); font-size: 13px; color: var(--texto-suave); }
/* tabla que ocupa toda la tarjeta, de borde a borde */
.tema-plus .tarjeta.tarjeta-tabla{ padding: 0; overflow: hidden; }
.tema-plus .tarjeta.tarjeta-tabla > .tarjeta-titulo{ padding: 16px 20px 0; }
.tema-plus .tarjeta.tarjeta-tabla > .table, .tema-plus .tarjeta.tarjeta-tabla > .table-responsive > .table{ margin-bottom: 0; }
/* controles de DataTables (mostrar, buscar, paginas) separados del borde de la tarjeta */
.tema-plus .tarjeta.tarjeta-tabla .dataTables_wrapper > .row{ margin: 0; padding: 12px 16px; }

/* ---------- Barra de filtros ---------- */
.tema-plus .barra-filtros{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  padding: 14px 16px; margin-bottom: 20px; box-shadow: var(--sombra);
}
.tema-plus .barra-filtros .campo{ display: flex; flex-direction: column; gap: 4px; flex: 1 1 170px; min-width: 150px; max-width: 320px; margin: 0; }
.tema-plus .barra-filtros .campo > label{ font-size: 13px; color: var(--texto-suave); margin: 0; }
.tema-plus .barra-filtros .campo-boton{ flex: 0 0 auto; min-width: 0; }
.tema-plus .barra-filtros .campo-boton .btn{ height: 44px; }
.tema-plus .barra-filtros .campo-ancho{ flex: 3 1 320px; max-width: none; }   /* buscador que puede ocupar mas */

/* ---------- Datos clave de un documento (venta, compra, traspaso...) ---------- */
.tema-plus .datos-clave{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 22px; margin: 0;
}
.tema-plus .datos-clave > div{ min-width: 0; }
.tema-plus .datos-clave dt{ font-size: 12px; font-weight: 500; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.tema-plus .datos-clave dd{ margin: 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Totales ---------- */
.tema-plus .totales{
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra); padding: 8px 20px; margin-bottom: 20px;
}
.tema-plus .totales .fila{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.tema-plus .totales .fila:last-child{ border-bottom: 0; }
.tema-plus .totales .fila > span{ color: var(--texto-suave); }
.tema-plus .totales .fila > b{ font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tema-plus .totales .fila-total > span{ color: var(--texto); font-weight: 600; }
.tema-plus .totales .fila-total > b{ font-family: var(--fuente-titulos); font-size: 26px; }
/* total grande suelto (reportes): "Total de ventas: Bs 555.00" */
.tema-plus .total-destacado{
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra); padding: 12px 20px; margin: 0 0 20px;
}
.tema-plus .total-destacado > span{ color: var(--texto-suave); }
.tema-plus .total-destacado > b{ font-family: var(--fuente-titulos); font-size: 26px; font-weight: 600; }

/* ---------- Estados (pagado, pendiente, cancelado...) ---------- */
.tema-plus .estado{ display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.tema-plus .estado-ok{ background: var(--ok-fondo); color: var(--ok-texto); }
.tema-plus .estado-aviso{ background: var(--aviso-fondo); color: var(--aviso-texto); }
.tema-plus .estado-peligro{ background: var(--peligro-fondo); color: var(--peligro-texto); }
.tema-plus .estado-neutro{ background: var(--superficie-2); color: var(--texto-suave); }

/* ---------- Sin datos ---------- */
.tema-plus .vacio{
  text-align: center; color: var(--texto-suave); padding: 34px 20px;
  background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-lg); margin-bottom: 20px;
}
.tema-plus .vacio > .fa{ font-size: 34px; color: var(--marca-acento); display: block; margin-bottom: 10px; }
.tema-plus .vacio p{ margin: 0 0 12px; font-size: 15px; }
.tema-plus .vacio p:last-child{ margin-bottom: 0; }

/* ---------- Detalle de un documento: contenido + columna lateral ---------- */
.tema-plus .detalle{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.tema-plus .detalle-principal, .tema-plus .detalle-lateral{ min-width: 0; }

/* ---------- Formularios que no deben estirarse en pantallas anchas ---------- */
.tema-plus .formulario-angosto{ max-width: 860px; }
.tema-plus .formulario-angosto .form-horizontal .control-label{ text-align: left; }

/* ---------- Tablas: filas compactas y columnas utiles en cualquier pantalla ---------- */
.tema-plus .table > tbody > tr > td, .tema-plus .table > thead > tr > th{ padding: 10px 12px; }
.tema-plus .table td.num, .tema-plus .table th.num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tema-plus .table td.fecha{ white-space: nowrap; }
/* botones de una fila: uno al lado del otro, sin estirar la fila (tablas-movil.js marca la celda) */
@media (min-width: 768px){
  .tema-plus .table td.celda-acciones{ white-space: nowrap; width: 1%; text-align: right; }
  .tema-plus .table td.celda-acciones > .btn, .tema-plus .table td.celda-acciones > a.btn,
  .tema-plus .table td.celda-acciones > form, .tema-plus .table td.celda-acciones > .btn-group{ display: inline-flex; vertical-align: middle; margin: 2px 0 2px 4px; }
  .tema-plus .table td.celda-acciones > br{ display: none; }
}
/* tablas anchas: se desplazan dentro de su tarjeta, nunca la pagina entera */
.tema-plus .table-responsive{ border: 0; margin-bottom: 0; }

/* mensaje de "sin datos" dentro de una tarjeta con tabla */
.tema-plus .tarjeta-tabla > .vacio{ margin: 16px 20px 20px; }
/* varios totales destacados en fila (ej. total del periodo y comision) */
.tema-plus .totales-fila{ display: flex; flex-wrap: wrap; gap: 12px; }
.tema-plus .totales-fila > .total-destacado{ margin-bottom: 0; }
.tema-plus .totales-fila{ margin-bottom: 20px; }
/* Configuracion: etiqueta a la izquierda, control a la derecha */
.tema-plus .tabla-ajustes{ table-layout: fixed; }
.tema-plus .tabla-ajustes td{ white-space: normal; }
.tema-plus .tabla-ajustes th:first-child, .tema-plus .tabla-ajustes td:first-child{ width: 45%; }

/* nota chica bajo una cifra (ej. "por % de ganancia" bajo el precio) */
.tema-plus .table td.num small{ display: block; font-size: 12px; color: var(--texto-suave); }
/* ayuda corta dentro de una tarjeta con tabla de borde a borde */
.tema-plus .tarjeta-tabla > .help-block{ padding: 0 20px; }
/* botones al pie de un formulario */
.tema-plus .acciones-formulario{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* foto del producto en carga rapida */
.tema-plus .vista-foto{ max-width: 320px; width: 100%; }
.tema-plus .vista-foto-chica{ max-width: 200px; max-height: 200px; }
/* el atributo hidden siempre oculta (algunos estilos del tema le ponian display) */
.tema-plus [hidden]{ display: none !important; }

/* leyenda de los graficos redondos (tablero-graficos.php) */
.tema-plus .leyenda-grafico{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 20px; }
.tema-plus .leyenda-grafico li{ display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.tema-plus .leyenda-grafico li > span:nth-child(2){ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-suave); }
.tema-plus .leyenda-grafico li > b{ font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tema-plus .leyenda-punto{ width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* formulario opcional plegado tras un boton (ej. "Editar datos de la venta") */
.tema-plus details.desplegable{ margin-bottom: 20px; }
.tema-plus details.desplegable > summary{ list-style: none; flex-direction: column; gap: 2px; height: auto; white-space: normal; }
.tema-plus details.desplegable > summary::-webkit-details-marker{ display: none; }
.tema-plus details.desplegable > summary small{ font-size: 12px; color: var(--texto-suave); font-weight: 400; }
.tema-plus details.desplegable[open] > summary{ margin-bottom: 12px; }
.tema-plus details.desplegable[open] > summary small{ display: none; }

/* ---------- Pantallas anchas (monitores) ---------- */
@media (min-width: 1600px){
  .tema-plus section.content{ padding-left: 28px; padding-right: 28px; }
  .tema-plus .detalle{ grid-template-columns: minmax(0, 1fr) 380px; }
}

/* ---------- Laptop y tablet: el lateral del detalle baja ---------- */
@media (max-width: 1199px){
  .tema-plus .detalle{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Celular ---------- */
@media (max-width: 767px){
  .tema-plus .encabezado-pantalla{ margin-bottom: 14px; }
  .tema-plus .encabezado-pantalla h1{ font-size: 26px; }
  .tema-plus .encabezado-pantalla .acciones-pantalla{ width: 100%; }
  .tema-plus .encabezado-pantalla .acciones-pantalla > .btn, .tema-plus .encabezado-pantalla .acciones-pantalla > .btn-group{ flex: 1 1 auto; }
  .tema-plus .encabezado-pantalla .acciones-pantalla > .btn-group > .btn{ width: 100%; }
  .tema-plus .tarjeta{ padding: 14px; }
  .tema-plus .barra-filtros{ padding: 12px; }
  .tema-plus .barra-filtros .campo{ flex: 1 1 100%; max-width: none; }
  .tema-plus .barra-filtros .campo-boton{ flex: 1 1 100%; }
  .tema-plus .barra-filtros .campo-boton .btn{ width: 100%; height: var(--toque); }
  .tema-plus .datos-clave{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .tema-plus .totales{ padding: 6px 14px; }
  .tema-plus .total-destacado{ display: flex; }
  /* tabla dentro de una tarjeta: sus filas-tarjeta van con margen propio y sin sombra doble */
  .tema-plus .tarjeta.tarjeta-tabla{ padding-bottom: 4px; }
  .tema-plus .tarjeta-tabla table.tabla-tarjetas > tbody > tr{ margin: 0 12px 12px; box-shadow: none; }
}

/* ---------- Tema oscuro ---------- */
html[data-theme="oscuro"] .tema-plus .vacio{ border-color: var(--borde-fuerte); }

/* ---------- Descuentos ---------- */
.tema-plus .tp-precio-promo{ color: var(--marca-acento-texto); }
.tema-plus .tp-precio-promo s{ display: block; font-size: 13px; font-weight: 400; color: var(--texto-suave); }
.tema-plus .tp-promocion, .tema-plus .cl-promocion{ margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--marca-acento-texto); }
.tema-plus .cl-promocion{ margin: 2px 0 0; }
.tema-plus .acciones-fila{ white-space: nowrap; }
.tema-plus .form-en-linea{ display: inline; }
.tema-plus .etiqueta-campo{ font-weight: 600; margin-bottom: 8px; font-size: 14px; border: 0; }
.tema-plus .opcion-alcance{ display: flex; align-items: center; gap: 10px; min-height: var(--toque); margin: 0; font-weight: 400; cursor: pointer; }
.tema-plus .opcion-alcance input{ width: 18px; height: 18px; margin: 0; }
.tema-plus .lista-casillas{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px;
  max-height: 320px; overflow-y: auto; margin-top: 8px; padding: 8px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie);
}
.tema-plus .lista-casillas label{ display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; font-weight: 400; cursor: pointer; }
.tema-plus .lista-casillas label[hidden]{ display: none; }
.tema-plus .lista-casillas input{ width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.tema-plus .lista-casillas small{ margin-left: 4px; }
.tema-plus .elegidos{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.tema-plus .elegidos:empty{ display: none; }
.tema-plus .elegidos li{
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 999px;
  background: var(--superficie-2); border: 1px solid var(--borde-fuerte); font-size: 13px;
}
.tema-plus .quitar-elegido{
  width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.tema-plus .quitar-elegido:hover{ background: var(--peligro-fondo); color: var(--peligro-texto); }
.tema-plus .paginacion-productos{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--texto-suave); }
.tema-plus .lista-productos{ max-height: none; min-height: 120px; }