/* ========================================================================
   🎨 Modern iOS-Like UI V5
   Bordes redondeados, sombras suaves, animaciones y consistencia global
   ======================================================================== */

/* ---------------- MODALES ---------------- */
.modal-content {
  border-radius: 15px !important;
  border: none !important;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.modal-content:hover {
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
.modal-header {
  background: #2f3542;
  color: #fff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: none;
  padding: 15px 20px;
}
.modal-header .close {
  color: #fff;
  opacity: 0.8;
  font-size: 22px;
  transition: opacity 0.2s;
}
.modal-header .close:hover { opacity: 1; }
.modal-title {
  font-weight: 600;
  font-size: 17px;
}
.modal-footer {
  border-top: none;
  padding-top: 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* ---------------- ALERTS ---------------- */
.alert {
  border-radius: 12px;
  padding: 15px 20px;
  font-weight: 500;
  border: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  animation: fadeInUp 0.4s ease both;
  position: relative;
  margin-bottom: 15px;
}
.alert .close {
  color: inherit;
  opacity: 0.8;
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  right: 12px;
  top: 10px;
  transition: opacity 0.2s;
}
.alert .close:hover { opacity: 1; }
.alert-primary { background: linear-gradient(145deg, #5060d4, #3b4cca); color: #fff; }
.alert-success { background: linear-gradient(145deg, #34a853, #1f7a3a); color: #fff; }
.alert-danger  { background: linear-gradient(145deg, #e04e5b, #b23a48); color: #fff; }
.alert-warning { background: linear-gradient(145deg, #f0c85d, #d4a73b); color: #212529; }
.alert-info    { background: linear-gradient(145deg, #5bc0de, #3594b0); color: #fff; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(15px); }
}
.alert.hide { animation: fadeOutDown 0.4s ease forwards; }

/* ---------------- INPUTS GLOBALES ---------------- */
.form-control {
  border-radius: 12px !important;
  border: 1px solid #dcdcdc;
  background: #fff;
  padding: 10px 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.form-control:focus {
  border-color: #4e73df;
  box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.25);
  outline: none;
}
textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

/* ---------------- BOTONES ---------------- */
.btn {
  border-radius: 12px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.btn:active, .btn.active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.btn-primary { background: linear-gradient(145deg, #5060d4, #3b4cca) !important; border: none; color: #fff !important; }
.btn-success { background: linear-gradient(145deg, #34a853, #1f7a3a) !important; border: none; color: #fff !important; }
.btn-pay    { background: linear-gradient(145deg, #e9e9e9, #e7e7e7) !important; border: none; color: #000 !important; }
.btn-danger { background: linear-gradient(145deg, #e04e5b, #b23a48) !important; border: none; color: #fff !important; }
.btn-warning{ background: linear-gradient(145deg, #f0c85d, #d4a73b) !important; border: none; color: #212529 !important; }
.btn-info   { background: linear-gradient(145deg, #5bc0de, #3594b0) !important; border: none; color: #fff !important; }
.btn-black  { background-color: #414141; color: #fff; transition: all 0.3s; }
.btn-black:hover { background-color: #333; color: #fff; }
.btn-item   { background-color: transparent; box-shadow: none; transition: all 0.3s; }
.btn-item:hover { background-color: rgba(51,51,51,0.26); color: #fff; }

/* ---------------- TABLAS ---------------- */
.table {
  border-radius: 6px;
  overflow: hidden;
  border: none;
}
.table td, .table th {
  border: none !important;
  padding: 12px;
  font-size: 14px;
}
.table-striped tbody tr:nth-of-type(odd) { background-color: #f9fafc; }

/* ---------------- ACCIÓN EN TABLAS ---------------- */
.action-btn {
  margin-right: 6px;
  border-radius: 9px !important;
  transition: all 0.3s ease;
}
.action-btn:last-child { margin-right: 0; }
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }

/* ---------------- ACORDEÓN / CATEGORÍAS ---------------- */
#miAcordeonDeCategorias .panel {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  background-color: #fff;
}
#miAcordeonDeCategorias .group-title {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.25rem;
  padding: 12px 18px;
  margin: 0;
  border-radius: 6px;
  background-color: #f0f0f0;
  color: #333;
  transition: background 0.3s;
}
#miAcordeonDeCategorias .group-title:hover { background-color: #e0e0e0; }
#miAcordeonDeCategorias .panel-collapse {
  padding: 12px 18px;
  background-color: #fafafa;
  border-radius: 0 0 6px 6px;
}
#miAcordeonDeCategorias .panel-body {
  padding: 8px 0;
  display: flex;
  align-items: center;
}
#miAcordeonDeCategorias .panel-body:hover { background-color: #f5f5f5; border-radius: 4px; }
#miAcordeonDeCategorias .col-sm-6 { padding: 0 10px; }

/* Checkbox moderno */
#miAcordeonDeCategorias .form-check-input {
  appearance: none;
  width: 20px; height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
#miAcordeonDeCategorias .form-check-input:checked {
  background-color: #4e73df;
  border-color: #4e73df;
}
#miAcordeonDeCategorias .form-check-input:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#miAcordeonDeCategorias .form-check-label { font-size: 1.1rem; color: #333; }

/* ---------------- PAY MODAL ---------------- */
#payModal .btn-group-vertical .btn { margin-bottom: 8px; font-size: 1.1rem; border-radius: 6px; padding: 10px 0; transition: all 0.2s; }
#payModal .btn-group-vertical .btn:last-child { margin-bottom: 0; }
#payModal .btn-group-vertical .btn.quick-cash:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
#payModal table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background-color: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
#payModal table th {
  background-color: #f5f5f5; color: #333; font-weight: 600; font-size: 1rem;
  padding: 10px; text-align: left; border-bottom: 1px solid #ddd;
}
#payModal table td {
  font-size: 0.95rem; color: #555; padding: 10px; border-bottom: 1px solid #eee;
}
#payModal table tr:last-child td { border-bottom: none; }
#payModal table tbody tr:hover { background-color: #f9f9f9; }
#payModal table td.text-right { text-align: right; }
#payModal table td:first-child { font-weight: 500; color: #333; }

/* ---------------- SIDEBAR ---------------- */
.main-sidebar i.fa { font-size: 25px !important; margin-right: 8px; vertical-align: middle; }
.main-sidebar span { font-size: inherit; }

/* ---------------- LISTAS Y ITEMS ---------------- */
#list-table-div, .items, #right-col { overflow: hidden !important; }
#list-table-div { height: 350px !important; }
.items { height: 470px !important; }
#right-col { height: 530px !important; }
.rquantity { background: transparent; border: 0 !important; }
.pos .contents #item-list .btn { width: 170px; text-align: center; }
.pos .contents #item-list .btn-both span { display: block; width: 160px; }

/* ---------------- PRODUCTOS MÓVIL ---------------- */
@media (max-width: 600px) {
  .items > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .btn-both.product {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    width: 160px; height: 160px; text-align: center; padding: 10px;
    background: #f8f8f8; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box;
  }
  .btn-both.product .bg-img img {
    width: 100px; height: 100px; object-fit: cover; margin-bottom: 8px;
  }
  .btn-both.product span span {
    font-size: 14px; color: #333; white-space: normal; word-break: break-word; line-height: 1.2em; text-align: center;
  }
  
}
@media (min-width: 1600px) {

    #list-table-div,
    .items,
    #right-col {
        overflow: hidden;
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* IE / Edge legacy */
    }

    #list-table-div::-webkit-scrollbar,
    .items::-webkit-scrollbar,
    #right-col::-webkit-scrollbar {
        display: none;                /* Chrome / Safari */
    }

    .sidebar-mini.sidebar-collapse .content-wrapper,
    .sidebar-mini.sidebar-collapse .main-footer,
    .sidebar-mini.sidebar-collapse .right-side {
        margin-left: 60px !important;
        z-index: 840;
    }
}


/* ===============================
   MOBILE BOTTOM NAV (BASE)
   =============================== */

/* Oculto por defecto (desktop grande) */
.mobile-bottom-nav {
    display: none;
}

/* Estilos comunes del nav */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    z-index: 10009;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}

.mobile-bottom-nav .nav-item {
    flex: 1;
    text-align: center;
    color: #777;
    text-decoration: none;
    font-size: 12px;
}

.mobile-bottom-nav .nav-item i {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
}

.mobile-bottom-nav .nav-pos i {
    font-size: 20px;
}

/* Layout cuando sidebar colapsa */
.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-footer,
.sidebar-collapse .right-side {
    margin-left: 0;
}
@media (max-width: 900px) {

    .mobile-bottom-nav {
        display: flex;
    }

    /* Sidebar visible tipo offcanvas */
    .sidebar-mini.sidebar-collapse .main-sidebar {
        width: 230px !important;
    }
}
@media (min-width: 901px) and (max-width: 2400px) {
    .mobile-bottom-nav {
        display: flex;
    }
    #right-col { height: 680px !important; }
    #list-table-div { height: 485px !important; }
    .sidebar-mini.sidebar-collapse .right-side {
        margin-left: 0px !important;
        
    }
}

/* ---------------- ANIMACIONES ---------------- */
.collapse { transition: all 0.35s ease; }