:root {
    --bg:        #0a0a0f;
    --surface:   #13131a;
    --surface2:  #1c1c28;
    --border:    #2a2a3d;
    --accent:    #ff3c00;
    --accent2:   #ff7a00;
    --text:      #f0f0f5;
    --text-dim:  #8888a8;
    --green:     #00e887;
    --radius:    14px;
    --bg-input:  #1c1c28;
  }

  /* ── Desplegables: fondo oscuro + letra blanca en todo el tema ── */
  select, select option {
    background: var(--surface2);
    color: var(--text);
  }

  * {
    box-sizing: border-box; margin: 0; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    /* Altura dinámica: 100dvh corrige el bug de iOS Safari con la barra URL */
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Texto nítido en pantallas Retina */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Bloquea pull-to-refresh y bounce para sensación de app */
    overscroll-behavior: none;
    /* Evita selección accidental al hacer long-press en la UI */
    -webkit-touch-callout: none;
  }

  /* Scroll nativo suave con momentum en iOS */
  .messages, .trainer-content, .learn-chat, .t-content,
  #ucontent-list, #pcontent-logs, .prog-log-box, .cats-drop-list,
  #pending-list, #audit-tbody {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Contenido editable sí permite selección */
  textarea, input, .msg-bubble, .pending-summary, .learn-bubble,
  [contenteditable], code, pre {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  /* Feedback táctil suave en botones e interactivos */
  button, .chip, .cats-trigger, .learn-mode-card,
  .sidebar-cat-item, .users-sub-tab, .pending-chip,
  .t-tab, .approve-btn, .reject-btn, .t-btn, .t-btn-ghost,
  .login-pwd-btn, .login-role-card, .learn-start-btn,
  .model-btn, .cats-control-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation; /* elimina delay 300ms en iOS */
    transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  @media (hover: none) {
    button:active, .chip:active, .learn-mode-card:active,
    .sidebar-cat-item:active, .pending-chip:active,
    .approve-btn:active, .reject-btn:active, .t-btn:active,
    .t-btn-ghost:active, .login-pwd-btn:active,
    .login-role-card:active, .learn-start-btn:active,
    .model-btn:active, .cats-control-btn:active, .chip:active {
      transform: scale(0.96);
      opacity: .85;
    }
  }

  /* ── LOGIN ───────────────────────────────────────── */
  #login-screen {
    position: fixed; inset: 0;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    opacity: 1;
    animation: fadeIn .4s ease;
  }
  .login-container {
    text-align: center;
    max-width: 520px;
    width: 90%;
  }
  .login-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800; font-size: 48px;
    letter-spacing: -2px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
  }
  .login-sub {
    color: var(--text-dim); font-size: 14px;
    margin-bottom: 40px; letter-spacing: .3px;
  }
  /* Role cards */
  .login-roles { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .login-role-card {
    flex: 1; min-width: 200px; max-width: 240px;
    background: var(--surface); border: 2px solid var(--border);
    border-radius: 20px; padding: 32px 24px;
    cursor: pointer; transition: all .3s ease; text-align: center;
  }
  .login-role-card:hover {
    border-color: var(--accent); transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255,60,0,.15);
  }
  .login-logo-row {
    display: flex; align-items: center; justify-content: center; gap: 16px;
  }
  .login-mascot-video {
    width: 100px; height: 100px; object-fit: cover; border-radius: 50%;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(255,60,0,.3));
  }
  @media (max-width: 700px) {
    .login-mascot-video { width: 70px; height: 70px; }
    .login-logo-row { gap: 10px; }
  }
  .login-role-icon {
    font-size: 48px; margin-bottom: 12px;
    filter: grayscale(.3); transition: filter .3s;
  }
  .login-role-card:hover .login-role-icon { filter: none; }
  .login-role-name {
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: 20px; color: var(--text); margin-bottom: 6px;
  }
  .login-role-desc {
    font-size: 12px; color: var(--text-dim); line-height: 1.5;
  }
  /* Password dialog */
  .login-pwd-overlay {
    display: none; position: fixed; inset: 0; z-index: 110;
    background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
  }
  .login-pwd-overlay.open { display: flex; }
  .login-pwd-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 20px; padding: 36px 32px;
    width: 340px; max-width: 90%; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: slideUp .3s ease;
  }
  .login-pwd-icon { font-size: 40px; margin-bottom: 10px; }
  .login-pwd-title {
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: 18px; color: var(--text); margin-bottom: 4px;
  }
  .login-pwd-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 20px; }
  .login-pwd-input {
    background: var(--surface2); border: 2px solid var(--border);
    border-radius: 12px; color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size: 16px;
    padding: 14px 18px; width: 100%; text-align: center;
    outline: none; transition: border-color .2s;
    letter-spacing: 2px;
  }
  .login-pwd-input:focus { border-color: var(--accent); }
  .login-pwd-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none; border-radius: 12px; color: #fff;
    cursor: pointer; font-family: 'Syne', sans-serif;
    font-weight: 700; font-size: 15px;
    padding: 14px; width: 100%; margin-top: 14px;
    transition: opacity .2s, transform .2s;
  }
  .login-pwd-btn:hover { opacity: .9; transform: translateY(-1px); }
  .login-pwd-back {
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; font-size: 12px; margin-top: 14px;
    padding: 6px 12px; transition: color .2s;
  }
  .login-pwd-back:hover { color: var(--text); }
  .login-pwd-error {
    color: #f44; font-size: 12px; margin-top: 10px; min-height: 18px;
  }

  @media (max-width: 500px) {
    .login-logo { font-size: 36px; }
    .login-roles { flex-direction: column; align-items: center; }
    .login-role-card { max-width: 100%; min-width: unset; padding: 24px 20px; }
    .login-pwd-box { padding: 28px 24px; }
  }


  /* ── HEADER ─────────────────────────────────────── */
  header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -1px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .role-badge {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    letter-spacing: .3px;
  }
  .role-badge.profesor { color: var(--accent2); border-color: var(--accent2); }

  .logout-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    padding: 5px 12px;
    transition: all .2s;
  }
  .logout-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* ── LAYOUT ─────────────────────────────────────── */
  .app {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* ── SIDEBAR ─────────────────────────────────────── */
  .sidebar {
    width: 280px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 0 0;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    z-index: 10;
  }

  .sidebar-label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 0 16px 10px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* ── HAMBURGER MENU (mobile-only sections) ─────────────── */
  .mobile-only { display: none; }

  .sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .sidebar-user {
    display: flex; align-items: center; gap: 12px; min-width: 0;
  }
  .sidebar-user-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(255, 60, 0, .25);
  }
  .sidebar-user-info {
    display: flex; flex-direction: column; min-width: 0; line-height: 1.2;
  }
  .sidebar-user-name {
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: 15px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 160px;
  }
  .sidebar-user-role {
    font-size: 11px; color: var(--text-dim);
    text-transform: capitalize; margin-top: 2px;
  }
  .sidebar-close {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--surface2); border: 1px solid var(--border);
    color: var(--text); font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .sidebar-close:active { background: var(--border); transform: scale(.94); }

  .sidebar-nav {
    display: flex; flex-direction: column; gap: 4px;
    padding: 4px 10px 12px;
  }
  .sidebar-nav-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 14px 14px;
    background: transparent; border: none; border-radius: 12px;
    color: var(--text); font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 500; text-align: left;
    cursor: pointer; min-height: 48px;
    transition: background .15s;
  }
  .sidebar-nav-item:active { background: var(--surface2); transform: scale(.98); }
  .sidebar-nav-item.active {
    background: rgba(255, 60, 0, .1);
    color: var(--accent);
    font-weight: 600;
  }
  .sidebar-nav-item.active::before {
    content: ''; width: 4px; height: 24px;
    background: var(--accent); border-radius: 4px;
    margin-left: -14px; margin-right: 10px;
  }
  .sidebar-nav-icon {
    font-size: 20px; width: 28px; text-align: center; flex-shrink: 0;
  }
  .sidebar-nav-label { flex: 1; }
  .sidebar-nav-sep {
    height: 1px; background: var(--border);
    margin: 8px 14px;
  }
  .sidebar-nav-item.danger {
    color: #ff5a5a;
    font-weight: 600;
  }
  .sidebar-nav-item.danger .sidebar-nav-icon { opacity: .95; }
  .sidebar-nav-item.danger:active {
    background: rgba(255, 90, 90, .12);
  }

  .sidebar-divider {
    height: 1px; background: var(--border);
    margin: 4px 16px 12px;
  }

  .sidebar-footer {
    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 6px;
    flex-shrink: 0;
  }
  .sidebar-footer-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 14px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 12px; color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
    text-align: left; cursor: pointer; min-height: 44px;
  }
  .sidebar-footer-btn:active { background: var(--surface2); transform: scale(.98); }
  .sidebar-footer-btn.install {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff; border-color: transparent; font-weight: 700;
    box-shadow: 0 2px 10px rgba(255, 60, 0, .3);
  }
  .sidebar-footer-btn span { font-size: 16px; }
  .sidebar-footer-version {
    font-size: 10px; color: var(--text-dim);
    text-align: center; padding-top: 6px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .5px;
  }

  /* Mostrar .mobile-only solo en pantallas pequeñas */
  @media (max-width: 700px) {
    .mobile-only { display: flex; }
    .sidebar-nav.mobile-only { display: flex; flex-direction: column; }
    /* El nav ocupa el espacio disponible y el footer se pega abajo */
    .sidebar-nav.mobile-only { flex: 1 1 auto; overflow-y: auto; }
  }

  /* Categorías del sidebar: ocultas en todas las vistas por preferencia del usuario.
     El chat funciona sin filtro de categoría (RAG busca en todas por defecto). */
  .desktop-only-cats { display: none !important; }

  /* Sidebar vacío en escritorio sin categorías — ocultarlo por completo,
     el menú hamburguesa sigue funcionando en móvil. */
  @media (min-width: 701px) {
    .sidebar { display: none !important; }
  }

  /* ── CATEGORY TRIGGER ──────────────────────────── */
  .cats-section {
    padding: 0 14px;
    margin-bottom: 6px;
  }
  .sidebar-cat-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px; cursor: pointer;
    color: var(--text-dim); font-size: 13.5px; transition: all .15s;
    margin-bottom: 2px;
  }
  .sidebar-cat-item:hover { background: var(--surface2); color: var(--text); }
  .sidebar-cat-item.selected {
    background: rgba(255,60,0,.1); color: var(--accent);
    font-weight: 600;
  }
  .sidebar-cat-icon { font-size: 16px; width: 22px; text-align: center; }

  .cats-trigger {
    width: 100%;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    transition: all .2s;
    text-align: left;
    position: relative;
  }
  .cats-trigger:hover {
    border-color: var(--accent2);
    background: rgba(255,122,0,.05);
    box-shadow: 0 0 0 3px rgba(255,122,0,.08);
  }
  .cats-trigger.open {
    border-color: var(--accent);
    background: rgba(255,60,0,.06);
    box-shadow: 0 0 0 3px rgba(255,60,0,.1);
  }

  .cats-trigger-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
  }
  .cats-trigger-text {
    flex: 1;
    min-width: 0;
  }
  .cats-trigger-label {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.2px;
  }
  .cats-trigger-sub {
    font-size: 11px;
    color: var(--text-dim);
    display: block;
    margin-top: 1px;
  }
  .cats-trigger-chevron {
    color: var(--text-dim);
    font-size: 11px;
    flex-shrink: 0;
    transition: transform .2s;
    line-height: 1;
  }
  .cats-trigger.open .cats-trigger-chevron { transform: rotate(180deg); }

  /* ── DROPDOWN PANEL ───────────────────────────���── */
  .cats-dropdown {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
    z-index: 500;
    display: flex;
    flex-direction: column;
    max-height: 72vh;
    animation: dropIn .18s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
  }
  @keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Search box inside dropdown */
  .cats-drop-search {
    padding: 12px 12px 8px;
    flex-shrink: 0;
  }
  .cats-drop-search input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 9px 12px 9px 34px;
    outline: none;
    transition: border-color .2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238888a8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
  }
  .cats-drop-search input:focus { border-color: var(--accent2); }
  .cats-drop-search input::placeholder { color: var(--text-dim); }

  /* Drop list scroll area */
  .cats-drop-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 6px 4px;
  }
  .cats-drop-list::-webkit-scrollbar { width: 4px; }
  .cats-drop-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

  /* Each row */
  .drop-row {
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 2px;
    transition: background .1s;
    position: relative;
    overflow: hidden;
  }
  .drop-row:hover { background: var(--surface2); }
  .drop-row.selected { background: rgba(255,60,0,.08); }

  .drop-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    flex: 1;
    cursor: pointer;
    min-width: 0;
  }
  .drop-row-icon { font-size: 17px; flex-shrink: 0; line-height: 1; }
  .drop-row-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    transition: color .1s;
  }
  .drop-row:hover .drop-row-label,
  .drop-row.selected .drop-row-label { color: var(--text); }
  .drop-row-check {
    font-size: 13px;
    color: var(--accent);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity .1s;
  }
  .drop-row.selected .drop-row-check { opacity: 1; }

  /* Professor row actions */
  .drop-row-acts {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    padding-right: 6px;
    opacity: 0;
    transition: opacity .15s;
  }
  .drop-row:hover .drop-row-acts { opacity: 1; }

  .drop-act {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 6px;
    font-size: 13px;
    color: var(--text-dim);
    transition: color .15s;
    line-height: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .drop-act:hover { background: var(--bg); }
  .drop-act.rename:hover { color: var(--accent2); }
  .drop-act.del:hover { color: var(--accent); }

  /* Inline rename form */
  .drop-rename-form {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    flex: 1;
  }
  .drop-row.renaming .drop-row-main,
  .drop-row.renaming .drop-row-acts { display: none; }
  .drop-row.renaming .drop-rename-form { display: flex; }

  .drop-rename-icon {
    width: 36px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 16px;
    padding: 6px 4px;
    text-align: center;
    outline: none;
    flex-shrink: 0;
    transition: border-color .2s;
  }
  .drop-rename-label {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
    transition: border-color .2s;
    min-width: 0;
  }
  .drop-rename-label:focus,
  .drop-rename-icon:focus { border-color: var(--accent2); }

  .drop-rename-save {
    background: var(--accent);
    border: none;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 9px;
    transition: opacity .2s;
    flex-shrink: 0;
    line-height: 1;
  }
  .drop-rename-save:hover { opacity: .8; }
  .drop-rename-cancel {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    padding: 6px 9px;
    flex-shrink: 0;
    line-height: 1;
  }

  /* Dropdown footer: create new */
  .cats-drop-footer {
    border-top: 1px solid var(--border);
    padding: 8px;
    flex-shrink: 0;
  }

  .cats-drop-create-form {
    display: none;
    flex-direction: column;
    gap: 7px;
  }
  .cats-drop-create-form.open { display: flex; }

  .cats-drop-create-row { display: flex; gap: 7px; }
  .cats-drop-create-icon {
    width: 44px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 18px;
    padding: 9px 4px;
    text-align: center;
    outline: none;
    transition: border-color .2s;
    flex-shrink: 0;
  }
  .cats-drop-create-label {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
    transition: border-color .2s;
  }
  .cats-drop-create-label:focus,
  .cats-drop-create-icon:focus { border-color: var(--accent2); }
  .cats-drop-create-label::placeholder { color: var(--text-dim); }

  .cats-drop-create-actions { display: flex; gap: 7px; }
  .cats-drop-create-save {
    flex: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px;
    transition: opacity .2s;
    letter-spacing: .2px;
  }
  .cats-drop-create-save:hover { opacity: .85; }
  .cats-drop-create-cancel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    padding: 10px 14px;
    transition: all .2s;
  }
  .cats-drop-create-cancel:hover { border-color: var(--accent); color: var(--accent); }

  .cats-drop-new-btn {
    width: 100%;
    background: none;
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all .2s;
  }
  .cats-drop-new-btn:hover {
    border-color: var(--accent2);
    color: var(--accent2);
    background: rgba(255,122,0,.05);
  }

  /* Skeleton */
  .drop-skeleton {
    height: 40px;
    background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.3s infinite;
    border-radius: 10px;
    margin-bottom: 3px;
  }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  .sidebar-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 14px 0 8px;
  }

  /* Tab profesor */
  .mode-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px 16px;
  }
  .mode-tab {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    padding: 6px 12px;
    transition: all .2s;
    flex: 1;
    text-align: center;
  }
  .mode-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

  
  /* ── Maintenance overlay ── */
    .maintenance-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; padding: 40px;
    animation: maintFadeIn .4s ease;
  }
  @keyframes maintFadeIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
  .maintenance-overlay .maint-icon { font-size: 80px; opacity: .6; }

  /* Live indicator for server stats */
  @keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
  .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4caf50; margin-right: 6px; animation: livePulse 1.5s infinite; }
  .maintenance-overlay .maint-title { font-size: 24px; font-weight: 800; color: var(--text); }
  .maintenance-overlay .maint-msg { font-size: 15px; color: var(--text-dim); text-align: center; max-width: 400px; line-height: 1.6; }
  .maintenance-overlay .maint-retry { margin-top: 10px; padding: 10px 24px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 14px; cursor: pointer; }
  .maintenance-overlay .maint-retry:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* ── CHAT AREA ─────────────────────────────────── */
  .chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .messages {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
  }
  .messages::-webkit-scrollbar { width: 4px; }
  .messages::-webkit-scrollbar-track { background: transparent; }
  .messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

  .msg {
    display: flex;
    gap: 12px;
    animation: slideUp .3s ease;
    max-width: 780px;
  }
  .msg.user { flex-direction: row-reverse; align-self: flex-end; }

  .msg-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
  }
  .msg.user .msg-avatar { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
  .msg.bot .msg-avatar { background: var(--surface2); border: 1px solid var(--border); }

  .msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    line-height: 1.65;
    max-width: 640px;
    font-size: 14.5px;
  }
  .msg.user .msg-bubble {
    background: var(--surface2);
    border-color: var(--accent);
  }

  .msg-sources {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .source-tag {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 11px;
    padding: 3px 8px;
  }
  .source-tag.web { border-color: var(--accent2); color: var(--accent2); }

  .msg-confidence {
    color: var(--text-dim);
    font-size: 11px;
    margin-top: 6px;
  }
  .stream-cursor {
    color: var(--accent);
    animation: blink-cursor 0.8s step-end infinite;
    font-weight: 300;
  }
  @keyframes blink-cursor {
    50% { opacity: 0; }
  }
  /* Aviso "estoy buscando…" mientras se consulta Stock o el buscador de
     pólizas. Desaparece solo: lo tapa el primer token de la respuesta. */
  .stream-status {
    opacity: 0.7;
    font-style: italic;
  }


  /* ── SPLIT SCREEN CHAT + PREVIEW ────────────── */
  .chat-split-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
  }
  .chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
  }
  .preview-panel {
    width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    transition: width .3s ease;
    position: relative;
  }
  .preview-panel.open {
    width: 45%;
    min-width: 340px;
  }
  .preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .preview-header .preview-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .preview-header .preview-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
  }
  .preview-header .preview-close:hover { background: var(--surface2); color: var(--text); }
  .preview-header .preview-open-ext {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
  }
  .preview-header .preview-open-ext:hover { background: var(--surface2); color: var(--text); }
  .preview-body {
    flex: 1;
    overflow: auto;
    padding: 0;
  }
  .preview-body iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  .preview-body .preview-text {
    padding: 18px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Segoe UI', system-ui, sans-serif;
  }
  .preview-body .preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-dim);
    font-size: 13px;
    opacity: .6;
  }
  .preview-body .preview-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-dim);
    gap: 12px;
    text-align: center;
    padding: 40px;
  }
  .preview-body .preview-unsupported .preview-icon { font-size: 48px; opacity: .5; }
  .preview-body .preview-unsupported .preview-dl-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
  }

  /* ── Clickable source tags ────────────── */
  .source-tag.clickable {
    cursor: pointer;
    transition: all .2s;
  }
  .source-tag.clickable:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .source-tag.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  /* Image gallery in chat (PPTX images) */
  .chat-img-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
  .chat-img-thumb { display: block; width: 120px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); transition: all .2s; text-decoration: none; }
  .chat-img-thumb:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,60,0,.2); }
  .chat-img-thumb img { width: 100%; height: 80px; object-fit: cover; display: block; }
  .chat-img-label { display: block; padding: 4px 6px; font-size: 10px; color: var(--text-dim); text-align: center; background: var(--bg-input); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Typing indicator */
  .typing { display: flex; align-items: center; gap: 5px; padding: 4px 0; }
  .typing span {
    width: 7px; height: 7px;
    background: var(--text-dim);
    border-radius: 50%;
    animation: bounce .9s infinite;
  }
  .typing span:nth-child(2) { animation-delay: .15s; }
  .typing span:nth-child(3) { animation-delay: .3s; }

  /* Welcome */
  .welcome {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
  }
  .welcome-title {
    font-family: 'Syne', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: -1px;
  }
  .welcome-sub { font-size: 15px; line-height: 1.6; max-width: 420px; margin: 0 auto 28px; }
  .welcome-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    padding: 8px 16px;
    transition: all .2s;
  }
  .chip:hover { border-color: var(--accent); color: var(--text); }

  /* ── INPUT ─────────────────────────────────────── */
  .petete-waiting-wrapper {
    position: relative; height: 0; z-index: 10; pointer-events: none;
  }
  .petete-waiting {
    position: absolute; bottom: -50px; right: 24px;
    width: 220px; height: 220px; object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
    transition: opacity .5s ease, transform .5s ease;
    opacity: 1; transform: translateY(0);
  }
  .petete-waiting.hidden-petete {
    opacity: 0; transform: translateY(20px);
    pointer-events: none;
  }
  @media (max-width: 700px) {
    .petete-waiting { width: 140px; height: 140px; right: 10px; }
  }

  .input-area {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 18px 24px;
    flex-shrink: 0;
    position: relative;
  }

  .input-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    transition: border-color .2s;
  }
  .input-row:focus-within { border-color: var(--accent); }

  #question-input {
    background: none;
    border: none;
    color: var(--text);
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    outline: none;
    resize: none;
    max-height: 120px;
    min-height: 24px;
  }
  #question-input::placeholder { color: var(--text-dim); }

  .send-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .2s, transform .1s;
  }
  .send-btn:hover { opacity: .85; transform: scale(1.05); }
  .send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

  /* ── PANEL FORMADOR ─────────────────────────────── */
  .trainer-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .trainer-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
  }

  .panel-title {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -.5px;
  }

  .upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 24px;
  }
  .upload-zone:hover { border-color: var(--accent); color: var(--text); }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
  .upload-zone.dragover { border-color: var(--accent); background: rgba(255,60,0,.05); }
  .upload-icon { font-size: 36px; margin-bottom: 10px; }
  .upload-text { font-size: 14px; margin-bottom: 6px; }
  .upload-sub { font-size: 12px; }

  .cat-select {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    padding: 11px 14px;
    width: 100%;
    margin-bottom: 16px;
    outline: none;
  }

  .text-input-area {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    min-height: 120px;
    outline: none;
    padding: 14px;
    resize: vertical;
    width: 100%;
    margin-bottom: 16px;
  }

  .action-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 12px 24px;
    transition: opacity .2s;
  }
  .action-btn:hover { opacity: .85; }
  .action-btn.secondary {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
  }

  /* Pending docs */
  .pending-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 14px;
    animation: slideUp .3s ease;
  }
  .pending-filename {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
  }
  .pending-cat {
    display: inline-block;
    background: rgba(255,60,0,.15);
    border: 1px solid rgba(255,60,0,.3);
    border-radius: 6px;
    color: var(--accent2);
    font-size: 11px;
    padding: 2px 8px;
    margin-bottom: 12px;
  }
  .pending-summary {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 14px;
    white-space: pre-wrap;
  }
  .pending-actions { display: flex; gap: 10px; }

  .approve-btn {
    background: rgba(0,232,135,.15);
    border: 1px solid rgba(0,232,135,.4);
    border-radius: 8px;
    color: var(--green);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 18px;
    transition: all .2s;
  }
  .approve-btn:hover { background: rgba(0,232,135,.25); }

  .reject-btn {
    background: rgba(255,60,0,.1);
    border: 1px solid rgba(255,60,0,.3);
    border-radius: 8px;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 18px;
    transition: all .2s;
  }
  .reject-btn:hover { background: rgba(255,60,0,.2); }

  /* Preguntame btn */
  .preguntame-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 10px 16px;
    width: 100%;
    text-align: left;
    transition: all .2s;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .preguntame-btn:hover { border-color: var(--accent2); color: var(--text); }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
  }
  .stat-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
  }
  .stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent2);
  }
  .stat-label { color: var(--text-dim); font-size: 11px; margin-top: 2px; }

  /* Toast */
  .toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 13px;
    padding: 12px 18px;
    z-index: 999;
    animation: slideUp .3s ease;
    max-width: 320px;
  }
  .toast.success { border-color: var(--green); color: var(--green); }
  .toast.error { border-color: var(--accent); color: var(--accent); }

  /* Animations */
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes bounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }


  /* ── HEADER MODE SWITCHER ────────────────────── */
  .header-modes {
    display: flex;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
  }
  .hmode-btn {
    background: none;
    border: none;
    border-radius: 7px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .hmode-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255,60,0,.35);
  }
  .hmode-btn:not(.active):hover { color: var(--text); background: var(--surface); }

  /* ── TRAINER PANEL ───────────────────────────── */
  .trainer-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Tab bar */
  .t-tabbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    padding: 0 24px;
    gap: 2px;
    flex-shrink: 0;
    height: 58px;
  }
  .t-tab {
    align-items: center;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    padding: 0 18px 0 14px;
    position: relative;
    transition: all .15s;
    white-space: nowrap;
  }
  .t-tab:hover { color: var(--text); }
  .t-tab.active { color: var(--text); border-bottom-color: var(--accent2); }
  .t-tab-icon { font-size: 18px; flex-shrink: 0; }
  .t-tab-badge {
    background: var(--accent);
    border-radius: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    padding: 2px 5px;
    text-align: center;
    margin-left: 2px;
  }
  .t-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    margin-left: 4px;
    box-shadow: 0 0 5px var(--green);
    flex-shrink: 0;
  }
  .t-status-dot.warn { background: #ffa500; box-shadow: 0 0 5px #ffa500; }
  .t-status-dot.err  { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
  .t-status-dot.pulse { animation: sdpulse 2s ease-in-out infinite; }
  @keyframes sdpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

  /* Content area */
  .t-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px 40px;
  }
  .t-content::-webkit-scrollbar { width: 4px; }
  .t-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

  /* Section title */
  .t-sec-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .t-sec-title {
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  /* Buttons */
  .t-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 10px 20px;
    transition: opacity .2s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .t-btn:hover { opacity: .85; }
  .t-btn-ghost {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 9px 18px;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .t-btn-ghost:hover { border-color: var(--accent2); color: var(--text); }

  /* ── BRAIN TAB ───────────────────────────────── */
  .brain-kpi-row {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
  }
  .brain-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    flex: 1;
    padding: 22px 24px;
    text-align: center;
  }
  .brain-kpi-num {
    font-family: 'Syne', sans-serif;
    font-size: 38px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 6px;
  }
  .brain-kpi-lbl {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
  }

  .brain-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
  .brain-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    transition: border-color .15s;
  }
  .brain-bar:hover { border-color: var(--border); }
  .brain-bar-ico { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
  .brain-bar-info { flex: 1; min-width: 0; }
  .brain-bar-name {
    font-size: 13px; font-weight: 500; margin-bottom: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .brain-bar-track { background: var(--surface2); border-radius: 4px; height: 5px; overflow: hidden; }
  .brain-bar-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: width .6s cubic-bezier(.16,1,.3,1);
  }
  .brain-bar-fill.empty { background: var(--border); }
  .brain-bar-n {
    font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700;
    color: var(--accent2); min-width: 40px; text-align: right; flex-shrink: 0;
  }
  .brain-bar-n.zero { color: var(--text-dim); }

  .brain-alert {
    background: rgba(255,122,0,.07);
    border: 1px solid rgba(255,122,0,.25);
    border-radius: 12px;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 18px;
  }
  .brain-alert-icon { font-size: 18px; flex-shrink: 0; padding-top: 1px; }
  .brain-alert-body { font-size: 13px; color: var(--text-dim); line-height: 1.65; }
  .brain-alert-body strong { color: var(--accent2); }

  /* ── CATEGORÍAS TAB ──────────────────────────── */
  .cats-new-form-row {
    background: var(--surface);
    border: 1.5px solid var(--accent2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 16px;
    animation: slideUp .2s ease;
  }
  .cats-new-ico { width: 50px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 20px; padding: 9px 4px; text-align: center; outline: none; flex-shrink: 0; }
  .cats-new-lbl { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; padding: 10px 14px; outline: none; }
  .cats-new-ico:focus, .cats-new-lbl:focus { border-color: var(--accent2); }

  .cats-list { display: flex; flex-direction: column; gap: 6px; }
  .cat-mgr-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color .15s;
  }
  .cat-mgr-row:hover { border-color: var(--border); background: var(--surface); }
  .cat-mgr-ico { font-size: 20px; padding: 14px 10px 14px 16px; flex-shrink: 0; }
  .cat-mgr-info { flex: 1; padding: 14px 8px; min-width: 0; }
  .cat-mgr-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-mgr-id { font-family: monospace; font-size: 11px; color: var(--text-dim); margin-top: 2px; letter-spacing: .5px; }
  .cat-mgr-chunks {
    font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700;
    color: var(--accent2); padding: 0 16px; flex-shrink: 0; min-width: 48px; text-align: right;
  }
  .cat-mgr-chunks.zero { color: var(--text-dim); }
  .cat-mgr-acts { display: flex; border-left: 1px solid var(--border); flex-shrink: 0; }
  .cat-mgr-act {
    background: none; border: none; color: var(--text-dim);
    cursor: pointer; font-size: 15px; padding: 14px 14px;
    transition: all .15s; line-height: 1;
  }
  .cat-mgr-act:hover { background: var(--surface2); }
  .cat-mgr-act.rename:hover { color: var(--accent2); }
  .cat-mgr-act.del:hover    { color: var(--accent); }

  /* Inline editing state */
  .cat-mgr-row.editing { border-color: var(--accent2); }
  .cat-mgr-edit {
    display: none; align-items: center; gap: 8px;
    padding: 8px 14px; flex: 1;
  }
  .cat-mgr-row.editing .cat-mgr-ico,
  .cat-mgr-row.editing .cat-mgr-info,
  .cat-mgr-row.editing .cat-mgr-chunks,
  .cat-mgr-row.editing .cat-mgr-acts { display: none; }
  .cat-mgr-row.editing .cat-mgr-edit { display: flex; }
  .cat-edit-ico { width: 44px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 18px; padding: 8px 4px; text-align: center; outline: none; flex-shrink: 0; }
  .cat-edit-lbl { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 8px 10px; outline: none; min-width: 0; }
  .cat-edit-ico:focus, .cat-edit-lbl:focus { border-color: var(--accent2); }
  .cat-edit-save { background: var(--accent); border: none; border-radius: 7px; color: #fff; cursor: pointer; font-size: 14px; padding: 8px 10px; transition: opacity .2s; line-height: 1; flex-shrink: 0; }
  .cat-edit-save:hover { opacity: .8; }
  .cat-edit-cancel { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 8px 10px; line-height: 1; flex-shrink: 0; }

  /* ── DOCUMENTOS TAB ──────────────────────────── */
  .docs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
  }
  @media (max-width: 860px) { .docs-grid { grid-template-columns: 1fr; } }
  .docs-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
  }

  /* ── ESTADO TAB ──────────────────────────────── */
  .status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }
  @media (max-width: 700px) { .status-grid { grid-template-columns: 1fr; } }
  .sc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: border-color .3s;
  }
  .sc.ok   { border-color: rgba(0,232,135,.3); }
  .sc.warn { border-color: rgba(255,165,0,.3); }
  .sc.err  { border-color: rgba(255,60,0,.35); }
  .sc-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--green); flex-shrink: 0; margin-top: 4px;
    transition: background .3s;
  }
  .sc-dot.ok   { background: var(--green);   box-shadow: 0 0 7px var(--green); }
  .sc-dot.warn { background: #ffa500;         box-shadow: 0 0 7px #ffa500; }
  .sc-dot.err  { background: var(--accent);   box-shadow: 0 0 7px var(--accent); }
  .sc-dot.pulse { animation: sdpulse 1.8s infinite; }
  .sc-body { flex: 1; min-width: 0; }
  .sc-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
  .sc-detail { color: var(--text-dim); font-size: 12px; line-height: 1.7; }
  .sc-value { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--accent2); margin-top: 5px; }
  .sc-bar { background: var(--surface2); border-radius: 4px; height: 5px; margin-top: 10px; overflow: hidden; }
  .sc-bar-fill { height: 100%; border-radius: 4px; background: var(--green); transition: width .5s ease, background .3s; }
  .sc-bar-fill.warn { background: #ffa500; }
  .sc-bar-fill.err  { background: var(--accent); }

  
  .status-footer {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .status-ts { font-size: 12px; color: var(--text-dim); }

  .hidden { display: none !important; }

  /* ── Brain Files ── */
  .brain-files { margin-top: 16px; }
  .brain-files-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .brain-cat-group { margin-bottom: 12px; }
  .brain-cat-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-input); border-radius: 8px 8px 0 0; border: 1px solid var(--border); cursor: pointer; }
  .brain-cat-header:hover { background: rgba(255,255,255,.06); }
  .brain-cat-icon { font-size: 16px; }
  .brain-cat-name { font-weight: 600; font-size: 13px; color: var(--text); flex: 1; }
  .brain-cat-count { font-size: 11px; color: var(--text-dim); background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: 10px; }
  .brain-cat-files { border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; }
  .brain-cat-files.collapsed { display: none; }
  .brain-file-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; transition: background .15s; }
  .brain-file-row:last-child { border-bottom: none; }
  .brain-file-row:hover { background: rgba(255,255,255,.03); }
  .brain-file-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brain-file-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .brain-file-btn { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 11px; transition: all .15s; }
  .brain-file-btn:hover { border-color: var(--accent2); color: var(--text); }
  .brain-file-btn.danger:hover { border-color: #f44; color: #f44; }
  .brain-move-select { padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 11px; max-width: 120px; }
  .brain-empty-cat { padding: 12px; color: var(--text-dim); font-size: 12px; font-style: italic; }

  /* ── Models Tab ── */
  .models-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
  .model-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: all .2s; position: relative; }
  .model-card.active { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2); }
  .model-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .model-card-icon { font-size: 24px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); border-radius: 8px; }
  .model-card-title { font-weight: 600; color: var(--text); font-size: 14px; }
  .model-card-subtitle { font-size: 12px; color: var(--text-dim); }
  .model-card-badge { position: absolute; top: 12px; right: 12px; font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
  .model-card-badge.active { background: rgba(0,255,100,.15); color: #4f4; }
  .model-card-badge.available { background: rgba(255,255,255,.08); color: var(--text-dim); }
  .model-card-badge.unavailable { background: rgba(255,50,50,.15); color: #f66; }
  .model-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; }
  .model-metric { background: var(--bg-input); border-radius: 8px; padding: 8px 10px; }
  .model-metric-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
  .model-metric-value { font-size: 16px; font-weight: 600; color: var(--text); margin-top: 2px; }
  .model-actions { display: flex; gap: 8px; margin-top: 12px; }
  .model-btn { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); cursor: pointer; font-size: 12px; transition: all .15s; }
  .model-btn:hover { border-color: var(--accent2); }
  .model-btn.primary { background: var(--accent2); color: #000; border-color: var(--accent2); font-weight: 600; }
  .model-btn.primary:hover { opacity: .85; }
  .model-btn:disabled { opacity: .4; cursor: not-allowed; }
  .model-test-result { margin-top: 12px; background: var(--bg-input); border-radius: 8px; padding: 12px; display: none; }
  .model-test-result.visible { display: block; }
  .model-test-response { color: var(--text-dim); font-size: 13px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 8px; }
  .model-test-metrics { display: flex; gap: 16px; font-size: 11px; color: var(--accent2); }
  .models-section-title { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }

  /* ── Emoji Picker ── */
  .emoji-picker-wrap { position: relative; display: inline-flex; }
  .emoji-trigger {
    width: 44px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 2px solid var(--border); background: var(--bg-card);
    font-size: 22px; cursor: pointer; transition: all .2s; user-select: none;
  }
  .emoji-trigger:hover { border-color: var(--accent2); transform: scale(1.05); }
  .emoji-popup {
    display: none; position: fixed; z-index: 10000;
    background: #1a1a2e; border: 1px solid rgba(255,255,255,.15); border-radius: 12px;
    padding: 0; box-shadow: 0 12px 40px rgba(0,0,0,.8); width: 320px; overflow: hidden;
    backdrop-filter: blur(20px);
  }
  .emoji-popup.open { display: block; }
  .emoji-popup-header { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.15); }
  .emoji-search {
    width: 100%; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.3); color: var(--text); font-size: 12px; outline: none;
  }
  .emoji-search:focus { border-color: var(--accent2); }
  .emoji-tabs {
    display: flex; padding: 4px 6px; gap: 1px; border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none; background: rgba(0,0,0,.1);
  }
  .emoji-tabs::-webkit-scrollbar { display: none; }
  .emoji-tab {
    padding: 5px 7px; cursor: pointer; border-radius: 6px; font-size: 15px;
    opacity: .45; transition: all .15s; flex-shrink: 0; line-height: 1;
  }
  .emoji-tab:hover { opacity: .8; background: rgba(255,255,255,.1); }
  .emoji-tab.active { opacity: 1; background: rgba(255,255,255,.15); }
  .emoji-body { height: 220px; overflow-y: auto; padding: 6px; }
  .emoji-body::-webkit-scrollbar { width: 4px; }
  .emoji-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .emoji-cat-label {
    font-size: 10px; color: var(--text-dim); text-transform: uppercase;
    letter-spacing: .5px; padding: 6px 4px 3px; font-weight: 600;
  }
  .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
  .emoji-cell {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 6px; font-size: 20px; transition: all .12s; line-height: 1;
  }
  .emoji-cell:hover { background: rgba(255,255,255,.18); transform: scale(1.25); }


  /* ── Typing Timer ── */
  .typing-timer { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-variant-numeric: tabular-nums; }

  /* ── Voice Input ── */
  .voice-btn {
    width: 42px; height: 42px; border-radius: 50%; border: none;
    background: transparent; color: var(--text-dim); cursor: pointer;
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    transition: all .2s; flex-shrink: 0;
  }
  .voice-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
  .voice-btn.recording {
    color: #f44; background: rgba(255,50,50,.12);
    animation: voice-pulse 1.2s ease-in-out infinite;
  }
  @keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,50,50,.3); }
    50% { box-shadow: 0 0 0 10px rgba(255,50,50,0); }
  }
  .pending-chip {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 16px; padding: 5px 12px; font-size: 12px;
    color: var(--text-dim); cursor: pointer; transition: all .15s;
  }
  .pending-chip:hover { border-color: var(--accent2); color: var(--text); }
  .pending-chip.active {
    background: rgba(255,60,0,.1); border-color: var(--accent);
    color: var(--accent); font-weight: 600;
  }
  #note-record-btn.recording {
    background: linear-gradient(135deg,#f44,#d22) !important;
    animation: note-pulse 1.3s ease-in-out infinite;
    transform: scale(1.05);
  }
  @keyframes note-pulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(244,67,54,.5), 0 0 0 0 rgba(244,67,54,.6); }
    50% { box-shadow: 0 8px 32px rgba(244,67,54,.5), 0 0 0 20px rgba(244,67,54,0); }
  }
  #note-record-btn:active { transform: scale(0.95); }
  .voice-status {
    font-size: 11px; color: var(--accent2); padding: 4px 12px;
    display: none; align-items: center; gap: 6px;
  }
  .voice-status.active { display: flex; }
  .voice-dot { width: 6px; height: 6px; border-radius: 50%; background: #f44; animation: voice-pulse-dot .8s ease-in-out infinite; }
  @keyframes voice-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

  /* ── TTS Toggle ── */
  .tts-btn {
    width: 42px; height: 42px; border-radius: 50%; border: none;
    background: transparent; color: var(--text-dim); cursor: pointer;
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    transition: all .2s; flex-shrink: 0; position: relative;
  }
  .tts-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
  .tts-btn.active { color: var(--accent2); background: rgba(255,60,0,.12); }
  .tts-btn.speaking { color: var(--accent2); background: rgba(255,60,0,.14); }
  .tts-btn.speaking::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid var(--accent2); animation: tts-ring 1s ease-in-out infinite;
  }
  .tts-btn.loading { color: var(--accent2); background: rgba(255,60,0,.08); cursor: wait; }
  .tts-btn.loading::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid transparent; border-top-color: var(--accent2);
    animation: tts-spin .8s linear infinite;
  }
  @keyframes tts-ring {
    0%, 100% { opacity: .3; transform: scale(1); }
    50% { opacity: .8; transform: scale(1.1); }
  }
  @keyframes tts-spin {
    to { transform: rotate(360deg); }
  }

  /* ── Quota Display ── */
  .quota-section { margin-top: 16px; }
  .quota-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
  .quota-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .quota-card-title { font-weight: 600; font-size: 13px; color: var(--text); }
  .quota-card-model { font-size: 11px; color: var(--text-dim); }
  .quota-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .quota-meter { background: var(--bg-input); border-radius: 8px; padding: 10px; }
  .quota-meter-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
  .quota-meter-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
  .quota-meter-fill { height: 100%; border-radius: 3px; transition: width .3s; }
  .quota-meter-fill.good { background: #4f4; }
  .quota-meter-fill.warn { background: #fa0; }
  .quota-meter-fill.danger { background: #f44; }
  .quota-meter-values { display: flex; justify-content: space-between; font-size: 11px; }
  .quota-meter-remaining { color: var(--text); font-weight: 600; }
  .quota-meter-total { color: var(--text-dim); }
  .quota-reset { font-size: 10px; color: var(--text-dim); margin-top: 8px; }

  /* ── Ollama Selector ── */
  .ollama-selector { margin-top: 12px; padding: 12px; background: rgba(0,0,0,.15); border-radius: 10px; border: 1px solid var(--border); }
  .ollama-select-row { display: flex; gap: 8px; align-items: center; }
  .ollama-select { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 13px; cursor: pointer; appearance: auto; }
  .ollama-select:focus { border-color: var(--accent2); outline: none; }
  .ollama-preview { margin-top: 10px; display: none; }
  .ollama-preview.visible { display: block; }
  .ollama-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
  .ollama-preview-item { background: var(--bg-input); border-radius: 8px; padding: 8px 10px; text-align: center; }
  .ollama-preview-label { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
  .ollama-preview-value { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; }
  .ollama-activate-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
  .models-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 14px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; font-size: 11px; color: var(--text-dim); align-items: center; }
  .legend-item { display: flex; align-items: center; gap: 5px; }
  .legend-dot { width: 10px; height: 10px; border-radius: 10px; flex-shrink: 0; }
  .legend-dot.active { background: rgba(0,255,100,.8); }
  .legend-dot.available { background: rgba(255,255,255,.25); }
  .legend-dot.unavailable { background: rgba(255,50,50,.6); }

  /* ── Model Test Timer ── */
  .mtest-timer { font-size: 28px; font-weight: 700; color: var(--accent2); font-variant-numeric: tabular-nums; margin: 4px 0; }
  .mtest-timer.running { animation: mtest-pulse 1s ease-in-out infinite; }
  @keyframes mtest-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
  .mtest-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
  .mtest-stat { text-align: center; min-width: 70px; }
  .mtest-stat-val { font-size: 16px; font-weight: 600; color: var(--text); }
  .mtest-stat-lbl { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }

  /* ── Brain Reset ── */
  .brain-reset-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-radius: 8px; border: 1px solid rgba(255,50,50,.3);
    background: rgba(255,50,50,.08); color: #f66; cursor: pointer;
    font-size: 12px; transition: all .2s; margin-top: 16px;
  }
  .brain-reset-btn:hover { background: rgba(255,50,50,.15); border-color: #f44; color: #f44; }
  .brain-reset-modal {
    display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
  }
  .brain-reset-modal.open { display: flex; }
  .brain-reset-box {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    padding: 24px; max-width: 440px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  }
  .brain-reset-title { font-size: 18px; font-weight: 700; color: #f44; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
  .brain-reset-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
  .brain-reset-list { margin: 10px 0; padding-left: 18px; }
  .brain-reset-list li { margin-bottom: 4px; color: var(--text); font-size: 12px; }
  .brain-reset-confirm { margin-bottom: 16px; }
  .brain-reset-input {
    width: 100%; padding: 10px 14px; border-radius: 8px; border: 2px solid var(--border);
    background: var(--bg-input); color: var(--text); font-size: 14px; font-family: monospace;
    text-align: center; outline: none;
  }
  .brain-reset-input:focus { border-color: #f44; }
  .brain-reset-actions { display: flex; gap: 10px; justify-content: flex-end; }


  /* ════════════════════════════════════════════════════
     RESPONSIVE — Mobile & Tablet
     ════════════════════════════════════════════════════ */

  /* Tablet (< 900px) */
  @media (max-width: 900px) {
    .sidebar { width: 240px; }
    .messages { padding: 20px 16px; }
    .msg { max-width: 100%; }
    .brain-kpi-row { gap: 8px; }
    .brain-kpi-num { font-size: 22px; }
    .model-metrics { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  }

  /* Mobile (< 700px) — hide sidebar, full width + safe-area, 44px tap targets */
  @media (max-width: 700px) {
    /* Safe-area support (iOS notch + Android gesture bar) */
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    /* Layout */
    .app { flex-direction: column; }
    .sidebar {
      position: fixed; top: 0; left: -100%; width: 85vw; max-width: 320px; height: 100vh;
      z-index: 500; transition: left .3s ease;
      box-shadow: 4px 0 20px rgba(0,0,0,.5);
      padding-top: max(20px, env(safe-area-inset-top));
      padding-bottom: env(safe-area-inset-bottom);
    }
    .sidebar.open { left: 0; }
    .sidebar-overlay {
      display: none; position: fixed; inset: 0; z-index: 499;
      background: rgba(0,0,0,.5);
    }
    .sidebar-overlay.open { display: block; }

    .chat-area { width: 100%; }

    /* Header con safe-area top */
    .header {
      padding: max(10px, env(safe-area-inset-top)) 16px 10px;
      gap: 10px;
      flex-shrink: 0;
    }
    .header-logo { font-size: 20px; }
    .mobile-menu-btn { display: flex !important; width: 44px; height: 44px; font-size: 20px; }

    /* Messages — más padding, texto más grande */
    .messages { padding: 14px 16px; gap: 14px; }
    .msg { max-width: 100%; gap: 10px; }
    .msg-avatar { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; flex-shrink: 0; }
    .msg-bubble {
      font-size: 15px; line-height: 1.5;
      padding: 12px 14px;
      max-width: calc(100vw - 72px - env(safe-area-inset-left) - env(safe-area-inset-right));
      word-wrap: break-word; overflow-wrap: break-word;
    }

    /* Input area — botones 44px (iOS HIG) + safe-area bottom */
    .input-area {
      padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    }
    .input-row { border-radius: 14px; padding: 6px 6px 6px 12px; gap: 6px; }
    #question-input { font-size: 16px; /* evita zoom iOS */ padding: 10px 4px; }
    .send-btn { width: 44px; height: 44px; font-size: 18px; }
    .voice-btn, .tts-btn { width: 44px; height: 44px; font-size: 18px; }

    /* Login */
    .login-box { width: 92%; padding: 28px 22px; border-radius: 18px; }
    .login-logo { font-size: 30px; }
    .login-sub { font-size: 14px; }
    .login-box input, .login-box button { font-size: 16px; padding: 12px 14px; }

    /* Trainer content */
    .trainer-content {
      padding: 14px 14px max(14px, env(safe-area-inset-bottom));
    }
    .t-tabbar { overflow-x: auto; gap: 2px; padding: 0 8px; -webkit-overflow-scrolling: touch; }
    .t-tab { font-size: 13px; padding: 12px 12px; white-space: nowrap; gap: 5px; min-height: 44px; }
    .t-tab-icon { font-size: 16px; }

    /* Brain files */
    .brain-file-row { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .brain-file-name { min-width: 0; font-size: 14px; }
    .brain-file-actions { width: 100%; justify-content: flex-end; gap: 6px; }
    .brain-file-actions button { min-height: 36px; padding: 8px 12px; font-size: 13px; }
    .brain-move-select { max-width: 100%; min-height: 38px; font-size: 14px; }
    .brain-cat-header { padding: 10px 14px; font-size: 14px; }

    /* Categories tab */
    .cats-controls { gap: 6px; flex-wrap: wrap; }
    .cats-control-btn { font-size: 13px; padding: 8px 14px; min-height: 36px; }
    .cat-mgr-row { flex-wrap: wrap; gap: 8px; }

    /* Models */
    .models-grid { gap: 12px; grid-template-columns: 1fr; max-width: 100%; }
    .model-card { padding: 14px; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; overflow: hidden; }
    .model-card * { min-width: 0; max-width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; }
    .model-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 100%; }
    .model-metric { padding: 8px 10px; min-width: 0; overflow: hidden; }
    .model-metric-value { font-size: 14px; word-break: break-word; }
    .model-card-subtitle, .model-card-title, .model-metric-label { word-wrap: break-word; }
    .models-legend { flex-direction: column; gap: 8px; font-size: 12px; padding: 10px 12px; }
    .ollama-selector { padding: 12px; }
    .ollama-select { font-size: 14px; min-height: 40px; max-width: 100%; }
    .ollama-preview-grid { grid-template-columns: repeat(2, 1fr); }
    .model-btn { min-height: 40px; padding: 10px 16px; font-size: 14px; }
    /* Mensajes largos en model-cards deben envolverse, no desbordar */
    #tcontent-models, #models-container { max-width: 100%; overflow-x: hidden; }

    /* Status */
    .status-grid { grid-template-columns: 1fr !important; }
    .brain-kpi-row { flex-direction: column; gap: 8px; }
    .brain-kpi { padding: 12px 14px; }
    .quota-meters { grid-template-columns: 1fr; }

    /* Emoji picker */
    .emoji-popup { width: 92vw; max-width: 320px; }
    .emoji-grid { grid-template-columns: repeat(7, 1fr); }
    .emoji-cell { width: 38px; height: 38px; font-size: 22px; }

    /* Reset modal */
    .brain-reset-box { padding: 20px; max-width: 95%; }

    /* Category dropdown */
    .cats-dropdown { width: 85vw; max-width: 320px; }

    /* Welcome */
    .welcome-title { font-size: 26px; }
    .welcome-sub { font-size: 14px; max-width: 92%; line-height: 1.5; }
    .welcome-chips { gap: 8px; }
    .chip { font-size: 14px; padding: 10px 14px; min-height: 40px; }

    /* Mode tabs */
    .mode-tabs { padding: 0 14px 14px; gap: 6px; }

    /* Botones generales de la trainer-panel */
    .t-btn, .approve-btn, .reject-btn {
      min-height: 40px; font-size: 14px; padding: 10px 16px;
    }
    .t-btn-ghost { min-height: 36px; font-size: 13px; padding: 8px 12px; }

    /* Pending cards */
    .pending-card { padding: 14px 16px; font-size: 14px; }
    .pending-filename { font-size: 15px; margin-bottom: 4px; }
    .pending-cat { font-size: 12px; margin-bottom: 8px; }
    .pending-summary { font-size: 13px; line-height: 1.5; max-height: 220px; overflow-y: auto; }
    .pending-actions { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .pending-actions button { flex: 1; min-width: 44%; }

    /* Users */
    .users-table { font-size: 13px; }
    .users-table th, .users-table td { padding: 10px 8px; }

    /* Forms in modales/panels: inputs con font-size 16px evitan zoom iOS */
    input[type="text"], input[type="url"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], select, textarea {
      font-size: 16px !important;
    }
  }

  /* Small mobile (< 400px) — evitar que desaparezca texto */
  @media (max-width: 400px) {
    .t-tab { font-size: 12px; padding: 10px 8px; gap: 3px; }
    .t-tab-icon { font-size: 14px; }
    .model-metrics { grid-template-columns: 1fr 1fr; }
    .brain-file-actions { flex-direction: column; align-items: stretch; }
    .header-logo { font-size: 18px; }
    .msg-bubble { max-width: calc(100vw - 60px - env(safe-area-inset-left) - env(safe-area-inset-right)); font-size: 14px; }
    .messages { padding: 12px; }
    .input-area { padding-left: 12px; padding-right: 12px; }
  }

  /* ══════════════════════════════════════════════════════ */
  /* MOBILE APP POLISH — sensación de app nativa              */
  /* ══════════════════════════════════════════════════════ */
  @media (max-width: 700px) {
    /* Altura dinámica SOLO en body — el resto se adapta con flex */
    body {
      height: 100vh;
      height: 100dvh;
    }
    /* Los contenedores anidados deben expandirse con flex, NO con altura fija,
       de lo contrario se salen del viewport y ocultan el input del chat. */
    .app { min-height: 0; }
    .chat-area, .chat-split-container, .chat-main {
      min-height: 0;
      min-width: 0;
    }
    .trainer-panel { max-height: none; overflow-y: auto; }

    /* Header: usa el layout flex normal. Fondo con blur para look iOS. */
    header {
      background: rgba(19, 19, 26, .92);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      backdrop-filter: saturate(180%) blur(16px);
      padding-top: max(10px, env(safe-area-inset-top));
      height: auto;
      min-height: 58px;
    }

    /* Input area: usa flex-shrink para quedar fijo al fondo del chat-main.
       NO usar position: sticky aquí porque el padre no scrollea (scrollea .messages). */
    .input-area {
      flex-shrink: 0;
      background: rgba(19, 19, 26, .96);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      backdrop-filter: saturate(180%) blur(16px);
      z-index: 20;
    }

    /* Eliminar transiciones lentas del sidebar en móvil = más "snappy" */
    .sidebar { transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1); transform: translateX(-100%); left: 0; }
    .sidebar.open { transform: translateX(0); }

    /* Botones con ligero efecto "presionado" para feedback claro */
    .send-btn:active, .voice-btn:active, .tts-btn:active,
    .mobile-menu-btn:active {
      transform: scale(0.9);
      background: rgba(255, 60, 0, .15);
    }

    /* Elimina el hover sticky en móvil que deja botones resaltados */
    .login-role-card:hover { transform: none; border-color: var(--border); box-shadow: none; }
    .learn-mode-card:hover { transform: none; border-color: var(--border); background: var(--surface); box-shadow: none; }
    .cats-trigger:hover { border-color: var(--border); background: var(--surface2); box-shadow: none; }

    /* Mensajes: más espacio lateral y rebote bloqueado al scroll */
    .messages {
      overscroll-behavior-y: contain;
      scroll-padding-bottom: 20px;
    }

    /* Trainer content: usa toda la altura menos header + tabbar */
    .trainer-content {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* Tab bar "dockeable" en parte superior del panel */
    .t-tabbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .t-tab.active {
      position: relative;
    }
    .t-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0; left: 10%; right: 10%;
      height: 3px;
      background: var(--accent);
      border-radius: 3px 3px 0 0;
    }

    /* Cards con sombra sutil para dar profundidad de app */
    .pending-card, .model-card, .login-role-card, .learn-mode-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, .22);
    }

    /* Bounce suave al abrir modales */
    #approval-modal > div, .brain-reset-box, .login-pwd-box {
      animation: app-modal-in .25s cubic-bezier(.22, 1.2, .36, 1);
    }
    @keyframes app-modal-in {
      from { opacity: 0; transform: translateY(20px) scale(.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Chat bubble con esquinas "app" tipo iMessage */
    .msg-bubble { border-radius: 18px; }
    .msg.user .msg-bubble { border-bottom-right-radius: 6px; }
    /* Chat: source tags no deben desbordar la burbuja — truncar con ellipsis */
    .msg-sources { max-width: 100%; overflow: hidden; }
    .source-tag {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
    .msg.bot  .msg-bubble { border-bottom-left-radius: 6px; }

    /* Oculta la barra de scroll fina en móvil (iOS) */
    .messages::-webkit-scrollbar,
    .trainer-content::-webkit-scrollbar,
    .learn-chat::-webkit-scrollbar { display: none; }
    .messages, .trainer-content, .learn-chat { scrollbar-width: none; }

    /* Input: altura mínima estable aunque el textarea esté vacío */
    #question-input { min-height: 40px; max-height: 140px; padding-top: 10px; padding-bottom: 10px; }

    /* Role badge más pequeño en móvil (ahorrar espacio) */
    .role-badge { font-size: 11px; padding: 3px 8px; }
    #app-version { display: none; }

    /* AI health: oculto en móvil (ya saturaba el header) */
    .ai-health { display: none !important; }

    /* En móvil el logout vive en el menú hamburguesa */
    .logout-btn { display: none !important; }
    /* Mode switcher también vive en el menú hamburguesa */
    .header-modes { display: none !important; }
    /* Role badge también oculto — aparece en el menú */
    .role-badge { display: none !important; }
    /* Install button va al menú también */
    #pwa-install-btn { display: none !important; }
    /* Version tag oculto en header */
    #app-version { display: none !important; }
    /* Header limpio: solo hamburguesa + logo centrado */
    header { justify-content: flex-start; gap: 12px; }
    .logo { flex: 1; text-align: left; }
    .header-right { gap: 6px; }

    /* Login responsive perfecto */
    .login-logo-row { gap: 12px; }
    .login-mascot-video { width: 64px; height: 64px; }
    .login-logo { font-size: 32px; }

    /* Desactiva el "hover" en mode-tabs que deja colores pegados */
    .mode-tab:hover { background: inherit; }

    /* Preview panel en móvil: oculto por defecto, a pantalla completa cuando abierto.
       NO usar !important en width para respetar la regla base width:0 que lo oculta. */
    .preview-panel { border-left: none; }
    .preview-panel.open {
      position: fixed; inset: 0; width: 100vw; height: 100vh; min-width: 0;
      z-index: 1500; border-top: 1px solid var(--border);
    }
  }

  /* Modo PWA standalone — ocultar elementos del navegador que sobran */
  @media (display-mode: standalone), (display-mode: fullscreen) {
    /* Estamos en PWA — activar look de app completa */
    body { background: var(--bg); }
    /* Ocultar cualquier botón "Instalar" ya no necesario */
    #pwa-install-btn { display: none !important; }
  }

  /* Orientación landscape en móvil: compactar UI vertical */
  @media (max-width: 900px) and (orientation: landscape) {
    header { min-height: 48px; height: auto; }
    .messages { padding-top: 8px; padding-bottom: 8px; }
    .input-area { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  }

  /* Mobile menu button — hidden by default, shown on mobile */
  .mobile-menu-btn {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border);
    background: transparent; color: var(--text); cursor: pointer;
    flex-shrink: 0; padding: 0;
  }
  .mobile-menu-btn:hover { background: rgba(255,255,255,.06); }
  .hamburger-lines {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    width: 22px; height: 18px; position: relative;
  }
  .hamburger-lines span {
    display: block; height: 2px; width: 100%;
    background: var(--text); border-radius: 2px;
    position: absolute; left: 0;
    transition: all .25s cubic-bezier(.22, 1, .36, 1);
  }
  .hamburger-lines span:nth-child(1) { top: 2px; }
  .hamburger-lines span:nth-child(2) { top: 8px; width: 85%; }
  .hamburger-lines span:nth-child(3) { top: 14px; width: 70%; }
  /* Cuando el sidebar está abierto la hamburguesa se anima a X */
  .sidebar.open ~ .mobile-menu-btn .hamburger-lines span:nth-child(1),
  body:has(.sidebar.open) .hamburger-lines span:nth-child(1) {
    top: 8px; transform: rotate(45deg);
  }
  body:has(.sidebar.open) .hamburger-lines span:nth-child(2) {
    opacity: 0; transform: translateX(-10px);
  }
  body:has(.sidebar.open) .hamburger-lines span:nth-child(3) {
    top: 8px; width: 100%; transform: rotate(-45deg);
  }


  /* ── AI Health Indicator ── */
  .ai-health {
    display: none; align-items: center; gap: 6px;
    padding: 3px 10px 3px 6px; border-radius: 20px;
    background: rgba(255,255,255,.04); border: 1px solid var(--border);
    cursor: default; transition: all .3s; position: relative;
  }
  .ai-health.visible { display: flex; }
  .ai-health-light {
    width: 28px; height: 12px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    background: rgba(0,0,0,.3); padding: 2px 4px; flex-shrink: 0;
  }
  .ai-light {
    width: 6px; height: 6px; border-radius: 50%; opacity: .2;
    transition: all .4s;
  }
  .ai-light.r { background: #f44336; }
  .ai-light.y { background: #ff9800; }
  .ai-light.g { background: #4caf50; }
  .ai-light.on { opacity: 1; box-shadow: 0 0 6px currentColor; }
  .ai-health-info {
    display: flex; flex-direction: column; line-height: 1.2;
  }
  .ai-health-model {
    font-size: 12px; font-weight: 700; color: var(--text);
    white-space: nowrap;
  }
  .ai-health-status {
    font-size: 9px; color: var(--text-dim); white-space: nowrap;
  }
  .ai-health-time {
    font-size: 13px; font-weight: 800; color: var(--accent2);
    font-variant-numeric: tabular-nums; margin-left: 6px; white-space: nowrap;
    background: rgba(255,122,0,.1); padding: 2px 8px; border-radius: 10px;
  }
  @media (max-width: 700px) {
    .ai-health { padding: 2px 6px 2px 4px; gap: 4px; }
    .ai-health-model { font-size: 10px; }
    .ai-health-status { display: none; }
    .ai-health-time { font-size: 10px; margin-left: 2px; }
  }
  @media (max-width: 400px) {
    .ai-health-info { display: none; }
  }

  @media (max-width: 360px) {
    .ai-health-model { display: none; }
  }

  /* ── Latency Panel ── */
  .latency-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 20px; margin-bottom: 16px; text-align: center;
    position: relative; overflow: hidden;
  }
  .latency-panel::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,122,0,.06) 0%, transparent 60%);
    pointer-events: none;
  }
  .latency-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); font-weight: 600; margin-bottom: 4px; }
  .latency-model { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 14px; }
  .latency-gauge {
    position: relative; display: inline-block;
    width: 180px; height: 100px; margin: 0 auto;
  }
  .latency-arc {
    width: 180px; height: 100px; border-radius: 90px 90px 0 0;
    background: conic-gradient(from 0.75turn at 50% 100%, #4caf50 0%, #ffeb3b 25%, #ff9800 50%, #f44336 75%, #333 75%);
    position: relative; overflow: hidden;
  }
  .latency-arc-mask {
    position: absolute; bottom: 0; left: 10px; right: 10px;
    width: 160px; height: 80px; border-radius: 80px 80px 0 0;
    background: var(--surface);
  }
  .latency-needle {
    position: absolute; bottom: 0; left: 50%; width: 2px; height: 75px;
    background: var(--text); transform-origin: bottom center;
    transform: rotate(-90deg); transition: transform 1s ease-out;
    border-radius: 2px;
  }
  .latency-needle-dot {
    position: absolute; bottom: -4px; left: 50%; width: 10px; height: 10px;
    border-radius: 50%; background: var(--text); transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(255,255,255,.3);
  }
  .latency-value {
    font-size: 36px; font-weight: 800; margin-top: 6px;
    font-variant-numeric: tabular-nums;
    transition: color .5s;
  }
  .latency-unit { font-size: 14px; font-weight: 400; color: var(--text-dim); }
  .latency-status { font-size: 12px; margin-top: 4px; font-weight: 600; }
  .latency-status.fast { color: #4caf50; }
  .latency-status.medium { color: #ff9800; }
  .latency-status.slow { color: #f44336; }
  .latency-details {
    display: flex; justify-content: center; gap: 24px; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid var(--border);
  }
  .latency-detail { text-align: center; }
  .latency-detail-val { font-size: 18px; font-weight: 700; color: var(--text); }
  .latency-detail-lbl { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
  .latency-ping-btn {
    margin-top: 14px; padding: 8px 20px; border-radius: 20px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-dim); cursor: pointer; font-size: 12px;
    transition: all .2s;
  }
  .latency-ping-btn:hover { border-color: var(--accent2); color: var(--text); }
  .latency-ping-btn:disabled { opacity: .4; cursor: not-allowed; }
  .latency-ping-btn.pinging { color: var(--accent2); border-color: var(--accent2); }

  /* ── Benchmark ── */
  .bench-bar {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    padding: 8px 12px; background: rgba(0,0,0,.15); border-radius: 8px;
    font-size: 11px;
  }
  .bench-bar-label { color: var(--text-dim); }
  .bench-bar-time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .bench-bar-time.fast { color: #4caf50; }
  .bench-bar-time.medium { color: #ff9800; }
  .bench-bar-time.slow { color: #f44336; }
  .bench-bar-time.error { color: #f44336; font-size: 12px; }
  .bench-bar-tps { color: var(--accent2); font-weight: 600; margin-left: auto; }
  .bench-bar-date { color: var(--text-dim); font-size: 9px; }
  .bench-bar-track { flex: 1; height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; min-width: 40px; max-width: 100px; }
  .bench-bar-fill { height: 100%; border-radius: 2px; transition: width .5s; }
  .bench-run-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: 10px;
    border: 1px solid var(--accent2); background: rgba(255,122,0,.1);
    color: var(--accent2); cursor: pointer; font-size: 13px;
    font-weight: 600; transition: all .2s; margin-bottom: 16px;
  }
  .bench-run-btn:hover { background: rgba(255,122,0,.2); transform: translateY(-1px); }
  .bench-run-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
  .bench-progress { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; display: none; }
  .bench-progress.visible { display: block; }

  /* ── Stop/Retry buttons ── */
  .typing-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: center; }
  .typing-stop-btn, .typing-retry-btn {
    padding: 4px 12px; border-radius: 16px; border: 1px solid;
    font-size: 11px; cursor: pointer; font-weight: 600;
    transition: all .15s; display: inline-flex; align-items: center; gap: 4px;
  }
  .typing-stop-btn {
    border-color: rgba(255,50,50,.4); background: rgba(255,50,50,.1); color: #f66;
  }
  .typing-stop-btn:hover { background: rgba(255,50,50,.2); border-color: #f44; }
  .typing-retry-btn {
    border-color: rgba(255,122,0,.4); background: rgba(255,122,0,.1); color: var(--accent2);
  }
  .typing-retry-btn:hover { background: rgba(255,122,0,.2); border-color: var(--accent2); }
  .msg-retry-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 12px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-dim); cursor: pointer; font-size: 11px;
    transition: all .15s; margin-top: 6px;
  }
  .msg-retry-btn:hover { border-color: var(--accent2); color: var(--accent2); }

/* ── PROGRAMMER PANEL ─────────────────────────── */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.prog-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  transition: border-color .2s;
}
.prog-card:hover { border-color: rgba(255,60,0,.3); }
.prog-card-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prog-card-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}
.prog-card-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.prog-bar {
  width: 100%;
  height: 8px;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}
.prog-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .4s ease;
}
.prog-svc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
}
.prog-svc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.prog-user-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 10px;
  transition: border-color .2s;
}
.prog-user-row:hover { border-color: rgba(255,60,0,.2); }
.prog-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.prog-user-info { flex: 1; min-width: 0; }
.prog-user-name { font-weight: 600; font-size: 14px; color: var(--text); }
.prog-user-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.prog-user-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.prog-btn-sm {
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  transition: all .15s;
}
.prog-btn-sm:hover { border-color: var(--accent); color: var(--text); }
.prog-btn-danger { color: var(--accent); border-color: rgba(255,60,0,.3); }
.prog-btn-danger:hover { background: rgba(255,60,0,.1); }
.prog-btn-green { color: var(--green); border-color: rgba(0,232,135,.3); }
.prog-btn-green:hover { background: rgba(0,232,135,.1); }
.prog-tool-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prog-tool-card .tool-icon { font-size: 28px; }
.prog-tool-card .tool-name { font-weight: 700; font-size: 14px; color: var(--text); }
.prog-tool-card .tool-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; flex: 1; }
.prog-tool-btns { display: flex; gap: 8px; margin-top: auto; }
.prog-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.prog-kpi-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.prog-kpi-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.prog-kpi-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.prog-log-box {
  background: #0a0a0f;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  max-height: 70vh;
  overflow-y: auto;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: #bbb;
}
.prog-log-box::-webkit-scrollbar { width: 4px; }
.prog-log-box::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.prog-section { margin-top: 28px; }
.prog-section:first-child { margin-top: 0; }
.prog-section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prog-section-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .prog-grid { grid-template-columns: 1fr; gap: 10px; }
  .prog-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .prog-card { padding: 14px; }
  .prog-card-val { font-size: 22px; }
  .prog-user-row { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .prog-user-actions { width: 100%; }
  .prog-log-box { max-height: 50vh; font-size: 12px; padding: 14px; line-height: 1.45; }
  .prog-tool-card { padding: 16px; }
  #pcontent-server, #pcontent-metrics, #pcontent-quota, #pcontent-tools, #pcontent-logs, #pcontent-telegram, #pcontent-memory, #pcontent-audit {
    padding: 16px 12px 30px;
  }
}


/* ── LEARN TAB — Natural Conversation ────────── */
.learn-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  max-width: 800px;
  margin: 0 auto;
}
.learn-header {
  text-align: center;
  padding: 10px 0 16px;
  flex-shrink: 0;
}
.learn-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.learn-header p { font-size: 12px; color: var(--text-dim); margin: 0; }
.learn-chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.learn-chat::-webkit-scrollbar { width: 3px; }
.learn-chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.learn-bubble {
  max-width: 85%;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  animation: learnFadeIn .3s ease;
}
@keyframes learnFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.learn-bubble.petete {
  align-self: flex-start;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  color: var(--text);
}
.learn-bubble.human {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(255,60,0,.15), rgba(255,60,0,.08));
  border: 1px solid rgba(255,60,0,.2);
  border-bottom-right-radius: 4px;
  color: var(--text);
}
.learn-bubble .bubble-who {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
  color: var(--text-dim);
}
.learn-bubble.petete .bubble-who { color: var(--green); }
.learn-bubble.human .bubble-who { color: var(--accent); }
.learn-controls {
  flex-shrink: 0;
  padding: 18px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.learn-state {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.learn-state-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
}
.learn-state-dot.listening { background: var(--green); animation: lsPulse 1.2s ease infinite; }
.learn-state-dot.thinking { background: #f0ad4e; animation: lsPulse .6s ease infinite; }
.learn-state-dot.speaking { background: var(--accent); animation: lsPulse .8s ease infinite; }
@keyframes lsPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.learn-mic-btn {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 32px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.learn-mic-btn:hover { border-color: var(--accent); transform: scale(1.05); }
.learn-mic-btn.active {
  border-color: var(--green);
  background: rgba(0,232,135,.1);
  box-shadow: 0 0 30px rgba(0,232,135,.2);
}
.learn-mic-btn.active::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(0,232,135,.3);
  animation: lsRing 1.5s ease infinite;
}
@keyframes lsRing { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.3);opacity:0} }
.learn-mic-btn.speaking-anim {
  border-color: var(--accent);
  background: rgba(255,60,0,.1);
  box-shadow: 0 0 30px rgba(255,60,0,.15);
}
.learn-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.learn-action-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 8px 16px;
  transition: all .15s;
}
.learn-action-btn:hover { color: var(--text); border-color: var(--accent); }
.learn-action-btn.end { color: var(--accent); border-color: rgba(255,60,0,.3); }
.learn-action-btn.end:hover { background: rgba(255,60,0,.1); }
.learn-interim {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.3);
  font-style: italic;
  min-height: 18px;
}
.learn-summary {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 16px;
}
.learn-summary h3 {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--text);
}
.learn-summary p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0 0 10px; }
.learn-fact-list { list-style: none; padding: 0; margin: 10px 0 0; }
.learn-fact-list li {
  padding: 8px 12px;
  background: rgba(0,232,135,.06);
  border: 1px solid rgba(0,232,135,.15);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.learn-fact-list li::before { content: '💡'; flex-shrink: 0; }
.learn-start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 20px;
  text-align: center;
}
.learn-start-screen .start-icon { font-size: 64px; }
.learn-start-screen h2 {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  color: var(--text);
  margin: 0;
}
.learn-start-screen p { color: var(--text-dim); font-size: 14px; max-width: 400px; margin: 0; line-height: 1.6; }
.learn-start-btn {
  background: linear-gradient(135deg, var(--accent), #ff6a33);
  border: none;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 40px;
  transition: all .2s;
}
.learn-start-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,60,0,.3); }
.learn-cat-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  padding: 10px 16px;
  min-width: 220px;
}
.learn-mode-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.learn-mode-card:hover {
  border-color: var(--accent2);
  background: rgba(255,122,0,.04);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
}
.learn-mode-card.active {
  border-color: var(--accent);
  background: rgba(255,60,0,.06);
  box-shadow: 0 0 0 3px rgba(255,60,0,.1);
}
@media (max-width: 768px) {
  .learn-container { height: auto; min-height: 100%; padding: 0; max-width: 100%; overflow-x: hidden; }
  .learn-start-screen {
    padding: 16px 12px 24px;
    align-items: stretch;
    text-align: left;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .learn-start-screen h2 { font-size: 20px; text-align: left; }
  .learn-start-screen p { font-size: 13px; max-width: 100%; text-align: left; }
  .learn-start-screen > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 10px !important;
  }
  .learn-bubble { max-width: 94%; padding: 14px 16px; font-size: 15px; line-height: 1.5; }
  .learn-mic-btn { width: 80px; height: 80px; font-size: 32px; }
  .learn-mode-card { padding: 18px 16px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .learn-mode-card div[style*="font-size:15px"] { font-size: 16px !important; }
  .learn-mode-card div[style*="font-size:12px"] { font-size: 13px !important; }
  .learn-cat-select { font-size: 15px; min-height: 44px; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
  .learn-start-btn { min-height: 48px; font-size: 15px; width: 100%; max-width: 100%; }
  /* Panels (texto/url/voz/nota) ocupan ancho completo en móvil */
  #learn-text-panel, #learn-url-panel, #learn-voice-panel, #learn-note-panel {
    max-width: 100% !important; width: 100%; box-sizing: border-box;
  }
  #learn-text-panel textarea, #learn-url-panel input { box-sizing: border-box; width: 100%; }
}

/* ── USERS PANEL ─────────────────────────────────── */
#view-users { padding: 24px; overflow-y: auto; max-height: calc(100vh - 58px); }
.users-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.users-header h2 { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; }
.users-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.users-sub-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.users-sub-tab { background: none; border: none; color: var(--text-dim); font-family: 'DM Sans', sans-serif; font-size: 14px; padding: 8px 16px; cursor: pointer; border-radius: 8px 8px 0 0; transition: all .2s; }
.users-sub-tab.active { color: var(--text); background: var(--surface2); border-bottom: 2px solid var(--accent); }
.users-sub-tab:hover { color: var(--text); }

/* Users table */
.users-table { width: 100%; border-collapse: collapse; }
.users-table th { text-align: left; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.users-table td { padding: 12px; border-bottom: 1px solid rgba(42,42,61,.3); vertical-align: middle; }
.users-table tr:hover td { background: rgba(255,255,255,.02); }
.user-row-inactive td { opacity: 0.4; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.user-display-name { font-weight: 600; font-size: 14px; }
.user-username { font-size: 11px; color: var(--text-dim); }
.user-email { font-size: 12px; color: var(--text-dim); }
.user-role-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; display: inline-block; }
.user-role-badge.vendedor { background: rgba(0,232,135,.1); color: var(--green); }
.user-role-badge.profesor { background: rgba(255,122,0,.1); color: var(--accent2); }
.user-role-badge.programador { background: rgba(138,43,226,.1); color: #8a2be2; }

/* Permission checkboxes */
.perm-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.perm-chip { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); background: var(--surface); padding: 2px 8px; border-radius: 12px; }
.perm-chip input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
.perm-chip.active { color: var(--green); background: rgba(0,232,135,.08); }

/* User action buttons */
.user-actions { display: flex; gap: 6px; }
.user-act-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 5px 10px; transition: all .2s; white-space: nowrap; }
.user-act-btn:hover { border-color: var(--accent); color: var(--text); }
.user-act-btn.danger:hover { border-color: #f44; color: #f44; }

/* Create user form */
.user-create-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; max-width: 600px; }
.user-create-card h3 { font-family: 'Syne', sans-serif; font-size: 18px; margin-bottom: 16px; }
.user-form-row { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.user-form-field { flex: 1; min-width: 200px; }
.user-form-field label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.user-form-field input, .user-form-field select {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: 'DM Sans', sans-serif;
  font-size: 14px; padding: 10px 14px; outline: none; transition: border-color .2s; box-sizing: border-box;
}
.user-form-field input:focus, .user-form-field select:focus { border-color: var(--accent); }
.user-perm-section { margin: 16px 0; }
.user-perm-section label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; display: block; }
.user-perm-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.user-perm-check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.user-perm-check input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

/* Invite section */
.invite-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; max-width: 600px; margin-bottom: 20px; }
.invite-card h3 { font-family: 'Syne', sans-serif; font-size: 18px; margin-bottom: 16px; }
.invite-url-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--green); word-break: break-all; margin: 12px 0; display: flex; align-items: center; gap: 8px; }
.invite-url-box button { background: var(--accent); border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 11px; padding: 6px 12px; white-space: nowrap; }
.invite-list { margin-top: 16px; }
.invite-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(42,42,61,.3); font-size: 13px; flex-wrap: wrap; }
.invite-status { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 12px; }
.invite-status.pending { background: rgba(255,122,0,.1); color: var(--accent2); }
.invite-status.used { background: rgba(0,232,135,.1); color: var(--green); }
.invite-status.expired { background: rgba(136,136,168,.1); color: var(--text-dim); }

