/* =============================================================
   admin.css — Panel de administración de Juguetes Arcoíris
   Usa la misma paleta de style.css: naranja + blanco + grises.
   Limpio, denso y rápido. Funciona también en celular.
   ============================================================= */

/* ====================== LOGIN ====================== */
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--brand-soft), transparent 60%),
    radial-gradient(700px 420px at 110% 110%, #fff7ea, transparent 60%),
    var(--bg);
  padding: 24px 16px;
}
.login { width: min(420px, 100%); }
.login__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 26px 24px 22px;
  display: grid;
  gap: 14px;
}
.login__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login__mark {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand); color: #fff; flex: none;
}
.login__mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login__title { margin: 0; font-size: 19px; font-weight: 900; }
.login__sub { margin: 0; font-size: 13px; color: var(--ink-soft); }
.login__back { display: block; text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.login__back:hover { color: var(--brand); }

/* ====================== BASE DEL PANEL ====================== */
.admin-body { margin: 0; background: var(--bg); }
.admin-loading { min-height: 100vh; display: grid; place-items: center; color: var(--ink-soft); }
.amodal-abierto { overflow: hidden; }

.alayout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

/* ---------- Menú lateral ---------- */
.aside {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
}
.aside__brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.aside__mark { width: 38px; height: 38px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.aside__mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aside__brand strong { display: block; font-size: 15px; font-weight: 900; }
.aside__brand span { font-size: 11.5px; color: var(--ink-soft); }
.aside__nav { display: grid; gap: 4px; }
.aside__foot { margin-top: auto; display: grid; gap: 4px; }
.aside__user { font-size: 11.5px; color: var(--ink-soft); padding: 6px 10px; word-break: break-all; }

.anav {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 700;
  color: var(--ink); transition: background .15s ease, color .15s ease;
}
.anav:hover { background: var(--brand-soft); color: var(--brand-dark); }
.anav.is-active { background: var(--brand); color: #fff; }
.anav__ico { font-size: 15px; }
.anav--out { color: #c02626; }
.anav--out:hover { background: #fdecec; color: #a11e1e; }

/* ---------- Cabecera y páginas ---------- */
.amain { min-width: 0; display: flex; flex-direction: column; }
.atop {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px);
}
.atop__title { margin: 0; font-size: 18px; font-weight: 900; }
.aburger { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; }

.apage { display: none; padding: 18px 20px 40px; }
.apage.is-active { display: block; }

/* ---------- Tarjetas ---------- */
.acard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px; margin-bottom: 16px;
}
.acard__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.acard__title { margin: 0; font-size: 15px; font-weight: 900; }
.atools { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 220px; }

/* ---------- Controles ---------- */
.ainput {
  width: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 12px; font-size: 14px; outline: none;
  color: var(--ink); font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ainput:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(243,111,19,.15); }
.ainput--search { max-width: 320px; }
.ainput--select { max-width: 220px; }
.ainput--num { max-width: 90px; text-align: center; }
.acategoria-busca { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(150px,1fr); gap: 6px; min-width: 0; }
.acategoria-busca .ainput { min-width: 0; max-width: none; }
.acategoria-busca__input { margin-bottom: 2px; }
.acategoria-gestionar-busca { margin-top: 12px; }
/* Sin flechas en los inputs numéricos */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ainput--mini { padding: 5px 8px; font-size: 12.5px; border-radius: 9px; }
textarea.ainput { resize: vertical; }

.afield { display: grid; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--brand-dark); }
.afield > span { letter-spacing: .02em; color: var(--brand-dark); text-transform: uppercase; font-size: 11.5px; }
.afield--row { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.afield--check { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.afield--check input { width: 17px; height: 17px; accent-color: var(--brand); }

.abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 14px; font-size: 13.5px; font-weight: 800;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.abtn:hover:not(:disabled) { background: var(--bg); border-color: #d7dae0; }
.abtn:active:not(:disabled) { transform: translateY(1px); }
.abtn:disabled { opacity: .5; cursor: not-allowed; }
.abtn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.abtn--primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
.abtn--del { color: #c02626; border-color: #f2d3d3; }
.abtn--del:hover:not(:disabled) { background: #fdecec; }
.abtn--mini { padding: 5px 9px; font-size: 13px; border-radius: 9px; }
.abtn--block { width: 100%; padding: 11px 14px; }

.aerror { margin: 0; font-size: 13px; font-weight: 700; color: #c02626; background: #fdecec; border-radius: 10px; padding: 8px 11px; }
.avacio { color: var(--ink-soft); font-size: 13.5px; text-align: center; padding: 18px 6px; margin: 0; }

/* ---------- Tablas ---------- */
.atabla-wrap { overflow-x: auto; }
.atabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.atabla th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.atabla td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.atabla tr:hover td { background: #fbfbfc; }
.atabla .num { text-align: right; }
.atabla .nowrap, .nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink-soft); }
.amini { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); background: #fff; }
.is-anulada td { opacity: .55; text-decoration: line-through; }

.atag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); margin-left: 6px; }
.atag--soft { background: var(--bg); color: var(--ink-soft); }
.atag--del { background: #fdecec; color: #c02626; }
.astock { font-weight: 800; }
.astock.is-bajo { color: #b26a00; }
.astock.is-cero { color: #c02626; }

/* ---------- Modales ---------- */
.amodal {
  position: fixed; inset: 0; z-index: 100; background: rgba(20,22,26,.5);
  display: grid; place-items: center; padding: 16px; overflow-y: auto;
}
.amodal__card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column;
}
.amodal__card--sm { width: min(520px, 100%); }
.amodal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.amodal__x { background: none; border: 0; font-size: 17px; cursor: pointer; color: var(--ink-soft); }
.amodal__body { padding: 16px 18px; display: grid; gap: 13px; overflow-y: auto; }
.amodal__foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; padding-block: 12px 2px; }
.agrid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* ---------- Formulario de producto por secciones ---------- */
#modalProducto .amodal__card { width: min(760px, 100%); overflow: hidden; }
.amodal__body--producto { padding: 0; gap: 0; }
.aproducto-secciones { display: grid; gap: 10px; padding: 16px 18px; }
.aproducto-seccion { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--card); }
.aproducto-seccion > summary {
  display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--bg); color: var(--ink); cursor: pointer;
  font-size: 13.5px; font-weight: 900; list-style: none; transition: background .15s ease;
}
.aproducto-seccion > summary::-webkit-details-marker { display: none; }
.aproducto-seccion > summary:hover { background: var(--brand-soft); }
.aproducto-seccion__ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark); }
.aproducto-seccion__ico svg, .aproducto-seccion__flecha { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aproducto-seccion__ico svg { width: 18px; height: 18px; }
.aproducto-seccion__flecha { width: 18px; height: 18px; color: var(--ink-soft); transition: transform .18s ease; }
.aproducto-seccion[open] > summary { background: #fff; }
.aproducto-seccion[open] .aproducto-seccion__flecha { transform: rotate(180deg); }
.aproducto-seccion__body { padding: 14px; border-top: 1px solid var(--line); }
.agrid-form--basico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agrid-form--precios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agrid-form--inventario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afield--ancho { grid-column: 1 / -1; }
.afield--doble { grid-column: span 2; }
.aproducto-checks { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 14px; }
.aproducto-contenido { display: grid; gap: 14px; }
.abtn--carga { width: 100%; border-style: dashed; padding-block: 11px; }
.amodal__body--producto > .aerror { margin: 0 18px 12px; }
.amodal__foot--producto { position: sticky; bottom: 0; z-index: 2; margin: 0; padding: 12px 18px; background: #fff; }

/* ---------- Galería de imágenes ---------- */
.agaleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 4px 0 8px; }
.agaleria__item { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.agaleria__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.agaleria__principal { position: absolute; top: 6px; left: 6px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.agaleria__acciones { display: flex; border-top: 1px solid var(--line); background: #fff; }
.agaleria__acciones button { flex: 1; border: 0; background: none; padding: 5px 0; cursor: pointer; font-size: 12px; color: var(--ink-soft); }
.agaleria__acciones button:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-dark); }
.agaleria__acciones button:disabled { opacity: .35; cursor: default; }
.agaleria__acciones .is-del:hover { background: #fdecec; color: #c02626; }
.agaleria__vacia { grid-column: 1 / -1; color: var(--ink-soft); font-size: 13px; margin: 0; }
.abarra { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.abarra i { display: block; height: 100%; width: 0%; background: var(--brand); transition: width .2s ease; }

/* ====================== CAJA (POS) ====================== */
.apos { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.apos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: 70vh; overflow-y: auto; }
.apos__item {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; transition: border-color .15s ease, box-shadow .15s ease;
}
.apos__item:hover:not(:disabled) { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.apos__item:disabled { opacity: .5; cursor: not-allowed; }
.apos__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: var(--bg); }
.apos__nombre { font-size: 12.5px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.apos__precio { font-size: 13.5px; font-weight: 900; color: var(--brand-dark); }
.apos__stock { font-size: 11px; color: var(--ink-soft); }
.apos__stock.is-cero { color: #c02626; }

.apos__ticket { position: sticky; top: 82px; }
.ticket { display: grid; gap: 8px; max-height: 42vh; overflow-y: auto; margin-bottom: 12px; }
.ticket__linea { display: grid; grid-template-columns: 44px 1fr auto auto auto; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.ticket__linea img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; }
.ticket__info { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; }
.ticket__info strong { font-size: 15px; line-height: 1.2; }
.ticket__cant { display: flex; align-items: center; gap: 4px; }
.ticket__cant button { width: 26px; height: 26px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 900; }
.ticket__cant input { width: 52px; }
.ticket__sub { font-weight: 900; font-size: 15.5px; white-space: nowrap; }
.ticket__x { border: 0; background: none; cursor: pointer; color: var(--ink-soft); font-size: 15px; }
.ticket__resumen { display: grid; gap: 9px; border-top: 1px solid var(--line); padding-top: 12px; }
.ticket__totales { display: grid; gap: 4px; font-size: 15.5px; margin-top: 4px; }
.ticket__totales > div { display: flex; justify-content: space-between; }
.ticket__total { font-size: 21px; font-weight: 900; border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 4px; color: var(--brand-dark); }
.ticket__acciones { display: grid; grid-template-columns: auto 1fr; gap: 8px; }

/* ====================== ESTADÍSTICAS ====================== */
.astats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.akpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px; display: grid; gap: 4px; min-width: 0; }
.akpi span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 800; }
.akpi b { font-size: 22px; font-weight: 900; color: var(--brand-dark); overflow-wrap: anywhere; line-height: 1.2; }
.akpi--ancha { grid-column: 1 / -1; }

.agrid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.agrid2--local { grid-template-columns: 1fr 1fr; }
.agrafico { display: flex; align-items: flex-end; gap: 5px; height: 120px; padding-top: 6px; }
.agrafico__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.agrafico__col i { display: block; width: 100%; background: linear-gradient(180deg, var(--brand), #ffb06a); border-radius: 5px 5px 0 0; min-height: 2px; }
.agrafico__col span { font-size: 9.5px; color: var(--ink-soft); white-space: nowrap; }

.atop-lista { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 13.5px; }
.atop-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.atop-lista .atop-img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.atop-lista li span { flex: 1; min-width: 0; }
.atop-lista b { white-space: nowrap; color: var(--brand-dark); }

/* ====================== AVISO ====================== */
.aviso {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 12px;
  box-shadow: var(--shadow-md); font-size: 13.5px; font-weight: 700; max-width: 320px;
}
.aviso--err { background: #c02626; }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 1080px) {
  .apos, .agrid2 { grid-template-columns: 1fr; }
  .apos__ticket { position: static; }
}
@media (max-width: 860px) {
  .alayout { grid-template-columns: 1fr; }
  .aside {
    position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 90;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg);
  }
  .aside-abierto .aside { transform: none; }
  .aburger { display: inline-flex; }
  .apage { padding: 14px 14px 40px; }
  .ticket__linea { grid-template-columns: 40px 1fr auto; grid-template-areas: "img info x" "cant cant sub"; }
  .ticket__linea img { grid-area: img; }
  .ticket__info { grid-area: info; }
  .ticket__x { grid-area: x; }
  .ticket__cant { grid-area: cant; }
  .ticket__sub { grid-area: sub; text-align: right; }
}

/* --- Estrella de destacado, categorías y fila clickeable --- */
.aestrella { color: #f2a900; font-size: 15px; margin-left: 6px; }
.atabla tbody tr.is-clic { cursor: pointer; }
.atabla tbody tr.is-clic:hover { background: var(--brand-soft); }
.acats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.acats__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--linea, #e8e8e8); border-radius: 10px; }
.acats__item small { color: var(--ink-soft); font-weight: 600; margin-left: 6px; }
.acats__grupo { list-style: none; }
.acats__toggle { margin-right: 6px; }
.acats__subs { list-style: none; margin: 6px 0 10px 22px; padding: 0; display: grid; gap: 6px; }
.acats__item--sub { background: var(--bg, #f7f7f8); border-style: dashed; }
.acats { max-height: 52vh; overflow: auto; padding-right: 4px; }
.asubtag { color: var(--ink-soft); font-weight: 600; }

.amodal__foot--wrap { flex-wrap: wrap; }

/* ====================== CAJA: filtro y descuento ====================== */
#buscarCaja { flex: 1 1 220px; }
#filtroCatCaja { flex: 0 1 200px; }
.adesc { display: inline-flex; gap: 6px; align-items: center; }
.adesc #descuentoCaja { width: 96px; }
.adesc #tipoDescuentoCaja { width: 62px; }

/* ====================== AVISO DE ÉXITO (mini ventana verde) ====================== */
.aviso--exito {
  position: fixed; inset: auto; left: 50%; top: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  background: #16a34a; color: #fff; border: 2px solid #0f7a37;
  padding: 18px 26px; border-radius: 16px; text-align: center;
  font-size: 16px; font-weight: 800; max-width: 340px; cursor: pointer;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28); white-space: pre-line;
}

/* ====================== ESTADÍSTICAS: período y búsqueda ====================== */
#periodoGrafico { width: 148px; flex: 0 0 auto; }
#buscarVentas { flex: 1 1 240px; min-width: 180px; }
.agrafico__col { min-width: 0; }

/* ---- Filtros rápidos del registro de ventas ---- */
.afiltros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.afiltros__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.afiltros__chips--desde { align-items: center; }
.afiltros__label { font-size: 12px; font-weight: 700; color: #7b7268; text-transform: uppercase; letter-spacing: .03em; margin-right: 2px; }
.achip {
  border: 1px solid #d8d2c8; background: #fff; color: #5a5148;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: .15s;
}
.achip:hover { background: #f5f1ea; }
.achip.is-activo { background: #6b4b2a; border-color: #6b4b2a; color: #fff; }

/* ---- Pie de tabla con exportación ---- */
.atabla-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.atabla-pie__info { font-size: 12.5px; color: #7b7268; }

/* ===== Filtro global por rango de fechas ===== */
.arango { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--linea, #e7e2da); border-radius: 14px; }
.arango__fechas { display: flex; gap: 10px; flex-wrap: wrap; }
.afield--mini { min-width: 140px; }
.arango .ahint { margin-left: auto; }

.akpi--destacada { border-width: 2px; }
.akpi--destacada b { font-size: 22px; }
.akpi--ok b { color: #17803d; }

/* ===== Etiquetas de estado de pago ===== */
.atag--ok { background: #e6f6ec; color: #17803d; margin-left: 0; }
.atag--pendiente { background: #fdf3d3; color: #9a6b06; margin-left: 0; }

/* ===== Buscador con calendario ===== */
.abuscador { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; }
.abuscador .ainput--search { flex: 1; }
.abuscador__cal { position: relative; flex: none; }
.abtn--icono { padding: 6px 10px; font-size: 15px; line-height: 1; }
.abtn--icono.is-activo { background: var(--brand-soft); border-color: var(--brand, #b3763f); }
.apop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fff; border: 1px solid var(--linea, #e7e2da); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
@media (max-width: 640px) { .apop { left: auto; right: 0; } }

/* ===== Detalle de venta (solo lectura) ===== */
.adet__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.adet__lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.adet__item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--linea, #e7e2da); border-radius: 12px; }
.adet__item img, .adet__ph { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--bg, #f6f3ee); flex: none; }
.adet__ph { display: grid; place-items: center; font-weight: 900; font-size: 20px; color: var(--ink-soft, #7a726a); border: 1px solid var(--linea, #e7e2da); }
.adet__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.adet__info span { font-size: 12px; color: var(--ink-soft, #7a726a); }
.adet__cant { font-size: 16px; font-weight: 800; }

/* Descuento / IVA con selector de tipo en la ficha de venta */
.adesc { display: flex; gap: 6px; align-items: center; }
.adesc .ainput { min-width: 0; }
.adesc select.ainput { width: 62px; flex: none; }

/* Ajustes apilables: Enter agrega otra fila, ✕ la quita */
.aajustes { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; }
.aajuste { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.aajuste .ainput--num { width: 96px; }
.aajuste select.ainput { width: 62px; flex: none; }
.aajuste__x {
  border: 1px solid var(--linea, #e7e2da);
  background: transparent;
  color: var(--ink-soft, #7a726a);
  border-radius: 8px;
  width: 24px; height: 24px;
  font-size: 11px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  flex: none;
}
.aajuste__x:hover { color: #c0392b; border-color: #c0392b; }
body[data-tema="oscuro"] .aajuste__x { border-color: rgba(255,255,255,.18); color: #b9b2a8; }
body[data-tema="oscuro"] .aajuste__x:hover { color: #ff8a80; border-color: #ff8a80; }


.atabla-pie__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Logo de marca en login y panel ---------- */
.login__mark, .aside__mark { background: transparent; overflow: hidden; border-radius: 50%; }
.login__mark .brand__img, .aside__mark .brand__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Panel de administración en celular ---------- */
@media (max-width: 900px) {
  .atable-wrap, .atable { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .amodal__card { width: 100%; max-height: 92vh; overflow: auto; }
  .afield--2, .agrid-2, .agrid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .alayout { grid-template-columns: 1fr; }
}


/* Campo de contraseña con ojo */
.apass { position: relative; display: block; }
.apass__input { width: 100%; padding-right: 44px; }
.apass__eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; background: transparent; border-radius: 9px; cursor: pointer;
  color: var(--ink-soft); padding: 0;
}
.apass__eye:hover { color: var(--brand); background: rgba(243,111,19,.08); }
.apass__eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.apass__ico[hidden] { display: none; }

/* ===== Bloqueo de estadísticas con contraseña ===== */
.astats-lock { display: grid; gap: 12px; }
.astats-lock__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.astats-lock__form .apass { flex: 1 1 220px; max-width: 280px; }
.astats-lock__pie { display: flex; justify-content: flex-end; margin-bottom: 16px; }

/* --- Edición inline de categorías y confirmaciones --- */
.acats__inline { display: flex; align-items: center; gap: 6px; width: 100%; }
.acats__inline .ainput--mini { flex: 1; padding: 6px 8px; font-size: 14px; }
.aconfirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.aconfirm small { color: var(--ink-soft); font-weight: 600; }

/* Estado de la compra (abonado / en proceso) */
.atag--abonado { background: #e6f6ec; color: #17803d; margin-left: 6px; }
.atag--proceso { background: #fdf3d3; color: #9a6b06; margin-left: 6px; }

/* ===== Buscador de ventas: calendario + filtro de pagos juntos ===== */
.abuscador { flex-wrap: wrap; }
.abuscador #filtroPagoVentas { flex: 0 1 180px; min-width: 150px; }
.abtn--icono svg { display: block; }

/* Edición inline de artículos en el detalle de venta */
.adet__edit{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.adet__edit .ainput--mini{width:78px;padding:4px 6px;font-size:.85rem;text-align:center}
.adet__x{color:var(--muted,#888);font-size:.85rem}
.abtn--mini{padding:2px 8px;font-size:.9rem;line-height:1.4;min-width:30px}
.abtn--mini.abtn--del{color:#c0392b;border-color:#e8b7b0}
.abtn--accion-venta { width: 34px; height: 30px; padding: 0; }
.abtn--accion-venta svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aventa-orden { min-width: 120px; }
.aventa-orden__linea { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.aventa-orden__linea b { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; }
.aventa-orden__linea span:last-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.aventa-orden > small { display: block; margin-top: 3px; }
.aventa-total { font-weight: 900; }
.aventa-total--mayor { color: #f97316; }
.aventa-total--menor { color: #16a34a; }
.aventa-total--bulto { color: #7a4ad1; }

.adet__rapido{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 4px}
.adet__rapido .ainput{flex:1;min-width:140px}
.adet__rapido .ainput--mini{flex:0 0 auto;width:90px;min-width:0;text-align:center}

/* ====================== TOGGLE DE TEMA ====================== */
.atema {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-weight: 800; font-size: 12.5px; white-space: nowrap;
}
.atema:hover { border-color: var(--brand); color: var(--brand-dark); }
@media (max-width: 640px) { .atema__txt { display: none; } }

/* ====================== MODO OSCURO ====================== */
body[data-tema="oscuro"] {
  --ink: #e8eaee;
  --ink-soft: #a2a9b5;
  --line: #2c313a;
  --bg: #14171c;
  --card: #1c2027;
  --brand-soft: #2a2018;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
  color: var(--ink);
}
body[data-tema="oscuro"] .atop { background: rgba(28,32,39,.94); }
body[data-tema="oscuro"] .aside,
body[data-tema="oscuro"] .acard,
body[data-tema="oscuro"] .amodal__card,
body[data-tema="oscuro"] .ainput,
body[data-tema="oscuro"] .abtn { background: var(--card); color: var(--ink); }
body[data-tema="oscuro"] .atabla thead th { background: #232830; color: var(--ink-soft); }
body[data-tema="oscuro"] .atabla tbody tr:hover { background: #232830; }
body[data-tema="oscuro"] .ainput::placeholder { color: var(--ink-soft); }
body[data-tema="oscuro"] .ainput option { background: var(--card); color: var(--ink); }

/* ====================== COBRAR FLORES ====================== */
.aflores {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, .72fr);
  gap: 14px; max-width: 1240px; margin: 0 auto; align-items: start;
}
.aflores__carrito {
  min-width: 0; min-height: 520px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.aflores__carrito-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.aflores__carrito-head h2 { margin: 0; min-width: 0; font-size: 20px; font-weight: 900; }
.aflores__carrito-head span { color: var(--ink-soft); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.aflores__operacion { min-width: 0; display: grid; gap: 12px; position: sticky; top: 70px; }

.aflores__input {
  width: 100%; font-size: 29px; font-weight: 900; padding: 10px 14px;
  border: 2px solid currentColor; border-radius: 11px;
  background: var(--panel, #fff); color: var(--ink, #1a1a1a);
}
.aflores__input:focus { outline: 3px solid var(--brand, #ff6a13); outline-offset: 2px; }

.aflores__aviso {
  margin: 0; font-size: 17px; font-weight: 900; text-transform: uppercase;
  padding: 7px 10px; border-radius: 9px;
}
.aflores__aviso.is-ok { background: #157f3b; color: #fff; }
.aflores__aviso.is-err { background: #c62828; color: #fff; }

.aflores__buscar {
  background: var(--panel, #fff);
  border: 2px dashed var(--brand, #ff6a13);
  border-radius: 14px;
  padding: 11px 16px;
  display: grid; gap: 8px;
}
.aflores__buscar label {
  font-size: 13px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .5px; color: var(--brand-dark, #d94f00);
}
.aflores__buscar .aflores__input { font-size: 17px; padding: 9px 12px; border-width: 2px; }
.aflores__resultados { display: grid; gap: 8px; }
.aflores__resultado {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel-2, #fafafa); border: 2px solid var(--line, #e6e6e6);
  border-radius: 14px; padding: 10px 14px; cursor: pointer;
}
.aflores__resultado:hover:not(:disabled) { border-color: var(--brand, #ff6a13); }
.aflores__resultado:disabled { opacity: .45; cursor: not-allowed; }
.aflores__resultado img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.aflores__resultado span { flex: 1; display: grid; gap: 2px; min-width: 0; }
.aflores__resultado b { font-size: 15px; font-weight: 800; color: var(--ink, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aflores__resultado small { font-size: 11px; color: var(--muted, #777); }
.aflores__resultado strong { font-size: 17px; font-weight: 900; color: var(--brand-dark, #d94f00); white-space: nowrap; }

.aflores__lista { display: grid; gap: 8px; padding-top: 11px; max-height: calc(100vh - 175px); overflow-y: auto; }
.aflores__vacio {
  display: grid; place-items: center; flex: 1; min-height: 350px; margin: 0;
  font-size: 20px; font-weight: 800; text-align: center; color: var(--ink-soft); padding: 24px;
}
.aflores__linea {
  display: grid; grid-template-columns: 58px minmax(140px, 1fr) auto auto 42px; gap: 10px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 9px;
}
.aflores__mini { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.aflores__mini--vacia { display: grid; place-items: center; color: var(--ink-soft); font-size: 22px; font-weight: 900; }
.aflores__nombre { min-width: 0; }
.aflores__nombre strong { display: block; font-size: 19px; line-height: 1.2; }
.aflores__nombre span { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.aflores__cant { display: flex; align-items: center; gap: 7px; }
.aflores__cant button {
  width: 42px; height: 42px; font-size: 24px; font-weight: 900; line-height: 1;
  border-radius: 9px; border: 2px solid var(--brand, #ff6a13);
  background: var(--brand, #ff6a13); color: #fff; cursor: pointer;
}
.aflores__cant b { font-size: 25px; min-width: 38px; text-align: center; }
.aflores__sub { font-size: 22px; font-weight: 900; min-width: 96px; text-align: right; }
.aflores__quitar {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 2px solid #c62828; background: transparent; color: #c62828;
  border-radius: 12px; padding: 0; cursor: pointer;
}
.aflores__quitar:hover { background: #fdecec; }
.aflores__quitar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.aflores__pie {
  display: grid; gap: 11px;
  background: var(--panel, #fff); border: 2px solid var(--brand, #ff6a13);
  border-radius: 14px; padding: 13px 16px;
}
.aflores__total { display: flex; justify-content: space-between; align-items: baseline; }
.aflores__total span { font-size: 21px; font-weight: 900; letter-spacing: 1px; }
.aflores__total b { font-size: 46px; font-weight: 900; line-height: 1; }
.aflores__pagos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aflores__pago {
  font-size: 14px; font-weight: 900; padding: 12px 6px; border-radius: 10px;
  border: 2px solid var(--brand, #ff6a13); background: transparent; color: inherit; cursor: pointer;
}
.aflores__pago.is-activo { background: var(--brand, #ff6a13); color: #fff; }
.aflores__acciones { display: grid; grid-template-columns: 1fr 2fr; gap: 9px; }
.aflores__btn {
  font-size: 22px; font-weight: 900; padding: 16px 8px; border-radius: 11px;
  border: none; cursor: pointer; letter-spacing: 1px;
}
.aflores__btn--gris { background: #6b6b6b; color: #fff; }
.aflores__btn--ok { background: #157f3b; color: #fff; }
.aflores__btn:disabled { opacity: .45; cursor: not-allowed; }

.atag--desde { text-transform: lowercase; font-weight: 800; }

@media (max-width: 720px) {
  .aflores { grid-template-columns: 1fr; }
  .aflores__carrito { min-height: 420px; }
  .aflores__operacion { position: static; grid-row: 1; }
  .aflores__carrito { grid-row: 2; }
  .aflores__lista { max-height: none; }
  .aflores__linea {
    grid-template-columns: 62px minmax(0, 1fr) 44px;
    grid-template-areas: "mini nombre quitar" "cant cant sub";
  }
  .aflores__mini { grid-area: mini; width: 62px; height: 62px; }
  .aflores__nombre { grid-area: nombre; }
  .aflores__cant { grid-area: cant; }
  .aflores__sub { grid-area: sub; min-width: 0; }
  .aflores__quitar { grid-area: quitar; width: 44px; height: 44px; }
  .aflores__total b { font-size: 46px; }
  .aflores__acciones { grid-template-columns: 1fr; }
}

@media (min-width: 721px) and (max-width: 1180px) {
  .aflores { grid-template-columns: minmax(0, 1fr) minmax(330px, .75fr); }
  .aflores__linea {
    grid-template-columns: 64px minmax(0, 1fr) auto 46px;
    grid-template-areas: "mini nombre sub quitar" "mini cant cant quitar";
  }
  .aflores__mini { grid-area: mini; width: 64px; height: 64px; }
  .aflores__nombre { grid-area: nombre; }
  .aflores__cant { grid-area: cant; }
  .aflores__sub { grid-area: sub; min-width: 0; font-size: 24px; }
  .aflores__quitar { grid-area: quitar; width: 46px; height: 46px; }
}

/* ---- Precios y stock ---- */
.atabla--precios .ainput--mini { width: 100%; max-width: 110px; text-align: right; }
.atabla--precios select.ainput--mini { text-align: left; max-width: 120px; }
.atabla--precios tr.is-editado { background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* Cobro aparte en COBRAR FLORES */
.aflores__extra { display: grid; gap: 8px; }
.aflores__extra .aflores__input { font-size: 18px; }
.aflores__extra .aflores__btn { font-size: 15px; padding: 9px 12px; }
.aflores__linea--extra { background: rgba(0, 0, 0, .03); }

/* ===== Modalidad de precio: Por mayor (naranja) / Por menor (verde) ===== */
.amodo { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(148,163,184,.18); }
.amodo__btn { border: 0; background: transparent; color: inherit; font: 800 13px/1 inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; text-transform: uppercase; letter-spacing: .4px; }
.amodo__btn[data-modo="mayor"].is-activo { background: #f97316; color: #fff; }
.amodo__btn[data-modo="menor"].is-activo { background: #16a34a; color: #fff; }
.amodo--flores { margin: 0 0 10px; align-self: flex-start; }
.acard__head--ticket { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.modo-mayor .ticket__linea strong,
.modo-mayor .ticket__total b,
.modo-mayor .apos__precio,
.modo-mayor .aflores__total b,
.modo-mayor .aflores__nombre strong { color: #f97316; }
.modo-menor .ticket__linea strong,
.modo-menor .ticket__total b,
.modo-menor .apos__precio,
.modo-menor .aflores__total b,
.modo-menor .aflores__nombre strong { color: #16a34a; }

/* ===== Acordeón de cobro extra ===== */
.aacordeon { border: 1px solid var(--alinea, rgba(148,163,184,.35)); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.aacordeon > summary { cursor: pointer; padding: 11px 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 13px; }
.aacordeon__body { display: grid; gap: 10px; padding: 4px 14px 14px; }

/* ===== Ticket más amplio ===== */
.apos__ticket { min-width: 0; }
.apos__ticket .ticket { max-height: min(58vh, 640px); overflow: auto; }

/* ===== Variantes en el modal de producto ===== */
.avariantes { display: grid; gap: 8px; }
.avariante { display: grid; grid-template-columns: 54px 1fr 110px 34px; gap: 8px; align-items: center; }
.avariante__foto { width: 54px; height: 54px; border-radius: 10px; border: 1px dashed rgba(148,163,184,.6); background: transparent; color: inherit; cursor: pointer; font-size: 20px; overflow: hidden; padding: 0; }
.avariante__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avariante__x { border: 0; background: rgba(239,68,68,.14); color: #ef4444; border-radius: 9px; height: 34px; cursor: pointer; font-weight: 800; }


/* ---------- Paginador de publicaciones ---------- */
.apaginador { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 2px 0; }
.apaginador__botones { display: flex; gap: 6px; flex-wrap: wrap; }
.apag { min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--linea, rgba(148,163,184,.4)); background: transparent; color: inherit; font: 700 13px/1 inherit; cursor: pointer; }
.apag:hover:not(:disabled) { border-color: #f97316; }
.apag.is-activo { background: #f97316; border-color: #f97316; color: #fff; }
.apag:disabled { opacity: .4; cursor: default; }

/* ---------- Precios mayor / menor en la tabla ---------- */
.atabla td.precio-mayor { color: #f97316; font-weight: 700; }
.atabla td.precio-menor { color: #16a34a; font-weight: 700; }

/* ---------- Top 10 semanal ---------- */
.atop-lista .atop-mayor { font-style: normal; color: #f97316; }
.atop-lista .atop-menor { font-style: normal; color: #16a34a; }

/* ---------- Ticket normal / avanzado en Cobrar Flores ---------- */
.atickets { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(148,163,184,.18); margin: 0 0 12px; }
.atickets__btn { border: 0; background: transparent; color: inherit; font: 800 13px/1 inherit; padding: 9px 16px; border-radius: 999px; cursor: pointer; text-transform: uppercase; letter-spacing: .4px; }
.atickets__btn.is-activo { background: var(--brand, #f97316); color: #fff; }
.aflores__avanzado[hidden] { display: none; }

/* ===== Navegación jerárquica y controles de Publicaciones ===== */
.aside { background: var(--card); }
.anav-grupo { display: grid; gap: 2px; }
.anav--grupo { width: 100%; }
.anav--grupo > span:nth-child(2) { flex: 1; }
.anav__flecha { margin-left: auto; font-size: 18px; line-height: 1; transition: transform .18s ease; }
.anav-grupo.is-open .anav__flecha { transform: rotate(180deg); }
.anav-submenu {
  display: grid; grid-template-rows: 0fr; margin-left: 22px;
  border-left: 2px solid transparent; overflow: hidden;
  transition: grid-template-rows .18s ease, border-color .18s ease, padding .18s ease;
}
.anav-submenu > .anav { min-height: 0; overflow: hidden; padding-block: 0; }
.anav-grupo.is-open .anav-submenu { grid-template-rows: 1fr; border-left-color: color-mix(in srgb, var(--brand) 32%, var(--line)); padding-block: 3px; }
.anav-grupo.is-open .anav-submenu > .anav { padding-block: 8px; }
.anav--sub { margin-left: 4px; width: calc(100% - 4px); border-radius: 0 9px 9px 0; font-size: 13px; }
.anav--sub.is-active { background: var(--brand-soft); color: var(--brand-dark); }

.acard__head--publicaciones { align-items: stretch; gap: 14px; }
.atools--filtros { display: grid; grid-template-columns: minmax(240px, 1.45fr) minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: center; }
.atools--filtros .ainput { max-width: none; }
.atools--acciones { flex: 0 0 auto; align-items: center; padding-left: 14px; border-left: 1px solid var(--line); }
.atools--acciones .abtn { min-height: 40px; }
.afield--check { min-height: 40px; padding: 0 8px; border-radius: 9px; }
.afield--check:hover { background: var(--brand-soft); }
.afield--check input { width: 19px; height: 19px; }

/* ===== Tema oscuro de alto contraste ===== */
body[data-tema="oscuro"] {
  --ink: #f2f4f7;
  --ink-soft: #b7bec9;
  --line: #3a414d;
  --bg: #111318;
  --card: #1b1f26;
  --brand-soft: #392519;
  --panel: #1b1f26;
  --panel-2: #242932;
  --muted: #b7bec9;
  --linea: #3a414d;
}
body[data-tema="oscuro"] .atop { background: rgba(27,31,38,.96); }
body[data-tema="oscuro"] .anav:hover { background: #292e37; color: #ffb173; }
body[data-tema="oscuro"] .anav.is-active:not(.anav--sub) { background: var(--brand); color: #fff; }
body[data-tema="oscuro"] .anav--sub.is-active { background: #392519; color: #ffb173; }
body[data-tema="oscuro"] .abtn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
body[data-tema="oscuro"] .abtn:hover:not(:disabled):not(.abtn--primary) { background: #292e37; border-color: #596271; }
body[data-tema="oscuro"] .ainput { border-color: #454d5a; background: #222730; }
body[data-tema="oscuro"] .ainput:focus { border-color: #ff8a3d; box-shadow: 0 0 0 3px rgba(249,115,22,.22); }
body[data-tema="oscuro"] .atabla tbody tr:hover td { background: #252b34; }
body[data-tema="oscuro"] .akpi,
body[data-tema="oscuro"] .arango,
body[data-tema="oscuro"] .apop,
body[data-tema="oscuro"] .agaleria__acciones,
body[data-tema="oscuro"] .apos__item,
body[data-tema="oscuro"] .ticket__cant button,
body[data-tema="oscuro"] .achip { background: #222730; color: var(--ink); border-color: #454d5a; }
body[data-tema="oscuro"] .achip:hover { background: #2b313b; }
body[data-tema="oscuro"] .achip.is-activo { background: var(--brand); border-color: var(--brand); color: #fff; }
body[data-tema="oscuro"] .afield > span,
body[data-tema="oscuro"] .acard__title,
body[data-tema="oscuro"] .ticket__total { color: #ffb173; }
body[data-tema="oscuro"] .amodal { background: rgba(3,5,8,.72); }
body[data-tema="oscuro"] .aproducto-seccion { background: var(--card); border-color: #454d5a; }
body[data-tema="oscuro"] .aproducto-seccion > summary,
body[data-tema="oscuro"] .aproducto-seccion[open] > summary,
body[data-tema="oscuro"] .amodal__foot--producto { background: #222730; color: var(--ink); }
body[data-tema="oscuro"] .aproducto-seccion > summary:hover { background: #292e37; }
body[data-tema="oscuro"] .aproducto-seccion__ico { background: #392519; color: #ffb173; }
body[data-tema="oscuro"] .aflores__resultado,
body[data-tema="oscuro"] .aflores__linea { background: #222730; border-color: #454d5a; }
body[data-tema="oscuro"] .aflores__resultado b { color: var(--ink); }
body[data-tema="oscuro"] .aflores__linea--extra { background: #292e37; }

@media (max-width: 1180px) {
  .atools--filtros { grid-template-columns: minmax(220px, 1fr) minmax(170px, .8fr); }
  .atools--acciones { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .aproducto-secciones { padding: 12px; }
  .agrid-form--basico, .agrid-form--precios, .agrid-form--inventario { grid-template-columns: 1fr; }
  .afield--doble { grid-column: auto; }
  .aproducto-seccion > summary { padding: 11px 12px; }
  .amodal__foot--producto { padding: 12px; }
  .atools--filtros { grid-template-columns: 1fr; }
  .acategoria-busca { grid-template-columns: 1fr; }
  .atools--acciones { display: grid; grid-template-columns: 1fr 1fr; min-width: 100%; }
  .atools--acciones .abtn { width: 100%; }
  .apaginador { justify-content: center; }
  .apaginador .atabla-pie__info { width: 100%; text-align: center; }
}

@media (max-width: 860px) {
  .amain { padding: 0; }
  .aside {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); height: 100vh;
    transform: translateX(-100%); z-index: 90; box-shadow: var(--shadow-lg);
  }
  .aside-abierto .aside { transform: translateX(0); }
  .aside__nav { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .anav-submenu, .anav__flecha { transition: none; }
}

/* ============ Menú lateral colapsable e iconos vectoriales ============ */
.anav__ico { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.anav__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.anav__flecha { margin-left: auto; display: inline-grid; place-items: center; }
.anav__flecha svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.aside__toggle {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 10px; padding: 7px; cursor: pointer; display: grid; place-items: center;
  width: 38px; height: 34px;
}
.aside__toggle:hover { background: var(--brand-soft); color: var(--brand-dark); }
.aside__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.alayout.is-compacto { grid-template-columns: 74px 1fr; }
.alayout.is-compacto .aside { align-items: center; }
.alayout.is-compacto .aside__brand div,
.alayout.is-compacto .aside__user,
.alayout.is-compacto .anav__flecha,
.alayout.is-compacto .anav > span:not(.anav__ico) { display: none; }
.alayout.is-compacto .aside__nav,
.alayout.is-compacto .aside__foot { width: 100%; }
.alayout.is-compacto .anav { justify-content: center; padding: 11px 6px; position: relative; }
.alayout.is-compacto .anav-submenu { border-left: 0; padding-left: 0; }
.alayout.is-compacto .anav--sub { margin-left: 0; width: 100%; }
.alayout.is-compacto .anav::after {
  content: attr(data-nombre); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: #1f2430; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 6px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .14s ease; z-index: 40;
}
.alayout.is-compacto .anav:hover::after { opacity: 1; }

/* ============ Edición masiva en Precios y stock ============ */
.amasiva {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line));
  background: var(--brand-soft); border-radius: 12px;
}
.amasiva strong { font-size: 13px; color: var(--brand-dark); }
.amasiva .afield--row { display: grid; gap: 4px; }
.amasiva .afield--row span { font-size: 11.5px; }
.atabla th.acheck-col, .atabla td.acheck-col { width: 34px; text-align: center; }

/* Campo de clave enmascarado sin usar type="password" */
.apass__input--oculta { -webkit-text-security: disc; text-security: disc; letter-spacing: 2px; }

body[data-tema="oscuro"] .aside__toggle { background: #1b1f26; border-color: #3a414d; color: #e7eaf0; }
body[data-tema="oscuro"] .amasiva { background: #24190f; border-color: #5a3a1e; }
body[data-tema="oscuro"] .amasiva strong { color: #ffb173; }

/* ====== Estado de pago con símbolo (Registro de ventas) ====== */
.aestado {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 999px; font-size: 15px; font-weight: 900; line-height: 1;
}
.aestado--ok { background: #dcfce7; color: #15803d; }
.aestado--warn { background: #fef3c7; color: #b45309; }
.aestado--del { background: #fee2e2; color: #b91c1c; }
body[data-tema="oscuro"] .aestado--ok { background: rgba(34,197,94,.18); color: #4ade80; }
body[data-tema="oscuro"] .aestado--warn { background: rgba(245,158,11,.18); color: #fbbf24; }
body[data-tema="oscuro"] .aestado--del { background: rgba(239,68,68,.18); color: #f87171; }

/* ====== Filtros desplegables de ventas ====== */
.afiltros__sel { grid-template-columns: auto minmax(140px, 200px); }
#btnHoyVentas.is-activo { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ====== Barras por local ====== */
.agrafico__col i.is-once { background: linear-gradient(180deg, var(--brand), #ffb06a); border-radius: 0; }
.agrafico__col i.is-flores { background: linear-gradient(180deg, #c026d3, #f0abfc); border-radius: 5px 5px 0 0; }
.agrafico__col i.is-once:last-of-type { border-radius: 5px 5px 0 0; }
.aleyenda { display: flex; gap: 14px; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.aleyenda__item { display: inline-flex; align-items: center; gap: 6px; }
.aleyenda__item i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.aleyenda__item i.is-once { background: var(--brand); }
.aleyenda__item i.is-flores { background: #c026d3; }

/* ====== Torta mayor vs menor ====== */
.atorta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.atorta__svg { width: 170px; height: 170px; transform: rotate(-90deg); }
.atorta__aro { fill: none; stroke-width: 6; }
.atorta__aro--mayor { stroke: #f97316; }
.atorta__aro--menor { stroke: #16a34a; }
.atorta__leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.atorta__leyenda li { display: grid; gap: 2px; padding-left: 14px; border-left: 5px solid var(--line); }
.atorta__leyenda li.is-mayor { border-color: #f97316; }
.atorta__leyenda li.is-menor { border-color: #16a34a; }
.atorta__leyenda span { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.atorta__leyenda b { font-size: 18px; font-weight: 900; }

/* ===== Cajas simultáneas (CAJA PRINCIPAL / 2 / 3) ===== */
.acajas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.acajas__btn {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-width: 150px; padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--linea, #d9d9e3); border-radius: 12px;
  background: var(--panel, #fff); color: inherit; font: inherit; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.acajas__btn b { font-size: 13px; letter-spacing: .4px; }
.acajas__btn small { font-size: 12px; opacity: .7; }
.acajas__btn:hover { transform: translateY(-1px); }
.acajas__btn.is-ocupada { border-color: #f0a24a; }
.acajas__btn.is-activo { border-color: #2f7df6; box-shadow: 0 0 0 2px rgba(47, 125, 246, .18); }
.acajas.is-bloqueada { opacity: .45; pointer-events: none; }

/* ===== Banda de edición de una venta registrada ===== */
.aedicion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: #fff4e0; border: 1px solid #f0a24a; color: #7a4a05; font-weight: 600;
}

/* ===== Modo BULTO ===== */
.apos.modo-bulto .apos__precio, .aflores.modo-bulto .aflores__sub { color: #7a4ad1; }
.amodo__btn[data-modo="bulto"].is-activo { background: #7a4ad1; color: #fff; border-color: #7a4ad1; }

body[data-tema="oscuro"] .acajas__btn { background: #1b1d23; border-color: #33363f; }
body[data-tema="oscuro"] .aedicion { background: #3a2a10; border-color: #a06a20; color: #ffd9a0; }

/* Método de pago en recuadros clickeables */
.afield--pago { display: grid; gap: 8px; }
.apago { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.apago__btn { border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft); font: 800 12.5px/1 inherit; padding: 11px 6px; border-radius: 12px; cursor: pointer; text-transform: uppercase; letter-spacing: .3px; transition: .15s; }
.apago__btn:hover { border-color: var(--brand); color: var(--ink); }
.apago__btn.is-activo { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand); }


/* ===== Costos ocultos cuando Estadísticas está cerrada ===== */
.costo-oculto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  opacity: .55;
  cursor: help;
}
.costo-oculto .ico-ojo-off { display: block; }
.ahint--costo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
}
.ahint--costo::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9.9%204.24A9.12%209.12%200%200%201%2012%204c7%200%2010%208%2010%208a13.16%2013.16%200%200%201-1.67%202.68'%2F%3E%3Cpath%20d%3D'M6.61%206.61A13.526%2013.526%200%200%200%202%2012s3%208%2010%208a9.74%209.74%200%200%200%205.39-1.61'%2F%3E%3Cline%20x1%3D'2'%20y1%3D'2'%20x2%3D'22'%20y2%3D'22'%2F%3E%3Cpath%20d%3D'M14.12%2014.12a3%203%200%201%201-4.24-4.24'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9.9%204.24A9.12%209.12%200%200%201%2012%204c7%200%2010%208%2010%208a13.16%2013.16%200%200%201-1.67%202.68'%2F%3E%3Cpath%20d%3D'M6.61%206.61A13.526%2013.526%200%200%200%202%2012s3%208%2010%208a9.74%209.74%200%200%200%205.39-1.61'%2F%3E%3Cline%20x1%3D'2'%20y1%3D'2'%20x2%3D'22'%20y2%3D'22'%2F%3E%3Cpath%20d%3D'M14.12%2014.12a3%203%200%201%201-4.24-4.24'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.ainput:disabled { opacity: .55; }

/* Arrastrar categorías */
.acats__item--drag { cursor: grab; }
.acats__item--drag:active { cursor: grabbing; }
.acats__asa { opacity: .45; margin-right: 6px; letter-spacing: -2px; user-select: none; }
.acats__item--moviendo { opacity: .4; }
.acats__item--arriba { box-shadow: inset 0 3px 0 var(--naranja, #ff6a13); }
.acats__item--abajo { box-shadow: inset 0 -3px 0 var(--naranja, #ff6a13); }