/* ============================================================
   VentaPro — Identidad visual
   Paleta: verde mercado (confianza/dinero) + ámbar (recibo/caja)
   Tipografía: Sora (marca/títulos) + Inter (interfaz)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --verde-950:#0E2B22;
  --verde-900:#123524;
  --verde-800:#1B4A34;
  --verde-600:#2E6E4E;
  --verde-500:#3E8C63;
  --ambar-500:#E0A526;
  --ambar-600:#C48A15;
  --terracota:#C9584B;
  --crema:#FAF7F1;
  --papel:#FFFFFF;
  --tinta-900:#1B211D;
  --tinta-600:#5B655D;
  --linea:#E4DFD3;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--crema);
  color:var(--tinta-900);
  margin:0;
  overflow-x:hidden;
}
h1,h2,h3,h4,.brand-font{font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-0.01em;}

/* ---------- Layout de la app ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:236px; flex-shrink:0; background:var(--verde-950); color:#EAF3EC;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar-brand{
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.25rem;
  padding:1.35rem 1.25rem; display:flex; align-items:center; gap:.55rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand i{color:var(--ambar-500);}
.sidebar-nav{flex:1; padding:.75rem .6rem; overflow-y:auto;}
.sidebar-nav a{
  display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem;
  color:#C7D9CD; text-decoration:none; border-radius:8px; font-size:.925rem;
  margin-bottom:.15rem; transition:background .12s ease, color .12s ease;
}
.sidebar-nav a i{width:1.1rem; text-align:center;}
.sidebar-nav a:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar-nav a.active{background:var(--verde-600); color:#fff; font-weight:600;}
.nav-badge{margin-left:auto; background:var(--terracota); color:#fff; font-size:.7rem; font-weight:700; min-width:1.35rem; height:1.35rem; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 .3rem; line-height:1;}
.sidebar-footer{padding:.9rem 1.1rem; border-top:1px solid rgba(255,255,255,.08);}
.sidebar-footer a{color:#C7D9CD; text-decoration:none; font-size:.875rem;}
.sidebar-footer a:hover{color:#fff;}

.main-area{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  background:var(--papel); border-bottom:1px solid var(--linea);
  padding:.85rem 1.5rem; display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:10;
  padding-top:calc(.85rem + env(safe-area-inset-top));
}
.topbar-title{font-family:'Sora',sans-serif; font-weight:700; font-size:1.1rem; flex:1;}
.topbar-user{display:flex; align-items:center; gap:.75rem; font-size:.875rem; color:var(--tinta-600);}
.topbar-reloj{color:var(--tinta-600); font-size:.82rem; white-space:nowrap; text-transform:capitalize;}
.content{padding:1.5rem; flex:1;}

/* ---------- Modo app: móvil y tablet (<992px) ---------- */
@media (max-width:991.98px){
  .content{padding:1rem 1rem calc(1.25rem + 64px + env(safe-area-inset-bottom));}
  .topbar{padding-left:1rem; padding-right:1rem;}
  .card-vp{padding:1rem;}
}
@media (max-width:575.98px){
  .topbar{flex-wrap:wrap; row-gap:.4rem;}
  .topbar-title{font-size:1rem; flex-basis:100%;}
  .topbar-user{flex-wrap:wrap; row-gap:.3rem; font-size:.8rem;}
}

