/* =====================================================================
   Tema estilo shadcn/ui: neutro, prolijo, con el color del espacio solo en detalles.
   Se carga después de todo: pisa estilos anteriores sin tocar la lógica.
   ===================================================================== */
:root{
  --tinta:#09090B; --tinta-suave:#71717A; --muted:#F4F4F5; --muted-2:#FAFAFA;
  --fondo:#FAFAFA; --superficie:#FFFFFF; --linea:#E4E4E7; --linea-fuerte:#D4D4D8;
  --error:#DC2626;
  --r-chico:8px; --r-medio:12px; --r-grande:12px;
  --f-display:'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-texto:'Inter', 'Segoe UI', system-ui, sans-serif;
  --sombra:0 1px 2px rgb(0 0 0 / .05);
  --sombra-md:0 4px 12px -2px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .05);
  --anillo:0 0 0 3px color-mix(in srgb,var(--acento) 22%,transparent);
}
body{background:var(--fondo);font:14px/1.55 var(--f-texto);color:var(--tinta);letter-spacing:-.005em}
.ico-svg{display:block;flex:none}

/* ---------- Estructura: menú + panel "inset" ---------- */
.app{grid-template-columns:256px minmax(0,1fr);background:var(--fondo)}
.side{background:var(--fondo);color:var(--tinta);padding:12px 10px}
.side-marca{padding:6px 8px 16px;gap:10px}
.side-marca .monograma{width:32px;height:32px;border-radius:8px;font-size:13px;box-shadow:none}
.side-marca img{height:30px}
.side-nombre{font:600 14px/1.2 var(--f-texto);letter-spacing:-.01em}
.nav{gap:2px}
.nav a{height:36px;padding:0 10px;gap:10px;border-radius:8px;opacity:1;font:500 14px var(--f-texto);color:var(--tinta);box-shadow:none !important}
.nav a:hover{background:var(--muted)}
.nav a[aria-current="page"]{background:var(--superficie);color:var(--tinta);font-weight:600;box-shadow:var(--sombra) !important;outline:1px solid var(--linea)}
.nav .ico{width:auto;height:auto;background:none !important;color:var(--tinta-suave);font-size:16px}
.nav a[aria-current="page"] .ico{color:var(--acento)}
.side-pie{border-top:0;padding-top:8px}
.usuario-btn{padding:8px;border-radius:8px}
.usuario-btn:hover,.usuario-btn[aria-expanded="true"]{background:var(--muted)}
.usuario-txt strong{font-weight:600}
.usuario-txt span{opacity:1;color:var(--tinta-suave)}
.usuario-mas{opacity:1;color:var(--tinta-suave)}
.menu-usuario{border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra-md);padding:4px}
.menu-usuario a,.menu-usuario button{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;font-size:14px}
.menu-usuario a:hover,.menu-usuario button:hover{background:var(--muted)}
.menu-usuario .ico-svg{color:var(--tinta-suave)}
.menu-usuario .peligro .ico-svg{color:var(--error)}

.contenido{margin:8px 8px 8px 0;background:var(--superficie);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);
  min-height:calc(100vh - 16px);display:flex;flex-direction:column;overflow:clip}
.topbar{display:flex;align-items:center;gap:8px;height:52px;padding:0 20px;flex:none;border-bottom:1px solid var(--linea);
  background:rgb(255 255 255 / .85);backdrop-filter:blur(6px);color:var(--tinta);position:sticky;top:0;z-index:5;font:500 14px var(--f-texto)}
.topbar button{display:none}
#topNombre{color:var(--tinta-suave)}
.miga-sep{color:var(--linea-fuerte)}
#topSeccion{font-weight:600}
.main{padding:28px 32px;flex:1;min-width:0}
.main h1{font:600 24px/1.25 var(--f-texto);letter-spacing:-.025em;margin:0 0 4px}
.main .sub{font-size:14px;color:var(--tinta-suave);margin:0 0 24px}
.sub-corta{margin:4px 0 0 !important}
.cabecera{margin-bottom:24px;align-items:center}

/* ---------- Componentes base ---------- */
.btn{height:36px;padding:0 16px;border-radius:8px;font:500 14px var(--f-texto);box-shadow:var(--sombra);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:none;filter:none;opacity:.9}
.btn-sec{height:36px;padding:0 14px;border:1px solid var(--linea);border-radius:8px;background:var(--superficie);font:500 14px var(--f-texto);
  box-shadow:var(--sombra);color:var(--tinta);gap:8px}
