/* Panel 178 · Nada se sale de la pantalla del móvil ni obliga a deslizar de lado.
   Va el último: corrige lo que otras hojas dejaban ancho. */

/* ---- Cajones (ficha de la paciente, subir documento, nueva cita…) ----
   Un elemento de una rejilla no encoge por debajo de su contenido: el selector
   de archivo («Ningún archivo seleccionado») ensanchaba todo el cajón. */
.cajon-cuerpo { grid-template-columns: minmax(0, 1fr); }
.cajon-cuerpo > *, .cajon .form-fila, .cajon .paneles > *, .cajon .ct-acciones { min-width: 0; }
.cajon .campo, .cajon select, .cajon textarea, .cajon input[type="file"] { max-width: 100%; min-width: 0; }
.cajon input[type="file"] { width: 100%; }
.cajon .btn { max-width: 100%; }
.notas-aviso { margin: -2px 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
@media (max-width: 640px) {
  .cajon .paneles { grid-template-columns: minmax(0, 1fr) !important; }
  .dato { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); }
  .dato dd { overflow-wrap: anywhere; }
}

/* ---- Conversación abierta: la zona de escribir es una rejilla y su pista se ensanchaba con el aviso ---- */
.msg-escribir { grid-template-columns: minmax(0, 1fr); }
.msg-escribir > * { min-width: 0; max-width: 100%; }
.ventana-cerrada .btn { white-space: normal; max-width: 100%; }

