/* FINDIA · Panel del usuario */
:root {
  --fondo: #07080d; --fondo-2: #0d0f17; --panel: rgba(255, 255, 255, .04); --panel-2: rgba(255, 255, 255, .07);
  --tinta: #f3f2f8; --gris: #9a9db0; --gris-2: #686c80; --linea: rgba(255, 255, 255, .08);
  --vio: #8b6cff; --cian: #2ee6d6; --oro: #d9b46a; --rojo: #ff6b7d; --verde: #3ddc97; --ambar: #ffb547;
  --grad: linear-gradient(120deg, #8b6cff, #4f8bff 50%, #2ee6d6);
  --radio: 22px; --lateral: 236px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--tinta); font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fondo-luz { position: fixed; inset: 0; pointer-events: none; background:
  radial-gradient(700px 420px at 78% -8%, rgba(139, 108, 255, .16), transparent 70%),
  radial-gradient(600px 400px at 20% 110%, rgba(46, 230, 214, .08), transparent 70%); }

.app { position: relative; display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }

/* Lateral */
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 26px; padding: 26px 16px; border-right: 1px solid var(--linea); background: rgba(7, 8, 13, .6); backdrop-filter: blur(16px); }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.logo-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--grad); color: #07080d; }
.logo-icono svg { fill: #07080d; stroke: none; width: 22px; height: 22px; }
.logo-txt { font-weight: 800; font-size: 24px; letter-spacing: -.05em; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; color: var(--gris); font-weight: 600; font-size: 14.5px; transition: background .2s, color .2s; }
.nav a:hover { background: var(--panel); color: var(--tinta); }
.nav a.activo { background: var(--panel-2); color: var(--tinta); box-shadow: inset 2px 0 0 var(--vio); }
.perfil-caja { margin-top: auto; padding: 14px; border: 1px solid var(--linea); border-radius: 16px; background: var(--panel); }
.perfil-lbl { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); margin-bottom: 6px; }
#perfil { width: 100%; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; }
.demo-aviso { margin: 8px 0 0; font-size: 11.5px; color: var(--gris-2); }

/* Principal */
.principal { min-width: 0; padding: 30px clamp(18px, 4vw, 48px) 110px; max-width: 1240px; width: 100%; }
.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.saludo-mini { margin: 0; color: var(--gris); font-size: 13.5px; font-weight: 600; }
.saludo-mini::first-letter { text-transform: uppercase; }
.saludo { margin: 2px 0 0; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.035em; line-height: 1.12; font-weight: 800; }
.saludo .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cabecera-der { display: flex; align-items: center; gap: 10px; }
.chip-prime { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--oro); border: 1px solid rgba(217, 180, 106, .3); background: rgba(217, 180, 106, .08); white-space: nowrap; }
.chip-prime svg { width: 15px; height: 15px; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--linea); font-weight: 800; font-size: 14px; }

/* Pregunta */
.pregunta { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 20px; background: linear-gradient(var(--fondo-2), var(--fondo-2)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: 0 24px 60px -30px rgba(139, 108, 255, .6); }
.pregunta-ico { color: var(--cian); display: grid; }
.pregunta input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 16px; padding: 10px 4px; }
.pregunta input::placeholder { color: var(--gris-2); }
.btn-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: var(--gris); cursor: pointer; }
.btn-ico:hover { background: var(--panel-2); color: var(--tinta); }
.btn-ico.grabando { color: var(--rojo); background: rgba(255, 107, 125, .12); }
.btn-enviar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--grad); color: #07080d; cursor: pointer; transition: transform .2s; }
.btn-enviar:hover { transform: scale(1.05); }
.btn-enviar svg { stroke-width: 2.3; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 30px; }
.sug { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--linea); background: var(--panel); color: var(--gris); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .2s; }
.sug:hover { color: var(--tinta); border-color: rgba(139, 108, 255, .5); background: rgba(139, 108, 255, .1); }

/* Bloques */
.titulo-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.titulo-sec h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.titulo-sec a, .titulo-sec span { font-size: 13px; color: var(--gris); font-weight: 600; }
.titulo-sec a:hover { color: var(--tinta); }
.rejilla { display: grid; gap: 14px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarjeta { position: relative; padding: 18px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--panel); min-width: 0; }
.tarjeta h3 { margin: 0 0 4px; font-size: 15.5px; letter-spacing: -.01em; line-height: 1.35; }
.tarjeta p { margin: 0; color: var(--gris); font-size: 13.5px; }