.btn-sec:hover{background:var(--muted);border-color:var(--linea);transform:none}
.btn-link{font-size:14px;font-weight:500;color:var(--tinta-suave)}
.btn-link:hover{color:var(--tinta)}
.btn-link.peligro:hover{color:var(--error)}
.btn-icono{width:36px;height:36px;border:1px solid var(--linea);border-radius:8px;background:var(--superficie);color:var(--tinta);font-size:16px}
.btn-icono:hover{background:var(--muted);border-color:var(--linea)}
.btn-fantasma{border-color:transparent;background:transparent;box-shadow:none;display:inline-grid;place-items:center;color:var(--tinta-suave);text-decoration:none}
.btn-fantasma:hover{background:var(--muted);color:var(--tinta)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

.campo label,fieldset.campo legend{font:500 14px var(--f-texto);margin-bottom:6px}
.campo input,.campo textarea,.campo select,.sel-filtro,.sel-estado,.chat-sel,.sub-campo input,.sub-campo textarea,.tabla-edicion input,
.form-comentario textarea,.form-correccion textarea,.ssh-abrir select{
  border:1px solid var(--linea);border-radius:8px;padding:8px 12px;font:14px var(--f-texto);color:var(--tinta);background:var(--superficie);box-shadow:var(--sombra)}
.campo input,.campo select,.sel-filtro,.sel-estado,.chat-sel{height:36px}
.campo input:focus,.campo textarea:focus,.campo select:focus,.sel-filtro:focus,.sel-estado:focus,.chat-sel:focus,.sub-campo input:focus,
.sub-campo textarea:focus,.tabla-edicion input:focus,.form-comentario textarea:focus{outline:none;border-color:var(--linea-fuerte);box-shadow:var(--anillo)}
.ayuda{font-size:13px}

.tarjeta{border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);padding:24px;background:var(--superficie)}
.tarjeta h2{font:600 16px/1.3 var(--f-texto);letter-spacing:-.01em;margin:0 0 16px}
.vacio{border:1px dashed var(--linea-fuerte);border-radius:12px;box-shadow:none;background:var(--muted-2)}
.nota{font-size:13px}

.tabs{display:inline-flex;gap:0;border:0;background:var(--muted);border-radius:10px;padding:4px;margin:0 0 20px;max-width:100%}
.tabs a{padding:6px 12px;border-radius:7px;border:0;margin:0;font:500 14px var(--f-texto);color:var(--tinta-suave)}
.tabs a:hover{color:var(--tinta)}
.tabs a[aria-current="page"]{background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra)}

.tabla{border:1px solid var(--linea);border-radius:12px;box-shadow:none}
.tabla th{font:500 13px var(--f-texto);color:var(--tinta-suave);padding:10px 14px;border-bottom:1px solid var(--linea);background:var(--muted-2)}
.tabla td{font-size:14px;padding:10px 14px;border-bottom:1px solid var(--linea)}
.tabla tbody tr:hover td{background:var(--muted-2)}

.estado,.chip-mod{border-radius:6px;font:500 12px/1.6 var(--f-texto);padding:1px 8px}
.chip-mod{background:var(--muted);color:var(--tinta)}
.aviso{background:var(--superficie);color:var(--tinta);border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra-md);font-size:14px;font-weight:500}
.aviso-error{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
.dialogo,.visor{border:1px solid var(--linea);border-radius:12px}
.dialogo h1{font:600 18px var(--f-texto)}

/* ---------- Inicio ---------- */
.hero{background:var(--superficie);color:var(--tinta);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);padding:24px 28px}
.hero h1{font-size:26px}
.hero .sub{color:var(--tinta-suave);opacity:1}
.hero-kicker{color:var(--acento);opacity:1;font-size:12px}
.hero .btn-sec{background:var(--superficie);border-color:var(--linea);color:var(--tinta)}
.hero-cifra{background:var(--muted);border:0;border-radius:10px}
.hero-cifra strong{font:700 26px/1 var(--f-texto)}
.hero-cifra span{color:var(--tinta-suave);opacity:1}
.acceso-mod{border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra)}
.acceso-mod:hover{transform:none;background:var(--muted-2);border-color:var(--linea-fuerte)}
.acceso-mod strong{font:600 15px var(--f-texto)}

/* ---------- Login ---------- */
.form h1{font:600 24px/1.2 var(--f-texto);letter-spacing:-.02em}
.marca-nombre{font-family:var(--f-texto);font-weight:700;letter-spacing:-.045em}