/* ---- Cosas de ancho fijo dentro de los mensajes (ubicación, contacto, enlaces) ---- */
.ubi { width: min(250px, 100%); max-width: 100%; }
.ubi-pie { min-width: 0; overflow-wrap: anywhere; }
.doc { min-width: min(230px, 100%); grid-template-columns: 38px minmax(0, 1fr) auto; overflow-wrap: anywhere; }
.contacto { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.msg-cuerpo a, .msg-cuerpo .burbuja { overflow-wrap: anywhere; }
select.cb-sel, .pd-acc .cb-sel, .av-tabla select.campo, .hz-cab .campo { max-width: 100%; }
.av-texto textarea { min-width: 0; }

/* ---- Textos largos que no deben empujar la pantalla ---- */
.ventana-cerrada span { min-width: min(180px, 100%); }
.escribir-fila > * { min-width: 0; }
.escribir-fila textarea, .escribir-fila input { min-width: 0; flex: 1 1 0; }
.msg-firma { overflow-wrap: anywhere; }
.pl-tarjeta h3 { overflow-wrap: anywhere; word-break: normal; }
.notif-tipo span { min-width: 0; overflow-wrap: anywhere; }

/* ---- Pestañas, periodos y filtros: en varias líneas, no en una fila que se desliza ---- */
@media (max-width: 860px) {
  .mt-pestanas, .mt-rangos, .es-estados { display: flex; flex-wrap: wrap; overflow: visible; width: 100%; max-width: 100%; }
  .mt-pestana, .mt-rango, .es-est { flex: 1 1 auto; white-space: normal; text-align: center; }
}

/* ---- Estadísticas: las tablas de doce meses pasan a tarjetas en el móvil ---- */
@media (max-width: 760px) {
  /* Panel 274 · José (14/10): en Continuidad, con nombres largos de verdad, la pantalla se deslizaba de lado. */
  .es-matriz th, .es-matriz td, .es-sub, .es-pro { min-width: 0 !important; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .es-pro { display: inline; }
  .es-bloque, .es-scroll { max-width: 100%; min-width: 0; }
  .es-scroll { overflow: visible; }
  .es-matriz, .es-matriz tbody, .es-matriz tfoot, .es-matriz tr { display: block; width: 100%; }
  .es-matriz thead { display: none; }
  .es-matriz tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 6px; padding: 12px 6px; border-bottom: 1px solid var(--divider); }
  .es-matriz tbody th, .es-matriz tfoot th, .es-cont tbody th {
    grid-column: 1 / -1; position: static; min-width: 0; max-width: none; padding: 0 6px 6px; border: 0; background: none; box-shadow: none;
  }
  .es-matriz td { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 5px 2px; border: 0; white-space: normal; }
  .es-matriz td::before { content: attr(data-l); font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
  .es-matriz td.es-total, .es-matriz td.es-ultima, .es-matriz td.es-como { grid-column: span 2; }
  .es-matriz td.es-como { align-items: center; }
  .es-matriz .es-total { padding-right: 2px; }
}

/* ---- Despachos: en el móvil, todos a la vez (estrechos) o uno a lo ancho ---- */
.dp-selector { display: none; }
.dp-corto { display: none; }
.dp-bloque strong span { color: inherit; }
@media (max-width: 760px) {
  .dp-selector { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
  .dp-sel { border: 1px solid var(--divider); background: var(--card-bg); color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 38px; }
  .dp-sel.on { background: var(--marca); border-color: var(--marca); color: #fff; }
  .dp-scroll { overflow-x: visible; }
  .dp-rejilla { min-width: 0; grid-template-columns: 46px minmax(0, 1fr) !important; }
  .dp-cab-col:not(.on), .dp-col:not(.on) { display: none; }
  .dp-bloque strong, .dp-bloque span { white-space: normal; overflow-wrap: anywhere; }

  /* Panel 223 · «Todos»: una columna estrecha por despacho, con la hora y el nombre de pila. */
  .dp-rejilla.todos { grid-template-columns: 36px repeat(var(--dp-n, 5), minmax(0, 1fr)) !important; }
  .dp-rejilla.todos .dp-cab-col { display: grid; justify-items: center; padding: 8px 2px; cursor: pointer; }
  .dp-rejilla.todos .dp-cab-col small { display: none; }
  .dp-rejilla.todos .dp-col { display: block; }
  .dp-rejilla.todos .dp-largo { display: none; }
  .dp-rejilla.todos .dp-corto { display: inline; }
  .dp-rejilla.todos .dp-horas span { right: 4px; font-size: 10px; }
  .dp-rejilla.todos .dp-bloque { left: 2px; right: 2px; padding: 2px 4px; border-radius: 6px; font-size: 10.5px; line-height: 1.25; }
  .dp-rejilla.todos .dp-bloque strong { font-size: 10.5px; }
  .dp-rejilla.todos .dp-bloque strong, .dp-rejilla.todos .dp-bloque span { white-space: nowrap; overflow-wrap: normal; }
}
@media (max-width: 380px) {
  .dp-sel { padding: 8px 10px; }      /* «Todos» y los cinco, en una fila */
}

/* ---- Tablas sueltas (Equipo y otras): cada fila, una tarjeta ---- */
@media (max-width: 560px) {
  .eq-tabla, .eq-tabla tbody, .eq-tabla tr, .eq-tabla td { display: block; width: 100%; }
  .eq-tabla thead { display: none; }
  .eq-tabla tr { padding: 12px 4px; border-bottom: 1px solid var(--divider); }
  .eq-tabla td { padding: 3px 4px; border: 0; overflow-wrap: anywhere; }
}

/* Panel 183 · La hoja «Más» del móvil se deslizaba de lado: el botón «Buscar» medía el 100 % menos 8 px
   pero otra regla del móvil lo dejaba al 100 % y con 4 px de margen a cada lado (+8 px). Ahora ocupa el ancho
   que hay, y la hoja no desliza de lado nunca. */
/* Panel 274 · Red de seguridad: en el móvil ninguna pantalla se desliza de lado, aunque algo nuevo se salga.
   Lo que necesita ir de lado (pestañas, filtros) lleva su propio desplazamiento dentro. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .view, .shell, main { overflow-x: hidden; }
}
@media (max-width: 860px) {
  .mas-panel { overflow-x: hidden; }
  .mas-panel .mas-buscar { box-sizing: border-box; width: auto; margin: 4px 0 8px; }
}

/* ---- Panel 276 · Equipo en el móvil: una fila por profesional, las horas arriba ----
   La tira de horas se desliza de lado dentro de la agenda (.ag-scroll); el nombre se queda fijo a la izquierda. */
#agenda-root[data-filas] .ag-rejilla { display: block; min-width: 0; width: auto; }
#agenda-root[data-filas] .ag-leyenda { display: none; }
.agf { --agf-pro: 104px; --agf-alto: 66px; width: calc(var(--agf-pro) + var(--agf-ancho)); position: relative; }
.agf-cab { display: flex; position: sticky; top: 0; z-index: 6; height: 34px; }
.agf-esquina { position: sticky; left: 0; z-index: 7; flex: 0 0 var(--agf-pro); display: flex; align-items: center; padding: 0 10px;
  font-size: 11px; font-weight: 650; color: var(--text-muted); background: var(--ag-fijo); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--divider); border-right: 1px solid var(--divider); }
.agf-horas { position: relative; flex: 0 0 var(--agf-ancho); background: var(--ag-fijo); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--divider); }
.agf-horas span { position: absolute; top: 9px; transform: translateX(4px); font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.agf-fila { display: flex; height: var(--agf-alto); border-bottom: 1px solid var(--divider); }
.agf-pro { position: sticky; left: 0; z-index: 5; flex: 0 0 var(--agf-pro); display: grid; align-content: center; gap: 2px; padding: 6px 8px 6px 12px;
  background: var(--ag-fijo); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid var(--divider); box-shadow: inset 3px 0 0 var(--ag-color); min-width: 0; }
.agf-pro i { display: none; }
.agf-pro strong { font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.agf-pro span { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agf-tira { position: relative; flex: 0 0 var(--agf-ancho); }
.agf-lineas { position: absolute; inset: 0; pointer-events: none; }
.agf-lineas i { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--ag-linea); }
.agf-lineas i.hora { border-left-color: var(--ag-linea-hora); }
.agf-libre { position: absolute; top: 0; bottom: 0; background: var(--ag-libre); cursor: copy; }
.agf-ausencia { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--aviso) 12%, transparent) 0 8px, transparent 8px 16px);
  color: var(--aviso); font-size: 12px; font-weight: 650; pointer-events: none; white-space: nowrap; overflow: hidden; }
.agf-ahora { position: absolute; top: 0; bottom: 0; z-index: 4; border-left: 2px solid var(--ag-ahora); pointer-events: none; }
.ag-cita.agf-cita { right: auto; padding: 4px 6px 4px 9px; border-radius: 10px; display: grid; align-content: center; gap: 1px; min-width: 0; font-size: 12px; }
.agf-cita .agf-t { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.agf-cita .agf-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agf-cita:hover { transform: none; }
.tf-usar-bono { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.tf-usar-bono .btn { white-space: normal; text-align: left; }

/* Panel 309 · Rentabilidad con datos de verdad: «300 € · empieza con la puesta en marcha» iba en una línea sin partir
   y ensanchaba toda la pantalla (se veía cortada a la derecha). En el móvil, el valor va debajo del título. */
@media (max-width: 600px) {
  .mt-lista-medida li { grid-template-columns: minmax(0, 1fr); }
  .mt-md-valor { white-space: normal; overflow-wrap: anywhere; }
}

/* Panel 309 · Despachos en un móvil estrecho (o con la letra grande): el «Octubre de 2026» con sus flechas se salía. */
.dp-mes-nav { min-width: 0; max-width: 100%; }
.dp-mes-nav strong { min-width: 0; flex: 1 1 auto; }
@media (max-width: 400px) { .dp-mes-nav { width: 100%; justify-content: space-between; } }

/* =====================================================================
   Panel 310 · Repaso del móvil (José, 17/10)
   ===================================================================== */

/* ---- Agenda › Semana en el móvil: el día desaparecía si alguien no pasaba consulta ----
   «18 citas · Paula fuera» ocupaba tres líneas en una columna de 40 px y empujaba «jue 15» fuera de la cabecera.
   El día va siempre arriba; quién falta, en su propia línea y cortado si no cabe (al pulsar el día se ve entero). */
.ag-cab-fuera { font-style: normal; }
.ag-cab-fuera b { font-weight: inherit; }
@media (max-width: 860px) {
  #agenda-root[data-vista="semana"] .ag-cab { justify-content: safe center; }
  #agenda-root[data-vista="semana"] .ag-cab span { display: block; max-width: 100%; line-height: 1.25; }
  #agenda-root[data-vista="semana"] .ag-cab-fuera { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--aviso); }
  #agenda-root[data-vista="semana"] .ag-cab-fuera b { display: none; }
}

/* ---- Equipo en el móvil: «AccesoDirección», «AgendaSí», «Próximas citas5» ----
   Cada persona es una ficha (Panel 178) y la etiqueta de cada dato quedaba pegada al valor. Va encima, como en
   Ajustes → Avisos. */
@media (max-width: 560px) {
  .eq-tabla td[data-col]::before { display: block; width: auto; margin-bottom: 1px; font-size: 12.5px; }
}

/* ---- Inicio: el reloj ----
   En móviles de menos de 390 px (y siempre con la letra grande) la hora no cabía al lado de Digital / Analógico:
   se salía de la tarjeta por la izquierda y el selector tapaba los segundos. El selector es un poco más estrecho,
   la hora algo más pequeña en los de 360 px y, si aun así no caben juntos, el selector baja debajo de la hora. */
@media (max-width: 860px) {
  .reloj { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
  .reloj-modos button { padding: 0 10px; }
}
@media (max-width: 370px) {
  html[data-estilo="suave"] .reloj .reloj-hm { font-size: 41px; }
}

/* ---- Cifras grandes de Estadísticas (Cobros, Morosidad, Caja…) ----
   Con la letra muy grande, «12.120,00 €» no cabía al lado de su título y se salía de la tarjeta. Si la tarjeta es
   estrecha, la cifra va debajo del título. */
@media (max-width: 720px) {
  .mt-tarjetas { container: mt-tarjetas / inline-size; }
}
@container mt-tarjetas (max-width: 270px) {
  .mt-tarjeta { grid-template-columns: minmax(0, 1fr); }
  .mt-tarjeta .mt-t-valor { grid-row: auto; grid-column: auto; }
}

/* ---- Estadísticas › La consulta: la ocupación por franja con la letra muy grande ----
   Con casillas de 44 px la tabla no cabía y había que deslizarla de lado. Si su tarjeta es estrecha, la tabla
   ocupa el ancho que hay y cada casilla mide lo que le toca (el número sigue cabiendo dentro). */
.mt-calor { container: mt-calor / inline-size; }
@container mt-calor (max-width: 340px) {
  .mt-calor table { width: 100%; }
  .mt-calor td { width: auto; }
  .mt-calor th { padding: 2px 3px; }
}

/* ---- Plantillas: Todas · Aprobadas · En revisión, en dos filas si no caben en una ---- */
.pl-filtros { flex-wrap: wrap; }

/* ---- La barra de abajo con la letra grande: «WhatsApp» se cortaba por los dos lados ----
   Cada pestaña mide un quinto de la barra; la etiqueta encoge lo justo para caber en la suya. Con la letra normal
   y un móvil corriente no cambia nada. */
@media (max-width: 860px) {
  .nav-sidebar .nav-item { container-type: inline-size; }
  .nav-sidebar .nav-item span { font-size: min(11.5px, 21cqi); }
}

/* Panel 311 · Con seis días (la demo abre también en fin de semana) y letra muy grande, el mapa de calor aún se
   deslizaba: casillas repartidas a partes iguales y la letra un poco más pequeña cuando no cabe. */
@container mt-calor (max-width: 340px) {
  .mt-calor table { table-layout: fixed; border-spacing: 1px; }
  .mt-calor th, .mt-calor td { font-size: .66rem; }
  .mt-calor th { padding: 2px 1px; overflow: hidden; text-overflow: clip; }
  .mt-calor th[scope="row"] { width: 2.9em; }
}

/* ---- Panel 401 · Repaso del móvil (José, 23/10): botones partidos y Videollamadas que se deslizaba de lado ----
   Con la letra grande, «Invitar a alguien de fuera · Cambiar hora o duración · Anular» iban en una fila que no se
   partía: cada botón en cinco líneas y la fila se salía por la derecha (había que deslizar). Y en muchas pantallas
   un botón corto («Guardar cambios», «Cerrar la caja»…) se partía en dos líneas porque su fila no bajaba.
   En el móvil, la fila que lleva botones baja a la siguiente línea si no caben: cada botón se queda entero y solo
   parte su texto si ni solo en su fila cabe. */
@media (max-width: 640px) {
  :where(div, header, footer, li, p, form, section, nav, td):has(> .btn) { flex-wrap: wrap; }
  .btn { max-width: 100%; }
}
.vc-reunion-acc { flex-wrap: wrap; }
.vc-reuniones li > div:first-child { min-width: 0; }
@media (max-width: 640px) {
  .vc-reuniones li { padding: 12px; }
  .vc-reunion-acc { width: 100%; }
  .vc-reunion-acc .btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  /* Un botón solo en su fila y aun así sin sitio (letra grande): menos relleno a los lados antes que partirlo. */
  .btn { padding-inline: 12px; }
  html[data-letra="muy-grande"] .btn:not(.btn-mini) { font-size: 13px; padding-inline: 10px; }
  /* Caja del día: «Descargar Excel del día · Cerrar la caja · Imprimir» se repartían a partes iguales y se partían. */
  .cj-acciones .btn { flex: 1 1 auto; }
}
/* La lista de supervisiones y el cuerpo de «Mejorar el asistente» son rejillas: su columna crecía con lo de dentro
   (el enlace de invitados, las tarjetas del gasto) y se salía unos píxeles o, con la letra grande, bastante. */
.vc-reuniones ul, .ma-cuerpo { grid-template-columns: minmax(0, 1fr); }
.vc-reuniones li, .vc-reuniones li > *, .ma-cuerpo > * { min-width: 0; }
@media (max-width: 640px) {
  .btn.btn-mini { padding-inline: 10px; }
  /* Videollamadas en el móvil: menos relleno en las cajas para que «Invitar a alguien de fuera» quepa entero. */
  .vc-bloque { padding: 16px 12px; }
  .vc-reuniones li { padding: 10px; }
}
/* Mejorar el asistente › Gasto: la columna de la pestaña crecía unos píxeles con la letra muy grande. */
.ma-pestana { grid-template-columns: minmax(0, 1fr); }
.ma-pestana > * { min-width: 0; }