body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#f9fafb;
}

/* =========================
   TOP BAR
========================= */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 24px;
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  position:sticky;
  top:0;
  z-index:1000;
}

.logo{
  font-size:20px;
  font-weight:700;
  color:#111827;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.btn-sistema{
  padding:8px 14px;
  font-size:14px;
  background:#f3f4f6;
  color:#111827;
  border:1px solid #d1d5db;
  border-radius:8px;
  cursor:pointer;
  transition:.2s ease;
}

.btn-sistema:hover{
  background:#e5e7eb;
}

.btn-carrito{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  background:#2563eb;
  color:#fff;
  border:none;
  border-radius:999px;
  font-size:14px;
  cursor:pointer;
  transition:.2s ease;
}

.btn-carrito:hover{
  background:#1d4ed8;
}

.badge{
  background:#ef4444;
  color:#fff;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  font-weight:600;
}

/* =========================
   RESPONSIVE TOPBAR
========================= */

/* =========================
   GRID PRODUCTOS
========================= */

#productos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:24px;
  padding:24px;
}

/* =========================
   CARD PRODUCTO
========================= */

.producto.p-card{
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:.25s ease;
}

.producto.p-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 35px rgba(0,0,0,.12);
}

/* =========================
   IMAGEN
========================= */

.img-container.p-img{
  position:relative;
  width:100%;
  height:330px;
  background:#f3f4f6;
  overflow:hidden;
}

.img-container.p-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  opacity:0;
  transition:opacity .4s ease, transform .4s ease;
}

.img-container.p-img img.active{
  opacity:1;
}

.producto.p-card:hover .img-container.p-img img.active{
  transform:scale(1.05);
}

/* =========================
   CUERPO CARD
========================= */

.p-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:8px;
  gap:4px;
}

.p-title{
  font-size:15px;
  font-weight:600;
  color:#111827;
  line-height:1.2;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  margin-bottom:4px;
}

.p-price{
  font-size:20px;
  font-weight:700;
  color:#16a34a;
  margin:2px 0 6px 0;
}

.p-btn{
  margin-top:auto;
  padding:10px 0;
  font-size:15px;
  font-weight:600;
  background:#2563eb;
  color:#ffffff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:.2s ease;
}

.p-btn:hover{
  background:#1d4ed8;
}

/* =========================
   MODAL CARRITO
========================= */

#modalCarrito{
  position:fixed;
  top:70px;
  right:0px;
  width:380px;
height: 90%;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  border-radius:10px;
  display:none;
  z-index:999;
  overflow-y: auto;
}

.carrito-box{
  padding:15px;
}

.cart-item{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #eee;
  padding:10px 0;
}

.cart-item img{
  width:50px;
  height:50px;
  object-fit:cover;
  border-radius:6px;
}

.cart-item .info{
  flex:1;
}

.cart-item .qty{
  display:flex;
  align-items:center;
  gap:6px;
}

.cart-item .qty button{
  width:26px;
  height:26px;
  border:none;
  background:#333;
  color:#fff;
  border-radius:4px;
  cursor:pointer;
}

.cart-total{
  text-align:right;
  padding-top:10px;

  font-size:16px;
}

#btnContinuar {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: #fff;
    border: none;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    letter-spacing: 0.5px;
}

/* Hover */
#btnContinuar:hover {
    background: linear-gradient(135deg, #43A047, #1B5E20);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* Click */
#btnContinuar:active {
    transform: scale(0.97);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* Deshabilitado */
#btnContinuar:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* Responsive (móvil) */
@media (max-width: 600px) {
    #btnContinuar {
        width: 100%;
        padding: 14px;
        font-size: 17px;
    }
}
/* =========================
   TOAST
========================= */

#toast{
  position:fixed;
  bottom:30px;
  right:30px;
  background:#d63031;
  color:#fff;
  padding:14px 20px;
  border-radius:8px;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:9999;
}

#toast.show{
  opacity:1;
}

/* modal de fotos imagen grande */
/* ===============================
   MODAL PRODUCTO PROFESIONAL
================================ */
/* ===============================
   MODAL PROFESIONAL 2 COLUMNAS
================================ */

.modal-producto{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(6px);
justify-content:center;
align-items:center;
z-index:10000;
}

.modal-content {
  background: #fff;
  width: 95%;
  max-width: 1100px;
  border-radius: 18px;
  padding: 40px;
  position: relative;
  animation: fadeIn .25s ease;
  overflow: visible;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Botón cerrar derecha */
.cerrar-modal {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 26px;
  cursor: pointer;
  font-weight: bold;
}

/* GRID 2 columnas */
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 50px;
  align-items: center;
}

