/* ════════════════════════════════════════════════════════════════════════════════════
   ASISTENTE — el panel de chat de la oficina (14/09/2026)

   Mismo criterio que el resto: tokens de main.css, tarjetas con borde suave, botón
   principal en naranja. La lista de conversaciones a la izquierda, el chat a la derecha;
   en el teléfono la lista se esconde (el botón "+ Nueva" alcanza) y el chat ocupa todo.
   ════════════════════════════════════════════════════════════════════════════════════ */
.asi-estado{font-size:.78rem;color:var(--color-muted);padding:.3rem .6rem;border:1px solid var(--color-border);
  border-radius:999px;background:#fff}
.asi-estado.ok{color:var(--color-success);border-color:#bbf7d0;background:#f0fdf4}
.asi-estado.mock{color:#3730a3;border-color:#c7d2fe;background:#e0e7ff}
.asi-estado.error{color:var(--color-danger);border-color:#fca5a5;background:#fef2f2}

.asi-aviso{margin-bottom:1rem;padding:.7rem .9rem;border-radius:8px;font-size:.88rem;line-height:1.5;
  background:#fef2f2;border:1px solid #fca5a5;color:#7f1d1d}
.asi-aviso code{background:#fff;padding:.05rem .3rem;border-radius:4px}

.asi-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1rem;align-items:stretch;
  height:calc(100vh - 150px);min-height:480px}
@media(max-width:900px){.asi-layout{grid-template-columns:1fr;height:calc(100vh - 130px)}.asi-lista{display:none}}

.asi-lista{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;
  box-shadow:var(--shadow);padding:.9rem;overflow:auto;min-height:0}
.asi-lista h3{margin:0 0 .6rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--color-muted)}
.asi-lista ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.asi-lista li{padding:.5rem .6rem;border-radius:6px;cursor:pointer;font-size:.85rem;line-height:1.3;
  border:1px solid transparent}
.asi-lista li:hover{background:#f7f9fd}
.asi-lista li.activa{background:#eef2fb;border-color:#c7d2fe}
.asi-lista li .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text)}
.asi-lista li .f{display:block;font-size:.72rem;color:var(--color-muted);margin-top:.1rem}
.asi-lista .vacio{font-size:.82rem;color:var(--color-muted);padding:.4rem .2rem}

.asi-chat{display:flex;flex-direction:column;min-height:0;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.asi-mensajes{flex:1;min-height:0;overflow:auto;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;
  background:#f8fafc}
.asi-bienvenida{margin:auto;max-width:520px;text-align:center;color:var(--color-muted);font-size:.92rem;line-height:1.55}
.asi-bienvenida p{margin:0 0 .8rem}
.asi-bienvenida b{color:var(--color-primary)}
.asi-sugerencias{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.asi-sugerencias button{font:inherit;font-size:.82rem;padding:.35rem .75rem;border:1px solid var(--color-border);
  border-radius:999px;background:#fff;color:var(--color-primary);cursor:pointer}
.asi-sugerencias button:hover{border-color:var(--color-primary);background:#eef2fb}

.asi-msg{max-width:78%;padding:.6rem .85rem;border-radius:12px;font-size:.92rem;line-height:1.5;white-space:pre-wrap;
  overflow-wrap:anywhere}
.asi-msg.user{align-self:flex-end;background:var(--color-primary);color:#fff;border-bottom-right-radius:4px}
.asi-msg.assistant{align-self:flex-start;background:#fff;border:1px solid var(--color-border);color:var(--color-text);
  border-bottom-left-radius:4px}
.asi-msg.error{align-self:flex-start;background:#fef2f2;border:1px solid #fca5a5;color:#7f1d1d}
.asi-msg .herr{display:block;margin-top:.4rem;font-size:.68rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.4px}
.asi-msg.pensando{color:var(--color-muted);font-style:italic}
.asi-msg.pensando::after{content:'…';animation:asiPuntos 1.2s steps(4,end) infinite}
@keyframes asiPuntos{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

.asi-pendiente{margin:0 1.1rem;padding:.55rem .8rem;border-radius:8px;font-size:.84rem;
  background:#fff8e6;border:1px solid #e8c96a;color:#6b5a20}
.asi-pendiente b{color:#4a3d10}

.asi-entrada{display:flex;gap:.6rem;padding:.8rem 1.1rem;border-top:1px solid var(--color-border);background:#fff}
.asi-entrada textarea{flex:1;resize:none;font:inherit;font-size:.92rem;padding:.6rem .75rem;border:1px solid var(--color-border);
  border-radius:8px;max-height:140px;line-height:1.4}
.asi-entrada textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(42,54,97,.12)}
.btn-enviar{padding:.6rem 1.1rem;border:0;border-radius:8px;background:var(--color-accent);color:#fff;font:inherit;
  font-weight:600;cursor:pointer;white-space:nowrap}
.btn-enviar:hover{background:#d4573a}
.btn-enviar:disabled{opacity:.6;cursor:wait}

/* ── Pestañas del lateral: conversaciones / teléfonos (15/09/2026) ───────────────── */
.asi-tabs{display:flex;gap:.25rem;margin-bottom:.7rem;border-bottom:1px solid var(--color-border)}
.asi-tabs button{flex:1;font:inherit;font-size:.78rem;font-weight:600;padding:.4rem .2rem;border:0;background:none;
  color:var(--color-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.asi-tabs button.activa{color:var(--color-primary);border-bottom-color:var(--color-accent)}
.asi-ayuda{font-size:.76rem;color:var(--color-muted);line-height:1.45;margin:0 0 .7rem}
#asi-vinculos{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.4rem}
#asi-vinculos li{border:1px solid var(--color-border);border-radius:8px;padding:.5rem .6rem;font-size:.82rem;
  display:flex;align-items:flex-start;gap:.4rem}
#asi-vinculos li .v-datos{flex:1;min-width:0}
#asi-vinculos li .v-canal{font-weight:600;color:var(--color-primary);text-transform:capitalize}
#asi-vinculos li .v-detalle{display:block;font-size:.72rem;color:var(--color-muted);margin-top:.1rem}
#asi-vinculos li.pendiente{background:#fff8e6;border-color:#e8c96a}
#asi-vinculos .v-baja{background:none;border:0;color:#94a3b8;cursor:pointer;font-size:.9rem;line-height:1;padding:.1rem}
#asi-vinculos .v-baja:hover{color:var(--color-danger)}
.asi-vincular{display:flex;flex-direction:column;gap:.4rem}
.asi-vincular label{font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:var(--color-muted);font-weight:600}
.asi-vincular select,.asi-vincular input{font:inherit;font-size:.82rem;padding:.4rem .5rem;border:1px solid var(--color-border);
  border-radius:6px;background:#fff;width:100%}
.btn-vincular{font:inherit;font-size:.82rem;font-weight:600;padding:.45rem .7rem;border:1px dashed #b9c2d0;border-radius:8px;
  background:#fff;color:var(--color-muted);cursor:pointer}
.btn-vincular:hover{border-color:var(--color-primary);color:var(--color-primary)}
.asi-codigo{margin-top:.7rem;padding:.6rem .7rem;border-radius:8px;background:#eef2fb;border:1px solid #c7d2fe;
  font-size:.8rem;color:#312e81;line-height:1.5}
.asi-codigo b.num{display:block;font-size:1.5rem;letter-spacing:.2em;color:var(--color-primary);text-align:center;margin:.3rem 0}

/* ── Desde dónde se escribe: el sistema o el simulador de teléfono ───────────────── */
.asi-modo{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:.5rem 1.1rem 0;font-size:.76rem;color:var(--color-muted)}
.asi-modo button{font:inherit;font-size:.76rem;padding:.2rem .6rem;border:1px solid var(--color-border);border-radius:999px;
  background:#fff;color:var(--color-muted);cursor:pointer}
.asi-modo button.activa{border-color:var(--color-primary);background:#eef2fb;color:var(--color-primary);font-weight:600}
.asi-modo-nota{color:var(--cot-ambar,#b45309)}
/* En modo teléfono se ve distinto: lo que se escribe no está pasando por la pantalla. */
.asi-chat.telefono .asi-mensajes{background:#eef2f7}
.asi-chat.telefono .asi-entrada{background:#f8fafc;border-top-color:#c7d2fe}
.asi-msg.tel.user{background:var(--cot-verde,#15803d)}

/* ════════════════════════════════════════════════════════════════════════════════════
   EL ASISTENTE EN EL TELÉFONO (15/09/2026)

   Felipe: *"andá armando una versión que ande cómoda para celulares, iOS y Android"*.
   Todo lo de acá cuelga de `body.pagina-asistente`, así que NO toca ninguna de las otras
   pantallas: es la misma página, con otra forma abajo de 700px.

   Las cuatro cosas que hacen que un chat se sienta bien en un teléfono:

    1. LA PANTALLA ENTERA, Y QUE SOLO SCROLLEE EL CHAT. `100vh` en iOS mide la pantalla
       CON la barra del navegador escondida, así que la barra de escribir queda tapada.
       Se usa `100dvh` y, mejor todavía, la variable `--vh-real` que el JS saca de
       `visualViewport`: esa sí achica cuando se abre el teclado.
    2. EL TECLADO NO PUEDE TAPAR LO QUE ESCRIBÍS. Con el alto real, la barra de entrada
       queda siempre arriba del teclado sin trucos de scroll.
    3. NADA DE ZOOM AL TOCAR EL CUADRO DE TEXTO. Safari hace zoom si la letra del input
       mide menos de 16px. Por eso el textarea va en 16px justos en el teléfono.
    4. EL MENÚ Y EL LATERAL NO ROBAN ANCHO. En el teléfono el menú del sistema y la lista
       de conversaciones/teléfonos salen como hojas que se abren con un botón; mientras
       están cerradas, el chat tiene los 390px enteros.

   La barra de gestos del iPhone se respeta con `env(safe-area-inset-bottom)` (y para que
   eso valga algo, el <head> lleva `viewport-fit=cover`).
   ════════════════════════════════════════════════════════════════════════════════════ */
.asi-solo-tel { display: none; }
.asi-corto { display: none; }   /* el texto corto de los botones, solo para el teléfono */
.asi-icono{font:inherit;font-size:1.15rem;line-height:1;padding:.35rem .55rem;border:1px solid var(--color-border);
  border-radius:8px;background:#fff;color:var(--color-primary);cursor:pointer}
.asi-fondo{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55}
.asi-cerrar-panel{position:absolute;top:.5rem;right:.6rem;border:0;background:none;font-size:1.1rem;line-height:1;
  color:var(--color-muted);cursor:pointer;padding:.2rem}

/* El lateral ya se escondía abajo de 900px — y con él la pestaña Teléfonos, que es donde
   se sacan los códigos de vinculación. Desde acá vuelve, como hoja que se abre con el
   botón ▤ de la cabecera. Va en su propio bloque (900, no 700) para que en una tablet o
   una ventana angosta tampoco quede inalcanzable. */
@media (max-width: 900px) {
  #asi-panel, #asi-cerrar-panel { display: inline-flex; align-items: center; justify-content: center }
  /* ── Conversaciones y teléfonos: hoja desde abajo ────────────────────────────── */
  .pagina-asistente .asi-lista { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    max-height: 78%; min-height: 42%; overflow: auto;
    border-radius: 14px 14px 0 0; border-bottom: 0; padding: 1rem .9rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%); transition: transform .22s ease; }
  .pagina-asistente.panel-abierto .asi-lista { transform: none }
  .pagina-asistente .asi-lista li { padding: .7rem .6rem }   /* dedos, no mouse */
  .pagina-asistente .asi-tabs button { padding: .6rem .2rem; font-size: .85rem }
  .pagina-asistente .asi-vincular select,
  .pagina-asistente .asi-vincular input { font-size: 16px; padding: .55rem .6rem }
}

/* Acá empieza el teléfono de verdad. La condición tiene dos patas a propósito:
   · hasta 700px de ancho — el teléfono parado;
   · hasta 900×520 — el teléfono ACOSTADO, donde sobra ancho pero el alto es el de un
     teléfono; sin esta segunda pata la barra de escribir se iba abajo del borde. */
@media (max-width: 700px), (max-width: 900px) and (max-height: 520px) {
  .asi-solo-tel { display: inline-flex; align-items: center; justify-content: center; }

  /* ── El armazón: alto real, y el único que scrollea es el chat ───────────────── */
  body.pagina-asistente { overflow: hidden; }
  .pagina-asistente .app-layout { height: 100dvh; height: var(--vh-real, 100dvh); min-height: 0; overflow: hidden; }
  .pagina-asistente .page-content { min-height: 0; }
  .pagina-asistente .page-header { padding: .55rem .7rem; gap: .5rem; flex-wrap: nowrap; flex-shrink: 0;
    padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
  .pagina-asistente .page-header h1 { font-size: 1rem; flex: 1; min-width: 0 }
  .pagina-asistente .period-selector { gap: .4rem }
  /* "+ Nueva conversación" es larguísimo para 390px: en el teléfono queda solo el "+". */
  .pagina-asistente #asi-nueva { font-size: 0; padding: .4rem .6rem }
  .pagina-asistente #asi-nueva::before { content: '+'; font-size: 1.15rem; line-height: 1 }
  /* El estado como PUNTITO: "listo · claude-sonnet-4-5" no entra en 390px y truncado
     ("listo · claude-son…") no dice nada. Verde anda, violeta es modo de prueba, rojo
     está sin configurar — y cuando está rojo el cartel de abajo lo explica con todas las
     letras. El texto sigue en el HTML (y en el title) para quien lo necesite. */
  .pagina-asistente .asi-estado { font-size: 0; width: .8rem; height: .8rem; padding: 0; flex-shrink: 0;
    border-radius: 50%; background: var(--color-muted); border-color: var(--color-muted) }
  .pagina-asistente .asi-estado.ok { background: var(--color-success); border-color: var(--color-success) }
  .pagina-asistente .asi-estado.mock { background: #6366f1; border-color: #6366f1 }
  .pagina-asistente .asi-estado.error { background: var(--color-danger); border-color: var(--color-danger) }
  .pagina-asistente .page-body { padding: 0; min-height: 0; display: flex; flex-direction: column }
  .pagina-asistente .asi-aviso { margin: .6rem .7rem 0; flex-shrink: 0 }
  .pagina-asistente .asi-layout { height: auto; min-height: 0; flex: 1; gap: 0 }
  .pagina-asistente .asi-chat { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: none; min-height: 0 }

  /* ── El menú del sistema, afuera de la pantalla hasta que lo pedís ───────────── */
  /* main.css lo achica a un riel de 54px abajo de 700px; acá se lo saca del ancho del
     chat y se le devuelven los textos, porque como hoja hay lugar de sobra. */
  .pagina-asistente .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; height: 100%;
    z-index: 60; transform: translateX(-100%); transition: transform .22s ease; }
  .pagina-asistente.menu-abierto .sidebar { transform: none }
  .pagina-asistente .sidebar-title, .pagina-asistente .sidebar-subtitle,
  .pagina-asistente .nav-item span:last-child, .pagina-asistente .sidebar-section { display: block }
  .pagina-asistente .nav-item { justify-content: flex-start; padding: .7rem 1rem }

  /* ── El chat ─────────────────────────────────────────────────────────────────── */
  .pagina-asistente .asi-mensajes { padding: .8rem .7rem; gap: .5rem }
  .pagina-asistente .asi-msg { max-width: 88%; font-size: .95rem }
  .pagina-asistente .asi-bienvenida { font-size: .9rem }
  .pagina-asistente .asi-sugerencias button { padding: .5rem .85rem; font-size: .85rem }
  .pagina-asistente .asi-modo { padding: .45rem .7rem 0; font-size: .72rem; gap: .3rem }
  .pagina-asistente .asi-modo button { padding: .35rem .6rem }
  /* En 390px "Escribiendo desde: 📱 Simulador de teléfono" se comía dos renglones. */
  .pagina-asistente .asi-largo { display: none }
  .pagina-asistente .asi-corto { display: inline }
  .pagina-asistente .asi-pendiente { margin: 0 .7rem; font-size: .8rem }
  .pagina-asistente .asi-entrada { padding: .6rem .7rem; gap: .45rem;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); flex-shrink: 0 }
  /* 16px EXACTOS: con menos, Safari hace zoom al enfocar y ya no se ve la pantalla. */
  .pagina-asistente .asi-entrada textarea { font-size: 16px; max-height: 110px; padding: .55rem .7rem }
  .pagina-asistente .btn-enviar { padding: .6rem .9rem }
}

/* Teléfono acostado: queda poquísimo alto, así que se achica todo lo que no es el chat. */
@media (max-width: 900px) and (max-height: 460px) and (orientation: landscape) {
  .pagina-asistente .page-header { padding: .35rem .7rem }
  .pagina-asistente .asi-modo { display: none }
  .pagina-asistente .asi-mensajes { padding: .5rem .7rem }
}