/* ============================================================
   MiMenuMx — UI Upgrade 2025
   Importar DESPUÉS de slim.css en index.php
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Playfair+Display:wght@700;800&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --mm-orange:    #F97316;
  --mm-orange-dk: #EA6308;
  --mm-amber:     #FBBF24;
  --mm-dark:      #1A1A2E;
  --mm-dark2:     #16213E;
  --mm-gray-bg:   #F8F7F4;
  --mm-white:     #FFFFFF;
  --mm-green:     #16A34A;
  --mm-green-lt:  #22C55E;
  --mm-red:       #DC2626;
  --mm-text:      #1F2937;
  --mm-text-lt:   #6B7280;
  --mm-radius:    14px;
  --mm-radius-sm: 8px;
  --mm-shadow:    0 4px 20px rgba(0,0,0,.08);
  --mm-shadow-md: 0 8px 32px rgba(0,0,0,.12);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Nunito', sans-serif !important;
  background-color: var(--mm-gray-bg) !important;
  color: var(--mm-text) !important;
}

/* ── HEADER / HERO ──────────────────────────────────────────── */
.slim-navbar[style*="background-image"] {
  min-height: 220px !important;
  position: relative;
}

/* Overlay oscuro sobre el banner */
.slim-navbar[style*="background-image"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26,26,46,.72) 0%,
    rgba(26,26,46,.40) 60%,
    rgba(249,115,22,.25) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.slim-navbar[style*="background-image"] .container {
  position: relative;
  z-index: 1;
}

/* Logo circular con anillo dorado */
.slim-navbar[style*="background-image"] img.rounded-20,
.slim-navbar[style*="background-image"] img[class*="bd-3"] {
  border: 4px solid var(--mm-amber) !important;
  box-shadow: 0 0 0 6px rgba(251,191,36,.20), var(--mm-shadow-md) !important;
  transition: transform .3s ease !important;
}
.slim-navbar[style*="background-image"] img.rounded-20:hover,
.slim-navbar[style*="background-image"] img[class*="bd-3"]:hover {
  transform: scale(1.04);
}

/* Nombre del negocio */
.slim-navbar[style*="background-image"] h2 span {
  font-family: 'Playfair Display', serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.55) !important;
  letter-spacing: .5px;
}

/* Badge ABIERTO / CERRADO */
.btn-oblong.btn-success {
  background: linear-gradient(135deg, var(--mm-green), var(--mm-green-lt)) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 5px 16px !important;
  font-weight: 700 !important;
  font-size: .78rem !important;
  letter-spacing: .8px !important;
  box-shadow: 0 3px 12px rgba(22,163,74,.40) !important;
}
.btn-oblong.btn-danger {
  background: linear-gradient(135deg, var(--mm-red), #EF4444) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 5px 16px !important;
  font-weight: 700 !important;
  font-size: .78rem !important;
  letter-spacing: .8px !important;
}

/* Iconos del header (mapa, WhatsApp, historial) */
.slim-navbar[style*="background-image"] .fa-map-marker,
.slim-navbar[style*="background-image"] .fa-whatsapp,
.slim-navbar[style*="background-image"] .fa-history {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition: transform .25s, filter .25s;
}
.slim-navbar[style*="background-image"] a:hover .fa-map-marker,
.slim-navbar[style*="background-image"] a:hover .fa-whatsapp,
.slim-navbar[style*="background-image"] a:hover .fa-history {
  transform: scale(1.2);
  filter: drop-shadow(0 3px 8px rgba(249,115,22,.7));
}
.slim-navbar[style*="background-image"] .fa-whatsapp {
  color: #25D366 !important;
}

/* ── BARRA DE NAVEGACIÓN (menú / carrito) ───────────────────── */
.slim-navbar.sticky-top {
  background-color: var(--mm-dark) !important;
  border-radius: 0 0 var(--mm-radius) var(--mm-radius) !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
  border-bottom: 2px solid var(--mm-orange) !important;
}

.slim-navbar.sticky-top .nav-link {
  color: #E5E7EB !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  letter-spacing: .5px !important;
  border-radius: var(--mm-radius-sm) !important;
  padding: 7px 14px !important;
  transition: background .2s, color .2s !important;
}
.slim-navbar.sticky-top .nav-link:hover {
  background: rgba(249,115,22,.15) !important;
  color: var(--mm-amber) !important;
}

/* Botón "VER PEDIDO" */
.slim-navbar.sticky-top .view_pedido {
  background: linear-gradient(135deg, var(--mm-orange), var(--mm-orange-dk)) !important;
  color: #fff !important;
  border-radius: var(--mm-radius-sm) !important;
  box-shadow: 0 3px 12px rgba(249,115,22,.40) !important;
  font-weight: 800 !important;
}
.slim-navbar.sticky-top .view_pedido:hover {
  background: linear-gradient(135deg, var(--mm-orange-dk), #D4520A) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(249,115,22,.55) !important;
}

/* Total en carrito */
.slim-navbar.sticky-top .text-success {
  color: var(--mm-green-lt) !important;
}
.slim-navbar.sticky-top .text-warning {
  color: var(--mm-amber) !important;
}

/* ── PANEL PRINCIPAL ────────────────────────────────────────── */
.slim-mainpanel {
  padding: 16px 0 32px !important;
}

/* ── BANNER ─────────────────────────────────────────────────── */
.slim-mainpanel .bg-white.rounded-4 img,
.slim-mainpanel .rounded-3 {
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow-md) !important;
}

/* ── SIDEBAR: MOSTRAR MENÚ ──────────────────────────────────── */
#accordion .card {
  border: none !important;
  border-radius: var(--mm-radius) !important;
  overflow: hidden;
  box-shadow: var(--mm-shadow) !important;
}

