/* ======================================================
   ESTILOS PERSONALIZADOS RESTFACT
   ====================================================== */

/* === Ajuste de espacios entre categorías === */
.nav.tabs-vertical2,
.list-style-none.display-categoria-list {
  display: block !important;
  gap: 0 !important;
  padding-left: 0 !important;
}

.nav.tabs-vertical2 .nav-item {
  margin: 0 !important;
  height: auto !important;
  min-height: auto !important;
  float: none !important;
}

.nav.tabs-vertical2 .nav-item + .nav-item,
.list-style-none.display-categoria-list .nav-item + .nav-item {
  margin-top: 6px !important; /* Espaciado entre categorías */
}

/* === Categorías (diseño cuadrado con línea roja y texto negro) === */
.nav.tabs-vertical2 .nav-link,
.list-style-none.display-categoria-list .nav-link {
  display: block !important;
  padding: 10px 12px !important;         /* Más aire */
  line-height: 1.4 !important;
  border-left: 4px solid transparent !important; /* Línea roja invisible por defecto */
  border-radius: 4px !important;         /* Bordes más cuadrados */
  color: #000 !important;                /* Texto negro */
  background-color: transparent !important;
  transition: all 0.2s ease;
}

/* Hover */
.nav.tabs-vertical2 .nav-link:hover,
.list-style-none.display-categoria-list .nav-link:hover {
  background-color: #fff1f1 !important;  /* Fondo rosado claro */
  border-left-color: #ef5350 !important; /* Línea roja */
  color: #000 !important;
  text-decoration: none !important;
}

/* Activo / Seleccionado */
.nav.tabs-vertical2 .nav-link.active,
.list-style-none.display-categoria-list .nav-link.active,
.nav.tabs-vertical2 .nav-item.active .nav-link,
.list-style-none.display-categoria-list .nav-item.active .nav-link {
  background-color: #ffe7e7 !important;  /* Fondo rosado más fuerte */
  border-left-color: #ef5350 !important; /* Línea roja sólida */
  font-weight: 600 !important;
  color: #000 !important;
  border-radius: 4px !important;
}

/* === Si algún JS mete altura inline === */
.list-style-none.display-categoria-list .nav-item[style] {
  height: auto !important;
  min-height: auto !important;
}
/* Quitar línea/halo verde a la derecha en categorías activas */
.nav.tabs-vertical2 .nav-item,
.nav.tabs-vertical2 .nav-link,
.list-style-none.display-categoria-list .nav-item,
.list-style-none.display-categoria-list .nav-link{
  border-right: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  position: relative; /* por si el tema usa pseudo-elementos posicionados */
}

/* Si el tema dibuja una barrita vía ::after/::before, la apagamos */
.nav.tabs-vertical2 .nav-link::after,
.nav.tabs-vertical2 .nav-link::before,
.list-style-none.display-categoria-list .nav-link::after,
.list-style-none.display-categoria-list .nav-link::before{
  content: none !important;
}
/* ===== Igualar tamaño visual entre categorías y filas ===== */

/* Categorías: ajusta altura y apariencia */
.nav.tabs-vertical2 .nav-link,
.list-style-none.display-categoria-list .nav-link {
  padding: 12px 14px !important;          /* más alto y ancho */
  line-height: 1.5 !important;
  border-radius: 0 !important;            /* quita ovalado para cuadrar */
}

/* Fila de productos: mismo estilo de alto y separación */
.table tbody tr {
  height: auto !important;
  padding: 12px 14px !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
  transition: all 0.2s ease;
}

/* Hover y activo en filas (mismo diseño que categorías) */
.table tbody tr:hover,
.table tbody tr.active,
.table tbody tr.selected {
  background-color: #fff1f1 !important;  /* hover */
  border-left: 4px solid #ef5350 !important;
}

.table tbody tr.active,
.table tbody tr.selected {
  background-color: #ffe7e7 !important;  /* activo */
  font-weight: 600 !important;
  color: #000 !important;
}
/* Línea divisoria suave entre categorías */
.nav.tabs-vertical2 .nav-item:not(:last-child) .nav-link,
.list-style-none.display-categoria-list .nav-item:not(:last-child) .nav-link {
  border-bottom: 1px solid #f0f0f0 !important;
}
/* === Íconos Feather (editar y eliminar) en categorías === */

