/* ═══════════════════════════════════════════════════════════════════════
   HaceloApp del dueño — /haceloapp al estilo WhatsApp Web (opción 1a).
   Riel + lista con selector de agente + panel con el hilo embebido.

   Los colores salen de las variables de webchat/chat.css (--surf, --surf2,
   --txt, --txt2, --accent, --line, --icon, --font). Acá sólo se declaran la
   paleta de avatares (inline, --ow-ava), el verde de los chips activos y el
   ámbar de "derivada", que no existen como token.
   ═══════════════════════════════════════════════════════════════════════ */

.ow-root {
    position: fixed; inset: 0;
    display: grid;
    grid-template-columns: 62px 400px minmax(0, 1fr);
    background: var(--surf);
    font-family: var(--font);
    color: var(--txt);
    overflow: hidden;
}

/* ── Riel ───────────────────────────────────────────────────────────── */
.ow-riel {
    background: var(--surf2);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 0; gap: 6px;
}
.ow-riel-btn {
    position: relative;
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--icon); background: none; border: 0; cursor: pointer;
    text-decoration: none;
}
.ow-riel-btn:hover { background: color-mix(in srgb, var(--txt) 7%, transparent); }
.ow-riel-btn.activo { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.ow-riel-fin { margin-top: auto; }
.ow-riel-btn b {
    position: absolute; top: -1px; right: -2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--accent); color: #fff;
    font-size: 10.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--surf2);
}