#accordion .card-header.bg-danger {
  background: linear-gradient(135deg, var(--mm-orange), var(--mm-orange-dk)) !important;
  border: none !important;
  padding: 13px 16px !important;
}

#accordion .card-header a {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: .9rem !important;
  letter-spacing: .8px !important;
  color: #fff !important;
}

/* Items de categorías en el menú lateral */
#accordion .card-body .media {
  border-radius: var(--mm-radius-sm) !important;
  border: 1px solid #F3F4F6 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  transition: transform .2s, box-shadow .2s !important;
  cursor: pointer;
}
#accordion .card-body .media:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(249,115,22,.18) !important;
  border-color: var(--mm-orange) !important;
}
#accordion .card-body .media .fa-chevron-circle-right {
  color: var(--mm-orange) !important;
}
#accordion .card-body .media a.text-dark {
  font-weight: 700 !important;
  font-size: .85rem !important;
}

/* ── CARDS DE CATEGORÍAS ────────────────────────────────────── */
.slim-mainpanel .card.shadow-sm {
  border: none !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow) !important;
  overflow: hidden;
  transition: box-shadow .25s !important;
}
.slim-mainpanel .card.shadow-sm:hover {
  box-shadow: var(--mm-shadow-md) !important;
}

/* Header de cada categoría */
.slim-mainpanel .card-header.bg-primary {
  background: linear-gradient(135deg, var(--mm-dark2), var(--mm-dark)) !important;
  border: none !important;
  padding: 12px 18px !important;
}
.slim-mainpanel .card-header.bg-primary h6 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: .9rem !important;
  letter-spacing: 1px !important;
  color: var(--mm-amber) !important;
}
.slim-mainpanel .card-header.bg-primary .fa-caret-right {
  color: var(--mm-orange) !important;
  font-size: 1.1rem !important;
}

.slim-mainpanel .card-body.bg-light {
  background: #FAFAFA !important;
  padding: 16px !important;
}

/* ── TARJETAS DE PRODUCTO ───────────────────────────────────── */
.slim-mainpanel .media.p-2.rounded {
  border-radius: var(--mm-radius-sm) !important;
  border: 1px solid #F0F0F0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  background: var(--mm-white) !important;
  padding: 12px !important;
}
.slim-mainpanel .media.p-2.rounded:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  border-color: #FFE4CC !important;
}

/* Foto del producto */
.slim-mainpanel .media img.rounded-circle {
  width: 70px !important;
  height: 70px !important;
  object-fit: cover !important;
  border: 3px solid var(--mm-amber) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.12) !important;
  transition: transform .25s !important;
}
.slim-mainpanel .media:hover img.rounded-circle {
  transform: scale(1.07);
}

/* Nombre del producto */
.slim-mainpanel .media .tx-15.font-weight-bold {
  font-weight: 800 !important;
  font-size: .9rem !important;
  color: var(--mm-text) !important;
  line-height: 1.3 !important;
}

/* Precio */
.slim-mainpanel .media .tx-14 strong {
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: var(--mm-orange) !important;
}

/* Botón AÑADIR AL CARRITO */
.slim-mainpanel .btn-success.btn-sm.view_data,
.slim-mainpanel .btn.btn-success.btn-sm {
  background: linear-gradient(135deg, var(--mm-green), var(--mm-green-lt)) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: .78rem !important;
  letter-spacing: .5px !important;
  padding: 6px 14px !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.35) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.slim-mainpanel .btn-success.btn-sm.view_data:hover,
.slim-mainpanel .btn.btn-success.btn-sm:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 16px rgba(22,163,74,.50) !important;
}

/* Botón OPCIONES */
.slim-mainpanel .btn-outline-warning.btn-sm,
.slim-mainpanel .btn.btn-outline-warning {
  border: 2px solid var(--mm-orange) !important;
  color: var(--mm-orange) !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: .78rem !important;
  padding: 5px 14px !important;
  background: transparent !important;
  transition: all .2s !important;
}
.slim-mainpanel .btn-outline-warning.btn-sm:hover,
.slim-mainpanel .btn.btn-outline-warning:hover {
  background: var(--mm-orange) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.40) !important;
}

/* ── MODAL: DETALLES DEL PRODUCTO ───────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.22) !important;
  overflow: hidden;
}
.modal-header {
  background: linear-gradient(135deg, var(--mm-dark2), var(--mm-dark)) !important;
  border: none !important;
  padding: 16px 20px !important;
}
.modal-header .modal-title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
  color: var(--mm-amber) !important;
  letter-spacing: .5px !important;
}
.modal-header .close {
  color: #9CA3AF !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.modal-header .close:hover {
  color: var(--mm-white) !important;
}
.modal-body {
  padding: 20px !important;
}

/* Imagen en el modal */
.modal-body img[style*="width"] {
  border-radius: var(--mm-radius-sm) !important;
  box-shadow: var(--mm-shadow) !important;
}

/* Título del producto en modal */
.modal-body h4,
.modal-body h3,
.modal-body .tx-20 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: var(--mm-text) !important;
}

/* Opciones/variaciones */
.modal-body label.tx-danger,
.modal-body .text-danger,
.modal-body span[style*="color:red"] {
  font-weight: 800 !important;
  color: var(--mm-orange) !important;
  font-size: .85rem !important;
}

