/* ==========================================================================
   ZENDA POS — ESTÁNDAR GLOBAL DE MÓDULOS (cajas, KPIs, tablas, modales)
   Fuente de verdad: el estilo de vistas/modulos/inicio.php (dashboard).

   Complementa a zenda-botones.css (que ya cubre botones y colores) con el
   RESTO del lenguaje visual: rectángulos de esquinas curvas, sombras suaves,
   tipografía Poppins y la paleta corporativa.

   Se carga en plantilla.php DESPUÉS de zenda-botones.css y aplica a TODOS los
   módulos. Igual que en aquel archivo, los selectores llevan el prefijo `body`
   a propósito para ganarle en especificidad a los <style> locales de cada
   módulo. NO quitar el prefijo.

   Un módulo nuevo NO debería necesitar definir nada de esto: basta con usar
   las clases de AdminLTE (.box, .small-box, .table) y las utilidades .zenda-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  --zenda-azul:        #3c8dbc;
  --zenda-azul-oscuro: #2980b9;
  --zenda-verde:       #00a65a;
  --zenda-rojo:        #dd4b39;
  --zenda-naranja:     #f39c12;
  --zenda-morado:      #8e44ad;
  --zenda-fondo:       #f4f6f9;
  --zenda-texto:       #2c3e50;
  --zenda-texto-suave: #7f8c8d;
  --zenda-borde:       #eef2f6;
  --zenda-radio:       20px;
  --zenda-radio-sm:    12px;
  --zenda-sombra:      0 5px 15px rgba(0,0,0,0.05);
  --zenda-sombra-alta: 0 10px 20px rgba(0,0,0,0.15);
}

/* --------------------------------------------------------------------------
   TIPOGRAFÍA Y FONDO (Poppins se carga en plantilla.php)
   -------------------------------------------------------------------------- */
body .content-wrapper {
  font-family: 'Poppins', sans-serif !important;
  background-color: var(--zenda-fondo);
}

body .content-header { padding-top: 0 !important; }

body .content-header > h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: var(--zenda-texto);
  font-size: 26px !important;
}

body .content-header > h1 > small {
  font-family: 'Poppins', sans-serif !important;
  color: var(--zenda-texto-suave);
  font-weight: 400;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   CAJAS — el rectángulo de esquinas curvas característico
   -------------------------------------------------------------------------- */
body .box {
  border-radius: var(--zenda-radio) !important;
  box-shadow: var(--zenda-sombra) !important;
  border: none !important;
  border-top: none !important;
  background: #fff;
  margin-bottom: 20px;
}

body .box > .box-header {
  border-radius: var(--zenda-radio) var(--zenda-radio) 0 0;
  padding: 16px 20px 10px;
}

body .box > .box-header.with-border { border-bottom: 1px solid var(--zenda-borde); }

body .box > .box-header > .box-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  font-size: 16px;
  color: var(--zenda-texto);
}

body .box > .box-header > .box-title > .fa { color: var(--zenda-azul); margin-right: 6px; }
body .box > .box-body { padding: 16px 20px 20px; }

/* Franja de color superior opcional, sin romper el radio */
body .box.box-primary { border-top: 3px solid var(--zenda-azul) !important; }
body .box.box-success { border-top: 3px solid var(--zenda-verde) !important; }
body .box.box-danger  { border-top: 3px solid var(--zenda-rojo) !important; }
body .box.box-warning { border-top: 3px solid var(--zenda-naranja) !important; }

/* --------------------------------------------------------------------------
   KPI (small-box de AdminLTE) — igual que el dashboard
   -------------------------------------------------------------------------- */
body .small-box {
  border-radius: var(--zenda-radio) !important;
  box-shadow: var(--zenda-sombra-alta) !important;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  border: none !important;
}

body .small-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.25) !important;
}

body .small-box > .inner { padding: 16px 20px; }
body .small-box h3 { font-weight: 800 !important; font-family: 'Poppins', sans-serif !important; }
body .small-box p  { font-weight: 500; }
body .small-box .icon { top: 10px; right: 20px; opacity: .3; font-size: 80px; }