/* ── Lista ──────────────────────────────────────────────────────────── */
.ow-lista {
    background: var(--surf);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; min-width: 0;
}
.ow-lista-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 17px 18px 10px;
}
.ow-titulo { margin: 0; flex: 1; font-size: 23px; font-weight: 700; letter-spacing: -.01em; color: var(--txt); }
/* Volver al panel — solo en el teléfono, donde el riel está oculto. */
.ow-volver {
    display: none; width: 34px; height: 34px; margin-right: 4px;
    border-radius: 50%; color: var(--icon);
    align-items: center; justify-content: center; flex-shrink: 0;
}
.ow-volver:hover { background: color-mix(in srgb, var(--txt) 7%, transparent); }
.ow-head-acciones { display: flex; align-items: center; gap: 6px; }
.ow-iconbtn {
    width: 34px; height: 34px; border-radius: 50%; border: 0; background: none;
    color: var(--icon); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ow-iconbtn:hover { background: color-mix(in srgb, var(--txt) 7%, transparent); }

/* Selector de agente */
.ow-ag-caja { position: relative; padding: 0 14px 10px; }
.ow-ag-btn {
    width: 100%; display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surf2); cursor: pointer; text-align: left;
    font-family: inherit; color: var(--txt);
}
.ow-ag-btn:hover { background: color-mix(in srgb, var(--txt) 6%, var(--surf2)); }
.ow-ag-ava { width: 34px; height: 34px; font-size: 12.5px; flex: 0 0 auto; }
.ow-ag-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ow-ag-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 9.6px; font-weight: 800; letter-spacing: .14em; color: var(--txt2);
}
.ow-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: owPunto 2.4s ease-in-out infinite; }
@keyframes owPunto { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
.ow-ag-nombre {
    font-size: 14.5px; font-weight: 600; color: var(--txt);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-ag-sub { font-size: 11.5px; color: var(--txt2); white-space: nowrap; }
.ow-ag-chev { color: var(--icon); display: flex; flex: 0 0 auto; }

/* Un solo agente: membrete, no control. */
.ow-ag-caja.ow-solo .ow-ag-btn { cursor: default; pointer-events: none; border-color: transparent; }
.ow-ag-caja.ow-solo .ow-ag-chev { display: none; }

.ow-ag-menu {
    position: absolute; left: 14px; right: 14px; top: 100%; z-index: 20;
    background: var(--surf); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 16px 34px rgba(17, 27, 33, .18);
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
    max-height: 60vh; overflow: auto;
}
.ow-ag-menu-tit { padding: 8px 10px 6px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--txt2); }
.ow-ag-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 10px; background: none;
    cursor: pointer; text-align: left; font-family: inherit; color: var(--txt);
}
.ow-ag-item:hover { background: color-mix(in srgb, var(--txt) 6%, transparent); }
.ow-ag-item.activo { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ow-ag-item .ow-ava { width: 32px; height: 32px; font-size: 12px; }
.ow-ag-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ow-ag-item-nombre { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-ag-item-sub { font-size: 11.5px; color: var(--txt2); }
.ow-ag-item-badge {
    font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    white-space: nowrap; background: var(--surf2); color: var(--txt2);
}
.ow-ag-item-badge.espera { background: #D9F2CC; color: #0b6b43; }

/* Buscador y chips */
.ow-buscar {
    margin: 0 14px 10px; display: flex; align-items: center; gap: 9px;
    background: var(--surf2); border-radius: 999px; padding: 8px 14px; color: var(--icon);
}
.ow-buscar input {
    flex: 1; border: 0; background: none; outline: none;
    font-family: inherit; font-size: 14px; color: var(--txt);
}
.ow-buscar input::placeholder { color: var(--txt2); }
.ow-chips { display: flex; gap: 8px; padding: 0 14px 12px; }
.ow-chip {
    font-size: 13px; font-weight: 500; padding: 5px 13px; border-radius: 999px;
    background: var(--surf2); border: 1px solid var(--line); color: var(--txt);
    cursor: pointer; font-family: inherit;
}
.ow-chip b { color: var(--accent); font-weight: 700; }
.ow-chip.activo { background: #D9F2CC; border-color: #BFE5AC; color: #0b6b43; font-weight: 600; }
html[data-theme="dark"] .ow-chip.activo { background: #144D37; border-color: #1c6a4c; color: #7ADFB2; }

/* Filas */
.ow-filas { flex: 1; overflow-y: auto; border-top: 1px solid var(--line); }
.ow-fila {
    width: 100%; display: flex; align-items: center; gap: 13px;
    padding: 11px 15px; border: 0; border-left: 3px solid transparent;
    background: var(--surf); cursor: pointer; text-align: left; font-family: inherit;
}
.ow-fila:hover { background: color-mix(in srgb, var(--txt) 4%, var(--surf)); }
.ow-fila.espera { background: color-mix(in srgb, var(--accent) 5%, var(--surf)); }
.ow-fila.abierta { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surf)); }
.ow-ava {
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
    background: var(--ow-ava, var(--accent)); color: #fff;
    font-size: 16px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.ow-fila-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ow-fila-top { display: flex; align-items: baseline; gap: 8px; }
.ow-fila-nombre { font-size: 15.5px; font-weight: 500; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ow-fila-hora { font-size: 11.5px; color: var(--txt2); white-space: nowrap; }
.ow-fila.espera .ow-fila-nombre { font-weight: 700; }
.ow-fila.espera .ow-fila-hora { color: var(--accent); font-weight: 700; }
.ow-fila-bottom { display: flex; align-items: center; gap: 7px; }
.ow-fila-icono { display: flex; color: var(--txt2); flex: 0 0 auto; }
.ow-fila-preview { font-size: 13.5px; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ow-badge {
    font-size: 10.5px; font-weight: 700; color: #fff; background: var(--accent);
    min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.ow-vacio { padding: 34px 22px; text-align: center; font-size: 13.5px; color: var(--txt2); line-height: 1.55; }

/* ── Panel ──────────────────────────────────────────────────────────── */
.ow-panel { position: relative; min-width: 0; background: var(--wc-wall, #EFE7DE); }
html[data-theme="dark"] .ow-panel { background: #0B141A; }
.ow-frame { width: 100%; height: 100%; border: 0; display: block; }
.ow-panel-vacio {
    height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 11px;
    text-align: center; padding: 0 40px;
}
.ow-panel-icono {
    width: 56px; height: 56px; border-radius: 50%; background: var(--surf);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); box-shadow: 0 2px 6px rgba(11, 20, 26, .1);
}
.ow-panel-vacio h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--txt); }
.ow-panel-vacio p { margin: 0; max-width: 330px; font-size: 13.5px; line-height: 1.55; color: var(--txt2); }

/* ── Teléfono: un solo panel, la lista ─────────────────────────────── */
@media (max-width: 900px) {
    .ow-root { grid-template-columns: 1fr; }
    .ow-riel, .ow-panel { display: none; }
    .ow-lista { border-right: 0; }
    .ow-lista-head { padding: 14px 16px 8px; }
    .ow-volver { display: flex; }
}

/* Embebido en el workspace de Canales (/conexiones → iframe ?embed=1, 10/9): sin riel. */
.ow-root.ow-embed { grid-template-columns: 400px minmax(0, 1fr); }
.ow-root.ow-embed .ow-riel { display: none; }