/* Radio buttons de opciones */
.modal-body input[type="radio"] {
  accent-color: var(--mm-orange);
}

/* Precios de opciones */
.modal-body .tx-success,
.modal-body .tx-bold {
  font-weight: 800 !important;
  color: var(--mm-green) !important;
}

/* Textarea comentario */
.modal-body textarea.form-control {
  border-radius: var(--mm-radius-sm) !important;
  border: 1.5px solid #E5E7EB !important;
  font-size: .88rem !important;
  padding: 10px !important;
  resize: none !important;
  transition: border-color .2s !important;
}
.modal-body textarea.form-control:focus {
  border-color: var(--mm-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
}

/* Spinner cantidad */
.modal-body .number-spinner {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.modal-body .number-spinner button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid var(--mm-orange) !important;
  background: transparent !important;
  color: var(--mm-orange) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .18s !important;
}
.modal-body .number-spinner button:hover {
  background: var(--mm-orange) !important;
  color: #fff !important;
}
.modal-body .number-spinner input {
  width: 44px !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: var(--mm-radius-sm) !important;
}

/* Botón AGREGAR AL PEDIDO en modal */
.modal-body .btn-primary,
.modal-footer .btn-primary {
  background: linear-gradient(135deg, var(--mm-orange), var(--mm-orange-dk)) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  padding: 9px 22px !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.40) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.modal-body .btn-primary:hover,
.modal-footer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(249,115,22,.55) !important;
}

/* ── MODAL: VER PEDIDO (carrito) ────────────────────────────── */
#visulPedidoModal .modal-body {
  background: #FAFAFA !important;
}

/* Botones de tipo de entrega */
.btn-success[href*="delivery"], a.btn-success,
div[style*="background-color:#006699"] {
  border-radius: var(--mm-radius-sm) !important;
}

/* Tarjeta de ítem en carrito */
#visulPedidoModal .card,
[id*="pedido"] .card {
  border-radius: var(--mm-radius-sm) !important;
  border: 1px solid #F0F0F0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}

/* Texto SubTotal / VALOR TOTAL */
#visulPedidoModal strong,
[id*="pedido"] strong {
  color: var(--mm-text) !important;
  font-weight: 900 !important;
}
#visulPedidoModal .tx-success,
[id*="pedido"] [style*="color:green"],
[id*="pedido"] [style*="color:#"] {
  color: var(--mm-orange) !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
}

/* ── PÁGINA DELIVERY (formulario) ───────────────────────────── */
.form-control {
  border-radius: var(--mm-radius-sm) !important;
  border: 1.5px solid #E5E7EB !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: .88rem !important;
  padding: 9px 13px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.form-control:focus {
  border-color: var(--mm-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
}

label {
  font-weight: 700 !important;
  font-size: .82rem !important;
  color: var(--mm-text-lt) !important;
  letter-spacing: .3px !important;
}

/* Botón finalizar pedido */
.btn-success[onclick], 
a.btn-success.btn-block,
input[type="submit"].btn-success,
button[type="submit"].btn-success,
.btn-lg.btn-success {
  background: linear-gradient(135deg, var(--mm-green), var(--mm-green-lt)) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  letter-spacing: .8px !important;
  padding: 13px 28px !important;
  box-shadow: 0 6px 20px rgba(22,163,74,.40) !important;
  transition: transform .2s, box-shadow .2s !important;
}

/* Card del total general */
.card-people-list {
  border: none !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow) !important;
  background: var(--mm-white) !important;
  overflow: hidden;
}
.slim-card-title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: .82rem !important;
  letter-spacing: 1px !important;
  color: var(--mm-text-lt) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #F0F0F0 !important;
}

/* ── PÁGINA DELIVERY OK (confirmación) ──────────────────────── */
.slim-mainpanel .card.pd-15 {
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow-md) !important;
  border: none !important;
}

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert {
  border-radius: var(--mm-radius-sm) !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
}
.alert-success {
  background: rgba(22,163,74,.12) !important;
  color: var(--mm-green) !important;
}
.alert-warning {
  background: rgba(249,115,22,.10) !important;
  color: var(--mm-orange-dk) !important;
}
.alert-danger {
  background: rgba(220,38,38,.10) !important;
  color: var(--mm-red) !important;
}

/* ── BADGE COMPARTIR ────────────────────────────────────────── */
.card .slim-card-title .fa-caret-right {
  color: var(--mm-orange) !important;
}

/* ── SELECT2 ────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border-radius: var(--mm-radius-sm) !important;
  border: 1.5px solid #E5E7EB !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--mm-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: var(--mm-orange) !important;
}

/* ── SCROLLBAR (webkit) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F3F4F6; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--mm-orange); }

/* ── ANIMACIONES ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slim-mainpanel .card {
  animation: fadeUp .35s ease both;
}
.slim-mainpanel .col-md-6:nth-child(2) .media { animation-delay: .05s; }
.slim-mainpanel .col-md-6:nth-child(3) .media { animation-delay: .10s; }
.slim-mainpanel .col-md-6:nth-child(4) .media { animation-delay: .15s; }

/* ── MODAL ANIMATIONS ───────────────────────────────────────── */
.modal.fade .modal-dialog {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1) !important;
  transform: scale(.94) translateY(-10px) !important;
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0) !important;
}

