/* Lo propio de Pollo Patuju. AdminLTE no se toca: si algo hay que cambiar, va aca.
   Pensado para una tablet en hora pico: todo lo que se toca es grande. */

:root {
  --pp-alto-boton: 5.5rem;
  --pp-ancho-ticket: 25rem;

  /* ---------- Los colores del logo ----------
     Salen de imagenes/logo.jpeg: el negro del fondo, el amarillo de las letras
     y el rojo del patuju. Son los tres unicos colores de la marca. */
  --pp-negro: #0b0b0b;
  --pp-amarillo: #fedb05;
  --pp-rojo: #f9020a;
}

/* ---------- Modo oscuro y modo claro ----------
   Los dos usan los mismos colores del logo. Lo unico que cambia son los grises
   de fondo y el color de los numeros grandes. Se cambia con el sol/luna de
   arriba (tema.js). */

[data-bs-theme='dark'] {
  /* Los grises que sostienen la pantalla, del mas oscuro al mas claro. */
  --pp-fondo-pagina: #121212;
  --pp-fondo-caja: #1b1b1b;
  --pp-fondo-boton: #262626;
  --pp-fondo-boton-encima: #2c2c2c;
  --pp-borde: #333333;

  /* Precios y totales: amarillo sobre negro, como las letras del logo. */
  --pp-acento: var(--pp-amarillo);
  --pp-texto-opcion: #dddddd;

  --pp-cobrar-apagado-fondo: #46400f;
  --pp-cobrar-apagado-texto: #8d8a76;
  --pp-vaciar-apagado-texto: #6f2b2e;
  --pp-vaciar-apagado-borde: #4d1f21;
}

[data-bs-theme='light'] {
  --pp-fondo-pagina: #f3f3f1;
  --pp-fondo-caja: #ffffff;
  --pp-fondo-boton: #fafaf7;
  --pp-fondo-boton-encima: #f1efe4;
  --pp-borde: #d9d9d4;

  /* El amarillo sobre blanco casi no se ve: los numeros van en un dorado
     oscuro. El amarillo queda en los botones, con letra negra encima. */
  --pp-acento: #7a5f00;
  --pp-texto-opcion: #333333;

  --pp-cobrar-apagado-fondo: #f2eab8;
  --pp-cobrar-apagado-texto: #9b9474;
  --pp-vaciar-apagado-texto: #e9a3a5;
  --pp-vaciar-apagado-borde: #f2c4c5;

  --bs-body-bg: var(--pp-fondo-pagina);
  --bs-body-bg-rgb: 243, 243, 241;
  --bs-body-color: #1a1a1a;
  --bs-secondary-bg: var(--pp-fondo-caja);
  --bs-tertiary-bg: var(--pp-fondo-caja);
  --bs-border-color: var(--pp-borde);
  --bs-primary: var(--pp-acento);
  --bs-primary-rgb: 122, 95, 0;
  --bs-link-color: var(--pp-acento);
  --bs-link-hover-color: #000000;
  --bs-card-bg: var(--pp-fondo-caja);
  --bs-card-border-color: var(--pp-borde);
}

/* AdminLTE y Bootstrap se pintan solos con estas variables: se cambian aca una
   vez y toda la pantalla queda del color del logo. */
[data-bs-theme='dark'] {
  --bs-body-bg: var(--pp-fondo-pagina);
  --bs-body-bg-rgb: 18, 18, 18;
  --bs-body-color: #f1f1f1;
  --bs-secondary-bg: var(--pp-fondo-caja);
  --bs-tertiary-bg: var(--pp-fondo-caja);
  --bs-border-color: var(--pp-borde);
  --bs-emphasis-color: #ffffff;
  --bs-primary: var(--pp-amarillo);
  --bs-primary-rgb: 254, 219, 5;
  --bs-link-color: var(--pp-amarillo);
  --bs-link-hover-color: #ffe95c;
  --bs-card-bg: var(--pp-fondo-caja);
  --bs-card-border-color: var(--pp-borde);
}