/* --------------------------------------------------------------------------
   TARJETA DE CIFRA (utilidad Zenda, para totales dentro de una caja)
   -------------------------------------------------------------------------- */
body .zenda-cifra {
  background: #fff;
  border: 1px solid var(--zenda-borde);
  border-radius: var(--zenda-radio-sm);
  padding: 14px 16px;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
body .zenda-cifra:hover { box-shadow: var(--zenda-sombra); transform: translateY(-2px); }

body .zenda-cifra .zc-label {
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--zenda-texto-suave);
  font-weight: 600;
  margin-bottom: 4px;
}

body .zenda-cifra .zc-valor {
  font-size: 26px;
  font-weight: 800;
  color: var(--zenda-texto);
  line-height: 1.15;
}

body .zenda-cifra .zc-nota { font-size: 12px; color: var(--zenda-texto-suave); margin-top: 4px; }

/* Variantes de color de la cifra */
body .zenda-cifra.zc-verde   .zc-valor { color: var(--zenda-verde); }
body .zenda-cifra.zc-rojo    .zc-valor { color: var(--zenda-rojo); }
body .zenda-cifra.zc-azul    .zc-valor { color: var(--zenda-azul); }
body .zenda-cifra.zc-naranja .zc-valor { color: var(--zenda-naranja); }
body .zenda-cifra.zc-morado  .zc-valor { color: var(--zenda-morado); }

