/* Oficinapp — Mensajes (bandeja + hilo) y chat del cliente (/p/chat). */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link-btn {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--orange-600);
}
.link-btn:hover { text-decoration: underline; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin-top: 8px;
  border-radius: var(--radius-full); background: var(--gray-100); color: var(--navy-900);
  font-size: 12px; font-weight: 600;
}
.chip:hover { background: var(--gray-300); }

/* Popover (enlace del cliente) */
.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover__panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, 86vw); z-index: 40; box-shadow: var(--shadow-elevated); }

/* ---------- Bandeja ---------- */
.inbox {
  display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px;
  height: calc(100dvh - 120px); min-height: 480px;
}
.inbox__list, .inbox__thread { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.inbox__filters { padding: 12px; display: grid; gap: 10px; border-bottom: 1px solid var(--gray-100); }
.inbox__seg { display: flex; overflow-x: auto; scrollbar-width: none; }
.inbox__seg a { white-space: nowrap; padding: 6px 10px; }
.inbox__items { flex: 1; overflow-y: auto; }
.conv {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100); border-left: 3px solid transparent;
}
.conv:hover { background: var(--gray-50); }
.conv.is-active { background: var(--orange-50); border-left-color: var(--orange-500); }
.conv__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv__top { display: flex; justify-content: space-between; gap: 8px; }
.conv__name { font-weight: 600; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv__time { font-size: 12px; color: var(--gray-500); flex: none; }
.conv__preview { font-size: 13px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.is-unread .conv__preview { color: var(--gray-900); font-weight: 500; }
.conv.is-unread .conv__time { color: var(--orange-600); font-weight: 600; }
.conv__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.conv .nav-badge { margin-top: 22px; }

.inbox__placeholder { margin: auto; }
.thread__head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.thread__back { display: none; }
.thread__who { flex: 1; min-width: 0; }
.thread__name { font-weight: 600; color: var(--navy-900); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.thread__name a:hover { text-decoration: underline; }
.thread__sub { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread__actions { display: flex; align-items: center; gap: 8px; }
.thread__assign select { width: 180px; }

.thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--gray-50); }
.thread__day { text-align: center; margin: 8px 0; }
.thread__day span { display: inline-block; padding: 2px 12px; border-radius: var(--radius-full); background: #fff; color: var(--gray-500); font-size: 12px; font-weight: 600; box-shadow: var(--shadow-card); }

.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(560px, 82%); }
.msg--out { align-self: flex-end; align-items: flex-end; }
.msg__bubble {
  background: #fff; border-radius: 16px 16px 16px 4px; padding: 8px 12px 10px;
  box-shadow: var(--shadow-card); min-width: 120px;
}
.msg--out .msg__bubble { background: var(--navy-900); color: #fff; border-radius: 16px 16px 4px 16px; }
.msg__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--gray-500); margin-bottom: 2px; }
.msg__meta strong { color: var(--navy-900); font-weight: 600; }
.msg--out .msg__meta, .msg--out .msg__meta strong { color: rgba(255,255,255,.72); }
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg__img { display: block; width: 180px; height: 140px; border-radius: 10px; overflow: hidden; background: var(--gray-100); }
.msg__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg__file { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; }
.msg--out .chip { background: rgba(255,255,255,.14); color: #fff; }
.msg__actions { margin-top: 4px; padding: 0 4px; }

/* Composer */
.composer { border-top: 1px solid var(--gray-100); padding: 10px 12px; background: #fff; }
.composer__row { display: flex; align-items: flex-end; gap: 8px; }
.composer__row textarea { min-height: 40px; height: 40px; max-height: 160px; resize: none; padding: 9px 12px; line-height: 1.4; }
.composer__attach { cursor: pointer; flex: none; }
.composer__send { flex: none; }
.composer__hint { font-size: 12px; margin-top: 6px; }
.composer__error { color: var(--danger); font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.composer__previews { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.composer__thumb {
  position: relative; width: 64px; height: 64px; border-radius: 10px; background: var(--gray-100) center/cover no-repeat;
}
.composer__thumb.is-loading { opacity: .6; }
.composer__spinner { display: none; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); border-top-color: var(--orange-500); animation: ofi-spin .8s linear infinite; }
.composer__thumb.is-loading .composer__spinner { display: block; }
.composer__remove {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: var(--navy-900); color: #fff; cursor: pointer; line-height: 22px; font-size: 14px; padding: 0;
}
@keyframes ofi-spin { to { transform: rotate(360deg); } }

/* Selector de cliente (formularios de mensajes, solicitudes y agenda) */
.cpicker { display: grid; gap: 6px; }
.cpicker__chosen { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: #fff; }
.cpicker__chosen strong { flex: 1; color: var(--navy-900); }
.cpicker__results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; padding: 4px; max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-elevated); }
.cpicker__results button {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: var(--radius-sm);
  font: inherit; cursor: pointer;
}
.cpicker__results button:hover, .cpicker__results button.is-focus { background: var(--gray-50); }
.cpicker__results small { display: block; color: var(--gray-500); }

@media (max-width: 767px) {
  .inbox { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 64px - 88px - env(safe-area-inset-bottom)); min-height: 360px; gap: 0; }
  .inbox--thread .inbox__list { display: none; }
  .inbox:not(.inbox--thread) .inbox__thread { display: none; }
  .thread__back { display: inline-flex; }
  .thread__head { padding: 10px 12px; gap: 8px; }
  .thread__head > .avatar { display: none; }
  .thread__assign select { width: 130px; }
  .msg { max-width: 88%; }
  .msg__img { width: 140px; height: 110px; }
  .composer__send .btn-label { display: none; }
  .composer__send { width: 40px; padding: 0; }
}

/* ---------- Chat del cliente (/p/chat) ---------- */
.pchat-body { background: var(--gray-50); }
.pchat { max-width: 760px; margin: 0 auto; height: 100dvh; display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-card); }
.pchat__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--navy-900); color: #fff; }
.pchat__logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #fff; }
.pchat__name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchat__sub { font-size: 12px; color: rgba(255,255,255,.7); }
.pchat__head .icon-btn { margin-left: auto; }
.pchat__thread { flex: 1; }
.pchat__composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* Deja sitio al botón flotante de Ofi (abajo a la derecha) para que no tape "Enviar" */
@media (min-width: 768px) {
  body:has(.ofi-fab) .inbox .composer { padding-right: 84px; }
}

/* [hidden] gana a los display de los componentes */
.cpicker [hidden], .composer [hidden], .field[hidden], .thread [hidden] { display: none !important; }