/* El boton de accion es amarillo con letra negra: es lo que mas se ve y es el
   color de la marca. Entrar y Cobrar usan este. */
.btn-primary {
  --bs-btn-bg: var(--pp-amarillo);
  --bs-btn-border-color: var(--pp-amarillo);
  --bs-btn-color: #000000;
  --bs-btn-hover-bg: #ffe84d;
  --bs-btn-hover-border-color: #ffe84d;
  --bs-btn-hover-color: #000000;
  --bs-btn-active-bg: #e0c200;
  --bs-btn-active-border-color: #e0c200;
  --bs-btn-active-color: #000000;
  --bs-btn-disabled-bg: var(--pp-cobrar-apagado-fondo);
  --bs-btn-disabled-border-color: var(--pp-cobrar-apagado-fondo);
  --bs-btn-disabled-color: var(--pp-cobrar-apagado-texto);
}

/* El rojo del patuju queda para lo que borra o anula: Vaciar. */
.btn-outline-danger {
  --bs-btn-color: var(--pp-rojo);
  --bs-btn-border-color: var(--pp-rojo);
  --bs-btn-hover-bg: var(--pp-rojo);
  --bs-btn-hover-border-color: var(--pp-rojo);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--pp-rojo);
  --bs-btn-active-border-color: var(--pp-rojo);
  --bs-btn-disabled-color: var(--pp-vaciar-apagado-texto);
  --bs-btn-disabled-border-color: var(--pp-vaciar-apagado-borde);
}

/* El logo: grande en la pantalla de entrar, chiquito en el menu. Va redondo
   porque el dibujo ya es un circulo y las esquinas del archivo son negras. */
.pp-logo-entrar {
  width: 12rem;
  max-width: 70%;
  border-radius: 50%;
}

.pp-logo-menu {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  margin-left: 0.5rem;
  margin-right: 0.6rem;
}

/* El menu de la izquierda es negro, como el fondo del logo. Lleva !important
   porque la clase bg-body-secondary de Bootstrap tambien lo lleva: sin esto
   la barra quedaba gris. */
#pantalla-app .app-sidebar {
  display: flex;
  flex-direction: column;
  background-color: var(--pp-negro) !important;
}

#pantalla-app .app-sidebar .sidebar-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#pantalla-app .brand-link {
  color: var(--pp-amarillo);
  font-weight: 700;
}

#pantalla-app .sidebar-menu .nav-link.active {
  background-color: var(--pp-amarillo);
  color: #000000;
  font-weight: 600;
}

/* ---------- Una sola pantalla ----------
   El sistema ocupa exactamente el alto de la pantalla. La pagina no se desliza:
   el desplazamiento vive adentro de cada bloque. */

#pantalla-app {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

#pantalla-app .app-main {
  min-height: 0;
  overflow: hidden;
}

/* AdminLTE deja las cajas pegadas arriba (padding 0 .5rem). Se le da el mismo
   aire arriba que abajo, asi los dos bloques quedan centrados en la pantalla. */
#pantalla-app .app-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem;
}

#pantalla-app .app-content > .container-fluid {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#pantalla-app .app-content > .container-fluid > [data-vista] {
  flex: 1 1 auto;
  min-height: 0;
}

/* El footer roba alto util en hora pico: se deja flaco. */
#pantalla-app .app-footer {
  min-height: 0;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
}

/* Ventas del dia se desliza dentro de su propio bloque. */
[data-vista='dia'] {
  padding-bottom: 0.5rem;
  overflow-y: auto;
}

/* ---------- Entrar ---------- */

#pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#pantalla-login .card {
  width: 100%;
  max-width: 26rem;
  background: var(--pp-fondo-caja);
  border: 1px solid var(--pp-borde);
}

#pantalla-login .form-control {
  font-size: 1.15rem;
  padding: 0.75rem 1rem;
}

/* ---------- Vender ---------- */