/* Aplica a los SVG dentro de la lista de categorías */
.list-style-none.display-categoria-list .nav-link svg,
.nav.tabs-vertical2 .nav-link svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 2 !important;
  transition: all 0.2s ease;
  vertical-align: middle;
  margin-left: 4px;
  margin-right: 4px;
}

/* Icono de editar (azul) */
.list-style-none.display-categoria-list .nav-link svg.feather-edit,
.nav.tabs-vertical2 .nav-link svg.feather-edit {
  stroke: #2196f3 !important; /* azul suave */
}
.list-style-none.display-categoria-list .nav-link svg.feather-edit:hover,
.nav.tabs-vertical2 .nav-link svg.feather-edit:hover {
  stroke: #1565c0 !important; /* azul oscuro */
}

/* Icono de eliminar (rojo) */
.list-style-none.display-categoria-list .nav-link svg.feather-trash-2,
.nav.tabs-vertical2 .nav-link svg.feather-trash-2 {
  stroke: #ef5350 !important; /* rojo suave */
}
.list-style-none.display-categoria-list .nav-link svg.feather-trash-2:hover,
.nav.tabs-vertical2 .nav-link svg.feather-trash-2:hover {
  stroke: #c62828 !important; /* rojo fuerte */
}
/* Topbar / navbar */
.topbar .navbar,
.navbar {
  background: #0D47A1 !important;         /* color sólido */
  /* Si quieres un degradado: */
  /* background: linear-gradient(90deg, #0d47a1, #1976d2) !important; */
  /* Borde/“línea” arriba (opcional): */
  /* border-top: 3px solid #ff6f00 !important; */
  /* Sombra suave (opcional) */
  /* box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; */
}

/* Asegura contraste de íconos/texto en la barra */
.topbar .navbar .nav-link,
.topbar .navbar .nav-link svg,
.navbar .nav-link,
.navbar .nav-link svg {
  color: #fff !important;
}
/* ==========================================
   💫 FUNCIONAL HASTA AQUI V!
   ========================================== */
/* 🔹 Reducir tamaño del total a pagar */
.descriptive-icon-2.totalPagar span {
    font-size: 1.5rem !important; /* puedes bajar a 0.9rem si quieres más pequeño */
    font-weight: 600; /* opcional, ajusta grosor */
}

/* Opcional: ajustar espacio o alineación */
.descriptive-icon-2.totalPagar {
    line-height: 1.2 !important;
    margin-top: 5px;
}
.descriptive-icon-2.totalPagar span {
    white-space: nowrap !important; /* evita que el texto se divida en dos líneas */
}


/* 🔸 Efecto hover */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 🟣 Estilo especial para el botón "VENTA RÁPIDA" */
.btn-primary, .btn-purple {
    background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
    border: none !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-purple:hover {
    background: linear-gradient(90deg, #5b0fb4, #1e63e0) !important;
}

/* 🟢 Delivery */
.btn-success {
    background: linear-gradient(90deg, #28a745, #34ce57) !important;
    border: none !important;
}

.btn-success:hover {
    background: linear-gradient(90deg, #23963e, #2fb94f) !important;
}

/* 🔵 Mostrador */
.btn-info {
    background: linear-gradient(90deg, #17a2b8, #0dcaf0) !important;
    border: none !important;
}

.btn-info:hover {
    background: linear-gradient(90deg, #138fa3, #0bbde8) !important;
}

/* 🔸 Desactivar enfoque azul feo al hacer clic */
.btn:focus, .btn:active {
    box-shadow: none !important;
    outline: none !important;
}
/* 🔹 Botones flotantes (subir / bajar) más grandes en celulares */
@media (max-width: 768px) {
    .btn.btn-circle.btn-sm.btn-up,
    .btn.btn-circle.btn-sm.btn-down {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
        bottom: 60px !important; /* separa un poco del borde */
    }

    .btn.btn-circle.btn-sm.btn-up i,
    .btn.btn-circle.btn-sm.btn-down i {
        font-size: 1.3rem !important; /* agranda el ícono */
    }

    /* 🔸 Ajustar separación entre ambos si están uno sobre otro */
    .btn.btn-circle.btn-sm.btn-down {
        bottom: 10px !important;
    }

    /* 🔸 Opcional: leve sombra para visibilidad en móviles */
    .btn.btn-circle.btn-sm.btn-up,
    .btn.btn-circle.btn-sm.btn-down {
        box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
    }
}