/* ── RESPONSIVE MOBILE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .slim-navbar[style*="background-image"] {
    min-height: 180px !important;
  }
  .slim-navbar[style*="background-image"] h2 span {
    font-size: 1.4rem !important;
  }
  .slim-mainpanel .media img.rounded-circle {
    width: 58px !important;
    height: 58px !important;
  }
  .slim-mainpanel .media .tx-15.font-weight-bold {
    font-size: .83rem !important;
  }
  .modal-dialog {
    margin: 10px !important;
  }
}

/* ── RESPONSIVE TABLET (iPad vertical y horizontal) ─────────── */
@media (min-width: 769px) and (max-width: 1100px) {

  /* Sidebar más ancho para que el texto no se corte */
  .col-md-3 {
    flex: 0 0 30% !important;
    max-width: 30% !important;
  }
  .col-md-9 {
    flex: 0 0 70% !important;
    max-width: 70% !important;
  }

  /* Items del menú lateral: texto completo */
  #accordion .card-body .media {
    flex-wrap: nowrap !important;
    padding: 8px !important;
  }
  #accordion .card-body .media .media-body a {
    font-size: .78rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }
  #accordion .card-body .media img {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  /* Nombre de producto legible */
  .slim-mainpanel .media .tx-15.font-weight-bold {
    font-size: .85rem !important;
    word-break: break-word !important;
  }

  /* Botones sin truncar */
  .slim-mainpanel .btn-success.btn-sm.view_data,
  .slim-mainpanel .btn.btn-success.btn-sm,
  .slim-mainpanel .btn-outline-warning.btn-sm {
    white-space: nowrap !important;
    font-size: .74rem !important;
    padding: 5px 10px !important;
  }
}

