/* =============================================================================
   custom.css — Estilos personalizados de la tienda
   ============================================================================= */

/* ── Variables ── */
:root {
  --color-primary: #015bd6;
  --color-success: #198754;
  --color-whatsapp: #25d366;
  --transition-fast: .2s ease;
  --border-radius-card: 12px;
}

/* ── Base ── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #2d3748;
  background: #eaeaea;
}

/* ── Navbar ── */
.navbar-brand {
  letter-spacing: -.3px;
}

.cart-badge {
  font-size: .62rem;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ── Hero section ── */
.hero-section {
  background: url('../uploads/logo/centro-grande.webp') center/cover no-repeat;
  min-height: 380px;
  display: flex;
  align-items: center;
}

@media (max-width: 576px) {
  .hero-section { min-height: 260px; }
  .hero-section h1 { font-size: 1.8rem; }
}

/* ── Tarjetas de productos ── */
.product-card {
  border-radius: var(--border-radius-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden;
  background: #eaeaea !important;
  border: 1px solid #c4ccd8 !important;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1) !important;
}

.product-img {
  transition: transform .3s ease;
}

.product-card:hover .product-img {
  transform: scale(1.03);
}

.product-img-placeholder {
  height: 200px;
}

/* ── Botones de metodo de pago (checkout) ── */
.btn-pago {
  border: 2px solid #dee2e6;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-pago:hover {
  border-color: var(--color-primary);
  background: #eaeaea;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(1, 91, 214,.15);
}

.btn-pago.selected {
  border-color: var(--color-primary);
  background: #d8dce5;
  box-shadow: 0 0 0 3px rgba(1, 91, 214,.2);
}

@media (max-width: 480px) {
  .btn-pago { min-height: 130px; padding: 1rem !important; }
  .btn-pago .fs-1 { font-size: 1.8rem !important; }
}

/* ── Animacion del collapse de facturacion ── */
#seccion-factura {
  overflow: hidden;
}

/* ── Resumen del checkout ── */
.resumen-checkout {
  background: #eaeaea;
  border-radius: 14px;
  border: 1px solid #c4ccd8;
}

/* ── Items del carrito ── */
.carrito-item {
  transition: background var(--transition-fast);
}

.carrito-item:hover {
  background: #dcdcdc;
  border-radius: 8px;
}

/* ── Pagina de producto ── */
.breadcrumb {
  font-size: .9rem;
}

/* ── Footer ── */
.footer-main {
  border-top: 1px solid rgba(255, 255, 255, .05);
}

/* ── Botones redondeados ── */
.btn-whatsapp {
  background: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  color: #fff;
}

.btn-whatsapp:hover {
  background: #1da851;
  border-color: #1da851;
  color: #fff;
}

/* ── Estados del badge ── */
.badge {
  font-weight: 500;
  letter-spacing: .02em;
}

/* ── Campos de formulario: fondo tenue + cambio de color al enfocar ── */
.form-control,
.form-select,
.input-group-text {
  background-color: #f4f5f7;
  border-color: #b8bec8;
  color: #2d3748;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: #edf2ff;
  border-color: #015bd6;
  color: #1a2a4a;
  box-shadow: 0 0 0 3px rgba(1, 91, 214, .12);
}

/* Campos completados (cuando tienen valor) — tinte suave */
.form-control:not(:placeholder-shown),
.form-select:not([value=""]) {
  background-color: #eceff5;
  border-color: #9aaac0;
}

/* Input-group coherente */
.input-group .form-control:focus {
  z-index: 3;
}

/* Admin: campos dentro del panel */
.admin-content .form-control,
.admin-content .form-select {
  background-color: #f4f5f7;
  border-color: #b8bec8;
}

.admin-content .form-control:focus,
.admin-content .form-select:focus {
  background-color: #edf2ff;
  border-color: #015bd6;
}

/* ── Formulario de checkout — campos invalidos ── */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #dc3545;
  background-color: #fff5f5;
}

/* ── Utilitarios ── */
.cursor-pointer { cursor: pointer; }

.shadow-hover {
  transition: box-shadow var(--transition-fast);
}

.shadow-hover:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}

/* ── Responsive — Mobile first ── */