/* Avisos de Findia */
.aviso { display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .2s; }
.aviso:hover { border-color: rgba(139, 108, 255, .35); transform: translateY(-2px); }
.aviso-cab { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--gris); }
.aviso-cab .punto { width: 8px; height: 8px; border-radius: 50%; }
.aviso .acc { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 11px; border: 1px solid var(--linea); background: var(--panel-2); font-size: 13px; font-weight: 700; cursor: pointer; }
.aviso .acc:hover { background: rgba(139, 108, 255, .18); border-color: rgba(139, 108, 255, .5); }
.aviso .acc svg { width: 15px; height: 15px; color: var(--cian); }
.tipo-alerta .punto { background: var(--rojo); } .tipo-repetir .punto { background: var(--cian); }
.tipo-ahorro .punto { background: var(--verde); } .tipo-agenda .punto { background: var(--vio); } .tipo-idea .punto { background: var(--oro); }

/* Pedidos */
.pedido { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.marca-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-weight: 800; font-size: 13px; color: #07080d; flex: none; }
.pedido-info { min-width: 0; }
.pedido-info h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monto { font-weight: 800; font-size: 15px; white-space: nowrap; }
.pasos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.paso { height: 5px; border-radius: 9px; background: var(--panel-2); }
.paso.lleno { background: var(--grad); }
.pasos-txt { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12px; color: var(--gris-2); margin-top: -6px; }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--panel-2); color: var(--gris); }
.etiqueta.verde { color: var(--verde); background: rgba(61, 220, 151, .1); }
.etiqueta.cian { color: var(--cian); background: rgba(46, 230, 214, .1); }
.etiqueta.rojo { color: var(--rojo); background: rgba(255, 107, 125, .1); }
.etiqueta svg { width: 13px; height: 13px; }

/* Agenda */
.agenda-item { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--linea); }
.agenda-item:first-child { border-top: 0; padding-top: 0; }
.agenda-item:last-child { padding-bottom: 0; }
.agenda-dia { font-weight: 800; font-size: 14px; }
.agenda-dia small { display: block; color: var(--gris); font-weight: 600; font-size: 12.5px; }

/* Dinero */
.cifra { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 4px 0 2px; }
.cifra small { font-size: 15px; color: var(--gris); font-weight: 700; }
.barra-pres { height: 9px; border-radius: 9px; background: var(--panel-2); overflow: hidden; margin: 14px 0 8px; }
.barra-pres i { display: block; height: 100%; background: var(--grad); border-radius: 9px; }
.cat { display: grid; grid-template-columns: 110px 1fr 76px; gap: 10px; align-items: center; font-size: 13.5px; padding: 6px 0; }
.cat-barra { height: 8px; border-radius: 9px; background: var(--panel-2); overflow: hidden; }
.cat-barra i { display: block; height: 100%; border-radius: 9px; }
.cat b { text-align: right; }