/* =====================================================================
   Consultas en formato ChatGPT
   ===================================================================== */
.main.pagina-ws{padding:0;display:flex;flex-direction:column}
.chat.chat-ws{display:grid;grid-template-columns:272px minmax(0,1fr);height:calc(100vh - 70px);max-width:none;
  background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.conv-panel{display:flex;flex-direction:column;gap:8px;padding:14px 12px;border-right:1px solid var(--linea);min-height:0;background:var(--muted-2)}
.conv-cab{display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:0 4px}
.conv-cab strong{font:600 14px var(--f-texto)}
.conv-cab .btn-icono{width:32px;height:32px}
.btn-nueva{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--linea);border-radius:8px;background:var(--superficie);
  font:500 14px var(--f-texto);color:var(--tinta);cursor:pointer;box-shadow:var(--sombra)}
.btn-nueva:hover{background:var(--muted)}
.conv-buscar{height:34px;border:1px solid var(--linea);border-radius:8px;padding:0 10px;font:13px var(--f-texto);background:var(--superficie)}
.conv-buscar:focus{outline:none;box-shadow:var(--anillo)}
.conv-lista{flex:1;min-height:0;overflow:auto;margin:0 -4px;padding:0 4px}
.conv-grupo-tit{margin:12px 0 4px;padding:0 8px;font:500 12px var(--f-texto);color:var(--tinta-suave)}
.conv-item{display:flex;align-items:center;border-radius:8px}
.conv-item:hover{background:var(--muted)}
.conv-item.activa{background:var(--superficie);box-shadow:var(--sombra);outline:1px solid var(--linea)}
.conv-abrir{flex:1;min-width:0;border:0;background:none;text-align:left;padding:8px 10px;font:14px var(--f-texto);color:var(--tinta);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-borrar{border:0;background:none;padding:6px 8px;color:var(--tinta-suave);cursor:pointer;opacity:0;border-radius:6px}
.conv-item:hover .conv-borrar,.conv-borrar:focus-visible{opacity:1}
.conv-borrar:hover{color:var(--error)}
.conv-vacia{padding:8px;color:var(--tinta-suave);font-size:13px}

.chat-col{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--superficie)}
.chat-ws .chat-mensajes{flex:1;min-height:0;overflow:auto;padding:28px 24px 12px;gap:22px}
.chat-ws .msg-fila{width:min(780px,100%);align-self:center;max-width:none}
.chat-ws .msg-fila.fila-user{flex-direction:row-reverse}
.chat-ws .msg{max-width:100%}
.chat-ws .msg-fila.fila-user .msg{max-width:85%}
.chat-ws .msg-assistant{background:none !important;border:0 !important;padding:2px 0 0 !important;border-radius:0 !important;font-size:15px;line-height:1.65}
.chat-ws .msg-user{background:var(--muted) !important;color:var(--tinta) !important;border:0 !important;box-shadow:none !important;
  border-radius:18px !important;padding:10px 16px !important;font-size:15px}
.chat-ws .msg-av{width:30px;height:30px;box-shadow:0 0 0 1px var(--linea)}
.chat-ws .msg-fila.fila-user .msg-av{display:none}
.chat-ws .msg-autor{color:var(--tinta);font:600 13px var(--f-texto);text-transform:none;letter-spacing:0;margin-bottom:4px}
.chat-ws .msg-assistant strong{font-weight:600}
.chat-ws .msg-assistant p{margin:0 0 10px}
.chat-ws .msg-assistant ol,.chat-ws .msg-assistant ul{padding-left:22px;margin:0 0 12px}
.chat-ws .msg-assistant li{margin:4px 0}
.chat-ws .msg-acciones{border-top:0;padding-top:0;margin-top:6px;gap:6px}
.chat-ws .msg-acciones .btn-link{font-size:13px;padding:4px 6px;border-radius:6px}
.chat-ws .msg-acciones .btn-link:hover{background:var(--muted);text-decoration:none}
.chat-ws .votos{margin-left:0}
.chat-ws .votos .nota{display:none}
.chat-ws .voto{padding:4px 6px;border-radius:6px;font-size:14px}
.chat-ws .voto:hover{background:var(--muted)}
.chat-ws .msg-assistant p.fuentes-chips{border-top:0;padding:0;margin:12px 0 4px}
.fuente-link{border-radius:8px;padding:4px 10px;font-weight:500;background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra)}
.fuente-link .ico-svg{color:var(--tinta-suave)}
button.fuente-link:hover{background:var(--muted);color:var(--tinta);border-color:var(--linea-fuerte)}
.fuentes-etq{font:500 12px var(--f-texto);text-transform:none;letter-spacing:0}
.chat-ws .puntos-pensando i{background:var(--tinta-suave)}

