/* ==========================================================================
   Tunguska Suite — efectos arcade interactivos.
   Animaciones sutiles que dan feeling videojuego sin invadir.
   ========================================================================== */

@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pop-in { animation: pop-in .3s cubic-bezier(.34,1.56,.64,1); }

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(30px) scale(.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast { animation: slide-in-right .35s cubic-bezier(.34,1.56,.64,1); }

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); text-shadow: 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 8px rgba(0,229,255,0.2); text-shadow: 0 0 20px currentColor; }
}
.kpi-v.changed {
  animation: glow-pulse .6s ease-out;
  color: var(--c-primary);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,255,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(0,229,255,0); }
}
.live-pulse { animation: pulse-glow 2s infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.02) 0%,
    rgba(0,229,255,0.08) 50%,
    rgba(255,255,255,0.02) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.scanline-fx { position: relative; overflow: hidden; }
.scanline-fx::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0,229,255,0.04) 50%, transparent 52%);
  animation: scanline 4s linear infinite;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.float-fx { animation: float 3s ease-in-out infinite; }

@keyframes blink-cursor {
  50% { opacity: 0; }
}
.cursor-fx::after {
  content: '_';
  color: var(--c-primary);
  margin-left: 2px;
  animation: blink-cursor 1s infinite;
}

/* ==========================================================================
   Modales sci-fi (.coach-overlay + .coach-card): responsive + brackets + boot
   ========================================================================== */
.coach-overlay {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,229,255,0.06) 0%, transparent 55%),
    rgba(6,8,15,0.88);
  backdrop-filter: blur(10px) saturate(.85);
  -webkit-backdrop-filter: blur(10px) saturate(.85);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  animation: overlay-in .3s ease-out;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.coach-overlay::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.018) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,0.018) 39px 40px);
  pointer-events: none;
}

.coach-card {
  background:
    linear-gradient(135deg, rgba(16,23,42,0.98), rgba(11,15,28,0.98));
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow:
    0 30px 80px -10px rgba(0,229,255,0.35),
    0 0 0 1px rgba(0,229,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--text);
  position: relative;
  z-index: 1;
  animation: card-boot .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes card-boot {
  0%   { opacity: 0; transform: translateY(20px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Corner brackets sci-fi */
.coach-card::before,
.coach-card::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  pointer-events: none;
  border: 1.5px solid var(--c-primary);
  filter: drop-shadow(0 0 6px var(--c-primary));
}
.coach-card::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 14px;
}
.coach-card::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
  border-bottom-right-radius: 14px;
}

/* Header con scanline a la derecha */
.coach-card h4 {
  font-family: var(--f-display);
  margin: 0 0 .85em;
  font-size: 1.3rem;
  color: #F5F9FF;
  text-transform: none;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: .65rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(0,229,255,0.12);
  position: relative;
}
.coach-card h4::before {
  content: '◆';
  color: var(--c-primary);
  font-size: .75em;
  text-shadow: 0 0 12px var(--c-primary);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.coach-card h4::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border-2), transparent 80%);
}
.coach-card p {
  color: var(--text-dim);
  margin: 0 0 1.5em;
  line-height: 1.55;
}
.coach-card menu {
  padding: 0; margin: 1rem 0 0;
  display: flex; gap: .65rem;
  justify-content: flex-end; flex-wrap: wrap;
}

/* Mobile fullscreen */
@media (max-width: 640px) {
  .coach-overlay { padding: 0; }
  .coach-card {
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    padding: 1.25rem 1rem;
  }
  .coach-card::before, .coach-card::after { display: none; }
  .coach-card menu { position: sticky; bottom: 0; background: rgba(11,15,28,0.95); padding: .75rem 0 0; backdrop-filter: blur(10px); }
}

/* Tablet — limita altura, scroll en cuerpo */
@media (min-width: 641px) and (max-width: 1024px) {
  .coach-card { max-width: min(90vw, 720px); padding: 1.5rem 1.75rem; }
}

/* ==========================================================================
   Campaña tutorial onboarding — barra de progreso + icono grande + tipografía
   ========================================================================== */
