/*
 * Los estilos del panel. Vivían adentro de panel.html (3.100 líneas de html+css+js juntos):
 * están en su archivo para poder encontrarlos. El servidor lo sirve con no-store, igual que
 * el html, así que un deploy se ve con recargar y no hay versiones cacheadas a medias.
 */

  :root {
    --bg: #0e1116; --panel: #171c23; --panel2: #1f262f; --linea: #2c353f;
    --texto: #e6edf3; --suave: #8b98a5; --verde: #25d366; --verde2: #128c7e;
    --rojo: #f4515b; --ambar: #f0b429; --azul: #4c8dff;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f2f4f7; --panel: #ffffff; --panel2: #f7f9fb; --linea: #dde3ea;
      --texto: #17202a; --suave: #63707e;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--texto);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  header {
    background: var(--panel); border-bottom: 1px solid var(--linea);
    padding: 14px 18px; display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 10; flex-wrap: wrap;
  }
  header h1 { font-size: 17px; margin: 0; flex: 1; }
  .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); display: inline-block; }
  .punto.ok { background: var(--verde); }
  main { max-width: 1100px; margin: 0 auto; padding: 18px; }
  section {
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: 14px; padding: 18px; margin-bottom: 18px;
  }
  h2 { font-size: 15px; margin: 0 0 14px; letter-spacing: .3px; text-transform: uppercase; color: var(--suave); }
  label { display: block; font-size: 13px; color: var(--suave); margin: 12px 0 5px; }
  input, textarea, select {
    width: 100%; background: var(--panel2); color: var(--texto);
    border: 1px solid var(--linea); border-radius: 9px; padding: 10px 12px;
    font: inherit; font-size: 14px;
  }
  textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  .fila { display: flex; gap: 12px; flex-wrap: wrap; }
  .fila > div { flex: 1; min-width: 120px; }
  button {
    background: var(--verde2); color: #fff; border: 0; border-radius: 9px;
    padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer;
  }
  button:hover { filter: brightness(1.12); }
  button.gris { background: var(--panel2); color: var(--texto); border: 1px solid var(--linea); }
  button.rojo { background: transparent; color: var(--rojo); border: 1px solid var(--rojo); }
  button.chico { padding: 6px 11px; font-size: 13px; font-weight: 500; }
  .tarjeta {
    background: var(--panel2); border: 1px solid var(--linea);
    border-radius: 11px; padding: 14px; margin-bottom: 11px;
  }
  .cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
  .cab strong { font-size: 15px; }
  .chip {
    font-size: 11px; padding: 2px 9px; border-radius: 20px;
    background: var(--linea); color: var(--suave); font-weight: 600;
  }
  .chip.verde { background: rgba(37,211,102,.16); color: var(--verde); }
  .chip.ambar { background: rgba(240,180,41,.16); color: var(--ambar); }
  .chip.rojo  { background: rgba(244,81,91,.16); color: var(--rojo); }
  .barra { height: 7px; background: var(--linea); border-radius: 5px; overflow: hidden; margin: 9px 0 7px; display: flex; }
  .barra i { display: block; height: 100%; }
  .meta { font-size: 12.5px; color: var(--suave); }
  .acciones { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
  .vacio { color: var(--suave); font-size: 14px; padding: 6px 0; }
  .aviso {
    background: rgba(240,180,41,.1); border: 1px solid rgba(240,180,41,.35);
    color: var(--texto); border-radius: 10px; padding: 11px 14px; font-size: 13px; margin-bottom: 18px;
  }
  #login { max-width: 380px; margin: 12vh auto; }
  .oculto { display: none !important; }

  /* ------------------------------------------------------------------ pestañas */
  /* El panel tenía las seis secciones abiertas una debajo de la otra, así que para encontrar
     algo había que saber de antemano dónde estaba. Ahora se entra por lo que uno quiere HACER.

     Son DOS clases para esconder y no una: .fuera la pone la pestaña y .oculto el permiso.
     Con una sola, cambiar de pestaña le devolvería a un empleado las secciones que su rol no
     le deja ver (aplicarRol corre una sola vez, el cambio de pestaña corre todo el tiempo). */
  .fuera { display: none !important; }
  nav#pestanias {
    display: flex; gap: 6px; flex-wrap: wrap;
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: 14px; padding: 7px; margin-bottom: 18px;
  }
  nav#pestanias button {
    background: transparent; color: var(--suave); font-weight: 600;
    padding: 10px 15px; border-radius: 9px; flex: 1; min-width: 118px;
  }
  nav#pestanias button:hover { background: var(--panel2); filter: none; }
  nav#pestanias button.activa { background: var(--verde2); color: #fff; }

  /* main en columna para poder mandar "Campañas" arriba de los formularios que las crean sin
     mover 500 líneas de HTML de lugar: lo primero que uno quiere ver es qué está pasando. */
  main { display: flex; flex-direction: column; }
  main > .aviso { order: 1; }
  main > nav#pestanias { order: 2; }
  main > #seccionCampanias { order: 3; }
  main > section { order: 4; }

  /* La explicación larga de cada sección, plegada. Estaba toda a la vista y tapaba los
     controles: el que ya sabe no la necesita, y el que no sabe la abre. */
  details.ayuda { margin: 10px 0 4px; }
  details.ayuda > summary {
    cursor: pointer; font-size: 13px; color: var(--azul);
    font-weight: 600; list-style: none; padding: 4px 0;
  }
  details.ayuda > summary::-webkit-details-marker { display: none; }
  details.ayuda > summary::before { content: "❔ "; }
  details.ayuda[open] > summary::before { content: "✕ "; }
  /* Un desplegable que no es una explicación (el diagnóstico de un celular, el texto de una lista)
     trae su propio ícono: el ❔ adelante lo haría parecer una ayuda más. */
  details.ayuda.propia > summary::before { content: "▸ "; }
  details.ayuda.propia[open] > summary::before { content: "▾ "; }
  details.ayuda .cuerpo {
    font-size: 13px; color: var(--suave);
    border-left: 2px solid var(--linea); padding: 2px 0 2px 11px; margin-top: 6px;
  }
  details.ayuda .cuerpo p { margin: 0 0 9px; }
  details.ayuda .cuerpo p:last-child { margin-bottom: 0; }

  /* Una línea abajo del título que dice para qué sirve la sección, en criollo. */
  .subtitulo { font-size: 13.5px; color: var(--suave); margin: -9px 0 15px; }
  .paso { font-weight: 700; color: var(--texto); }

  .visor-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
  .visor-caja { background: var(--tarjeta, #16181d); border-radius: 14px; padding: 14px;
    max-width: 96vw; max-height: 96vh; display: flex; flex-direction: column; gap: 10px; }
  .visor-top { display: flex; align-items: center; gap: 10px; }
  #pantalla { background: #000; border-radius: 8px; max-height: 74vh; max-width: 100%;
    width: auto; height: auto; touch-action: none; cursor: crosshair; }
  .visor-controles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .visor-controles input { flex: 1; min-width: 160px; padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--borde, #333); background: var(--fondo, #0d0e11); color: inherit; }
  code { background: var(--panel2); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

  /* ------------------------------------------------------------- bandeja del bot */
  /* Las dos columnas y el hilo scrollean solos: si la bandeja creciera hacia abajo,
     el formulario de campañas quedaría a media página de distancia. */
  #bandejaChats, #bandejaHilo { max-height: 62vh; overflow-y: auto; }
  .chat-item { cursor: pointer; }
  .chat-item:hover { border-color: var(--suave); }
  .chat-item.abierto { border-color: var(--verde2); background: var(--panel); }
  .recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* La cabecera del hilo queda pegada arriba porque el hilo scrollea por dentro. */
  .hilo-cab { position: sticky; top: 0; background: var(--panel); padding: 1px 0 8px; z-index: 1; }
  .msg { max-width: 84%; word-break: break-word; }
  .msg.entra { margin-right: auto; }
  .msg.sale { margin-left: auto; background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.4); }
  .msg-txt { white-space: pre-wrap; }
  /* Borde punteado y ámbar: es lo que distingue un borrador de algo que ya salió. */
  .borrador { border: 1px dashed var(--ambar); background: rgba(240,180,41,.08);
    border-radius: 11px; padding: 13px; margin-bottom: 11px; }
  /* Estos dos son texto para leer y escribir, no listas de números: sin monospace. */
  #bPrompt, #bandejaTexto { font-family: inherit; font-size: 14px; }

  /* ------------------------------------------------------------- oficinas y celulares */
  /* En qué oficina se está parado. Va en la cabecera, que queda pegada arriba: tiene que estar a
     la vista desde cualquier pestaña, porque cambia lo que muestran todas. */
  .selector-oficina { display: flex; gap: 5px; flex-wrap: wrap; }
  .selector-oficina button {
    background: var(--panel2); color: var(--suave); border: 1px solid var(--linea);
    padding: 6px 12px; font-size: 13px; font-weight: 600;
  }
  .selector-oficina button.activa { background: var(--verde2); color: #fff; border-color: var(--verde2); }
  h3.grupo-oficina {
    font-size: 14px; margin: 18px 0 9px; display: flex; align-items: baseline; gap: 9px;
  }
  h3.grupo-oficina:first-child { margin-top: 0; }
  /* El color del borde dice cómo está el celular antes de leer nada. */
  .tarjeta.celular { border-left-width: 4px; }
  .tarjeta.celular.ok { border-left-color: var(--verde); }
  .tarjeta.celular.aviso { border-left-color: var(--ambar); }
  .tarjeta.celular.mal { border-left-color: var(--rojo); }
  .que-hacer { font-size: 13px; margin-top: 5px; }
  /* De dónde sale el mensaje de una campaña, y la lista de precios tal cual va a salir. */
  .origen-mensaje { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
  .origen-mensaje label {
    display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px;
    color: var(--texto); cursor: pointer;
  }
  .origen-mensaje input { width: auto; }
  .origen-mensaje input:disabled + *, .origen-mensaje label:has(input:disabled) {
    color: var(--suave); cursor: not-allowed;
  }
  .vista-titulo {
    font-size: 13px; font-weight: 600; margin: 10px 0 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  /* Desplegada: se ve entera, sin desplazarse adentro del recuadro. */
  pre.vista-lista.completa { max-height: none; }
  /* De qué leads sale la campaña de scrap: la oficina los decide y acá se muestra, no se elige. */
  .leads-oficina { font-size: 13.5px; margin: 10px 0 4px; }
  pre.vista-lista {
    background: var(--panel2); border: 1px solid var(--linea); border-radius: 9px;
    padding: 11px 13px; margin: 8px 0 0; max-height: 300px; overflow: auto;
    /* La letra del panel y no monospace: la lista está llena de emojis y la monospace no los trae. */
    font: inherit; font-size: 13px;
    white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
  }

  /* ------------------------------------------------------------------ en el celular */
  /*
     El panel estaba pensado para una pantalla grande y nada más. En un teléfono había dos
     problemas concretos, no de estética:

     1. SE IBA PARA EL COSTADO. Varias columnas tienen min-width de 230 a 290 px, y con los
        paddings de main y section eso pasa el ancho de un teléfono chico: la página quedaba
        con scroll horizontal y media pantalla afuera.
     2. iOS HACÍA ZOOM SOLO. Safari amplía la página al tocar un campo cuyo texto mide menos de
        16 px, y todos los de acá miden 14. Tocabas "Mensaje", la página se agrandaba, y la
        volvías a achicar a mano. En cada campo.

     Va como bloque aparte al final y no repartido por todo el CSS de arriba, para que se pueda
     leer de una qué cambia en el teléfono y qué no.
  */
  @media (max-width: 760px) {
    main { padding: 12px; }
    section { padding: 14px; border-radius: 12px; }
    header { padding: 10px 12px; gap: 8px; }
    header h1 { font-size: 15px; width: 100%; order: -1; }

    /* Los formularios pasan a una sola columna. Con los min-width de escritorio entraban dos
       campos por renglón, de 120 px cada uno: un "Espera mín (s)" no entra en 120 px. */
    .fila { gap: 10px; }
    .fila > div,
    .fila > div[style] { min-width: 100% !important; flex: 1 1 100% !important; }

    /* 16px es el umbral exacto de iOS: con esto deja de hacer zoom al enfocar un campo. */
    input, textarea, select { font-size: 16px; }
    #bPrompt, #bandejaTexto { font-size: 16px; }

    /* Las pestañas entran en dos renglones parejos en vez de uno y medio. */
    nav#pestanias { padding: 5px; gap: 4px; }
    nav#pestanias button { min-width: 0; flex: 1 1 46%; padding: 12px 8px; font-size: 14px; }

    /* La bandeja queda una arriba de la otra, así que 62vh cada una daban 124vh de áreas que
       scrollean por dentro: la página de afuera casi no se movía y no se llegaba nunca al final.
       La lista de chats se achica y el hilo se queda con el alto útil. */
    #bandejaChats { max-height: 34vh; }
    #bandejaHilo { max-height: 52vh; }
    .msg { max-width: 92%; }

    /* Botones más cómodos de tocar. 44 px es el mínimo que recomienda Apple y lo que hace que
       "Pausar" y "Borrar", que están pegados, no se toquen por error. */
    .acciones { gap: 8px; }
    .acciones button { min-height: 44px; }
    button.chico { padding: 9px 12px; }

    /* El visor de pantalla ocupa lo que hay. */
    .visor-overlay { padding: 8px; }
    .visor-caja { padding: 10px; width: 100%; max-width: 100vw; }
    #pantalla { max-height: 60vh; }
    .visor-controles input { min-width: 100%; }

    #login { margin: 5vh auto; padding: 0 12px; }
  }

  /* Teléfono chico (un iPhone SE mide 320 px). Acá lo único que importa es que no se vaya nada
     para el costado. */
  @media (max-width: 400px) {
    main { padding: 8px; }
    section { padding: 12px; }
    /* Dos por renglón y no cuatro apiladas: con una pestaña por fila, el menú se comía media
       pantalla y había que bajar para ver la primera campaña. */
    nav#pestanias button { padding: 12px 4px; font-size: 13px; }
    .chip { font-size: 10.5px; padding: 2px 7px; }
    /* Un token, una URL del servidor o un chat_id largo no pueden estirar la página. */
    code, .meta { overflow-wrap: anywhere; }
  }

  /* Red de seguridad, en cualquier ancho: nada puede provocar scroll horizontal. Si aparece uno,
     es un bug — y así se ve como texto cortado y no como media pantalla perdida. */
  body { overflow-x: hidden; }
  main, section, .tarjeta { max-width: 100%; }