/* EL ESTILO NEUMÓRFICO EN EL CELULAR (9 oct 2026, Carlos: el mismo de la app desde la
   A-2.21, src\neumorfismo.css de jarvis-app). Va después de estilos.css y solo cambia
   cómo se ve: los mismos valores del acabado suave de la app. Todo es del material
   del fondo: lo que sale lleva sombra oscura abajo a la derecha y luz arriba a la
   izquierda; lo que se hunde, las mismas por dentro. Las burbujas son planas: la tuya
   neutra y la del agente neutra con una línea fina de su color (--bub-el, chat.js). */

/* ---------------- los colores ---------------- */
:root, :root[data-theme="light"] {
  --bg: #e9ecf2; --bg-2: #e9ecf2; --bg-3: #e9ecf2;
  --line: rgba(160, 172, 192, .28); --line-2: rgba(160, 172, 192, .4);
  --fg: #2b2f3a; --fg-soft: #3b404c; --fg-dim: #7d8394; --fg-mute: #a6acb8;
  --hover: rgba(255, 255, 255, .45);
  --glass: rgba(233, 236, 242, .92);
  --pared: #e9ecf2;
  --wf: transparent;
  --neu-o: rgba(150, 162, 184, .42);
  --neu-c: #ffffff;
  --neu-filo: inset 1px 1px 0 rgba(255, 255, 255, .95);
  --bub-yo: #ffffff; --bub-yo-tx: #1d2028;
  --sans: "Inter", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #24262a; --bg-2: #24262a; --bg-3: #24262a;
  --line: rgba(255, 255, 255, .06); --line-2: rgba(255, 255, 255, .09);
  --fg: #e7e8ea; --fg-soft: #d3d5d9; --fg-dim: #9a9ca3; --fg-mute: #6c6f76;
  --hover: rgba(255, 255, 255, .04);
  --glass: rgba(36, 38, 42, .92);
  --pared: #24262a;
  --neu-o: rgba(0, 0, 0, .45);
  --neu-c: rgba(255, 255, 255, .075);
  --neu-filo: inset 1px 1px 0 rgba(255, 255, 255, .075);
  --bub-yo: #34373d; --bub-yo-tx: #eceef1;
}
:root {
  /* La luz corta: en el teléfono el margen es chico y una luz larga se cortaría en la orilla. */
  --neu-sale: 5px 5px 12px var(--neu-o), -3px -3px 6px var(--neu-c), var(--neu-filo);
  --neu-sale-chico: 2px 2px 6px var(--neu-o), -2px -2px 5px var(--neu-c), var(--neu-filo);
  --neu-hunde: inset 3px 3px 7px var(--neu-o), inset -3px -3px 7px var(--neu-c);
  --neu-hunde-chico: inset 2px 2px 4px var(--neu-o), inset -2px -2px 4px var(--neu-c);
  --bub-el: var(--accent);
}

html, body, #vistas { background: var(--bg); }
body { font-family: var(--sans); }

