body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 0; background-color: #f4f6f4; color: #26332a; }
:root { --color-principal: #2e914b; }
.preloader { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(248, 251, 249, 0.96); color: #536458; opacity: 0; visibility: hidden; }
.preloader[hidden] { display: none; }
html.preloading .preloader { opacity: 1; visibility: visible; }
.preloader-spinner { width: 46px; height: 46px; border: 4px solid #dfe9e2; border-top-color: var(--color-principal); border-radius: 50%; animation: preloader-girar 750ms linear infinite; }
.preloader-texto { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.015em; }
.preloader-admin { background: rgba(243, 247, 252, 0.97); color: #53677e; }
.preloader-admin .preloader-spinner { border-color: #dce6f0; border-top-color: #1769aa; }
@keyframes preloader-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .preloader-spinner { animation-duration: 1.8s; } }
.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; }
.pwa-instalar { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 13px; border: 1px solid #2e914b; border-radius: 8px; background: #fff; color: #267940; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.pwa-instalar:hover { background: #eff7ef; }
.pwa-instalar[hidden] { display: none; }
.login-instalar { width: 100%; margin-top: 14px; }
.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-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.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-cabecera > div > span { display: inline-block; margin-top: 0.45rem; color: #748077; font-size: 0.92rem; }
.btn-compartir-catalogo { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 1px solid #dce9dd; border-radius: 8px; background: #eff7ef; color: #347340; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.btn-compartir-catalogo:hover { border-color: #b9d4bc; background: #e5f2e6; }
.btn-compartir-catalogo:focus-visible { outline: 3px solid rgba(46, 125, 50, 0.3); outline-offset: 2px; }
.btn-compartir-catalogo svg { width: 19px; height: 19px; fill: currentColor; }
.modal-compartir-catalogo { position: fixed; inset: 0; z-index: 80; 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); }
.modal-compartir-contenido { position: relative; width: 100%; max-width: 430px; box-sizing: border-box; padding: 30px; border: 1px solid #e5ebe5; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24); }
.modal-compartir-contenido h2 { margin: 0; padding-right: 35px; color: #26332a; font-size: 1.5rem; }
.modal-compartir-contenido > p:not(.aviso-compartir-instagram) { margin: 9px 0 20px; color: #68766c; line-height: 1.5; }
.modal-compartir-cerrar { position: absolute; top: 16px; right: 16px; 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-compartir-cerrar:hover { background: #e8f0e9; color: #26332a; }
.opciones-compartir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opcion-compartir { display: flex; min-width: 0; min-height: 88px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 12px 8px; border: 1px solid #e5ebe5; border-radius: 12px; background: #fff; color: #26332a; font: inherit; font-size: 0.88rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.opcion-compartir:hover { background: #f5f8f5; opacity: 1; }
.opcion-compartir:focus-visible, .modal-compartir-cerrar:focus-visible { outline: 3px solid rgba(46, 125, 50, 0.3); outline-offset: 2px; }
.opcion-compartir svg { width: 27px; height: 27px; fill: currentColor; }
.opcion-whatsapp { color: #16833c; }
.opcion-facebook { color: #1877f2; }
.opcion-instagram { color: #c13584; }
.aviso-compartir-instagram { margin: 16px 0 0; padding: 11px 12px; border-radius: 8px; background: #fff5fa; color: #8d2d62; font-size: 0.88rem; line-height: 1.45; }
.aviso-compartir-instagram[hidden] { display: none; }
.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-categorias { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.catalogo-grupo-categoria[hidden] { display: none; }
.catalogo-separador-categoria { display: flex; align-items: center; gap: 14px; margin: 0 0 1rem; color: #26332a; font-size: clamp(1.15rem, 2.5vw, 1.45rem); font-weight: 750; letter-spacing: -0.02em; }
.catalogo-separador-categoria::after { height: 1px; flex: 1; background: #dce5dd; content: ""; }
.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 { display: flex; min-width: 0; flex-direction: column; overflow: hidden; padding: 0.9rem; border: 1px solid #e9eee9; border-radius: 15px; background: #fff; box-shadow: 0 5px 17px rgba(38, 65, 43, 0.09); text-align: left; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.producto-card:hover { transform: translateY(-4px); box-shadow: 0 13px 28px rgba(38, 65, 43, 0.16); }
.producto-imagen { display: grid; place-items: center; overflow: hidden; width: 100%; flex: 0 0 auto; 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 { cursor: pointer; }
.producto-card:focus-visible { outline: 3px solid rgba(46, 125, 50, 0.45); outline-offset: 3px; }
.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-info { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 7px; }
.producto-card h3 { margin: 10px 0 0; color: #26332a; font-size: 1.08rem; line-height: 1.4; }
.producto-info .precio-producto { margin: 10px 0 0; font-size: 1.2rem; }
.producto-carrito-ediciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-ver-detalles-producto-carrito { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 15px; border: 0; border-radius: 6px; background: var(--color-principal); color: var(--color-principal-texto, #fff); font: inherit; font-size: 0.9rem; font-weight: 750; cursor: pointer; }
.btn-ver-detalles-producto-carrito:hover { background: color-mix(in srgb, var(--color-principal), black 12%); opacity: 1; }
.btn-ver-detalles-producto-carrito:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-principal), transparent 55%); outline-offset: 2px; }
.btn-ver-detalles-producto-carrito svg { width: 18px; height: 18px; fill: currentColor; }
.promo-badge { display: inline-flex; align-self: flex-start; align-items: center; padding: 5px 9px; border-radius: 999px; background: #c62828; color: #fff; font-size: 0.76rem; font-weight: 850; letter-spacing: 0.04em; line-height: 1.1; box-shadow: 0 3px 9px rgba(159, 24, 24, 0.24); }
.precio-anterior { margin: 0; color: #7d8580; font-size: 0.9rem; font-weight: 600; text-decoration: line-through; }
.producto-info .precio-producto-anterior { margin: 0; font-size: 0.88rem; }
.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; }
.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; }
.control-cantidad-detalle .selector-cantidad button { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #26733a; border-radius: 8px; background: #32854a; color: #fff; font-size: 1.35rem; box-shadow: 0 1px 3px rgba(25, 55, 31, 0.18); }
.control-cantidad-detalle .selector-cantidad button:hover:not(:disabled) { background: #246b38; }
.control-cantidad-detalle .selector-cantidad button:focus-visible { outline: 3px solid rgba(38, 115, 58, 0.35); outline-offset: 2px; }
.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-agregar { width: 100%; margin-top: auto; padding: 12px 15px; border-radius: 8px; background: #2e9f54; transition: background 160ms ease, transform 160ms ease; }
.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-categorias { gap: 1.5rem; }
    .catalogo-separador-categoria { margin-bottom: 0.75rem; }
    .catalogo-grid { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
    .producto-card { display: grid; grid-template-columns: clamp(100px, 31vw, 124px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
    .producto-imagen { width: clamp(100px, 31vw, 124px); border-radius: 7px; }
    .producto-card h3 { font-size: 0.9rem; }
    .producto-info { gap: 5px; }
    .producto-info .precio-producto { margin: 0; font-size: 1.05rem; }
    .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: minmax(0, 1fr); align-items: center; justify-items: center; width: min(1200px, calc(100vw - 16px)); max-width: none; height: min(94vh, 1000px); max-height: none; box-sizing: border-box; padding: clamp(8px, 1.5vw, 20px); overflow: hidden; 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: none; object-fit: contain; grid-column: 1; 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 { position: absolute; top: 50%; 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(25,35,28,0.72); color: #fff; font-size: 2rem; transform: translateY(-50%); }
.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) { left: 12px; }
.visor-imagen-producto > .visor-imagen-navegacion:nth-of-type(3) { right: 12px; }
.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 .precio-anterior { margin: 12px 0 -14px; font-size: 1rem; }
.detalle-producto-contenido .etiqueta-presentacion { display: block; margin-top: 18px; }
.detalle-producto-contenido > .btn-agregar { min-height: 56px; margin-top: 0; padding: 15px 18px; font-size: 1.05rem; }
.control-cantidad-detalle { margin: 0 0 12px; }
.control-cantidad-detalle .selector-cantidad { gap: 8px; padding: 5px; }
.stock-disponible-detalle { margin: 0 0 8px; color: #58665b; font-size: 0.9rem; font-weight: 650; text-align: left; }

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; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 10; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; padding: 11px 18px; border: 0; border-radius: 6px; background: #2e914b; box-shadow: 0 7px 20px color-mix(in srgb, var(--color-principal), transparent 66%); transform: translateX(-50%); transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
#btn-ver-carrito:hover { transform: translate(-50%, -2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--color-principal), transparent 60%); opacity: 1; }
.carrito-boton-contenido { display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-width: 0; }
.carrito-boton-contenido svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
#carrito-total-boton { white-space: nowrap; font-size: 0.96rem; font-weight: 800; }
.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; }
@keyframes carrito-atencion {
    0%, 100% { transform: translateX(-50%) scale(1); }
    35% { transform: translateX(-50%) scale(1.04); }
    65% { transform: translateX(-50%) scale(0.98); }
}
.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; }
.carrito-scroll-indicador { color: #218c4b; }
@keyframes indicar-scroll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.item-carrito { display: flex; flex-direction: column; align-items: stretch; gap: 12px; 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-cuerpo { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.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-descuento-cupon { color: #287a38; }
.carrito-cupon { margin: 14px 0; padding: 14px; border: 1px solid #e2ebe3; border-radius: 10px; background: #f8faf8; }
.carrito-cupon h3 { margin: 0 0 10px; color: #29372d; font-size: 0.98rem; }
.form-cupon-carrito { display: flex; align-items: stretch; gap: 8px; }
#form-cupon-carrito input { flex: 1; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d8e0d9; border-radius: 8px; background: #fff; color: #29332c; font: inherit; text-transform: uppercase; }
#form-cupon-carrito input:focus { outline: 2px solid rgba(46,125,50,0.18); border-color: #398248; }
#form-cupon-carrito button { flex: 0 0 auto; min-height: 42px; padding: 9px 14px; border-radius: 8px; background: var(--color-principal); color: var(--color-principal-texto, #fff); font-weight: 700; }
#form-cupon-carrito button:disabled { cursor: wait; opacity: 0.65; }
#form-cupon-carrito .btn-quitar-cupon { border: 1px solid #dce5dd; background: #fff; color: #526357; }
.estado-cupon-carrito { margin: 9px 0 0; color: #a33a36; font-size: 0.84rem; line-height: 1.4; }
.estado-cupon-carrito:empty { display: none; }
.estado-cupon-carrito.cupon-aplicado { color: #287a38; font-weight: 700; }
.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 .ayuda-entrega { margin: 0; padding: 10px 12px; border: 1px solid #dce9dd; border-radius: 8px; background: #f5faf5; color: #526357; font-size: 0.88rem; }
#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 { min-height: 100vh; min-height: 100svh; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
    .login-card { min-height: 0; padding: 26px 22px; border-radius: 16px; }
    .login-volver { margin-bottom: 22px; }
    .login-descripcion { margin-bottom: 20px; }
    .login-form { gap: 10px; }
    .login-form label { margin-top: 5px; }
    .login-form input { padding: 14px; }
    .login-form button { margin-top: 10px; min-height: 48px; }
    .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 { bottom: max(1rem, env(safe-area-inset-bottom)); padding: 11px 16px; }
    .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 .btn-zona-sin-seleccion { border: 1px solid #d5e0eb; background: #f5f8fb; color: #435b74; }
.modal-zona-contenido .btn-zona-sin-seleccion:hover { background: #eaf1f7; color: #294968; }
.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: var(--color-principal); color: var(--color-principal-texto, #fff); }
.carrito-lista-contenedor .carrito-scroll-indicador { color: #218c4b; }
.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, .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-menu-enlace.activo { position: relative; overflow: hidden; }
.admin-menu-enlace.activo::before { position: absolute; inset: 8px auto 8px 0; width: 3px; border-radius: 0 3px 3px 0; background: currentColor; content: ""; }
.admin-modulo { min-width: 0; }
.admin-modulo-encabezado { margin: 0 0 1rem; }
.admin-modulo-encabezado h2 { margin: 0; color: #26332a; font-size: 1.65rem; letter-spacing: -0.03em; }
.admin-migas { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: #718197; font-size: 0.78rem; font-weight: 650; }
.admin-migas [aria-current="page"] { color: #1769aa; font-weight: 800; }
.admin-migas-separador { color: #a5b2bf; }
.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; flex-direction: row; align-items: center; gap: 10px; margin-bottom: 1rem; padding: 12px; border: 1px solid #e1e9f1; border-radius: 12px; background: #f7fafd; }
.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; }
.variantes-editor { display: flex; flex-direction: column; gap: 12px; margin: 4px 0; padding: 16px; border: 1px solid #dce8dd; border-radius: 12px; background: #f8faf8; }
.variantes-editor-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.variantes-editor-cabecera h3 { margin: 0 0 5px; color: #29372d; font-size: 1rem; }
.variantes-editor-cabecera p { margin: 0; color: #68766c; font-size: 0.86rem; line-height: 1.5; }
.btn-agregar-variante-atributo { flex: 0 0 auto; min-height: 40px; padding: 9px 12px; border-radius: 7px; background: #344b39; color: #fff; font-size: 0.82rem; font-weight: 700; }
.variantes-atributos { display: grid; gap: 8px; }
.variante-atributo { display: grid; grid-template-columns: minmax(100px, 0.65fr) minmax(0, 1.5fr) auto; align-items: center; gap: 8px; }
.variante-atributo input { min-width: 0; }
.btn-quitar-variante-atributo { min-height: 40px; padding: 8px 10px; border: 1px solid #f0c9cb; border-radius: 7px; background: #fff4f4; color: #ae343a; font-size: 0.8rem; font-weight: 700; }
.variantes-tabla-contenedor { max-height: 420px; overflow: auto; border: 1px solid #dce5dd; border-radius: 9px; background: #fff; }
.variantes-tabla { width: 100%; min-width: 460px; border-collapse: collapse; }
.variantes-tabla th, .variantes-tabla td { padding: 9px 10px; border-bottom: 1px solid #edf0ed; text-align: left; vertical-align: middle; }
.variantes-tabla th { position: sticky; top: 0; z-index: 1; background: #f1f6fa; color: #435b74; font-size: 0.75rem; font-weight: 800; }
.variantes-tabla tbody tr:last-child td { border-bottom: 0; }
.variantes-tabla td:first-child { color: #42566d; font-size: 0.86rem; font-weight: 650; }
.variantes-tabla input { width: 120px !important; min-width: 90px !important; padding: 9px !important; }
.variantes-error { margin: 0; padding: 10px 12px; border: 1px solid #f0cccc; border-radius: 8px; background: #fff3f2; color: #a8322c; font-size: 0.88rem; font-weight: 650; }
@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; }
    .variantes-editor-cabecera { flex-direction: column; }
    .variante-atributo { grid-template-columns: minmax(0, 1fr) auto; }
    .variante-atributo input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .variante-atributo button { grid-column: 2; grid-row: 1; }
}

@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-direction: column; align-items: stretch; gap: 9px; padding: 11px; }
    .buscador input,
    .admin-container .buscador select { width: 100%; min-width: 0; flex: 0 0 46px; }
    .admin-container .buscador button { width: 100%; }
    .admin-container .buscador .link-limpiar { align-self: center; margin: 0 auto; padding: 5px 10px; }
    .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; }
    .form-crear-zona {
        max-width: none;
        box-sizing: border-box;
        margin-bottom: 1.5rem;
        padding: 16px;
        border: 1px solid var(--admin-borde);
        border-radius: 12px;
        background: #f7fafd;
    }
    .form-crear-zona button { width: 100%; align-self: stretch !important; }
    .tabla-zonas-contenedor { overflow: visible; border: 0; }
    .tabla-zonas { display: block; min-width: 0; }
    .tabla-zonas thead { display: none; }
    .tabla-zonas tbody { display: grid; gap: 12px; }
    .tabla-zonas tbody tr {
        display: grid;
        gap: 0;
        padding: 12px;
        border: 1px solid var(--admin-borde);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(28, 62, 100, 0.06);
    }
    .tabla-zonas tbody td { display: block; padding: 10px 2px; border-bottom: 1px solid #edf2f7; }
    .tabla-zonas tbody td[colspan="2"] { padding-top: 2px; }
    .form-editar-zona { grid-template-columns: minmax(0, 1fr); gap: 10px !important; }
    .form-editar-zona .btn-editar { grid-column: auto; width: 100%; }
    .zona-campo-edicion { gap: 5px; }
    .zona-campo-edicion label { font-size: 0.8rem !important; }
    .tabla-zonas .zona-estado-celda::before,
    .tabla-zonas .zona-acciones-celda::before {
        display: block;
        margin-bottom: 8px;
        color: #65788e;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .tabla-zonas .zona-estado-celda::before { content: "Estado"; }
    .tabla-zonas .zona-acciones-celda::before { content: "Acciones"; }
    .acciones-zona { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .acciones-zona form,
    .acciones-zona button { width: 100%; box-sizing: border-box; }
    .tabla-zonas tbody tr td:last-child { padding-bottom: 2px; border-bottom: 0; }
    .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}

.admin-container {
    --admin-azul: #1769aa;
    --admin-azul-oscuro: #145588;
    --admin-azul-claro: #eaf3fb;
    --admin-borde: #dce6f0;
    --admin-texto: #192b40;
    --admin-secundario: #65788e;
    max-width: 1440px;
    min-height: 100vh;
    background: #f3f7fc;
    color: var(--admin-texto);
}
.admin-encabezado h1,
.admin-modulo-encabezado h2 { color: var(--admin-texto); }
.admin-etiqueta,
.reporte-indicador strong { color: var(--admin-azul); }
.admin-menu {
    border-color: var(--admin-borde);
    box-shadow: 0 8px 24px rgba(28, 62, 100, 0.07);
}
.admin-menu-titulo { color: #8292a5; }
.admin-menu-enlace { color: #53677e; }
.admin-menu-enlace > span { background: #f0f5fa; color: #5e7893; }
.admin-menu-enlace:hover,
.admin-menu-enlace.activo { background: var(--admin-azul-claro); color: var(--admin-azul-oscuro); }
.admin-menu-enlace.activo > span { background: #d6e8f8; color: var(--admin-azul-oscuro); }
.admin-menu-enlace.activo { background: linear-gradient(90deg, #dcecf9 0%, #edf5fc 100%); }
.admin-migas [aria-current="page"] { color: var(--admin-azul-oscuro); }
.admin-negocio {
    border-color: #cfe0f0;
    background: var(--admin-azul-claro);
    color: var(--admin-azul-oscuro);
}
.btn-ver-catalogo { background: #294968; }
.btn-ver-catalogo:hover { background: #1d3853; }
.admin-container .pwa-instalar { border-color: #b8d2e9; color: var(--admin-azul-oscuro); }
.admin-container .pwa-instalar:hover { background: var(--admin-azul-claro); }
.notificacion-admin {
    border-color: #c9def0;
    background: #eff7fd;
    color: #175c91;
    box-shadow: 0 4px 14px rgba(28, 62, 100, 0.06);
}
.notificacion-admin.notificacion-error { border-color: #f0cccc; background: #fff3f2; color: #a8322c; }
.popup-guardado { border-color: var(--admin-borde); color: var(--admin-texto); }
.popup-guardado::backdrop { background: rgba(15, 35, 57, 0.62); }
.popup-guardado-icono { background: var(--admin-azul-claro); color: var(--admin-azul); }
.popup-guardado h2,
.card h2,
.modal-content .modal-editar-cabecera h2 { color: var(--admin-texto); }
.popup-guardado p,
.resumen-ventas-ayuda { color: var(--admin-secundario); }
.admin-container .card,
.admin-container .reporte-indicador {
    border-color: var(--admin-borde);
    box-shadow: 0 6px 20px rgba(28, 62, 100, 0.055);
}
.admin-container .reporte-indicador { background: linear-gradient(145deg, #fff, #f5f9fd); }
.admin-container form input:not([type="checkbox"]):not([type="file"]),
.admin-container form textarea,
.admin-container form select,
.admin-container .buscador input {
    border-color: #d2deea;
    color: var(--admin-texto);
}
.admin-container form input:focus,
.admin-container form textarea:focus,
.admin-container form select:focus,
.admin-container .buscador input:focus {
    outline: 3px solid rgba(23, 105, 170, 0.14);
    border-color: var(--admin-azul);
}
.admin-container form input[type="file"] { border-color: #b9ccdf; background: #f7fafd; }
.admin-container form input[type="checkbox"] { accent-color: var(--admin-azul); }
.admin-container .buscador input,
.admin-container .buscador select {
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    border-color: #cfdeec;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(28, 62, 100, 0.04);
}
.admin-container .buscador input { flex: 1 1 250px; min-width: 180px; }
.admin-container .buscador select {
    width: auto;
    min-width: 200px;
    flex: 0 1 280px;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23536f89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    appearance: none;
    cursor: pointer;
}
.admin-container .buscador input:focus,
.admin-container .buscador select:focus { outline-offset: 1px; }
.form-editar-categoria { display: grid; grid-template-columns: minmax(160px, 1fr) auto; align-items: center; gap: 8px !important; }
.form-editar-categoria input { min-width: 0; }
.admin-container .form-editar-categoria .btn-editar { margin: 0; }
.admin-container form button:disabled { cursor: not-allowed; opacity: 0.55; }
.admin-container form label,
.resumen-ventas-campo label { color: #42566d; }
.admin-container form button:not(.btn-eliminar):not(.btn-stock),
.admin-container .btn-abrir-panel-producto,
.admin-container .presentaciones-editor .btn-agregar-presentacion,
.admin-container .buscador button {
    background: var(--admin-azul);
}
.admin-container .buscador button { min-height: 46px; padding: 0 20px; border-radius: 10px; font-weight: 750; }
.admin-container .buscador .link-limpiar { padding: 10px 4px; color: var(--admin-azul-oscuro); }
.admin-container form button:not(.btn-eliminar):not(.btn-stock):hover,
.admin-container .btn-abrir-panel-producto:hover,
.admin-container .presentaciones-editor .btn-agregar-presentacion:hover,
.admin-container .buscador button:hover { background: var(--admin-azul-oscuro); opacity: 1; }
.admin-container .btn-presupuesto,
.admin-container .btn-editar { background: var(--admin-azul); }
.admin-container .btn-presupuesto:hover,
.admin-container .btn-editar:hover { background: var(--admin-azul-oscuro); filter: none; }
.admin-container .btn-eliminar,
.admin-container form.form-cerrar-sesion .btn-cerrar-sesion,
.admin-container .fila-presentacion .btn-quitar-presentacion { background: #c44449; }
.admin-container form.form-cerrar-sesion .btn-cerrar-sesion:hover,
.admin-container .fila-presentacion .btn-quitar-presentacion:hover { background: #a9343a; opacity: 1; }
.admin-container .btn-stock.con-stock { background: #2574b8; }
.admin-container .tabla-contenedor { border-color: var(--admin-borde); }
.admin-container .tabla-productos th,
.admin-container .tabla-pedidos th,
.admin-container .tabla-reportes th,
.admin-container .tabla-zonas th,
.admin-container .tabla-medios-pago th {
    background: #edf4fa;
    color: #435b74;
}
.admin-container .tabla-productos td,
.admin-container .tabla-pedidos td,
.admin-container .tabla-reportes td,
.admin-container .tabla-zonas td,
.admin-container .tabla-medios-pago td { border-bottom-color: #e8eef4; }
.admin-container .tabla-con-scroll-vertical { scrollbar-color: #b8cde0 #f1f6fa; }
.admin-container .reportes-resumen .reporte-indicador strong { color: var(--admin-azul-oscuro); }
.admin-container .imagen-opciones,
.admin-container .presentaciones-editor,
.admin-container .variantes-editor { border-color: var(--admin-borde); background: #f7fafd; }
.admin-container .btn-agregar-variante-atributo { background: var(--admin-azul); }
.admin-container .btn-agregar-variante-atributo:hover { background: var(--admin-azul-oscuro); }
.admin-container .variantes-tabla-contenedor { border-color: var(--admin-borde); }
.admin-container .variantes-tabla th { background: #edf4fa; color: #435b74; }
.admin-container .imagen-posicion-numero { background: var(--admin-azul-claro); color: var(--admin-azul-oscuro); }
.admin-container .modal-content { border-color: var(--admin-borde); }
.admin-container .modal-editar-cerrar { border-color: var(--admin-borde); background: #f1f6fa; color: #50677f; }
.admin-container .modal-editar-cerrar:hover { background: #e4eef7; color: var(--admin-texto); }
.login-page { background: radial-gradient(ellipse at top, #e6f1fb 0%, #f3f7fc 55%, #eaf1f8 100%); }
.login-card { border-color: #dce6f0; box-shadow: 0 20px 56px rgba(28, 62, 100, 0.13); }
.login-volver { color: #53677e; }
.login-volver:hover,
.login-etiqueta { color: #1769aa; }
.login-card h1 { color: #192b40; }
.login-descripcion { color: #65788e; }
.login-form label { color: #42566d; }
.login-form input { border-color: #d2deea; color: #192b40; }
.login-form input:focus { outline: 3px solid rgba(23, 105, 170, 0.14); border-color: #1769aa; }
.login-form button { background: #1769aa; }
.login-form button:hover { background: #145588; }
.login-page .pwa-instalar { border-color: #b8d2e9; color: #145588; }
.login-page .pwa-instalar:hover { background: #eaf3fb; }
.admin-menu-toggle,
.admin-menu-fondo { display: none; }
@media (max-width: 640px) {
    body.admin-menu-abierto { overflow: hidden; }
    .admin-menu-toggle {
        position: relative;
        z-index: 78;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 58px;
        margin: 0 0 0.75rem;
        padding: 9px 14px;
        border: 1px solid #d5e2ef;
        border-radius: 14px;
        background: #fff;
        color: #192b40;
        box-shadow: 0 5px 16px rgba(28, 62, 100, 0.07);
        text-align: left;
        cursor: pointer;
    }
    .admin-menu-toggle:focus-visible { outline: 3px solid rgba(23, 105, 170, 0.24); outline-offset: 2px; }
    .admin-menu-hamburguesa { display: flex; width: 24px; flex: 0 0 24px; flex-direction: column; gap: 5px; }
    .admin-menu-hamburguesa span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #1769aa; transition: transform 160ms ease, opacity 160ms ease; }
    .admin-menu-toggle[aria-expanded="true"] .admin-menu-hamburguesa span:first-child { transform: translateY(7px) rotate(45deg); }
    .admin-menu-toggle[aria-expanded="true"] .admin-menu-hamburguesa span:nth-child(2) { opacity: 0; }
    .admin-menu-toggle[aria-expanded="true"] .admin-menu-hamburguesa span:last-child { transform: translateY(-7px) rotate(-45deg); }
    .admin-menu-toggle-texto { color: #53677e; font-size: 0.9rem; font-weight: 700; }
    .admin-menu-fondo:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 79;
        display: block;
        border: 0;
        background: rgba(15, 35, 57, 0.4);
        backdrop-filter: blur(2px);
    }
    .admin-menu {
        position: fixed;
        top: 70px;
        bottom: 12px;
        left: 12px;
        z-index: 80;
        display: flex;
        width: min(84vw, 330px);
        max-height: calc(100vh - 82px);
        box-sizing: border-box;
        flex-direction: column;
        gap: 6px;
        overflow-y: auto;
        padding: 14px 16px 16px;
        border: 1px solid #dce6f0;
        border-radius: 18px;
        background: #fff;
        box-shadow: 12px 18px 36px rgba(16, 43, 69, 0.14);
        transform: translateX(-110%);
        transition: transform 220ms ease;
        visibility: hidden;
    }
    .admin-menu.abierto { transform: translateX(0); visibility: visible; }
    .admin-menu-titulo { display: block; margin: 0 10px 8px; color: #8292a5; }
    .admin-menu-enlace { flex: 0 0 auto; min-height: 48px; padding: 0 12px; }
    .admin-menu-enlace > span { display: grid; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .admin-menu-hamburguesa span,
    .admin-menu { transition: none; }
}
.admin-menu-enlace.activo[href*="zona_peligro"] { background: #fff0f0; color: #a32626; }
.admin-menu-enlace[href*="zona_peligro"] > span { background: #fff0f0; color: #a32626; }
.zona-peligro-intro { border-color: #f0caca; background: #fff8f8; }
.zona-peligro-intro h2,
.zona-peligro-card h2 { color: #8e2525; }
.zona-peligro-card { border-color: #f0d7d7; }
.zona-peligro-card > p { max-width: 760px; color: #5d646d; line-height: 1.65; }
.form-zona-peligro { display: grid; max-width: 540px; gap: 8px; margin-top: 20px; }
.form-zona-peligro label { margin-top: 7px; color: #46566a; font-size: 0.9rem; font-weight: 700; }
.form-zona-peligro input { width: 100%; box-sizing: border-box; }
.form-zona-peligro code { padding: 2px 5px; border-radius: 4px; background: #f7eaea; color: #8e2525; }
.admin-container .form-zona-peligro .btn-accion-destructiva { margin-top: 10px; background: #b52e35; }
.admin-container .form-zona-peligro .btn-accion-destructiva:hover { background: #92242b; }
.qr-tienda-contenido { display: grid; justify-items: center; gap: 12px; }
.qr-tienda-imagen { display: block; width: min(260px, 100%); height: auto; image-rendering: pixelated; }
.qr-tienda-url { max-width: 100%; margin: 0; color: #53677e; font-size: 0.85rem; overflow-wrap: anywhere; text-align: center; }
.admin-container .btn-imprimir-qr-tienda { background: var(--admin-azul); }
.admin-container .btn-imprimir-qr-tienda:disabled { cursor: wait; opacity: 0.6; }
@media print {
    body * { visibility: hidden !important; }
    .card-qr-tienda,
    .card-qr-tienda * { visibility: visible !important; }
    .card-qr-tienda {
        position: absolute !important;
        inset: 0 auto auto 0;
        display: grid;
        width: 100%;
        min-height: 100vh;
        box-sizing: border-box;
        align-content: center;
        justify-items: center;
        border: 0;
        box-shadow: none;
        text-align: center;
    }
    .card-qr-tienda h2 { font-size: 1.8rem; }
    .qr-tienda-imagen { width: min(70vw, 70vh, 360px); }
    #qr-tienda-estado,
    .btn-imprimir-qr-tienda { display: none !important; }
}
@media (max-width: 640px) {
    .form-zona-peligro { max-width: none; }
    .zona-peligro-card { padding: 1rem; }
}