:root{--pc-blue:#0070ba;--pc-blue-light:#0ea5e9;--pc-green:#22c55e;--pc-red:#ef4444;--bg:linear-gradient(135deg,rgba(0,112,186,.15),rgba(14,165,233,.15)),url('https://www.transparenttextures.com/patterns/cubes.png');--fg:#0f172a;--muted:#64748b;--glass:rgba(255,255,255,.15);--glass-b:#ffffff40;--blur:12px;--radius:18px;--btn-fg:#0b1d33;--btn-bg1:rgba(14,165,233,.85);--btn-bg2:rgba(0,112,186,.85);--mode-btn-fg:#0b1d33;--chip-bg:rgba(255,255,255,.55);--chip-fg:#0b1d33;--chip-b:#ffffff7a}
html[data-theme=dark]{--bg:#0b1220;--fg:#e5e7eb;--muted:#cbd5e1;--glass:rgba(20,20,20,.30);--glass-b:#ffffff26;--btn-fg:#fff;--btn-bg1:#0ea5e9;--btn-bg2:#0070ba;--mode-btn-fg:#fff;--chip-bg:rgba(255,255,255,.12);--chip-fg:#fff;--chip-b:#ffffff26}
html[data-theme=brand]{--bg:linear-gradient(135deg,#0f172a,#0b1220);--fg:#e6f6ff;--muted:#b6e0ff;--glass:rgba(14,30,64,.35);--glass-b:#7dd3fc55;--btn-fg:#e6f6ff;--btn-bg1:#22c55e;--btn-bg2:#16a34a;--mode-btn-fg:#e6f6ff;--chip-bg:rgba(125,211,252,.18);--chip-fg:#e6f6ff;--chip-b:#7dd3fc55}
*{box-sizing:border-box}html,body{height:100%}body{font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);background-size:cover;backdrop-filter:blur(10px);color:var(--fg);min-height:100vh;margin:0;padding:24px 12px}
.pc-wrap{width:100%;max-width:860px;margin:0 auto;background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.25);backdrop-filter:blur(var(--blur));padding:32px 20px;text-align:center;animation:fadeInUp .6s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.pc-title{font-size:2rem;font-weight:900;background:linear-gradient(90deg,var(--pc-blue),var(--pc-blue-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px;margin-bottom:10px}
.pc-glass{background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(var(--blur));border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.15);padding:20px;margin-bottom:18px;transition:all .3s ease}
.pc-glass:hover{transform:scale(1.01);box-shadow:0 8px 28px rgba(0,0,0,.25)}
/* visibilidad por modo */
#grossInputWrapper,#netInputWrapper,#vesInputWrapper{display:none}
html[data-calc-mode=gross] #grossInputWrapper{display:block}
html[data-calc-mode=net] #netInputWrapper{display:block}
html[data-calc-mode=ves] #vesInputWrapper{display:block}
/* helper ocultar */
.hidden{display:none!important}
/* Labels */
.pc-panel label{display:block;text-align:center;font-weight:800;margin-bottom:10px;font-size:1rem;color:var(--fg)}
/* Grupo input */
.input-group{width:min(100%,340px);margin:0 auto}
.input-group .pc-input{width:100%}
/* Inputs */
.pc-input,select{margin:0 auto 12px auto;padding:12px;border-radius:12px;border:1px solid var(--glass-b);background:rgba(255,255,255,.2);color:var(--fg);font-weight:600;font-size:1rem;text-align:center;backdrop-filter:blur(6px);transition:all .2s ease}
.pc-input:focus,select:focus{border-color:var(--pc-blue-light);box-shadow:0 0 0 3px rgba(14,165,233,.35);outline:0}
.pc-input.is-valid{border-color:#16a34a;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.pc-input.is-invalid{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.25)}
/* tasa */
.rate-static{background:rgba(255,255,255,.15);border:1px solid var(--glass-b);backdrop-filter:blur(8px);border-radius:16px;padding:12px 14px;font-weight:800;margin:0 auto;width:min(100%,560px);transition:all .3s}
.rate-static:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.rate-row{display:flex;justify-content:center;align-items:center;gap:8px}
.rate-updated{font-size:.9rem;color:var(--muted);font-weight:600}
/* chips */
.preset-bar{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px auto 0 auto}
.input-group .preset-bar{max-width:100%}
.chip{appearance:none;border:1px solid var(--chip-b);background:var(--chip-bg);color:var(--chip-fg);font-weight:800;border-radius:999px;padding:8px 14px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.chip:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
/* inline actions */
.inline-actions{display:flex;justify-content:center;gap:8px;margin-top:10px}
/* cards */
.pc-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:12px}
.pc-card{background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(var(--blur));border-radius:16px;padding:16px;font-weight:800;transition:all .3s ease;animation:fadeInUp .4s ease}
.pc-card:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.pc-card .label{font-size:.9rem;color:var(--muted);margin-bottom:6px}
.pc-card .value{font-size:1.2rem}
.pc-card.red{border-left:4px solid var(--pc-red)}
.pc-card.green{border-left:4px solid var(--pc-green)}
.pc-card.blue{border-left:4px solid var(--pc-blue-light)}
/* full-width para centrar la última tarjeta en VES */
.pc-card.full-width{grid-column:1 / -1;text-align:center}
/* acciones */
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:14px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--btn-bg1),var(--btn-bg2));border:1px solid var(--glass-b);border-radius:14px;padding:12px 18px;font-weight:900;color:var(--btn-fg);cursor:pointer;transition:all .25s ease;backdrop-filter:blur(8px);box-shadow:0 4px 15px rgba(14,165,233,.35)}
.button:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 25px rgba(14,165,233,.5)}
.button.secondary{background:linear-gradient(135deg,rgba(37,211,102,.9),rgba(18,140,126,.9));color:#fff}
.button.ghost{background:transparent;color:var(--fg);border:1px dashed var(--glass-b);box-shadow:none}
.button.sm{padding:8px 12px;font-size:.9rem;border-radius:10px}
.button:disabled{opacity:.6;cursor:not-allowed;background:rgba(255,255,255,.1);box-shadow:none}
/* lucide */
.button i,.mode-btn i,.pc-title i,.rate-row i{width:18px;height:18px;stroke-width:2.2;flex-shrink:0}
/* modo botones */
.mode-toggle{display:flex;justify-content:center;gap:12px;margin:12px 0 18px;flex-wrap:wrap}
.mode-btn{flex:1 1 240px;max-width:240px;padding:14px 20px;border-radius:14px;border:1px solid var(--glass-b);background:rgba(255,255,255,.2);color:var(--mode-btn-fg);font-weight:900;cursor:pointer;transition:all .22s ease;backdrop-filter:blur(8px);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mode-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.mode-btn.active{background:linear-gradient(135deg,var(--pc-blue-light),var(--pc-blue));border-color:#7dd3fc;color:#fff;box-shadow:0 6px 20px rgba(14,165,233,.5)}
@media (max-width:480px){#modeVes{flex-basis:100%;max-width:100%}}
/* FAB fijo abajo-izquierda */
.fab-dock{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:50;display:flex;flex-direction:column;align-items:flex-start;gap:10px;transition:opacity .2s,transform .2s ease}
.fab-main{width:54px;height:54px;border-radius:50%;border:1px solid var(--glass-b);background:rgba(255,255,255,.25);backdrop-filter:blur(8px);display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}
.fab-main:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.fab-main i{width:22px;height:22px;stroke-width:2.2}
.fab-menu{display:flex;flex-direction:column;gap:8px}
.fab-item{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-b);background:rgba(255,255,255,.2);backdrop-filter:blur(8px);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.fab-item i{width:18px;height:18px;stroke-width:2.2}
.fab-dock:not(.open) .fab-item{opacity:0;pointer-events:none;transform:translateY(10px)}
.fab-dock.open{gap:10px}
.fab-dock.open .fab-item{opacity:1;transform:translateY(0)}
/* WhatsApp flotante con etiqueta */
.wa-float{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:9999;display:flex;align-items:center;gap:10px;text-decoration:none;user-select:none}
.wa-fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,rgba(37,211,102,.98),rgba(18,140,126,.98));border:1px solid rgba(255,255,255,.35);box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);backdrop-filter:blur(12px);transition:transform .2s ease, box-shadow .2s ease;animation:wa-pulse 5s infinite}
.wa-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.wa-fab svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));color:#fff}
.wa-label{font-weight:800;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);border-radius:999px;padding:10px 14px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateX(0);opacity:1;transition:opacity .2s ease, transform .2s ease}
@media (max-width:640px){.wa-label{opacity:0;transform:translateX(6px);pointer-events:none}}
@keyframes wa-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* estados */
.error{color:#ef4444;font-weight:800;margin-top:8px}
/* móvil */
@media (max-width:480px){.pc-wrap{padding:20px 14px}.pc-title{font-size:1.6rem;margin-bottom:6px}.pc-input,select{padding:10px;font-size:.95rem}.pc-card{padding:12px}.pc-card .value{font-size:1rem}.button{padding:10px 14px;font-size:.9rem;gap:6px}.mode-btn{padding:10px 14px;font-size:.9rem}.button i,.mode-btn i,.pc-title i,.rate-row i{width:16px;height:16px;stroke-width:2.1}}
/* compacto manual */
html[data-compact=on] .pc-wrap{padding:20px 14px}
html[data-compact=on] .pc-title{font-size:1.6rem;margin-bottom:6px}
html[data-compact=on] .pc-input,html[data-compact=on] select{padding:10px;font-size:.95rem}
html[data-compact=on] .pc-card{padding:12px}
html[data-compact=on] .pc-card .value{font-size:1rem}
html[data-compact=on] .button{padding:10px 14px;font-size:.9rem;gap:6px}
html[data-compact=on] .mode-btn{padding:10px 14px;font-size:.9rem}
html[data-compact=on] .button i,html[data-compact=on] .mode-btn i,html[data-compact=on] .pc-title i,html[data-compact=on] .rate-row i{width:16px;height:16px;stroke-width:2.1}
/* ============================
   FAB & WhatsApp — Neo Glass
   (Overrides no intrusivos)
   ============================ */

/* Reset sutil para que herede bien en temas */
.fab-dock,.wa-float,.wa-fab,.fab-main,.fab-item{will-change:transform,box-shadow}

/* ---- FAB (botón configuración + menú) ---- */
.fab-dock{
  left: clamp(12px, 2vw, 18px);
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  gap: 10px;
}
.fab-main{
  width:58px;height:58px;border-radius:18px;
  border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.18));
  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.35);
  position: relative;
}
.fab-main::after{
  content:""; position:absolute; inset:-2px; border-radius:20px;
  background: radial-gradient(70% 70% at 30% 20%, rgba(125,211,252,.35), transparent 60%),
              radial-gradient(60% 60% at 70% 80%, rgba(14,165,233,.25), transparent 70%);
  filter: blur(6px); opacity:.6; pointer-events:none; transition:opacity .2s ease;
}
.fab-main:hover::after{ opacity:.9 }
.fab-main:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,165,233,.35), 0 10px 28px rgba(0,0,0,.28);
}

