/* Tema PRO - Abarrotes POS (solo apariencia; no se enlaza en inventario) */
@media screen {
  ::selection { background: #a3dfe2; color: #10495a; }
  body {
    background-image:
      radial-gradient(900px 420px at 92% -8%, rgba(15,114,132,.09), transparent 70%),
      radial-gradient(700px 380px at -8% 108%, rgba(31,169,113,.06), transparent 70%);
    background-attachment: fixed;
  }
  /* Entrada suave de cada módulo */
  body > .max-w-5xl, body > .max-w-6xl { animation: subir .4s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* Tarjetas: borde fino + elevación al pasar el mouse */
  [class*="rounded-[2rem]"], .rounded-3xl.bg-white, .rounded-3xl.bg-orange-50, .rounded-3xl.bg-blue-50 {
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .grid > [class*="rounded-[2rem]"]:hover, .grid > .rounded-3xl:hover { transform: translateY(-2px); }
  tbody tr { transition: background-color .15s ease; }
  thead th { font-weight: 800; }

  /* CAJA: escáner protagonista */
  #escaner { transition: box-shadow .2s ease; }
  #escaner:focus { box-shadow: 0 0 0 4px rgba(15,114,132,.18), 0 16px 36px -10px rgba(15,114,132,.45) !important; }
  #sugerencias { border-width: 2px !important; box-shadow: 0 24px 48px -12px rgba(19,26,29,.28) !important; }

  /* CAJA: total con brillo */
  #totalVenta { text-shadow: 0 0 32px rgba(56,170,181,.4); }
  #textoCambio { font-variant-numeric: tabular-nums; }

  /* CAJA: botón COBRAR con presencia */
  #btnCobrar:not(:disabled) {
    background-image: linear-gradient(180deg, #2bbd82, #178a5b);
    box-shadow: 0 14px 28px -8px rgba(23,138,91,.55), inset 0 1px 0 rgba(255,255,255,.25) !important;
    letter-spacing: .04em;
  }
  #btnCobrar:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.05); }
  #btnCobrar:not(:disabled):active { transform: scale(.98); }
  #btnCobrar:disabled { background-image: none; }

  /* Botones rápidos: mismo tamaño y elevación al hover */
  #escaner ~ div > button { transition: transform .15s ease, box-shadow .15s ease; }
  #escaner ~ div > button:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -6px rgba(19,26,29,.2); }
  #tabsContainer { border-radius: 1.25rem 1.25rem 0 0; }

  /* MENÚ: iconos en baldosa */
  .nav-btn > span.text-xl {
    display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
    border-radius: .7rem; background: rgba(255,255,255,.06); font-size: 1.1rem;
  }
  .nav-btn.bg-blue-600 > span.text-xl { background: rgba(255,255,255,.18); }
  .nav-btn:not(.bg-blue-600):hover > span.text-xl { background: rgba(255,255,255,.1); }
  #sidebar { background-image: linear-gradient(180deg, #131a1d, #0e1417); }

  /* Indicador de conexión */
  .estado-red { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; margin-bottom: 1rem;
    border-radius: .85rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); color: #cbd5e1; line-height: 1.25; }
  .estado-red .punto { width: .6rem; height: .6rem; border-radius: 9999px; flex-shrink: 0; background: #1fa971;
    animation: latido 2.2s infinite; }
  .estado-red small { display: block; font-size: .68rem; font-weight: 600; color: #8b9aa2; }
  .estado-red.off { color: #fcd34d; border-color: rgba(252,211,77,.25); }
  .estado-red.off .punto { background: #f59e0b; animation: none; }
  @keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(31,169,113,.55); } 70% { box-shadow: 0 0 0 8px rgba(31,169,113,0); } 100% { box-shadow: 0 0 0 0 rgba(31,169,113,0); } }

  /* Avisos (SweetAlert) */
  .swal2-toast { border-radius: 1rem !important; box-shadow: 0 16px 36px -10px rgba(19,26,29,.3) !important; font-weight: 700; }
  .swal2-title { font-weight: 800 !important; }
  .swal2-cancel { background-color: #eef2f3 !important; color: #465359 !important; }
}
@media print { body { background: none !important; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }