/* =========================================================
   FLEX REPORT - Neo UI (CSS unificado)
   Autor: LR + asistente
   Última edición: 2025-10-02 (ajustes selects, fechas, Mis ventas)
   ========================================================= */

/* ========== 1) RESET + BASE ========== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--neo-bg);
  color:var(--neo-text);
}
.wrap{ max-width:1000px; margin:0 auto; padding:16px }

/* ===== Layout tipo “page-wide” para formularios (encuesta, agenda, etc.) ===== */
.page-wrap{
  max-width:960px;
  margin:0 auto 40px;
}
.title-main{
  text-align:center;
  font-weight:800;
  font-size:22px;
  margin:14px 0 4px;
}
.subtitle{
  text-align:center;
  color:var(--neo-muted,#6b7280);
  font-size:14px;
  margin-bottom:12px;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.layout{
  display:block;
}
@media (min-width:720px){
  .layout{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr);
    gap:20px;
    align-items:flex-start;
  }
}

/* Input “pastilla” reutilizable (cuando uses class="input") */
.input{
  width:100%;
  border:0;
  border-radius:999px;
  padding:9px 14px;
  background:var(--neo-bg,#e5edf6);
  box-shadow:
    inset -6px -6px 12px rgba(255,255,255,.85),
    inset  6px  6px 12px rgba(15,23,42,.12);
  font-size:14px;
}
.input:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(251,146,60,.6);
}

.helper{
  font-size:11px;
  color:var(--neo-muted,#6b7280);
  margin-top:2px;
}

/* Botón principal y texto de ayuda tipo “agenda” */
.btn-main{
  margin:18px auto 0;
  display:block;
  border:0;
  border-radius:999px;
  padding:10px 30px;
  font-weight:700;
  font-size:14px;
  background:linear-gradient(180deg,#ff8a00,#ff6a00);
  color:#fff;
  box-shadow:0 10px 18px rgba(249,115,22,.35);
  cursor:pointer;
}
.btn-main:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}
.btn-tip{
  text-align:center;
  font-size:12px;
  color:#6b7280;
  margin-top:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}
.mensaje{ font-style:italic; font-size:12px; color:#e11d48 }

/* ========== 2) VARIABLES ========== */
:root{
  --neo-bg:#e9edf4;
  --neo-text:#1f2937;
  --neo-muted:#6b7280;

  --neo-hi:rgba(255,255,255,.95);
  --neo-lo:rgba(0,0,0,.10);

  --neo-radius:16px;

  --primary-1:#3b82f6; --primary-2:#2563eb;
  --orange-1:#ff8a00;  --orange-2:#ff6a00;
  --green-1:#22c55e;   --green-2:#16a34a;
  --red-1:#ef4444;     --red-2:#dc2626;

  --sb-w:260px;
  --sb-w-mini:72px;
}

/* ========== 3) LAYOUT SHELL (desktop dock) ========== */

.neo-main-content {
    min-height: calc(100vh - 150px); /* evita que tape el footer */
    padding-bottom: 30px !important;  /* espacio para que el footer respire */
}

.neo .neo-shell{
  display:grid;
  grid-template-columns: var(--sb-w) 1fr;
  min-height:100dvh;
  gap:24px;
  padding:24px;
  background:#eef2f7;
  transition:grid-template-columns .25s ease;
}
.neo .neo-sidebar{
  position:sticky; top:24px; align-self:start;
  background:var(--neo-bg);
  border-radius:24px;
  padding:18px 16px;
  color:var(--neo-text);
  box-shadow:-14px -14px 28px var(--neo-hi), 14px 14px 28px var(--neo-lo);
  overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:12px;
}
body.collapsed{ --sb-w:var(--sb-w-mini) }
body.collapsed .neo .neo-sidebar{ width:var(--sb-w-mini) }
body.collapsed .neo .menu a{ justify-content:center }
body.collapsed .neo .menu a .txt,
body.collapsed .neo .brand .txt{ display:none }

.neo .neo-main{ min-width:0; padding-right:8px }

/* Dimmer (hidden por defecto) */
#sbDim{ display:none }

/* ========== 4) Drawer móvil (overlay) ========== */
@media (max-width:900px){
  .neo .neo-shell{ grid-template-columns:1fr }

  .neo .neo-sidebar{
    position:fixed; left:0; top:0; bottom:0; width:280px;
    transform:translateX(-110%);
    transition:transform .25s ease;
    z-index:1000;
  }
  body.sb-open .neo-sidebar{ transform:translateX(0) }

  body.sb-open #sbDim{
    display:block; position:fixed; inset:0;
    background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
    z-index:900;
  }

  body.collapsed{ --sb-w:280px } /* ignorar colapsado en móvil */
  body.sb-open{ overflow:hidden; touch-action:none }
}

/* ========== 5) TOPBAR FLEXREPORT FIX iPhone SAFE AREA ========== */

/* Variables para altura real del header */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --topbar-h: 30px; /* altura visual del header */
  --topbar-total: calc(var(--safe-top) + var(--topbar-h));
}

/* ===== HEADER OSCURO FIJO ===== */
.topbar{
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index:5000;
  background:#111827;
  color:#fff;

  /* importante: respeta la cámara del iphone */
  padding-top: var(--safe-top);
}

/* Layout interno del header */
.neo .topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:16px;
  padding-right:16px;
  padding-bottom:12px;
}

/* ===== EMPUJA EL CONTENIDO DEBAJO DEL HEADER ===== */
.neo-main{
  padding-top: var(--topbar-total);
}

/* Acciones derecha */
.neo .top-actions{
  margin-left:auto;
  display:flex;
  gap:10px;
}

/* ===== BOTONES BASE (NO TOCAR DISEÑO ORIGINAL) ===== */
.neo .neo-burger,
.neo .neo-iconbtn{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:12px;
  background:var(--neo-bg);
  box-shadow:-8px -8px 18px var(--neo-hi), 8px 8px 18px var(--neo-lo);
}

.neo .neo-burger:active,
.neo .neo-iconbtn:active{
  box-shadow: inset -8px -8px 18px var(--neo-hi), inset 8px 8px 18px var(--neo-lo);
}

/* ===== OVERRIDE BLANCO SOLO EN TOPBAR ===== */
.topbar .neo-burger,
.topbar .neo-iconbtn{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:none !important;
}

.topbar .neo-burger:hover,
.topbar .neo-iconbtn:hover{
  background:#f8fafc !important;
}

.topbar .neo-burger:active,
.topbar .neo-iconbtn:active{
  background:#f3f4f6 !important;
}

.topbar .neo-burger .ico,
.topbar .neo-iconbtn .ico{
  width:20px;
  height:20px;
  color:#111827 !important;
}

.topbar .neo-burger .ico path,
.topbar .neo-iconbtn .ico path{
  stroke: currentColor !important;
}

/* ===== SIDEBAR SOBRE HEADER (overlay correcto) ===== */
@media (max-width:980px){

  .neo-sidebar{
    top:0 !important;
    height:100dvh !important;
    z-index:9000;
    padding-top: var(--safe-top);
  }

  #sbDim{
    z-index:8500;
  }
}
/* ===== FIX SIDEBAR SAFE AREA ===== */
/* Evita que el menú se esconda detrás del header */

.neo-sidebar{
  padding-top: calc(12px + var(--safe-top));
}
/* ===== FIX VISUAL SIDEBAR BAJO HEADER ===== */

.neo-sidebar .menu{
  padding-top: calc(var(--topbar-total) - 40px);
}


/* Chip de usuario */
.top-user{ display:flex; align-items:center; gap:10px; margin-left:4px }
.top-user .avatar{
  width:34px; height:34px; border-radius:999px; object-fit:cover;
  border:1px solid rgba(255,255,255,.25); background:#fff;
}
.top-user .avatar-fallback{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.25); background:#334155; color:#fff; font-weight:800
}
.top-user .name{ font-weight:800; letter-spacing:.2px }

/* Botón Instalar en topbar */
.install-btn{
  display:none; height:42px; padding:0 12px; border-radius:12px; font-weight:700;
  border:1px solid rgba(0,0,0,.08); background:#fff; color:#111827; box-shadow:none;
}
.install-btn.show{ display:inline-flex; align-items:center; gap:8px; text-decoration: none; }

/* Mensajes / badge */
.msg-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center }
.msg-btn .ico{ width:24px; height:24px; color:inherit }
.msg-btn .badge{
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#ef4444; color:#fff;
  font-weight:800; font-size:12px; line-height:20px; text-align:center;
  box-shadow:0 6px 14px rgba(0,0,0,.20);
}
.msg-btn .badge[hidden]{ display:none }
.msg-btn.has-unread{ color:#ff7a00; outline:2px solid rgba(255,122,0,.25); border-radius:10px }
.msg-btn.has-unread .ico{ animation: msgPulse 1.4s ease-in-out infinite }
@keyframes msgPulse{
  0%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(255,122,0,0)) }
  60%{ transform:scale(1.07); filter:drop-shadow(0 0 8px rgba(255,122,0,.45)) }
  100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(255,122,0,0)) }
}

/* ========== 6) SIDEBAR MENU ========== */
.neo .brand{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px; margin-bottom:12px }
.neo .menu{ display:flex; flex-direction:column; gap:12px; margin-top:10px }
.neo .menu a{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--neo-text);
  padding:12px 14px; border-radius:16px; background:var(--neo-bg);
  box-shadow:-8px -8px 18px var(--neo-hi), 8px 8px 18px var(--neo-lo);
}
.neo .menu a .ico{ width:18px; height:18px; opacity:.7 }
.neo .menu a:hover, .neo .menu a:focus-visible{
  box-shadow: inset -8px -8px 18px var(--neo-hi), inset 8px 8px 18px var(--neo-lo);
}
.neo .menu a.active{ outline:2px solid rgba(37,99,235,.25) }
.neo .ico{ width:18px; height:18px; display:block; flex:0 0 18px }

/* ========== 7) CARDS / GRID / TITULARES ========== */
.card, .neo .neo-card{
  background:var(--neo-bg); border:0; border-radius:var(--neo-radius); padding:18px;
  box-shadow:-10px -10px 22px var(--neo-hi), 10px 10px 22px var(--neo-lo);
  margin:16px 0;
}
.neo .grid{ display:grid; gap:16px }
.neo .grid.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.neo .grid.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
@media (max-width:1060px){ .neo .grid.cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){ .neo .grid.cols-4, .neo .grid.cols-2{ grid-template-columns:1fr } }

.neo .stat .label{ color:var(--neo-muted); font-weight:700; margin-bottom:6px }
.neo .stat .num{ font-size:30px; font-weight:800; letter-spacing:.3px }
.neo .panel-title{ font-size:20px; font-weight:800; margin-bottom:8px }

/* ========== 8) FORM / INPUTS / BOTONES ========== */
label{ display:block; margin:8px 0 4px }
input,select,textarea{
  width:100% !important;
  padding:10px 12px; border:0; border-radius:14px; outline:0;
  background:var(--neo-bg); color:var(--neo-text);
  box-shadow: inset -6px -6px 12px var(--neo-hi), inset 6px 6px 12px var(--neo-lo);
}
input:focus,select:focus,textarea:focus{
  box-shadow: inset -6px -6px 12px var(--neo-hi), inset 6px 6px 12px var(--neo-lo), 0 0 0 3px rgba(37,99,235,.18);
}
.input.sm{ padding:8px 10px; font-size:14px; border-radius:10px; min-width:90px }

/* Forzar que los <select> usen nuestro estilo también en iOS/móvil */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:var(--neo-bg);
  padding-right:32px; /* espacio para la flechita */
}

/* Flechita simple hecha con CSS para selects */
select{
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.35) 50%, transparent 50%),
    linear-gradient(-45deg, rgba(0,0,0,.35) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* Contenedor neumórfico para fechas */
.date-shell{
  border-radius:14px;
  background:var(--neo-bg);
  box-shadow: inset -6px -6px 12px var(--neo-hi),
              inset  6px  6px 12px var(--neo-lo);
  padding:0;
  overflow:hidden;
}

/* El input date/month va “limpio” dentro */
.date-shell input[type="date"],
.date-shell input[type="month"]{
  width:100%;
  padding:10px 12px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--neo-text);
  box-shadow:none;
  -webkit-appearance:none;
}

