/* ============================================================
   DETALLE V3 — celular, 390 px (MON-557)
   Barra de botones (Estado · Tareas · Campos · ⋯), hojas desde abajo y barra superior.
   Solo hasta 640 px: arriba de eso #dv3-movil no se muestra y manda la barra derecha.
   Solo tokens del sistema de diseño, sin colores sueltos ni bordes gruesos de color.
   ============================================================ */

.dv3 #dv3-movil { display: none; }

@media (max-width: 640px) {
  /* Los hijos de #dv3-movil participan del layout del detalle: la barra queda al pie, en el flujo */
  .dv3 #dv3-movil { display: contents; }

  /* Barra superior de la app como la maqueta (A2-17): ☰, marca y avatar. El ☰ abre la hoja «Menú»
     (detalle-v3-movil.js); buscar, ayuda, campana y «Reportar» no se muestran mientras se ve el detalle. */
  body.dv3-on .topbar .hamburger-btn { display: inline-flex; }
  body.dv3-on .topbar .mob-search-btn,
  body.dv3-on .topbar #supportSelectorContainer,
  body.dv3-on .topbar #notifBell,
  body.dv3-on .topbar #wrep-tab { display: none; }

  /* Cabecera: el título tiene su propia fila debajo de la miga (A33) */
  .dv3 .dv3-cab-arriba { min-height: 44px; }
  /* Título en hasta 2 líneas con el token más cercano a los 17 px de la maqueta (16 px); si no entra, «…» al final de la segunda (A2-06) */
  .dv3 .dv3-titulo {
    flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere;
    font-size: var(--fs-subtitle); line-height: 1.3;
    white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .dv3 #dv3-cab-acciones, .dv3 .dv3-cab-acciones { display: none; }
  .dv3 .dv3-menu { display: none; }

  /* Barra de botones al pie */
  .dv3 .dv3m-barra {
    flex-shrink: 0; display: flex; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .dv3 .dv3m-btn {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 44px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 4px; border: 0; border-radius: var(--r-control);
    background: transparent; color: var(--text-body);
    font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
  }
  .dv3 .dv3m-btn:hover { background: var(--brand-tint); }
  .dv3 .dv3m-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .dv3 .dv3m-btn--on { background: var(--brand-tint); color: var(--brand); }
  /* Botón de estado del agente: primario, con el estado en sentence case (A32) */
  .dv3 .dv3m-btn--estado { flex: 1.4 1 0; flex-direction: row; gap: var(--sp-1); background: var(--brand); color: var(--text-on-brand); }
  .dv3 .dv3m-btn--estado:hover, .dv3 .dv3m-btn--estado.dv3m-btn--on { background: var(--brand-dark); color: var(--text-on-brand); }
  /* Estado bloqueado hoy (cierre o autorización pendiente, o cerrada): igual que el escritorio, deshabilitado y con el motivo en la hoja */
  .dv3 .dv3m-btn--estado.dv3m-btn--bloq, .dv3 .dv3m-btn--estado.dv3m-btn--bloq:hover { background: var(--brand-tint); color: var(--text-muted); }
  /* «⋯»: el ícono kebab girado; quien gestiona la solicitud ve solo el ícono (A2-18) */
  .dv3 .dv3m-ico-h { display: inline-flex; transform: rotate(90deg); }
  .dv3 .dv3m-btn--ico { flex: 0 0 48px; }
  .dv3 .dv3m-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dv3 .dv3m-cnt { position: absolute; top: 2px; right: 6px; }

  /* Hoja desde abajo */
  .dv3 .dv3m-fondo { position: fixed; inset: 0; z-index: 210; background: rgba(var(--brand-navy-2-rgb), .45); }
  .dv3 .dv3m-hoja {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 211;
    display: flex; flex-direction: column; max-height: 80vh;
    background: var(--surface); border-radius: var(--r-card) var(--r-card) 0 0;
    box-shadow: var(--sh-3);
    animation: dv3mSubir .18s ease-out;
  }
  .dv3 .dv3m-asa { display: flex; justify-content: center; padding: var(--sp-2) 0 0; touch-action: none; }
  .dv3 .dv3m-asa span { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--divider); }
  .dv3 .dv3m-cab { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .dv3 .dv3m-titulo { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-title); font-weight: 700; touch-action: none; }
  .dv3 .dv3m-titulo:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); }
  .dv3 .dv3m-x, .dv3 .dv3m-atras { min-width: 44px; min-height: 44px; }
  .dv3 .dv3m-cuerpo { overflow-y: auto; overflow-x: hidden; padding: 0 var(--sp-3) var(--sp-4); min-width: 0; overflow-wrap: anywhere; }

  .dv3 .dv3m-lista { list-style: none; margin: 0; padding: 0; }
  .dv3 .dv3m-item {
    width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 1px solid var(--divider);
    background: transparent; color: var(--text-strong); font-size: var(--fs-body); text-align: left; cursor: pointer;
  }
  .dv3 .dv3m-item:hover { background: var(--brand-tint); }
  .dv3 .dv3m-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .dv3 .dv3m-item[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
  .dv3 .dv3m-ok { color: var(--brand); display: inline-flex; }
  /* Hoja «Menú»: ícono y nombre a la izquierda; la pantalla de la que se vino, marcada */
  .dv3 .dv3m-item--nav { justify-content: flex-start; }
  .dv3 .dv3m-item-ico { display: inline-flex; color: var(--text-muted); }
  .dv3 .dv3m-item--nav[aria-current="page"] { font-weight: 600; }
  .dv3 .dv3m-item--nav[aria-current="page"] .dv3m-item-ico { color: var(--brand); }
  .dv3 .dv3m-motivo { font-size: var(--fs-meta); color: var(--text-muted); }
  .dv3 .dv3m-vacio { margin: 0; padding: var(--sp-4) var(--sp-3); color: var(--text-muted); font-size: var(--fs-body); }

  /* Hoja Tareas: sección «Vinculadas» debajo de las tareas (A2-07). «Vincular» ya está en Acciones. */
  .dv3 .dv3m-vinc { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--divider); }
  .dv3 .dv3m-vinc [data-dv3-foco="vincular"] { display: none; }
  .dv3 .dv3m-vinc .dv3-pan-vinc { min-height: 44px; }

  /* El botón flotante global de reporte (z-index muy alto) taparía el pie de la hoja: se oculta mientras hay una abierta */
  body:has(.dv3m-hoja) #wrep-flotante { display: none; }

  /* La barra derecha (Tareas/Campos/Adjuntos/Flujo) no se ve: sus contenidos viven en las hojas */
  .dv3 .dv3-lateral { display: none; }
}

@keyframes dv3mSubir { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dv3 .dv3m-hoja { animation: none; } }

/* Franja de la descripción al bajar (MON-341, maqueta v13): en celular, texto de 13 px y márgenes de 14 px.
   La estructura y el comportamiento son de detalle-v3.js/.css; acá solo el ajuste de tamaño.
   La franja (z-index 1 dentro de la cabecera) queda por debajo de las hojas (fondo 210, hoja 211). */
@media (max-width: 640px) {
  .dv3 .dv3-desc-fija .dv3-desc-fija-in { padding: 8px 14px; gap: 10px; }
  .dv3 .dv3-desc-fija .dv3-desc-fija-t { font-size: calc(13px * var(--fs-scale)); }
  .dv3 .dv3-desc-fija .dv3-desc-fija-mas { font-size: calc(13px * var(--fs-scale)); }
}
@media (prefers-reduced-motion: reduce) { .dv3 .dv3-desc-fija, .dv3 .dv3-desc-fija.dv3-on { transition: none; } }