/* Columna imagen */
.col-imagen {
  display: flex;
  justify-content: center;
  align-items: center;
}

.col-imagen img {
  max-height: 80vh;   /* 👈 imagen vertical completa */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 14px;
}

/* Columna derecha */
.col-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Miniaturas */
.miniaturas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.miniaturas img {
  width: 70px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: .2s;
}

.miniaturas img:hover,
.miniaturas img.activa {
  opacity: 1;
  border-color: #000;
}

/* Precio */
.precio-modal {
  font-size: 26px;
  font-weight: bold;
  margin-top: 10px;
}

/* Botón */
.btn-modal {
  margin-top: 10px;
  padding: 15px;
  font-size: 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: #000;
  color: #fff;
  transition: .2s;
}

.btn-modal:hover {
  background: #222;
}
/* css de la lupa*/
/* contenedor del zoom */

.zoom-container{
position:relative;
overflow: hidden;
}

.zoom-container img{
width:100%;
border-radius:10px;
display:block;
}

/* lupa */
#lupa{
position:absolute;
width:150px;
height:150px;
border-radius:50%;
border:3px solid #fff;
box-shadow:0 0 15px rgba(0,0,0,0.4);
background-repeat:no-repeat;
pointer-events:none;
display:none;
z-index:10000;
}
/* miniaturas */

.miniaturas{
display:flex;
gap:10px;
margin-bottom:15px;
}

.miniaturas img{
width:60px;
height:60px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
border:2px solid transparent;
}

.miniaturas img:hover{
border:2px solid #007bff;
}

/* precio */

.precio-modal{
font-size:26px;
font-weight:bold;
color:#222;
margin:10px 0;
}

/* boton carrito */

.btn-modal{
background:#007bff;
color:white;
border:none;
padding:12px 20px;
border-radius:6px;
cursor:pointer;
font-size:16px;
}

.btn-modal:hover{
background:#0056b3;
}

/* =========================
   PANEL ENVIO (DRAWER)
========================= */

#drawerEnvio{
  position:fixed;
  top:0;
  right:-420px; /* oculto fuera de pantalla */
  width:420px;
  height:100%;
  background:#ffffff;
  box-shadow:-10px 0 30px rgba(0,0,0,.2);
  z-index:12000;
  transition:right .35s ease;
  display:flex;
  flex-direction:column;
}

#drawerEnvio.open{
  right:0; /* aparece */
}

/* encabezado */

.drawer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  border-bottom:1px solid #eee;
  font-size:18px;
  font-weight:600;
}

/* boton cerrar */

#cerrarEnvio{
  background:none;
  border:none;
  font-size:22px;
  cursor:pointer;
}

/* contenido */

#envioContenido{
  padding:20px;
  overflow:auto;
  flex:1;
}
/* =========================
   ?? ESTILO 2 – CLEAN / CATÁLOGO
========================= */
@media (max-width: 768px) {

  /* ??? Fondo claro suave */
  body {
    background: #f1f5f9;
  }
	.topbar{
	box-shadow: inset 0 -4px 15px rgba(017, 24, 39, 0.4); /* ?? sombra interna abajo */
	z-index: 10; /* evita que se pierda detrás */
	}
  .topbar-left span:last-of-type {
    display: none !important;
  }

  /* ?? Grid */
#productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ?? 2 productos por fila */
  gap: 14px;
  padding: 12px;
}

  /* ?? Card tipo ficha */
  .producto.p-card {
    background: #ffffff;
    border-radius: 12px;

    /* ?? línea lateral elegante */
    border-left: 4px solid #111827;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  /* ??? Imagen */
  .img-container.p-img {
    border-bottom: 1px solid #e5e7eb;
  }

  /* ??? TÍTULO estilo profesional */
  .p-title {
  white-space: normal;
  word-break: break-word;
  margin: 4px 0;
  }

  /* ?? Precio */
  .p-price {
    font-size: 15px;
    font-weight: 700;
    color: #16a34a;
  }

  /* ?? Botón más minimalista */
  .p-btn {
    font-size: 13px;
    padding: 8px;
    border-radius: 8px;

    background: #111827;
    color: #fff;
  }

  /* ? toque táctil */
  .producto.p-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
	/* ?? Compactar altura del producto */
.img-container.p-img {
  height:220px; /* ?? reduce altura de imagen */
}

/* ?? Reducir espacio interno */
.p-body {
  padding: 6px;
  gap: 2px;
}

/* ??? Título más compacto */


/* ?? Precio */
.p-price {
  font-size: 14px;
  margin: 2px 0;
}

/* ?? Botón */
.p-btn {
  font-size: 12px;
  padding: 6px;
}

  /* ?? Evita scroll horizontal */
  body {
    overflow-x: hidden;
  }

  /* ?? Botón carrito */
  .btn-carrito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 6px 8px;
  }

  /* ? Ocultar texto SOLO en móvil */
  .btn-carrito .texto {
    display: none;
  }

  /* ?? Icono más grande */
  .btn-carrito {
    font-size: 20px;
  }

  /* ?? Badge (contador) estilo app */
  .btn-carrito .badge {
    font-size: 11px;
    font-weight: bold;

    background: red;
    color: #fff;

    padding: 2px 6px;
    border-radius: 50%;

    position: relative;
    top: -6px;
    right: 2px;
  }
	/* PARA VER LAS IMAGENES EN MODAL MOVIL */
	
	
  .modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
    padding: 15px;
    overflow-y: auto;
  }

  /* ?? Cambiar a 1 sola columna */
 .modal-grid {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}