button,.button{
  appearance:none; border:0; outline:0; cursor:pointer;
  display:inline-block; text-decoration:none;
  padding:10px 16px; border-radius:14px; font-weight:600; font-size:14px; line-height:1;
  color:#111827; background:#e9edf4;
  box-shadow: 6px 6px 12px rgba(0,0,0,.10), -6px -6px 12px rgba(255,255,255,.7);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
button:hover,.button:hover{ filter:brightness(1.02) }
button:active,.button:active{ transform:translateY(1px) }
button[disabled], .button[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; pointer-events:none }

button.primary,.button.primary, button.blue,.button.blue{
  color:#bbbbbb; /*background:linear-gradient(180deg, var(--primary-1), var(--primary-2));*/
  box-shadow:0 10px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.20);
}
button.orange,.button.orange{ color:#fff; background:linear-gradient(180deg, var(--orange-1), var(--orange-2)) }
button.success,.button.success{ color:#fff; background:linear-gradient(180deg, var(--green-1), var(--green-2)) }
button.danger,.button.danger{ color:#fff; background:linear-gradient(180deg, var(--red-1), var(--red-2)) }
button.secondary,.button.secondary{
  background:#eef2f7; color:#1f2937;
  box-shadow: 6px 6px 12px rgba(0,0,0,.08), -6px -6px 12px rgba(255,255,255,.85);
}
.button.sm{ padding:8px 10px; font-size:14px; border-radius:10px }

/* ========== 9) TABLAS / ALERTAS ========== */
.table{ width:100%; border-collapse:separate; border-spacing:0 10px; min-width:760px }
.table thead th{ color:var(--neo-muted); text-align:left; padding:10px 12px; font-weight:600 }
.table tbody tr{
  background:var(--neo-bg); border-radius:12px;
  box-shadow:-6px -6px 14px var(--neo-hi), 6px 6px 14px var(--neo-lo);
}
.table tbody td{ padding:12px }
.table tbody tr td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px }
.table tbody tr td:last-child { border-top-right-radius:12px; border-bottom-right-radius:12px }
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch }

.alert{ padding:10px; border-radius:12px; margin:8px 0; box-shadow:none }
.alert.ok{ color:#065f46; background:#d1fae5 }
.alert.err{ color:#7f1d1d; background:#fee2e2 }
.alert.warn{ background:#FEF3C7; color:#92400E }

/* ========== 10) ITEMS (ventas v2 reutilizable) ========== */
.items-v2{ display:block }
.items-v2 .item-card{
  background:var(--neo-bg);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
  box-shadow:-8px -8px 18px var(--neo-hi), 8px 8px 18px var(--neo-lo);
}
.items-v2 .item-card select.prod{ width:100%; margin-bottom:12px }
.items-v2 .row{ display:grid; grid-template-columns:auto 160px; gap:12px; align-items:center; margin:8px 0 }
.items-v2 .row input{ text-align:right }
.items-v2 .item-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px }
.items-v2 .subtotal{ font-size:26px; font-weight:800 }
.items-total{
  display:flex; justify-content:flex-end; align-items:baseline; gap:10px; margin-top:12px
}
.items-total strong{ font-size:22px }

/* Botón eliminar ítem */
.icon-btn.item-remove{
  width:40px; height:40px; border-radius:12px;
  background:var(--neo-bg); color:var(--red-2); display:grid; place-items:center;
  box-shadow:-5px -5px 10px var(--neo-hi), 5px 5px 10px var(--neo-lo);
}
.icon-btn.item-remove:active{
  box-shadow: inset -5px -5px 10px var(--neo-hi), inset 5px 5px 10px var(--neo-lo);
}
.icon-btn.item-remove svg{ width:18px; height:18px }

/* ========== 11) BUSCADOR PRODUCTOS (cotizador/ventas) ========== */
.prod-pick { position: relative; }
.prod-search {
  width: 100%; border: 0; outline: none;
  padding: 10px 12px; border-radius: 12px;
  background: var(--neo-bg);
  box-shadow: -5px -5px 10px var(--neo-hi), 5px 5px 10px var(--neo-lo);
  margin-bottom: 8px;
}
.prod-suggest {
  position: absolute; z-index: 40; left: 0; right: 0;
  background: var(--neo-bg); border-radius: 12px;
  box-shadow: -8px -8px 18px var(--neo-hi), 8px 8px 18px var(--neo-lo);
  max-height: 260px; overflow: auto; display: none;
}
.prod-suggest .it { padding: 8px 12px; cursor: pointer; }
.prod-suggest .it:hover, .prod-suggest .it.active { background: #eef2ff; }
.prod-suggest .sku { color: var(--neo-muted); font-size: 12px; margin-left: 6px; }

/* ========== 12) ACCIONES (editar/borrar/confirmar) ========== */
.actionbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end }
.actionbtn{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px;
  border-radius:10px; border:0; cursor:pointer; background:var(--neo-bg); color:#ff6a00;
  box-shadow:-6px -6px 14px var(--neo-hi), 6px 6px 14px var(--neo-lo);
  font-weight:700;
}
.actionbtn svg{ width:16px; height:16px }
.actionbtn.warn{ color:#92400e }      /* PDF */
.actionbtn.blue{ color:#0369a1 }      /* editar */
.actionbtn.red{ color:#991b1b }       /* borrar */
.actionbtn.gray{ color:#334155 }      /* generar pedido */

.actions-legend{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0 0; color:var(--neo-muted);
}
.actions-legend .chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:10px; background:#eef2ff; }
.actions-legend svg{ width:14px; height:14px }
@media (max-width:860px){
  .actionbtn{ height:34px; font-size:13px; padding:0 8px }
}

/* Acciones compactas solo en tablas */
.sales-table .actionbar{ justify-content:flex-end; gap:8px; flex-wrap:wrap }
.sales-table .actionbtn{
  width:36px; height:36px; padding:0; border-radius:10px;
  display:inline-grid; place-items:center; gap:0;
}
.sales-table .actionbtn svg{ width:18px; height:18px }
.sales-table .actionbtn .txt{ display:none }
.sales-table td.actions{ white-space:nowrap }

/* ========== 13) BADGES / PILLS / AVATARES ========== */
.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:12px;
  font-weight:800;
  background:#eef2ff;
}
.pill.ok{   background:#dcfce7 }
.pill.warn{ background:#fff7ed }

.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700 }
.badge.compra{ background:#e0f2fe; color:#075985 }
.badge.prestamo{ background:#fee2e2; color:#991b1b }
.badge.reposicion{ background:#fef3c7; color:#92400e }
.badge.regalo{ background:#d2d4fa; color:#3f44d6 }

.avatar{ border-radius:999px; object-fit:cover; display:block }
.avatar-32{ width:32px; height:32px }
.avatar-34{ width:34px; height:34px }
.avatar-40{ width:40px; height:40px }
.avatar-64{ width:64px; height:64px }

/* ========== 14) Tiny legal (pie) ========== */
.tiny-legal{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
  width:100%; margin:16px auto 28px; font-size:11px; color:var(--neo-muted); opacity:.9;
}
.tiny-legal strong{ color:#111827; font-weight:800 }

/* ========== 15) Progress / Kudos (naranja del tema) ========== */
.progress{
  height:12px; border-radius:999px; background:#e5e7eb; overflow:hidden;
  box-shadow:inset -3px -3px 6px rgba(255,255,255,.8), inset 3px 3px 6px rgba(0,0,0,.08)
}
.progress > span{
  display:block; height:100%;
  background:linear-gradient(180deg, var(--orange-1), var(--orange-2));
  width:var(--w,0%);
}
.badge-dis{
  background:linear-gradient(180deg,var(--orange-1),var(--orange-2));
  color:#fff; font-weight:800; padding:4px 10px; border-radius:10px;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 6px 14px rgba(255,106,0,.25), inset 0 2px 0 rgba(255,255,255,.15);
}

/* ========== 16) Mensajes (tablas y acciones) ========== */
.table.msg-table{ min-width:0 !important }
.msg-actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center }
.msg-actions .icon-btn{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--neo-bg);
  box-shadow:-6px -6px 12px var(--neo-hi), 6px 6px 12px var(--neo-lo);
}
.msg-actions .icon-btn:active{
  box-shadow: inset -6px -6px 12px var(--neo-hi), inset 6px 6px 12px var(--neo-lo);
}
.msg-actions .icon-btn svg{ width:18px; height:18px }
.msg-actions .icon-btn.green{ color:var(--green-2) }
.msg-actions .icon-btn.red{ color:var(--red-2) }

@media (max-width:640px){
  .neo-card.compact input,
  .neo-card.compact select,
  .neo-card.compact textarea{
    padding:8px 10px; font-size:14px; border-radius:12px;
  }
  .neo-card.compact textarea{ min-height:90px }

  .msg-table thead th:nth-child(2),
  .msg-table tbody td:nth-child(2),
  .msg-table thead th:nth-child(3),
  .msg-table tbody td:nth-child(3){ display:none }

  .msg-actions .icon-btn{ width:36px; height:36px }

  /* Tablas fluidas en móvil */
  .table-wrap{ overflow:visible } /* En móvil permitimos flujo natural */
  .table{ min-width:0 }
  .table td, .table th{ white-space:normal }
}

/* ========== 17) Distributor Purchases (dp-*) ========== */
.dp-grid{ display:grid; gap:12px; grid-template-columns: 1fr 380px }
@media (max-width:980px){ .dp-grid{ grid-template-columns:1fr } }

.dp-card{
  background:var(--neo-bg); border-radius:16px; padding:14px;
  box-shadow:-10px -10px 22px var(--neo-hi), 10px 10px 22px var(--neo-lo);
}
.dp-title{ font-weight:800; margin-bottom:6px; font-size:18px }
.dp-title.big{ font-size:18px }

.dp-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px }
.small{ color:var(--neo-muted); font-size:12px }

.dp-form-grid{ display:grid; gap:10px; grid-template-columns:180px 1fr }
@media (max-width:720px){ .dp-form-grid{ grid-template-columns:1fr } }
.type-grid{ grid-template-columns:200px 1fr }

/* Inputs y botones coherentes con neo */
.inp,.sel{ height:38px; border-radius:10px; border:0; padding:0 12px; width:100%;
  background:var(--neo-bg); color:var(--neo-text);
  box-shadow: inset -6px -6px 12px var(--neo-hi), inset 6px 6px 12px var(--neo-lo);
}
.inp[readonly]{ opacity:.85 }
.btn{ height:38px; border-radius:10px; border:0; padding:0 14px; font-weight:800; color:#fff; cursor:pointer }
.btn.orange{ background:linear-gradient(180deg, var(--orange-1), var(--orange-2)) }
.btn.ghost{ background:#e5e7eb; color:#111827 }

/* Ítems de compra */
.item-card{ border-radius:14px; padding:12px; margin:10px 0; background:var(--neo-bg);
  box-shadow:-6px -6px 14px var(--neo-hi), 6px 6px 14px var(--neo-lo) }
.item-row{ display:grid; gap:10px; grid-template-columns: 2fr 110px 1fr; align-items:end }
.item-sub{ display:grid; gap:10px; grid-template-columns: 120px 120px 130px 1fr; align-items:end; margin-top:8px }
@media (max-width:720px){ .item-row{ grid-template-columns:1fr } .item-sub{ grid-template-columns:1fr 1fr } }
.item-desc{ margin-top:8px }
.item-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px }
.hidden{ display:none !important }

/* Listado lateral (últimas compras) */
.mini-list{ display:grid; gap:10px }
.mini-card{ border-radius:12px; padding:10px; background:var(--neo-bg);
  box-shadow:-6px -6px 14px var(--neo-hi), 6px 6px 14px var(--neo-lo) }
.mini-head{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.mini-head-left{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.mini-items{ margin-top:6px; font-size:13px; line-height:1.35 }
.mini-items .row{ display:flex; justify-content:space-between; gap:8px }
.mini-foot{ margin-top:8px; display:flex; justify-content:space-between; align-items:center; gap:8px }
.mini-actions{ display:flex; gap:8px; align-items:center }
.btn-ico{
  display:inline-flex; align-items:center; justify-content:center; height:34px; border-radius:10px; padding:0 10px;
  background:#eef2ff; color:#1f2937;
  box-shadow:-5px -5px 10px var(--neo-hi), 5px 5px 10px var(--neo-lo);
  font-weight:700;
}
.totals{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-weight:700 }
.actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px }

/* ========== 18) UTILIDADES (helpers) ========== */
/* Espaciados */
.mt-6{margin-top:6px} .mt-8{margin-top:8px} .mt-10{margin-top:10px}
.mt-12{margin-top:12px} .mt-16{margin-top:16px}
/* Gaps rápidos */
.gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px} .gap-14{gap:14px}
/* Flex / grid básicos */
.flex{display:flex} .flex-wrap{flex-wrap:wrap} .items-center{align-items:center}
.between{justify-content:space-between; align-items:center}
.right{text-align:right}
/* Columnas rápidas */
.grid{display:grid} .cols-2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .cols-2{ grid-template-columns:1fr } }

/* Móvil: filas de tarjetas de venta (base) */
.sale-row{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin:4px 0;
}
.sale-row .k{
  color:var(--neo-muted);
  font-weight:700;
  min-width:110px;
}

/* Ajustes menores */
.nowrap{ white-space:nowrap }
.p-18{ padding:18px } .p-14{ padding:14px }
.my-12{ margin:12px 0 } .mt-14{ margin-top:14px }
.items-start{ align-items:flex-start }

/* Evita que cambie el alto al mostrar un flash */
.alert{ min-height:40px }
.txt_oranges{ color:#ff7a00 }

/* --- Comisiones: filas clave–valor sin scroll (desktop y móvil) --- */
.kv{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.kv-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:12px;background:var(--neo-bg);
  box-shadow:-5px -5px 10px var(--neo-hi), 5px 5px 10px var(--neo-lo);
}
.kv-row .k{color:var(--neo-muted);font-weight:600}
.kv-row .v{font-weight:800}
.kv-sub{margin-top:10px}
.kv-sub .kv-row{padding:8px 10px}
@media (max-width:760px){
  .kv-row{flex-wrap:wrap}
  .kv-row .k{width:100%}
  .kv-row .v{width:100%;text-align:left}
}

/* Botón-ícono unificado */
.btn-ic{
  width:40px; height:40px; border:0; cursor:pointer;
  border-radius:12px; display:grid; place-items:center;
  background:var(--neo-bg); color:#111827;
  box-shadow:-6px -6px 12px var(--neo-hi), 6px 6px 12px var(--neo-lo);
  transition:transform .06s ease;
}
.btn-ic:active{
  box-shadow: inset -6px -6px 12px var(--neo-hi), inset 6px 6px 12px var(--neo-lo);
  transform:translateY(1px);
}
.btn-ic svg{ width:18px; height:18px; stroke:currentColor }
/* Asegura que los paths del SVG hereden el color */
.btn-ic svg path{ stroke: currentColor; }

/* Variantes de color (usa la roja para eliminar) */
.btn-ic.red{ color: var(--red-2) }
.btn-ic.blue{ color: var(--primary-2) }
.btn-ic.green{ color: var(--green-2) }
.btn-ic.purple{ color: #7c3aed }

/* ===== Ventas (sales_list) – alternancia desktop/móvil ===== */
.table-wrap.sales-table{ display:block !important; }
.sales-cards{ display:none !important; }

@media (max-width: 800px){
  .table-wrap.sales-table{ display:none !important; }
  .sales-cards{ display:block !important; }
}

/* ===== Ventas (sales_list) – ajustes desktop ===== */
.col-date   { width:110px }
.col-phone  { width:140px }
.col-email  { width:220px; word-break: break-word }
.col-id     { width:120px }
.col-desc,
.col-prods  { min-width:180px }
.wrap-text  { white-space: normal !important; word-break: break-word; line-height: 1.25 }
.col-money  { width:120px }
.col-pay    { width:180px }

.pay-badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800;
  background:#eef2ff; color:#111827;
}

/* Alinear números a la derecha en toda la fila */
.right{ text-align:right }

/* ========== VISOR PDF ========== */
.pdf-viewer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdf-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pdf-toolbar .sp { flex: 1 }
.pdf-frame {
  width: 100%;
  min-height: calc(100vh - 280px);
  border: 0;
  border-radius: 14px;
  background: #fff;
}
.pdf-legal {
  font-size: 12px;
  color: var(--neo-muted);
  text-align: center;
  margin-top: 16px;
  opacity: 0.8;
}
@media (max-width: 700px){
  .pdf-frame { min-height: calc(100vh - 240px) }
}

/* === Mis ventas (sales_list) – vista móvil más compacta === */
.sales-cards .neo-card,
.sales-cards .card{
  padding:12px 14px;
  margin:10px 0;          /* menos separación entre tarjetas */
}

.sales-cards .sale-row{
  margin:2px 0;           /* filas más pegadas, como "Últimas compras" */
}

.sales-cards .sale-row .k{
  min-width:90px;         /* labels un poco más compactos en móvil */
}

/* Título / cabecera de cada venta (#59 · fecha) */
.sales-cards .sale-head{
  margin-bottom:6px;
}


/* ===== Reportes semanales: tabla tipo tarjetas en móvil ===== */
.reports-table{
  font-size:14px;
}

/* Alinea las columnas de dinero a la derecha en desktop y móvil */
.reports-table td:nth-child(n+3),
.reports-table th:nth-child(n+3){
  text-align:right;
}

/* Versión móvil: cada fila se ve como una card con filas clave–valor */
@media (max-width:700px){

  .reports-table{
    border-spacing:0 12px;
    width:100%;
  }

  .reports-table thead{
    display:none;              /* ocultamos encabezados */
  }

  .reports-table tbody tr{
    display:block;
    padding:10px 12px;
    border-radius:16px;
  }

  .reports-table tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:4px 0;
    text-align:left;
  }

  /* Primera celda (Semana) más fuerte, arriba */
  .reports-table tbody td:first-child{
    font-weight:800;
    padding-bottom:6px;
  }

  .reports-table tbody td::before{
    content:"";
    font-weight:600;
    color:var(--neo-muted);
    margin-right:8px;
  }

  /* === Etiquetas para modo "Mis ganancias" === */
  .reports-mine tbody td:nth-child(1)::before{ content:"Semana"; }
  .reports-mine tbody td:nth-child(2)::before{ content:"# Movimientos"; }
  .reports-mine tbody td:nth-child(3)::before{ content:"Monto"; }
  .reports-mine tbody td:nth-child(4)::before{ content:"Sin IVA"; }
  .reports-mine tbody td:nth-child(5)::before{ content:"COGS"; }
  .reports-mine tbody td:nth-child(6)::before{ content:"Utilidad"; }

  /* === Etiquetas para modo "Overrides por hijos" === */
  .reports-overrides tbody td:nth-child(1)::before{ content:"Semana"; }
  .reports-overrides tbody td:nth-child(2)::before{ content:"Vendedor"; }
  .reports-overrides tbody td:nth-child(3)::before{ content:"# Movimientos"; }
  .reports-overrides tbody td:nth-child(4)::before{ content:"Monto"; }
  .reports-overrides tbody td:nth-child(5)::before{ content:"Sin IVA"; }
  .reports-overrides tbody td:nth-child(6)::before{ content:"Override"; }
  .reports-overrides tbody td:nth-child(7)::before{ content:"Pagada"; }

  /* Totales como una card aparte al final */
  .reports-table tfoot{
    display:block;
    margin-top:6px;
  }
  .reports-table tfoot tr{
    display:block;
    padding:10px 12px;
    border-radius:16px;
  }
  .reports-table tfoot th{
    display:flex;
    justify-content:space-between;
    padding:3px 0;
  }
  .reports-table tfoot th:first-child{
    font-weight:800;
    padding-bottom:6px;
  }
}

/* === Mis ventas (sales_list) – vista móvil compacta tipo "Últimas compras" === */

.sales-cards .neo-card{
  padding: 14px 16px;
  margin: 12px 0;
}

/* título: #59 · fecha */
.sales-cards .panel-title{
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px;
}

/* Lista clave–valor más ligera (sin cajitas gordas) */
.sales-cards .kv{
  margin-top: 4px;
  gap: 4px;
}

.sales-cards .kv-row{
  padding: 4px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(15,23,42,.04);
}

.sales-cards .kv-row:last-child{
  border-bottom: 0;
}

.sales-cards .kv-row .k{
  font-size: 12px;
  font-weight: 600;
  color: var(--neo-muted);
}

.sales-cards .kv-row .v{
  font-weight: 700;
  font-size: 14px;
}

/* Barra de acciones en la ficha móvil */
.sales-cards .actionbar{
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.sales-cards .actionbtn{
  height: 34px;
}

.sales-cards .actionbtn .txt{
  display: inline;
}


/* ===== Flechas visibles en TODOS los campos numéricos ===== */
input[type="number"]{
  -moz-appearance: number-input;  /* Firefox */
  appearance: auto;               /* Estándar */
}

/* Safari / Chrome / iOS */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: inner-spin-button;
  margin: 0;
}

/* ==== Spinner cantidad tipo Uiverse (− 1 +) ==== */
.num-spin{
  display:grid;
  grid-template-columns:42px minmax(40px,72px) 42px;
  align-items:center;
  gap:6px;
}

/* Número centrado y sin flechas nativas */
.num-spin input[type="number"]{
  text-align:center;
  border-radius:999px;
  padding:8px 6px;
  border:0;
  background:var(--neo-bg);
  color:var(--neo-text);
  box-shadow:
    inset -4px -4px 8px var(--neo-hi),
    inset  4px  4px 8px var(--neo-lo);
  -moz-appearance:textfield;
  appearance:textfield;
}
.num-spin input[type="number"]::-webkit-inner-spin-button,
.num-spin input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Botones + / − estilo Uiverse mini */
.num-spin-btn{
  position:relative;
  width:42px;
  height:42px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  background:#ccd0d4;
  color:rgba(0,0,0,0.55);
  font-weight:700;
  font-size:20px;
  display:grid;
  place-items:center;
  /* cuadro exterior */
  box-shadow:
    inset 0 0 18px 3px rgba(0,0,0,0.18),
    inset 0 2px 1px 1px rgba(255,255,255,0.9),
    inset 0 -2px 1px 0 rgba(0,0,0,0.25);
}

/* círculo interior (botón redondo) */
.num-spin-btn::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:999px;
  background:#ccd0d4;
  box-shadow:
    0 10px 18px -4px rgba(0,0,0,0.45),
    inset 0 -3px 4px -1px rgba(0,0,0,0.2),
    0 -8px 14px -1px rgba(255,255,255,0.7),
    inset 0 3px 4px -1px rgba(255,255,255,0.25),
    inset 0 0 4px 1px rgba(255,255,255,0.8),
    inset 0 14px 20px 0 rgba(255,255,255,0.2);
}

/* el signo + / − por encima del círculo */
.num-spin-btn span,
.num-spin-btn{
  position:relative;
  z-index:1;
}

/* efecto presionado */
.num-spin-btn:active{
  box-shadow:
    0 10px 18px -4px rgba(0,0,0,0.4),
    inset 0 -8px 24px 1px rgba(255,255,255,0.9),
    0 -8px 14px -1px rgba(255,255,255,0.6),
    inset 0 8px 20px 0 rgba(0,0,0,0.35),
    inset 0 0 8px 1px rgba(255,255,255,0.6);
}

/* Un poco más compacto en móvil */
@media (max-width:640px){
  .num-spin{
    grid-template-columns:38px minmax(36px,64px) 38px;
    gap:4px;
  }
  .num-spin-btn{
    width:38px;
    height:38px;
    font-size:18px;
  }
}



/* compras mes */
.monthly-summary{
  margin-bottom:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.monthly-summary .ms-header{
  font-weight:700;
  font-size:16px;
}
.monthly-summary-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.monthly-amount{
  font-size:26px;
  font-weight:800;
}
.monthly-range{
  font-size:12px;
  opacity:.7;
}
.points-pill{
  border-radius:999px;
  padding:10px 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  background:linear-gradient(135deg,#f97316,#facc15);
  color:#111827;
  min-width:140px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.points-main{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:18px;
}
.points-main .points-number{
  font-size:22px;
  line-height:1;
}
.points-main .points-suffix{
  font-size:14px;
}
.points-note{
  font-size:11px;
  opacity:.85;
}
.monthly-filters{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.monthly-filters-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.monthly-filters-row .date-shell{
  flex:1;
}


/* nueva venta */

.mode-tabs{display:flex;gap:10px;flex-wrap:wrap}
.mode-tabs .tab{padding:8px 12px;border-radius:12px;background:#eef2f7;font-weight:800;cursor:pointer; box-shadow: 6px 6px 12px rgba(0,0,0,.10), -6px -6px 12px rgba(255,255,255,.7); transition:.15s}
.mode-tabs .tab.active{color:#fff;background:linear-gradient(180deg,#3b82f6,#2563eb)}
.months{display:flex;flex-wrap:wrap;gap:8px}
.chip{/*display:flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;background:#f1f5f9;*/font-weight:700}
.chip input{margin:0}
.summary{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:18px}
@media (max-width: 900px){ .summary{grid-template-columns:1fr} }
.big-num{font-size:28px;font-weight:900}
.prod-filtros{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width: 900px){ .prod-filtros{grid-template-columns:1fr 1fr} }

.convertir-venta{display:flex;justify-content:center;margin-top:14px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}


/* ===== Ítems de la cotización: nombre arriba + controles abajo ===== */
.q-item .item-head{
  margin-bottom:6px;
}
.q-item .item-name{
  font-weight:700;
  font-size:14px;
}
.q-item .item-controls{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:nowrap;
}
@media (max-width:600px){
  .q-item .item-controls{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
}


/* =========================================================
   VISITAS DOLOR – Agenda interna
   ========================================================= */

/* Layout 2 columnas: formulario + calendario */
.td-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr);
  gap:16px;
  align-items:flex-start;
}
@media (max-width:900px){
  .td-layout{ grid-template-columns:1fr; }
}

/* ===== Calendario mensual ===== */
.cal-card,
.calendar-card{
  border-radius:18px;
  padding:14px 14px 16px;
  background:var(--neo-bg,#e5edf6);
  box-shadow:-8px -8px 18px var(--neo-hi,rgba(255,255,255,.9)),
             8px 8px 18px var(--neo-lo,rgba(15,23,42,.16));
}
.cal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
  font-weight:700;
  font-size:14px;
}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  font-size:13px;
}
.cal-dow{
  text-align:center;
  font-size:11px;
  color:#6b7280;
}
.cal-day{
  border-radius:10px;
  text-align:center;
  padding:6px 0;
  background:rgba(255,255,255,.7);
  box-shadow:
    inset -4px -4px 8px rgba(255,255,255,.9),
    inset  4px  4px 8px rgba(15,23,42,.06);
}
.cal-day.disabled{
  opacity:.4;
}
.cal-day.selected{
  background:#f97316;
  color:#fff;
  font-weight:800;
}
.cal-day a{
  display:block;
  color:inherit;
  text-decoration:none;
}

/* ===== Horarios (slots) ===== */
.slot-card,
.slots-card{
  margin-top:10px;
  border-radius:18px;
  padding:12px 12px 14px;
  background:#f1f5f9;
  box-shadow:-8px -8px 18px rgba(255,255,255,.9),
             8px 8px 18px rgba(15,23,42,.16);
}
.slot-row{
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:6px;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.slot-row span.small{
  font-size:12px;
  font-weight:500;
}
.slot-row.free{
  background:#dcfce7;
  color:#166534;
}
.slot-row.taken{
  background:#fecaca;
  color:#7f1d1d;
}
.slot-row.past{
  background:#e5e7eb;
  color:#4b5563;
  cursor:default;
}
.slot-row.selected{
  box-shadow:0 0 0 2px #f97316 inset;
}
.slot-foot{
  margin-top:6px;
  font-size:12px;
  color:var(--neo-muted,#6b7280);
  text-align:center;
}
.slot-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
  margin-right:4px;
}
.sd-green{ background:#22c55e; }
.sd-red{   background:#f97373; }
.sd-gray{  background:#9ca3af; }

/* ===== Detalle de cita seleccionada ===== */
.detail-box{
  border-radius:18px;
  padding:14px 16px;
  background:var(--neo-bg,#e5edf6);
  box-shadow:-8px -8px 18px var(--neo-hi,rgba(255,255,255,.9)),
             8px 8px 18px var(--neo-lo,rgba(15,23,42,.16));
  margin-top:12px;
}
.detail-label{
  font-size:12px;
  color:var(--neo-muted,#6b7280);
}
.detail-value{
  font-size:14px;
  font-weight:600;
}
.detail-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
@media (min-width:640px){
  .detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.badge-est{
  display:inline-block;
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  background:#e0f2fe;
  color:#075985;
}

/* ===== Próximas visitas ===== */
.upcoming-list{ margin-top:6px; }
.up-it{
  padding:6px 0;
  border-bottom:1px solid rgba(148,163,184,.35);
  font-size:13px;
}
.up-it:last-child{ border-bottom:0; }


/* === FOOTER FLEXREPORT UNIVERSAL === */
.neo-footer {
    margin-top: 40px;
    padding: 20px 0;
    text-align: center;
    color: #4a5568;
    font-size: 14px;
}

.neo-footer .whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    margin-bottom: 8px;
}

.neo-footer small {
    display: block;
    margin-top: 5px;
    opacity: .75;
}

/* ===== Ajuste de ancho en móvil (encuesta / dashboard más ancho) ===== */
@media (max-width: 768px){

  /* Menos margen general del layout neo */
  .neo .neo-shell{
    padding: 12px;      /* antes 24px */
    gap: 16px;
  }

  /* Que el contenido principal no quite espacio extra */
  .neo .neo-main{
    padding-right: 0;
  }

  /* Hacer la zona útil un poco más ancha y compacta */
  .wrap{
    max-width: 960px;   /* similar a la otra página */
    padding: 8px;       /* antes 16px */
  }

  /* Opcional: que las cards respiren menos a los lados */
  .neo .neo-card,
  .card{
    margin-left: 0;
    margin-right: 0;
  }
}



/* === Encuestas de Salud – vista móvil tipo cards === */
.survey-cards{
  display:none !important;
}

@media (max-width:800px){
  .table-wrap.surveys-table{
    display:none !important;
  }
  .survey-cards{
    display:block !important;
  }
}

.survey-cards .neo-card{
  padding:14px 16px;
  margin:12px 0;
}

.survey-cards .panel-title{
  font-size:15px;
  font-weight:800;
  margin-bottom:6px;
}

/* Lista clave–valor ligera (igual que ventas móviles) */
.survey-cards .kv{
  margin-top:4px;
  gap:4px;
}

.survey-cards .kv-row{
  padding:4px 0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  border-bottom:1px solid rgba(15,23,42,.04);
}

.survey-cards .kv-row:last-child{
  border-bottom:0;
}

.survey-cards .kv-row .k{
  font-size:12px;
  font-weight:600;
  color:var(--neo-muted);
}

.survey-cards .kv-row .v{
  font-weight:700;
  font-size:14px;
}

.survey-cards .actionbar{
  justify-content:flex-start;
  gap:8px;
  margin-top:10px;
}

.survey-cards .actionbtn{
  height:34px;
}


.sr-sra-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sr-sra-grid .field{ margin-top: 10px; }
.sr-sra-grid .field:first-child{ margin-top: 0; }

@media (max-width: 768px){
  .sr-sra-grid{
    grid-template-columns: 1fr; /* una columna */
  }
  .sr-col{ order: 1; }
  .sra-col{ order: 2; }
}


.prod-name.clickable {
  cursor: pointer;
  font-weight: 600;
}
.prod-name.clickable:hover {
  text-decoration: underline;
}


/* ===============================
   Miniatura elegante (kits y productos)
   =============================== */

.p-thumb{
  width:56px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}

.p-thumb:hover{
  transform:scale(1.04);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.p-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Incluye (kits) */
.kit-inc{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.kit-pill{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  background:#eef2f7;
  color:#111;
  font-weight:700;
  font-size:11px;
}



/* estética neumórfica + detalle variantes  STOCK*/
.kx-wrap { margin-top: 6px; }
.kx-row{
  display:grid;
  grid-template-columns: 1fr 110px 110px 120px;
  gap:10px;
  align-items:center;
  background:var(--neo-bg);
  border-radius:14px;
  padding:12px;
  box-shadow:-6px -6px 14px var(--neo-hi),
             6px 6px 14px var(--neo-lo);
}
.kx-head{ font-weight:800; background:transparent; box-shadow:none; }
.kx-right{ text-align:right; }

.kx-badge{
  display:inline-block;
  min-width:48px;
  text-align:center;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  background:var(--neo-bg);
  box-shadow:-6px -6px 12px var(--neo-hi),
             6px 6px 12px var(--neo-lo);
}
.kx-badge.low{ color:#dc2626; }

.kx-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.kx-toggle .chev{
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:#ff8a00;
  box-shadow:-4px -4px 10px var(--neo-hi),
             4px 4px 10px var(--neo-lo);
}

.kx-variants{
  margin:10px 0 18px 0;
  padding-left:14px;
  border-left:2px solid rgba(0,0,0,0.06);
}
.kx-variant-row{
  display:grid;
  grid-template-columns: 1fr 110px 110px 120px;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  margin-top:8px;
  background:rgba(255,255,255,0.35);
  box-shadow:inset -6px -6px 14px rgba(255,255,255,0.65),
             inset  6px  6px 14px rgba(0,0,0,0.06);
}
.kx-varlabel{
  font-weight:700;
  color:var(--neo-text);
}
.kx-muted{ opacity:.75; font-weight:600; }

@media (max-width: 820px){
  .kx-row, .kx-variant-row { grid-template-columns: 1fr 1fr; }
  .kx-row > .hide-sm, .kx-variant-row > .hide-sm { display:none; }
  .kx-row > .span-2, .kx-variant-row > .span-2 { grid-column: 1 / -1; }
}

/* Banderas*/
.flag-badge{
  width:36px;
  height:36px;
  border-radius:10px;
  object-fit:cover;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  display:inline-block;
}

.flag-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
}
.flag-btn .flag-badge{
  width:100%;
  height:100%;
  border-radius:10px;
}


/* ===== Selector de país ===== */


.country-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f3f6fb;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s ease;
}

.country-btn:hover {
  background: #eef2f9;
}

.country-btn input {
  display: none; /* oculta el radio */
}

.country-btn.active {
  background: #fff7f1;
  border-color: #ff6a00;
  box-shadow: 0 8px 20px rgba(255,106,0,.18);
}

.country-flag {
  width: 46px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

.country-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.country-name {
  font-weight: 800;
  font-size: 17px;
}

.country-meta {
  font-size: 13px;
  color: #6b7280;
}


  .country-list{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }

  .country-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 14px;
    border-radius:16px;
    border:2px solid transparent;
    background: rgba(255,255,255,0.55);
    cursor:pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .05s ease;
  }
  .country-card input{ position:absolute; opacity:0; pointer-events:none; }

  .country-card .flag{
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    font-size:28px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 10px 22px rgba(0,0,0,.08);
    flex:0 0 auto;
  }
  .country-card .meta{ min-width:0; }
  .country-card .name{ font-weight:900; }
  .country-card .sub{ font-size:12px; opacity:.75; margin-top:2px; }

  .country-card .tick{
    margin-left:auto;
    font-weight:900;
    opacity:0;
    transform: scale(.9);
    transition: opacity .15s ease, transform .15s ease;
  }

  /* ✅ HOVER: solo al pasar el mouse cambia color */
  .country-card:hover{
    border-color: rgba(255,140,0,.70);
    background: rgba(255,140,0,.06);
    box-shadow: 0 18px 30px rgba(0,0,0,.10);
  }

  /* ✅ Seleccionado: queda marcado fuerte */
  .country-card.is-selected{
    border-color: rgba(255,140,0,1);
    background: rgba(255,140,0,.10);
  }
  .country-card.is-selected .tick{
    opacity:1;
    transform: scale(1);
  }

  .country-card:active{ transform: scale(.995); }

  /* ===== Modal comprobante ===== */
  .nf-modal-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    display:none; align-items:center; justify-content:center;
    padding:16px; z-index:9999;
  }
  .nf-modal{
    width:min(920px, 96vw);
    max-height:90vh;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.35);
  }
  .nf-modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px;
    background:linear-gradient(180deg, #0f172a, #111827);
    color:#fff;
  }
  .nf-modal-title{ font-weight:800 }
  .nf-modal-close{
    border:0; background:rgba(255,255,255,.12); color:#fff;
    padding:8px 10px; border-radius:12px; cursor:pointer;
  }
  .nf-modal-body{ background:#f8fafc; padding:12px; overflow:auto; max-height:calc(90vh - 54px); }
  .nf-modal-body img{ width:100%; height:auto; border-radius:12px; display:block; }
  .nf-modal-body iframe{ width:100%; height:70vh; border:0; border-radius:12px; background:#fff; }

  @media (max-width: 520px){
    .nf-modal{ width:96vw; }
    .nf-modal-body iframe{ height:64vh; }
  }
  
 


  .tbl{ width:100%; border-collapse:separate; border-spacing:0 10px }
  .tbl thead th{ color:var(--neo-muted); text-align:left; padding:12px; font-weight:700 }
  .tbl tbody tr{
    background:var(--neo-bg);
    box-shadow:-6px -6px 14px var(--neo-hi), 6px 6px 14px var(--neo-lo);
    border-radius:16px;
  }
  .tbl tbody td{ padding:14px 12px; vertical-align:top }
  .tbl tbody tr td:first-child{ border-top-left-radius:16px; border-bottom-left-radius:16px }
  .tbl tbody tr td:last-child { border-top-right-radius:16px; border-bottom-right-radius:16px }
  .tbl tfoot th{ padding:14px 12px; }

  .cards{ display:none }
  .card{
    background:var(--neo-bg); border-radius:18px; padding:16px; margin:12px 0;
    box-shadow:-8px -8px 18px var(--neo-hi), 8px 8px 18px var(--neo-lo);
  }
  .card h4{ margin:0 0 8px 0; font-size:18px; font-weight:800 }
  .row{ display:flex; justify-content:space-between; gap:10px; margin:6px 0 }
  .row .k{ color:var(--neo-muted); font-weight:700 }

  .muted{text-align:center;color:#6b7280}
  .btn-mini{ padding:8px 12px; border-radius:12px; font-weight:800; border:0; cursor:pointer }
  .btn-mini.orange{ background:var(--neo-accent); color:#fff }
  .btn-mini.gray{ background:#eef2f7; color:#111827 }

 /* =========================================================
   FLEXREPORT — TABS LIMPIO (activo naranja real)
   ========================================================= */

.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* Estado base (gris) */
.tabs .button{
  background:#eef2f7 !important;
  color:#111827 !important;
  box-shadow: 6px 6px 12px rgba(0,0,0,.10),
              -6px -6px 12px rgba(255,255,255,.7);
  border:0;
}

/* Activo naranja REAL del sistema */
.tabs .button.active{
  background:linear-gradient(180deg,var(--orange-1),var(--orange-2)) !important;
  color:#fff !important;
  box-shadow:none !important; /* ❌ sin sombras de color */
}

/* Hover suave */
.tabs .button:hover{
  filter:brightness(1.02);
}


  /* KPI row compacta */
  .kpis{
    display:flex; flex-wrap:wrap; gap:12px; margin-top:12px;
  }
  .kpi{
    min-width: 160px;
    flex: 1 1 180px;
    background:var(--neo-bg);
    border-radius:16px;
    padding:12px 14px;
    box-shadow:-6px -6px 14px var(--neo-hi), 6px 6px 14px var(--neo-lo);
  }
  .kpi small{ display:block; color:var(--neo-muted); font-weight:800; margin-bottom:4px }
  .kpi b{ font-size:18px }

  @media (max-width: 900px){
    .tbl-wrap{ display:none }
    .cards{ display:block }
  }


/* =========================================================
   REPORTES (tabs + tabla/cards + modal comprobante) — DEPURADO
   - Inactivo gris / Activo naranja (como pediste)
   - Sin duplicados
   - Scopeado para NO romper otras páginas
   ========================================================= */


/* Tabs: ambos links usan class="button orange"
   - Por defecto: gris
   - Activo: naranja
*/
.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}
.tabs .button{
  opacity:.9;
  transition: filter .15s ease, opacity .15s ease;
}
.tabs .button.orange{
  color:#fff; background:linear-gradient(180deg, var(--orange-1), var(--orange-2))
}
.tabs .button.orange.active{
  color:#fff; background:linear-gradient(180deg, var(--orange-1), var(--orange-2))
}
.tabs .button:hover{ filter:brightness(1.02); }

/* KPI row compacta (reportes) */
.reports-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}
.reports-kpi{
  min-width:160px;
  flex:1 1 180px;
  background:var(--neo-bg);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:-6px -6px 14px var(--neo-hi), 6px 6px 14px var(--neo-lo);
}
.reports-kpi small{
  display:block;
  color:var(--neo-muted);
  font-weight:800;
  margin-bottom:4px;
}
.reports-kpi b{ font-size:18px; }

/* ===== Tabla “tipo cards” (desktop) para reportes ===== */
.reports .tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.reports .tbl thead th{
  color:var(--neo-muted);
  text-align:left;
  padding:12px;
  font-weight:700;
}
.reports .tbl tbody tr{
  background:var(--neo-bg);
  box-shadow:-6px -6px 14px var(--neo-hi), 6px 6px 14px var(--neo-lo);
  border-radius:16px;
}
.reports .tbl tbody td{
  padding:14px 12px;
  vertical-align:top;
}
.reports .tbl tbody tr td:first-child{
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}
.reports .tbl tbody tr td:last-child{
  border-top-right-radius:16px;
  border-bottom-right-radius:16px;
}
.reports .tbl tfoot th{ padding:14px 12px; }

.reports .muted{ text-align:center; color:#6b7280; }

/* ===== Cards (móvil) ===== */
.reports .cards{ display:none; }
.reports .card{
  background:var(--neo-bg);
  border-radius:18px;
  padding:16px;
  margin:12px 0;
  box-shadow:-8px -8px 18px var(--neo-hi), 8px 8px 18px var(--neo-lo);
}
.reports .card h4{
  margin:0 0 8px 0;
  font-size:18px;
  font-weight:800;
}
.reports .card .row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:6px 0;
}
.reports .card .row .k{
  color:var(--neo-muted);
  font-weight:700;
}

/* Botones mini (móvil reportes) */
.reports .btn-mini{
  padding:8px 12px;
  border-radius:12px;
  font-weight:800;
  border:0;
  cursor:pointer;
}
.reports .btn-mini.orange{ background:var(--neo-accent); color:#fff; }
.reports .btn-mini.gray{ background:#eef2f7; color:#111827; }

@media (max-width:900px){
  .reports .tbl-wrap{ display:none; }
  .reports .cards{ display:block; }
}

/* ===== Modal comprobante (único, global) ===== */
.nf-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
}
.nf-modal{
  width:min(860px, 96vw);
  background:var(--neo-bg);
  border-radius:18px;
  box-shadow:-10px -10px 24px var(--neo-hi), 10px 10px 24px var(--neo-lo);
  overflow:hidden;
}
.nf-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nf-modal-head b{ font-size:16px; }
.nf-modal-body{ padding:12px 14px; }
.nf-modal-body img{ max-width:100%; height:auto; border-radius:12px; }
.nf-modal-body iframe{
  width:100%;
  height:min(70vh, 720px);
  border:0;
  border-radius:12px;
  background:#fff;
}
.nf-x{
  width:38px;
  height:38px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  background:#eef2f7;
  font-weight:900;
}

/* =========================================
   FIX SELECT LOGIN (solo login)
   NO afecta el resto del sistema
========================================= */

.login-wrap select,
.login-card select,
.login-form select{

  width:100% !important;
  color:#1f2937 !important;
  font-weight:600;

  /* Evita que el texto se salga en iOS */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  /* Ajuste visual */
  padding-right:24px !important;
}

/* =====================================
   FIX SELECT LOGIN FLEXREPORT
   SOLO afecta login.php
===================================== */

body:has(form[action="login.php"]) select,
.card form select{

  /* quitamos la flecha falsa del sistema */
  background-image:none !important;

  /* evitamos que el texto se salga en iOS */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* mejor padding visual */
  padding-right:14px !important;

  /* color texto más fuerte */
  color:#1f2937 !important;
  font-weight:600;
}

/* ===== PRIVACY POPUP FLEXREPORT ===== */


.privacy-card{
  background:#fff;
  border-radius:18px;
  padding:20px;
  width:92%;
  max-width:480px;
  max-height:80vh;
  overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}

.privacy-close{
  position:absolute;
  right:14px;
  top:10px;
  border:0;
  background:transparent;
  font-size:26px;
  cursor:pointer;
}

.privacy-ov{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:99999;
  padding:16px;
}

/* ✅ ESTO ES LO QUE TE ESTÁ FALTANDO */
#privacyModal[hidden]{ display:none !important; }


/* FIX posición popup */
.privacy-card{
  position:relative;
}

.privacy-close{
  position:absolute;
  top:8px;
  right:12px;
  z-index:2;
}


/* ===========================
   Country pill (header)
   =========================== */

.country-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 36px;
  padding: 0 12px;

  background: #fff;
  color: #111;

  border-radius: 999px; /* pastilla perfecta */
  text-decoration: none;

  font-size: 14px;
  font-weight: 500;

  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 6px 18px rgba(0,0,0,.06);

  transition: box-shadow .15s ease, transform .1s ease;
}

.country-pill:hover{
  box-shadow:
    0 2px 4px rgba(0,0,0,.08),
    0 10px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Emoji bandera */
.country-pill .flag-wrap{
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;
}

/* Texto país */
.country-pill .txt{
  white-space: nowrap;
}


@media (max-width: 480px){
  .country-pill .txt{
    display:none;
  }
}
/* ===========================
   campañas whatsapp
   =========================== */

.wa-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:12px;
  background:#fff;
  margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.wa-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wa-info{
  flex:1;
}

.wa-nombre{
  font-weight:600;
}

.wa-meta{
  font-size:12px;
  opacity:.7;
}

.wa-tel{
  font-size:13px;
}

.btn-wa{
  background:#25D366;
  color:#fff;
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
  font-size:13px;
}