/* Agente IA panel — chat lateral derecho con margen */
  #ia-panel {
    position: fixed;
    right: calc(var(--drawer-w-desktop) + var(--space-3));
    bottom: calc(var(--sa-bottom) + 56px + var(--space-4) + var(--space-3));
    z-index: var(--z-modal);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 380px;
    max-height: min(70vh, 640px);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(8px) scale(0.97);
    transform-origin: bottom right;
    transition: transform var(--t-base), opacity var(--t-base), right var(--t-drawer);
    opacity: 0; pointer-events: none;
  }
  #ia-panel:not(.minimized) {
    transform: translateY(0) scale(1);
    opacity: 1; pointer-events: auto;
  }
  /* Tablet: anclado a la derecha sin invadir drawers */
  @media (max-width: 1023px) {
    #ia-panel {
      left: auto;
      right: var(--space-3);
      width: min(380px, calc(100vw - var(--space-3) * 2));
      max-height: calc(100vh - var(--topbar-h) - 56px - var(--space-4) * 2 - var(--sa-bottom));
    }
  }
  /* En desktop con sidebar Herramientas colapsado, recuperar margen al borde */
  @media (min-width: 1024px) {
    body.sidebar-tools-collapsed #ia-panel {
      right: calc(var(--sa-right) + var(--space-4));
    }
  }
  /* Móvil pequeño: casi ancho completo */
  @media (max-width: 600px) {
    #ia-panel {
      left: var(--space-3);
      right: var(--space-3);
      width: auto;
    }
  }
  #ia-panel.minimized #ia-body { display: none; }
  #ia-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; user-select: none;
    border-bottom: 1px solid var(--color-border); flex-shrink: 0;
    background: var(--color-surface-1);
  }
  #ia-header h2 {
    font-size: 13px; margin: 0;
    display: flex; align-items: center; gap: 6px;
  }
  #ia-header h2::before {
    content: '';
    display: inline-block;
    width: 20px; height: 20px;
    background: url('/assets/Logo.png') center/contain no-repeat;
    border-radius: 50%;
    flex-shrink: 0;
  }
  /* Saludo inicial de Octavio: avatar + texto */
  .octavio-intro {
    display: flex; align-items: flex-start; gap: 8px;
  }
  .octavio-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f5f5;
  }
  .octavio-intro .octavio-intro-text { flex: 1; min-width: 0; }
  #ia-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #ia-chat {
    flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 13px;
    min-height: 200px;
  }
  #ia-maximize, #ia-close, #ia-skills-btn {
    font-size: 16px; color: #666; cursor: pointer; user-select: none;
    padding: 0 4px; line-height: 1;
  }
  #ia-maximize:hover { color: var(--color-primary); }
  #ia-skills-btn { font-size: 17px; }
  #ia-skills-btn:hover { color: #1e3a8a; transform: scale(1.1); transition: transform .12s; }
  #ia-skills-btn:focus { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 4px; }
  #ia-close { font-size: 20px; }
  #ia-close:hover { color: #c0392b; }
  #ia-header-actions { display: flex; align-items: center; gap: 8px; }
  .ia-msg { margin: 6px 0; line-height: 1.5; }
  .ia-msg.bot { color: #333; }
  .ia-msg.bot .ia-bubble {
    background: #f0f4f8; padding: 6px 10px; border-radius: 8px 8px 8px 2px;
    display: inline-block; max-width: 95%;
  }
  .ia-msg.user { text-align: right; }
  .ia-msg.user .ia-bubble {
    background: #1e90ff; color: #fff; padding: 6px 10px; border-radius: 8px 8px 2px 8px;
    display: inline-block; max-width: 85%;
  }
  .ia-msg .ia-sql { font-size: 10px; color: #888; margin-top: 3px; font-family: monospace; word-break: break-all; }
  .ia-msg .ia-actions { margin-top: 4px; }
  .ia-msg .ia-actions button {
    font-size: 10px; padding: 2px 8px; border: 1px solid #ccc; border-radius: 3px;
    background: #fff; cursor: pointer; margin-right: 4px;
  }
  .ia-msg .ia-actions button:hover { background: #f0f0f0; }
  .ia-msg .ia-actions button.primary { background: #1a9850; color: #fff; border-color: #1a9850; }
  .ia-msg .ia-table { font-size: 10px; margin-top: 4px; max-height: 120px; overflow: auto; }
  .ia-msg .ia-table table { border-collapse: collapse; width: 100%; }
  .ia-msg .ia-table th, .ia-msg .ia-table td { border: 1px solid #ddd; padding: 2px 4px; text-align: left; }
  .ia-msg .ia-table th { background: #f5f5f5; position: sticky; top: 0; }
  .ia-section-title { font-size: 11px; color: #666; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.3px; }
  .ia-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
  .ia-chip {
    font-size: 11px; padding: 4px 10px; border: 1px solid #1e90ff44;
    border-radius: 12px; background: #f0f7ff; color: #1e3a5f;
    cursor: pointer; line-height: 1.3; font-family: inherit;
    text-align: left;
  }
  .ia-chip:hover { background: #dbe9ff; border-color: #1e90ff; }
  /* Footer interno del chat: input + botón enviar */
  #ia-input-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-1);
    flex-shrink: 0;
  }
  #ia-input-row #ia-input {
    flex: 1; min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: 14px;
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  #ia-input-row #ia-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.15);
  }
  #ia-input-row #ia-send {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border: 0; padding: 0; cursor: pointer;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), transform 0.08s ease;
  }
  #ia-input-row #ia-send:hover  { background: var(--color-primary-700); }
  #ia-input-row #ia-send:active { transform: scale(0.94); }
  #ia-send:disabled { opacity: 0.55; cursor: wait; }
  .ia-loading { color: #999; font-style: italic; }
  /* Modo expandido del chat — no invadir el sidebar Capas POT a la izquierda */
  @media (min-width: 1024px) {
    #ia-panel.maximized {
      width: min(640px, calc(100vw - var(--layers-w-desktop) - var(--drawer-w-desktop) - var(--space-3) * 4));
      max-height: 80vh;
    }
  }

  /* Leyenda automática de capas Octavio (bottom-left del mapa) */
  #ia-legend {
    display: none;
    position: absolute;
    bottom: 36px;
    left: 10px;
    z-index: 10;
    user-select: none;
    font-size: 12px;
  }
  /* Botón colapsable (visible solo en mobile) */
  #ia-legend .leg-collapse-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    font-family: inherit;
  }
  #ia-legend .leg-collapse-btn:active { transform: scale(0.96); }
  #ia-legend .leg-collapse-chev {
    font-size: 10px;
    transition: transform 0.2s;
    color: #666;
  }
  #ia-legend.leg-open .leg-collapse-chev { transform: rotate(180deg); }
  #ia-legend .leg-count {
    background: var(--color-primary, #1e90ff);
    color: #fff;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
  }
  /* Contenido de la leyenda */
  #ia-legend .leg-body {
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 6px 11px 8px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    min-width: 170px;
    max-width: 260px;
  }
  #ia-legend .leg-body .leg-section + .leg-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  #ia-legend .leg-title {
    font-weight: 600;
    font-size: 10.5px;
    color: #555;
    margin: 2px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
  }
  #ia-legend .leg-title small {
    font-weight: 400;
    color: #999;
    font-size: 9.5px;
    text-transform: none;
    letter-spacing: 0;
  }
  #ia-legend .leg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    line-height: 1.3;
  }
  #ia-legend .leg-row:hover { background: rgba(0, 0, 0, 0.06); }
  #ia-legend .leg-row.leg-off {
    opacity: 0.32;
    text-decoration: line-through;
  }
  #ia-legend .leg-row.leg-static { cursor: default; }
  #ia-legend .leg-row.leg-static:hover { background: transparent; }
  #ia-legend .leg-swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
  }
  #ia-legend .leg-swatch.leg-gradient {
    width: 13px;
    height: 13px;
  }

  /* Mobile (≤1023px): leyenda colapsable como botón flotante */
  @media (max-width: 1023px) {
    #ia-legend .leg-collapse-btn { display: inline-flex; }
    #ia-legend .leg-body {
      display: none;
      margin-top: 6px;
      max-height: 50vh;
      min-width: 180px;
      max-width: calc(100vw - 24px);
    }
    #ia-legend.leg-open .leg-body { display: block; }
  }
  /* Mobile pequeño: la leyenda abierta ocupa más ancho */
  @media (max-width: 600px) {
    #ia-legend .leg-body { font-size: 11.5px; }
    #ia-legend .leg-collapse-btn { padding: 7px 12px; font-size: 11.5px; }
  }

  /* ── Leyenda flotante para links UAU ──────────────────────────────── */
  #uau-legend {
    position: fixed;
    bottom: 40px;
    left: 10px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 10px;
    box-shadow: 0 3px 16px rgba(0,0,0,0.22);
    font-size: 12px;
    min-width: 210px;
    max-width: 270px;
    user-select: none;
  }
  #uau-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px 7px;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    gap: 8px;
  }
  #uau-legend-header .uau-leg-title {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
    color: #222;
  }
  #uau-legend-header .uau-leg-sub {
    font-size: 10.5px;
    color: #888;
    font-weight: 400;
  }
  #uau-legend-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
  }
  #uau-legend-body {
    max-height: 52vh;
    overflow-y: auto;
    padding: 6px 0 8px;
  }
  .uau-leg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px;
    transition: background 0.1s, opacity 0.15s;
    cursor: pointer;
  }
  .uau-leg-row:hover { background: rgba(0,0,0,0.06); }
  .uau-leg-row.uau-leg-off {
    opacity: 0.32;
    text-decoration: line-through;
  }
  .uau-leg-swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.18);
    flex-shrink: 0;
  }
  .uau-leg-label {
    line-height: 1.35;
    color: #333;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .uau-leg-count {
    background: #e0e0e0;
    color: #555;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    flex-shrink: 0;
  }
  .uau-ctrl-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.4;
    color: #555;
    transition: background 0.1s;
  }
  .uau-ctrl-btn:hover { background: rgba(0,0,0,0.06); }
  @media (max-width: 600px) {
    #uau-legend { max-width: calc(100vw - 20px); font-size: 11.5px; }
    #uau-legend-body { max-height: 40vh; }
  }