.pp-vender {
  display: grid;
  grid-template-columns: 1fr var(--pp-ancho-ticket);
  gap: 1rem;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

/* Bloque A: los productos. Es una caja igual que la venta. Si los productos no
   entran (la tablet es mas baja que la compu), se desliza con el dedo adentro
   de la caja: sin esto, el spiedo y las bebidas quedaban cortados abajo. */
.pp-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  align-content: start;
  gap: 0.6rem;
  min-height: 0;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--pp-fondo-caja);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Cada producto es un boton grande: se toca con el dedo, no con el mouse. */
.pp-producto {
  min-height: var(--pp-alto-boton);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.6rem;
  border: 2px solid var(--pp-borde);
  border-radius: 0.6rem;
  background: var(--pp-fondo-boton);
  color: inherit;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.12s ease;
}

.pp-producto:active {
  transform: scale(0.96);
}

.pp-producto:hover {
  border-color: var(--pp-acento);
}

.pp-producto .pp-nombre {
  font-weight: 600;
  font-size: 0.95rem;
}

.pp-producto .pp-detalle {
  font-size: 0.8rem;
  opacity: 0.7;
}

.pp-producto .pp-precio {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pp-acento);
}

.pp-grupo-titulo {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-acento);
  opacity: 0.85;
  margin: 1.1rem 0 0.5rem;
}

.pp-grupo-titulo:first-child {
  margin-top: 0;
}

/* ---------- El ticket ---------- */

/* Bloque B: la venta. Se desliza entera: titulo, renglones, total, opciones y
   el boton de cobrar bajan juntos. Una sola barra de deslizar, no dos. */
.pp-ticket {
  display: flex;
  height: 100%;
  min-height: 0;
}

.pp-ticket > .card {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  overflow-y: auto;
  background: var(--pp-fondo-caja);
}

/* El encabezado y el pie de la tarjeta traen su propio fondo: se apagan para
   que el gris de la caja se vea parejo de arriba a abajo. */
.pp-ticket > .card > .card-header,
.pp-ticket > .card > .card-footer {
  background: transparent;
}

/* AdminLTE le agrega al encabezado un pedacito invisible para limpiar floats.
   En una fila flex ese pedacito cuenta como una columna mas y deja a Vaciar en
   el medio en vez del borde. Se apaga y el boton se va a la derecha. */
.pp-ticket > .card > .card-header::after,
.pp-dia-lista > .card-header::after {
  display: none;
}

#pp-renglones {
  min-height: 3rem;
}

.pp-renglon {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.pp-renglon .pp-cant {
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
}

.pp-renglon .pp-que {
  line-height: 1.2;
}

.pp-renglon .pp-que small {
  opacity: 0.65;
}

.pp-renglon:last-child {
  border-bottom: 0;
}

.pp-renglon .pp-sub {
  font-weight: 600;
  white-space: nowrap;
}

.pp-botones-renglon button {
  min-width: 2.4rem;
  min-height: 2.4rem;
}

.pp-total {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bs-border-color);
}

.pp-total .pp-monto {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--pp-acento);
}

.pp-cobrar {
  min-height: 4rem;
  font-size: 1.35rem;
  font-weight: 700;
}

/* ---------- Elegir canal y pago ---------- */

/* Lo elegido se pinta de amarillo: se ve de un vistazo desde lejos. */
.pp-opciones .btn-outline-secondary {
  --bs-btn-color: var(--pp-texto-opcion);
  --bs-btn-border-color: var(--pp-borde);
  --bs-btn-hover-bg: var(--pp-fondo-boton-encima);
  --bs-btn-hover-border-color: var(--pp-acento);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: var(--pp-amarillo);
  --bs-btn-active-border-color: var(--pp-amarillo);
  --bs-btn-active-color: #000000;
}

/* Todas las opciones entran en una sola fila, sean 2, 3 o 4. */
.pp-opciones {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
}

.pp-opciones button {
  min-height: 3.5rem;
  padding: 0.35rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: normal;
}

/* ---------- Pantallas angostas ----------
   Con poco ancho no entran dos bloques: se apilan y se desliza todo junto. */