.chat-inicio{margin:auto;width:min(760px,100%);text-align:center;padding:32px 8px}
.chat-inicio h2{font:600 28px/1.2 var(--f-texto);letter-spacing:-.03em;margin:0 0 8px}
.chat-inicio p{color:var(--tinta-suave);margin:0 auto 28px;max-width:560px;font-size:15px}
.sugerencias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
.sugerencia{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--linea);border-radius:12px;background:var(--superficie);
  cursor:pointer;font:inherit;color:inherit;box-shadow:var(--sombra);text-align:left}
.sugerencia:hover{background:var(--muted-2);border-color:var(--linea-fuerte)}
.sugerencia strong{font:600 14px var(--f-texto)}
.sugerencia span{font-size:13px;color:var(--tinta-suave);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.chat-ws .chat-compositor{padding:8px 24px 14px;border:0}
.chat-ws .chat-chips{width:min(780px,100%);margin:0 auto}
.chat-ws .chat-fila{width:min(780px,100%);margin:0 auto;display:flex;align-items:flex-end;gap:6px;padding:8px;background:var(--superficie) !important;
  border:1px solid var(--linea) !important;border-radius:20px !important;box-shadow:var(--sombra-md)}
.chat-ws .chat-fila:focus-within{border-color:var(--linea-fuerte) !important;box-shadow:var(--sombra-md),var(--anillo) !important}
.chat-ws .chat-fila textarea{flex:1;border:0 !important;background:transparent !important;box-shadow:none !important;resize:none;padding:8px 10px;
  font:15px/1.5 var(--f-texto);min-height:40px;max-height:200px}
.chat-ws .chat-fila textarea:focus{outline:none}
.chat-ws .btn-icono{border:0;width:36px;height:36px;border-radius:50%}
.btn-enviar{width:36px;height:36px;flex:none;border:0;border-radius:50%;background:var(--tinta);color:#fff;display:grid;place-items:center;cursor:pointer}
.btn-enviar:hover{opacity:.85}
.btn-enviar[disabled]{opacity:.35;cursor:progress}
.chat-aclaracion{text-align:center;margin:8px 0 0;font-size:12px;color:var(--tinta-suave)}

/* Martinini chiquito al pie del historial */
.mascota.mascota-compacta{position:relative;flex-direction:column;align-items:center;gap:0;padding:10px 8px 6px;margin-top:4px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra)}
.mascota-compacta .mascota-boton{width:100%}
.mascota-compacta .mascota-escenario{height:118px}
.mascota-compacta .mascota-avatar{width:118px;height:118px}
.mascota-compacta .mascota-img{height:100%}
.mascota-compacta .mascota-halo{width:88px;height:88px;bottom:10px}
.mascota-compacta .mascota-sombra{width:80px;height:10px}
.mascota-compacta .mascota-globo{order:0;margin:0 0 8px;padding:8px 10px;font-size:12.5px;border-radius:10px;min-height:0;box-shadow:none;background:var(--muted)}
.mascota-compacta .mascota-globo::after{left:50%;top:auto;bottom:-6px;width:12px;height:12px;background:var(--muted);border:0;transform:translateX(-50%) rotate(45deg)}
.mascota-compacta .mascota-nombre{display:none}
.mascota-compacta .mascota-controles{display:flex;margin-top:4px}
.mascota-compacta .mascota-ctrl{font-size:12px;padding:4px 8px;box-shadow:none}
.mascota-compacta .mascota-ocultar{top:4px;right:4px;width:24px;height:24px;font-size:12px;background:var(--muted)}
.mascota-compacta .emote{font-size:20px}
.mascota.mascota-compacta.mascota-oculta{padding:0;border:0;background:none;box-shadow:none}
.mascota.mascota-compacta.mascota-oculta .mascota-mostrar{width:100%;justify-content:center}

/* ---------- Pantallas chicas ---------- */
@media (max-width:840px){
  .app{grid-template-columns:1fr}
  .side{background:var(--fondo);box-shadow:var(--sombra-md)}
  .contenido{margin:0;border:0;border-radius:0;min-height:100vh}
  .topbar button{display:inline-grid;place-items:center;background:none;border:0;color:inherit;padding:6px;border-radius:8px;cursor:pointer}
  .main{padding:20px 16px}
  .chat.chat-ws{grid-template-columns:1fr;height:calc(100vh - 53px)}
  .conv-panel{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--linea);padding:8px 12px}
  .conv-panel .conv-cab,.conv-panel .conv-buscar,.conv-panel .conv-lista,.conv-panel .mascota{display:none}
  .sugerencias{grid-template-columns:1fr}
  .chat-ws .chat-mensajes{padding:18px 14px 8px}
  .chat-ws .chat-compositor{padding:6px 10px 10px}
}

