/* =========================================================
   Sistema de Comercialización de Juguetes — Juguetería Ramírez
   Morahui Systems
   ========================================================= */

:root {
  --azul: #004C9A;
  --azul-oscuro: #00305E;
  --azul-claro: #E7F0FB;
  --coral: #EF5B3B;
  --amarillo: #FFC72C;
  --turquesa: #16A6A0;
  --magenta: #E91E8C;
  --gris-texto: #2C2F36;
  --gris-suave: #6B7280;
  --gris-borde: #E2E5EA;
  --fondo: #F4F7FB;
  --blanco: #FFFFFF;
  --exito: #1E8E5A;
  --alerta: #C0392B;
}

* { box-sizing: border-box; }

svg { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.icono-tarjeta svg { width: 24px; height: 24px; vertical-align: 0; }
.sidebar .icono svg { width: 18px; height: 18px; vertical-align: 0; }

body {
  margin: 0;
  font-family: 'Segoe UI', Verdana, Arial, sans-serif;
  background: var(--fondo);
  color: var(--gris-texto);
  font-size: 17px;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Login ---------- */
.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%);
}

.tarjeta-login {
  background: var(--blanco);
  border-radius: 14px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.tarjeta-login img.logo { max-width: 240px; margin-bottom: 18px; }
.tarjeta-login h1 { font-size: 19px; margin: 0 0 24px; color: var(--azul-oscuro); }

.campo { text-align: left; margin-bottom: 16px; }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--gris-texto); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  font-size: 15.5px;
  font-family: inherit;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-claro);
}
/* Muestra de solo lectura de "usuario que realiza esta operación": por
   seguridad este dato ya no es un campo elegible (ver includes/catalogos.php),
   se toma automático de la sesión — aquí solo se confirma al usuario quién
   quedará registrado. */
.valor-fijo {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  font-size: 15.5px;
  background: #f3f4f6;
  color: var(--gris-texto);
  box-sizing: border-box;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn-primario { background: var(--azul); color: var(--blanco); width: 100%; }
.btn-primario:hover { background: var(--azul-oscuro); text-decoration: none; }
.btn-coral { background: var(--coral); color: var(--blanco); }
.btn-coral:hover { background: #d8492c; text-decoration: none; }
.btn-secundario { background: var(--blanco); color: var(--azul); border: 1px solid var(--azul); }
.btn-secundario:hover { background: var(--azul-claro); text-decoration: none; }
.btn-peligro { background: var(--alerta); color: var(--blanco); }
.btn-peligro:hover { background: #a5301f; text-decoration: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

.error-login { background: #FDEDEB; color: var(--alerta); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }

/* ---------- Layout general ---------- */
.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--azul-oscuro) 0%, var(--azul) 100%);
  color: var(--blanco);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}

.sidebar .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 12px;
}
.sidebar .marca img { width: 54px; height: 54px; border-radius: 10px; }
.sidebar .marca span { font-weight: 800; font-size: 18px; line-height: 1.2; }

.sidebar nav { flex: 1; overflow-y: auto; }
.sidebar a.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.sidebar a.item:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.sidebar a.item.activo { background: rgba(255,255,255,0.14); border-left-color: var(--amarillo); color: var(--blanco); }
.sidebar .icono { width: 18px; text-align: center; }

.sidebar .salir { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.15); }

.contenido { flex: 1; min-width: 0; }

.topbar {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-borde);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar h2 { margin: 0; font-size: 21px; color: var(--azul-oscuro); }
.topbar .usuario-info { font-size: 14px; color: var(--gris-suave); }

.main { padding: 26px 28px 60px; }

.migas { font-size: 13px; color: var(--gris-suave); margin-bottom: 18px; }
.migas a { color: var(--gris-suave); }

/* ---------- Tarjetas de navegación (Inicio / Módulos) ---------- */
.saludo { margin-bottom: 4px; font-size: 24px; color: var(--azul-oscuro); }
.subtitulo { color: var(--gris-suave); margin-bottom: 24px; }

.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.tarjeta {
  background: var(--blanco);
  border-radius: 12px;
  padding: 22px 20px;
  border: 1px solid var(--gris-borde);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
  display: block;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(16,24,40,.08); text-decoration: none; }
.tarjeta .icono-tarjeta {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--blanco); margin-bottom: 14px;
}
.tarjeta h3 { margin: 0 0 6px; font-size: 16px; color: var(--gris-texto); }
.tarjeta p { margin: 0; font-size: 13.5px; color: var(--gris-suave); }
.tarjeta.deshabilitada { opacity: 0.55; cursor: not-allowed; }
.tarjeta .badge-proximamente {
  display: inline-block; margin-top: 8px; font-size: 10.5px; font-weight: 700;
  background: var(--amarillo); color: var(--azul-oscuro); padding: 2px 8px; border-radius: 20px;
}