/* iPad vertical (768-900px): 1 columna de productos para que no se aprieten */
@media (min-width: 769px) and (max-width: 900px) {
  .slim-mainpanel .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── FIX MODAL MÓVIL — centrado sin romper Bootstrap ─────────
   NO tocar display del .modal (Bootstrap lo maneja con JS).
   Solo corregir el posicionamiento del dialog dentro del modal.
   ──────────────────────────────────────────────────────────── */

/* Evitar scroll del body detrás del modal */
body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Centrar el dialog verticalmente usando padding del modal */
.modal-dialog {
  margin: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  max-height: calc(100vh - 40px) !important;
}

/* Scroll interno si el contenido es muy largo */
.modal-content {
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Animación de apertura sin translateY que descentra */
.modal.fade .modal-dialog {
  transform: translateY(-50%) scale(.95) !important;
  transition: transform .26s cubic-bezier(.34,1.56,.64,1) !important;
  opacity: 0;
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), opacity .22s ease !important;
}
.modal.show .modal-dialog {
  transform: translateY(-50%) scale(1) !important;
  opacity: 1;
}


/* ── PANEL ADMINISTRATIVO ───────────────────────────────────── */

/* Sección base del admin */
.slim-mainpanel {
  padding: 16px 0 32px !important;
}

.section-wrapper {
  background: var(--mm-white) !important;
  border-radius: var(--mm-radius) !important;
  padding: 24px !important;
  box-shadow: var(--mm-shadow) !important;
  margin-bottom: 24px !important;
  animation: fadeUp .4s ease both;
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Nunito', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--mm-text) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
}

.section-title i {
  color: var(--mm-orange) !important;
  font-size: 24px !important;
}

.section-subtitle {
  font-size: 13px !important;
  color: var(--mm-text-lt) !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  font-weight: 500;
}

.section-divider {
  border: none !important;
  border-top: 2px solid var(--mm-orange) !important;
  opacity: 0.3;
  margin: 16px 0 !important;
}

/* ── FORMULARIOS ────────────────────────────────────────────── */

.form-layout {
  width: 100%;
}

.form-layout-footer {
  display: flex;
  gap: 12px !important;
  justify-content: center;
  margin-top: 24px !important;
}

.form-control-label {
  font-weight: 700 !important;
  color: var(--mm-text) !important;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control-label .label-text {
  display: block;
  font-weight: 600;
}

.form-control-label .required {
  color: var(--mm-red) !important;
  font-weight: 900 !important;
}

.form-control {
  border: 1.5px solid var(--mm-orange) !important;
  border-radius: var(--mm-radius-sm) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  font-family: 'Nunito', sans-serif !important;
}

.form-control:focus {
  border-color: var(--mm-orange) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
  outline: none !important;
}

.form-control:hover:not(:focus) {
  border-color: #EA6308 !important;
}

.form-control-focused {
  border-color: #7C3AED !important;
}

.form-text {
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
}

.text-muted {
  color: var(--mm-text-lt) !important;
}

.text-info {
  color: #3B82F6 !important;
}

.input-group {
  display: flex !important;
  align-items: stretch !important;
}

.input-group-addon {
  background: #F3F4F6 !important;
  border: 1.5px solid #E5E7EB !important;
  border-right: none !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
  color: var(--mm-orange) !important;
  border-radius: var(--mm-radius-sm) 0 0 var(--mm-radius-sm) !important;
  font-size: 14px !important;
}

.input-group .form-control {
  border-radius: 0 var(--mm-radius-sm) var(--mm-radius-sm) 0 !important;
}

.file-upload-box {
  border: 2px dashed var(--mm-orange) !important;
  border-radius: var(--mm-radius-sm) !important;
  padding: 20px !important;
  text-align: center !important;
  background: rgba(249, 115, 22, 0.05) !important;
  transition: all 0.3s ease !important;
}

.file-upload-box:hover {
  border-color: #7C3AED !important;
  background: rgba(124, 58, 237, 0.05) !important;
}

.file-input {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer;
}

/* ── BOTONES ────────────────────────────────────────────────── */

.btn {
  border-radius: var(--mm-radius-sm) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: none !important;
  cursor: pointer;
  font-family: 'Nunito', sans-serif !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--mm-orange), #EA580C) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4) !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
}

.btn-secondary {
  background: #E5E7EB !important;
  color: var(--mm-text) !important;
}

.btn-secondary:hover {
  background: #D1D5DB !important;
}

.btn-lg {
  padding: 12px 24px !important;
  font-size: 15px !important;
}

.btn-sm {
  padding: 6px 10px !important;
  font-size: 12px !important;
}

.btn-icon-right {
  flex-direction: row-reverse !important;
}

.btn-outline-info,
.btn-outline-primary,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-secondary {
  border: 1px solid var(--mm-orange) !important;
  background: white !important;
  color: var(--mm-text) !important;
  transition: all 0.3s ease !important;
}

.btn-outline-info:hover {
  border-color: #06B6D4 !important;
  color: #06B6D4 !important;
  background: rgba(6, 182, 212, 0.05) !important;
}

.btn-outline-primary:hover {
  border-color: var(--mm-orange) !important;
  color: var(--mm-orange) !important;
  background: rgba(249, 115, 22, 0.05) !important;
}

.btn-outline-warning:hover {
  border-color: var(--mm-amber) !important;
  color: var(--mm-amber) !important;
  background: rgba(251, 191, 36, 0.05) !important;
}

.btn-outline-danger:hover {
  border-color: var(--mm-red) !important;
  color: var(--mm-red) !important;
  background: rgba(220, 38, 38, 0.05) !important;
}

.btn-outline-success:hover {
  border-color: var(--mm-green) !important;
  color: var(--mm-green) !important;
  background: rgba(22, 163, 74, 0.05) !important;
}

.btn-outline-secondary:hover {
  border-color: #7C3AED !important;
  color: #7C3AED !important;
  background: rgba(124, 58, 237, 0.05) !important;
}

/* ── TABLAS ─────────────────────────────────────────────────── */

.table-responsive-wrapper {
  overflow-x: auto !important;
  border-radius: var(--mm-radius-sm) !important;
  border: 1px solid #E5E7EB !important;
  background: white !important;
}

.table {
  margin-bottom: 0 !important;
  font-family: 'Nunito', sans-serif !important;
}

.table thead {
  background: #F9FAFB !important;
  border-bottom: 2px solid var(--mm-orange) !important;
}

.table thead th {
  font-weight: 700 !important;
  color: var(--mm-text) !important;
  padding: 12px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  border: none !important;
}

.table tbody tr {
  border-bottom: 1px solid #E5E7EB !important;
  transition: all 0.3s ease !important;
}

.table tbody tr:hover {
  background: #F9FAFB !important;
}

.table tbody td {
  padding: 12px !important;
  vertical-align: middle !important;
  font-size: 13px !important;
}

.table .badge {
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

.badge-category {
  background: linear-gradient(135deg, #7C3AED, #6D28D9) !important;
  color: white !important;
}

.badge-success {
  background: rgba(22, 163, 74, 0.2) !important;
  color: #065F46 !important;
}

.badge-danger {
  background: rgba(220, 38, 38, 0.2) !important;
  color: #7F1D1D !important;
}

.price-tag {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--mm-orange) !important;
}

.product-img-container {
  display: inline-block;
  width: 50px !important;
  height: 50px !important;
  border-radius: var(--mm-radius-sm) !important;
  overflow: hidden;
  border: 1px solid #E5E7EB !important;
}

.product-thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.action-cell {
  padding: 10px 5px !important;
  text-align: center;
}

.action-cell form {
  margin: 0 !important;
  display: inline;
}

.text-center {
  text-align: center !important;
}

/* ── ALERTAS ────────────────────────────────────────────────── */

.alert-custom {
  padding: 16px !important;
  border-radius: var(--mm-radius-sm) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  border: 1px solid !important;
  animation: slideDown 0.3s ease-out;
  font-family: 'Nunito', sans-serif !important;
}

.alert-error {
  background: #FEE2E2 !important;
  border-color: var(--mm-red) !important;
  color: #7F1D1D !important;
}

.alert-success {
  background: #DCFCE7 !important;
  border-color: var(--mm-green) !important;
  color: #166534 !important;
}

.alert-icon {
  font-size: 20px !important;
  flex-shrink: 0;
}

.alert-content {
  flex: 1;
  font-size: 14px !important;
  line-height: 1.4;
}

.alert-content strong {
  font-weight: 700 !important;
}

/* ── MODALES ────────────────────────────────────────────────── */

.modal-custom {
  border: none !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

.modal-header-custom {
  border: none !important;
  padding: 24px !important;
  background: linear-gradient(135deg, var(--mm-orange), #EA580C) !important;
  border-radius: var(--mm-radius) var(--mm-radius) 0 0 !important;
}

.modal-title-wrapper {
  flex: 1;
}

.modal-title {
  color: white !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif !important;
}

.modal-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

.close-custom {
  color: white !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s ease !important;
}

.close-custom:hover {
  opacity: 1 !important;
}

.modal-body-custom {
  padding: 24px !important;
  background: #FAFAFA !important;
}

.product-info-modal {
  margin-bottom: 20px !important;
  padding: 12px 16px !important;
  background: white !important;
  border-radius: var(--mm-radius-sm) !important;
  border-left: 4px solid var(--mm-orange) !important;
}

.product-badge {
  color: var(--mm-text) !important;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  gap: 6px !important;
  font-size: 14px !important;
}

.product-badge i {
  color: var(--mm-orange) !important;
}

.modal-footer-custom {
  border: none !important;
  padding: 16px 24px !important;
  background: #F9FAFB !important;
  border-radius: 0 0 var(--mm-radius) var(--mm-radius) !important;
  display: flex;
  gap: 8px !important;
  justify-content: flex-end;
}

/* ── GRID DE DÍAS (Modal) ──────────────────────────────────── */

.days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.day-card {
  position: relative;
}

.day-radio {
  display: none;
}

.day-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px !important;
  background: white !important;
  border: 2px solid #E5E7EB !important;
  border-radius: var(--mm-radius-sm) !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  position: relative;
}

.day-radio:checked + .day-label {
  border-color: var(--mm-orange) !important;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(249, 115, 22, 0.02)) !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2) !important;
}

.day-label:hover {
  border-color: var(--mm-orange) !important;
  transform: translateY(-2px) !important;
}

.day-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--mm-radius-sm) !important;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(124, 58, 237, 0.1)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px !important;
  color: var(--mm-orange) !important;
}