/* =====================================================================
   Primario más presente (periwinkle en BPM): el color del espacio pasa a
   notarse en menú, chat, pestañas y tarjetas, sobre la base neutra.
   ===================================================================== */
:root{
  --acento-suave:color-mix(in srgb,var(--acento) 9%,#fff);
  --acento-suave-2:color-mix(in srgb,var(--acento) 15%,#fff);
  --acento-borde:color-mix(in srgb,var(--acento) 28%,#fff);
  --acento-fuerte:color-mix(in srgb,var(--acento) 82%,#000);
  --acento-claro:color-mix(in srgb,var(--acento) 55%,#fff);
}

/* Fondo y menú con un velo del primario */
body,.app{background:color-mix(in srgb,var(--acento) 4%,#FAFAFA)}
.side{background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 7%,#FAFAFA),color-mix(in srgb,var(--acento) 3%,#FAFAFA))}
.side-marca .monograma{background:linear-gradient(135deg,var(--acento-claro),var(--acento));box-shadow:0 4px 12px -4px color-mix(in srgb,var(--acento) 70%,transparent)}
.nav a:hover{background:var(--acento-suave)}
.nav a[aria-current="page"]{background:var(--acento-suave-2);color:var(--acento-fuerte);outline:0;box-shadow:inset 3px 0 0 var(--acento) !important}
.nav a[aria-current="page"] .ico{color:var(--acento)}
.usuario-btn:hover,.usuario-btn[aria-expanded="true"]{background:var(--acento-suave)}
#topSeccion{color:var(--acento-fuerte)}

/* Botones y controles */
.btn{background:var(--acento);color:var(--acento-txt);box-shadow:0 1px 2px color-mix(in srgb,var(--acento) 40%,transparent),0 4px 10px -4px color-mix(in srgb,var(--acento) 55%,transparent)}
.btn:hover{background:var(--acento-fuerte);opacity:1}
.btn-sec:hover,.btn-icono:hover{border-color:var(--acento-borde);background:var(--acento-suave)}
.btn-link:hover{color:var(--acento-fuerte)}
.tabs{background:var(--acento-suave)}
.tabs a[aria-current="page"]{color:var(--acento-fuerte)}
.check input,input[type=checkbox],input[type=radio]{accent-color:var(--acento)}
.chip-mod{background:var(--acento-suave);color:var(--acento-fuerte)}

/* Inicio y tarjetas */
.hero{background:linear-gradient(120deg,var(--acento-suave-2),#fff 65%);border-color:var(--acento-borde)}
.hero-kicker{color:var(--acento)}
.hero-cifra{background:#fff;border:1px solid var(--acento-borde)}
.hero-cifra strong{color:var(--acento-fuerte)}
.acceso-mod:hover{background:var(--acento-suave);border-color:var(--acento-borde)}

/* Consultas */
.conv-panel{background:color-mix(in srgb,var(--acento) 4%,#FAFAFA)}
.btn-nueva{background:var(--acento);color:var(--acento-txt);border-color:transparent}
.btn-nueva:hover{background:var(--acento-fuerte)}
.conv-item:hover{background:var(--acento-suave)}
.conv-item.activa{background:var(--acento-suave-2);outline:1px solid var(--acento-borde);box-shadow:none}
.conv-item.activa .conv-abrir{color:var(--acento-fuerte);font-weight:500}
.chat-inicio h2{background:linear-gradient(90deg,var(--acento-fuerte),var(--acento));-webkit-background-clip:text;background-clip:text;color:transparent}
.sugerencia:hover{background:var(--acento-suave);border-color:var(--acento-borde)}
.sugerencia strong{color:var(--acento-fuerte)}
.chat-ws .msg-user{background:var(--acento-suave-2) !important;color:var(--tinta) !important}
.chat-ws .msg-autor{color:var(--acento-fuerte)}
.chat-ws .msg-av{box-shadow:0 0 0 2px var(--acento-borde)}
.btn-enviar{background:var(--acento)}
.btn-enviar:hover{background:var(--acento-fuerte);opacity:1}
.chat-ws .chat-fila:focus-within{border-color:var(--acento-borde) !important}
.fuente-link .ico-svg{color:var(--acento)}
button.fuente-link:hover{background:var(--acento-suave);border-color:var(--acento-borde);color:var(--acento-fuerte)}
.chat-ws .puntos-pensando i{background:var(--acento)}
.mascota-compacta .mascota-globo,.mascota-compacta .mascota-globo::after{background:var(--acento-suave)}

/* Login: panel de marca con brillo del primario */
.marca{background:radial-gradient(900px 500px at 15% 0%,color-mix(in srgb,var(--acento) 70%,transparent),transparent 60%),var(--marca)}

/* =====================================================================
   Menú lateral achicable
   ===================================================================== */
.app{transition:grid-template-columns .22s ease}
.side{position:sticky}
.side-toggle{position:absolute;top:14px;right:10px;z-index:2;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;
  background:transparent;color:var(--tinta-suave);cursor:pointer}
.side-toggle:hover{background:var(--acento-suave);color:var(--acento-fuerte)}
.side-marca{padding-right:40px}
.app.side-colapsado{grid-template-columns:68px minmax(0,1fr)}
.side-colapsado .side{padding:12px 8px;overflow:visible}
.side-colapsado .side-toggle{right:auto;left:50%;transform:translateX(-50%)}
.side-colapsado .side-marca{justify-content:center;padding:48px 0 14px}
.side-colapsado .side-nombre,
.side-colapsado .nav a span:not(.ico),
.side-colapsado .usuario-txt,
.side-colapsado .usuario-mas{display:none}
.side-colapsado .nav a{justify-content:center;padding:0;gap:0}
.side-colapsado .nav a[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--acento-borde) !important}
.side-colapsado .usuario-btn{justify-content:center;padding:6px}
.side-colapsado .menu-usuario{left:4px;right:auto;width:230px}
@media (max-width:840px){
  .side-toggle{display:none}
  .app.side-colapsado{grid-template-columns:1fr}
  .side-colapsado .side{padding:12px 10px}
  .side-colapsado .side-nombre,.side-colapsado .usuario-mas{display:inline}
  .side-colapsado .usuario-txt{display:flex}
  .side-colapsado .nav a span:not(.ico){display:inline}
  .side-colapsado .nav a{justify-content:flex-start;padding:0 10px;gap:10px}
  .side-colapsado .side-marca{justify-content:flex-start;padding:6px 8px 16px}
  .side-marca{padding-right:8px}
}
@media (prefers-reduced-motion:reduce){ .app{transition:none} }

/* ===== Interacciones de la mascota ===== */
.interacciones-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start}
.interacciones-previa{position:sticky;top:72px;display:flex;flex-direction:column;gap:8px}
.mascota-previa .mascota-escenario{height:170px}
.mascota-previa .mascota-avatar{width:170px;height:170px}
.lista-interacciones{display:flex;flex-direction:column;gap:10px}
.interaccion{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px;border:1px solid var(--linea);border-radius:12px;background:var(--superficie);box-shadow:var(--sombra)}
.interaccion.inactiva{opacity:.55}
.int-emote{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:22px;background:var(--acento-suave)}
.int-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.int-texto{margin:6px 0 4px;font-weight:500}
.int-ramas{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.int-ramas li{padding:6px 10px;border-radius:8px;background:var(--muted-2);border:1px solid var(--linea)}
.int-acciones{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.int-acciones .check{margin:0;font-size:13px}
.form-interaccion{border-color:var(--acento-borde)}
.input-emote{max-width:90px;font-size:18px;text-align:center}
.ramas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ramas[hidden]{display:none}
.rama{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:10px;border:1px solid var(--linea)}
.rama-si{background:color-mix(in srgb,#16A34A 5%,#fff);border-color:color-mix(in srgb,#16A34A 25%,#fff)}
.rama-no{background:color-mix(in srgb,#DC2626 4%,#fff);border-color:color-mix(in srgb,#DC2626 20%,#fff)}
.sub-campo select{height:36px;border:1px solid var(--linea);border-radius:8px;padding:0 10px;font:14px var(--f-texto);background:var(--superficie)}
@media (max-width:1000px){ .interacciones-grid{grid-template-columns:1fr} .interacciones-previa{position:static} .ramas{grid-template-columns:1fr} .interaccion{grid-template-columns:44px 1fr} .int-acciones{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-end} }