/* ---------- Tableros / tablas ---------- */
.panel {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 22px;
}

.panel-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-encabezado h3 { margin: 0; font-size: 16px; color: var(--azul-oscuro); }
.acciones-panel { display: flex; gap: 8px; flex-wrap: wrap; }

.buscador { display: flex; gap: 8px; margin-bottom: 18px; }
.buscador input { flex: 1; }

table.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
table.tabla th {
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  text-align: left;
  padding: 10px 12px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
table.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--gris-borde); vertical-align: middle; }
table.tabla tr:hover td { background: #FAFBFD; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 700; }
.pill-vigente { background: #E5F6EC; color: var(--exito); }
.pill-baja { background: #FDEDEB; color: var(--alerta); }
.pill-espera { background: #FFF6E0; color: #A9740A; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }

.alerta-msg { padding: 12px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 18px; }
.alerta-exito { background: #E5F6EC; color: var(--exito); }
.alerta-error { background: #FDEDEB; color: var(--alerta); }

.vacio { text-align: center; padding: 40px 10px; color: var(--gris-suave); }

/* Carrito de productos deshabilitado hasta elegir empleado/cliente
   (Nota de Venta de Empleados y, en general, cualquier formulario que lo
   necesite) */
.carrito-bloqueado { opacity: 0.45; pointer-events: none; filter: grayscale(40%); }

.no-print { }
.fila-membrete-impresion { display: none; }
.membrete-impresion { display: none; align-items: center; gap: 14px; padding: 4px 2px 18px; }
.membrete-impresion img { width: 50px; height: 50px; border-radius: 10px; }
.membrete-impresion .info-empresa strong { display: block; font-size: 17px; color: var(--azul-oscuro); }
.membrete-impresion .info-empresa span { font-size: 12px; color: var(--gris-suave); }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .contenido, .main { padding: 0 !important; margin: 0 !important; }
  body { background: #fff; }
  .fila-membrete-impresion { display: table-row !important; }
  .membrete-impresion { display: flex !important; }
}

/* ---------- Barra y menú móvil ----------
   Ocultos por completo en escritorio; solo se activan debajo de 820px
   (ver el @media de abajo), que es donde el sidebar normal desaparece. */
.topbar-movil { display: none; }
.fondo-menu-movil { display: none; }

@media (max-width: 820px) {
  /* .app queda en fila (row) en escritorio para poner el sidebar junto al
     contenido. En móvil el sidebar se saca del flujo (position: fixed, ver
     abajo), así que sin este cambio ".topbar-movil" y ".contenido" quedaban
     como los dos elementos restantes de esa misma fila — uno al lado del
     otro en vez de uno arriba del otro — y ".topbar-movil" se estiraba
     (align-items: stretch, el valor por defecto) hasta la altura completa
     de todo el contenido de la página. Por eso el logo/menú de arriba se
     veía como un bloque azul gigante ocupando media pantalla.
     En columna, ".topbar-movil" queda arriba, angosto y de su alto normal,
     y ".contenido" abajo, a todo lo ancho, como corresponde. */
  .app { flex-direction: column; }

  .sidebar { display: none; }
  .form-grid { grid-template-columns: 1fr; }

  /* Barra superior fija con el logo y el botón de menú (hamburguesa) */
  .topbar-movil {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(180deg, var(--azul-oscuro) 0%, var(--azul) 100%);
    color: var(--blanco);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .topbar-movil img { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
  .topbar-movil .nombre-empresa-movil { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn-menu-movil {
    background: none; border: none; padding: 6px; margin: 0 2px 0 -4px; cursor: pointer;
    display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
  }
  .btn-menu-movil span { display: block; width: 22px; height: 2px; background: var(--blanco); border-radius: 2px; }

  /* El sidebar se convierte en un cajón (drawer) que se abre encima del
     contenido, en vez del menú fijo de escritorio */
  .sidebar {
    display: flex;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 60;
  }
  .sidebar.abierto { display: flex; transform: translateX(0); }
  .btn-cerrar-menu-movil {
    display: block; align-self: flex-end; margin: 0 14px 6px 0;
    background: none; border: none; color: var(--blanco); font-size: 26px; line-height: 1; cursor: pointer;
  }
  .fondo-menu-movil.visible {
    display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 55;
  }

  /* Título de la pantalla y el saludo de usuario, uno debajo del otro en
     vez de encimados en una sola línea */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
  }
  .topbar h2 { font-size: 18px; }
  .topbar .usuario-info { font-size: 12.5px; }
  .main { padding: 18px 16px 44px; }

  /* En el teléfono las flechitas de +/- de un input numérico casi no
     responden al toque y estorban más de lo que ayudan — se quitan solo
     aquí; en computadora se dejan tal cual porque ahí sí funcionan bien. */
  .cantidad-carrito::-webkit-inner-spin-button,
  .cantidad-carrito::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .cantidad-carrito { -moz-appearance: textfield; appearance: textfield; }

  /* Las tablas con varias columnas (CLAVE, Descripción, cantidades, un
     input...) no caben en el ancho de un teléfono. Sin esto, la tabla se
     salía del panel blanco hacia la derecha (invisible sin deslizar el
     dedo horizontalmente sobre esa fila exacta), lo que hacía parecer
     que el formulario "se cortaba" y que el botón de confirmar había
     desaparecido, cuando en realidad seguía debajo, fuera de la vista
     por el desorden visual. Ahora la tabla se queda dentro de su propia
     tarjeta y se desliza solo ella, con una sombra a los lados como
     pista de que hay más columnas si deslizas. */
  table.tabla { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tabla thead, table.tabla tbody { display: table; width: 100%; }
}

/* El botón de cerrar el cajón solo tiene sentido en móvil */
.btn-cerrar-menu-movil { display: none; }

/* ---------- Almacén: miniaturas y etiquetas de precio ---------- */
.miniatura-producto { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gris-borde); }
.sin-imagen {
  width: 46px; height: 46px; border-radius: 8px; background: var(--fondo);
  display: flex; align-items: center; justify-content: center;
  color: var(--gris-suave); font-size: 9.5px; text-align: center; border: 1px dashed var(--gris-borde);
}
.galeria-imagenes { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.galeria-imagenes img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--gris-borde); }

/* El diseño de la etiqueta de precio (tamaño, layout QR+texto) vive en el
   <style> propio de almacen/etiquetas.php, porque depende del tamaño físico
   exacto del rollo de etiquetas de cada cliente (Juguetería Ramírez usa
   51x25mm) y es más fácil de ajustar ahí que enterrado en esta hoja
   compartida por todo el sistema. */

/* ---------- Ventas: buscador de productos y carrito ---------- */
.buscador-producto-wrap { position: relative; }
.resultados-producto {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  border: 1px solid var(--gris-borde); border-radius: 8px; background: var(--blanco);
  max-height: 240px; overflow-y: auto; box-shadow: 0 8px 20px rgba(16,24,40,.10); margin-top: 4px;
}
.resultados-producto .item-resultado {
  padding: 9px 12px; cursor: pointer; font-size: 13.5px; border-bottom: 1px solid var(--gris-borde);
}
.resultados-producto .item-resultado:last-child { border-bottom: none; }
.resultados-producto .item-resultado:hover { background: var(--azul-claro); }
.resultados-producto .item-resultado .r-desc { font-weight: 600; }
.resultados-producto .item-resultado .r-meta { color: var(--gris-suave); font-size: 12px; }
.resultados-producto .sin-resultados { padding: 10px 12px; color: var(--gris-suave); font-size: 13px; }

table.tabla input.cantidad-carrito { width: 70px; padding: 6px 8px; }
table.tabla tfoot td { padding: 10px 12px; border-top: 2px solid var(--gris-borde); font-size: 15px; }
.saldo-pendiente { font-size: 20px; font-weight: 800; color: var(--coral); }
.saldo-liquidado { font-size: 20px; font-weight: 800; color: var(--exito); }

/* ---------- Ventas: escáner de QR con la cámara ---------- */
.overlay-escaner-qr {
  position: fixed; inset: 0; z-index: 100; background: rgba(16,24,40,.72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.overlay-escaner-qr[hidden] { display: none; }
.caja-escaner-qr {
  background: var(--blanco); border-radius: 14px; padding: 16px; width: 100%; max-width: 420px;
  box-shadow: 0 12px 30px rgba(16,24,40,.25);
}
.encabezado-escaner-qr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#video-escaner-qr { width: 100%; border-radius: 10px; background: #000; max-height: 60vh; }
.msg-escaner-qr { margin-top: 10px; font-size: 13.5px; color: var(--gris-suave); min-height: 18px; }

/* ---------- Nota de venta: plan de pagos y pagaré (impresión) ---------- */
.plan-pagos-nota { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0; }
.plan-pagos-nota .tile-plan {
  flex: 1 1 200px; border: 1px solid var(--gris-borde); border-radius: 12px; padding: 14px 16px; background: var(--fondo);
}
.plan-pagos-nota .tile-plan .etiqueta-plan { font-size: 12.5px; color: var(--gris-suave); text-transform: uppercase; letter-spacing: .03em; }
.plan-pagos-nota .tile-plan .valor-plan { font-size: 28px; font-weight: 800; color: var(--azul-oscuro); margin-top: 2px; }
/* Pedido: "todo esto" (monto sugerido / núm. de pagos / núm. de artículos) en
   negrita y con el tamaño de letra ~2pt más grande que el resto del bloque. */
.plan-pagos-nota .tile-plan .etiqueta-plan { font-weight: 700; }
.plan-pagos-nota.destacado .tile-plan .etiqueta-plan { font-size: 14.5px; }
.plan-pagos-nota.destacado .tile-plan .valor-plan { font-size: 30px; }
.bloque-pagare { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--gris-borde); font-size: 12.5px; line-height: 1.55; color: #333; }
.bloque-pagare h4 { font-size: 13.5px; margin: 0 0 8px; }
.firma-empleado { margin-top: 46px; display: flex; gap: 30px; flex-wrap: wrap; }
.firma-empleado .linea-firma { flex: 1 1 220px; border-top: 1px solid #000; padding-top: 6px; font-size: 12px; text-align: center; }

/* ---------- Detalle de venta: producto dado de baja individualmente ---------- */
.fila-item-baja { text-decoration: line-through; opacity: .55; }
.fila-item-baja td { color: var(--gris-suave); }
.nota-baja-item { font-size: 11.5px; color: var(--gris-suave); font-weight: 400; text-decoration: none; display: block; }

/* ---------- Módulo de Informes: tarjetas de métrica y gráficas
   (ver includes/graficas.php) ---------- */
.tiles-informe { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 20px; }
.tile-informe { flex: 1 1 160px; border: 1px solid var(--gris-borde); border-radius: 12px; padding: 14px 16px; background: var(--fondo); }
.etiqueta-informe { font-size: 12.5px; color: var(--gris-suave); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.valor-informe { font-size: 26px; font-weight: 800; color: var(--azul-oscuro); margin-top: 2px; }

.subtitulo-informe { font-size: 13.5px; color: var(--gris-suave); margin: -8px 0 16px; }

.vacio-grafica { color: var(--gris-suave); font-size: 13.5px; padding: 20px 0; text-align: center; }

/* Pastel: SVG a la izquierda, leyenda de etiquetas a la derecha (se apila
   en pantallas angostas y también se acomoda bien al imprimir). */
.grafica-pastel-envoltura { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.grafica-svg-pastel { width: 170px; height: 170px; flex: 0 0 auto; }
.leyenda-grafica { flex: 1 1 200px; font-size: 13.5px; }
.item-leyenda { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.punto-leyenda { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }

/* Barras horizontales */
.grafica-barras { display: flex; flex-direction: column; gap: 10px; }
.fila-barra { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.etiqueta-barra { color: var(--gris-texto); overflow-wrap: anywhere; }
.pista-barra { background: var(--gris-borde); border-radius: 6px; height: 16px; overflow: hidden; }
.relleno-barra { height: 100%; border-radius: 6px; min-width: 3px; }
.valor-barra { font-weight: 700; color: var(--azul-oscuro); min-width: 28px; text-align: right; }

/* Columnas verticales */
.grafica-columnas { display: flex; align-items: flex-end; gap: 18px; min-height: 190px; padding-top: 10px; }
.columna-grafica { flex: 1 1 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 110px; }
.valor-columna { font-weight: 700; font-size: 13px; color: var(--azul-oscuro); }
.pista-columna { width: 34px; height: 150px; background: var(--gris-borde); border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.relleno-columna { width: 100%; border-radius: 6px 6px 0 0; min-height: 3px; }
.etiqueta-columna { font-size: 12px; color: var(--gris-suave); text-align: center; }

/* Fila de filtros de un informe (GET simple, sin JS): se oculta al imprimir
   igual que el resto de los controles, gracias a .no-print. */
.filtros-informe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.filtros-informe .campo { margin-bottom: 0; min-width: 140px; flex: 1 1 140px; }
.filtros-informe .campo label { font-size: 12.5px; }

/* Rejilla de Informes: el panel de Tablero/resumen (con tarjetas + primera
   gráfica) y cualquier tabla de detalle se quedan a todo el ancho, pero las
   gráficas individuales (pastel/barras/columnas) se acomodan en columnas
   una junto a otra en pantallas anchas, en vez de una tarjeta angosta tras
   otra con mucho espacio en blanco alrededor de la gráfica — así se
   distinguen mejor y se aprovecha el ancho de la pantalla, como en el
   tablero del Dr. Porras. En pantallas angostas cae a una sola columna,
   igual que se veía antes. */
.rejilla-informes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 22px;
  align-items: start;
}
.rejilla-informes .panel { margin-bottom: 0; height: 100%; }
@media print {
  /* Al imprimir, una sola columna: más fácil de leer en papel y evita que
     una gráfica quede cortada entre dos páginas por ir a la mitad de una fila. */
  .rejilla-informes { display: block; }
}

/* En impresión, que la gráfica de pastel y su leyenda no se corten a la
   mitad si el panel cae justo en el salto de página. */
@media print {
  .panel { break-inside: avoid; page-break-inside: avoid; }
}