body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 0; background-color: #f4f6f4; color: #26332a; }
:root { --color-principal: #2e914b; }
.header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0.75rem clamp(1rem, 5vw, 4rem); background: #fff; box-shadow: 0 2px 12px rgba(30,50,35,0.08); }
.header h1 { margin: 0; color: #24342a; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -0.03em; }
.logo { height: 54px; max-width: 150px; width: auto; object-fit: contain; }
.btn-iniciar-sesion { flex-shrink: 0; padding: 10px 14px; border: 1px solid #dce9dd; border-radius: 8px; background: #eff7ef; color: #347340; font-size: 0.88rem; font-weight: 700; text-decoration: none; transition: background 160ms ease, border-color 160ms ease; }
.btn-iniciar-sesion:hover { border-color: #b9d4bc; background: #e5f2e6; }
.btn-elegir-zona { flex-shrink: 0; padding: 9px 12px; border: 1px solid #dce9dd; border-radius: 8px; background: #eff7ef; color: #347340; font-size: 0.85rem; }
.portada-tienda { width: min(1600px, 100%); box-sizing: border-box; margin: 1.25rem auto 0; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.portada-tienda img { display: block; width: 100%; height: clamp(180px, 30vw, 430px); border: 1px solid rgba(38, 65, 43, 0.08); border-radius: 16px; background: #e8eee9; object-fit: cover; object-position: center; box-shadow: 0 8px 26px rgba(38, 65, 43, 0.1); }
.modal-zona-envio { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgba(20,30,25,0.68); backdrop-filter: blur(5px); }
.modal-zona-contenido { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 460px; box-sizing: border-box; padding: clamp(24px, 6vw, 38px); border: 1px solid #e5ebe5; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.24); }
.modal-zona-contenido .admin-etiqueta { margin: 0; }
.modal-zona-contenido h2 { margin: 0; color: #26332a; font-size: 1.7rem; }
.modal-zona-contenido > p:not(.admin-etiqueta) { margin: 0; color: #68766c; line-height: 1.55; }
.modal-zona-contenido label { margin-top: 6px; color: #46534a; font-size: 0.9rem; font-weight: 700; }
.modal-zona-contenido select { width: 100%; padding: 12px 13px; border: 1px solid #d8e0d9; border-radius: 8px; background: #fff; color: #29332c; font: inherit; }
.modal-zona-contenido button { min-height: 46px; margin-top: 5px; border-radius: 8px; background: #2e914b; }

.login-page { display: grid; min-height: 100vh; place-items: center; box-sizing: border-box; padding: 24px; background: radial-gradient(ellipse at top, #e8f3e9 0%, #f4f6f4 55%, #edf1ed 100%); }
.login-card { width: 100%; max-width: 560px; min-height: 480px; box-sizing: border-box; padding: clamp(32px, 7vw, 56px); border: 1px solid #e5ebe5; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(38, 65, 43, 0.12); display: flex; flex-direction: column; justify-content: center; }
.login-volver { display: inline-block; align-self: flex-start; margin-bottom: 42px; color: #536458; font-size: 1rem; font-weight: 650; text-decoration: none; }
.login-volver:hover { color: #2e7d32; text-decoration: underline; }
.login-etiqueta { margin: 0 0 10px; color: #398248; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.13em; }
.login-card h1 { margin: 0; color: #26332a; font-size: clamp(2.2rem, 5vw, 2.8rem); letter-spacing: -0.04em; }
.login-descripcion { margin: 12px 0 30px; color: #748077; font-size: 1.05rem; line-height: 1.6; }
.login-form { display: flex; flex-direction: column; gap: 13px; }
.login-form label { margin-top: 8px; color: #46534a; font-size: 1rem; font-weight: 700; }
.login-form input { width: 100%; box-sizing: border-box; padding: 16px 17px; border: 1px solid #d8e0d9; border-radius: 9px; background: #fff; color: #29332c; font: inherit; font-size: 1rem; }
.login-form input:focus { outline: 2px solid rgba(46,125,50,0.18); border-color: #398248; }
.login-form button { margin-top: 18px; min-height: 54px; border-radius: 9px; background: #2e914b; font-size: 1.05rem; }
.login-form button:hover { background: #267940; opacity: 1; }
.login-error { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #f0cfcd; border-radius: 8px; background: #fff3f2; color: #a33a36; font-size: 0.9rem; font-weight: 650; }

.catalogo { max-width: 1440px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem) 6rem; }
.catalogo-intro { margin-bottom: 1.75rem; }
.catalogo-intro p { margin: 0 0 0.4rem; color: #398248; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.13em; }
.catalogo-intro h2 { margin: 0; color: #26332a; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -0.04em; }
.catalogo-intro > span { display: inline-block; margin-top: 0.45rem; color: #748077; font-size: 0.92rem; }
.catalogo-filtros { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto; gap: 10px; margin: 0 0 1.5rem; padding: 14px; border: 1px solid #e5ebe5; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(38, 65, 43, 0.04); }
.catalogo-filtros input, .catalogo-filtros select { min-width: 0; box-sizing: border-box; padding: 12px 13px; border: 1px solid #d8e0d9; border-radius: 8px; background: #fff; color: #29332c; font: inherit; }
.catalogo-filtros input:focus, .catalogo-filtros select:focus { outline: 2px solid rgba(46,125,50,0.18); border-color: #398248; }
.limpiar-filtros { padding: 10px 14px; border: 1px solid #dce9dd; border-radius: 8px; background: #eff7ef; color: #347340; white-space: nowrap; }
.limpiar-filtros:hover { background: #e5f2e6; opacity: 1; }
.catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.producto-card[hidden] { display: none; }
.producto-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e9eee9; border-radius: 15px; padding: 0.9rem; box-shadow: 0 4px 14px rgba(38, 65, 43, 0.06); display: flex; flex-direction: column; transition: transform 180ms ease, box-shadow 180ms ease; }
.producto-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(38, 65, 43, 0.12); }
.producto-imagen { display: grid; place-items: center; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: #f7f9f7; }
.abrir-imagen-producto { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; }
.producto-card .abrir-imagen-producto img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 220ms ease; }
.producto-card:hover img { transform: scale(1.035); }
.badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 700; color: #347340; background: #eaf4eb; padding: 5px 9px; border-radius: 999px; align-self: flex-start; margin-top: 14px; }
.producto-card h3 { margin: 10px 0 0; color: #26332a; font-size: 1.08rem; line-height: 1.4; }
.desc { display: -webkit-box; overflow: hidden; min-height: 2.8em; margin: 7px 0 0; color: #727c74; font-size: 0.9rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.precio { margin: 18px 0 14px; color: #2e7d32; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
.precio-zona-hint { margin: -7px 0 10px; color: #68766c; font-size: 0.76rem; line-height: 1.4; }
.detalle-precio-zona-hint { margin: 8px 0 0; }
.etiqueta-presentacion { margin-top: 14px; color: #49544b; font-size: 0.82rem; font-weight: 700; }
.selector-presentacion { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d8e0d9; border-radius: 8px; background: #fff; color: #29332c; font: inherit; }
.selector-presentacion:focus { outline: 2px solid rgba(46,125,50,0.18); border-color: #398248; }
.producto-card .etiqueta-presentacion { margin-top: 12px; }
.producto-card .precio-producto { margin: 10px 0 12px; }
.producto-card .precio-zona-hint { min-height: 1.4em; }
.control-cantidad-producto { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; padding: 8px 10px; border: 1px solid #e6ece6; border-radius: 10px; background: #f8faf8; }
.control-cantidad-producto > label { color: #58665b; font-size: 0.82rem; font-weight: 700; }
.selector-cantidad { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #dfe7df; border-radius: 9px; background: #fff; }
.selector-cantidad button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: #eff7ef; color: #347340; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.selector-cantidad button:hover { background: #e1f0e3; }
.selector-cantidad input { width: 42px; min-width: 0; padding: 4px 0; border: 0; outline: 0; background: transparent; color: #26332a; font: inherit; font-size: 0.92rem; font-weight: 750; text-align: center; }
.selector-cantidad input:focus-visible { outline: 2px solid #398248; outline-offset: 1px; border-radius: 4px; }
.selector-cantidad input::-webkit-inner-spin-button, .selector-cantidad input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.selector-cantidad input { appearance: textfield; }
.stock-disponible { flex-basis: 100%; color: #718078; font-size: 0.72rem; text-align: right; }
.selector-cantidad button:disabled, .btn-agregar:disabled { cursor: not-allowed; opacity: 0.5; }
.btn-ver-detalle { width: 100%; margin-top: auto; padding: 10px 15px; border: 1px solid #dce9dd; border-radius: 8px; background: #eff7ef; color: #347340; }
.btn-ver-detalle:hover { background: #e5f2e6; opacity: 1; }
.btn-agregar { width: 100%; margin-top: auto; padding: 12px 15px; border-radius: 8px; background: #2e9f54; transition: background 160ms ease, transform 160ms ease; }
.producto-card .btn-agregar { margin-top: 8px; }
.btn-agregar:hover { background: #258545; opacity: 1; }
.catalogo-vacio { grid-column: 1 / -1; margin: 0; padding: 3rem 1.5rem; border: 1px dashed #cbd8cc; border-radius: 14px; background: #fff; color: #68766b; text-align: center; }

@media (max-width: 640px) {
    .catalogo { padding-right: 0.5rem; padding-left: 0.5rem; }
    .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
    .producto-card { padding: 0.45rem; }
    .control-cantidad-producto { flex-wrap: wrap; justify-content: center; padding: 6px; }
    .control-cantidad-producto > label { display: none; }
    .selector-cantidad { display: flex; width: 100%; min-width: 0; flex: 1 0 100%; box-sizing: border-box; justify-content: space-between; }
    .selector-cantidad button { flex: 0 0 30px; }
    .selector-cantidad input { flex: 1 1 auto; width: 0; min-width: 0; }
    .catalogo-filtros { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
    .limpiar-filtros { grid-column: 1 / -1; }
}

.modal-detalle-producto { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; overflow-y: auto; padding: 20px; box-sizing: border-box; background: rgba(20,30,25,0.64); backdrop-filter: blur(4px); }
.detalle-producto-contenido { position: relative; width: 100%; max-width: 560px; max-height: min(90vh, 900px); box-sizing: border-box; overflow-y: auto; padding: clamp(20px, 5vw, 32px); border: 1px solid #e5ebe5; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.24); }
.detalle-producto-cerrar { position: absolute; top: 14px; right: 14px; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #e4e9e5; border-radius: 50%; background: rgba(255,255,255,0.94); color: #344139; font-size: 1.7rem; line-height: 1; }
.detalle-producto-cerrar:hover { background: #eaf0eb; opacity: 1; }
.detalle-producto-galeria { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; }
.detalle-producto-galeria.detalle-galeria-unica { grid-template-columns: minmax(0, 1fr); }
.detalle-producto-imagen { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #f7f9f7; }
.detalle-producto-imagen .abrir-imagen-producto img { width: 100%; height: 100%; object-fit: contain; }
.detalle-imagen-navegacion { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: #eff7ef; color: #347340; font-size: 1.8rem; }
.detalle-imagen-navegacion:hover { background: #e5f2e6; opacity: 1; }
.detalle-imagen-miniaturas { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.detalle-imagen-miniaturas button { width: 58px; height: 58px; padding: 3px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #f7f9f7; }
.detalle-imagen-miniaturas button[aria-pressed="true"] { border-color: #398248; }
.detalle-imagen-miniaturas img { display: block; width: 100%; height: 100%; object-fit: contain; }
.visor-imagen-producto { position: fixed; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; justify-items: center; gap: clamp(8px, 2vw, 20px); width: min(1100px, calc(100vw - 32px)); max-width: none; height: min(90vh, 900px); max-height: none; box-sizing: border-box; padding: clamp(16px, 4vw, 42px); overflow: visible; border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; background: #172019; color: #fff; }
.visor-imagen-producto[open] { display: grid; }
.visor-imagen-producto::backdrop { background: rgba(10,16,12,0.86); backdrop-filter: blur(5px); }
.visor-imagen-producto > img { display: block; width: 100%; height: 100%; max-height: calc(90vh - 100px); object-fit: contain; grid-column: 2; grid-row: 1; }
.visor-imagen-cerrar { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(25,35,28,0.8); color: #fff; font-size: 1.8rem; line-height: 1; }
.visor-imagen-navegacion { z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 2rem; }
.visor-imagen-navegacion:hover, .visor-imagen-cerrar:hover { background: rgba(255,255,255,0.24); opacity: 1; }
.visor-imagen-producto > .visor-imagen-navegacion:nth-of-type(2) { grid-column: 1; grid-row: 1; }
.visor-imagen-producto > .visor-imagen-navegacion:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.visor-imagen-contador { position: absolute; right: 70px; bottom: 10px; left: 70px; margin: 0; color: rgba(255,255,255,0.8); font-size: 0.9rem; text-align: center; }
.detalle-producto-contenido .badge { margin-top: 18px; }
.detalle-producto-contenido h2 { margin: 12px 0 8px; color: #26332a; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.3; overflow-wrap: anywhere; }
.detalle-producto-contenido > p:not(.precio) { color: #68766c; font-size: 1rem; line-height: 1.65; white-space: pre-line; }
.detalle-producto-contenido .precio { margin: 20px 0; font-size: 1.8rem; }
.detalle-producto-contenido .etiqueta-presentacion { display: block; margin-top: 18px; }
.detalle-producto-contenido > .btn-agregar { margin-top: 0; }
.control-cantidad-detalle { margin: 0 0 12px; }

button { background: #25d366; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; }
button:hover { opacity: 0.9; }

#btn-ver-carrito { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 10; display: inline-flex; align-items: center; padding: 14px 20px; border: 1px solid rgba(255,255,255,0.24); border-radius: 999px; background: linear-gradient(135deg, #27bf5b, #1e9f4c); box-shadow: 0 7px 20px rgba(30, 126, 62, 0.34); transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
#btn-ver-carrito:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30, 126, 62, 0.4); opacity: 1; }
.carrito-boton-contenido { display: inline-flex; align-items: center; gap: 7px; }
.carrito-insignia { position: absolute; top: -8px; right: -6px; display: inline-grid; place-items: center; min-width: 27px; height: 27px; box-sizing: border-box; padding: 0 6px; border: 2px solid #fff; border-radius: 999px; background: #e53935; color: #fff; font-size: 0.78rem; font-weight: 800; line-height: 1; box-shadow: 0 2px 7px rgba(90, 12, 12, 0.28); }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#btn-ver-carrito.carrito-atencion { animation: carrito-atencion 650ms ease-in-out; }
#btn-ver-carrito.carrito-atencion .carrito-insignia { animation: insignia-atencion 650ms ease-in-out; }
@keyframes carrito-atencion {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.09); }
    65% { transform: scale(0.97); }
}
@keyframes insignia-atencion {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.35); }
}
.notificacion-carrito { position: fixed; top: 1rem; left: 50%; z-index: 20; transform: translateX(-50%); max-width: calc(100% - 2rem); padding: 12px 20px; border-radius: 6px; background: #2e7d32; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); text-align: center; }

/* Modal Carrito */
.hidden { display: none !important; }
.carrito-modal { position: fixed; top:0; left:0; z-index: 30; width:100%; height:100%; background: rgba(20, 30, 25, 0.62); backdrop-filter: blur(5px); display:flex; justify-content:flex-end; animation: aparecer-fondo 180ms ease-out; }
.carrito-contenido { display: flex; flex-direction: column; background: #fbfcfb; width: 100%; max-width: 500px; height: 100%; padding: 30px; box-sizing: border-box; overflow-y: auto; box-shadow: -16px 0 48px rgba(0,0,0,0.2); animation: entrar-carrito 240ms ease-out; }
.carrito-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #e6ece7; }
.carrito-acciones-cabecera { display: flex; align-items: center; gap: 10px; }
.carrito-etiqueta { margin: 0 0 5px; color: #2e7d32; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.carrito-cabecera h2 { margin: 0; color: #202923; font-size: 1.8rem; letter-spacing: -0.03em; }
.carrito-cantidad-resumen { display: inline-block; margin-top: 5px; color: #748077; font-size: 0.88rem; }
.btn-vaciar-carrito { padding: 8px 10px; border-radius: 7px; background: transparent; color: #a33a36; font-size: 0.82rem; }
.btn-vaciar-carrito:hover { background: #fff1f0; opacity: 1; }
.btn-cerrar-carrito { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 1px solid #e4e9e5; border-radius: 50%; background: #fff; color: #344139; font-size: 1.7rem; line-height: 1; }
.btn-cerrar-carrito:hover { background: #eaf0eb; opacity: 1; }
.carrito-lista-contenedor { position: relative; }
#carrito-items { max-height: 36vh; overflow-y: auto; padding: 8px 4px 8px 0; scrollbar-color: #c8d7ca transparent; scrollbar-width: thin; }
.carrito-lista-contenedor.hay-mas-productos::after { position: absolute; right: 0; bottom: 0; left: 0; height: 58px; background: linear-gradient(transparent, #fbfcfb 82%); content: ""; pointer-events: none; }
.carrito-scroll-indicador { display: none; position: absolute; right: 8px; bottom: 8px; left: 0; z-index: 1; color: #347340; font-size: 0.8rem; font-weight: 750; text-align: center; pointer-events: none; }
.carrito-lista-contenedor.hay-mas-productos .carrito-scroll-indicador { display: block; animation: indicar-scroll 1.5s ease-in-out infinite; }
@keyframes indicar-scroll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.item-carrito { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 8px 0; padding: 15px 14px; border: 1px solid #e8eee8; border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(38, 65, 43, 0.035); }
.item-carrito-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.item-carrito-info strong { color: #29332c; font-size: 0.97rem; line-height: 1.35; overflow-wrap: anywhere; }
.item-carrito-info span { color: #778078; font-size: 0.84rem; }
.item-carrito-info .item-carrito-subtotal { margin-top: 3px; color: #2e7d32; font-size: 0.96rem; font-weight: 800; }
.controles-cantidad { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.controles-cantidad > span { min-width: 1.25rem; color: #354238; text-align: center; font-weight: 750; }
.btn-cantidad { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #dce5dd; border-radius: 50%; background: #f5f8f5; color: #2e7d32; font-size: 1.1rem; }
.btn-cantidad:hover { background: #e7f3e8; opacity: 1; }
.btn-eliminar-producto { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #f0d5d3; border-radius: 50%; background: #fff7f6; color: #b33c37; font-size: 1.2rem; }
.btn-eliminar-producto:hover { background: #ffe9e7; opacity: 1; }
.carrito-vacio { margin: 18px 0; padding: 32px 18px; border: 1px dashed #d6e1d7; border-radius: 12px; background: #f5f8f5; color: #6c776e; text-align: center; line-height: 1.7; }
.carrito-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 22px; padding: 17px 18px; border: 1px solid #d9e9db; border-radius: 11px; background: #eff7ef; color: #435047; }
.carrito-total-detalle { display: grid; width: 100%; gap: 8px; }
.carrito-total-detalle > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.carrito-total-detalle strong { color: #435047; font-size: 1rem; }
.carrito-total-detalle .carrito-total-final { margin-top: 4px; padding-top: 10px; border-top: 1px solid #d9e9db; font-weight: 750; }
.carrito-total-detalle .carrito-total-final strong { color: #287a38; font-size: 1.65rem; letter-spacing: -0.025em; }
#form-pedido { gap: 10px; padding: 20px; border: 1px solid #e8eee8; border-radius: 12px; background: #fff; }
#form-pedido h3 { margin: 0 0 4px; color: #29332c; font-size: 1.12rem; }
#form-pedido label { margin-top: 4px; color: #49544b; font-size: 0.88rem; font-weight: 650; }
#form-pedido input, #form-pedido select { width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid #d8e0d9; border-radius: 8px; background: #fff; color: #29332c; font: inherit; }
#form-pedido input:focus, #form-pedido select:focus { outline: 2px solid rgba(46,125,50,0.2); border-color: #2e7d32; }
.sin-zonas-envio { margin: 0; padding: 11px 13px; border: 1px solid #f0d5d3; border-radius: 8px; background: #fff7f6; color: #a33a36; font-size: 0.88rem; line-height: 1.5; }
#form-pedido .btn-enviar { margin-top: 8px; padding: 14px; border-radius: 8px; background: #218c4b; font-size: 0.98rem; }
#form-pedido .btn-enviar:hover { background: #18753c; opacity: 1; }

@keyframes aparecer-fondo {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes entrar-carrito {
    from { transform: translateX(24px); opacity: 0.7; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 480px) {
    .header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
    .header h1 { grid-column: 2; grid-row: 1; }
    .header .btn-elegir-zona { grid-column: 1; grid-row: 2; justify-self: start; }
    .header .btn-iniciar-sesion { grid-column: 2; grid-row: 2; justify-self: end; }
    .login-page { padding: 16px; }
    .login-card { min-height: 0; padding: 30px 24px; border-radius: 16px; }
    .login-volver { margin-bottom: 32px; }
    .carrito-contenido { max-width: none; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); }
    .carrito-cabecera h2 { font-size: 1.55rem; }
    #carrito-items { max-height: 32vh; }
    #form-pedido { padding: 16px; }
    .header { min-height: 64px; }
    .logo { height: 44px; max-width: 110px; }
    .portada-tienda { margin-top: 0.75rem; padding: 0 0.75rem; }
    .portada-tienda img { height: clamp(150px, 42vw, 240px); border-radius: 12px; }
    .btn-iniciar-sesion { padding: 8px 10px; font-size: 0.8rem; }
    #btn-ver-carrito { right: 1rem; bottom: 1rem; padding: 12px 15px; }
    .catalogo-filtros { grid-template-columns: 1fr; padding: 11px; }
    .producto-card { border-radius: 12px; }
    .producto-card h3 { font-size: 0.95rem; }
    .desc { font-size: 0.82rem; }
    .precio { margin: 13px 0 11px; font-size: 1.2rem; }
    .btn-agregar { padding: 10px 8px; font-size: 0.84rem; }
    .btn-ver-detalle { padding: 9px 8px; font-size: 0.84rem; }
    .modal-detalle-producto { padding: 12px; }
    .detalle-producto-contenido { max-height: 94vh; padding: 18px; border-radius: 14px; }
}

.header h1,
.catalogo-intro p,
.precio,
.detalle-producto-contenido .precio,
.carrito-etiqueta,
.carrito-scroll-indicador,
.item-carrito-info .item-carrito-subtotal,
.btn-cantidad { color: var(--color-principal); }
.btn-iniciar-sesion,
.btn-elegir-zona,
.limpiar-filtros,
.btn-ver-detalle { border-color: color-mix(in srgb, var(--color-principal), white 78%); background: color-mix(in srgb, var(--color-principal), white 93%); color: var(--color-principal); }
.btn-iniciar-sesion:hover,
.btn-elegir-zona:hover,
.limpiar-filtros:hover,
.btn-ver-detalle:hover,
.btn-cantidad:hover { border-color: color-mix(in srgb, var(--color-principal), white 60%); background: color-mix(in srgb, var(--color-principal), white 88%); }
.modal-zona-contenido button,
.btn-agregar,
#btn-ver-carrito,
#form-pedido .btn-enviar { background: var(--color-principal); color: var(--color-principal-texto, #fff); }
.notificacion-carrito { background: var(--color-principal); color: var(--color-principal-texto, #fff); }
.btn-agregar:hover,
#form-pedido .btn-enviar:hover,
.modal-zona-contenido button:hover { background: color-mix(in srgb, var(--color-principal), black 15%); }
.badge { background: color-mix(in srgb, var(--color-principal), white 90%); color: var(--color-principal); }
.catalogo-filtros input:focus,
.catalogo-filtros select:focus,
.selector-presentacion:focus,
.selector-cantidad input:focus,
#form-pedido input:focus,
#form-pedido select:focus { outline-color: color-mix(in srgb, var(--color-principal), transparent 80%); border-color: var(--color-principal); }
.carrito-total { border-color: color-mix(in srgb, var(--color-principal), white 78%); background: color-mix(in srgb, var(--color-principal), white 94%); }
.carrito-total-detalle .carrito-total-final strong { color: var(--color-principal); }
#btn-ver-carrito { background-image: none; }
#btn-ver-carrito { box-shadow: 0 7px 20px color-mix(in srgb, var(--color-principal), transparent 66%); }
#btn-ver-carrito:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--color-principal), transparent 60%); }
.admin-container form input[type="color"] { width: 72px; height: 44px; padding: 4px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .carrito-modal, .carrito-contenido, .modal-detalle-producto, #btn-ver-carrito.carrito-atencion, #btn-ver-carrito.carrito-atencion .carrito-insignia, .carrito-lista-contenedor.hay-mas-productos .carrito-scroll-indicador { animation: none; }
}

/* Admin */
.admin-container { box-sizing: border-box; max-width: 1320px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem); }
.admin-encabezado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.admin-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.admin-menu { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #e7ede7; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(38, 65, 43, 0.06); }
.admin-menu-titulo { margin: 3px 10px 7px; color: #879189; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; }
.admin-menu-enlace { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 11px; border-radius: 8px; color: #536257; font-size: 0.92rem; font-weight: 700; text-decoration: none; transition: background 150ms ease, color 150ms ease; }
.admin-menu-enlace > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: #f2f6f2; color: #617366; font-size: 1rem; }
.admin-menu-enlace:hover { background: #f5f8f5; color: #287a38; }
.admin-menu-enlace.activo { background: #eaf4eb; color: #287a38; }
.admin-menu-enlace.activo > span { background: #dceedd; color: #287a38; }
.admin-modulo { min-width: 0; }
.admin-modulo-encabezado { margin: 0 0 1rem; }
.admin-modulo-encabezado .admin-etiqueta { margin-bottom: 3px; }
.admin-modulo-encabezado h2 { margin: 0; color: #26332a; font-size: 1.65rem; letter-spacing: -0.03em; }
.admin-modulo > .card { margin-bottom: 1.25rem; }
.admin-encabezado h1 { margin: 0; color: #26332a; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.04em; }
.admin-etiqueta { margin: 0 0 0.35rem; color: #398248; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; }
.admin-acciones { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.admin-negocio { padding: 9px 14px; border: 1px solid #dce9dd; border-radius: 999px; background: #eff7ef; color: #347340; font-size: 0.9rem; font-weight: 700; }
.btn-ver-catalogo, .btn-cerrar-sesion { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; box-sizing: border-box; padding: 9px 13px; border: 0; border-radius: 8px; color: #fff; font-size: 0.88rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.btn-ver-catalogo { background: #344b39; }
.btn-ver-catalogo:hover { background: #263a2b; }
.form-cerrar-sesion { margin: 0; }
.form-cerrar-sesion .btn-cerrar-sesion { background: #bd4540; }
.form-cerrar-sesion .btn-cerrar-sesion:hover { background: #a53a36; opacity: 1; }
.notificacion-admin { margin: 0 0 1.5rem; padding: 13px 16px; border: 1px solid #cde5cf; border-radius: 9px; background: #eff8f0; color: #28733a; font-weight: 700; box-shadow: 0 3px 10px rgba(38, 65, 43, 0.05); }
.notificacion-error { border-color: #f0cccc; background: #fff3f2; color: #a8322c; }
.popup-guardado { width: min(420px, calc(100% - 2rem)); box-sizing: border-box; padding: 30px; border: 1px solid #dce9dd; border-radius: 18px; background: #fff; color: #29372d; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.24); }
.popup-guardado::backdrop { background: rgba(20,30,25,0.62); backdrop-filter: blur(3px); }
.popup-guardado-icono { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: #eaf4eb; color: #2e914b; font-size: 2rem; font-weight: 800; }
.popup-guardado h2 { margin: 0; color: #29372d; font-size: 1.35rem; }
.popup-guardado p { margin: 10px 0 22px; color: #68766c; line-height: 1.5; }
.popup-guardado form { align-items: center; }
.popup-guardado form button { min-width: 130px; min-height: 42px; border-radius: 8px; background: #2e914b; }
.popup-guardado form button:hover { background: #267940; }
.card { padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid #e7ede7; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(38, 65, 43, 0.06); margin-bottom: 1.5rem; }
.card[hidden] { display: none !important; }
.card h2 { margin: 0 0 1.25rem; color: #29372d; font-size: 1.3rem; letter-spacing: -0.02em; }
.panel-cargar-producto-encabezado, .inventario-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-cargar-producto-encabezado { margin-bottom: 1.25rem; }
.panel-cargar-producto-encabezado h2, .inventario-encabezado h2 { margin: 0; }
.inventario-encabezado { margin-bottom: 1.25rem; }
.btn-abrir-panel-producto { flex-shrink: 0; min-height: 42px; padding: 10px 15px; border-radius: 8px; background: #2e914b; color: #fff; font-weight: 700; }
.btn-abrir-panel-producto:hover { background: #267940; }
.panel-cargar-producto-cerrar { flex-shrink: 0; }
form { display: flex; flex-direction: column; gap: 10px; }
input, textarea, select { padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.admin-container form:not(.buscador) { gap: 12px; }
.admin-container form input:not([type="checkbox"]):not([type="file"]), .admin-container form textarea, .admin-container form select, .buscador input { width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid #d8e0d9; border-radius: 8px; background: #fff; color: #29332c; font: inherit; }
.admin-container form textarea { min-height: 96px; resize: vertical; }
.admin-container form input:focus, .admin-container form textarea:focus, .buscador input:focus { outline: 2px solid rgba(46,125,50,0.18); border-color: #398248; }
.admin-container form input[type="file"] { width: 100%; box-sizing: border-box; padding: 10px; border: 1px dashed #bdcdbf; border-radius: 8px; background: #f8faf8; }
.portada-configuracion { overflow: hidden; max-width: 620px; border: 1px solid #dce5dd; border-radius: 10px; background: #f7f9f7; }
.portada-configuracion img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.opcion-eliminar-portada { display: flex; align-items: center; gap: 7px; }
.opcion-eliminar-portada input { flex: 0 0 auto; }
.admin-container form input[type="checkbox"] { width: 17px; height: 17px; margin: 0 7px 0 0; accent-color: #2e7d32; vertical-align: middle; }
.admin-container form label { color: #46534a; font-size: 0.9rem; font-weight: 650; }
.admin-container form button, .card-importacion form button { align-self: flex-start; min-height: 42px; padding: 11px 18px; border-radius: 8px; background: #2e914b; }
.admin-container form button:hover, .card-importacion form button:hover { background: #267940; opacity: 1; }
.imagen-opciones { margin: 4px 0; padding: 16px; border: 1px solid #dce8dd; border-radius: 12px; background: #f8faf8; }
.imagen-opciones p { margin: 0 0 10px; color: #435047; }
.imagenes-opciones-encabezado h3 { margin: 0 0 5px; color: #29372d; font-size: 1rem; }
.imagenes-opciones-encabezado h3 span { color: #718077; font-size: 0.82rem; font-weight: 500; }
.imagenes-opciones-encabezado p { margin: 0 0 14px; color: #68766c; font-size: 0.86rem; line-height: 1.45; }
.imagenes-posiciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.imagen-posicion { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid #e0e9e1; border-radius: 10px; background: #fff; }
.imagen-posicion-cabecera { display: flex; align-items: center; gap: 7px; color: #35483a; font-size: 0.82rem; }
.imagen-posicion-numero { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e8f3e9; color: #347340; font-size: 0.75rem; font-weight: 800; }
.imagen-posicion-vista { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px dashed #ccd9ce; border-radius: 8px; background: #f7f9f7; color: #879189; font-size: 0.75rem; text-align: center; }
.imagen-posicion-vista img { display: block; width: 100%; height: 100%; object-fit: contain; }
.imagen-posicion > label { margin-top: 2px; color: #526057; font-size: 0.76rem; font-weight: 650; }
.imagen-posicion input[type="file"] { padding: 7px !important; font-size: 0.74rem !important; }
.imagen-posicion input[type="url"] { padding: 8px !important; font-size: 0.76rem !important; }
.imagen-separador { padding: 7px 0; color: #879189 !important; text-align: center; }
.buscador { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.buscador input { flex: 1; min-width: 0; }
.buscador button { flex-shrink: 0; min-height: 44px; border-radius: 8px; background: #344b39; }
.buscador button:hover { background: #263a2b; opacity: 1; }
.link-limpiar { flex-shrink: 0; color: #526357; font-size: 0.9rem; font-weight: 650; text-decoration: none; }
.link-limpiar:hover { color: #2e7d32; text-decoration: underline; }
.tabla-contenedor { overflow-x: auto; border: 1px solid #e5ebe5; border-radius: 10px; }
.tabla-con-scroll-vertical { max-height: 60vh; overflow: auto; overscroll-behavior: contain; scrollbar-color: #c8d7ca #f5f8f5; scrollbar-width: thin; }
.tabla-con-scroll-vertical thead th { position: sticky; top: 0; z-index: 2; }
.tabla-productos { width: 100%; min-width: 760px; border-collapse: collapse; }
.tabla-pedidos { width: 100%; min-width: 900px; border-collapse: collapse; }
.tabla-pedidos th, .tabla-pedidos td { padding: 12px 14px; border-bottom: 1px solid #edf0ed; text-align: left; vertical-align: top; }
.tabla-pedidos th { background: #f5f8f5; color: #526057; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tabla-pedidos tbody tr:last-child td { border-bottom: 0; }
.resumen-ventas-ayuda { margin: -0.5rem 0 1rem; color: #68766c; }
.form-resumen-ventas { display: flex; flex-direction: row; flex-wrap: wrap; align-items: end; gap: 12px !important; }
.resumen-ventas-campo { display: flex; min-width: 150px; flex: 0 1 190px; flex-direction: column; gap: 5px; }
.resumen-ventas-campo label { color: #46534a; font-size: 0.9rem; font-weight: 650; }
.form-resumen-ventas .btn-presupuesto { min-height: 42px; align-self: end; }
.reportes-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.reporte-indicador { display: flex; min-width: 0; flex-direction: column; gap: 8px; padding: 1.25rem; border: 1px solid #dce9dd; border-radius: 14px; background: linear-gradient(145deg, #fff, #f5faf5); box-shadow: 0 4px 16px rgba(38, 65, 43, 0.05); }
.reporte-indicador > span { color: #68766c; font-size: 0.9rem; font-weight: 650; }
.reporte-indicador small { font-size: 0.78rem; font-weight: 500; }
.reporte-indicador strong { overflow-wrap: anywhere; color: #287a38; font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.tabla-reportes { width: 100%; min-width: 540px; border-collapse: collapse; }
.tabla-reportes th, .tabla-reportes td { padding: 12px 14px; border-bottom: 1px solid #edf0ed; text-align: left; vertical-align: middle; }
.tabla-reportes th { background: #f5f8f5; color: #526057; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tabla-reportes tbody tr:last-child td { border-bottom: 0; }
.reporte-grafico { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 2.5rem); margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid #e7ede7; border-radius: 12px; background: #fbfdfb; }
.grafico-torta { display: grid; width: 100%; max-width: 220px; aspect-ratio: 1; place-items: center; justify-self: center; }
.grafico-torta-circulo { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--grafico-torta); box-shadow: inset 0 0 0 1px rgba(38, 65, 43, 0.08), 0 6px 18px rgba(38, 65, 43, 0.1); }
.grafico-leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 9px 18px; margin: 0; padding: 0; list-style: none; }
.grafico-leyenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; color: #526057; font-size: 0.88rem; }
.grafico-leyenda li > span:nth-child(2) { overflow-wrap: anywhere; }
.grafico-leyenda li strong { color: #29372d; font-variant-numeric: tabular-nums; }
.grafico-leyenda-color { width: 11px; height: 11px; border-radius: 3px; background: var(--grafico-color); }
.form-crear-medio-pago { max-width: 520px; }
.tabla-medios-pago { width: 100%; min-width: 500px; border-collapse: collapse; }
.tabla-medios-pago th, .tabla-medios-pago td { padding: 12px 14px; border-bottom: 1px solid #edf0ed; text-align: left; vertical-align: middle; }
.tabla-medios-pago th { background: #f5f8f5; color: #526057; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tabla-medios-pago tbody tr:last-child td { border-bottom: 0; }
.tabla-medios-pago td form { margin: 0; }
.form-editar-medio-pago { display: grid; grid-template-columns: minmax(140px, 1fr) auto; align-items: center; gap: 8px !important; }
.form-editar-medio-pago input { min-width: 0; }
.form-editar-medio-pago .btn-editar { min-height: 40px; }
.tabla-medios-pago .btn-eliminar { margin: 0; }
.tabla-medios-pago .btn-eliminar:disabled { background: #9ba39d; cursor: not-allowed; opacity: 0.7; }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.notificacion-stock-bajo { border-color: #f0d7a8; background: #fff8e9; color: #805a12; }
.tabla-zonas { width: 100%; min-width: 620px; border-collapse: collapse; }
.tabla-zonas th, .tabla-zonas td { padding: 12px 14px; border-bottom: 1px solid #edf0ed; text-align: left; vertical-align: middle; }
.tabla-zonas th { background: #f5f8f5; color: #526057; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tabla-zonas tbody tr:last-child td { border-bottom: 0; }
.form-crear-zona { max-width: 520px; margin-bottom: 1.25rem; }
.form-editar-zona { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.75fr) minmax(110px, 0.75fr) auto; align-items: end; gap: 8px !important; }
.form-editar-zona input { min-width: 0; }
.form-editar-zona .btn-editar { min-height: 40px; align-self: end; }
.zona-campo-edicion { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.zona-campo-edicion label { color: #68766c; font-size: 0.75rem !important; }
.form-estado-zona { margin: 0; }
.acciones-zona { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acciones-zona .btn-eliminar { margin-left: 0; }
.estado-zona { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 750; }
.zona-activa { background: #eaf4eb; color: #347340; }
.zona-inactiva { background: #f2f3f2; color: #68766c; }
.pedido-fecha { color: #718077; font-size: 0.85rem; }
.btn-presupuesto { display: inline-block; padding: 8px 11px; border: 0; border-radius: 7px; background: #317a9b; color: white; font: inherit; font-size: 0.82rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-presupuesto:hover { background: #286783; }
.tabla-productos th, .tabla-productos td { padding: 12px 14px; border-bottom: 1px solid #edf0ed; text-align: left; }
.tabla-productos th { background: #f5f8f5; color: #526057; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tabla-productos tbody tr:last-child td { border-bottom: 0; }
.tabla-productos tbody tr:hover { background: #fafcfb; }
.tabla-productos img { display: block; width: 54px; height: 54px; object-fit: contain; border: 1px solid #edf0ed; border-radius: 8px; background: #f7f9f7; }
.miniaturas-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.miniaturas-admin img { width: 64px; height: 64px; object-fit: contain; border: 1px solid #dce5dd; border-radius: 8px; background: #fff; }
.miniatura-posicion { display: flex; align-items: center; flex-direction: column; gap: 4px; color: #68766c; font-size: 0.7rem; }
.miniatura-posicion img { display: block; width: 64px; height: 64px; object-fit: contain; border: 1px solid #dce5dd; border-radius: 8px; background: #fff; }
.tabla-vacia { padding: 2rem !important; color: #718077; text-align: center !important; }
.btn-stock { padding: 7px 10px; border-radius: 999px; border: none; cursor: pointer; color: white; font-size: 0.78rem; font-weight: 750; white-space: nowrap; }
.btn-stock.con-stock { background-color: #2e7d32; }
.btn-stock.sin-stock { background-color: #c62828; }
.btn-editar, .btn-eliminar { display: inline-block; padding: 8px 10px; border: 0; border-radius: 7px; color: white; text-decoration: none; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.btn-editar { background-color: #317a9b; }
.btn-eliminar { margin-left: 5px; background-color: #bd4540; }
.producto-acciones { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.producto-acciones .btn-eliminar { margin-left: 0; }
.btn-editar:hover, .btn-eliminar:hover { filter: brightness(0.92); opacity: 1; }
.card-importacion { box-sizing: border-box; max-width: 1320px; margin: 0 auto 2rem; }
.ayuda-importacion { color: #68766c; font-size: 0.92rem; line-height: 1.65; }
.ayuda-importacion code { display: inline-block; margin-top: 5px; padding: 5px 8px; border-radius: 5px; background: #f2f6f2; color: #425248; }
.btn-exportar { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; box-sizing: border-box; padding: 11px 18px; border-radius: 8px; background: #344b39; color: #fff; font-weight: 700; text-decoration: none; }
.btn-exportar:hover { background: #293b2d; }
.mensaje-exito { padding: 12px 14px; border: 1px solid #cde5cf; border-radius: 8px; background: #eff8f0; color: #28733a; font-weight: 700; }
.card-importacion input[type="file"] { width: 100%; box-sizing: border-box; padding: 10px; border: 1px dashed #bdcdbf; border-radius: 8px; background: #f8faf8; }
.modal { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: 100%; padding: 1rem; box-sizing: border-box; background: rgba(20,30,25,0.58); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: center; }
.modal-content { position: relative; background: white; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid #e7ede7; border-radius: 14px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 18px 50px rgba(0,0,0,0.2); }
.modal-editar-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1rem; }
.modal-content .modal-editar-cabecera h2 { margin: 0; padding-right: 38px; color: #29372d; }
.modal-editar-cerrar { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e2e9e3; border-radius: 50%; background: #f5f8f5; color: #526057; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.modal-editar-cerrar:hover { background: #e8f0e9; color: #26332a; }
.modal-content form button { border-radius: 8px; }
.modal-content form .btn-cancelar { background: #647067; }
.modal-content form .btn-cancelar:hover { background: #4f5b52; opacity: 1; }
.presentaciones-editor { padding: 14px; border: 1px solid #dce9dd; border-radius: 10px; background: #f8faf8; }
.presentaciones-editor-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.presentaciones-editor-cabecera h3 { margin: 0; color: #29372d; font-size: 1rem; }
.presentaciones-editor-cabecera p { margin: 5px 0 0; color: #68766c; font-size: 0.84rem; line-height: 1.5; }
.presentaciones-editor .btn-agregar-presentacion { flex-shrink: 0; padding: 9px 12px; border-radius: 7px; background: #344b39; font-size: 0.82rem; }
.fila-presentacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 0.65fr) auto; align-items: center; gap: 8px; margin-top: 10px; }
.fila-presentacion input { min-width: 0; }
.fila-presentacion .btn-quitar-presentacion { width: 38px; height: 38px; padding: 0; border-radius: 7px; background: #bd4540; font-size: 1.3rem; }
@media (max-width: 540px) {
    .presentaciones-editor-cabecera { align-items: flex-start; flex-direction: column; }
    .fila-presentacion { grid-template-columns: minmax(0, 1fr) minmax(100px, 0.75fr) auto; }
}

@media (max-width: 640px) {
    .imagenes-posiciones { grid-template-columns: 1fr; }
    .imagen-posicion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; }
    .imagen-posicion-cabecera, .imagen-posicion-vista { grid-column: 1 / -1; }
    .imagen-posicion > label { margin-top: 0; }
    .form-resumen-ventas { align-items: stretch; flex-direction: column; }
    .resumen-ventas-campo { flex-basis: auto; }
    .form-resumen-ventas .btn-presupuesto { align-self: flex-start; }
    .reportes-resumen { grid-template-columns: 1fr; gap: 0.75rem; }
    .reporte-grafico { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .grafico-torta { width: min(100%, 220px); }
    .admin-encabezado { align-items: flex-start; flex-direction: column; }
    .admin-acciones { justify-content: flex-start; }
    .admin-negocio { flex-basis: 100%; width: fit-content; }
    .buscador { flex-wrap: wrap; }
    .buscador input { flex-basis: 100%; }
    .card-importacion { margin-right: 1rem; margin-left: 1rem; }
    .form-editar-zona { grid-template-columns: minmax(120px, 1fr) minmax(100px, 0.8fr); }
    .form-editar-zona .btn-editar { grid-column: 1 / -1; }
    .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .admin-menu { position: static; flex-direction: row; overflow-x: auto; padding: 8px; scrollbar-width: thin; }
    .admin-menu-titulo { display: none; }
    .admin-menu-enlace { flex: 0 0 auto; min-height: 40px; padding: 0 10px; }
    .admin-menu-enlace > span { display: none; }
}