/* Mi negocio */
.kpi .lbl { font-size: 12.5px; color: var(--gris); font-weight: 600; }
.kpi .cifra { font-size: 26px; }
.sube { color: var(--verde); font-size: 12.5px; font-weight: 700; } .baja { color: var(--rojo); font-size: 12.5px; font-weight: 700; }
.grafico { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 10px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.col i { width: 100%; max-width: 46px; border-radius: 8px 8px 4px 4px; background: rgba(139, 108, 255, .35); }
.col.hoy i { background: var(--grad); }
.col span { font-size: 11.5px; color: var(--gris-2); font-weight: 600; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla td { padding: 9px 0; border-top: 1px solid var(--linea); }
.tabla tr:first-child td { border-top: 0; }
.tabla td:last-child { text-align: right; }
.vacio { text-align: center; padding: 40px 20px; }
.vacio h3 { font-size: 20px; margin-bottom: 8px; }
.vacio p { max-width: 460px; margin: 0 auto 18px !important; }

/* Ecosistema */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.buscador { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--linea); background: var(--panel); flex: 1 1 240px; }
.buscador input { flex: 1; background: none; border: 0; outline: 0; padding: 11px 0; min-width: 0; }
.buscador svg { color: var(--gris-2); }
.filtro { padding: 9px 13px; border-radius: 12px; border: 1px solid var(--linea); background: transparent; color: var(--gris); font-size: 13px; font-weight: 600; cursor: pointer; }
.filtro.activo { background: var(--panel-2); color: var(--tinta); border-color: rgba(139, 108, 255, .45); }
.marca { display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .2s, transform .2s; }
.marca:hover { border-color: rgba(139, 108, 255, .35); transform: translateY(-2px); }
.marca-cab { display: flex; align-items: center; gap: 11px; }
.marca-cab h3 { margin: 0; }
.marca-cab small { display: block; color: var(--gris); font-size: 12px; }
.marca .pie { margin-top: auto; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.marca .pie a { display: inline-flex; color: var(--gris); }
.marca .pie a:hover { color: var(--tinta); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 13px; border: 0; background: var(--grad); color: #07080d; font-weight: 800; cursor: pointer; }

/* Chat */
.chat { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(430px, calc(100vw - 24px)); height: min(680px, calc(100vh - 36px)); display: flex; flex-direction: column; border-radius: 26px; border: 1px solid var(--linea); background: rgba(13, 15, 23, .94); backdrop-filter: blur(22px); box-shadow: 0 40px 100px -30px #000, 0 0 0 1px rgba(139, 108, 255, .12); transform: translateY(20px) scale(.97); opacity: 0; pointer-events: none; transition: all .28s cubic-bezier(.2, .8, .2, 1); }
.chat.abierto { transform: none; opacity: 1; pointer-events: auto; }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--linea); }
.chat-cab div { flex: 1; line-height: 1.25; }
.chat-cab small { display: block; color: var(--verde); font-size: 12px; font-weight: 600; }
.orbe { display: block; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 0deg, #8b6cff, #4f8bff, #2ee6d6, #8b6cff); animation: girar 6s linear infinite; box-shadow: 0 0 24px rgba(139, 108, 255, .55); position: relative; flex: none; }
.orbe::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, #07080d 70%); }
@keyframes girar { to { transform: rotate(360deg); } }
.chat-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.msg { max-width: 88%; padding: 11px 14px; border-radius: 17px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.yo { align-self: flex-end; background: var(--grad); color: #07080d; font-weight: 600; border-bottom-right-radius: 5px; }
.msg.ia { align-self: flex-start; background: var(--panel-2); border-bottom-left-radius: 5px; }
.msg.ia ul { margin: 6px 0; padding-left: 18px; white-space: normal; }
.chips-marca { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; white-space: normal; }
.chip-marca { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border-radius: 11px; background: var(--fondo); border: 1px solid var(--linea); font-size: 12.5px; font-weight: 700; }
.chip-marca:hover { border-color: rgba(139, 108, 255, .5); }
.chip-marca i { width: 20px; height: 20px; border-radius: 6px; flex: none; }
.chip-marca.pronto { opacity: .65; }
.escribiendo { display: inline-flex; gap: 4px; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--gris); animation: salto 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes salto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--linea); }
.chat-form input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 0 14px; outline: 0; }
.chat-form input:focus { border-color: rgba(139, 108, 255, .5); }
.burbuja { position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--linea); background: var(--fondo-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 20px 50px -14px rgba(139, 108, 255, .7); transition: transform .2s; }
.burbuja:hover { transform: scale(1.06); }
.burbuja .orbe { width: 40px; height: 40px; }
.chat.abierto ~ .burbuja { opacity: 0; pointer-events: none; }

@media (max-width: 1080px) { .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 50; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--linea); background: rgba(7, 8, 13, .92); }
  .lateral .logo, .perfil-caja { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; gap: 0; }
  .nav a { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 10.5px; flex: 1; align-items: center; }
  .nav a.activo { box-shadow: inset 0 2px 0 var(--vio); }
  .principal { padding: 20px 16px 120px; }
  .r2, .r3, .r4 { grid-template-columns: 1fr; }
  .burbuja { bottom: 86px; right: 16px; width: 56px; height: 56px; }
  .chat { right: 8px; left: 8px; width: auto; bottom: 8px; height: calc(100vh - 16px); }
  .cat { grid-template-columns: 90px 1fr 68px; }
  .chip-prime { display: none; }
  .perfil-movil { display: block !important; }
}
.perfil-movil { display: none; margin-top: 30px; }