@media (max-width: 62rem) {
  .pp-vender {
    grid-template-columns: 1fr;
    height: auto;
  }

  [data-vista='vender'] {
    overflow-y: auto;
  }

  /* Apilados, se desliza la pantalla entera: la caja no necesita su barra. */
  .pp-productos {
    overflow: visible;
  }

  .pp-ticket {
    display: block;
    height: auto;
  }

  .pp-ticket > .card {
    overflow: visible;
  }
}

/* ---------- Ventas del dia ---------- */

.pp-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.pp-tarjeta {
  padding: 1rem;
  border-radius: 0.6rem;
  background: var(--pp-fondo-caja);
  border: 1px solid var(--pp-borde);
}

.pp-tarjeta .pp-cifra {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--pp-acento);
}

.pp-tarjeta .pp-rotulo {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}

/* ---------- El filtro de fechas ----------
   Una ventana chica en el medio. Arriba los atajos, que es lo que se usa casi
   siempre; abajo, para elegir a mano, un dia o desde / hasta. */

.pp-filtro-ventana {
  max-width: 24rem;
}

.pp-filtro-ventana .modal-content {
  background: var(--pp-fondo-caja);
  border: 1px solid var(--pp-borde);
  border-radius: 1rem;
}

.pp-filtro-ventana .modal-header,
.pp-filtro-ventana .modal-footer {
  border-color: var(--pp-borde);
}

.pp-filtro-ventana .modal-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.pp-filtro-ventana .modal-title .bi {
  color: var(--pp-acento);
}

.pp-filtro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Los atajos: tres pastillas iguales. */
.pp-filtro-rapido {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.pp-filtro-rapido .btn {
  min-height: 3rem;
  border-radius: 2rem;
  border: 1px solid var(--pp-borde);
  background: var(--pp-fondo-boton);
  color: var(--bs-body-color);
  font-weight: 600;
}

.pp-filtro-rapido .btn:hover,
.pp-filtro-rapido .btn:active {
  border-color: var(--pp-amarillo);
  background: var(--pp-amarillo);
  color: #000000;
}

/* "o elegi", con una raya a cada lado. */
.pp-filtro-o {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.pp-filtro-o::before,
.pp-filtro-o::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--pp-borde);
}

/* Un dia / Desde-hasta: un interruptor de dos lados. */
.pp-segmento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.25rem;
  border-radius: 0.75rem;
  background: var(--pp-fondo-boton);
  border: 1px solid var(--pp-borde);
}

.pp-segmento .btn {
  min-height: 2.6rem;
  border: 0;
  border-radius: 0.55rem;
  color: var(--bs-body-color);
  font-weight: 600;
}

.pp-segmento .btn-check:checked + .btn {
  background: var(--pp-amarillo);
  color: #000000;
}

.pp-filtro-campos .form-label {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 0.3rem;
}

.pp-filtro-campos .form-control {
  min-height: 3rem;
  font-size: 1.1rem;
}

.pp-filtro-campos[hidden] {
  display: none;
}

/* El embudo se pinta cuando no se esta mirando hoy: asi no se olvida que hay
   un filtro puesto. */
.pp-filtro-puesto {
  background: var(--pp-amarillo);
  border-color: var(--pp-amarillo);
  color: #000000;
}

/* El detalle de cada venta: lo que llevo, en letra un poco mas chica para que
   entre en una linea casi siempre. */
.pp-detalle-venta {
  font-size: 0.9rem;
  line-height: 1.35;
}

.pp-anulada {
  opacity: 0.5;
  text-decoration: line-through;
}

/* ---------- Pagar con QR ----------
   El codigo va sobre blanco y con aire alrededor: los lectores de QR necesitan
   ese margen para engancharlo. Sobre el fondo oscuro no se leeria. */

.pp-qr-monto {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--pp-acento);
}

.pp-qr-imagen {
  width: 100%;
  max-width: 20rem;
  background: #ffffff;
  padding: 0.75rem;
  border-radius: 0.5rem;
}

/* ---------- Avisos ---------- */

