/* iTalku — versión web (italku.in/app). Paleta y espaciado tomados 1:1 de
   lib/core/theme/app_colors.dart / app_spacing.dart del cliente Flutter —
   tema oscuro casi negro, colores de marca solo en íconos/botones/estados. */
:root{
  --morado:#100B2E;
  --morado-oscuro:#0A0720;
  --morado-suave:#241C4F;
  --verde:#47BBAE;
  --verde-oscuro:#35948A;
  --verde-suave:#163430;
  --blanco:#FFFFFF;
  --fondo:#0A0C10;
  --superficie:#15181E;
  --superficie-2:#1B1F27;
  --borde:#262A32;
  --texto:#F3F4F6;
  --texto-sec:#9AA0AC;
  --texto-disabled:#565C66;
  --exito:#2FAF83;
  --error:#E5484D;
  --advertencia:#E8A33D;

  --xs:4px; --sm:8px; --md:16px; --lg:24px; --xl:32px; --xxl:48px;
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* --- Pulso (indicadores "en vivo"/conectado) --- */
@keyframes pulso-anillo{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes pulso-opacidad{0%,100%{opacity:1}50%{opacity:.35}}
.punto-vivo{position:relative;display:inline-block;border-radius:50%;animation:pulso-anillo 2s ease-out infinite}
.badge-vivo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--verde)}
.badge-vivo .punto-vivo{width:7px;height:7px;background:var(--verde);color:var(--verde)}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit}

.app-shell{min-height:100vh;display:flex;flex-direction:column}
.app-main{flex:1;max-width:720px;width:100%;margin:0 auto;padding:var(--md) var(--md) 96px}
.app-main.wide{max-width:980px}

/* --- App bar --- */
.app-bar{
  position:sticky;top:0;z-index:20;
  background:var(--morado);
  color:var(--blanco);
  display:flex;align-items:center;gap:var(--sm);
  padding:14px var(--md);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.app-bar .title{flex:1;min-width:0}
.app-bar h1{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-bar .subtitle{font-size:12px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-bar a.icon-btn, .app-bar button.icon-btn{color:var(--blanco)}
.icon-btn{
  background:none;border:none;color:var(--texto);cursor:pointer;
  width:40px;height:40px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.icon-btn svg{width:22px;height:22px}

/* --- Bottom nav --- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--superficie);
  border-top:1px solid var(--borde);
  display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 4px 8px;color:var(--texto-sec);font-size:11px;font-weight:600;
}
.bottom-nav a.active{color:var(--verde)}
.bottom-nav svg{width:22px;height:22px}
.bottom-nav-logo{display:none}

/* --- Cards --- */
.card{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--r-md);
  padding:var(--md);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.card.tappable{cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.card.tappable:hover{border-color:var(--verde)}
.card.tappable:active{transform:scale(.99)}

/* --- Glow decorativo (mismo recurso que ya usa italku.in: un
   radial-gradient suave y difuminado, no una franja de color plana) --
   opt-in vía clase, solo en las pantallas "flagship" (Inicio,
   Conversaciones), no en formularios/ajustes. */
.glow-bg{position:relative;background-image:radial-gradient(rgba(154,160,172,.12) 1px,transparent 1px);background-size:24px 24px;background-position:-6px -6px}
.glow-bg::before,.glow-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;z-index:0}
.glow-bg::before{top:-160px;left:80px;width:520px;height:520px;background:radial-gradient(circle,rgba(71,187,174,.13),transparent 70%)}
.glow-bg::after{top:60px;right:-120px;width:440px;height:440px;background:radial-gradient(circle,rgba(139,107,255,.10),transparent 70%)}
.glow-bg>*{position:relative;z-index:1}


/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-pill);
  padding:13px 22px;
  font-size:15px;font-weight:700;
  border:none;cursor:pointer;
  width:100%;
}
.btn-primary{background:var(--verde);color:var(--morado-oscuro)}
.btn-primary:hover{background:var(--verde-oscuro);color:var(--blanco)}
.btn-ghost{background:transparent;color:var(--verde);border:1px solid var(--verde)}
.btn-text{background:none;border:none;color:var(--verde);font-weight:600;font-size:14px;cursor:pointer;padding:8px}
.btn-danger{background:var(--error);color:var(--blanco)}
.btn:disabled{opacity:.6;cursor:default}
.btn-icon-circle{
  width:48px;height:48px;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--verde);color:var(--morado-oscuro);flex-shrink:0;
}

/* --- Campos de texto --- */
.field{margin-bottom:var(--sm)}
.field label{display:block;font-size:13px;color:var(--texto-sec);margin-bottom:6px;font-weight:600}
.field .input-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-sm);
  padding:0 14px;
}
.field .input-wrap:focus-within{border-color:var(--verde)}
.field input, .field textarea{
  flex:1;background:none;border:none;outline:none;color:var(--texto);
  padding:13px 0;font-size:15px;min-width:0;
}
.field svg{color:var(--texto-sec);flex-shrink:0;width:19px;height:19px}
.field .error-text{color:var(--error);font-size:12px;margin-top:4px}
.field-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--texto-sec);margin:var(--sm) 0}

