:root {
      --primary: #1a73e8;
      --primary-dark: #1557b0;
      --primary-light: #e8f0fe;
      --success: #34a853;
      --danger: #ea4335;
      --warning: #fbbc04;
      --bg: #f0f4fc;
      --surface: #ffffff;
      --surface2: #f8f9fc;
      --border: #dadce0;
      --text: #202124;
      --text2: #5f6368;
      --radius: 12px;
      --shadow: 0 2px 12px rgba(0,0,0,.10);
      --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
    }
    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

    header {
      position: sticky; top:0; z-index:100;
      background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
      color: #fff; padding: 0 24px;
      display: flex; align-items: center; justify-content: space-between;
      height: 60px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    header h1 { font-size:18px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:8px; }
    header .badge { background:rgba(255,255,255,.2); border-radius:20px; padding:2px 12px; font-size:13px; font-weight:600; }
    header .header-actions { display:flex; gap:8px; align-items:center; }
    header a.nav-link { color:rgba(255,255,255,.85); text-decoration:none; font-size:13px; padding:6px 12px; border-radius:8px; transition:.2s; }
    header a.nav-link:hover { background:rgba(255,255,255,.15); color:#fff; }

    #toast-container { position:fixed; top:70px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
    .toast { background:var(--surface); border-radius:10px; padding:12px 18px; box-shadow:var(--shadow-lg);
      font-size:13.5px; display:flex; align-items:center; gap:10px; min-width:240px;
      animation: slideIn .3s ease; border-left:4px solid var(--primary); }
    .toast.success { border-color:var(--success); }
    .toast.error   { border-color:var(--danger);  }
    .toast.warning { border-color:var(--warning);  }
    @keyframes slideIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }

    /* ── Modal de confirmación ───────────────────────────────────────────── */
    .modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:9100;display:none; }
    .modal-box { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9101;
      background:#fff;border-radius:18px;box-shadow:0 8px 40px rgba(0,0,0,.24);
      width:min(440px,92vw);font-family:inherit;animation:modalPop .18s ease; }
    @keyframes modalPop { from{opacity:0;transform:translate(-50%,-52%) scale(.95)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
    .modal-header { padding:18px 22px 14px;border-bottom:1px solid var(--border);
      display:flex;align-items:center;justify-content:space-between; }
    .modal-header h3 { margin:0;font-size:16px;font-weight:700;color:var(--text1); }
    .modal-header .modal-x { background:var(--border);border:none;border-radius:50%;width:28px;height:28px;
      font-size:18px;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;line-height:1; }
    .modal-body { padding:18px 22px;font-size:14.5px;color:var(--text1);line-height:1.6;white-space:pre-line; }
    .modal-footer { padding:8px 22px 18px;display:flex;justify-content:flex-end;gap:10px; }
    .modal-footer .btn-danger { background:var(--danger);border-color:var(--danger);color:#fff; }
    .modal-footer .btn-danger:hover { background:#c5221f; }

    .page { display:grid; grid-template-columns:460px 1fr; height:calc(100vh - 101px); }

    .sidebar {
      background: var(--surface); border-right: 1px solid var(--border);
      overflow-y: auto; display:flex; flex-direction:column;
    }
    .sidebar-header {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      font-size:15px; font-weight:700; color: var(--primary);
      display:flex; align-items:center; justify-content:space-between; gap:8px;
    }
    .mode-badge { font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; background:var(--primary-light); color:var(--primary); }
    .mode-badge.editing { background:#fff3e0; color:#e65c00; }

    .form-body { padding:16px 20px; flex:1; display:flex; flex-direction:column; gap:16px; }
    .form-group { display:flex; flex-direction:column; gap:5px; }
    .form-group label { font-size:12.5px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; }
    .form-hint { font-size:12px; color:var(--text2); margin-top:2px; }

    input[type=text], input[type=number], select, textarea {
      border: 1.5px solid var(--border); border-radius:8px; padding:10px 14px;
      font-size:15px; font-family:inherit; color:var(--text); background:var(--surface);
      transition: border-color .2s, box-shadow .2s; width:100%; outline:none;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(26,115,232,.15);
    }
    textarea { min-height:90px; resize:vertical; }
    .row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

    .type-tabs { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
    .type-tab {
      grid-column:span 2;
      padding:10px 6px 9px; border:1.5px solid var(--border); border-radius:10px;
      background:var(--surface2); cursor:pointer; text-align:center; font-size:13px; font-weight:700;
      color:var(--text2); transition:.18s; user-select:none; line-height:1.3;
    }
    .type-tab .tab-icon  { display:block; font-size:20px; margin-bottom:3px; }
    .type-tab .tab-label { display:block; font-size:12.5px; font-weight:700; }
    .type-tab .tab-desc  { display:block; font-size:10.5px; font-weight:400; opacity:.75; margin-top:1px; }
    .type-tab:hover  { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
    .type-tab.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); box-shadow:0 0 0 3px #c5d6f860; }
    /* fila 2: Mixto y WebService ocupan 3 columnas cada uno */
    .type-tab:nth-child(4), .type-tab:nth-child(5) { grid-column:span 3; }

    .panel-editor { border:1.5px solid var(--border); border-radius:var(--radius); padding:14px; background:var(--surface2); }
    .panel-editor h5 { font-size:11.5px; font-weight:700; text-transform:uppercase; color:var(--text2); letter-spacing:.5px; margin-bottom:10px; }

    .btn-item { display:flex; flex-direction:column; gap:6px; background:var(--bg); border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:8px; transition:.15s; }
    .btn-item:hover { border-color:var(--primary); }
    .btn-item-header { display:flex; align-items:center; gap:8px; }
    .btn-num { width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .btn-item-label { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }
    .btn-flow-row { display:flex; align-items:center; gap:8px; padding-top:4px; border-top:1px dashed var(--border); margin-top:2px; }
    .btn-flow-icon { font-size:14px; flex-shrink:0; color:var(--primary); }

    .btn { padding:8px 16px; border:none; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:600; transition:.2s; display:inline-flex; align-items:center; gap:6px; }
    .btn:active { transform:scale(.97); }
    .btn-primary { background:var(--primary); color:#fff; }
    .btn-primary:hover { background:var(--primary-dark); }
    .btn-success { background:var(--success); color:#fff; }
    .btn-success:hover { background:#2d9248; }
    .btn-danger  { background:var(--danger); color:#fff; }
    .btn-danger:hover  { background:#c5221f; }
    .btn-ghost { background:transparent; color:var(--text2); border:1.5px solid var(--border); }
    .btn-ghost:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
    .btn-warn { background:var(--warning); color:#4a3000; }
    .btn-sm { padding:5px 10px; font-size:12px; }
    .btn-icon-only { padding:5px 8px; font-size:14px; border-radius:6px; }

    .row-action { display:flex; gap:8px; margin-top:8px; }
    .form-actions { display:flex; gap:8px; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface); }
    .form-actions .btn { flex:1; justify-content:center; padding:10px; }

    .img-preview-wrap { position:relative; display:inline-block; margin-top:8px; }
    .img-preview-wrap img { border-radius:8px; max-width:100%; max-height:130px; border:1.5px solid var(--border); }
    .img-remove { position:absolute; top:-7px; right:-7px; background:var(--danger); color:#fff; border:none; border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; }

    .main { overflow-y:auto; background:var(--bg); }
    .main-header { padding:20px 24px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
    .main-title { font-size:20px; font-weight:700; }

    .search-bar { display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:0 12px; flex:1; max-width:380px; }
    .search-bar span { color:var(--text2); font-size:16px; }
    .search-bar input { border:none; outline:none; padding:9px 4px; flex:1; font-size:14px; background:transparent; }

    .stats-row { display:flex; gap:12px; padding:16px 24px; flex-wrap:wrap; }
    .stat-card { background:var(--surface); border-radius:var(--radius); padding:14px 18px; flex:1; min-width:110px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; }
    .stat-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
    .stat-icon.blue  { background:#e8f0fe; }
    .stat-icon.green { background:#e6f4ea; }
    .stat-icon.orange{ background:#fff3e0; }
    .stat-icon.purple{ background:#f3e8fd; }
    .stat-val { font-size:22px; font-weight:800; color:var(--text); line-height:1; }
    .stat-lbl { font-size:11px; color:var(--text2); text-transform:uppercase; font-weight:600; letter-spacing:.4px; }

    .hint-box { background:linear-gradient(135deg, #e8f0fe, #f0f4ff); border:1.5px solid #c5d6f8; border-radius:var(--radius); padding:12px 18px; font-size:13px; color:#1557b0; margin:0 24px 8px; line-height:1.6; }
    .hint-box strong { font-weight:700; }

    .responses-grid { display:flex; flex-direction:column; gap:10px; padding:0 24px 24px; }
    .resp-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; border:1.5px solid transparent; transition:.2s; }
    .resp-card:hover { border-color:var(--primary); box-shadow:var(--shadow-lg); }
    .resp-card-header { display:flex; align-items:flex-start; gap:14px; padding:16px 18px 10px; }
    .resp-prio { width:36px; height:36px; border-radius:8px; background:var(--primary-light); color:var(--primary); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .resp-reply { flex:1; font-size:15px; color:var(--text); line-height:1.65; white-space:pre-wrap; word-break:break-word; }
    .resp-actions { display:flex; gap:6px; flex-shrink:0; }

    .resp-card-meta { padding:0 18px 12px; display:flex; flex-wrap:wrap; gap:6px; }
    .tag { display:inline-flex; align-items:center; padding:4px 11px; border-radius:20px; font-size:13px; font-weight:600; }
    .tag.keyword { background:#e8f0fe; color:#1a73e8; }
    .tag.match   { background:#e6f4ea; color:#1e7e34; }
    .tag.type    { background:#fff3e0; color:#b84f00; }
    .tag.prio    { background:#f3e8fd; color:#6f3fc7; }

    .resp-btns-preview { padding:0 18px 12px; display:flex; flex-wrap:wrap; gap:8px; }
    .btn-chip { padding:5px 14px; border-radius:20px; background:#f0f4fc; border:1.5px solid #c5d6f8; color:var(--primary); font-size:13px; font-weight:600; }

    .resp-img-thumb { padding:0 16px 10px; }
    .resp-img-thumb img { border-radius:8px; max-height:80px; border:1px solid var(--border); }

    .empty { text-align:center; padding:60px 24px; color:var(--text2); }
    .empty-icon { font-size:52px; margin-bottom:12px; }

    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:#c0ccdd; border-radius:3px; }

    /* ── Nav principal ────────────────────────── */
    .top-nav { display:flex; gap:4px; padding:10px 20px 0; background:var(--surface); border-bottom:1px solid var(--border); }
    .nav-tab { padding:10px 24px; font-size:14px; font-weight:700; border-radius:8px 8px 0 0; cursor:pointer; color:var(--text2); border:1.5px solid transparent; border-bottom:none; transition:.2s; }
    .nav-tab:hover { color:var(--primary); background:var(--primary-light); }
    .nav-tab.active { color:var(--primary); background:var(--surface); border-color:var(--border); border-bottom-color:var(--surface); margin-bottom:-1px; }

    .tab-section { display:none; }
    .tab-section.active { display:block; }
    /* Para las secciones que usan layout flex (agentes/sesiones) */
    .tab-section.active .agents-page { display:flex; }
    /* ── Tab de Métricas ─────────────────── */
    .nav-tab.metrics-tab { color:#15803d !important; background:rgba(34,197,94,.07) !important; border:1.5px solid rgba(34,197,94,.25) !important; font-weight:800; }
    .nav-tab.metrics-tab:hover { background:rgba(34,197,94,.16) !important; }
    .nav-tab.metrics-tab.active { background:#f0fdf4 !important; color:#15803d !important; border-color:rgba(34,197,94,.4) !important; border-bottom-color:#f8f9fc !important; }
    /* ── Sección métricas: ocupa todo el espacio disponible sin overflow ── */
    #section-metrics.active {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: calc(100vh - 102px);
    }
    .metrics-frame {
      flex: 1;
      min-height: 0;
      display: block;
      width: 100%;
      border: none;
      background: #0f172a;
    }
    @media (max-width: 768px) {
      #section-metrics.active { height: calc(100vh - 91px); }
    }
    @media (max-width: 480px) {
      #section-metrics.active { height: calc(100vh - 85px); }
    }

    /* ── Sección estados: ocupa todo el espacio disponible sin overflow ── */
    #section-status.active {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: calc(100vh - 102px);
    }
    @media (max-width: 768px) {
      #section-status.active { height: calc(100vh - 91px); }
    }
    @media (max-width: 480px) {
      #section-status.active { height: calc(100vh - 85px); }
    }

    /* ── Barra de título de sección ──────────────────────────── */
    .section-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      height: 52px;
      background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
      color: #fff;
      flex-shrink: 0;
    }
    .section-bar h2 {
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }
    .section-bar .bar-sub {
      font-size: 12px;
      opacity: .75;
    }
    /* Ajustar altura de contenido debajo de section-bar */
    .tab-section .section-bar ~ .page,
    .tab-section .section-bar ~ .tpl-page {
      height: calc(100vh - 153px);
    }
    @media (max-width: 960px) {
      .tab-section .section-bar ~ .page { height: auto; }
    }
    @media (max-width: 768px) {
      .section-bar { height: 46px; padding: 0 14px; }
      .section-bar h2 { font-size: 14px; }
      .section-bar .bar-sub { display: none; }
      .tab-section .section-bar ~ .tpl-page { height: auto; }
    }
    @media (max-width: 480px) {
      .section-bar { height: 42px; padding: 0 10px; }
      .section-bar h2 { font-size: 13px; }
    }

    /* ── Agentes ──────────────────────────── */
    .agents-page { padding:24px; gap:24px; align-items:flex-start; }
    .agents-col { flex:1; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
    .agents-col h3 { font-size:15px; font-weight:700; color:var(--primary); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
    .agent-card { border:1.5px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; transition:.2s; }
    .agent-card:hover { border-color:var(--primary); }
    .agent-info { flex:1; }
    .agent-name { font-weight:700; font-size:15px; }
    .agent-phone { font-size:13px; color:var(--text2); margin-top:3px; }
    .agent-status { font-size:12px; font-weight:700; padding:4px 11px; border-radius:20px; }
    .agent-status.active { background:#e6f4ea; color:#1e7e34; }
    .agent-status.inactive { background:#fce8e6; color:#c5221f; }
    .agent-actions { display:flex; gap:6px; }
    /* ── Grid de sesiones (ocupa todo el ancho disponible) ────── */
    .sessions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
      gap: 12px;
      align-items: start;
    }
    /* separadores de grupo ocupan ambas columnas */
    .sessions-grid .session-group-sep {
      grid-column: 1 / -1;
    }
    /* Stat cards de resumen */
    .session-stat {
      flex:1; min-width:130px;
      background:var(--surface); border:1.5px solid var(--border);
      border-radius:12px; padding:12px 16px;
      display:flex; flex-direction:column; gap:2px;
      box-shadow:0 1px 4px rgba(0,0,0,.06);
    }
    .session-stat .st-val {
      font-size:26px; font-weight:900; line-height:1;
    }
    .session-stat .st-lbl {
      font-size:11.5px; color:var(--text2); font-weight:600;
    }
    .session-stat.st-active  { border-color:#34a853; }
    .session-stat.st-active  .st-val { color:#1e7e34; }
    .session-stat.st-pending { border-color:#e37400; }
    .session-stat.st-pending .st-val { color:#b06000; }
    .session-stat.st-closed  .st-val { color:var(--text2); }
    .session-stat.st-wait    { border-color:#1a73e8; }
    .session-stat.st-wait    .st-val { color:#1a73e8; }
      margin-bottom: 0; /* el gap del grid ya separa */
      border:1.5px solid var(--border); border-radius:14px;
      padding:14px 16px; margin-bottom:10px;
      background:var(--surface); transition:.18s;
      box-shadow:0 1px 4px rgba(0,0,0,.06);
    }
    .session-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.11); border-color:#a8c5f0; }
    .session-card.active { border-left:4px solid #34a853; border-color:#34a853; }
    .session-card.active.priority-1 { border-left-color:#c5221f; border-color:#f4b9b2; background:#fff8f7; }
    .session-card.active.priority-2 { border-left-color:#e37400; border-color:#fde29a; background:#fffbf0; }
    .session-card.active.priority-3 { border-left-color:#1a73e8; border-color:#b3d4fc; }

    /* Avatar / número de cola */
    .session-avatar {
      flex-shrink:0; width:44px; height:44px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:17px; font-weight:900; color:#fff;
      background:#bbb; position:relative;
    }
    .session-avatar.pos-1 { background:linear-gradient(135deg,#c5221f,#e53935); }
    .session-avatar.pos-2 { background:linear-gradient(135deg,#e37400,#fb8c00); }
    .session-avatar.pos-3 { background:linear-gradient(135deg,#1a73e8,#42a5f5); }
    .session-avatar.pos-n { background:linear-gradient(135deg,#5f6368,#9aa0a6); }
    .session-avatar.closed { background:linear-gradient(135deg,#bbb,#ddd); color:#555; }
    .session-wait-ring {
      position:absolute; bottom:-4px; right:-4px;
      background:#fff; border:2px solid #fff; border-radius:10px;
      font-size:9.5px; font-weight:800; padding:1px 5px;
      white-space:nowrap; line-height:1.3;
    }
    .ring-urgent { color:#c5221f; }
    .ring-warn   { color:#e37400; }
    .ring-ok     { color:#1a73e8; }
    .ring-closed { color:#9aa0a6; }

    /* Cuerpo de la card */
    .session-body { flex:1; min-width:0; }
    .session-row { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
    .session-chat { font-size:12.5px; color:var(--text2); word-break:break-all; }
    .session-agent { font-weight:700; font-size:14px; }
    .session-time { font-size:11.5px; color:var(--text2); }
    .session-queue-label {
      display:inline-flex; align-items:center; gap:5px;
      font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
      background: var(--surface2); border:1.5px solid var(--border);
      border-radius:10px; padding:2px 9px; margin-bottom:6px;
    }
    .session-queue-label.q1 { background:#fce8e6; border-color:#f4b9b2; color:#c5221f; }
    .session-queue-label.q2 { background:#fef3e0; border-color:#fde29a; color:#b06000; }
    .session-queue-label.q3 { background:#e8f0fe; border-color:#b3d4fc; color:#1a73e8; }
    .session-queue-label.qn { background:var(--surface2); border-color:var(--border); color:var(--text2); }

    /* ── Toggle switch (horario laboral) ────────────────────── */
    .bh-switch { position:relative; display:inline-flex; width:46px; height:26px; flex-shrink:0; cursor:pointer; }
    .bh-switch input { opacity:0; width:0; height:0; }
    .bh-slider { position:absolute; inset:0; background:#ccc; border-radius:26px; transition:.3s; }
    .bh-slider::before { content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
    .bh-switch input:checked + .bh-slider { background:var(--primary); }
    .bh-switch input:checked + .bh-slider::before { transform:translateX(20px); }

    /* ── Chips de días (horario laboral) ─────────────────────── */
    .day-chip { display:inline-flex; align-items:center; gap:0; cursor:pointer; user-select:none; }
    .day-chip input { display:none; }
    .day-chip span { padding:7px 14px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; font-weight:700; color:var(--text2); background:var(--surface2); transition:.18s; }
    .day-chip input:checked + span { background:var(--primary); color:#fff; border-color:var(--primary); }
    .day-chip:hover span { border-color:var(--primary); color:var(--primary); }
    /* Chips para días bloqueados (rojo) */
    .day-chip-blocked input:checked + span { background:#ea4335; border-color:#ea4335; color:#fff; }
    .day-chip-blocked:hover span { border-color:#ea4335; color:#ea4335; }

    /* ── Panel webservice ────────────────────── */
    .ws-field { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
    .ws-field label { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; }
    /* ── Chat Panel ──────────────────────────── */
    #chat-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000; display:none; }
    #chat-overlay.open { display:block; }
    #chat-panel {
      position:fixed; top:0; right:-420px; width:420px; max-width:100vw; height:100vh;
      background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,.18); z-index:1001;
      display:flex; flex-direction:column; transition:right .3s ease;
    }
    #chat-panel.open { right:0; }
    .chat-header {
      display:flex; align-items:center; gap:10px; padding:14px 16px;
      background:var(--primary); color:#fff; flex-shrink:0;
    }
    .chat-header h3 { flex:1; font-size:15px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .chat-header button { background:none; border:none; color:#fff; font-size:18px; cursor:pointer; padding:2px 6px; border-radius:6px; }
    .chat-header button:hover { background:rgba(255,255,255,.2); }
    #chat-messages {
      flex:1; overflow-y:auto; padding:14px 12px; display:flex;
      flex-direction:column; gap:8px; background:#ece5dd;
    }
    .msg-bubble {
      max-width:80%; padding:9px 13px; border-radius:12px;
      font-size:14px; line-height:1.45; word-break:break-word;
      position:relative; box-shadow:0 1px 2px rgba(0,0,0,.12);
    }
    .msg-bubble.incoming { background:#fff; align-self:flex-start; border-top-left-radius:2px; }
    .msg-bubble.outgoing, .msg-bubble.agent {
      background:#dcf8c6; align-self:flex-end; border-bottom-right-radius:2px;
    }
    .msg-bubble.system { background:#fff3cd; align-self:center; font-size:12px; color:#856404; border-radius:20px; padding:6px 14px; }
    .msg-meta { font-size:10.5px; color:#888; margin-top:4px; text-align:right; }
    /* Burbuja de "escribiendo…" (3 puntos animados) */
    .typing-bubble {
      align-self:flex-start; display:flex; align-items:center; gap:5px;
      background:#fff; border-radius:18px; border-top-left-radius:4px;
      padding:10px 14px; box-shadow:0 1px 2px rgba(0,0,0,.12);
    }
    .typing-bubble span {
      width:8px; height:8px; background:#aaa; border-radius:50%;
      display:inline-block;
      animation:typing-dot 1.4s infinite ease-in-out;
    }
    .typing-bubble span:nth-child(1) { animation-delay:0s; }
    .typing-bubble span:nth-child(2) { animation-delay:.2s; }
    .typing-bubble span:nth-child(3) { animation-delay:.4s; }
    @keyframes typing-dot {
      0%, 80%, 100% { opacity:.25; transform:scale(.75); }
      40%           { opacity:1;   transform:scale(1);    }
    }
    .chat-input-area {
      display:flex; gap:8px; padding:10px 12px; background:#f0f0f0;
      border-top:1px solid var(--border); flex-shrink:0;
    }
    .chat-input-area textarea {
      flex:1; resize:none; border:1px solid var(--border); border-radius:20px;
      padding:9px 14px; font-size:14px; outline:none; max-height:100px;
      font-family:inherit; background:#fff;
    }
    #chat-send-btn {
      width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff;
      border:none; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:.15s;
    }
    #chat-send-btn:hover { background:var(--primary-dark, #1a6bc5); }
    #chat-send-btn:disabled { opacity:.5; cursor:default; }
    /* Botón adjuntar */
    #chat-attach-btn {
      width:38px; height:38px; border-radius:50%; background:none; border:none; cursor:pointer;
      font-size:20px; display:flex; align-items:center; justify-content:center; color:var(--text2);
      flex-shrink:0; padding:0; transition:.15s; align-self:flex-end;
    }
    #chat-attach-btn:hover { background:rgba(0,0,0,.08); color:var(--primary); }
    /* Preview del adjunto antes de enviar */
    #chat-attach-preview {
      padding:8px 12px 0; background:#f0f0f0; flex-shrink:0;
    }
    .attach-preview-item {
      display:inline-flex; align-items:center; gap:8px; background:#fff;
      border:1.5px solid var(--border); border-radius:10px; padding:6px 10px;
      font-size:12.5px; max-width:260px; position:relative;
    }
    .attach-preview-item img { width:52px; height:52px; object-fit:cover; border-radius:6px; flex-shrink:0; }
    .attach-preview-item .attach-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
    .attach-preview-item .attach-remove {
      background:none; border:none; cursor:pointer; font-size:16px; color:var(--danger);
      padding:0 2px; flex-shrink:0;
    }
    .attach-preview-icon { font-size:28px; flex-shrink:0; }
    /* ── Barra de sugerencias de saludo ─────────────────────── */
    #chat-greetings-bar {
      flex-shrink:0; background:linear-gradient(135deg,#e8f4fd,#f0f9ff);
      border-bottom:2px solid #bbd9f7; padding:10px 12px;
      display:none; flex-direction:column; gap:8px;
    }
    .greetings-label {
      font-size:11.5px; font-weight:700; color:var(--primary);
      display:flex; align-items:center; justify-content:space-between; gap:4px;
    }
    .greeting-dismiss-btn {
      background:none; border:none; cursor:pointer; font-size:14px;
      color:var(--text2); padding:0 4px; line-height:1;
    }
    .greeting-dismiss-btn:hover { color:var(--danger); }
    .greeting-chips { display:flex; flex-wrap:wrap; gap:6px; }
    .greeting-chip {
      background:#fff; border:1.5px solid var(--primary); color:var(--primary-dark);
      border-radius:16px; padding:6px 12px; font-size:12px; cursor:pointer;
      transition:.15s; text-align:left; white-space:normal; line-height:1.35;
      max-width:100%;
    }
    .greeting-chip:hover { background:var(--primary); color:#fff; }
    .greeting-chip.chip-primary {
      background:var(--primary); color:#fff; border-color:var(--primary-dark);
    }
    .greeting-chip.chip-primary:hover { background:var(--primary-dark); }
    /* Media en burbujas de chat */
    .chat-media { margin-bottom:4px; }
    .chat-media img {
      max-width:220px; max-height:200px; border-radius:8px; display:block;
      cursor:pointer; transition:.15s;
    }
    .chat-media img:hover { opacity:.9; }
    .chat-media video { max-width:220px; border-radius:8px; display:block; outline:none; }
    .chat-media audio { max-width:220px; display:block; margin:2px 0; }
    .chat-media .file-chip {
      display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,.07);
      border-radius:8px; padding:8px 12px; font-size:13px; text-decoration:none; color:inherit;
      transition:.15s;
    }
    .chat-media .file-chip:hover { background:rgba(0,0,0,.14); }
    .chat-media .file-chip .file-icon { font-size:22px; flex-shrink:0; }
    /* ── Outbound (nueva conversación) ───────────────────── */
    .outbound-page {
      display: flex; flex-direction: column;
      height: calc(100vh - 101px); padding: 0;
    }
    .outbound-subtabs {
      display: flex; gap: 0; padding: 14px 20px 0;
      border-bottom: 2px solid var(--border); background: var(--surface);
      flex-shrink: 0;
    }
    .outbound-subtab {
      padding: 9px 20px; font-size: 13.5px; font-weight: 700;
      cursor: pointer; color: var(--text2); border-radius: 8px 8px 0 0;
      border: 1.5px solid transparent; border-bottom: none;
      transition: .15s; white-space: nowrap;
    }
    .outbound-subtab:hover { color: var(--primary); background: var(--primary-light); }
    .outbound-subtab.active {
      color: var(--primary); background: var(--surface);
      border-color: var(--border); border-bottom-color: var(--surface);
      margin-bottom: -2px;
    }
    .outbound-subpanel { display: none; flex: 1; overflow: hidden; }
    .outbound-subpanel.active { display: flex; flex-direction: column; }

    /* Formulario nuevo envio */
    .outbound-form-scroll {
      flex: 1; overflow-y: auto; padding: 20px 24px;
    }
    .outbound-form-card {
      width: 100%;
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 32px;
      display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr;
      min-height: calc(100% - 40px); box-sizing: border-box;
    }
    /* Layout 2 columnas */
    .outbound-form-body {
      display: grid;
      grid-template-columns: minmax(300px, 400px) 1fr;
      gap: 32px;
      align-items: start;
    }
    .outbound-form-left  { display: flex; flex-direction: column; gap: 20px; }
    .outbound-form-right { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
    /* Bloque de mensaje: ocupa el espacio restante de la derecha */
    .ob-msg-block { flex: 1; display: flex; flex-direction: column; }
    .ob-msg-block .ob-textarea { flex: 1; min-height: 180px; }

    /* Etiquetas de campo */
    .ob-label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
      text-transform:uppercase; letter-spacing:.5px; color:var(--text2); margin-bottom:7px; }
    .ob-label-icon { font-size:14px; }
    .ob-label-req  { color:var(--danger); font-weight:900; margin-left:1px; }
    .ob-label-opt  { font-weight:400; text-transform:none; letter-spacing:0; color:var(--text2); font-size:11.5px; }
    .ob-field-block { display:flex; flex-direction:column; }
    .ob-hint { font-size:12px; color:var(--text2); margin-top:5px; }
    .ob-hint kbd {
      background:var(--surface2); border:1px solid var(--border); border-radius:4px;
      padding:1px 5px; font-size:11px; font-family:inherit;
    }

    /* Campo de teléfono */
    .ob-phone-wrap {
      display:flex; align-items:center; gap:0;
      border:1.5px solid var(--border); border-radius:10px;
      overflow:hidden; transition:.2s; background:var(--surface);
    }
    .ob-phone-wrap:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,115,232,.12); }
    .ob-phone-wrap.ob-phone-ok    { border-color:#34a853; }
    .ob-phone-wrap.ob-phone-error { border-color:var(--danger); }
    .ob-phone-flag {
      padding:0 12px; font-size:18px; background:var(--surface2);
      border-right:1.5px solid var(--border); height:44px;
      display:flex; align-items:center; flex-shrink:0; user-select:none;
    }
    .ob-phone-input {
      flex:1; border:none !important; box-shadow:none !important; outline:none;
      padding:0 12px; height:44px; font-size:15px; letter-spacing:.5px;
      background:transparent; min-width:0;
    }
    .ob-phone-status {
      padding:0 12px; font-size:16px; flex-shrink:0;
      display:flex; align-items:center;
    }

    /* Banner "listo para enviar" */
    .ob-ready-banner {
      background:linear-gradient(135deg,#e8f5e9,#f1f8e9);
      border:1.5px solid #34a853; border-radius:10px;
      padding:12px 16px; font-size:13px; color:#1b5e20;
      display:flex; align-items:center; gap:10px;
      animation: ob-fadein .25s ease;
    }
    @keyframes ob-fadein { from {opacity:0;transform:translateY(-4px)} to {opacity:1;transform:translateY(0)} }

    /* Zona de adjunto (compacta) */
    .ob-attach-zone {
      border:2px dashed var(--border); border-radius:10px;
      padding:10px 14px; cursor:pointer; transition:.2s;
      min-height:50px; display:flex; align-items:center;
    }
    .ob-attach-zone:hover { border-color:var(--primary); background:var(--primary-light); }
    .ob-attach-zone.ob-attach-has-file { border-style:solid; border-color:#34a853; background:#f0fdf4; cursor:default; }
    .ob-attach-idle { display:flex; align-items:center; gap:10px; color:var(--text2); font-size:13px; pointer-events:none; }
    .ob-attach-preview { display:flex; align-items:center; gap:10px; width:100%; }
    .ob-attach-icon  { font-size:26px; flex-shrink:0; }
    .ob-attach-info  { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
    .ob-attach-name  { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
    .ob-attach-size  { font-size:11.5px; color:var(--text2); }
    .ob-attach-remove {
      background:none; border:none; cursor:pointer; color:var(--danger);
      font-size:16px; padding:4px 6px; border-radius:6px; flex-shrink:0;
      transition:.15s;
    }
    .ob-attach-remove:hover { background:#fdecea; }

    /* Acciones */
    .ob-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .ob-send-btn {
      display:flex; align-items:center; gap:8px;
      padding:10px 24px; font-size:14px; font-weight:700;
      transition:.2s; min-width:160px; justify-content:center;
    }
    .ob-send-btn:disabled { opacity:.45; cursor:not-allowed; }
    .ob-send-btn:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(52,168,83,.35); }
    .ob-status-text { font-size:13px; color:var(--text2); min-height:18px; }

    /* Textarea de mensaje */
    .ob-textarea {
      flex:1; min-height:260px; resize:none;
      border:1.5px solid var(--border); border-radius:10px;
      padding:14px 16px; font-size:14px; line-height:1.6;
      transition:.2s; font-family:inherit;
    }
    .ob-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,115,232,.12); outline:none; }
    .ob-char-counter {
      font-size:12px; color:var(--text2); background:var(--surface2);
      border:1px solid var(--border); border-radius:20px; padding:2px 10px;
    }
    .ob-char-counter.ob-char-warn { color:#e37400; border-color:#e37400; }

    @media (max-width: 768px) {
      .outbound-form-body { grid-template-columns: 1fr; }
      .ob-msg-block .ob-textarea { min-height: 160px; }
    }

    /* Historial de enviados */
    .ob-history-toolbar {
      display: flex; align-items: center; gap: 10px; padding: 12px 20px;
      border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0;
      flex-wrap: wrap;
    }
    .ob-history-toolbar input {
      flex: 1; min-width: 160px; max-width: 320px;
      border: 1.5px solid var(--border); border-radius: 8px;
      padding: 7px 12px; font-size: 13px; outline: none;
    }
    .ob-history-toolbar input:focus { border-color: var(--primary); }
    .ob-history-count {
      font-size: 12.5px; color: var(--text2);
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 20px; padding: 3px 10px; white-space: nowrap;
    }
    .ob-table-wrap { flex: 1; overflow-y: auto; padding: 12px 20px 20px; }
    /* Cards de enviados */
    .ob-cards { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
    .ob-card {
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 12px; padding: 14px 16px;
      box-shadow: 0 1px 4px rgba(0,0,0,.07); transition: .15s;
      display: grid; grid-template-columns: auto 1fr auto; gap: 10px 14px; align-items: start;
    }
    .ob-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
    .ob-card-icon {
      width: 42px; height: 42px; border-radius: 50%;
      background: var(--primary-light); color: var(--primary);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; flex-shrink: 0;
    }
    .ob-card-body { min-width: 0; }
    .ob-card-phone { font-weight: 700; color: var(--primary); font-size: 14px; margin-bottom: 3px; }
    .ob-card-text {
      font-size: 13px; color: var(--text); line-height: 1.45;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; word-break: break-word;
    }
    .ob-card-meta { font-size: 11.5px; color: var(--text2); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; }
    .ob-card-meta .meta-agent { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; }
    .ob-card-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
    .ob-open-btn {
      font-size: 12px; padding: 5px 12px; border-radius: 8px;
      background: var(--primary); color: #fff; border: none;
      cursor: pointer; font-weight: 600; white-space: nowrap;
    }
    .ob-open-btn:hover { opacity: .88; }
    .ob-del-btn {
      font-size: 12px; padding: 4px 10px; border-radius: 8px;
      background: none; border: 1.5px solid var(--danger);
      color: var(--danger); cursor: pointer; font-weight: 600;
    }
    .ob-del-btn:hover { background: var(--danger); color: #fff; }
    .ob-card-time { font-size: 11px; color: var(--text2); white-space: nowrap; text-align: right; line-height: 1.4; }
    .ob-table {
      width: 100%; border-collapse: collapse; font-size: 13px;
    }
    .ob-table thead tr {
      background: var(--surface2); position: sticky; top: 0; z-index: 1;
    }
    .ob-table th {
      padding: 9px 12px; text-align: left; font-size: 12px; font-weight: 700;
      color: var(--text2); border-bottom: 2px solid var(--border);
      white-space: nowrap;
    }
    .ob-table td {
      padding: 10px 12px; border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .ob-table tbody tr:hover { background: var(--primary-light); }
    .ob-table .td-phone { font-weight: 700; color: var(--primary); white-space: nowrap; }
    .ob-table .td-msg {
      max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      color: var(--text);
    }
    .ob-table .td-agent { white-space: nowrap; font-size: 12px; color: var(--text2); }
    .ob-table .td-time { white-space: nowrap; font-size: 12px; color: var(--text2); }
    .ob-table .td-actions { white-space: nowrap; }
    .ob-open-btn {
      font-size: 12px; padding: 4px 10px; border-radius: 6px;
      background: var(--primary-light); color: var(--primary);
      border: 1px solid var(--primary); cursor: pointer; font-weight: 600;
      transition: .15s;
    }
    .ob-open-btn:hover { background: var(--primary); color: #fff; }
    .ob-empty {
      text-align: center; padding: 50px 20px;
      font-size: 14px; color: var(--text2);
    }
    .ob-empty .ob-empty-icon { font-size: 40px; margin-bottom: 10px; }

    /* ── Slash-picker de plantillas en chat ──────────────────────────── */
    #slash-picker {
      position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
      background: var(--surface); border: 1.5px solid var(--primary);
      border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
      max-height: 260px; overflow: hidden; display: none;
      flex-direction: column; z-index: 50;
    }
    #slash-picker.open { display: flex; }
    .sp-header {
      padding: 7px 12px; font-size: 11.5px; font-weight: 700;
      color: var(--primary); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0; background: var(--primary-light);
    }
    .sp-list { overflow-y: auto; flex: 1; }
    .sp-item {
      padding: 9px 14px; cursor: pointer;
      border-bottom: 1px solid var(--border); transition: .12s;
      display: flex; flex-direction: column; gap: 1px;
    }
    .sp-item:last-child { border-bottom: none; }
    .sp-item:hover, .sp-item.selected { background: var(--primary-light); }
    .sp-item-name { font-weight: 700; font-size: 13px; color: var(--text); display: flex; gap: 8px; align-items: center; }
    .sp-item-name .sp-cat { font-size: 10.5px; background: var(--primary-light); border: 1px solid var(--border); color: var(--primary); border-radius: 8px; padding: 1px 7px; font-weight: 400; }
    .sp-item-preview { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sp-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--text2); }
    /* ── Toast de notificación especial (diff al toast normal) ──────────── */
    #notif-bar {
      position: fixed; top: 56px; left: 16px; z-index: 9999;
      display: flex; flex-direction: column; gap: 8px; pointer-events: none;
    }
    /* ── Barra de sesiones pendientes (siempre visible) ───────────────── */
    #pending-alerts {
      display: none; background: #fff8e1; border-bottom: 2px solid #f9ab00;
      padding: 7px 16px; gap: 8px; flex-wrap: wrap; align-items: center;
      flex-shrink: 0;
    }
    #pending-alerts.has-pending { display: flex; }
    .pa-header { font-size: 12px; font-weight: 700; color: #966000; white-space: nowrap; }
    .pa-chips  { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
    .pa-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: #fff; border: 1.5px solid #f9ab00; color: #6d4000;
      border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600;
      cursor: pointer; white-space: nowrap; transition: .15s; max-width: 240px;
    }
    .pa-chip:hover { background: #f9ab00; color: #4a2800; }
    .pa-chip .pa-name { overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
    .pa-chip-count {
      background: #c5221f; color: #fff; border-radius: 10px;
      padding: 1px 7px; font-size: 11px; font-weight: 700; min-width: 20px;
      text-align: center; flex-shrink: 0;
    }
    /* badge de pendientes en tarjeta de sesión */
    .session-pending-badge {
      display: inline-flex; align-items: center; gap: 4px;
      background: #fce8e6; color: #c5221f; border: 1px solid #f4b9b2;
      border-radius: 20px; padding: 2px 9px; font-size: 11.5px; font-weight: 700;
      margin-top: 5px;
    }
    .notif-card {
      background: #1a2340; color: #fff; border-radius: 12px;
      padding: 12px 16px; min-width: 280px; max-width: 340px;
      box-shadow: 0 6px 24px rgba(0,0,0,.35);
      display: flex; gap: 12px; align-items: flex-start;
      animation: notifIn .3s ease; pointer-events: all;
      cursor: pointer; border-left: 4px solid var(--primary);
    }
    .notif-card.notif-warn { border-left-color: #f9ab00; }
    .notif-card .notif-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
    .notif-card .notif-body { flex: 1; min-width: 0; }
    .notif-card .notif-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
    .notif-card .notif-msg { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notif-card .notif-time { font-size: 11px; opacity: .6; margin-top: 3px; }
    .notif-card .notif-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 16px; opacity: .7; padding: 0; flex-shrink: 0; }
    @keyframes notifIn { from { transform: translateX(110%); opacity:0 } to { transform: translateX(0); opacity:1 } }
    /* ── Plantillas: layout dos columnas ─────────────────────────────── */
    .tpl-page {
      display: grid;
      grid-template-columns: 320px 1fr;
      height: calc(100vh - 101px);
      overflow: hidden;
    }
    /* --- Columna izquierda: formulario (mismo estilo que .sidebar global) --- */
    .tpl-sidebar {
      background: var(--surface); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; overflow: hidden;
    }
    .tpl-sidebar-header {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      font-size: 15px; font-weight: 700; color: var(--primary);
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      flex-shrink: 0;
    }
    .tpl-form-body {
      flex: 1; overflow-y: auto; padding: 16px 20px;
      display: flex; flex-direction: column; gap: 16px;
    }
    .tpl-shared-row {
      display: flex; align-items: center; gap: 10px;
      background: var(--primary-light); border: 1.5px solid var(--primary);
      border-radius: 8px; padding: 11px 14px;
    }
    .tpl-shared-row input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary); }
    .tpl-shared-row label { margin: 0 !important; text-transform: none !important; font-size: 13px; cursor: pointer; font-weight: 600; color: var(--primary-dark); letter-spacing: 0 !important; }
    .tpl-form-actions { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
    /* --- Columna derecha: lista --- */
    .tpl-main {
      display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
    }
    .tpl-toolbar {
      padding: 10px 16px; border-bottom: 1.5px solid var(--border);
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      background: var(--surface); flex-shrink: 0;
    }
    .tpl-search {
      flex: 1; min-width: 140px; border: 1.5px solid var(--border);
      border-radius: 8px; padding: 7px 12px; font-size: 13px; outline: none;
      background: var(--bg);
    }
    .tpl-search:focus { border-color: var(--primary); }
    .tpl-filter-sel {
      width: 100%; border: 1.5px solid var(--border); border-radius: 8px;
      padding: 8px 12px; font-size: 13px; outline: none;
      background: var(--surface); color: var(--text);
    }
    .tpl-filter-sel:focus { border-color: var(--primary); }
    /* ── Drawer de filtros ─────────────────────────────────────────── */
    #tpl-filter-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,.30); z-index: 1100;
    }
    #tpl-filter-overlay.open { display: block; }
    #tpl-filter-drawer {
      position: fixed; top: 0; right: -320px; width: 300px; height: 100vh;
      background: var(--surface); box-shadow: -4px 0 24px rgba(0,0,0,.18);
      z-index: 1101; display: flex; flex-direction: column;
      transition: right .26s cubic-bezier(.4,0,.2,1);
      border-radius: 14px 0 0 14px;
    }
    #tpl-filter-drawer.open { right: 0; }
    .tpl-drawer-header {
      padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .tpl-drawer-header span { font-size: 15px; font-weight: 700; color: var(--primary); }
    .tpl-drawer-body {
      flex: 1; overflow-y: auto; padding: 20px;
      display: flex; flex-direction: column; gap: 18px;
    }
    .tpl-drawer-footer {
      padding: 14px 20px; border-top: 1px solid var(--border);
      display: flex; gap: 8px; flex-shrink: 0;
    }
    .tpl-filter-btn {
      position: relative; padding: 7px 14px; border-radius: 8px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-size: 13px; cursor: pointer; font-weight: 600;
      display: flex; align-items: center; gap: 6px; transition: .15s;
      white-space: nowrap;
    }
    .tpl-filter-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
    .tpl-filter-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
    .tpl-filter-badge {
      position: absolute; top: -6px; right: -6px;
      background: var(--primary); color: #fff;
      border-radius: 50%; width: 18px; height: 18px;
      font-size: 10px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .tpl-count {
      font-size: 12px; color: var(--text2);
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 20px; padding: 3px 10px; white-space: nowrap;
    }
    .tpl-grid {
      flex: 1; overflow-y: auto; padding: 20px 24px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      align-content: start;
      align-items: start;
    }
    /* --- Cards --- */
    .tpl-card {
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 14px; width: 100%; height: 250px;
      box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: .18s;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .tpl-card:hover {
      border-color: var(--primary);
      box-shadow: 0 6px 24px rgba(26,115,232,.14);
      transform: translateY(-2px);
    }
    .tpl-card-head {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      background: linear-gradient(135deg, var(--surface) 70%, var(--primary-light));
      min-height: 50px;
    }
    .tpl-card-name {
      font-weight: 700; font-size: 14px; color: var(--text);
      flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      white-space: normal; word-break: break-word;
    }
    .tpl-card-cat {
      font-size: 11px; background: var(--primary); color: #fff;
      border-radius: 20px; padding: 2px 10px; white-space: nowrap; flex-shrink: 0; font-weight: 700;
      max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    }
    .tpl-card-body { padding: 12px 16px; flex: 1; }
    .tpl-card-text {
      font-size: 13px; color: var(--text2); line-height: 1.55;
      display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
      overflow: hidden; white-space: pre-wrap; word-break: break-word;
      max-height: 110px;
    }
    .tpl-card-footer {
      padding: 8px 16px 12px; margin-top: auto;
      border-top: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 6px;
      background: var(--surface2);
    }
    .tpl-card-footer-top {
      display: flex; align-items: center; gap: 6px; overflow: hidden;
    }
    .tpl-card-footer-btns {
      display: flex; align-items: center; gap: 6px; justify-content: flex-end;
    }
    .tpl-card-author { font-size: 11.5px; color: var(--text2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tpl-shared-badge {
      font-size: 10.5px; background: #e8f5e9; color: #2e7d32;
      border: 1px solid #a5d6a7; border-radius: 20px; padding: 2px 8px; font-weight: 700;
      white-space: nowrap;
    }
    .tpl-use-btn {
      font-size: 12px; padding: 5px 12px; border-radius: 8px;
      background: var(--primary); color: #fff; border: none;
      cursor: pointer; font-weight: 700; transition: .15s; white-space: nowrap;
      flex-shrink: 0;
    }
    .tpl-use-btn:hover { background: var(--primary-dark); }
    .tpl-edit-btn {
      font-size: 12px; padding: 5px 11px; border-radius: 8px;
      border: 1.5px solid var(--border); background: var(--surface);
      cursor: pointer; transition: .15s; font-weight: 600; white-space: nowrap; flex-shrink: 0;
    }
    .tpl-del-btn {
      font-size: 13px; padding: 4px 9px; border-radius: 8px;
      border: 1.5px solid var(--border); background: var(--surface);
      cursor: pointer; transition: .15s; flex-shrink: 0;
    }
    .tpl-edit-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
    .tpl-del-btn:hover  { border-color: var(--danger);  background: #fce8e6; }
    @media (max-width: 1100px) {
      .tpl-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 900px) {
      .tpl-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
      .tpl-sidebar { border-right: none; border-bottom: 1px solid var(--border); max-height: 55vh; }
      .tpl-grid { grid-template-columns: repeat(2, 1fr); padding: 12px 16px; gap: 12px; }
    }
    @media (max-width: 540px) {
      .tpl-grid { grid-template-columns: 1fr; padding: 10px 12px; }
      #tpl-filter-drawer { width: 88vw; }
    }
    /* floating template picker in chat */
    #tpl-picker {
      position: absolute; bottom: 100%; left: 0; right: 0;
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 10px 10px 0 0; box-shadow: var(--shadow-lg);
      max-height: 280px; overflow-y: auto; z-index: 20; display: none;
      flex-direction: column;
    }
    #tpl-picker.open { display: flex; }
    .tpl-picker-header {
      padding: 8px 12px; font-size: 12px; font-weight: 700;
      color: var(--primary); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .tpl-picker-search {
      margin: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px;
      padding: 6px 10px; font-size: 12.5px; outline: none;
      flex-shrink: 0;
    }
    .tpl-picker-search:focus { border-color: var(--primary); }
    .tpl-picker-item {
      padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
      transition: .12s;
    }
    .tpl-picker-item:last-child { border-bottom: none; }
    .tpl-picker-item:hover { background: var(--primary-light); }
    .tpl-picker-item .tpi-name {
      font-weight: 700; font-size: 12.5px; color: var(--text); margin-bottom: 2px;
    }
    .tpl-picker-item .tpi-text {
      font-size: 12px; color: var(--text2); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .tpl-picker-empty {
      padding: 20px; text-align: center; font-size: 13px; color: var(--text2);
    }
    /* ── RESPONSIVE ────────────────────────────────────────── */

    /* Tabs siempre con scroll horizontal */
    .top-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; flex-wrap:nowrap; }
    .top-nav::-webkit-scrollbar { height:3px; }
    .top-nav::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
    .nav-tab { white-space:nowrap; flex-shrink:0; }

    /* ── Tablet (≤960px) ──────────────────────────────────── */
    @media (max-width:960px) {
      .page { grid-template-columns:1fr; height:auto; }
      .sidebar { max-height:52vh; }
      .agents-page { flex-direction:column; }
      .agents-col { max-width:100% !important; }
    }

    /* ── Tablet pequeña / móvil grande (≤768px) ──────────── */
    @media (max-width:768px) {
      /* Header */
      header { padding:0 12px; height:54px; }
      header h1 { font-size:14px; gap:5px; }
      header a.nav-link:not([onclick]) { display:none; }
      header .header-actions #auth-user-display { font-size:11.5px; padding:3px 7px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

      /* Nav tabs */
      .top-nav { padding:7px 10px 0; gap:2px; }
      .nav-tab { padding:8px 12px; font-size:12.5px; }

      /* Layout principal */
      .page { height:auto; }
      .sidebar { max-height:none; border-right:none; border-bottom:1px solid var(--border); }

      /* Formulario */
      .main-header { padding:12px 14px 0; flex-direction:column; align-items:stretch; }
      .search-bar { max-width:100%; }
      .stats-row { padding:10px 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
      .stat-card { min-width:unset; }
      .hint-box { margin:0 14px 8px; font-size:12px; }
      .responses-grid { padding:0 14px 20px; }

      /* Formulario respuesta */
      .row-2 { grid-template-columns:1fr; }
      .type-tabs { grid-template-columns:repeat(3,1fr); }
      .type-tab, .type-tab:nth-child(4), .type-tab:nth-child(5) { grid-column:span 1 !important; }
      .type-tab .tab-desc { display:none; }

      /* Agentes */
      .agents-page { padding:14px; gap:14px; }
      .agent-card { flex-wrap:wrap; gap:8px; }

      /* Chat panel - ancho completo */
      #chat-panel { width:100vw !important; right:-100vw; }
      #chat-panel.open { right:0; }

      /* Historial - controles */
      #history-search { width:100% !important; }

      /* Historial/Flujo - altura automática en tablet */
      #section-history > div,
      #section-flow > div { height:auto !important; min-height:calc(100vh - 110px); }
      #flow-scroll { height:calc(100vh - 200px) !important; }
    }

    /* ── Móvil (≤480px) ──────────────────────────────────── */
    @media (max-width:480px) {
      header { height:50px; padding:0 10px; }
      header h1 { font-size:13px; gap:4px; }
      header h1 .badge { display:none; }
      header .header-actions { gap:4px; }
      header .header-actions #auth-user-display { display:none; }
      header .nav-link[onclick] { padding:5px 9px; font-size:12px; }

      .nav-tab { padding:7px 10px; font-size:11.5px; }

      /* Sidebar y formulario */
      .form-body { padding:12px; gap:12px; }
      .sidebar-header { padding:12px 14px; font-size:14px; }
      .form-actions { padding:10px 14px; gap:6px; }
      .form-actions .btn { padding:10px 8px; font-size:13px; }

      /* Type tabs: 2 por fila */
      .type-tabs { grid-template-columns:1fr 1fr; gap:5px; }
      .type-tab { padding:8px 4px; }
      .type-tab .tab-icon { font-size:18px; }
      .type-tab .tab-label { font-size:11px; }

      /* Stats: 2 columnas */
      .stats-row { grid-template-columns:1fr 1fr; gap:6px; padding:8px 10px; }
      .stat-val { font-size:19px; }
      .stat-icon { width:34px; height:34px; font-size:17px; }
      .stat-lbl { font-size:10px; }

      /* Cards respuesta */
      .resp-card-header { gap:8px; padding:12px 12px 8px; }
      .resp-reply { font-size:13.5px; }
      .resp-actions { flex-wrap:wrap; gap:4px; }
      .resp-card-meta { padding:0 12px 10px; }
      .resp-btns-preview { padding:0 12px 10px; }

      /* Hint box */
      .hint-box { font-size:11.5px; margin:0 10px 8px; padding:10px 12px; }
      .responses-grid { padding:0 10px 16px; }
      .main-header { padding:10px 10px 0; }
      .main-title { font-size:16px; }

      /* Agentes */
      .agents-page { padding:10px; gap:10px; }
      .agents-col { padding:14px; }
      .agent-card { padding:10px 12px; }
      .agent-name { font-size:14px; }
      .sessions-grid { grid-template-columns: 1fr; }
      .session-card { gap:10px; padding:12px; }
      .session-avatar { width:38px; height:38px; font-size:15px; }
      .session-row { flex-direction:column; align-items:flex-start; gap:4px; }

      /* Historial / Flujo */
      #section-history > div,
      #section-flow > div { padding:10px !important; }

      /* Flow zoom - controles apilados */
      #section-flow > div > div:first-child { flex-direction:column; align-items:flex-start !important; }

      /* Toast */
      #toast-container { right:8px; left:8px; top:58px; }
      .toast { min-width:auto; font-size:12.5px; }

      /* Botones generales */
      .btn { padding:7px 11px; font-size:13px; }
      .btn-sm { padding:5px 9px; font-size:11.5px; }
    }