body .zenda-cifra.zc-verde   { background: #f2fbf6; border-color: #d8f2e5; }
body .zenda-cifra.zc-rojo    { background: #fdf4f3; border-color: #f8dedb; }
body .zenda-cifra.zc-azul    { background: #f3f9fd; border-color: #d9ecf7; }
body .zenda-cifra.zc-naranja { background: #fef8ef; border-color: #fae5c5; }
body .zenda-cifra.zc-morado  { background: #f8f4fb; border-color: #e8dbf2; }

/* --------------------------------------------------------------------------
   PANEL SUAVE (bloques informativos dentro de un modal o caja)
   -------------------------------------------------------------------------- */
body .zenda-panel {
  background: #fbfdff;
  border: 1px solid var(--zenda-borde);
  border-radius: var(--zenda-radio-sm);
  padding: 14px 16px;
}

body .zenda-panel-titulo {
  font-weight: 700;
  font-size: 13px;
  color: var(--zenda-texto);
  margin-bottom: 8px;
}

/* Encabezado de sección dentro de una caja */
body .zenda-subtitulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--zenda-texto-suave);
  font-weight: 700;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   TABLAS
   -------------------------------------------------------------------------- */
body .box .table { font-size: 13.5px; }

body .box .table > thead > tr > th {
  background: #f7f9fb;
  border-bottom: 2px solid var(--zenda-borde) !important;
  border-top: none !important;
  font-weight: 600;
  color: var(--zenda-texto-suave);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .4px;
  padding: 10px 12px;
  white-space: nowrap;
}

body .box .table > tbody > tr > td {
  border-top: 1px solid var(--zenda-borde) !important;
  padding: 10px 12px;
  vertical-align: middle;
}

body .box .table > tfoot > tr > td {
  border-top: 2px solid var(--zenda-borde) !important;
  background: #f7f9fb;
  font-weight: 700;
  padding: 10px 12px;
}

body .box .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fcfdfe; }
body .box .table-hover  > tbody > tr:hover { background-color: #f3f9fd; }

/* Bordes redondeados en tablas con marco */
body .box .table-bordered {
  border-radius: var(--zenda-radio-sm);
  overflow: hidden;
  border-color: var(--zenda-borde) !important;
}
body .box .table-bordered > thead > tr > th,
body .box .table-bordered > tbody > tr > td { border-color: var(--zenda-borde) !important; }

/* Fila destacada (vencido / alerta) */
body .table > tbody > tr.zenda-fila-alerta > td { background: #fdf3f2 !important; }

/* --------------------------------------------------------------------------
   ETIQUETAS
   -------------------------------------------------------------------------- */
body .label {
  border-radius: 999px;
  padding: .3em .8em;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2px;
  display: inline-block;
}

body .label-default { background: #eef2f6 !important; color: #7f8c8d !important; }

/* Punto de color (materiales de joyería, medios de pago, etc.) */
body .zenda-punto {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,.12);
}

body .zenda-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  margin: 0 6px 6px 0;
  background: #f4f6f9;
  color: var(--zenda-texto);
  border: 1px solid var(--zenda-borde);
}

/* --------------------------------------------------------------------------
   FORMULARIOS
   -------------------------------------------------------------------------- */
body .box .form-control,
body .modal .form-control {
  border-radius: 10px !important;
  border: 1px solid #dfe6ec;
  box-shadow: none;
  font-family: 'Poppins', sans-serif;
  height: 38px;
}

body .box .form-control:focus,
body .modal .form-control:focus {
  border-color: var(--zenda-azul);
  box-shadow: 0 0 0 3px rgba(60,141,188,.12);
}

body .modal textarea.form-control,
body .box textarea.form-control { height: auto; }

body .box .input-group-addon,
body .modal .input-group-addon {
  border-radius: 10px;
  border: 1px solid #dfe6ec;
  background: #f7f9fb;
  color: var(--zenda-texto-suave);
}

body .box label,
body .modal label {
  font-weight: 600;
  font-size: 13px;
  color: var(--zenda-texto);
}

/* --------------------------------------------------------------------------
   MODALES
   -------------------------------------------------------------------------- */
body .modal-content {
  border-radius: var(--zenda-radio) !important;
  border: none !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
  overflow: hidden;
}

body .modal-header {
  border-bottom: none;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--zenda-azul) 0%, var(--zenda-azul-oscuro) 100%);
  color: #fff;
}

body .modal-header .modal-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
}

body .modal-header .close { color: #fff; opacity: .9; text-shadow: none; font-size: 26px; }
body .modal-header .close:hover { opacity: 1; }

/* Variantes del encabezado del modal */
body .modal-header.zenda-head-rojo    { background: linear-gradient(135deg, #dd4b39 0%, #b03b2d 100%); }
body .modal-header.zenda-head-verde   { background: linear-gradient(135deg, #00a65a 0%, #007740 100%); }
body .modal-header.zenda-head-naranja { background: linear-gradient(135deg, #f39c12 0%, #cf850f 100%); }
body .modal-header.zenda-head-morado  { background: linear-gradient(135deg, #8e44ad 0%, #6f3486 100%); }
body .modal-header.zenda-head-oscuro  { background: linear-gradient(135deg, #34495e 0%, #22303f 100%); }
body .modal-header.zenda-head-oro     { background: linear-gradient(135deg, #c9a227 0%, #9c7b18 100%); }

body .modal-body  { padding: 20px; }
body .modal-footer {
  border-top: 1px solid var(--zenda-borde);
  padding: 14px 20px;
  background: #fbfdff;
}

/* --------------------------------------------------------------------------
   ALERTAS
   -------------------------------------------------------------------------- */
body .box .alert, body .modal .alert {
  border-radius: var(--zenda-radio-sm);
  border: none;
  font-size: 13.5px;
}
body .box .alert-warning { background: #fef8ef; color: #8a6d3b; }
body .box .alert-success { background: #f2fbf6; color: #1d7a4c; }
body .box .alert-danger  { background: #fdf4f3; color: #a94442; }
body .box .alert-info    { background: #f3f9fd; color: #31708f; }

/* --------------------------------------------------------------------------
   SWITCH CORPORATIVO (activar/desactivar módulos)
   -------------------------------------------------------------------------- */
body .zenda-switch { position: relative; display: inline-block; width: 64px; height: 34px; }
body .zenda-switch input { opacity: 0; width: 0; height: 0; }

body .zenda-switch .zenda-switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #cfd8dc; transition: .3s; border-radius: 34px;
}

body .zenda-switch .zenda-switch-slider:before {
  position: absolute; content: "";
  height: 26px; width: 26px; left: 4px; bottom: 4px;
  background: #fff; transition: .3s; border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

body .zenda-switch input:checked + .zenda-switch-slider {
  background: linear-gradient(135deg, #00a65a 0%, #007740 100%);
}
body .zenda-switch input:checked + .zenda-switch-slider:before { transform: translateX(30px); }

body .zenda-switch-estado { font-weight: 600; margin-top: 6px; font-size: 13px; }

/* Cabecera de un módulo activable: descripción + switch */
body .zenda-activable { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
body .zenda-activable .za-texto { flex: 1 1 320px; }
body .zenda-activable .za-texto h4 {
  margin: 0 0 6px; font-weight: 700; font-size: 17px; color: var(--zenda-texto);
  font-family: 'Poppins', sans-serif;
}
body .zenda-activable .za-texto p { margin: 0; color: #667; font-size: 13.5px; line-height: 1.55; }
body .zenda-activable .za-switch { flex: 0 0 auto; text-align: center; }

/* --------------------------------------------------------------------------
   ESTADO VACÍO
   -------------------------------------------------------------------------- */
body .zenda-vacio {
  text-align: center;
  padding: 30px 20px;
  color: var(--zenda-texto-suave);
}
body .zenda-vacio .zv-icono { font-size: 40px; opacity: .35; margin-bottom: 10px; display: block; }
body .zenda-vacio .zv-titulo { font-weight: 600; color: var(--zenda-texto); margin-bottom: 4px; }
body .zenda-vacio small { font-size: 12.5px; }

/* --------------------------------------------------------------------------
   BARRA DE ACCIONES (filtros / botones sobre las cajas)
   -------------------------------------------------------------------------- */
body .zenda-acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
body .zenda-acciones .za-sep { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   MEDIOS DE PAGO EN EL COBRO (Bloque B)
   Lo usa vistas/js/medios-pago-cobro.js dentro del modal de cobro, tanto en
   crear-venta.php como en convertirComanda.php.
   -------------------------------------------------------------------------- */
body #mp_panel {
  margin-top: 10px;
  border: 1px solid var(--zenda-borde);
  border-radius: var(--zenda-radio-sm);
  padding: 14px;
  background: #fbfdff;
}

body #mp_panel .mp-dato { font-size: 13px; margin-bottom: 4px; color: #34495e; }
body #mp_panel .mp-dato b { color: var(--zenda-texto); }

body #mp_llaveGrande {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--zenda-azul-oscuro);
  letter-spacing: .5px;
  word-break: break-all;
}

body #mp_qrWrap img {
  max-width: 190px;
  border: 1px solid #dfe6ec;
  border-radius: 10px;
  padding: 4px;
  background: #fff;
  cursor: zoom-in;
}

body .mp-copiar { cursor: pointer; font-size: 11px; padding: 2px 8px; }

body #mp_qrModal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 99999; display: none; text-align: center;
}
body #mp_qrModal img {
  max-width: 92%; max-height: 82vh; margin-top: 4vh;
  background: #fff; padding: 10px; border-radius: var(--zenda-radio-sm);
}
body #mp_qrModal .mp-cerrar {
  color: #fff; font-size: 28px;
  position: absolute; top: 14px; right: 24px; cursor: pointer;
}

/* --------------------------------------------------------------------------
   MARCAS DE MEDIOS DE PAGO (Addi, Sistecrédito, Nequi…)
   Lo pinta marcaPagoBadge() de controladores/marcas-pago.helper.php.
   -------------------------------------------------------------------------- */
body .zmarca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

body .zmarca-logo {
  display: block;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

body .zmarca-ini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 0 6px;
}

body .zmarca-txt { font-weight: 600; color: var(--zenda-texto); }

/* En el selector del cobro el logo va más discreto */
body .mp-marca-cobro { margin-bottom: 8px; }
body .mp-marca-cobro .zmarca-logo { max-width: 150px; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body .content-header > h1 { font-size: 21px !important; }
  body .zenda-cifra .zc-valor { font-size: 21px; }
  body .small-box .icon { font-size: 60px; }
  body .box > .box-body { padding: 14px; }
  body .zenda-acciones { justify-content: stretch; }
  body .zenda-acciones .btn { flex: 1 1 auto; }
}