/* --- Stats --- */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--xs);margin-bottom:var(--sm)}
.stat-card{
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-sm);
  padding:10px 10px;display:flex;flex-direction:column;gap:2px;
}
.stat-card .val{font-size:18px;font-weight:800}
.stat-card .lab{font-size:10px;color:var(--texto-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-card .icon{width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--blanco);margin-bottom:4px;box-shadow:0 4px 10px var(--sombra,transparent)}

/* --- Grid de negocios --- */
.negocios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sm)}
.negocio-card{position:relative;text-align:center;padding:var(--md) var(--sm)}
.negocio-card .logo{width:48px;height:48px;border-radius:var(--r-md);background:var(--verde);display:flex;align-items:center;justify-content:center;margin:0 auto var(--sm);color:var(--blanco);flex-shrink:0;box-shadow:0 6px 16px var(--sombra,transparent)}
.negocio-card .nombre{font-size:14px;font-weight:700;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.negocio-card .estado{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:700;margin-bottom:4px}
.negocio-card .estado .dot{width:6px;height:6px;border-radius:50%}
.negocio-card .meta{font-size:10px;color:var(--texto-sec)}
.negocio-card .del-btn{position:absolute;top:-8px;right:-8px;background:var(--superficie);border:1px solid var(--borde)}

/* --- Acciones rápidas (Inicio) --- */
.acciones-rapidas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sm);margin-bottom:var(--lg)}
.accion-btn{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:14px 16px;cursor:pointer;text-align:left;border:1px solid var(--borde);background:var(--superficie);transition:filter .15s ease}
.accion-btn:hover{filter:brightness(1.08)}
.accion-btn svg{flex-shrink:0}
.accion-btn .titulo{display:block;font-weight:800;font-size:13.5px}
.accion-btn .sub{display:block;font-size:11.5px;color:var(--texto-sec);margin-top:1px}
.accion-btn.destacada{background:linear-gradient(135deg,#5BCFC0,#35948A);border-color:transparent;box-shadow:0 10px 26px rgba(71,187,174,.3)}
.accion-btn.destacada .titulo,.accion-btn.destacada .sub{color:var(--morado-oscuro)}
.accion-btn.destacada .sub{opacity:.8}

/* --- Conversaciones recientes (Inicio) --- */
.recientes-list{overflow:hidden}
.reciente-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--superficie-2);cursor:pointer;transition:background .12s ease}
.reciente-row:last-child{border-bottom:none}
.reciente-row:hover{background:var(--superficie-2)}
.reciente-row .avatar{width:38px;height:38px;font-size:13px;flex-shrink:0;color:var(--morado-oscuro)}
.reciente-row .nombre{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reciente-row .mensaje{font-size:12px;color:var(--texto-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.reciente-row .negocio-chip{display:inline-block;margin-top:5px;background:var(--superficie-2);color:var(--texto-sec);font-size:10px;font-weight:700;border-radius:999px;padding:2px 8px}

/* --- Empty / loading --- */
.empty-state,.loading-state{text-align:center;padding:var(--xxl) var(--md);color:var(--texto-sec)}
.empty-state svg,.loading-state svg{width:48px;height:48px;color:var(--texto-sec);margin-bottom:var(--md)}
.empty-state h3{font-size:16px;color:var(--texto);margin-bottom:4px}
.empty-state p{font-size:13px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--borde);border-top-color:var(--verde);animation:spin .8s linear infinite;margin:0 auto var(--md)}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Chips / badges --- */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:700}
.chip-ia-activa{background:var(--verde-suave);color:var(--verde)}
.chip-ia-pausada{background:var(--superficie-2);color:var(--texto-sec)}
.chip-conectado{background:var(--verde-suave);color:var(--verde-oscuro)}
.chip-sin-config{background:rgba(232,163,61,.15);color:var(--advertencia)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.badge-count{background:var(--error);color:var(--blanco);border-radius:var(--r-pill);padding:2px 8px;font-size:11px;font-weight:800}
.filtro-chip{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--borde);background:var(--superficie);font-size:13px;font-weight:700;cursor:pointer;color:var(--texto);white-space:nowrap}
.filtro-chip.activo{background:var(--verde);border-color:var(--verde);color:var(--morado-oscuro)}

/* --- Lista de conversaciones --- */
.conv-tile{display:flex;gap:var(--md);align-items:flex-start;padding:var(--sm) 0}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--morado-suave);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;position:relative}
/* Avatares con gradiente, un color por fila (mismo criterio que ya se
   usa para el ícono de cada negocio) -- se combinan con .avatar, acá
   abajo para ganarle por orden de cascada. */