.day-icon-lunes {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05)) !important;
  color: #3B82F6 !important;
}

.day-icon-martes {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05)) !important;
  color: #EF4444 !important;
}

.day-icon-miercoles {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.05)) !important;
  color: #7C3AED !important;
}

.day-icon-jueves {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05)) !important;
  color: #F59E0B !important;
}

.day-icon-viernes {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(236, 72, 153, 0.05)) !important;
  color: #EC4899 !important;
}

.day-icon-sabado {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05)) !important;
  color: #10B981 !important;
}

.day-icon-domingo {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.05)) !important;
  color: #06B6D4 !important;
}

.day-icon-todos {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(249, 115, 22, 0.05)) !important;
  color: var(--mm-orange) !important;
}

.day-content {
  text-align: center;
  flex: 1;
}

.day-name {
  display: block;
  font-weight: 700 !important;
  color: var(--mm-text) !important;
  font-size: 13px !important;
}

.day-content small {
  display: block;
  color: #9CA3AF !important;
  font-size: 11px !important;
  margin-top: 2px !important;
}

.day-checkmark {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.3s ease !important;
  color: var(--mm-orange) !important;
  font-size: 18px !important;
}

.day-radio:checked + .day-label .day-checkmark {
  opacity: 1;
}

/* ── OPCIONES/RESTRICCIONES GRID ────────────────────────────– */

.options-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px !important;
  margin-top: 20px !important;
}

.option-card {
  border: 2px solid #E5E7EB !important;
  border-radius: var(--mm-radius-sm) !important;
  padding: 16px !important;
  background: white !important;
  transition: all 0.3s ease !important;
  display: flex;
  gap: 12px !important;
}

.option-card:hover {
  border-color: var(--mm-orange) !important;
  background: rgba(249, 115, 22, 0.03) !important;
}

.option-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: var(--mm-radius-sm) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px !important;
  flex-shrink: 0;
}

.option-1-guide .option-icon {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--mm-red) !important;
}

.option-2-guide .option-icon {
  background: rgba(245, 158, 11, 0.1) !important;
  color: var(--mm-amber) !important;
}

.option-3-guide .option-icon {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3B82F6 !important;
}

.option-content h4 {
  margin: 0 0 6px 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--mm-text) !important;
}

.option-content p {
  margin: 0 0 6px 0 !important;
  font-size: 13px !important;
  color: var(--mm-text-lt) !important;
  line-height: 1.4;
}

.option-content small {
  display: block;
  color: #9CA3AF !important;
  font-style: italic;
  font-size: 12px !important;
}

/* ── LOGIN PAGE ─────────────────────────────────────────────── */

.signin-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signin-container {
  width: 100%;
  max-width: 420px;
  animation: slideUp 0.6s ease-out;
}

.signin-box {
  background: var(--mm-white) !important;
  border-radius: var(--mm-radius) !important;
  padding: 40px 32px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.slim-logo {
  font-size: 28px;
  font-weight: 900 !important;
  color: var(--mm-text) !important;
  margin: 0 0 8px 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif !important;
}

.slim-logo i {
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, var(--mm-orange), #EA580C) !important;
  border-radius: var(--mm-radius-sm) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important;
  font-size: 18px !important;
}

.login-subtitle {
  color: var(--mm-text-lt) !important;
  font-size: 14px !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  font-weight: 600;
}

.login-form {
  width: 100%;
}

.alert-error {
  background: #FEE2E2 !important;
  border: 2px solid var(--mm-red) !important;
  color: #7F1D1D !important;
  padding: 12px 14px !important;
  border-radius: var(--mm-radius-sm) !important;
  font-size: 13px !important;
  margin-bottom: 20px !important;
  display: flex;
  align-items: center;
  gap: 8px !important;
  animation: shake 0.5s ease;
  font-family: 'Nunito', sans-serif !important;
}

.alert-error i {
  font-size: 16px !important;
  flex-shrink: 0;
}

.form-group-submit {
  margin-top: 24px !important;
  margin-bottom: 20px !important;
}

.btn-signin {
  width: 100%;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, var(--mm-orange), #EA580C) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--mm-radius-sm) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3) !important;
  font-family: 'Nunito', sans-serif !important;
}

.btn-signin:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4) !important;
}

.btn-signin:active {
  transform: translateY(0) !important;
}