/* Sale en el medio de la pantalla, como una tarjeta: donde ya esta mirando
   quien cobra. Verde si salio bien, rojo del logo si salio mal. */
.pp-aviso {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--pp-borde);
  background: var(--pp-fondo-caja);
  color: var(--bs-body-color);
  text-align: center;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
  cursor: pointer;
  animation: pp-aparecer 0.18s ease-out;
}

.pp-aviso[hidden] {
  display: none;
}

@keyframes pp-aparecer {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.pp-aviso-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  font-size: 2rem;
  color: #ffffff;
}

.pp-aviso-bien .pp-aviso-icono {
  background: #1f9d55;
}

.pp-aviso-mal {
  border-color: var(--pp-rojo);
}

.pp-aviso-mal .pp-aviso-icono {
  background: var(--pp-rojo);
}

.pp-aviso-texto {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.pp-aviso-monto {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--pp-acento);
}

/* ---------- Botones de solo icono ----------
   Vaciar y quitar: sin texto, pero del tamano de un dedo. */
.pp-boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  font-size: 1.2rem;
}

/* ---------- El boton del sol/luna ---------- */

/* En la pantalla de entrar va arriba a la derecha. */
.pp-tema-login {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
}

/* ---------- La franja de arriba y la barra lateral ----------
   En pantalla ancha la franja de arriba no existe: las 3 rayas, la fecha,
   quien entro, el sol/luna y salir viven en la barra de la izquierda. Una
   franja entera para un solo boton es alto que la venta necesita.
   En pantalla angosta (tablet parada) la barra se esconde entera, asi que la
   franja se queda: es la unica forma de abrir el menu. */

.app-header .nav-link {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

@media (min-width: 62rem) {
  #pantalla-app .app-header {
    display: none;
  }
}

/* Las 3 rayas de adentro de la barra, al lado del nombre. */
.pp-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pp-plegar {
  flex: 0 0 auto;
  color: #ffffff;
  opacity: 0.7;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.5rem 0.75rem;
}

.pp-plegar:hover {
  color: var(--pp-amarillo);
  opacity: 1;
}

/* En angosto ya estan las 3 rayas de la franja: dos botones para lo mismo
   confunden. */
@media (max-width: 61.9375rem) {
  .pp-plegar {
    display: none;
  }
}

/* El pie de la barra: la fecha arriba, y abajo quien entro con sus botones. */
.pp-sidebar-pie {
  flex: 0 0 auto;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid #2a2a2a;
  color: #f1f1f1;
}

.pp-sidebar-fecha {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-bottom: 0.4rem;
}

.pp-sidebar-usuario {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* El nombre puede ser largo y la barra es angosta: se corta con puntos en vez
   de empujar el boton de salir afuera. */
.pp-sidebar-quien {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Se tocan con el dedo: 2.6rem de lado como minimo. */
.pp-sidebar-usuario a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.5rem;
  color: inherit;
  opacity: 0.75;
  font-size: 1.2rem;
}

.pp-sidebar-usuario a:hover {
  opacity: 1;
  color: var(--pp-amarillo);
  background: #1f1f1f;
}

/* ---------- Barra achicada ----------
   Con las 3 rayas la barra queda como una columna de iconos. Del pie se
   esconden la fecha y el nombre, y los botones se apilan; arriba queda solo
   el boton de las 3 rayas, porque el logo no entra al lado. */

.sidebar-mini.sidebar-collapse .app-sidebar .pp-sidebar-fecha,
.sidebar-mini.sidebar-collapse .app-sidebar .pp-sidebar-quien,
.sidebar-mini.sidebar-collapse .app-sidebar .pp-marca .brand-link {
  display: none;
}

.sidebar-mini.sidebar-collapse .app-sidebar .pp-marca {
  justify-content: center;
}

.sidebar-mini.sidebar-collapse .app-sidebar .pp-sidebar-pie {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.sidebar-mini.sidebar-collapse .app-sidebar .pp-sidebar-usuario {
  flex-direction: column;
}