/* Edit user modal */
.user-modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.user-modal-overlay.open { display: flex; }
.user-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; width: 440px; max-width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: slideUp .3s ease; }
.user-modal h3 { font-family: 'Syne', sans-serif; font-size: 18px; margin-bottom: 16px; }
.user-modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

/* Registration screen */
#register-screen { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 150; align-items: center; justify-content: center; }
#register-screen.open { display: flex; }
.register-container { text-align: center; max-width: 440px; width: 90%; }
.register-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 32px; text-align: left; }
.register-card h2 { font-family: 'Syne', sans-serif; font-size: 22px; margin-bottom: 4px; text-align: center; }
.register-card .login-sub { text-align: center; margin-bottom: 20px; }
.register-perms { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.register-perm-tag { font-size: 11px; padding: 4px 12px; border-radius: 20px; }
.register-perm-tag.on { background: rgba(0,232,135,.1); color: var(--green); }
.register-perm-tag.off { background: rgba(136,136,168,.1); color: var(--text-dim); text-decoration: line-through; }

@media (max-width: 768px) {
  #view-users { padding: 16px 14px max(16px, env(safe-area-inset-bottom)); }
  .users-header h2 { font-size: 18px; }
  .users-table { font-size: 13px; }
  .users-table th, .users-table td { padding: 10px 8px; }
  .perm-grid { gap: 6px; }
  .user-actions { flex-wrap: wrap; gap: 6px; }
  .user-actions button { min-height: 36px; font-size: 13px; padding: 8px 12px; }
  .users-sub-tab { font-size: 13px; padding: 10px 12px; min-height: 40px; }
}