.btn-signin:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.btn-signin i {
  font-size: 16px !important;
}

.forgot-password-section {
  text-align: center;
  padding-top: 20px !important;
  border-top: 1px solid #E5E7EB !important;
}

.forgot-password-text {
  color: var(--mm-text-lt) !important;
  font-size: 13px !important;
  margin: 0 !important;
  font-family: 'Nunito', sans-serif !important;
}

.forgot-password-link {
  color: var(--mm-orange) !important;
  text-decoration: none;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.forgot-password-link:hover {
  color: #EA6308 !important;
  text-decoration: underline;
}

.login-footer {
  text-align: center;
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #E5E7EB !important;
}

.footer-text {
  color: var(--mm-text-lt) !important;
  font-size: 12px !important;
  margin: 0 !important;
  line-height: 1.6;
  font-family: 'Nunito', sans-serif !important;
}

.footer-text strong {
  color: var(--mm-text) !important;
  font-weight: 700 !important;
}

/* ── ANIMACIONES ADICIONALES ────────────────────────────────– */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── ANIMACIÓN FADE IN (ya existe, reforzar) ────────────────– */

.animate-fade-in {
  animation: fadeUp .4s ease both;
}

/* ── RESPONSIVE PANEL ADMIN ────────────────────────────────── */

@media (max-width: 768px) {
  .section-title {
    font-size: 18px !important;
  }

  .section-wrapper {
    padding: 16px !important;
  }

  .table thead th {
    font-size: 11px !important;
    padding: 8px !important;
  }

  .table tbody td {
    padding: 8px !important;
    font-size: 12px !important;
  }

  .days-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px !important;
  }

  .day-label {
    padding: 12px !important;
  }

  .day-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }

  .day-name {
    font-size: 12px !important;
  }

  .day-content small {
    font-size: 10px !important;
  }

  .options-guide {
    grid-template-columns: 1fr;
  }

  .option-card {
    flex-direction: column;
    gap: 8px !important;
  }

  .option-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }

  .option-content h4 {
    font-size: 13px !important;
  }

  .option-content p {
    font-size: 12px !important;
  }

  .form-layout-footer {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .signin-box {
    padding: 32px 24px !important;
  }

  .slim-logo {
    font-size: 24px !important;
  }

  .slim-logo i {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  .form-control {
    padding: 11px 12px !important;
    font-size: 16px !important;
  }

  .btn-signin {
    padding: 11px 14px !important;
    font-size: 14px !important;
  }

  .login-subtitle {
    font-size: 13px !important;
  }

  .mg-b-20 {
    margin-bottom: 16px !important;
  }

  .mg-b-25 {
    margin-bottom: 20px !important;
  }

  .mg-b-30 {
    margin-bottom: 24px !important;
  }
}

/* ── DARK MODE (OPCIONAL) ──────────────────────────────────– */

@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #EA580C 0%, #6D28D9 50%, #0891B2 100%) !important;
  }

  .signin-box,
  .section-wrapper {
    background: #1F2937 !important;
    color: white !important;
  }

  .slim-logo {
    color: white !important;
  }

  .login-subtitle,
  .section-subtitle {
    color: #D1D5DB !important;
  }

  .form-control {
    background: #111827 !important;
    color: white !important;
    border-color: #374151 !important;
  }

  .form-control::placeholder {
    color: #9CA3AF !important;
  }

  .form-control:focus {
    background: #1F2937 !important;
  }

  .forgot-password-text,
  .footer-text {
    color: #D1D5DB !important;
  }

  .footer-text strong {
    color: white !important;
  }

  .day-label,
  .option-card,
  .product-info-modal {
    background: #111827 !important;
    border-color: #374151 !important;
  }

  .day-name,
  .option-content h4 {
    color: white !important;
  }
  
}  
  
 /* ─────────────────────────────────────────
   PRODUTOS — clases específicas
   Agregar a mimenumx.css
───────────────────────────────────────── */

.prod-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  margin-bottom   : 16px;
  flex-wrap       : wrap;
  gap             : 12px;
}
.prod-titulo {
  font-size   : 1.15rem;
  font-weight : 800;
  color       : var(--mmx-text);
  margin      : 0;
  display     : flex;
  align-items : center;
  gap         : 8px;
}
.prod-titulo i { color: var(--mmx-naranja); }

/* Barra de filtros */
.prod-filtros {
  display       : flex;
  gap           : 12px;
  margin-bottom : 16px;
  flex-wrap     : wrap;
}
.prod-filtro-input {
  position : relative;
  flex     : 1;
  min-width: 200px;
  max-width: 360px;
}
.prod-filtro-icon {
  position   : absolute;
  left       : 12px;
  top        : 50%;
  transform  : translateY(-50%);
  color      : var(--mmx-muted);
  font-size  : .9rem;
  pointer-events: none;
}
.prod-input {
  width        : 100%;
  padding      : 9px 13px 9px 36px;
  border       : 1.5px solid var(--mmx-border);
  border-radius: 8px;
  font-size    : .9rem;
  color        : var(--mmx-text);
  background   : #fff;
  outline      : none;
  transition   : border-color .2s, box-shadow .2s;
  box-sizing   : border-box;
}
.prod-input:focus {
  border-color : var(--mmx-naranja);
  box-shadow   : 0 0 0 3px rgba(249,115,22,.12);
}
.prod-select {
  padding      : 9px 14px;
  border       : 1.5px solid var(--mmx-border);
  border-radius: 8px;
  font-size    : .88rem;
  color        : var(--mmx-text);
  background   : #fff;
  cursor       : pointer;
  outline      : none;
  min-width    : 200px;
  transition   : border-color .2s;
}
.prod-select:focus { border-color: var(--mmx-naranja); }