/* Items del menú: más consistentes */
.fab-item{
  width:46px;height:46px;border-radius:14px;
  border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.14));
  transform: translateY(6px); opacity:0;
}
.fab-dock.open .fab-item{ transform:translateY(0); opacity:1 }
.fab-item:hover{
  box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-2px);
}
.fab-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,165,233,.35), 0 10px 26px rgba(0,0,0,.28);
}

/* ---- WhatsApp (icono + etiqueta) —— versión pill elegante ---- */
.wa-float{
  right: clamp(12px, 2vw, 18px);
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  gap: 12px;
}
.wa-fab{
  width:56px;height:56px;border-radius:18px;
  background: linear-gradient(180deg, rgba(37,211,102,.98), rgba(18,140,126,.96));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 10px 32px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.28);
  position: relative;
}
.wa-fab::after{
  content:""; position:absolute; inset:-2px; border-radius:20px;
  background: radial-gradient(65% 65% at 30% 20%, rgba(255,255,255,.28), transparent 60%),
              radial-gradient(60% 60% at 80% 80%, rgba(0,0,0,.12), transparent 70%);
  filter: blur(6px); opacity:.7; pointer-events:none; transition:opacity .2s ease;
}
.wa-fab:hover::after{ opacity:1 }

.wa-fab svg{ width:26px;height:26px; color:#fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)) }

/* Etiqueta tipo píldora (desktop), oculta en móvil */
.wa-label{
  font-weight:800; letter-spacing:.2px;
  color:#0b1220;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.55);
  padding: 10px 14px; border-radius:999px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .wa-label{
  color:#eaf2ff;
  background: linear-gradient(180deg, rgba(30,41,59,.72), rgba(15,23,42,.72));
  border-color: rgba(255,255,255,.18);
}

/* Hover conjunto: desplaza muy sutil y aumenta glow */
.wa-float:hover .wa-fab{ transform: translateY(-2px) }
.wa-float:hover .wa-label{ transform: translateY(-1px) }

/* Pulso más fino y respetuoso */
@keyframes wa-pulse-soft{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }
.wa-fab{ animation: wa-pulse-soft 6s ease-in-out infinite }
@media (prefers-reduced-motion: reduce){
  .wa-fab{ animation:none }
}

/* Mobile: solo icono (como ya tenías), desktop: pill visible */
@media (max-width:640px){
  .wa-label{ display:none }
}

/* Pequeño “seguro” para que ambos botones no se monten entre sí en pantallas muy bajas */
@media (max-height:520px){
  .fab-dock{ bottom: clamp(8px, 1.6vh, 14px) }
  .wa-float{ bottom: clamp(8px, 1.6vh, 14px) }
}
/* ===== Floating buttons: círculo, compactos y no intrusivos ===== */
:root{
  --fab-gap: 16px;
  --fab-size: 56px;
  --fab-size-sm: 52px;
}

/* FAB (config): círculo y esquina inferior izquierda */
.fab-dock{
  position:fixed;
  left: var(--fab-gap);
  bottom: calc(env(safe-area-inset-bottom) + var(--fab-gap));
  z-index:50;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.fab-main{
  width:var(--fab-size); height:var(--fab-size); border-radius:50%;
  border:1px solid var(--glass-b);
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fab-main:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.25) }
.fab-item{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--glass-b); background:rgba(255,255,255,.2);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* WhatsApp: círculo y esquina inferior derecha (solo icono en móvil) */
.wa-float{
  position:fixed;
  right: var(--fab-gap);
  bottom: calc(env(safe-area-inset-bottom) + var(--fab-gap));
  z-index:55;
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.wa-fab{
  width:var(--fab-size); height:var(--fab-size); border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,rgba(37,211,102,.98),rgba(18,140,126,.98));
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s ease, box-shadow .2s ease;
  animation:wa-pulse 6s ease-in-out infinite;
}
.wa-fab:hover{ transform:translateY(-2px) }
.wa-label{ display:none } /* etiqueta oculta para que no tape; queda solo el círculo */

@keyframes wa-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@media (prefers-reduced-motion: reduce){ .wa-fab{ animation:none } }

/* Compacto en móviles */
@media (max-width:480px){
  .fab-main,.wa-fab{ width:var(--fab-size-sm); height:var(--fab-size-sm) }
}