/* ---------------- la barra de arriba ---------------- */
.barra { background: var(--bg); border-bottom: none; padding: 12px 16px 8px; }
.barra h1 { font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
.maquina { border: none; border-radius: 999px !important; box-shadow: var(--neu-hunde-chico); }
.maquina.apagada { border: none; }
.barra-agenda { width: 36px; height: 36px; border-radius: 12px !important; box-shadow: var(--neu-sale-chico); display: inline-flex; align-items: center; justify-content: center; }

/* ---------------- los botones de abajo ---------------- */
.menu { background: var(--bg); border-top: none; gap: 10px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
.menu-b, .menu-b + .menu-b {
  border: none; border-radius: 14px !important; background: var(--bg); color: var(--fg-dim); box-shadow: var(--neu-sale-chico);
}
.menu-b.on { background: var(--bg); color: var(--accent); box-shadow: var(--neu-hunde-chico); border: none; }
.menu-b.espera:not(.on) { color: #d97706; border: none; box-shadow: var(--neu-sale-chico), inset 0 0 0 1.5px #d97706; }
.menu-num { border-radius: 8px !important; font-family: var(--sans); }

/* ---------------- el chat ---------------- */
.chat, .chat .conversacion { background: var(--bg); }
.chat-tope { background: var(--bg); border-bottom: none; }
.chat-tope .terminar, .chat-tope .cerrar {
  border: none; border-radius: 11px !important; background: var(--bg); box-shadow: var(--neu-sale-chico); font-family: var(--sans);
}
.term-chat-msg {
  max-width: 82%; border-radius: 18px !important; font-family: var(--sans); font-size: 14px; line-height: 1.42; padding: 8px 13px;
  box-shadow: none;
}
.term-chat-msg.user { background: var(--bub-yo); color: var(--bub-yo-tx); border-bottom-right-radius: 6px; box-shadow: 0 1px 2px rgba(60, 70, 90, .12); }
.term-chat-msg.assistant { background: var(--bub-yo); color: var(--bub-yo-tx); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1.25px var(--bub-el); }
.kbar { background: var(--bg); border: none; border-radius: 18px !important; box-shadow: var(--neu-sale-chico); }
.kbar-input { background: var(--bg); border: none; border-radius: 12px !important; box-shadow: var(--neu-hunde-chico); font-family: var(--sans); padding: 9px 12px; }
.kbar-enviar, .kbar-clip { border: none; border-radius: 12px !important; background: var(--bg); box-shadow: var(--neu-sale-chico); color: var(--accent); }
.chat-retrato { border-radius: 16px !important; overflow: hidden; box-shadow: var(--neu-sale-chico); border: none; }
.pregunta { border-radius: 16px !important; border: none; box-shadow: var(--neu-sale-chico); background: var(--bg); }

/* ---------------- la sala ---------------- */
:root, :root[data-theme="light"], :root[data-theme="dark"] { --marco-sala: var(--bg); }
#edificio, #edificio.rejilla { background: var(--bg); gap: 16px; }
#edificio .puesto { border-radius: 18px !important; overflow: hidden; box-shadow: var(--neu-sale); }

/* ---------------- la agenda y los pendientes, SEPARADOS ----------------
   La misma agenda partida de agenda.js: en Agenda se ve solo el calendario y en
   Pendientes solo el Foco, cada uno con toda la pantalla (app.js pone data-mitad). */
.agenda.ag.partida[data-mitad] { grid-template-rows: minmax(0, 1fr); background: var(--bg); }
.agenda.ag.partida[data-mitad="cal"] .ag-arriba,
.agenda.ag.partida[data-mitad="foco"] .ag-abajo { display: none; }
.agenda.ag.partida[data-mitad="foco"] .ag-arriba { border-bottom: none; }
.agenda.ag.partida[data-mitad="foco"] .ag-fab { display: none; }
.ag-b, .ag-seg button, .ag-mdia {
  border: none; border-radius: 12px !important; background: var(--bg); box-shadow: var(--neu-sale-chico); font-family: var(--sans);
}
.ag-seg { border: none; gap: 6px; }
.ag-seg button.on, .ag-mdia.hoy { box-shadow: var(--neu-hunde-chico); color: var(--accent); }
.ag-ficha { border: none; border-radius: 18px !important; background: var(--bg); box-shadow: var(--neu-sale); }
.ag-fab { border: none; border-radius: 16px !important; background: var(--bg); color: var(--accent); box-shadow: var(--neu-sale); }
.ag-hoja { border-radius: 20px 20px 0 0 !important; background: var(--bg); }
.ag-chip { border-radius: 8px !important; }
.ag-mesrej { gap: 5px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px !important; }


/* =====================================================================
   EL IPAD (9 oct 2026, Carlos: "en ipad ponla con su propio ui bien pensado,
   está rara esa versión"). Era el teléfono estirado: la barra de abajo de lado
   a lado, las burbujas perdidas en lo ancho y la tarjeta de pendientes de orilla
   a orilla. Desde 700 px de ancho:
   - Los botones se van a un RIEL a la izquierda, con su nombre debajo, como el
     menú de la app. El pulgar los alcanza con la tableta en las dos manos.
   - El chat de un agente se abre como HOJA a la derecha y la sala se sigue
     viendo al lado (en horizontal, desde 1100 px, ya va en su columna).
   - El asistente, los pendientes y la agenda van a un ancho que se lee bien,
     centrados, en vez de estirarse.
   ===================================================================== */
@media (min-width: 700px) {
  #app { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .barra { grid-column: 2; grid-row: 1; padding: 16px 24px 10px 8px; }
  .barra h1 { font-size: 22px; }
  #vistas { grid-column: 2; grid-row: 2; margin: 0 16px 16px 0; border-radius: 26px !important; box-shadow: var(--neu-sale); }

  /* El riel: los mismos cuatro botones, de arriba abajo, con su nombre. */
  .menu {
    grid-column: 1; grid-row: 1 / 3; flex-direction: column; justify-content: flex-start; align-items: center;
    gap: 14px; padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); background: var(--bg);
  }
  .menu-b, .menu-b + .menu-b {
    flex: none; width: 72px; height: 68px; flex-direction: column; gap: 5px; font-size: 22px; border-radius: 18px !important;
  }
  .menu-b::after { content: attr(title); font: 600 10.5px var(--sans); letter-spacing: .02em; color: inherit; }
  .menu-num { top: 4px; right: 6px; }
  /* Con el teclado abierto el riel se queda: en la tableta no le roba lugar a lo que lees. */
  body.tecleando .menu { display: flex; }

  /* El chat de un agente, como hoja a la derecha: la sala sigue a la vista. */
  body:not(.en-columnas) .chats, body.tecleando:not(.en-columnas) .chats {
    left: auto; right: 0; top: 0; bottom: 0; width: min(560px, 64vw);
  }
  body:not(.en-columnas) .chats .chat {
    border-radius: 26px 0 0 26px !important; overflow: hidden;
    box-shadow: -14px 0 32px rgba(40, 48, 66, .22);
  }
  :root[data-theme="dark"] body:not(.en-columnas) .chats .chat { box-shadow: -14px 0 32px rgba(0, 0, 0, .5); }

  /* La sala, con aire entre tarjetas. */
  #edificio.rejilla { padding: 20px; gap: 20px; }

  /* El asistente: su plática a un ancho de lectura, al centro. */
  .vista[data-v="asistente"] > .chat { width: 100%; max-width: 780px; margin: 0 auto; }
  .term-chat-msg { max-width: 72%; font-size: 15px; }

  /* Los pendientes: una ficha al centro, como una tarjeta que se decide. */
  .agenda.ag.partida[data-mitad="foco"] .ag-arriba { width: 100%; max-width: 680px; margin: 0 auto; padding-top: 18px; }
  .agenda.ag.partida[data-mitad="foco"] .ag-ficha h2 { font-size: 22px; padding: 16px 18px 14px; }
  .agenda.ag.partida .ag-rapidos .ag-b { height: 44px; font-size: 14px; padding: 0 16px; }

  /* La agenda: el día o el mes, sin estirarse de más. */
  .agenda.ag.partida[data-mitad="cal"] .ag-abajo { width: 100%; max-width: 980px; margin: 0 auto; }
}