/* =========================================================
   FraVEO CRM — capa visual profesional
   Objetivo: una interfaz más limpia, fluida y serena sin tocar
   la lógica de Supabase ni módulos existentes.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --peace-50:#f4fbfa;
  --peace-100:#e6f6f3;
  --peace-200:#cdece8;
  --peace-300:#9edbd5;
  --peace-400:#64c3bb;
  --peace-500:#2fa8a0;
  --peace-600:#208a85;
  --peace-700:#1d6f6c;
  --peace-800:#1c5957;
  --peace-900:#173f3f;
  --sage:#7ba889;
  --mint:#dff6ea;
  --sand:#f6f1e8;
  --cream:#fffdf8;
  --ink:#102a2d;
  --muted:#6d7c80;
  --line:rgba(30,87,87,.12);
  --glass:rgba(255,255,255,.78);
  --white:#fff;
  --soft-shadow:0 18px 45px rgba(31,88,87,.10);
  --card-shadow:0 12px 30px rgba(26,78,78,.08);
  --sidebar-w:286px;
  --sidebar-w-sm:84px;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{ font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; }
html{ scroll-behavior:smooth; }
body{
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 12% -5%, rgba(159,219,213,.35), transparent 62%),
    radial-gradient(760px 480px at 92% 8%, rgba(223,246,234,.92), transparent 60%),
    linear-gradient(135deg, #f7fbfa 0%, #fffdf8 52%, #eef8f5 100%) !important;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  z-index:-1;
  background-image:
    linear-gradient(rgba(47,168,160,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,168,160,.07) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, black 0%, transparent 80%);
}

/* Login */
body.calm-bg{
  background:
    radial-gradient(760px 520px at 15% 15%, rgba(100,195,187,.35), transparent 62%),
    radial-gradient(760px 520px at 85% 25%, rgba(123,168,137,.24), transparent 60%),
    linear-gradient(145deg, #eef8f5 0%, #fffdf8 100%) !important;
}
.login-box{
  border-radius:30px !important;
  border:1px solid rgba(255,255,255,.76) !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 28px 70px rgba(28,89,87,.16) !important;
  backdrop-filter:blur(22px) saturate(1.25) !important;
  padding:30px !important;
  overflow:hidden;
}
.login-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg, rgba(255,255,255,.72), transparent 42%), radial-gradient(circle at top right, rgba(100,195,187,.18), transparent 40%);
  pointer-events:none;
}
.login-box > *{ position:relative; z-index:1; }
.logo{ filter:drop-shadow(0 18px 22px rgba(28,89,87,.11)) !important; }
#greeting{ color:var(--peace-900) !important; letter-spacing:-.03em; }
.login-box input[type="email"], .login-box input[type="password"], .country-select{
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(29,111,108,.16) !important;
  border-radius:16px !important;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.login-box input:focus, .country-select:focus{
  border-color:rgba(47,168,160,.55) !important;
  box-shadow:0 0 0 5px rgba(47,168,160,.14) !important;
  transform:translateY(-1px);
}
.btn-1{
  background:linear-gradient(135deg, var(--peace-600), var(--sage)) !important;
  border-radius:16px !important;
  box-shadow:0 16px 26px rgba(32,138,133,.22) !important;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.btn-1:hover{ transform:translateY(-2px); box-shadow:0 20px 34px rgba(32,138,133,.26) !important; }

/* Layout general */
.container{ max-width:none !important; }
.navigation{
  width:var(--sidebar-w) !important;
  background:linear-gradient(180deg, rgba(23,63,63,.98), rgba(29,111,108,.96)) !important;
  border-left:0 !important;
  border-right:1px solid rgba(255,255,255,.12);
  box-shadow:18px 0 42px rgba(23,63,63,.16);
  padding:16px 12px;
  transition:width .36s var(--ease), transform .36s var(--ease) !important;
}
.navigation.active{ width:var(--sidebar-w-sm) !important; }
.navigation ul{ position:relative !important; display:flex; flex-direction:column; gap:7px; }
.navigation ul li{ border-radius:18px !important; overflow:visible; }
.navigation ul li:nth-child(1){ margin-bottom:18px !important; display:grid; place-items:center; }
.navigation ul li:nth-child(1) a{ justify-content:center; min-height:84px; }
.navigation ul li:nth-child(1) img{
  width:70px !important; height:70px !important; object-fit:contain;
  padding:8px; border-radius:22px; background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.navigation ul li a{
  min-height:54px;
  align-items:center;
  color:rgba(255,255,255,.82) !important;
  border-radius:18px;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.navigation ul li a .icon{ height:54px !important; line-height:62px !important; min-width:58px !important; }
.navigation ul li a .icon ion-icon{ font-size:1.42rem !important; }
.navigation ul li a .title{ height:54px !important; line-height:54px !important; font-weight:700; font-size:.94rem; letter-spacing:-.01em; }
.navigation ul li:hover, .navigation ul li.hovered{ background:transparent !important; }
.navigation ul li:hover a, .navigation ul li.hovered a{
  color:#fff !important;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.10);
  transform:translateX(2px);
}
.navigation ul li.hovered a{ background:linear-gradient(135deg, rgba(100,195,187,.28), rgba(255,255,255,.14)); }
.navigation ul li:hover a::before, .navigation ul li.hovered a::before,
.navigation ul li:hover a::after, .navigation ul li.hovered a::after{ display:none !important; }

.main{
  left:var(--sidebar-w) !important;
  width:calc(100% - var(--sidebar-w)) !important;
  background:transparent !important;
  transition:left .36s var(--ease), width .36s var(--ease) !important;
  padding:18px 22px 38px;
}
.main.active{ left:var(--sidebar-w-sm) !important; width:calc(100% - var(--sidebar-w-sm)) !important; }
.topbar, .container .topbar{
  height:auto !important;
  min-height:74px;
  padding:12px 14px !important;
  margin-bottom:8px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.74);
  border-radius:26px;
  box-shadow:var(--card-shadow);
  backdrop-filter:blur(18px) saturate(1.2);
  position:sticky;
  top:14px;
  z-index:50;
}
.toggle, .container .topbar .toggle{
  width:48px !important; height:48px !important;
  font-size:1.8rem !important;
  border-radius:16px;
  color:var(--peace-800);
  background:rgba(47,168,160,.09);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.toggle:hover{ transform:rotate(2deg) scale(1.03); background:rgba(47,168,160,.16); }
.buscar, .container .topbar .buscar{ max-width:460px; width:min(42vw,460px) !important; }
.buscar input, .container .topbar .buscar label input{
  height:48px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(29,111,108,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--ink);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.buscar input:focus{ border-color:rgba(47,168,160,.5) !important; box-shadow:0 0 0 5px rgba(47,168,160,.12) !important; }
.buscar ion-icon{ color:var(--peace-600); top:14px !important; }
.perfil-usuario, .container .topbar .perfil-usuario{
  width:48px !important; height:48px !important; border:3px solid rgba(255,255,255,.96);
  box-shadow:0 10px 24px rgba(29,111,108,.18);
}

/* Cards, paneles y tablas */
.cards{
  padding:18px 0 10px !important;
  grid-gap:18px !important;
}
.cards .card, .card, .panel, .ordenes-recientes, .nuevos-clientes, .rw-hero, .rw-wallet, .tips{
  border-radius:var(--radius-lg) !important;
  border:1px solid rgba(255,255,255,.76) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:var(--card-shadow) !important;
  backdrop-filter:blur(16px) saturate(1.12);
}
.cards .card{
  padding:24px !important;
  min-height:134px;
  overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.cards .card::before{
  content:""; position:absolute; inset:-45% -30% auto auto; width:130px; height:130px;
  border-radius:999px; background:rgba(100,195,187,.16); filter:blur(1px);
}
.cards .card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(31,88,87,.13) !important; border-color:rgba(100,195,187,.32) !important; }
.card-numeros{ color:var(--peace-800) !important; font-weight:900 !important; letter-spacing:-.05em; }
.card-nombre{ color:var(--muted) !important; font-weight:700; }
.card-icono{ color:rgba(47,168,160,.44) !important; }
.detalles{ padding:12px 0 0 !important; grid-gap:18px !important; }
.detalles .ordenes-recientes, .detalles .nuevos-clientes, .ordenes-recientes, .nuevos-clientes{
  padding:22px !important;
  overflow:hidden;
}
.header h2, .card__title, h1, h2, h3{ color:var(--peace-900) !important; letter-spacing:-.035em; }
.header .boton, .boton, .btn, button, input[type="submit"]{ font-family:'Inter',sans-serif !important; }
.boton, .btn, .btn.primary, .btn--ghost, .boton-sec, #btn-refresh, #btn-load-more{
  border-radius:14px !important;
  border:1px solid rgba(29,111,108,.13) !important;
  min-height:42px;
  padding:10px 15px !important;
  font-weight:800 !important;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), opacity .22s var(--ease);
}
.boton, .btn.primary, .btn:not(.ghost):not(.btn--ghost), .boton-sec{
  background:linear-gradient(135deg, var(--peace-600), var(--sage)) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(32,138,133,.16);
}
.btn.ghost, .btn--ghost{
  background:rgba(255,255,255,.74) !important;
  color:var(--peace-800) !important;
}
.boton:hover, .btn:hover, button:hover{ transform:translateY(-2px); box-shadow:0 15px 28px rgba(32,138,133,.16); }

.table-wrap, .callmap-grid-wrap{
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.74) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
table{ border-collapse:separate !important; border-spacing:0 !important; }
thead th, #tabla-cartera thead th{
  background:rgba(244,251,250,.94) !important;
  color:var(--peace-800) !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
  border-bottom:1px solid var(--line) !important;
}
tbody tr{ transition:background .18s var(--ease), transform .18s var(--ease); }
tbody tr:hover{ background:rgba(230,246,243,.55) !important; }
td, th{ border-color:rgba(30,87,87,.08) !important; }
.hint, .muted, .card__subtitle, .tiny{ color:var(--muted) !important; }
.badge, .status-chip, .pill, .tc-badge{
  border-radius:999px !important;
  border:1px solid rgba(47,168,160,.16) !important;
  background:rgba(223,246,234,.8) !important;
  color:var(--peace-800) !important;
  font-weight:800 !important;
}

/* Formularios */
input, select, textarea{
  accent-color:var(--peace-600);
}
.field input, .field select, .field textarea, select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"]{
  border-radius:14px !important;
  border:1px solid rgba(29,111,108,.14) !important;
  background:rgba(255,255,255,.86) !important;
  color:var(--ink) !important;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus, select:focus, textarea:focus, input:focus{
  outline:none !important;
  border-color:rgba(47,168,160,.52) !important;
  box-shadow:0 0 0 5px rgba(47,168,160,.12) !important;
}
.field__label, label{ color:var(--peace-900) !important; font-weight:800 !important; }
.modal__card, .rw-modal{
  border-radius:26px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 30px 70px rgba(23,63,63,.22) !important;
  backdrop-filter:blur(20px) saturate(1.2);
}
.modal__backdrop, .rw-modal-backdrop{ backdrop-filter:blur(6px); }
.toast, .toasts .toast{
  border-radius:16px !important;
  background:rgba(23,63,63,.94) !important;
  color:#fff !important;
  box-shadow:0 18px 40px rgba(23,63,63,.22) !important;
}

/* Recompensas */
.rewards-wrapper{ padding:18px 0 0 !important; }
.rw-hero{
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(223,246,234,.72)) !important;
}
.progress__bar, .progress__fill{ border-radius:999px !important; }
.progress__fill{ background:linear-gradient(90deg, var(--peace-500), var(--sage)) !important; }
.dropzone{ border-radius:22px !important; border-color:rgba(47,168,160,.24) !important; background:rgba(244,251,250,.72) !important; }

/* Microinteracciones */
[data-pro-animate]{ opacity:0; transform:translateY(14px); transition:opacity .58s var(--ease), transform .58s var(--ease); }
[data-pro-animate].is-visible{ opacity:1; transform:translateY(0); }
.pro-ripple{ position:relative; overflow:hidden; }
.pro-ripple::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:999px;
  left:var(--x,50%); top:var(--y,50%); transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.42); opacity:0; pointer-events:none;
}
.pro-ripple.is-rippling::after{ animation:proRipple .55s var(--ease); }
@keyframes proRipple{ 0%{opacity:.7; transform:translate(-50%,-50%) scale(0)} 100%{opacity:0; transform:translate(-50%,-50%) scale(16)} }
@keyframes floatSoft{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.cards .card:nth-child(2n) .card-icono{ animation:floatSoft 4.8s ease-in-out infinite; }
.cards .card:nth-child(2n+1) .card-icono{ animation:floatSoft 5.8s ease-in-out infinite; }

/* Responsive */
@media (max-width:1180px){
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .detalles{ grid-template-columns:1fr !important; }
}
@media (max-width:991px){
  .navigation{ transform:translateX(-100%); width:var(--sidebar-w) !important; z-index:1000; }
  .navigation.active{ transform:translateX(0); width:var(--sidebar-w) !important; }
  .main, .main.active{ left:0 !important; width:100% !important; padding:14px !important; }
  .topbar{ top:10px; }
  .buscar, .container .topbar .buscar{ width:48vw !important; }
}
@media (max-width:680px){
  .cards{ grid-template-columns:1fr !important; }
  .topbar, .container .topbar{ gap:10px; flex-wrap:wrap; border-radius:22px; }
  .buscar, .container .topbar .buscar{ order:3; width:100% !important; max-width:none; margin:0 !important; }
  .detalles .ordenes-recientes, .detalles .nuevos-clientes, .ordenes-recientes, .nuevos-clientes, .card, .panel{ padding:16px !important; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ===== Fix logo sidebar =====
   El logo original venía con mucho espacio transparente y se veía encogido dentro
   de una caja cuadrada. Estas reglas lo muestran como marca horizontal limpia. */
.navigation ul li:first-child{
  margin:0 0 18px 0 !important;
  padding:0 !important;
  display:block !important;
}
.navigation ul li:first-child a{
  width:100% !important;
  min-height:76px !important;
  padding:10px 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:20px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 16px 34px rgba(0,0,0,.10) !important;
  transform:none !important;
}
.navigation ul li:first-child a .icon{
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
.navigation ul li:first-child img{
  width:min(150px, 78%) !important;
  height:auto !important;
  max-height:48px !important;
  padding:0 !important;
  display:block !important;
  object-fit:contain !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.18)) !important;
}
.navigation.active ul li:first-child a{
  min-height:64px !important;
  padding:8px !important;
  border-radius:18px !important;
}
.navigation.active ul li:first-child img{
  width:54px !important;
  max-height:34px !important;
}
@media (max-width: 991px){
  .navigation ul li:first-child img{ width:130px !important; max-height:44px !important; }
  .navigation.active ul li:first-child img{ width:54px !important; max-height:34px !important; }
}