.avatar-grad-0{background:linear-gradient(145deg,#5BCFC0,#35948A);color:var(--morado-oscuro)}
.avatar-grad-1{background:linear-gradient(145deg,#F16A6E,#C8383D);color:var(--morado-oscuro)}
.avatar-grad-2{background:linear-gradient(145deg,#7C98FF,#4E68D6);color:var(--morado-oscuro)}
.avatar-grad-3{background:linear-gradient(145deg,#A98BFF,#6B4FD6);color:var(--morado-oscuro)}
.avatar-grad-4{background:linear-gradient(145deg,#F0B95B,#C8883D);color:var(--morado-oscuro)}
.avatar-grad-5{background:linear-gradient(145deg,#5BCF9E,#2FAF83);color:var(--morado-oscuro)}
.avatar .dot-indicador{position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--superficie)}
.conv-tile .fila1{display:flex;justify-content:space-between;gap:var(--sm)}
.conv-tile .nombre{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-tile .fecha{font-size:11px;font-family:var(--mono);color:var(--texto-sec);flex-shrink:0}
.conv-tile .fecha.nuevo{color:var(--verde-oscuro);font-weight:700}
.conv-tile .mensaje{font-size:13px;color:var(--texto-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.conv-tile .mensaje.nuevo{color:var(--texto);font-weight:600}
.conv-tile .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

/* --- Chat --- */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 56px)}
.chat-etiquetas{background:var(--superficie);border-bottom:1px solid var(--borde);padding:8px var(--md);display:flex;gap:6px;flex-wrap:wrap}
.chat-mensajes{flex:1;overflow-y:auto;padding:var(--sm) var(--md)}
.bubble-row{display:flex;margin-bottom:8px}
.bubble-row.enviado{justify-content:flex-end}
.bubble{max-width:78%;padding:10px 14px;border-radius:16px;position:relative;cursor:default}
.bubble-row.enviado .bubble{background:linear-gradient(165deg,#1B4540,var(--verde-suave));border-bottom-right-radius:4px;box-shadow:0 6px 16px rgba(22,52,48,.35)}
.bubble-row.recibido .bubble{background:var(--superficie);border-bottom-left-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.bubble.resaltado{outline:2px solid var(--verde)}
.bubble .texto{white-space:pre-wrap;word-break:break-word;font-size:14.5px}
.bubble .meta{font-size:10px;font-family:var(--mono);color:var(--texto-sec);margin-top:4px;text-align:right}
.bubble img{max-width:100%;border-radius:12px;display:block;cursor:pointer}
.bubble audio{width:220px}
.bubble .doc-link{display:flex;align-items:center;gap:6px;color:var(--verde)}
.chat-input-bar{display:flex;align-items:flex-end;gap:8px;padding:8px var(--md);background:var(--fondo);border-top:1px solid var(--borde)}
.chat-input-bar .input-wrap{flex:1;background:var(--superficie);border-radius:var(--r-pill);padding:10px 16px;display:flex;align-items:center}
.chat-input-bar textarea{flex:1;background:none;border:none;outline:none;color:var(--texto);resize:none;max-height:120px;font-size:14.5px}
.recording-bar{display:flex;align-items:center;gap:10px;flex:1}
.recording-bar .rec-dot{width:10px;height:10px;border-radius:50%;background:var(--error);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.recording-bar .rec-time{flex:1;color:var(--texto-sec);font-size:13px}

/* --- Modal / sheet --- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.overlay.center{align-items:center;padding:var(--md)}
.sheet{background:var(--superficie);width:100%;max-width:520px;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--md);max-height:85vh;overflow-y:auto}
.overlay.center .sheet{border-radius:var(--r-lg);max-height:90vh}
.sheet-handle{width:40px;height:4px;background:var(--borde);border-radius:var(--r-pill);margin:0 auto var(--md)}
.sheet h3{font-size:16px;margin-bottom:var(--sm)}
.sheet-item{display:flex;align-items:center;gap:var(--md);padding:12px 4px;cursor:pointer;border-bottom:1px solid var(--borde)}
.sheet-item:last-child{border-bottom:none}
.sheet-item svg{width:22px;height:22px;color:var(--verde)}
.sheet-item.danger svg{color:var(--error)}

/* --- Toast --- */
#toast-root{position:fixed;left:0;right:0;bottom:84px;z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--superficie-2);color:var(--texto);border:1px solid var(--borde);padding:12px 18px;border-radius:var(--r-sm);font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:90vw}

/* --- Auth (login/registro/recuperar) --- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--md);background:linear-gradient(160deg,var(--morado),var(--morado-suave) 55%,var(--morado-oscuro))}
.auth-card{background:var(--superficie);border-radius:var(--r-lg);padding:var(--lg);max-width:400px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.4)}
/* El logo real (assets/img/logo-italku.svg) es un lockup ancho --
   ícono + texto "iTalku" en un único SVG de 232x70 -- así que acá NO
   se recorta a un círculo (eso lo dejaba ilegible, solo se veía un
   fragmento del texto). */
.auth-logo{display:flex;align-items:center;justify-content:center;margin:0 auto var(--lg)}
.auth-logo img{height:40px;width:auto;display:block}
.auth-title{text-align:center;color:var(--blanco);font-size:22px;font-weight:800;margin-bottom:4px}
.auth-subtitle{text-align:center;color:rgba(255,255,255,.7);font-size:13px;margin-bottom:var(--lg)}
.auth-footer-link{text-align:center;margin-top:var(--md);font-size:13px;color:rgba(255,255,255,.85)}
.auth-footer-link a{color:var(--verde);font-weight:700}

/* --- utilidades --- */
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.gap-sm{gap:var(--sm)}
.text-center{text-align:center}
.mt-md{margin-top:var(--md)}
.mb-md{margin-bottom:var(--md)}
.w-100{width:100%}

@media (max-width:480px){
  .negocios-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* --- Ajustes: menú de opciones --- */
.menu-item{display:flex;align-items:center;gap:var(--md);text-align:left}
.menu-item-icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--verde-suave);color:var(--verde);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-item-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.menu-item-title{font-size:14.5px;font-weight:700}
.menu-item-sub{font-size:12px;color:var(--texto-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-item>svg:last-child{transform:rotate(180deg);color:var(--texto-sec);flex-shrink:0}

/* --- Listas CRUD (Colores/Etiquetas) --- */
.list-row{display:flex;align-items:center;gap:var(--sm);padding:12px 0;border-bottom:1px solid var(--borde)}
.list-row:last-child{border-bottom:none}
.color-swatch{width:22px;height:22px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.15)}
.list-row .nombre{flex:1;font-size:14.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .acciones{display:flex;gap:2px;flex-shrink:0}

/* --- Switch (IA activa, etc.) --- */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:var(--md);padding:4px 0 var(--md)}
.switch-row .lab{font-size:14.5px;font-weight:700}
.switch-row .sub{font-size:12px;color:var(--texto-sec);margin-top:2px}
.switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--superficie-2);border:1px solid var(--borde);border-radius:999px;cursor:pointer;transition:.15s}
.switch .slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--texto-sec);border-radius:50%;transition:.15s}
.switch input:checked+.slider{background:var(--verde-suave);border-color:var(--verde)}
.switch input:checked+.slider:before{transform:translateX(18px);background:var(--verde)}

/* --- Form section (Meta/IA) --- */
.section-title{font-size:13px;font-weight:800;color:var(--texto-sec);text-transform:uppercase;letter-spacing:.04em;margin:var(--lg) 0 var(--sm)}
.section-title:first-child{margin-top:0}
.kv-row{display:flex;align-items:center;gap:var(--sm);padding:8px 0;border-bottom:1px solid var(--borde)}
.kv-row:last-child{border-bottom:none}
.kv-row .k{font-size:12px;color:var(--texto-sec);width:90px;flex-shrink:0}
.kv-row .v{flex:1;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Licencias / paquetes (Stripe) --- */
.paquetes-scroll{display:flex;gap:var(--sm);overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
.paquete-card{flex-shrink:0;width:220px;scroll-snap-align:start;display:flex;flex-direction:column;padding:0;overflow:hidden}
.paquete-card .cabecera{background:var(--morado);color:var(--blanco);padding:var(--md);font-weight:700;font-size:15px}
.paquete-card .cuerpo{padding:var(--md);display:flex;flex-direction:column;flex:1;gap:4px}
.paquete-card .desc{font-size:12.5px;color:var(--texto-sec);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.paquete-card .dato{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--texto-sec)}
.paquete-card .dato svg{width:15px;height:15px;flex-shrink:0}
.paquete-card .precio{font-weight:800;font-size:16px;margin:6px 0}
.lic-row{display:flex;align-items:center;gap:var(--md);padding:12px 0;border-bottom:1px solid var(--borde)}
.lic-row:last-child{border-bottom:none}
.lic-row .icono{width:40px;height:40px;border-radius:50%;background:var(--verde-suave);color:var(--verde-oscuro);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pago-overlay .sheet{max-width:440px}
#pago-elemento{margin:var(--md) 0}
.pago-error{color:var(--error);font-size:13px;margin-top:8px;min-height:16px}

/* ======================================================================
   Escritorio (≥1024px) -- sidebar persistente en vez de bottom-nav, y
   Conversaciones en 2 paneles (lista + chat) en vez de navegar a pantalla
   completa. Mobile (todo lo de arriba) queda exactamente igual: estas
   reglas solo se activan arriba del breakpoint. `.bottom-nav` sigue
   siendo position:fixed en los dos casos -- en mobile es la barra de
   abajo, acá pasa a ser el riel de la izquierda; como ya estaba fuera
   del flujo normal, alcanza con correr el resto del contenido con
   padding-left, sin agregar ningún contenedor nuevo al HTML. */
@media (min-width:1024px){
  .app-shell:has(.bottom-nav){padding-left:240px}

  .bottom-nav{
    left:0;right:auto;top:0;bottom:0;
    width:240px;height:100vh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    border-top:none;border-right:1px solid var(--borde);
    padding:20px 12px;gap:2px;
  }
  .bottom-nav a{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;
    padding:11px 14px;border-radius:var(--r-sm);font-size:14px;font-weight:600;
  }
  .bottom-nav a.active{background:var(--verde-suave);color:var(--verde)}
  .bottom-nav svg{width:19px;height:19px}

  .app-main{max-width:980px;padding:32px 40px 60px}
  .negocios-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .home-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--lg);align-items:start}

  .bottom-nav-logo{display:flex;align-items:center;padding:4px 10px 18px}
  .bottom-nav-logo img{height:30px;width:auto;display:block}

  /* Conversaciones: lista + chat lado a lado dentro del mismo
     app-shell, sin tocar la estructura de chat.php (que sigue
     funcionando exactamente igual cuando se visita suelta). */
  .app-shell:has(.conv-chat-panel){
    display:grid;
    grid-template-columns:380px 1fr;
    grid-template-rows:auto 1fr;
    height:100vh;overflow:hidden;
  }
  .app-shell:has(.conv-chat-panel) > .app-bar{grid-column:1/3;grid-row:1}
  .app-shell:has(.conv-chat-panel) > .app-main{grid-column:1;grid-row:2;max-width:none;overflow-y:auto;padding:16px 16px 24px 24px;border-right:1px solid var(--borde)}
  .app-shell:has(.conv-chat-panel) > .conv-chat-panel{grid-column:2;grid-row:2}
}

.conv-chat-panel{display:none}
@media (min-width:1024px){
  .conv-chat-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--fondo)}
  .conv-chat-panel .empty-state{max-width:280px}
  .conv-chat-panel iframe{width:100%;height:100%;border:none;display:block}
}
.conv-tile.activo{border-color:var(--verde);background:var(--superficie-2)}