/* =============================================================================
   JennyVentas · estilos de la aplicación (sobre Bootstrap 5.3)
   ============================================================================= */

:root,
[data-bs-theme="light"] {
    --jv-fondo: #fbf6f8;
    --jv-tarjeta: #ffffff;
    --jv-borde: #f0e3e9;
    --jv-texto: #2a1f25;
    --jv-suave: #8a7a82;
    --jv-rosa: #e2456f;
    --jv-rosa-claro: #fde8ef;
    --jv-rosa-texto: #c23360;
    --jv-verde: #16a34a;
    --jv-verde-claro: #e3f6ea;
    --jv-ambar: #d97706;
    --jv-ambar-claro: #fdf1dc;
    --jv-chip: #f6eff2;
    --jv-sombra: 0 1px 2px rgba(80, 20, 40, .04), 0 6px 18px rgba(80, 20, 40, .06);

    --bs-body-bg: var(--jv-fondo);
    --bs-body-color: var(--jv-texto);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-primary: #e2456f;
    --bs-primary-rgb: 226, 69, 111;
    --bs-border-color: var(--jv-borde);
    --bs-link-color: #c23360;
    --bs-link-color-rgb: 194, 51, 96;
}

[data-bs-theme="dark"] {
    --jv-fondo: #1b1619;
    --jv-tarjeta: #251e22;
    --jv-borde: #3a2f35;
    --jv-texto: #f1e6eb;
    --jv-suave: #ab9aa2;
    --jv-rosa: #f06b92;
    --jv-rosa-claro: #3d2530;
    --jv-rosa-texto: #f59ab5;
    --jv-verde: #4ade80;
    --jv-verde-claro: #1d3326;
    --jv-ambar: #fbbf24;
    --jv-ambar-claro: #3b2f17;
    --jv-chip: #30272c;
    --jv-sombra: 0 1px 2px rgba(0, 0, 0, .3);

    --bs-body-bg: var(--jv-fondo);
    --bs-body-color: var(--jv-texto);
    --bs-primary: #f06b92;
    --bs-primary-rgb: 240, 107, 146;
    --bs-border-color: var(--jv-borde);
    --bs-secondary-bg: #2e262a;
    --bs-tertiary-bg: #2a2226;
    --bs-link-color: #f59ab5;
    --bs-link-color-rgb: 245, 154, 181;
}

body { font-size: .95rem; -webkit-font-smoothing: antialiased; background: var(--jv-fondo); }

.btn { border-radius: 12px; font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--jv-rosa); --bs-btn-border-color: var(--jv-rosa);
    --bs-btn-hover-bg: #cf3a62; --bs-btn-hover-border-color: #cf3a62;
    --bs-btn-active-bg: #b8325a; --bs-btn-active-border-color: #b8325a;
    --bs-btn-disabled-bg: #ee9ab2; --bs-btn-disabled-border-color: #ee9ab2;
}
.btn-suave { background: var(--jv-rosa-claro); color: var(--jv-rosa-texto); border: 0; }
.btn-suave:hover, .btn-suave:active { background: var(--jv-rosa-claro); color: var(--jv-rosa-texto); filter: brightness(.97); }
.form-control, .form-select { border-radius: 12px; border-color: var(--jv-borde); background-color: var(--jv-tarjeta); }
.form-control:focus, .form-select:focus { border-color: var(--jv-rosa); box-shadow: 0 0 0 .2rem rgba(226, 69, 111, .15); }
.form-check-input:checked { background-color: var(--jv-rosa); border-color: var(--jv-rosa); }
.modal-content { border-radius: 20px; border: 1px solid var(--jv-borde); background: var(--jv-tarjeta); }
.dropdown-menu { border-radius: 14px; border-color: var(--jv-borde); box-shadow: var(--jv-sombra); background: var(--jv-tarjeta); }
.text-suave { color: var(--jv-suave) !important; }
.min-w-0 { min-width: 0; }

/* --- Estructura ------------------------------------------------------------------ */

.barra {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--jv-fondo) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--jv-borde);
    padding-top: env(safe-area-inset-top);
}
.barra-interior { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--jv-texto); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.marca img { width: 32px; height: 32px; border-radius: 9px; }
.marca b { color: var(--jv-rosa); font-weight: inherit; }
.barra .marca { margin-right: auto; }

/* Sin señal / cambios por enviar (js/pwa.js) */
.estado-conexion {
    display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 5px 11px;
    font-size: .76rem; font-weight: 700; background: var(--jv-rosa-claro); color: var(--jv-rosa-texto); white-space: nowrap;
}
.estado-conexion.sin-red { background: var(--jv-ambar-claro); color: var(--jv-ambar); }
.por-enviar { color: var(--jv-ambar); font-weight: 600; }