/* Desactivar sticky en movil para que el resumen no quede pegado */
@media (max-width: 991px) {
  .sticky-top { position: static !important; }
}

/* Reducir padding vertical en pantallas chicas */
@media (max-width: 575px) {
  .container.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-5.container { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  h2.fw-bold { font-size: 1.4rem; }
  .btn-lg { font-size: .95rem; padding: .6rem 1rem; }
}

/* Botones de pago: achica el texto en pantallas muy pequeñas */
@media (max-width: 400px) {
  .btn-pago { min-height: 110px; padding: .75rem !important; }
  .btn-pago .fw-bold { font-size: .85rem; }
  .btn-pago .small { font-size: .72rem; }
  .btn-pago .fs-1 { font-size: 1.6rem !important; }
}

/* Navbar: nombre del negocio no se corta en movil */
@media (max-width: 400px) {
  .navbar-brand { font-size: 1rem !important; }
  .navbar-brand img { height: 28px !important; }
}

/* Tabla del carrito en movil: texto de resumen se achica */
@media (max-width: 575px) {
  #resumen-items { font-size: .82rem; }
}

/* Admin sidebar en movil: más compacto */
@media (max-width: 767px) {
  .admin-sidebar { width: 100% !important; min-height: auto !important; }
  .admin-sidebar .sidebar-logo { padding: .75rem 1rem !important; font-size: .95rem; }
  .admin-sidebar nav { padding: .25rem !important; }
  .admin-sidebar .nav-link { padding: .4rem .7rem !important; font-size: .875rem; }
  .admin-layout { flex-direction: column !important; }
  /* Nav de admin en horizontal en movil */
  .admin-sidebar nav .nav { flex-direction: row !important; flex-wrap: wrap; gap: .25rem !important; }
  .admin-sidebar > div:last-child .nav { flex-direction: row !important; flex-wrap: wrap; }
}

/* Tabla de admin: scroll horizontal en movil (ya usa table-responsive) */
@media (max-width: 767px) {
  .admin-content .p-4 { padding: 1rem !important; }
  .admin-topbar { padding: .5rem 1rem !important; }
}

/* ── Bloques con color de fondo (checkout, carrito, admin, resumen) ── */
.card {
  --bs-card-bg: #eaeaea;
  background-color: #eaeaea !important;
  border: 1px solid #c4ccd8 !important;
}

.card > .card-header {
  background-color: #d8dce5 !important;
  border-bottom: 1px solid #c4ccd8 !important;
}

.card > .card-body {
  background-color: #eaeaea !important;
}

/* Tarjeta de resumen en checkout */
.resumen-checkout {
  background: #eaeaea !important;
  border: 1px solid #c4ccd8 !important;
}

/* Sección de filtros (categorías en index) */
#productos.bg-light,
section#productos.bg-light {
  background-color: #eaeaea !important;
}

/* ── Separadores de bloque más gruesos ── */
/* Separador entre grupos de categorías en la página de productos */
#productos-contenido h4.fw-bold.border-bottom {
  border-bottom: 3px solid #015bd6 !important;
  padding-bottom: .5rem;
  margin-bottom: 1.25rem !important;
}

/* HR dentro de secciones */
.card hr,
.resumen-checkout hr {
  border-top: 2px solid #c8d9f5;
  opacity: 1;
}

/* Línea horizontal del footer dentro de las páginas */
footer hr.border-secondary {
  border-top: 2px solid rgba(255,255,255,.15) !important;
  opacity: 1;
}

/* ── Imágenes en el carrito ── */
.carrito-item-img {
  width: 130px !important;
  height: 130px !important;
  max-width: 130px !important;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #c4ccd8;
  background: #eaeaea;
  flex-shrink: 0;
}

.carrito-item-img-placeholder {
  width: 130px;
  height: 130px;
  border-radius: 10px;
  border: 1px solid #c4ccd8;
  background: #eaeaea;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 2rem;
}

@media (max-width: 575px) {
  .carrito-item-img,
  .carrito-item-img-placeholder {
    width: 90px;
    height: 90px;
  }
}

/* ── Imagen de tarjeta de producto ── */
.product-img {
  height: 220px !important;
  object-fit: contain !important;
  width: 100% !important;
  background: #eaeaea;
}