.coach-overlay--in .coach-card { animation: coach-in .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes coach-in {
  0%   { opacity: 0; transform: translateY(24px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.coach-progress {
  display: flex; align-items: center; gap: .65rem;
  margin: -0.5rem -0.5rem 1.25rem;
  padding: 0 .5rem;
}
.coach-progress__bar {
  flex: 1; height: 4px;
  background: linear-gradient(90deg, #00E5FF, #3DF5A7);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 12px rgba(0,229,255,0.45);
  position: relative;
}
.coach-progress__bar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  border-radius: 999px;
  animation: progress-shine 2.4s ease-in-out infinite;
}
@keyframes progress-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.coach-progress__txt {
  font-size: .72rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; flex-shrink: 0;
}

.coach-icon {
  font-size: 3.5rem; line-height: 1;
  text-align: center;
  margin: .5rem 0 1rem;
  filter: drop-shadow(0 8px 24px rgba(0,229,255,0.35));
  animation: coach-icon-float 3s ease-in-out infinite;
}
@keyframes coach-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.coach-title {
  font-family: var(--f-display);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 .25rem;
  color: #F5F9FF;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #F5F9FF 0%, #00E5FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.coach-subtitle {
  text-align: center;
  color: #00E5FF;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 1.25rem !important;
}
.coach-text {
  text-align: center;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin: 0 0 1.5em !important;
  color: var(--text) !important;
  max-width: 460px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.coach-menu {
  justify-content: center !important;
  flex-wrap: wrap; gap: .65rem;
}
.coach-skip {
  opacity: .75;
}
.coach-next {
  min-width: 200px;
  justify-content: center;
}

.coach-card--final .coach-icon {
  font-size: 4.5rem;
  animation: coach-icon-pop .7s cubic-bezier(.2,.7,.2,1);
}
@keyframes coach-icon-pop {
  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 640px) {
  .coach-icon { font-size: 2.75rem; margin-top: 0; }
  .coach-title { font-size: 1.4rem; }
  .coach-text { font-size: .95rem !important; }
}

/* ==========================================================================
   DASH BIENVENIDA — tareas sugeridas hoy
   ========================================================================== */
.dash-bienvenida {
  background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(61,90,254,0.04));
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 16px;
  padding: 1rem 1.25rem 1.1rem;
  margin: 0 0 1.25rem;
  animation: dash-welcome-in .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes dash-welcome-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-bienvenida__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .85rem;
}
.dash-bienvenida__head h3 {
  margin: 0; font-size: 1.05rem; color: var(--text);
  font-family: var(--f-display); font-weight: 600;
}
.dash-bienvenida__items {
  display: flex; flex-direction: column; gap: .5rem;
}
.dash-bienvenida__item {
  display: flex; align-items: center; gap: .85rem;
  padding: .65rem .85rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: all .15s;
}
.dash-bienvenida__item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(0,229,255,0.25);
}
.dash-bienvenida__icon { font-size: 1.5rem; flex-shrink: 0; }
.dash-bienvenida__body { flex: 1; min-width: 0; }
.dash-bienvenida__body strong { display: block; font-size: .95rem; font-weight: 600; color: var(--text); }
.dash-bienvenida__body small { display: block; color: var(--text-mute); font-size: .82rem; margin-top: .1rem; }
.dash-bienvenida__item .btn-primary { flex-shrink: 0; }
.btn-sm { padding: .35rem .8rem; font-size: .8rem; }
@media (max-width: 640px) {
  .dash-bienvenida__item { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .dash-bienvenida__item .btn-primary { align-self: stretch; justify-content: center; }
}

/* ==========================================================================
   BUSCADOR GLOBAL (Ctrl+K palette)
   ========================================================================== */
.bg-overlay {
  position: fixed; inset: 0;
  background: rgba(6,8,15,0.78);
  backdrop-filter: blur(10px);
  z-index: 700;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 2rem;
  opacity: 0; transition: opacity .18s;
}
.bg-overlay--in { opacity: 1; }
.bg-card {
  background: linear-gradient(135deg, rgba(16,23,42,0.99), rgba(11,15,28,0.99));
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 16px;
  width: 100%; max-width: 680px;
  box-shadow: 0 30px 80px -10px rgba(0,229,255,0.35);
  overflow: hidden;
}
.bg-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bg-head__icon { font-size: 1.2rem; }
.bg-head input {
  flex: 1;
  background: transparent;
  border: none; outline: none;
  font-size: 1.1rem;
  color: var(--text);
  font-family: inherit;
  padding: .25rem 0;
}
.bg-head__hint { font-size: .72rem; color: var(--text-mute); letter-spacing: .04em; }
.bg-resultados {
  list-style: none; padding: .35rem 0; margin: 0;
  max-height: 56vh; overflow-y: auto;
}
.bg-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .65rem 1.1rem;
  cursor: pointer;
  transition: background .12s;
}
.bg-item:hover, .bg-item--sel {
  background: rgba(0,229,255,0.08);
}
.bg-item__icon { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.bg-item__body { flex: 1; min-width: 0; }
.bg-item__body strong { display: block; font-size: .95rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-item__body small { display: block; color: var(--text-mute); font-size: .78rem; margin-top: .1rem; }
.bg-item__chip {
  font-size: .68rem; letter-spacing: .08em; font-weight: 700;
  color: var(--c-primary); padding: .15rem .5rem;
  border: 1px solid rgba(0,229,255,0.3); border-radius: 6px;
  flex-shrink: 0; text-transform: uppercase;
}
.bg-empty { padding: 1.5rem; text-align: center; color: var(--text-mute); font-size: .9rem; }
.bg-foot {
  padding: .55rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: .72rem; color: var(--text-mute);
  display: flex; justify-content: space-between;
  background: rgba(0,0,0,0.2);
}
@media (max-width: 640px) {
  .bg-overlay { padding-top: 3rem; }
  .bg-head__hint { display: none; }
}

/* ==========================================================================
   HERO BUTTON — el botón "✦ Cargar un costo" prominente en pantallas
   ========================================================================== */
.cw-hero-btn {
  padding: .85rem 1.6rem !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #00E5FF, #3D5AFE) !important;
  box-shadow: 0 8px 24px -6px rgba(0,229,255,0.55), 0 0 0 1px rgba(0,229,255,0.3) !important;
  color: #06080F !important;
  text-shadow: none !important;
  letter-spacing: .01em;
  transition: all .22s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}
.cw-hero-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%);
  transition: transform .6s;
}
.cw-hero-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 36px -6px rgba(0,229,255,0.7), 0 0 0 1px rgba(0,229,255,0.5) !important;
}
.cw-hero-btn:hover::before { transform: translateX(100%); }
.cw-hero-btn:active { transform: translateY(0) scale(.99); }

body[data-tactil="1"] .cw-hero-btn {
  padding: 1.1rem 2rem !important;
  font-size: 1.2rem !important;
}

/* ==========================================================================
   WIZARD DE CARGA DE COSTOS — "un punto, no un montón"
   ========================================================================== */
.cw-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at top, rgba(0,229,255,0.08), transparent 60%), rgba(6,8,15,0.92);
  backdrop-filter: blur(14px);
  z-index: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; overflow-y: auto;
  opacity: 0; transition: opacity .25s;
}
.cw-overlay--in { opacity: 1; }
.cw-card {
  background: linear-gradient(135deg, rgba(16,23,42,0.98), rgba(11,15,28,0.98));
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 20px;
  padding: 1.75rem 2rem 1.5rem;
  max-width: 820px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 30px 80px -10px rgba(0,229,255,0.30);
  position: relative;
  animation: cw-card-in .42s cubic-bezier(.2,.7,.2,1);
}
@keyframes cw-card-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.cw-step-bar {
  display: flex; gap: 8px;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.cw-step {
  width: 56px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  transition: all .25s;
}
.cw-step--on { background: linear-gradient(90deg, #00E5FF, #3DF5A7); box-shadow: 0 0 12px rgba(0,229,255,.5); }
.cw-step--done { background: rgba(61,245,167,0.5); }

.cw-eyebrow {
  display: block; text-align: center;
  font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: .35rem;
}
.cw-title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin: .2rem 0 .4rem;
  color: #F5F9FF;
  letter-spacing: -.01em;
}
.cw-sub {
  text-align: center;
  color: var(--text-dim);
  margin: 0 0 1.5rem;
  font-size: .98rem;
}

/* ========== PASO 1: grupos ========== */
.cw-grupos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.cw-grupo-card {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.5rem .75rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.2,.7,.2,1);
  position: relative;
  color: var(--text);
  font-family: inherit;
  --gc: #00E5FF;
}
.cw-grupo-card:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: var(--gc);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 12px 28px -8px var(--gc);
}
.cw-grupo-card:active:not(:disabled) { transform: translateY(-2px); }
.cw-grupo-card--off { opacity: .35; cursor: not-allowed; }
.cw-grupo-card__icon {
  font-size: 2.4rem; line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.cw-grupo-card__lbl {
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
}
.cw-grupo-card__count {
  font-size: .72rem;
  color: var(--text-mute);
  font-family: var(--f-mono);
}

/* ========== PASO 2: categorías ========== */
.cw-cat-lista {
  display: flex; flex-direction: column; gap: .55rem;
  margin-bottom: 1.5rem;
  max-height: 56vh;
  overflow-y: auto;
}
.cw-cat-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.2,.7,.2,1);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  --gc: #00E5FF;
}
.cw-cat-card:hover {
  transform: translateX(4px);
  border-color: var(--gc);
  background: rgba(255,255,255,0.06);
}
.cw-cat-card__icon { font-size: 1.5rem; flex-shrink: 0; }
.cw-cat-card__body { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.cw-cat-card__body strong { font-size: 1rem; font-weight: 600; }
.cw-cat-card__body small { color: var(--text-mute); font-family: var(--f-mono); font-size: .82rem; }
.cw-cat-card__arrow {
  font-size: 1.4rem;
  color: var(--gc);
  font-weight: 700;
  transition: transform .2s;
}
.cw-cat-card:hover .cw-cat-card__arrow { transform: translateX(4px); }

.cw-chip {
  display: inline-block; padding: .15rem .55rem;
  border-radius: 999px; font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; align-self: flex-start;
}
.cw-chip--ok { background: rgba(61,245,167,0.15); color: #3DF5A7; }
.cw-chip--herd { background: rgba(255,179,0,0.15); color: #FFB300; }
.cw-chip--off { background: rgba(255,255,255,0.08); color: var(--text-mute); }

/* ========== PASO 3: monto + numpad ========== */
.cw-input-monto-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
  max-width: 460px; margin: 1rem auto 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, rgba(0,229,255,0.06), rgba(0,229,255,0.02));
  border: 2px solid rgba(0,229,255,0.3);
  border-radius: 18px;
  box-shadow: 0 8px 30px -8px rgba(0,229,255,0.4);
}
.cw-input-monto__pre {
  font-size: 2.4rem; color: var(--c-primary);
  font-family: var(--f-display); font-weight: 700;
}
.cw-input-monto {
  flex: 1;
  background: transparent !important;
  border: none !important;
  font-size: 3rem !important;
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  color: #F5F9FF !important;
  outline: none !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left;
}
.cw-input-monto::placeholder { color: rgba(255,255,255,0.18); }
.cw-hint {
  text-align: center; color: var(--text-mute);
  font-size: .85rem; margin: 0 0 1.5rem;
}
.cw-hint strong { color: var(--c-primary); font-family: var(--f-mono); }

.cw-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  max-width: 360px; margin: 0 auto 1.25rem;
}
.cw-key {
  padding: 1.1rem 0;
  font-size: 1.6rem; font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--f-display);
  transition: all .12s;
  user-select: none;
}
.cw-key:hover { background: rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.35); color: var(--c-primary); }
.cw-key:active { transform: scale(.96); }
.cw-key--del { background: rgba(255,82,82,0.08); color: #FF7A7A; font-size: 1.4rem; }
.cw-key--del:hover { background: rgba(255,82,82,0.15); border-color: rgba(255,82,82,0.35); }

.cw-msg {
  text-align: center; padding: .65rem .9rem;
  border-radius: 10px; margin: .65rem 0 0;
  font-weight: 600;
}
.cw-msg--ok { background: rgba(61,245,167,0.1); color: #3DF5A7; border: 1px solid rgba(61,245,167,0.3); }
.cw-msg--error { background: rgba(255,82,82,0.1); color: #FF7A7A; border: 1px solid rgba(255,82,82,0.3); }

/* ========== PASO 4: final ========== */
.cw-paso--final { text-align: center; padding: 1rem 0; }
.cw-success-icon {
  font-size: 5rem; line-height: 1;
  margin: 1rem auto;
  animation: cw-pop .6s cubic-bezier(.2,.7,.2,1);
}
@keyframes cw-pop {
  0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(6deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.cw-menu {
  margin: 1.25rem 0 0 !important;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.cw-menu .btn-primary, .cw-menu .btn-ghost { min-width: 160px; justify-content: center; }
.cw-menu--final .btn-primary { min-width: 220px; }

@media (max-width: 640px) {
  .cw-card { padding: 1.25rem 1.1rem 1rem; max-height: 100vh; height: 100vh; border-radius: 0; }
  .cw-overlay { padding: 0; }
  .cw-grupos-grid { grid-template-columns: repeat(2, 1fr); }
  .cw-grupo-card__icon { font-size: 2rem; }
  .cw-input-monto { font-size: 2.2rem !important; }
  .cw-input-monto__pre { font-size: 1.8rem; }
}

/* ==========================================================================
   Wizard compra/receta: líneas, sub-modal, chips
   ========================================================================== */
.cw-grupo-card--sel {
  border-color: var(--gc, #00E5FF) !important;
  background: rgba(0,229,255,0.08) !important;
  box-shadow: 0 0 0 2px var(--gc, #00E5FF), 0 8px 24px -8px var(--gc, #00E5FF) !important;
}
.cw-lineas-list {
  list-style: none; padding: 0; margin: .5rem auto 1rem;
  max-width: 540px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.cw-linea-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem 1rem;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cw-linea-item:last-child { border-bottom: none; }
.cw-linea-item__body { flex: 1; min-width: 0; }
.cw-linea-item__body strong { display: block; font-size: .95rem; color: var(--text); }
.cw-linea-item__body small { display: block; color: var(--text-mute); font-size: .8rem; margin-top: .1rem; }
.cw-linea-item__del {
  background: rgba(255,82,82,0.08);
  border: 1px solid rgba(255,82,82,0.25);
  color: #FF7A7A;
  border-radius: 6px;
  width: 28px; height: 28px;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.cw-linea-item__del:hover { background: rgba(255,82,82,0.18); }
.cw-empty {
  padding: 1.25rem; text-align: center;
  color: var(--text-mute); font-style: italic;
}
.cw-total-row {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 540px; margin: 0 auto 1rem;
  padding: .85rem 1.1rem;
  background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(61,90,254,0.04));
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 12px;
}
.cw-total-row strong { font-size: 1.2rem; color: var(--c-primary); font-family: var(--f-display); }

.cw-resumen {
  max-width: 540px; margin: 0 auto 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: var(--text);
  font-size: .92rem;
}
.cw-resumen-list { list-style: none; padding: 0 0 0 .5rem; margin: 0; }
.cw-resumen-list li { padding: .25rem 0; font-size: .88rem; }

.cw-chips-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.cw-chip-btn {
  padding: .3rem .7rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: .82rem; cursor: pointer;
  transition: all .12s;
}
.cw-chip-btn:hover { color: var(--c-primary); border-color: var(--c-primary); background: rgba(0,229,255,0.08); }

/* Sub-modal sobre el modal */
.cw-sub-overlay {
  position: fixed; inset: 0;
  background: rgba(6,8,15,0.85);
  z-index: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: cw-sub-in .2s ease-out;
}
@keyframes cw-sub-in { from { opacity: 0; } to { opacity: 1; } }
.cw-sub-card {
  background: #11182B;
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 80px -10px rgba(0,229,255,0.4);
}
.cw-sub-card h3 {
  margin: 0 0 1rem;
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--text);
}

/* ==========================================================================
   PANTALLA DECISIONES — cards accionables con tu data real
   ========================================================================== */
.dec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.1rem;
}
.dec-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-mute);
  font-size: 1rem;
  font-style: italic;
}
.dec-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  max-width: 540px; margin: 0 auto;
}
.dec-vacio__icon { font-size: 3.5rem; margin-bottom: 1rem; }
.dec-vacio h3 { margin: 0 0 .65rem; font-size: 1.2rem; }
.dec-vacio p { color: var(--text-mute); font-size: .95rem; line-height: 1.5; }

.dec-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(11,15,28,0.4));
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--dec-c, #00E5FF);
  border-radius: 16px;
  padding: 1.1rem 1.25rem 1rem;
  display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.dec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -12px var(--dec-c, #00E5FF);
}
.dec-card--alta { background: linear-gradient(180deg, rgba(255,82,82,0.05), rgba(11,15,28,0.5)); }
.dec-card--media { background: linear-gradient(180deg, rgba(255,179,0,0.05), rgba(11,15,28,0.5)); }
.dec-card--info { background: linear-gradient(180deg, rgba(61,245,167,0.04), rgba(11,15,28,0.5)); }

.dec-card__head {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .85rem;
}
.dec-card__icon {
  font-size: 2rem; line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px var(--dec-c, #00E5FF));
}
.dec-card__title {
  margin: 0 0 .15rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--text);
  font-weight: 600;
}
.dec-card__urg {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dec-c, #00E5FF);
}

.dec-progreso {
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin: 0 0 .85rem;
}
.dec-progreso__bar {
  height: 100%;
  border-radius: 999px;
  transition: width .35s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 12px currentColor;
}

.dec-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: .5rem;
  margin-bottom: .85rem;
  padding: .6rem .75rem;
  background: rgba(0,0,0,0.18);
  border-radius: 10px;
}
.dec-metric { text-align: center; }
.dec-metric__lbl {
  display: block;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .15rem;
}
.dec-metric__val {
  display: block;
  font-size: .95rem;
  color: var(--text);
  font-family: var(--f-mono);
  font-weight: 600;
}

.dec-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 .85rem;
  font-size: .9rem;
}
.dec-lista li {
  padding: .35rem 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.dec-lista li:last-child { border-bottom: none; }

.dec-accion {
  background: rgba(255,255,255,0.025);
  border-left: 2px solid var(--dec-c, #00E5FF);
  padding: .65rem .85rem;
  border-radius: 0 8px 8px 0;
  margin-bottom: .85rem;
}
.dec-accion strong {
  display: block;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dec-c, #00E5FF);
  margin-bottom: .25rem;
}
.dec-accion p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.dec-card__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  font-size: .92rem !important;
  padding: .6rem 1rem !important;
}

@media (max-width: 540px) {
  .dec-grid { grid-template-columns: 1fr; gap: .85rem; }
  .dec-card { padding: 1rem; }
  .dec-card__title { font-size: .98rem; }
}

/* ==========================================================================
   COACH MARKS — flecha + tooltip animado hacia el botón ✦
   ========================================================================== */
.coach-mark {
  position: absolute;
  z-index: 350;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  transition: opacity .25s, transform .25s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.coach-mark--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.coach-mark__arrow {
  text-align: center;
  font-size: 2rem;
  color: #FFB300;
  filter: drop-shadow(0 0 12px rgba(255,179,0,0.6));
  animation: cm-bounce 1.2s ease-in-out infinite;
  margin-bottom: 2px;
}
@keyframes cm-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.coach-mark__bubble {
  position: relative;
  background: linear-gradient(135deg, #FFB300, #FF7A59);
  color: #06080F;
  padding: .75rem 2.25rem .75rem 1rem;
  border-radius: 12px;
  max-width: 280px;
  box-shadow: 0 12px 32px -6px rgba(255,179,0,0.5);
  pointer-events: auto;
  animation: cm-pop .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes cm-pop {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.coach-mark__bubble strong { display: block; font-size: .95rem; line-height: 1.25; }
.coach-mark__bubble small { display: block; font-size: .78rem; opacity: .8; margin-top: .15rem; }
.coach-mark__close {
  position: absolute; top: .35rem; right: .45rem;
  background: rgba(0,0,0,0.15); border: none;
  color: #06080F; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center;
}
.coach-mark__close:hover { background: rgba(0,0,0,0.3); }

/* Margen en vivo (wizard de producto) */
.cw-margen-live {
  max-width: 460px; margin: 0 auto 1rem;
  padding: .9rem 1.1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.cw-margen-row {
  display: flex; justify-content: space-between;
  padding: .25rem 0;
  font-size: .92rem;
}
.cw-margen-row span { color: var(--text-mute); }
.cw-margen-row strong { color: var(--text); font-family: var(--f-mono); }
.cw-margen-row--ganancia {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: .25rem; padding-top: .5rem;
}
.cw-margen-semaforo {
  display: flex; align-items: baseline; justify-content: center; gap: .5rem;
  padding: .85rem 0 .35rem;
  margin-top: .35rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cw-margen-pct {
  font-size: 2.4rem; font-weight: 700;
  font-family: var(--f-display);
  transition: color .25s, text-shadow .25s;
}
.cw-margen-lbl { color: var(--text-mute); font-size: .9rem; }

.cw-sem--off  .cw-margen-pct { color: var(--text-mute); }
.cw-sem--verde .cw-margen-pct { color: #3DF5A7; text-shadow: 0 0 18px rgba(61,245,167,0.5); }
.cw-sem--ambar .cw-margen-pct { color: #FFB300; text-shadow: 0 0 18px rgba(255,179,0,0.45); }
.cw-sem--rojo  .cw-margen-pct { color: #FF5252; text-shadow: 0 0 18px rgba(255,82,82,0.45); }
.cw-sem-verde-text { color: #3DF5A7; }
.cw-sem-ambar-text { color: #FFB300; }
.cw-sem-rojo-text  { color: #FF5252; }

.cw-cat-card--sel {
  border-color: var(--gc, #00E5FF) !important;
  background: rgba(0,229,255,0.08) !important;
  box-shadow: 0 0 0 2px var(--gc, #00E5FF);
}

/* Sugerencias autocomplete */
.cw-ing-sug {
  list-style: none; padding: 0; margin: .35rem 0 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  max-height: 220px; overflow-y: auto;
  background: rgba(255,255,255,0.02);
}
.cw-ing-sug:empty { display: none; }
.cw-ing-sug li {
  padding: .55rem .75rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .12s;
}
.cw-ing-sug li:last-child { border-bottom: none; }
.cw-ing-sug li:hover { background: rgba(0,229,255,0.08); }
.cw-ing-sug strong { display: block; font-size: .92rem; }
.cw-ing-sug small { display: block; color: var(--text-mute); font-size: .78rem; margin-top: .15rem; }

/* Backdrop click hint */
.coach-overlay { cursor: pointer; }
.coach-card { cursor: default; }

/* Sidebar — efecto extra */
.sidebar { transition: width .25s cubic-bezier(.34,1.56,.64,1); }

/* Logo mark — pulsa sutil al hover */
.sb-toggle:hover .logo-mark {
  filter: brightness(1.15) saturate(1.2);
  box-shadow: 0 0 24px rgba(0,229,255,0.6);
}

/* Click ripple universal: aplicable a botones */
.btn-primary, .btn-ghost, .btn-icon, .sb-nav button, .hud-nav button {
  position: relative;
  overflow: hidden;
}

/* Animación de número subiendo */
@keyframes count-up {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.count-up { animation: count-up .4s cubic-bezier(.34,1.56,.64,1); }

/* Resaltado verde / rojo cuando un valor cambia favorable / desfavorable */
@keyframes flash-up {
  0% { background: rgba(61,245,167,0.3); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0% { background: rgba(255,107,138,0.3); }
  100% { background: transparent; }
}
.flash-up { animation: flash-up 1s ease-out; }
.flash-down { animation: flash-down 1s ease-out; }

/* Loading dots */
@keyframes loading-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}
.loading-dots::after {
  display: inline-block;
  content: '.';
  animation: loading-dots 1.4s infinite;
  width: 1em;
  text-align: left;
}

/* Achievement / éxito breve flash */
@keyframes achievement {
  0% { transform: scale(.5); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.achievement-fx { animation: achievement .5s cubic-bezier(.34,1.56,.64,1); }

/* Glow rojo cuando hay alerta crítica */
@keyframes alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,138,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(255,107,138,0); }
}
.alert-active { animation: alert-pulse 1.8s infinite; }

/* Scroll bars custom dark */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(6,8,15,0.6); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,229,255,0.2), rgba(61,90,254,0.2));
  border-radius: 5px;
  border: 2px solid rgba(6,8,15,0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0,229,255,0.5), rgba(61,90,254,0.4));
}

/* Selección de texto */
::selection {
  background: rgba(0,229,255,0.3);
  color: #F5F9FF;
  text-shadow: 0 0 8px var(--c-primary);
}

/* Inputs en general — focus glow */
input, select, textarea {
  transition: all .15s !important;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.15), 0 0 16px rgba(0,229,255,0.1);
}

/* Modo sobrio: apaga efectos */
body[data-sobrio="true"] .pop-in,
body[data-sobrio="true"] .toast,
body[data-sobrio="true"] .kpi-v.changed,
body[data-sobrio="true"] .scanline-fx::after,
body[data-sobrio="true"] .float-fx,
body[data-sobrio="true"] .live-pulse,
body[data-sobrio="true"] .alert-active { animation: none; }
body[data-sobrio="true"] .btn-primary {
  background: var(--text);
  color: var(--bg);
  box-shadow: none;
}
body[data-sobrio="true"] .logo-mark { background: var(--text); color: var(--bg); }
body[data-sobrio="true"] .bg-glow { display: none; }
body[data-sobrio="true"] .sb-nav button.active { box-shadow: inset 3px 0 0 var(--text); }
body[data-sobrio="true"] .tabla tbody tr:hover { transform: none; }
body[data-sobrio="true"] .kpi:hover { transform: none; box-shadow: none; }
body[data-sobrio="true"] .empresa-card:hover { transform: none; }

/* Botones con efecto "press" 3D */
button:active:not(:disabled) {
  transform: translateY(1px) scale(.98) !important;
}

/* Hover focus general en cards */
.table-card:hover {
  border-color: rgba(0,229,255,0.15);
  box-shadow: 0 12px 40px -16px rgba(0,229,255,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
.table-card { transition: all .25s cubic-bezier(.2,.7,.2,1); }

/* Section heads — micro animación de aparición */
.section-head h2 {
  background: linear-gradient(135deg, #F5F9FF 0%, #9AA7BA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   PRODUCT EDITOR — secciones diferenciadas por color
   ============================================================ */
.prod-editor {
  border: 1px solid rgba(0,229,255,0.18);
  max-height: 92vh;
  display: flex; flex-direction: column;
}
.pe-header {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1.25rem;
  background: linear-gradient(120deg,rgba(0,229,255,0.18),rgba(61,90,254,0.22) 60%,rgba(255,64,129,0.12));
  border-bottom: 1px solid var(--border-2);
}
.pe-header__icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#00E5FF,#3D5AFE);
  color: #06080F; font-size: 1.2rem; font-weight: 800;
  box-shadow: 0 0 18px rgba(0,229,255,.4);
}
.pe-header__body { flex: 1; min-width: 0; }
.pe-header__title {
  font-family: var(--f-display);
  font-size: 1.1rem; font-weight: 700; letter-spacing: .02em;
}
.pe-header__code {
  font-size: .65rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .18em;
  font-family: var(--f-mono,monospace);
}
.pe-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: .85rem 1rem 1rem;
}

/* Grid de 2 columnas: en desktop, apilado en mobile */
.pe-cols {
  display: grid;
  gap: .75rem;
  margin-bottom: .75rem;
}
.pe-cols--40-60 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.pe-cols--60-40 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

/* Grids internos del form */
.pe-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .65rem;
}
.pe-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .5rem .65rem;
  align-items: end;
}
.pe-grid-3 .btn-primary { align-self: stretch; padding: 0 1rem; }
.pe-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem .65rem;
}
.pe-grid-4-strategy {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: .5rem .65rem;
  align-items: end;
}
.pe-grid-4-strategy .btn-primary { align-self: stretch; padding: 0 1rem; white-space: nowrap; }

.pe-card {
  position: relative;
  padding: .65rem .8rem .75rem;
  background: rgba(255,255,255,0.012);
  border: 1px solid rgba(255,255,255,0.06);
  border-left-width: 3px;
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.pe-card:hover { background: rgba(255,255,255,0.025); }

.pe-card__head {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 .55rem;
  flex-wrap: wrap;
}
.pe-card__sub {
  font-size: .68rem; color: var(--text-mute);
  letter-spacing: .04em; font-style: italic;
}

/* Inputs compactos dentro del editor */
.prod-editor .field { margin: 0; min-width: 0; }
.prod-editor .field > span {
  font-size: .68rem; letter-spacing: .08em;
  margin-bottom: .15rem;
}
.prod-editor input,
.prod-editor select,
.prod-editor textarea {
  padding: .42rem .6rem;
  font-size: .88rem;
  min-height: 0;
}
.prod-editor textarea { resize: vertical; }

.pe-precio-input { font-size: 1.05rem !important; font-weight: 700; color: #3DF5A7 !important; }
.pe-mult-input   { font-weight: 700; color: #FF4081 !important; }
.pe-margen-input { font-weight: 700; color: #FFB300 !important; }

.pe-hint {
  font-size: .68rem; color: var(--text-mute);
  margin: .35rem 0 0; letter-spacing: .03em;
}

.pe-comp-table {
  max-height: 220px; overflow: auto;
  border: 1px solid rgba(0,229,255,0.18);
}
.pe-comp-table table { font-size: .82rem; }
.pe-comp-table th, .pe-comp-table td { padding: .35rem .4rem; }
.pe-comp-table input,
.pe-comp-table select {
  padding: .3rem .45rem;
  font-size: .82rem;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
/* Sacar las flechitas del number — comen 16-20px y son inútiles */
.pe-comp-table input[type=number] {
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.pe-comp-table input[type=number]::-webkit-outer-spin-button,
.pe-comp-table input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pe-add-row { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.pe-add-row button { padding: .35rem .8rem; font-size: .8rem; }

.pe-menu {
  margin: .75rem 0 0;
  padding: 0;
  display: flex; gap: .5rem; justify-content: flex-end;
  flex-wrap: wrap;
}
.pe-menu button { padding: .5rem 1.1rem; min-width: 120px; }

/* RESPONSIVE: apilar columnas en pantallas chicas */
@media (max-width: 1080px) {
  .pe-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-grid-4-strategy { grid-template-columns: 1fr 1fr; }
  .pe-grid-4-strategy .pe-sugerido { grid-column: 1 / -1; }
  .pe-grid-4-strategy .btn-primary { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .pe-cols--40-60,
  .pe-cols--60-40 { grid-template-columns: 1fr; }
  .pe-grid-2 { grid-template-columns: 1fr; }
  .pe-grid-3 { grid-template-columns: 1fr 1fr; }
  .pe-grid-3 .btn-primary { grid-column: 1 / -1; }
  .pe-body { padding: .65rem .7rem .85rem; }
  .pe-header { padding: .7rem .9rem; }
  .pe-header__title { font-size: 1rem; }
  .pe-costo-big__val { font-size: 1.6rem; }
}
@media (max-width: 520px) {
  .pe-grid-3,
  .pe-grid-4 { grid-template-columns: 1fr; }
  .pe-grid-mini { grid-template-columns: 1fr; }
  .pe-menu button { width: 100%; min-width: 0; }
  .pe-comp-table { font-size: .75rem; }
  .pe-comp-table th, .pe-comp-table td { padding: .3rem .3rem; }
}

.pe-chip {
  display: inline-flex; align-items: center;
  padding: .25rem .65rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,0.25);
}

.pe-card--azul    { border-left-color: #3D5AFE; box-shadow: inset 0 0 0 1px rgba(61,90,254,.06); }
.pe-card--azul:hover    { box-shadow: 0 0 18px rgba(61,90,254,.18), inset 0 0 0 1px rgba(61,90,254,.18); }
.pe-chip--azul    { color: #6E85FF; background: rgba(61,90,254,0.15); }

.pe-card--cyan    { border-left-color: #00E5FF; box-shadow: inset 0 0 0 1px rgba(0,229,255,.07); background: rgba(0,229,255,0.025); }
.pe-card--cyan:hover    { box-shadow: 0 0 22px rgba(0,229,255,.22), inset 0 0 0 1px rgba(0,229,255,.22); }
.pe-chip--cyan    { color: #00E5FF; background: rgba(0,229,255,0.12); }

.pe-card--verde   { border-left-color: #3DF5A7; background: rgba(61,245,167,0.03); }
.pe-card--verde:hover   { box-shadow: 0 0 18px rgba(61,245,167,.18), inset 0 0 0 1px rgba(61,245,167,.18); }
.pe-chip--verde   { color: #3DF5A7; background: rgba(61,245,167,0.12); }

.pe-card--magenta { border-left-color: #FF4081; background: rgba(255,64,129,0.03); }
.pe-card--magenta:hover { box-shadow: 0 0 18px rgba(255,64,129,.18), inset 0 0 0 1px rgba(255,64,129,.18); }
.pe-chip--magenta { color: #FF4081; background: rgba(255,64,129,0.13); }

.pe-card--resumen { border-left-color: #7C4DFF; background: linear-gradient(135deg,rgba(124,77,255,.05),rgba(0,229,255,.04)); }
.pe-chip--info    { color: #B39DFF; background: rgba(124,77,255,0.18); }

.pe-card--costo {
  border-left-color: #FFB300;
  background: linear-gradient(135deg, rgba(255,179,0,0.08), rgba(255,82,82,0.04));
  display: flex; flex-direction: column;
}
.pe-chip--ambar { color: #FFB300; background: rgba(255,179,0,0.15); }

/* Costo dominante */
.pe-costo-big {
  margin: .4rem 0 .6rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,179,0,0.35);
  text-align: center;
  box-shadow: 0 0 22px rgba(255,179,0,0.18);
}
.pe-costo-big__lbl {
  font-size: .62rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .18em;
}
.pe-costo-big__val {
  font-family: var(--f-display);
  font-size: 1.95rem; font-weight: 800;
  color: #FFB300;
  letter-spacing: -.02em;
  text-shadow: 0 0 18px rgba(255,179,0,0.45);
  line-height: 1.1;
}
.pe-grid-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
.pe-grid-mini .pe-kpi { padding: .35rem .5rem; }
.pe-grid-mini .pe-kpi__val { font-size: .9rem; }

/* Precio sugerido inline (dentro de estrategia) */
.pe-sugerido {
  padding: .35rem .65rem;
  border-radius: 8px;
  background: rgba(124,77,255,0.08);
  border: 1px dashed rgba(124,77,255,0.4);
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.pe-sugerido__lbl {
  font-size: .58rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .14em;
}
.pe-sugerido__val {
  font-family: var(--f-display);
  font-size: 1.05rem; font-weight: 800;
  color: #B39DFF;
}
.pe-sugerido__val.on { color: #7C4DFF; text-shadow: 0 0 12px rgba(124,77,255,0.5); }

/* Empty state análisis */
.pe-empty {
  grid-column: 1 / -1;
  padding: .85rem 1rem;
  text-align: center;
  font-size: .82rem;
  color: var(--text-mute);
  font-style: italic;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 8px;
}

.pe-card--gris    { border-left-color: #4A5568; }
.pe-chip--gris    { color: #9AA7BA; background: rgba(154,167,186,0.1); }

/* Botones de acento dentro del editor */
.pe-btn--cyan  { color: #00E5FF !important; border-color: rgba(0,229,255,.35) !important; }
.pe-btn--cyan:hover  { background: rgba(0,229,255,.10) !important; }
.pe-btn--lima  { color: #3DF5A7 !important; border-color: rgba(61,245,167,.35) !important; }
.pe-btn--lima:hover  { background: rgba(61,245,167,.10) !important; }
.pe-btn--magenta { background: linear-gradient(135deg,#FF4081,#7C4DFF) !important; color: #fff !important; border: none !important; }
.pe-btn--magenta:hover { filter: brightness(1.1); }

/* KPI grid (resumen en vivo) */
.pe-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .5rem;
}
.pe-kpi {
  padding: .5rem .65rem;
  border-radius: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid color-mix(in srgb, var(--kpi-c,#9AA7BA) 28%, transparent);
  border-top: 2px solid var(--kpi-c,#9AA7BA);
  box-shadow: 0 0 12px color-mix(in srgb, var(--kpi-c,#9AA7BA) 12%, transparent);
  transition: transform .15s, box-shadow .25s;
  min-width: 0;
}
.pe-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px color-mix(in srgb, var(--kpi-c,#9AA7BA) 32%, transparent);
}
.pe-kpi__lbl {
  display: flex; align-items: center; gap: .25rem;
  font-size: .58rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-kpi__lbl span {
  color: var(--kpi-c,#9AA7BA);
  font-size: .75rem;
}
.pe-kpi__val {
  font-family: var(--f-display);
  font-size: 1.05rem; font-weight: 800;
  color: var(--kpi-c,#F5F9FF);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 1080px) { .pe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .pe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   DASHBOARD — bloques por concepto (costo → decisión → proy → catálogo)
   ============================================================ */
.dash-block {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
  border-left-width: 4px;
  transition: box-shadow .25s;
}
.dash-block__head {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}

.dash-block--costo {
  border-left-color: #FFB300;
  background: linear-gradient(135deg,rgba(255,179,0,0.06),rgba(255,82,82,0.03));
}
.dash-block--decision { border-left-color: #00E5FF; }
.dash-block--proy     { border-left-color: #7C4DFF; }
.dash-block--catalogo { border-left-color: #4A5568; }

.dash-costo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .75rem;
}

.dash-big {
  position: relative;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 3px solid var(--big-c, #9AA7BA);
  box-shadow: 0 0 18px color-mix(in srgb, var(--big-c,#9AA7BA) 14%, transparent);
  transition: transform .15s, box-shadow .25s;
}
.dash-big:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px color-mix(in srgb, var(--big-c,#9AA7BA) 32%, transparent);
}
.dash-big__lbl {
  font-size: .65rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: .25rem;
}
.dash-big__val {
  font-family: var(--f-display);
  font-size: 1.7rem; font-weight: 800;
  color: var(--big-c, #F5F9FF);
  letter-spacing: -.02em;
  text-shadow: 0 0 16px color-mix(in srgb, var(--big-c,#9AA7BA) 35%, transparent);
  line-height: 1.1;
}
.dash-big__sub {
  font-size: .68rem; color: var(--text-mute);
  margin-top: .3rem;
  letter-spacing: .02em;
}
.dash-big--mp     { --big-c: #FFB300; }
.dash-big--fijos  { --big-c: #FF5252; }
.dash-big--total  { --big-c: #7C4DFF; }
.dash-big--pe     { --big-c: #00E5FF; }
.dash-big--stock  { --big-c: #3DF5A7; }

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}
.dash-kpi-grid--small { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dash-cat-cols {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  gap: 1rem;
}
.dash-tips__list {
  padding-left: 1.2em;
  line-height: 1.7;
  font-size: .88rem;
  margin: 0;
}
.dash-tips__list a { color: var(--c-primary,#00E5FF); text-decoration: none; }
.dash-tips__list a:hover { text-decoration: underline; }

@media (max-width: 1280px) {
  .dash-costo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .dash-costo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpi-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-cat-cols   { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .dash-costo-grid,
  .dash-kpi-grid,
  .dash-kpi-grid--small { grid-template-columns: 1fr; }
  .dash-big__val { font-size: 1.4rem; }
}

/* ============================================================
   CHIPS por color — para tablas (Recetas/Productos/Ingredientes)
   ============================================================ */
.chip--cyan {
  background: rgba(0,229,255,0.12) !important;
  color: #00E5FF !important;
  border-color: rgba(0,229,255,0.35) !important;
  text-shadow: 0 0 8px rgba(0,229,255,0.4);
}
.chip--verde {
  background: rgba(61,245,167,0.12) !important;
  color: #3DF5A7 !important;
  border-color: rgba(61,245,167,0.30) !important;
  text-shadow: 0 0 8px rgba(61,245,167,0.4);
}
.chip--ambar {
  background: rgba(255,179,0,0.13) !important;
  color: #FFB300 !important;
  border-color: rgba(255,179,0,0.35) !important;
  text-shadow: 0 0 8px rgba(255,179,0,0.4);
}
.chip--rojo {
  background: rgba(255,82,82,0.13) !important;
  color: #FF5252 !important;
  border-color: rgba(255,82,82,0.40) !important;
  text-shadow: 0 0 8px rgba(255,82,82,0.4);
}
.chip--magenta {
  background: rgba(255,64,129,0.12) !important;
  color: #FF4081 !important;
  border-color: rgba(255,64,129,0.35) !important;
  text-shadow: 0 0 8px rgba(255,64,129,0.4);
}
.chip--costo {
  background: rgba(255,179,0,0.08) !important;
  color: #FFCD55 !important;
  border-color: rgba(255,179,0,0.28) !important;
  font-size: .82rem !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  padding: .25rem .65rem !important;
}
.chip--costo strong {
  font-family: var(--f-display);
  font-weight: 700;
  color: #FFB300;
}

/* ============================================================
   ALERTAS — cards con borde por severidad
   ============================================================ */
.alert-list { display: flex; flex-direction: column; gap: .65rem; }
.alert-card {
  padding: .75rem 1rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.06);
  border-left-width: 4px;
  transition: background .2s, box-shadow .25s;
}
.alert-card:hover { background: rgba(255,255,255,0.03); }
.alert-card--crit { border-left-color: #FF5252; box-shadow: inset 0 0 0 1px rgba(255,82,82,.08); }
.alert-card--crit:hover { box-shadow: 0 0 18px rgba(255,82,82,.22), inset 0 0 0 1px rgba(255,82,82,.18); }
.alert-card--warn { border-left-color: #FFB300; }
.alert-card--info { border-left-color: #00E5FF; }
.alert-card--leida { opacity: .55; }
.alert-card__top {
  display: flex; align-items: center; gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}
.alert-card__type {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.alert-card__date {
  margin-left: auto;
  font-size: .7rem; color: var(--text-mute);
}
.alert-card__title {
  font-family: var(--f-display);
  font-size: .98rem; font-weight: 600;
  margin: .15rem 0;
}
.alert-card__detail {
  font-size: .82rem;
  color: var(--text-dim);
  margin-bottom: .4rem;
}
.alert-card__actions {
  display: flex; gap: .4rem; align-items: center;
  flex-wrap: wrap;
}
.btn-sm { padding: .3rem .65rem !important; font-size: .78rem !important; }

@keyframes alert-pulse-glow {
  0%,100% { text-shadow: 0 0 8px rgba(255,82,82,0.6); }
  50%     { text-shadow: 0 0 18px rgba(255,82,82,1), 0 0 28px rgba(255,82,82,0.7); }
}
.alert-pulse {
  color: #FF5252 !important;
  animation: alert-pulse-glow 1.4s ease-in-out infinite;
}

/* ============================================================
   COMPOSICIÓN DE COSTOS — donuts + barras + tablas
   ============================================================ */
.comp-leyenda {
  margin-top: .85rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.leyenda-item {
  display: flex; align-items: center; gap: .55rem;
  font-size: .85rem;
}
.leyenda-item .dot {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.leyenda-total {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed rgba(255,255,255,0.1);
  font-size: .82rem;
  color: var(--text-mute);
}
.leyenda-total strong {
  color: var(--c-primary, #00E5FF);
  font-family: var(--f-display);
  font-size: 1rem;
}

.stack-bar {
  display: flex;
  height: 24px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.stack-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700;
  color: rgba(6,8,15,0.85);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  overflow: hidden; white-space: nowrap;
  transition: filter .2s;
}
.stack-seg:hover { filter: brightness(1.15); }
.stack-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; font-size: .8rem; color: var(--text-mute); font-style: italic;
}

.comp-tabla {
  margin-top: .75rem;
  display: flex; flex-direction: column; gap: .35rem;
  max-height: 240px; overflow-y: auto;
  padding-right: .3rem;
}
.comp-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.5fr) minmax(60px, 2fr) minmax(110px, auto);
  gap: .55rem;
  align-items: center;
  font-size: .82rem;
  padding: .25rem .35rem;
  border-radius: 6px;
  transition: background .15s;
}
.comp-row:hover { background: rgba(255,255,255,0.025); }
.comp-row__lbl {
  display: flex; align-items: center; gap: .35rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comp-row__lbl span { font-size: .95rem; }
.comp-row__bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.comp-row__fill {
  height: 100%;
  border-radius: 4px;
  transition: width .35s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 6px currentColor;
}
.comp-row__val {
  text-align: right;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.comp-row__val small {
  display: inline-block;
  margin-left: .25rem;
  color: var(--text-mute);
  font-size: .72rem;
}
.empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-mute);
  font-style: italic;
  font-size: .85rem;
}

@media (max-width: 720px) {
  .comp-row { grid-template-columns: 1fr; gap: .2rem; }
  .comp-row__val { text-align: left; }
}

/* ============================================================
   VENTAS — tabs + POS grid
   ============================================================ */
.vt-tabs {
  display: flex; gap: .35rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-2, rgba(255,255,255,0.08));
  padding-bottom: 0;
  flex-wrap: wrap;
}
.vt-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: .55rem 1.1rem;
  font-size: .88rem; font-weight: 600;
  color: var(--text-dim);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: all .2s;
}
.vt-tab:hover { color: var(--c-primary); background: rgba(0,229,255,0.04); }
.vt-tab.active {
  color: var(--c-primary);
  background: rgba(0,229,255,0.08);
  border-color: rgba(0,229,255,0.2);
  border-bottom-color: transparent;
  box-shadow: 0 -2px 0 var(--c-primary) inset;
}

.vt-monto {
  padding: .35rem .8rem !important;
  font-size: .82rem !important;
  font-family: var(--f-mono);
}

/* POS grid */
.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .55rem;
  max-height: 480px;
  overflow-y: auto;
  padding: .2rem;
}
.pos-card {
  border: 1px solid rgba(0,229,255,0.2);
  background: rgba(0,229,255,0.05);
  border-radius: 10px;
  padding: .65rem .55rem;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column;
  gap: .35rem;
  transition: all .15s;
  min-height: 78px;
}
.pos-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,229,255,0.3);
  border-color: rgba(0,229,255,0.5);
}
.pos-card:active { transform: translateY(0); }
.pos-card__name {
  font-size: .82rem; font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pos-card__price {
  font-family: var(--f-display);
  font-size: 1rem; font-weight: 700;
  color: #3DF5A7;
  margin-top: auto;
}

.pos-cart {
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: .65rem;
}
.pos-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: .5rem;
  align-items: center;
  padding: .4rem .35rem;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  font-size: .85rem;
}
.pos-row__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-row__qty {
  display: flex; align-items: center; gap: .25rem;
  font-family: var(--f-mono);
}
.pos-row__qty button {
  width: 24px; height: 24px;
  border: 1px solid rgba(0,229,255,0.25);
  background: rgba(0,229,255,0.05);
  border-radius: 4px;
  color: var(--c-primary);
  cursor: pointer; font-weight: 700;
  padding: 0;
}
.pos-row__qty button:hover { background: rgba(0,229,255,0.15); }
.pos-row__sub {
  font-weight: 600; color: #3DF5A7;
  white-space: nowrap;
}
.pos-row__del {
  border: none; background: transparent;
  color: var(--c-danger, #FF5252);
  cursor: pointer; font-size: 1rem;
  padding: 0 .35rem;
}
.pos-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .75rem;
  background: linear-gradient(135deg, rgba(61,245,167,0.08), rgba(0,229,255,0.04));
  border: 1px solid rgba(61,245,167,0.25);
  border-radius: 10px;
  margin-bottom: .65rem;
}
.pos-total > span {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-mute);
}

#loteTxt {
  width: 100%;
  font-family: var(--f-mono);
  font-size: .82rem;
  padding: .75rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text);
  resize: vertical;
}
#loteTxt:focus {
  outline: none;
  border-color: var(--c-primary);
  background: rgba(0,0,0,0.45);
}

@media (max-width: 720px) {
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ============================================================
   HELP — tooltips inline, popovers, banners "primera vez"
   ============================================================ */
.help-tip {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(0,229,255,0.15);
  border: 1px solid rgba(0,229,255,0.4);
  color: #00E5FF;
  font-size: .7rem; font-weight: 700;
  font-family: var(--f-sans);
  cursor: help;
  margin-left: .35rem;
  vertical-align: middle;
  transition: all .15s;
  user-select: none;
}
.help-tip:hover {
  background: rgba(0,229,255,0.3);
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(0,229,255,0.5);
}

.help-popover {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  padding: .7rem .85rem;
  background: linear-gradient(135deg, #0B0F1C, #06080F);
  border: 1px solid rgba(0,229,255,0.35);
  border-radius: 10px;
  color: var(--text, #F5F9FF);
  font-size: .82rem;
  line-height: 1.45;
  box-shadow: 0 8px 32px rgba(0,229,255,0.25), 0 0 0 1px rgba(0,229,255,0.08);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
  pointer-events: auto;
}
.help-popover.on { opacity: 1; transform: translateY(0); }
.help-popover strong { color: #00E5FF; }
.help-popover code {
  background: rgba(0,229,255,0.1);
  padding: 0 .25rem;
  border-radius: 3px;
  font-size: .78rem;
  color: #00E5FF;
}
.help-popover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: #0B0F1C;
  border-right: 1px solid rgba(0,229,255,0.35);
  border-bottom: 1px solid rgba(0,229,255,0.35);
  transform: translateX(-50%) rotate(45deg);
}
.help-popover.below::after {
  top: -6px; bottom: auto;
  border-right: none; border-bottom: none;
  border-left: 1px solid rgba(0,229,255,0.35);
  border-top: 1px solid rgba(0,229,255,0.35);
}

/* Banners "primera vez" */
.help-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .85rem;
  align-items: start;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--banner-c, #00E5FF) 30%, transparent);
  border-left: 4px solid var(--banner-c, #00E5FF);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--banner-c, #00E5FF) 10%, transparent),
    color-mix(in srgb, var(--banner-c, #00E5FF) 4%, transparent));
  position: relative;
  animation: help-banner-in .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes help-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.help-banner__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--banner-c, #00E5FF) 18%, transparent);
  font-size: 1.3rem;
  flex: 0 0 auto;
  box-shadow: 0 0 14px color-mix(in srgb, var(--banner-c, #00E5FF) 35%, transparent);
}
.help-banner__body {
  min-width: 0;
}
.help-banner__title {
  font-family: var(--f-display);
  font-size: 1rem; font-weight: 700;
  color: var(--banner-c, #00E5FF);
  margin-bottom: .25rem;
}
.help-banner__text {
  font-size: .84rem;
  color: var(--text-dim, #9AA7BA);
  line-height: 1.5;
}
.help-banner__text p { margin: 0 0 .25rem; }
.help-banner__text p:last-child { margin-bottom: 0; }
.help-banner__text ul { margin: .15rem 0; padding-left: 1.2rem; }
.help-banner__text li { margin-bottom: .15rem; }
.help-banner__text strong { color: var(--banner-c, #00E5FF); }
.help-banner__text code {
  background: rgba(255,255,255,0.06);
  padding: 0 .3rem;
  border-radius: 3px;
  font-size: .76rem;
  color: var(--banner-c, #00E5FF);
}
.help-banner__close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-mute, #6B7484);
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  flex: 0 0 auto;
  transition: all .15s;
}
.help-banner__close:hover {
  border-color: var(--banner-c, #00E5FF);
  color: var(--banner-c, #00E5FF);
}

/* Panel lateral mejorado */
#panelAyuda {
  background: linear-gradient(135deg, #0B0F1C, #06080F);
  border-left: 1px solid rgba(0,229,255,0.25);
  box-shadow: -8px 0 32px rgba(0,229,255,0.12);
}
#ayudaCuerpo { font-size: .88rem; line-height: 1.55; }
#ayudaCuerpo p { margin: 0 0 .6rem; }
#ayudaCuerpo ul { margin: .25rem 0 .6rem; padding-left: 1.2rem; }
#ayudaCuerpo li { margin-bottom: .25rem; }
#ayudaCuerpo strong { color: #00E5FF; }
#ayudaCuerpo code {
  background: rgba(0,229,255,0.1);
  padding: 0 .3rem;
  border-radius: 3px;
  font-size: .82rem;
  color: #00E5FF;
}

/* ============================================================
   COSTOS FIJOS — grid de cards ultra-rápido
   ============================================================ */
.cf-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}
.cf-big {
  padding: .7rem .9rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 3px solid var(--big-c, #9AA7BA);
  box-shadow: 0 0 14px color-mix(in srgb, var(--big-c,#9AA7BA) 14%, transparent);
}
.cf-big--total    { --big-c: #FFB300; }
.cf-big--cargados { --big-c: #3DF5A7; }
.cf-big--heredados{ --big-c: #FFB300; }
.cf-big--vacios   { --big-c: #6B7484; }
.cf-big__lbl {
  font-size: .65rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .14em;
}
.cf-big__val {
  font-family: var(--f-display);
  font-size: 1.45rem; font-weight: 800;
  color: var(--big-c);
  margin-top: .15rem;
}

.cf-toolbar {
  display: flex; gap: .55rem;
  align-items: center;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.cf-toolbar input[type="text"] {
  flex: 1; min-width: 240px;
  padding: .5rem .8rem;
  font-size: .9rem;
}

.cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .65rem;
}
.cf-card {
  padding: .7rem .8rem .65rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 4px solid var(--card-c, #7F8C8D);
  display: flex; flex-direction: column;
  gap: .45rem;
  transition: background .15s, box-shadow .25s, transform .12s;
  min-width: 0;
}
.cf-card:hover {
  background: rgba(255,255,255,0.03);
  box-shadow: 0 0 18px color-mix(in srgb, var(--card-c,#7F8C8D) 18%, transparent);
}
.cf-card:focus-within {
  background: rgba(255,255,255,0.04);
  box-shadow: 0 0 22px color-mix(in srgb, var(--card-c,#7F8C8D) 35%, transparent);
}
.cf-card--cargado  { border-left-color: #3DF5A7; }
.cf-card--heredado { border-left-color: #FFB300; }
.cf-card--vacio    { border-left-color: #4A5568; opacity: .85; }

.cf-card__head {
  display: flex; align-items: center; gap: .45rem;
}
.cf-card__icon { font-size: 1.05rem; }
.cf-card__name {
  flex: 1;
  font-size: .85rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-card__badge {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: .75rem; font-weight: 700;
  flex: 0 0 auto;
}
.cf-card__badge--cargado  { background: rgba(61,245,167,0.18); color: #3DF5A7; box-shadow: 0 0 8px rgba(61,245,167,0.4); }
.cf-card__badge--heredado { background: rgba(255,179,0,0.18);  color: #FFB300; }
.cf-card__badge--vacio    { background: rgba(255,255,255,0.06); color: var(--text-mute); }

.cf-card__input {
  display: flex; align-items: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0 .55rem;
  transition: border-color .15s;
}
.cf-card__input:focus-within {
  border-color: var(--card-c, #00E5FF);
  box-shadow: 0 0 10px color-mix(in srgb, var(--card-c,#00E5FF) 35%, transparent);
}
.cf-card__currency {
  font-family: var(--f-mono);
  color: var(--text-mute);
  font-size: .85rem;
  margin-right: .35rem;
}
.cf-monto {
  flex: 1; min-width: 0;
  background: transparent !important;
  border: none !important;
  padding: .45rem 0 !important;
  font-family: var(--f-display);
  font-size: 1.15rem !important;
  font-weight: 700;
  text-align: right;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.cf-monto::-webkit-outer-spin-button,
.cf-monto::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cf-monto:focus { outline: none; }

.cf-card__foot {
  display: flex; gap: .35rem; align-items: center;
}
.cf-notas {
  flex: 1; min-width: 0;
  padding: .3rem .5rem !important;
  font-size: .75rem !important;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  color: var(--text-dim);
}
.cf-card__hint {
  font-size: .65rem;
  color: var(--text-mute);
  font-style: italic;
  letter-spacing: .03em;
}

@media (max-width: 720px) {
  .cf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MODO TÁCTIL — escala TODO para pantallas táctiles / mostrador
   ============================================================ */
.btn-on {
  background: rgba(0,229,255,0.15) !important;
  color: #00E5FF !important;
  border-color: rgba(0,229,255,0.4) !important;
  box-shadow: 0 0 12px rgba(0,229,255,0.25);
}

/* Ventas en modo táctil */
[data-tactil="1"] .vt-tab {
  padding: .85rem 1.5rem;
  font-size: 1.05rem;
}
[data-tactil="1"] .pe-precio-input { font-size: 1.6rem !important; padding: .8rem .9rem !important; }
[data-tactil="1"] .pe-card input,
[data-tactil="1"] .pe-card select {
  padding: .7rem .85rem !important;
  font-size: 1.05rem !important;
  min-height: 50px;
}
[data-tactil="1"] .pe-card { padding: 1rem 1.1rem; }
[data-tactil="1"] .pe-card__head { font-size: 1.05rem; margin-bottom: .85rem; }
[data-tactil="1"] .pe-chip { font-size: .8rem; padding: .35rem .85rem; }

/* Quick: botones de monto grandes */
[data-tactil="1"] .vt-monto {
  padding: .8rem 1.4rem !important;
  font-size: 1.05rem !important;
  min-width: 110px;
}

/* POS: grid + cards más grandes */
[data-tactil="1"] .pos-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
  max-height: none;
}
[data-tactil="1"] .pos-card {
  padding: 1rem .85rem;
  min-height: 110px;
}
[data-tactil="1"] .pos-card__name { font-size: 1rem; }
[data-tactil="1"] .pos-card__price { font-size: 1.2rem; }

/* POS carrito: filas y botones +/- grandes */
[data-tactil="1"] .pos-cart { max-height: 500px; }
[data-tactil="1"] .pos-row {
  padding: .65rem .5rem;
  font-size: 1rem;
}
[data-tactil="1"] .pos-row__qty button {
  width: 38px !important;
  height: 38px !important;
  font-size: 1.1rem !important;
  border-radius: 8px !important;
}
[data-tactil="1"] .pos-row__qty span { font-size: 1.05rem; min-width: 24px; text-align: center; }
[data-tactil="1"] .pos-row__del { font-size: 1.3rem; padding: .35rem .55rem; }

/* Botones primarios gigantes en táctil */
[data-tactil="1"] .pe-menu .btn-primary {
  padding: 1rem 1.6rem !important;
  font-size: 1.1rem !important;
  min-width: 240px !important;
}
[data-tactil="1"] .pos-total {
  padding: 1rem 1.2rem;
}
[data-tactil="1"] .pos-total strong { font-size: 2.1rem !important; }
[data-tactil="1"] .pe-costo-big__val { font-size: 2.4rem; }

/* Costos fijos modo táctil */
[data-tactil="1"] .cf-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
[data-tactil="1"] .cf-card { padding: 1rem 1.1rem .95rem; }
[data-tactil="1"] .cf-card__name { font-size: 1.05rem; }
[data-tactil="1"] .cf-card__icon { font-size: 1.4rem; }
[data-tactil="1"] .cf-card__badge { width: 30px; height: 30px; font-size: 1rem; }
[data-tactil="1"] .cf-card__input { padding: 0 .9rem; }
[data-tactil="1"] .cf-monto {
  padding: .75rem 0 !important;
  font-size: 1.55rem !important;
}
[data-tactil="1"] .cf-card__currency { font-size: 1.1rem; }
[data-tactil="1"] .cf-notas { padding: .5rem .65rem !important; font-size: .9rem !important; }
[data-tactil="1"] .cf-big__val { font-size: 1.8rem; }
[data-tactil="1"] .cf-toolbar input[type="text"] {
  padding: .75rem 1rem;
  font-size: 1rem;
}
[data-tactil="1"] .cf-toolbar select,
[data-tactil="1"] .cf-toolbar button {
  padding: .65rem 1rem;
  font-size: .95rem;
}

/* Headers de grupo en costos fijos */
.cf-group-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .55rem;
  margin: .9rem 0 .25rem;
  padding: .35rem .55rem;
  font-family: var(--f-display);
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--group-c, #00E5FF);
  border-bottom: 1px solid color-mix(in srgb, var(--group-c, #00E5FF) 25%, transparent);
}
.cf-group-head:first-child { margin-top: 0; }
.cf-group-head__count {
  margin-left: auto;
  font-size: .72rem;
  color: var(--text-mute);
  letter-spacing: .04em;
  font-weight: 500;
  text-transform: none;
}
[data-tactil="1"] .cf-group-head { font-size: 1rem; padding: .55rem .7rem; }

/* Costos variables modo táctil */
[data-tactil="1"] .tabla tbody td {
  padding: .85rem .7rem !important;
  font-size: 1rem !important;
}
[data-tactil="1"] .tabla thead th {
  padding: .8rem .7rem;
  font-size: .85rem;
}
[data-tactil="1"] .cv-group-row td {
  font-size: .95rem !important;
  padding: .8rem 1rem !important;
}
[data-tactil="1"] .btn-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 1.05rem !important;
}
[data-tactil="1"] .toolbar input,
[data-tactil="1"] .toolbar select {
  padding: .7rem .9rem;
  font-size: .95rem;
  min-height: 44px;
}
[data-tactil="1"] dialog.dlg {
  font-size: 1.05rem;
}
[data-tactil="1"] dialog.dlg input,
[data-tactil="1"] dialog.dlg select,
[data-tactil="1"] dialog.dlg textarea {
  padding: .7rem .85rem !important;
  font-size: 1.05rem !important;
}

/* ============================================================
   CFG GRID — modal de configuración de ventas
   ============================================================ */
.cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .35rem;
  margin-top: .35rem;
}
.cfg-chip {
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .6rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: .82rem;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.cfg-chip:hover { background: rgba(0,229,255,0.06); border-color: rgba(0,229,255,0.25); }
.cfg-chip input { width: auto !important; margin: 0; flex: 0 0 auto; }
.cfg-chip:has(input:checked) {
  background: rgba(0,229,255,0.1);
  border-color: rgba(0,229,255,0.35);
  color: var(--text);
}
.cfg-add {
  display: flex; gap: .5rem; align-items: center;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.cfg-add input {
  flex: 1; padding: .35rem .6rem;
  font-size: .82rem;
}

/* ============================================================
   TOP BANNER (trial / demo / suspended)
   ============================================================ */
.top-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  padding: .55rem 1rem;
  text-align: center;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.top-banner a, .top-banner button {
  color: inherit;
  text-decoration: underline;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  margin-left: .5rem;
}
.top-banner--trial { background: rgba(255,179,0,0.12); color: #FFB300; }
.top-banner--demo  { background: rgba(124,77,255,0.18); color: #E5DEFF; }
.top-banner--warn  { background: rgba(255,82,82,0.15); color: #FF7A7A; }
body:has(.top-banner:not([hidden])) .pantalla.with-sidebar { padding-top: 3rem; }
body:has(.top-banner:not([hidden])) .sidebar { top: 2.4rem; }

/* ============================================================
   RESPONSIVE GLOBAL — móvil + tablet + táctil
   ============================================================ */

/* Hamburger: visible solo en móvil */
.sb-hamburger {
  display: none;
  position: fixed; top: 12px; left: 12px;
  z-index: 200;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,229,255,0.35);
  background: rgba(11,15,28,0.92);
  backdrop-filter: blur(8px);
  color: var(--c-primary);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.sb-hamburger:active { transform: scale(0.95); }

.sb-icon.btn-on {
  background: linear-gradient(90deg, rgba(255,179,0,0.18), rgba(255,179,0,0.04)) !important;
  color: #FFB300 !important;
  border-color: rgba(255,179,0,0.35) !important;
}

/* Cuando el modo táctil está activo: targets mínimos 44x44 en sidebar */
body[data-tactil="1"] .sb-nav button,
body[data-tactil="1"] .sb-foot .sb-icon {
  padding: .85rem .6rem;
  font-size: 1rem;
}
body[data-tactil="1"] .sb-i { width: 32px; height: 32px; font-size: 1.15rem; }

/* Inputs y botones genéricos en táctil */
body[data-tactil="1"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body[data-tactil="1"] select,
body[data-tactil="1"] textarea {
  min-height: 44px;
  font-size: 1rem;
}
body[data-tactil="1"] button:not(.sb-icon):not(.sb-nav button):not(.btn-icon):not(.sb-toggle):not(.sb-hamburger) {
  min-height: 44px;
  padding: .6rem 1rem;
}
body[data-tactil="1"] .toolbar { flex-wrap: wrap; gap: .55rem; }
body[data-tactil="1"] .tabla { font-size: .95rem; }

/* Tabla scroll horizontal en pantallas chicas */
.tabla-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tablet: 720-1024 — sidebar pinned por default, mostrador grande */
@media (min-width: 721px) and (max-width: 1024px) {
  .pantalla.with-sidebar { padding: 1.25rem 1.25rem; }
}

/* Móvil: ≤720 */
@media (max-width: 720px) {
  .sb-hamburger { display: grid; place-items: center; }
  .sidebar { box-shadow: 8px 0 32px rgba(0,0,0,0.5); }
  .pantalla.with-sidebar { padding: 4rem .85rem 1rem; }

  .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .section-head h2 { font-size: 1.25rem; }
  .section-actions { flex-wrap: wrap; gap: .5rem; }
  .section-actions > * { flex: 1 1 auto; }

  /* KPIs grandes pasan a 2 col */
  .cf-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem; }
  .cf-big__val { font-size: 1.4rem; }
  .dash-big { padding: 1rem !important; }
  .dash-big__val { font-size: 1.6rem !important; }

  /* Cards de costos fijos: 1 col en móvil */
  .cf-grid { grid-template-columns: 1fr !important; }

  /* POS: cards más compactas */
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }

  /* Modales casi pantalla completa */
  dialog.dlg, dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    margin: auto !important;
  }
  dialog.dlg form, dialog form { padding: 1rem !important; }

  /* Producto editor / receta editor 2-col → 1 col */
  .pe-cols--60-40,
  .pe-cols--40-60,
  .pe-cols--50-50 { grid-template-columns: 1fr !important; }

  /* Tablas: forzar scroll horizontal */
  .tabla, .tabla-resp { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Toasts más cerca del borde inferior, full-width */
  .toasts { left: .5rem !important; right: .5rem !important; bottom: .5rem !important; }
  .toast { font-size: .9rem; }

  /* Panel ayuda full-screen en móvil */
  .panel-ayuda { width: 96vw !important; max-width: 96vw !important; right: 2vw !important; }

  /* Toolbar arriba en móvil: stack */
  .cf-toolbar { flex-direction: column; align-items: stretch; }
  .cf-toolbar > * { width: 100%; }

  /* Sidebar abre overlay */
  .sidebar.open { box-shadow: 12px 0 40px rgba(0,0,0,0.7); }
}

/* Móvil chico: ≤420 */
@media (max-width: 420px) {
  .cf-kpis { grid-template-columns: 1fr !important; }
  .pos-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vt-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .vt-tab { flex: 0 0 auto; white-space: nowrap; }
}