.tienda-card-movil{border:1px solid var(--linea); border-radius:10px; padding:1rem; margin-bottom:.85rem;}
.tienda-card-movil:last-child{margin-bottom:0;}

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:flex; background:var(--papel); border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 10px rgba(0,0,0,.06);
}
.bottom-nav .bn-item{
  position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  padding:.55rem .25rem; color:var(--tinta-600); text-decoration:none; font-size:.68rem; font-weight:600;
  background:none; border:none;
}
.bottom-nav .bn-item i{font-size:1.2rem;}
.bottom-nav .bn-item.active{color:var(--verde-600);}
.bn-badge{position:absolute; top:.2rem; right:24%; background:var(--terracota); color:#fff; font-size:.62rem; font-weight:700; min-width:1.1rem; height:1.1rem; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 .25rem; line-height:1;}
.bn-item.active i{transform:none;}
#btnFabMas.active i{transform:rotate(45deg); transition:transform .2s ease;}
#btnFabMas i{transition:transform .2s ease;}

/* ---------- Menú "Más" como botones flotantes (móvil) ---------- */
.fab-backdrop{position:fixed; inset:0; background:rgba(15,25,20,.35); z-index:1045; opacity:0; visibility:hidden; transition:opacity .18s ease;}
.fab-backdrop.show{opacity:1; visibility:visible;}
.fab-items{
  position:fixed; right:1rem; z-index:1046;
  bottom:calc(64px + env(safe-area-inset-bottom) + .85rem);
  display:flex; flex-direction:column-reverse; align-items:flex-end; gap:.65rem;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  max-height:calc(100vh - 64px - 2rem); overflow-y:auto; padding:.25rem;
}
.fab-items.show{opacity:1; visibility:visible; transform:translateY(0);}
.fab-item{display:flex; align-items:center; gap:.6rem; text-decoration:none; flex-shrink:0;}
.fab-label{background:var(--tinta-900); color:#fff; font-size:.76rem; font-weight:600; padding:.4rem .75rem; border-radius:7px; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.18);}
.fab-icon{width:46px; height:46px; border-radius:50%; background:var(--papel); color:var(--verde-600); display:flex; align-items:center; justify-content:center; font-size:1.2rem; box-shadow:0 4px 14px rgba(0,0,0,.2); border:1px solid var(--linea); flex-shrink:0;}
.fab-item.active .fab-icon{background:var(--verde-600); color:#fff; border-color:var(--verde-600);}
.fab-item-danger .fab-icon{color:var(--terracota);}
.fab-item-idiomas{align-items:center;}
.fab-idiomas{display:flex; background:var(--papel); border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.2); border:1px solid var(--linea); overflow:hidden;}
.fab-idiomas a{padding:.5rem .9rem; font-size:.78rem; font-weight:700; color:var(--tinta-600); text-decoration:none;}
.fab-idiomas a.active{background:var(--verde-600); color:#fff;}

/* ---------- Componentes ---------- */
.card-vp{
  background:var(--papel); border:1px solid var(--linea); border-radius:10px;
  padding:1.25rem;
}
.stat-card{
  background:var(--papel); border:1px solid var(--linea); border-left:4px solid var(--verde-600);
  border-radius:8px; padding:1.1rem 1.25rem;
}
.stat-card.stat-ambar{border-left-color:var(--ambar-500);}
.stat-card.stat-terracota{border-left-color:var(--terracota);}
.stat-card .stat-label{font-size:.8rem; color:var(--tinta-600); text-transform:none; margin-bottom:.35rem;}
.stat-card .stat-value{font-family:'Sora',sans-serif; font-weight:700; font-size:1.65rem;}

.btn-primary{
  background:var(--verde-600); border-color:var(--verde-600); font-weight:600;
}
.btn-primary:hover{background:var(--verde-800); border-color:var(--verde-800);}
.btn-outline-primary{color:var(--verde-600); border-color:var(--verde-600);}
.btn-outline-primary:hover{background:var(--verde-600); border-color:var(--verde-600);}
.btn-ambar{background:var(--ambar-500); border-color:var(--ambar-500); color:#3A2A05; font-weight:600;}
.btn-ambar:hover{background:var(--ambar-600); border-color:var(--ambar-600); color:#241900;}

.table-vp thead th{
  font-size:.75rem; color:var(--tinta-600); font-weight:600; border-bottom:2px solid var(--linea);
  background:transparent;
}
.table-vp td, .table-vp th{vertical-align:middle; padding:.7rem .6rem;}

.badge-estado{padding:.35em .6em; border-radius:6px; font-weight:600; font-size:.72rem;}
.badge-completada,.badge-pagado,.badge-activo{background:#E4F1E8; color:var(--verde-800);}
.badge-pendiente,.badge-parcial,.badge-nuevo{background:#FBEFD4; color:var(--ambar-600);}
.badge-cancelada,.badge-vencido{background:#F7E4E1; color:var(--terracota);}

.pos-grid{display:grid; grid-template-columns:1fr 380px; gap:1.25rem;}
@media (max-width:1199.98px){.pos-grid{grid-template-columns:1fr;}}

/* ---------- Barra de herramientas del POS ---------- */
.modal-importar-icono{width:88px; height:88px; border-radius:50%; background:#EFECE3; color:var(--tinta-600); display:flex; align-items:center; justify-content:center; font-size:2.4rem; margin:0 auto;}

.pos-toolbar{background:var(--papel); border:1px solid var(--linea); border-radius:10px; padding:.6rem .75rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;}
.pos-toolbar-izq{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.pos-toolbar-der{display:flex; align-items:center; gap:.35rem;}
.pos-buscador{position:relative; width:260px; max-width:60vw;}
.pos-buscador input{border:1px solid var(--linea); border-radius:8px; padding:.5rem 2.2rem .5rem .8rem; width:100%; font-size:.9rem;}
.pos-buscador input:focus{outline:none; border-color:var(--verde-600);}
.pos-buscador i{position:absolute; right:.75rem; top:50%; transform:translateY(-50%); color:var(--tinta-600);}
.btn-pos-toolbar{border:1px solid var(--linea); background:var(--papel); border-radius:8px; padding:.5rem .8rem; font-size:.85rem; font-weight:600; color:var(--tinta-900);}
.btn-pos-vista{width:38px; height:38px; border:1px solid var(--linea); background:var(--papel); border-radius:8px; color:var(--tinta-600); display:flex; align-items:center; justify-content:center;}
.btn-pos-vista.active{background:#E4F1E8; border-color:var(--verde-600); color:var(--verde-600);}

/* ---------- Tiles de producto (con imagen) ---------- */
.product-tile{
  background:var(--papel); border:1px solid var(--linea); border-radius:10px; padding:0; overflow:hidden;
  cursor:pointer; transition:border-color .12s ease, transform .1s ease; text-align:left; height:100%;
  display:flex; flex-direction:column;
}
.product-tile:hover{border-color:var(--verde-600); transform:translateY(-2px); box-shadow:0 6px 16px rgba(14,43,34,.08);}
.pt-img-wrap{position:relative;}
.pt-img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#EFE9DA;}
.pt-img-ph{display:flex; align-items:center; justify-content:center; color:var(--tinta-600); font-size:1.6rem;}
.pt-badge-agotado{position:absolute; top:.4rem; left:.4rem; background:rgba(27,33,29,.75); color:#fff; font-size:.62rem; font-weight:700; padding:.15rem .45rem; border-radius:4px;}
.pt-info{padding:.65rem .75rem; flex:1;}
.product-tile .p-nombre{font-weight:600; font-size:.85rem; line-height:1.25; margin-bottom:.2rem;}
.product-tile .p-precio{color:var(--verde-600); font-weight:700; font-family:'Sora',sans-serif;}
.product-tile .p-stock{font-size:.72rem; color:var(--tinta-600);}

.product-tile-agregar{background:var(--verde-600); color:#fff; border:1px dashed var(--verde-800); gap:.4rem; min-height:140px;}
.product-tile-agregar:hover{background:var(--verde-800); color:#fff;}
.product-tile-agregar i{font-size:1.6rem;}
.product-tile-agregar span{font-size:.8rem; font-weight:600;}

/* Vista de lista del POS */
#gridProductos.vista-lista .producto-item{flex:0 0 100%; max-width:100%;}
#gridProductos.vista-lista .product-tile{flex-direction:row; align-items:center;}
#gridProductos.vista-lista .pt-img-wrap{width:56px; height:56px; flex-shrink:0;}
#gridProductos.vista-lista .pt-img, #gridProductos.vista-lista .pt-img-ph{width:56px; height:56px; border-radius:0;}
#gridProductos.vista-lista .pt-info{padding:.5rem .75rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;}
#gridProductos.vista-lista .p-nombre{margin-bottom:0;}
#gridProductos.vista-lista .p-stock{display:none;}
#gridProductos.vista-lista .product-tile-agregar{flex-direction:row; min-height:56px;}

.cart-panel{background:var(--papel); border:1px solid var(--linea); border-radius:10px; display:flex; flex-direction:column; height:100%;}
.cart-items{flex:1; overflow-y:auto; max-height:52vh;}
.cart-item{display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-bottom:1px solid var(--linea);}
.cart-item .ci-nombre{flex:1; font-size:.85rem; font-weight:600;}
.cart-total{padding:1rem 1.1rem; border-top:1px solid var(--linea); background:#F7F4EC; border-radius:0 0 10px 10px;}

.cart-vacio{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2.5rem 1.5rem; height:100%;}
.cart-vacio-icono{width:64px; height:64px; border-radius:50%; background:#F0EEE6; color:var(--tinta-600); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:.9rem;}

/* ---------- Selector de color de marca (Configuración) ---------- */
.color-swatches{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem;}
.color-swatch{position:relative; width:34px; height:34px; border-radius:50%; border:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.color-swatch i{font-size:.9rem; opacity:0; transform:scale(.4); transition:opacity .15s ease, transform .15s ease;}
.color-swatch.active{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--verde-600);}
.color-swatch.active i{opacity:1; transform:scale(1);}
.color-swatch-custom{background:conic-gradient(from 180deg,#F2B705,#EB5757,#BD6FA0,#6FA8DC,#27AE60,#F2B705); overflow:hidden;}
.color-swatch-custom i{opacity:1; transform:none; font-size:.8rem; text-shadow:0 1px 2px rgba(0,0,0,.35);}
.color-swatch-custom input[type="color"]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; padding:0;}

.theme-preview{background:#F0F0EF; border-radius:14px; padding:1.5rem 1rem; display:flex; justify-content:center;}
.theme-preview-card{width:100%; max-width:220px; background:#fff; border-radius:10px; padding:.75rem; box-shadow:0 8px 20px rgba(0,0,0,.07);}
.theme-preview-search{display:flex; align-items:center; gap:.35rem; background:#F5F5F4; border-radius:20px; padding:.4rem .6rem; margin-bottom:.85rem; color:#B3B0A6; font-size:.7rem;}
.theme-preview-search .tp-dot{width:9px; height:9px; border-radius:50%; background:var(--tema,var(--verde-600)); flex-shrink:0;}
.theme-preview-search .tp-bar{height:6px; border-radius:4px; background:#E3E1D9; flex:1;}
.theme-preview-search .tp-bar.short{flex:.5;}
.theme-preview-imagen{position:relative; background:color-mix(in srgb, var(--tema,var(--verde-600)) 14%, white); border-radius:8px; height:95px; display:flex; align-items:center; justify-content:center; margin-bottom:.65rem;}
.theme-preview-imagen i{font-size:1.7rem; color:var(--tema,var(--verde-600));}
.theme-preview-imagen .tp-badge{position:absolute; top:.4rem; left:.4rem; background:var(--tema,var(--verde-600)); color:#fff; font-size:.62rem; font-weight:700; padding:.15rem .4rem; border-radius:4px;}
.tp-bar-tema{display:block; height:8px; width:55%; border-radius:4px; background:var(--tema,var(--verde-600)); margin-bottom:.35rem;}
.tp-bar-gris{display:block; height:6px; width:80%; border-radius:4px; background:#E3E1D9; margin-bottom:.75rem;}
.tp-precio{font-weight:700; color:var(--tema,var(--verde-600)); font-size:1.05rem; margin-bottom:.65rem;}
.tp-boton{display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; background:var(--tema,var(--verde-600)); color:#fff; border:none; border-radius:8px; padding:.5rem; font-weight:600; font-size:.8rem;}

/* ---------- Vista previa de pedidos (Configuración) ---------- */
.pedido-preview{display:flex; justify-content:center; padding:1.75rem 0; background:#FAFAF8; border-radius:14px;}
.pedido-preview-circulo{width:250px; height:250px; border-radius:50%; background:var(--tema,var(--verde-600)); display:flex; align-items:center; justify-content:center;}
.pedido-preview-telefono{width:165px; background:#fff; border-radius:14px; padding:1rem .8rem; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,.18);}
.pedido-preview-check{width:38px; height:38px; border-radius:50%; background:color-mix(in srgb, var(--tema,var(--verde-600)) 15%, white); display:flex; align-items:center; justify-content:center; margin:0 auto .5rem; color:var(--tema,var(--verde-600)); font-size:1.05rem;}
.pedido-preview-titulo{color:var(--tema,var(--verde-600)); font-weight:700; font-size:.82rem; margin-bottom:.4rem;}
.pedido-preview-msg{color:var(--tinta-600); font-size:.68rem; line-height:1.35; margin-bottom:.75rem; word-break:break-word; min-height:1.4em;}
.pedido-preview-boton{background:var(--tema,var(--verde-600)); color:#fff; border-radius:6px; padding:.35rem; font-size:.72rem; font-weight:600;}

/* ---------- Vista previa de modo de exhibición (Configuración) ---------- */
.exhibicion-preview{display:flex; justify-content:center; padding:1.75rem 0; background:#FAFAF8; border-radius:14px;}
.exhibicion-preview-circulo{width:230px; height:230px; border-radius:50%; background:#E9E7E2; display:flex; align-items:center; justify-content:center;}
.exhibicion-preview-circulo > div{display:none; width:150px;}
.exhibicion-preview[data-modo="lista"] .ep-lista{display:flex; flex-direction:column; gap:.4rem;}
.exhibicion-preview[data-modo="cuadricula"] .ep-cuadricula{display:grid; grid-template-columns:1fr 1fr; gap:.4rem;}
.exhibicion-preview[data-modo="instaview"] .ep-instaview{display:flex; flex-direction:column; align-items:center; gap:.4rem;}

.ep-fila{display:flex; align-items:center; gap:.4rem; background:#fff; border-radius:8px; padding:.35rem; box-shadow:0 3px 8px rgba(0,0,0,.06);}
.ep-thumb{width:24px; height:24px; border-radius:5px; background:#E3E1D9; flex-shrink:0;}
.ep-lineas{flex:1; display:flex; flex-direction:column; gap:.22rem;}
.ep-linea{height:5px; border-radius:3px; background:#E3E1D9; width:100%;}
.ep-linea.corta{width:55%;}
.ep-precio{font-size:.62rem; font-weight:700; color:var(--tema,var(--ambar-600)); flex-shrink:0;}

.ep-celda{background:#fff; border-radius:8px; padding:.4rem; text-align:center; box-shadow:0 3px 8px rgba(0,0,0,.06);}
.ep-thumb-grande{display:block; width:100%; height:36px; border-radius:5px; background:#E3E1D9; margin-bottom:.3rem;}

.ep-instaview .ep-thumb-gigante{display:block; width:150px; height:115px; border-radius:10px; background:#E3E1D9;}

/* ---------- Opciones simples de radio (Productos sin stock, etc.) ---------- */
.stock-opciones{background:#F5F5F4; border-radius:10px; overflow:hidden;}
.stock-opcion{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem 1rem; cursor:pointer; margin:0;}
.stock-opcion.border-top{border-top:1px solid var(--linea);}

.landing-admin-link{position:absolute; right:1rem; bottom:.85rem; color:var(--tinta-600); opacity:.22; font-size:.85rem; text-decoration:none; transition:opacity .2s ease;}
.landing-admin-link:hover{opacity:.75; color:var(--tinta-900);}

/* ---------- Landing / login ---------- */
.landing-hero{background:var(--verde-950); color:#EAF3EC;}

.banner-panoramico{position:relative; overflow:hidden; padding:3.5rem 1rem; background:linear-gradient(180deg,#F4F8F5 0%,#FFFFFF 100%);}
.banner-panoramico::before,
.banner-panoramico::after{content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.3; z-index:0; pointer-events:none;}
.banner-panoramico::before{width:26rem; height:26rem; background:var(--verde-500); top:-9rem; left:-6rem;}
.banner-panoramico::after{width:22rem; height:22rem; background:var(--ambar-500); bottom:-9rem; right:-4rem;}
.banner-panoramico img{position:relative; z-index:1; display:block; margin:0 auto; width:100%; max-width:980px; height:300px; object-fit:cover; border-radius:1.25rem; box-shadow:0 24px 48px -18px rgba(14,43,34,.3);}
@media (max-width:768px){.banner-panoramico img{height:180px;}}
.auth-body{position:relative; overflow-x:hidden; min-height:100vh;}
.auth-bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.auth-bg svg{position:absolute; top:50%; left:50%; width:min(1100px,140vw); height:auto; transform:translate(-50%,-50%);}
.auth-body .container{position:relative; z-index:1;}
.auth-volver{margin-top:1.25rem;}

.auth-card{max-width:420px; margin:3.5rem auto; background:var(--papel); border:1px solid var(--linea); border-radius:12px; padding:2rem; position:relative; z-index:1; box-shadow:0 10px 40px rgba(14,43,34,.08);}
.auth-card-wide{max-width:560px;}

.trial-incluye-box{background:#E7F2FB; border:1px solid #C9E2F5; border-radius:12px; padding:1.1rem 1.25rem; color:#1B4E73;}
.trial-check-item{display:flex; align-items:center; gap:.5rem; padding:.3rem 0; font-size:.85rem;}
.trial-check-icono{width:1.15rem; height:1.15rem; background:#3BB273; color:#fff; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.68rem; flex-shrink:0;}

.terminos-box{background:#FCF1CE; border:1px solid #EFCE7C; border-radius:12px; padding:1.1rem 1.25rem; color:#6B4E12;}
.terminos-box strong{color:#6B4E12;}
.terminos-box .form-check-label{color:#6B4E12;}

.credenciales-box{background:#E7F2FB; border:1px solid #C9E2F5; border-radius:12px; padding:1.1rem 1.25rem; color:#1B4E73;}
.credencial-fila{display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:var(--papel); border-radius:9px; padding:.6rem .9rem; margin-bottom:.6rem;}
.credencial-fila:last-child{margin-bottom:0;}
.credencial-label{font-size:.68rem; font-weight:700; letter-spacing:.03em; color:var(--tinta-600);}
.credencial-valor{font-family:monospace; font-size:.95rem; font-weight:600; color:var(--tinta-900); word-break:break-all;}
.btn-copiar{border:none; background:none; color:var(--tinta-600); padding:.3rem; flex-shrink:0;}
.btn-copiar:hover{color:var(--verde-600);}

.importante-box{background:#FCF1CE; border:1px solid #EFCE7C; border-radius:12px; padding:.85rem 1.1rem; color:#6B4E12;}
.nota-box{background:#E7F2FB; border:1px solid #C9E2F5; border-radius:12px; padding:.85rem 1.1rem; color:#1B4E73;}

.vencimiento-pill{display:inline-block; background:#FBE7E5; border:1px solid #F3BFB9; color:var(--terracota); font-weight:700; font-size:.85rem; padding:.5rem 1.1rem; border-radius:999px;}

/* ---------- Modal de Términos y Condiciones ---------- */
.terminos-bienvenida{background:#E7F2FB; border:1px solid #C9E2F5; border-radius:10px; padding:.75rem 1rem; color:#1B4E73; font-size:.9rem;}
.terminos-seccion{font-weight:700; font-size:.85rem; color:var(--tinta-900); margin-bottom:.4rem;}
.terminos-lista{list-style:none; padding-left:0; margin-bottom:0;}
.terminos-lista li{padding:.3rem 0;}
.terminos-check-box{display:flex; align-items:center; gap:.6rem; background:#FCF1CE; border:1px solid #EFCE7C; border-radius:10px; padding:.75rem 1rem; font-weight:600; font-size:.88rem; color:#6B4E12; cursor:pointer;}
.terminos-check-box input{width:1.15rem; height:1.15rem; flex-shrink:0;}
.terminos-btn-aceptar, .terminos-btn-rechazar{text-transform:uppercase; font-size:.78rem; letter-spacing:.02em; font-weight:700;}

.plan-toggle{display:inline-flex; align-items:center; gap:.15rem; background:var(--papel); border:1px solid var(--linea); border-radius:999px; padding:.25rem;}
.plan-toggle-btn{border:none; background:none; padding:.5rem 1.1rem; border-radius:999px; font-weight:600; font-size:.9rem; color:var(--tinta-600); display:flex; align-items:center; gap:.4rem;}
.plan-toggle-btn.active{background:var(--verde-950); color:#fff;}
.badge-ahorro{background:var(--ambar-500); color:#3A2A05; font-size:.68rem; font-weight:700; padding:.15em .5em; border-radius:999px;}

.plan-card{position:relative; background:var(--papel); border:1px solid var(--linea); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;}
.plan-card-destacado{border:2px solid var(--verde-800); box-shadow:0 8px 24px rgba(14,43,34,.12);}
.plan-badge{background:var(--verde-950); color:#fff; text-align:center; font-size:.75rem; font-weight:700; padding:.4rem; letter-spacing:.02em;}
.plan-card-body{padding:1.5rem;}
.plan-precio{min-height:3rem;}
.plan-features li{display:flex; align-items:flex-start; gap:.5rem; padding:.3rem 0; color:var(--tinta-600);}
.plan-features li i{margin-top:.15rem; flex-shrink:0;}

/* ---------- Tienda pública ---------- */
.tienda-topbar{background-color:var(--verde-950); background-size:cover; background-position:center; color:#fff; padding:1.75rem 0;}
.tienda-modal-whatsapp{background:#F5F5F4; border-radius:8px; padding:.6rem .75rem;}
.tienda-logo{width:64px; height:64px; object-fit:contain; background:#fff; border-radius:10px; padding:6px; flex-shrink:0;}
.tienda-producto{background:var(--papel); border:1px solid var(--linea); border-radius:10px; overflow:hidden; height:100%;}
.tienda-producto img, .tienda-producto .ph{width:100%; aspect-ratio:1/1; object-fit:cover; background:#EFE9DA;}

.tienda-producto-lista{background:var(--papel); border:1px solid var(--linea); border-radius:10px; padding:.5rem .75rem;}
.tienda-producto-lista-img{width:56px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#EFE9DA; font-size:1.2rem;}
.tienda-producto img.sin-stock, .tienda-producto-lista-img.sin-stock{opacity:.5; filter:grayscale(70%);}
.tienda-redes a{opacity:.85; transition:opacity .15s;}
.tienda-redes a:hover{opacity:1;}
.tienda-footer{border-top:1px solid var(--linea); color:var(--tinta-600);}
.carrito-flotante{position:fixed; bottom:1.25rem; right:1.25rem; z-index:1040;}
.whatsapp-flotante{position:fixed; bottom:1.25rem; left:1.25rem; z-index:1040;}
.whatsapp-flotante .btn{background:#25D366; border-color:#25D366; color:#fff;}

/* Selector de vista (cuadrícula / lista) del catálogo público */
.vista-toggle{display:inline-flex; background:var(--papel); border:1px solid var(--linea); border-radius:10px; padding:.25rem; gap:.25rem; flex-shrink:0;}
.vista-toggle-btn{border:none; background:none; width:36px; height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--tinta-600); font-size:1.05rem; cursor:pointer;}
.vista-toggle-btn.active{background:var(--ambar-500); color:#3A2A05;}

/* Grid unificado de productos: cuadrícula / instaview / lista, controlado por clase en #gridTienda */
.tienda-grid{display:grid; gap:.75rem;}
#gridTienda.vista-cuadricula{grid-template-columns:repeat(2,1fr);}
@media (min-width:576px){#gridTienda.vista-cuadricula{grid-template-columns:repeat(3,1fr);}}
@media (min-width:992px){#gridTienda.vista-cuadricula{grid-template-columns:repeat(4,1fr);}}

#gridTienda.vista-instaview{grid-template-columns:1fr;}
@media (min-width:576px){#gridTienda.vista-instaview{grid-template-columns:repeat(2,1fr);}}
@media (min-width:992px){#gridTienda.vista-instaview{grid-template-columns:repeat(3,1fr);}}

#gridTienda.vista-lista{grid-template-columns:1fr; gap:.5rem;}

.tp-vacio{grid-column:1/-1;}
.tp-card{background:var(--papel); border:1px solid var(--linea); border-radius:10px; overflow:hidden; height:100%; display:flex; flex-direction:column;}
.tp-img-wrap{position:relative; cursor:pointer;}
.tp-img, .tp-img-ph{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#EFE9DA;}
.tp-img.sin-stock{opacity:.5; filter:grayscale(70%);}
.tp-badge{position:absolute; top:.4rem; left:.4rem; z-index:2;}
.tp-info{padding:.5rem; flex:1;}
.tp-nombre{font-weight:600; font-size:.85rem;}
.tp-precio{font-weight:700; color:var(--verde-600);}
.tp-btn{margin:0 .5rem .5rem; width:calc(100% - 1rem);}

#gridTienda.vista-instaview .tp-nombre{font-size:1.05rem;}
#gridTienda.vista-instaview .tp-precio{font-size:1.2rem;}

#gridTienda.vista-lista .tp-card{flex-direction:row; align-items:center; gap:.75rem; padding:.5rem .75rem;}
#gridTienda.vista-lista .tp-img-wrap{width:56px; height:56px; flex-shrink:0;}
#gridTienda.vista-lista .tp-img, #gridTienda.vista-lista .tp-img-ph{width:56px; height:56px; border-radius:8px;}
#gridTienda.vista-lista .tp-badge{font-size:.6rem; padding:.15em .4em;}
#gridTienda.vista-lista .tp-info{padding:0; flex:1; min-width:0;}
#gridTienda.vista-lista .tp-nombre{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#gridTienda.vista-lista .tp-btn{margin:0; width:auto; flex-shrink:0; padding:.375rem .5rem;}
#gridTienda.vista-lista .tp-btn-label{display:none !important;}
.whatsapp-flotante .btn:hover{background:#1DA851; border-color:#1DA851; color:#fff;}

.slider-destacados{position:relative; margin-top:1.5rem; border-radius:20px; overflow:hidden; box-shadow:0 16px 40px -18px rgba(14,43,34,.35);}
.slider-destacados .carousel-item{height:400px; background:#1a1a1a;}
.slider-destacados .slide-img{width:100%; height:100%; object-fit:cover;}
.slider-destacados .slide-overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.05) 75%); pointer-events:none;}
.slider-destacados .slide-badge-agotado{position:absolute; top:1rem; left:1rem; z-index:2; font-size:.7rem; padding:.35em .7em;}
.slider-destacados .slide-caption{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; text-align:left; padding:2.5rem 3rem; color:#fff; pointer-events:none;}
.slider-destacados .slide-caption *{pointer-events:auto;}
.slider-destacados .slide-eyebrow{display:inline-flex; align-items:center; gap:.35rem; background:rgba(255,255,255,.15); backdrop-filter:blur(4px); border-radius:999px; padding:.3em .8em; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.85rem;}
.slider-destacados .slide-caption h2{font-weight:800; font-size:clamp(1.3rem,3.4vw,2.3rem); margin-bottom:.5rem; line-height:1.15;}
.slider-destacados .slide-caption p{opacity:.85; margin-bottom:1.25rem; max-width:480px;}
.slider-destacados .slide-actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap;}
.slider-destacados .slide-precio{font-family:'Sora',sans-serif; font-weight:700; font-size:1.4rem;}
.slider-destacados .btn-ver-producto{border-radius:999px; padding:.6rem 1.4rem; display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s ease, box-shadow .15s ease;}
.slider-destacados .btn-ver-producto:hover{transform:translateY(-2px); box-shadow:0 10px 20px -8px rgba(0,0,0,.4);}

.slider-destacados .carousel-control-prev, .slider-destacados .carousel-control-next{width:3rem; opacity:1;}
.slider-destacados .slide-nav-icon{width:2.25rem; height:2.25rem; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; transition:background .15s;}
.slider-destacados .carousel-control-prev:hover .slide-nav-icon, .slider-destacados .carousel-control-next:hover .slide-nav-icon{background:rgba(255,255,255,.35);}
.slider-destacados .carousel-indicators{margin:0; position:absolute; bottom:1.25rem; right:2rem; left:auto; width:auto; justify-content:flex-end;}
.slider-destacados .carousel-indicators button{width:22px; height:4px; border-radius:999px; background-color:rgba(255,255,255,.4); opacity:1; border:0; transition:background-color .2s, width .2s;}
.slider-destacados .carousel-indicators button.active{background-color:var(--ambar-500); width:32px;}
@media (max-width:576px){
  .slider-destacados{border-radius:14px;}
  .slider-destacados .carousel-item{height:300px;}
  .slider-destacados .slide-caption{padding:1.5rem;}
  .slider-destacados .carousel-indicators{right:1.25rem; bottom:1rem;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}

/* ------------------------------------------------------------
   Finanzas: cuentas por pagar / salidas
   ------------------------------------------------------------ */
.finanzas-tabs{display:inline-flex; background:#EFEBE0; border-radius:999px; padding:.25rem; gap:.15rem;}
.finanzas-tabs a{padding:.45rem 1.1rem; border-radius:999px; font-size:.8rem; font-weight:700; color:var(--tinta-600); text-decoration:none; white-space:nowrap;}
.finanzas-tabs a.active{background:var(--verde-600); color:#fff;}

.finanzas-empty{background:var(--papel); border:1px solid var(--linea); border-radius:14px; padding:2rem 1.25rem; text-align:center; height:100%;}
.finanzas-empty-icono{width:60px; height:60px; border-radius:50%; background:#F0EEE6; color:var(--tinta-600); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto .9rem;}
.finanzas-empty.tiene-datos .finanzas-empty-icono{background:#FBEFD4; color:var(--ambar-600);}
.finanzas-empty-titulo{font-weight:700; margin-bottom:.2rem;}

.finanzas-hero{background:var(--verde-950); color:#EAF3EC; border-radius:14px; padding:1.1rem 1.1rem 1.3rem; margin-bottom:1.1rem; transition:background .15s ease;}
.finanzas-hero .btn-group .btn{font-size:.8rem; font-weight:700;}
.finanzas-hero-valor{font-family:'Sora',sans-serif; font-weight:700; font-size:2.1rem; text-align:center; margin:.9rem 0 1rem;}
.finanzas-hero-valor input{background:transparent; border:0; color:#fff; font-family:'Sora',sans-serif; font-weight:700; font-size:2.1rem; text-align:center; width:100%; outline:none;}
.finanzas-hero-valor input::placeholder{color:rgba(234,243,236,.45);}
.finanzas-hero-fila{display:flex; gap:.75rem;}
.finanzas-hero-fila > div{flex:1;}
.finanzas-hero label{font-size:.72rem; color:#B9CCC0; margin-bottom:.25rem; display:block;}

.finanzas-hero.pago{background:#E0A526; color:#3A2A05;}
.finanzas-hero.pago .finanzas-hero-valor input{color:#3A2A05;}
.finanzas-hero.pago .finanzas-hero-valor input::placeholder{color:rgba(58,42,5,.45);}
.finanzas-hero.pago label{color:#6B4E0E;}
.finanzas-hero.pago .cat-icon-bubble{background:rgba(58,42,5,.12); color:#3A2A05;}
.finanzas-hero.pago .finanzas-cat-btn{color:#3A2A05; border-color:rgba(58,42,5,.35);}

.finanzas-cat-btn{display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;}
.finanzas-cat-menu{max-height:280px; overflow-y:auto; min-width:260px;}
.finanzas-cat-item{display:flex; align-items:center; gap:.6rem;}
.cat-icon-bubble{width:28px; height:28px; border-radius:50%; background:#F0EEE6; color:var(--verde-600); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0;}
.finanzas-cat-item.active{background:#E4F1E8;}

.cat-pill{display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:var(--tinta-600);}

/* ------------------------------------------------------------
   Ventana emergente "Guardar cambios" (configuracion/index.php)
   ------------------------------------------------------------ */
.guardar-flotante{
  position:fixed; right:20px; bottom:20px; z-index:1050;
  width:300px; max-width:calc(100% - 2rem);
  background:var(--papel); color:var(--tinta-900);
  border-radius:16px; border:1px solid var(--linea);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  padding:1rem;
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.guardar-flotante.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.guardar-flotante-titulo{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; margin-bottom:.25rem;}
.guardar-flotante-titulo i{color:var(--ambar-600); font-size:1.1rem;}
.guardar-flotante p{font-size:.8rem; color:var(--tinta-600); margin-bottom:.85rem;}
.guardar-flotante .btn{width:100%; font-weight:700;}
@media (max-width:991.98px){
  .guardar-flotante{ bottom:76px; right:12px; left:12px; width:auto; }
}