.boton-icono {
    width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: var(--jv-texto);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.boton-icono:hover { background: var(--jv-chip); }

main.contenido { max-width: 760px; margin: 0 auto; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }

/* Menú inferior */
.menu-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--jv-tarjeta); border-top: 1px solid var(--jv-borde);
    padding-bottom: env(safe-area-inset-bottom);
}
.menu-inferior ul { list-style: none; margin: 0 auto; padding: 0; display: flex; max-width: 760px; }
.menu-inferior li { flex: 1; }
.menu-inferior a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px;
    font-size: .7rem; font-weight: 600; color: var(--jv-suave); text-decoration: none;
}
.menu-inferior a i { font-size: 1.3rem; line-height: 1; }
.menu-inferior a.activo { color: var(--jv-rosa); }

/* Botón flotante */
.boton-flotante {
    position: fixed; right: max(16px, calc(50% - 364px)); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 25;
    width: 58px; height: 58px; border-radius: 18px; border: 0;
    background: var(--jv-rosa); color: #fff; font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(226, 69, 111, .35);
    display: flex; align-items: center; justify-content: center;
}
.boton-flotante:active { transform: scale(.96); }

/* --- Componentes ----------------------------------------------------------------- */

.titulo-vista { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.tarjeta { background: var(--jv-tarjeta); border: 1px solid var(--jv-borde); border-radius: 18px; box-shadow: var(--jv-sombra); }

.buscador { position: relative; }
.buscador i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--jv-suave); }
.buscador input { padding-left: 38px; }

/* Filtros (se deslizan) y, al lado, el "Ordenar por" */
.barra-filtros { display: flex; align-items: center; gap: 6px; }
.barra-filtros .filtros { flex: 1; min-width: 0; }
.ordenar {
    flex: none; width: auto; border-radius: 999px; font-size: .82rem; font-weight: 600;
    padding: 6px 28px 6px 12px; background-position: right 10px center; color: var(--jv-texto);
}

.filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
    flex: none; border: 1px solid var(--jv-borde); background: var(--jv-tarjeta); color: var(--jv-texto);
    border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 600;
}
.filtro .numero { color: var(--jv-suave); font-weight: 500; margin-left: 2px; }
.filtro.activo { background: var(--jv-rosa); border-color: var(--jv-rosa); color: #fff; }
.filtro.activo .numero { color: rgba(255, 255, 255, .8); }

/* Selector de lista */
.selector-lista {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: var(--jv-tarjeta); border: 1px solid var(--jv-borde); border-radius: 16px; padding: 10px 14px; color: var(--jv-texto);
}
.selector-lista .icono { width: 38px; height: 38px; border-radius: 12px; background: var(--jv-rosa-claro); color: var(--jv-rosa-texto); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
.selector-lista .nombre { font-weight: 700; }
.selector-lista .detalle { font-size: .8rem; color: var(--jv-suave); }

/* Tarjeta de pedido */
.pedido { padding: 14px; margin-bottom: 10px; border-left: 4px solid var(--jv-borde); }
.pedido.listo { border-left-color: var(--jv-verde); }
.pedido.por-cobrar { border-left-color: var(--jv-ambar); }
.pedido-cabeza { display: flex; align-items: center; gap: 10px; }
.avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: .95rem;
}
.pedido-nombre { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.pedido-detalle { font-size: .78rem; color: var(--jv-suave); }
.pedido-total { margin-left: auto; text-align: right; font-weight: 700; white-space: nowrap; }
.pedido-nota { font-size: .82rem; color: var(--jv-suave); margin-top: 6px; }

.items { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.item {
    border: 1px solid transparent; background: var(--jv-chip); color: var(--jv-texto);
    border-radius: 999px; padding: 6px 12px 6px 9px; font-size: .85rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
}
.item i { font-size: .95rem; color: var(--jv-suave); }
.item .ml { font-size: .68rem; font-weight: 700; color: var(--jv-suave); }
.item.entregado .ml { color: var(--jv-verde); opacity: .8; }
.item .cantidad { background: var(--jv-rosa); color: #fff; border-radius: 999px; padding: 0 6px; font-size: .72rem; font-weight: 700; }
.item.entregado { background: var(--jv-verde-claro); color: var(--jv-verde); }
.item.entregado i { color: var(--jv-verde); }
.item.entregado .cantidad { background: var(--jv-verde); }

.acciones { display: flex; gap: 6px; }
.accion {
    flex: 1; border: 1px solid var(--jv-borde); background: transparent; color: var(--jv-suave);
    border-radius: 12px; padding: 7px 8px; font-size: .8rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.accion.si-entregado { background: var(--jv-verde-claro); color: var(--jv-verde); border-color: transparent; }
.accion.si-pagado { background: var(--jv-verde-claro); color: var(--jv-verde); border-color: transparent; }
.accion.mas { flex: none; width: 40px; }
.acciones > .accion, .acciones > .dropdown { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.acciones > .accion.mas { flex: none; }
.acciones > .dropdown > .accion { width: 100%; }

/* Resumen */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cifra { padding: 14px; }
.cifra .etiqueta { font-size: .78rem; color: var(--jv-suave); font-weight: 600; }
.cifra .valor { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.cifra.rosa .valor { color: var(--jv-rosa-texto); }
.cifra.verde .valor { color: var(--jv-verde); }
.cifra.ambar .valor { color: var(--jv-ambar); }

.fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--jv-borde); color: var(--jv-texto); text-decoration: none; }
.fila:last-child { border-bottom: 0; }
button.fila { width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.fila .principal { font-weight: 600; }
.fila .secundario { font-size: .8rem; color: var(--jv-suave); }
.fila .derecha { margin-left: auto; text-align: right; white-space: nowrap; }
.barrita { height: 6px; border-radius: 3px; background: var(--jv-chip); overflow: hidden; margin-top: 5px; }
.barrita span { display: block; height: 100%; background: var(--jv-verde); border-radius: 3px; }

.vacio { text-align: center; color: var(--jv-suave); padding: 48px 16px; }
.vacio i { font-size: 2.6rem; display: block; margin-bottom: 8px; color: var(--jv-rosa); opacity: .6; }

/* Formulario de pedido: productos para tocar */
.productos-rapidos { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; }
.producto-rapido { border: 1px dashed var(--jv-borde); background: transparent; color: var(--jv-texto); border-radius: 999px; padding: 5px 11px; font-size: .82rem; }
.producto-rapido:active { background: var(--jv-rosa-claro); }
.linea-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--jv-borde); }
.linea-item .nombre { flex: 1; font-weight: 500; min-width: 0; }
.contador { display: inline-flex; align-items: center; border: 1px solid var(--jv-borde); border-radius: 12px; }
.contador button { border: 0; background: transparent; width: 32px; height: 32px; color: var(--jv-texto); }
.contador span { min-width: 22px; text-align: center; font-weight: 700; }

/* Cuadro de stock */
.tabla-stock { --bs-table-bg: transparent; font-size: .88rem; }
.tabla-stock th, .tabla-stock td { padding: 10px 8px; border-color: var(--jv-borde); vertical-align: middle; }
.tabla-stock th:not(:first-child), .tabla-stock td:not(:first-child) { text-align: center; width: 15%; font-variant-numeric: tabular-nums; }
.tabla-stock th:first-child, .tabla-stock td:first-child { padding-left: 14px; }
.tabla-stock thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--jv-suave); font-weight: 700; }
.tabla-stock tfoot th { font-weight: 800; border-bottom: 0; }
.tabla-stock td.libres { color: var(--jv-verde); font-weight: 600; }
.tabla-stock td.faltan { color: var(--jv-suave); }
.tabla-stock tr.falta td { background: color-mix(in srgb, #dc2626 8%, transparent); }
.tabla-stock tr.falta td.faltan { color: #dc2626; font-weight: 800; }
.tabla-stock tr.critico td { background: var(--jv-ambar-claro); }

/* Etiqueta de stock en la lista de aromas */
.etiqueta-stock {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; padding: 5px 6px 5px 11px;
    font-size: .8rem; font-weight: 600; color: #fff; background: var(--jv-verde);
}
.etiqueta-stock .numero {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .78rem;
    color: var(--jv-verde); font-variant-numeric: tabular-nums;
}
.etiqueta-stock.cero { background: var(--jv-suave); }
.etiqueta-stock.cero .numero { color: var(--jv-suave); }
.etiqueta-stock.falta { background: #dc2626; }
.etiqueta-stock.falta .numero { color: #dc2626; }
[data-bs-theme="dark"] .etiqueta-stock { color: #1b1619; }
[data-bs-theme="dark"] .etiqueta-stock .numero { background: #1b1619; }

/* Vitrina: los Home Spray MyMoments (inicio de Pedidos y pantalla de ingreso).
   Tonos de la etiqueta: negro, vidrio ámbar y letras oro rosa. */
.vitrina {
    position: relative; overflow: hidden; border-radius: 22px; margin-bottom: 16px;
    min-height: 150px; padding: 20px 20px 18px; color: #f6ebe3;
    background:
        radial-gradient(90% 120% at 88% 55%, rgba(176, 98, 40, .55) 0%, rgba(176, 98, 40, 0) 60%),
        linear-gradient(135deg, #1d1416 0%, #120d0e 100%);
    box-shadow: 0 10px 30px rgba(40, 18, 10, .25);
}
.vitrina::after {   /* filete fino, como el marco de la etiqueta */
    content: ''; position: absolute; inset: 7px; border: 1px solid rgba(233, 201, 180, .25); border-radius: 16px; pointer-events: none;
}
.vitrina .texto { position: relative; z-index: 2; max-width: 56%; }
.vitrina .logo-mm { display: block; width: 100%; max-width: 165px; height: auto; margin: -4px 0 0 -4px; }
.vitrina .linea { margin-top: 4px; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #c9a58e; }
.vitrina .resumen-vitrina { margin-top: 14px; font-size: .95rem; font-weight: 700; color: #fff; }
.vitrina .resumen-vitrina span { display: block; font-size: .74rem; font-weight: 500; color: #c9a58e; }
.vitrina .frascos { position: absolute; right: 10px; bottom: -4px; width: 44%; height: 100%; z-index: 1; }
.vitrina .frascos img { position: absolute; bottom: 0; height: 74%; width: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)); }
.vitrina .frascos img:nth-child(1) { right: 52%; transform: rotate(-9deg); transform-origin: bottom center; }
.vitrina .frascos img:nth-child(2) { right: 2%; transform: rotate(9deg); transform-origin: bottom center; }
.vitrina .frascos img:nth-child(3) { right: 25%; height: 92%; z-index: 2; }

.vitrina .frascos img[data-foto] { cursor: zoom-in; }

/* Miniatura del frasco en la lista de aromas */
.miniatura { width: 40px; height: 52px; margin: -6px 0; flex: none; cursor: zoom-in; display: flex; align-items: center; justify-content: center; }
.miniatura img { height: 52px; width: auto; filter: drop-shadow(0 3px 4px rgba(60, 25, 10, .35)); transition: transform .15s; }
.miniatura:active img { transform: scale(1.08); }

/* Foto grande: fondo oscuro como la vitrina */
.modal-foto .modal-content {
    position: relative; border: 0; border-radius: 26px; padding: 34px 20px 24px; text-align: center; cursor: zoom-out;
    background: radial-gradient(80% 70% at 50% 45%, #6a3a1c 0%, #1d1416 70%, #120d0e 100%); color: #f6ebe3;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.modal-foto .modal-content::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(233, 201, 180, .25); border-radius: 20px; pointer-events: none; }
.modal-foto .btn-close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.modal-foto img { display: block; margin: 0 auto; max-width: 100%; height: min(62vh, 520px); width: auto; object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.modal-foto .foto-pie { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.modal-foto .logo-mm { width: 120px; height: auto; margin-top: 10px; opacity: .95; }
.logo-mm-ingreso { display: block; width: 130px; height: auto; margin: 0 auto 22px; }
.modal-foto strong { font-size: 1.25rem; font-weight: 700; color: #fff; }
.modal-foto .linea { font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #c9a58e; }
.modal-foto.show ~ .modal-backdrop { opacity: .8; }

/* En el ingreso: solo los frascos, sobre la tarjeta */
.frascos-ingreso { position: relative; height: 150px; margin: -6px auto 10px; width: 220px; }
.frascos-ingreso img { position: absolute; bottom: 0; height: 115px; filter: drop-shadow(0 10px 14px rgba(60, 25, 10, .3)); }
.frascos-ingreso img:nth-child(1) { left: 22px; transform: rotate(-10deg); transform-origin: bottom center; }
.frascos-ingreso img:nth-child(2) { right: 22px; transform: rotate(10deg); transform-origin: bottom center; }
.frascos-ingreso img:nth-child(3) { left: 50%; height: 145px; transform: translateX(-50%); z-index: 2; }

/* Aviso breve */
.aviso-breve {
    position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
    background: #2a1f25; color: #fff; border-radius: 12px; padding: 10px 16px; font-size: .88rem; font-weight: 500;
    opacity: 0; transition: .2s; z-index: 2000; pointer-events: none; max-width: calc(100% - 32px);
}
.aviso-breve.visible { opacity: 1; transform: translate(-50%, 0); }

/* Ingreso */
.pagina-ingreso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.caja-ingreso { width: 100%; max-width: 380px; padding: 28px 24px; }
.caja-ingreso .logo { width: 84px; height: 84px; border-radius: 24px; display: block; margin: 0 auto 14px; box-shadow: 0 10px 30px rgba(226, 69, 111, .3); }
.caja-ingreso h1 { text-align: center; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: 4px; }
.caja-ingreso h1 span { color: var(--jv-rosa); }