/* Tabla */
.table-responsive-wrapper {
  overflow-x   : auto;
  border-radius: 8px;
  border       : 1px solid var(--mmx-border);
}
.table-products thead {
  background   : #F9FAFB;
  border-bottom: 2px solid var(--mmx-naranja);
}
.table-products thead th {
  font-weight    : 700;
  color          : var(--mmx-text);
  padding        : 12px;
  text-transform : uppercase;
  font-size      : .75rem;
  letter-spacing : .05em;
  white-space    : nowrap;
}
.table-products tbody tr {
  border-bottom: 1px solid var(--mmx-border);
  transition   : background .2s;
}
.table-products tbody tr:hover { background: #FFF7F0; }
.action-cell { padding: 8px 4px; text-align: center; }

.product-thumbnail {
  width        : 52px;
  height       : 52px;
  object-fit   : cover;
  border-radius: 8px;
  border       : 2px solid var(--mmx-border);
  display      : block;
}
.price-tag   { font-size:.95rem; font-weight:800; color:var(--mmx-naranja); }

/* Badges */
.badge {
  display       : inline-flex;
  align-items   : center;
  padding       : 4px 10px;
  border-radius : 20px;
  font-size     : .75rem;
  font-weight   : 700;
  white-space   : nowrap;
}
.badge-category  { background:#EDE9FE; color:#5B21B6; }
.badge-success   { background:#DCFCE7; color:#166534; }
.badge-danger    { background:#FEE2E2; color:#991B1B; }
.badge-secondary { background:#F1F5F9; color:var(--mmx-muted); }

/* Alertas inline */
.alert-custom {
  display      : flex;
  align-items  : flex-start;
  gap          : 12px;
  padding      : 14px 20px;
  border-radius: 10px;
  font-size    : .9rem;
  border       : 1px solid transparent;
}
.alert-icon    { font-size:1.3rem; flex-shrink:0; margin-top:2px; }
.alert-success { background:#F0FDF4; border-color:#BBF7D0; color:#166534; }
.alert-success .alert-icon { color:#16A34A; }
.alert-error   { background:#FEF2F2; border-color:#FECACA; color:#991B1B; }
.alert-error   .alert-icon { color:#DC2626; }

@media (max-width: 768px) {
  .prod-header  { flex-direction: column; align-items: flex-start; }
  .prod-filtros { flex-direction: column; }
  .prod-filtro-input { max-width: 100%; }
  .prod-select  { min-width: 100%; }
}

/* Modal extra large para tamaños/adicionales */
.mmx-modal-xl { max-width: 900px; }

/* Grupo de acciones en tabla productos */
.acciones-grupo {
  display     : flex;
  gap         : 4px;
  align-items : center;
  flex-wrap   : wrap;
  justify-content: center;
} 
  
/* =========================================================
   MMX CUSTOM MODALS
========================================================= */

.mmx-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
}

.mmx-overlay.active{
  opacity: 1;
  visibility: visible;
}

.mmx-modal{
  width: 100%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;

  box-shadow: 0 20px 60px rgba(0,0,0,.25);

  transform: scale(.95);
  transition: .25s ease;
}

.mmx-overlay.active .mmx-modal{
  transform: scale(1);
}

.mmx-modal-lg{
  max-width: 900px;
}

.mmx-modal-header{
  background: linear-gradient(135deg,#1A1A2E,#16213E);
  color: #fff;

  padding: 18px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-weight: 800;
  font-size: 1rem;
}

.mmx-modal-body{
  padding: 24px;
  background: #FAFAFA;
}

.mmx-modal-footer{
  padding: 18px 24px;
  background: #fff;

  display: flex;
  justify-content: flex-end;
  gap: 10px;

  border-top: 1px solid #E5E7EB;
}

.mmx-modal-cerrar{
  border: none;
  background: transparent;
  color: #fff;

  font-size: 1.2rem;
  cursor: pointer;

  opacity: .8;
  transition: .2s;
}

.mmx-modal-cerrar:hover{
  opacity: 1;
  transform: scale(1.08);
}

/* FORMULARIOS */

.mmx-form-group{
  margin-bottom: 16px;
}

.mmx-label{
  display: block;
  margin-bottom: 8px;

  font-weight: 700;
  font-size: .82rem;

  color: var(--mm-text);
}

.mmx-required{
  color: #DC2626;
}

/* BOTONES */

.mmx-btn{
  border: none;
  border-radius: 10px;

  padding: 10px 18px;

  font-weight: 700;
  cursor: pointer;

  transition: .2s ease;
}

.mmx-btn-primary{
  background: linear-gradient(135deg,#F97316,#EA580C);
  color: #fff;

  box-shadow: 0 4px 14px rgba(249,115,22,.35);
}

.mmx-btn-primary:hover{
  transform: translateY(-2px);
}

.mmx-btn-secondary{
  background: #E5E7EB;
  color: #111827;
}

.mmx-btn-secondary:hover{
  background: #D1D5DB;
}

/* MOBILE */

@media(max-width:768px){

  .mmx-modal{
    max-height: 95vh;
    overflow-y: auto;
  }

  .mmx-modal-body{
    padding: 18px;
  }

  .mmx-modal-footer{
    flex-direction: column;
  }

  .mmx-btn{
    width: 100%;
  }

}