.col-imagen,
.col-info {
  width: 100%;
  min-width: 0; /* ?? CLAVE: evita que se desborde */
}


.col-imagen {
  width: 100%;
  height: 55vh; /* ?? ocupa 60% de la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
	overflow: hidden;
}

.col-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ?? sin recortar */
}

  /* ?? Zoom (desactivar lupa en móvil) */
  #lupa {
  }


  /* ? Botón cerrar */
  .cerrar-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  }
	.col-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.miniaturas {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  margin-bottom: 5px;
}

.miniaturas img {
  width: 60px;
  height: 70px;
  flex-shrink: 0;
}

/* precio */
.precio-modal {
  font-size: 18px;
  margin: 4px 0;
}

/* botón */
.btn-modal {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  border-radius: 10px;
  margin-top: 6px;
}

}
/* Contenedor del formulario */
#formEnvio {
  max-width: 600px;
  margin: auto;
  background: #ffffff;
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Títulos */
#formEnvio h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #333;
  border-left: 4px solid #4CAF50;
  padding-left: 10px;
}

/* Labels */
#formEnvio label {
  display: block;
  margin-top: 12px;
  margin-bottom: 5px;
  font-weight: 500;
  color: #555;
}

/* Inputs y textarea */
#formEnvio input,
#formEnvio textarea,
#formEnvio select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.3s;
  font-size: 14px;
}

/* Focus */
#formEnvio input:focus,
#formEnvio textarea:focus,
#formEnvio select:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76,175,80,0.3);
}

/* Textarea */
#formEnvio textarea {
  resize: vertical;
  min-height: 80px;
}

/* Select */
#formEnvio select {
  cursor: pointer;
}

/* Botón */
#formEnvio button {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #4CAF50, #2e7d32);
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

/* Hover botón */
#formEnvio button:hover {
  background: linear-gradient(135deg, #43a047, #1b5e20);
  transform: translateY(-2px);
}

/* Mensaje */
#msgEnvio {
  max-width: 600px;
  margin: 15px auto;
  text-align: center;
  font-weight: bold;
  color: #333;
}

/* Responsive */
@media (max-width: 600px) {
  #formEnvio {
    padding: 20px;
  }
}


/* Contenedor principal */
.container {
  max-width: 900px;
  margin: 30px auto;
  background: #fff;
  padding: 25px 30px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Título */
h2 {
  margin-bottom: 20px;
  color: #222;
}

/* Info cliente */
.cliente-info {
  background: #f9fafc;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.cliente-info p {
  margin: 6px 0;
}

/* Tabla */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

table thead {
  background: #4CAF50;
  color: white;
}

table th, table td {
  padding: 12px;
  text-align: center;
}

table tbody tr {
  border-bottom: 1px solid #eee;
}

table tbody tr:hover {
  background: #f8f8f8;
}

/* Total */
.total-row td {
  font-size: 16px;
  font-weight: bold;
  background: #fafafa;
}

/* Botón */
.btn-pagar {
  margin-top: 25px;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #009ee3, #0077b6);
  cursor: pointer;
  transition: 0.3s;
}

.btn-pagar:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0084c7, #005f8f);
}

/* Responsive */
@media (max-width: 600px) {
  .container {
    padding: 20px;
  }

  table th, table td {
    font-size: 13px;
    padding: 8px;
  }
}