/* =====================================================================
   VetUy · ajustes 3b.10 (pedido de Jorge, 25/10/2026). Se carga DESPUÉS de ajustes_3b9.css (templates/_v3_head.html).
   Solo CSS. Vale en modo día y en modo noche.
   1. Botón de WhatsApp (.btn-ic--wa, de la 3b.9):
      - el logo queda CENTRADO en el círculo. Antes quedaba corrido 10 px a la izquierda en la ficha de la mascota: el
        botón es una grilla y su única columna se pegaba al borde izquierdo; ahora se centra la columna (place-content)
        y el logo es un bloque, sin renglón de texto. El dibujo del logo ya está centrado en su cuadro de 24 x 24
        (medido: de 0,06 a 23,94 a lo ancho y de 0 a 24 a lo alto), no hace falta tocar templates/_v3_head.html.
      - más grande: 29 px en el círculo de 48 px y 27 px en el de 44 px (60 % del diámetro).
      - en la ficha de la mascota y del paciente va al extremo derecho de su fila (margen automático), centrado con el
        nombre, con la separación que ya tiene la fila (12 a 16 px) y sin quitarle lugar al nombre (que puede ocupar
        varias líneas). En el celular (menos de 640 px) mide 44 px; en la PC, 48 px.
   (en la PC, la cabecera de la ficha se reparte en dos columnas y el nombre solo medía lo que el texto: por eso el botón
   quedaba pegado; ahora el nombre usa todo el ancho y los avisos y botones bajan debajo.)
   2. Panel de la clínica, en la PC (cuando el tablero va en dos columnas): las dos columnas terminan en la misma línea.
      - el gráfico "Consultas · últimos 14 días" baja de 140 px a 96 px de alto (y 6 px de aire arriba): los ejes y
        "Ver como tabla" quedan igual;
      - las dos columnas se estiran: si "Requiere atención" queda más alta, la tarjeta del gráfico crece; si la agenda
        o el gráfico quedan más altos, "Requiere atención" se estira y sus renglones quedan arriba.
      En el celular (una sola columna) no cambia nada.
   Contraste del logo (#0B1322) sobre el verde: igual que en la 3b.9 (9,4:1 y 10,7:1).
   ===================================================================== */
.btn-ic.btn-ic--wa { place-content: center; }
.btn-ic.btn-ic--wa .ic { display: block; width: 29px; height: 29px; margin: 0; }
.ficha-cab__id > .btn-ic--wa, .pac-cab__id > .btn-ic--wa, .fila > .btn-ic--wa { margin-inline-start: auto; align-self: center; }
.ficha-cab__id > div, .pac-cab__id > div { margin-inline-end: 4px; }
@media (max-width: 639.98px) {
  .btn-ic.btn-ic--wa.btn-ic--48 { width: 44px; height: 44px; }
  .btn-ic.btn-ic--wa .ic { width: 27px; height: 27px; }
}
/* en la PC la cabecera de la ficha reparte dos columnas (nombre | avisos) y la del nombre mide lo que mide el texto: el botón
   quedaba pegado al nombre. Si el botón de WhatsApp está en esa cabecera, el nombre usa todo el ancho (el botón va al
   extremo) y lo demás (avisos, botones) baja debajo, uno por fila */
@container app (min-width: 1000px) {
  .pac-cab:has(> .pac-cab__id > .btn-ic--wa) > * { grid-column: 1 / -1; }
}
@container app (min-width: 1000px) {
  .dash-grid { align-items: stretch; }
  .dash-col { display: flex; flex-direction: column; gap: 16px; }
  .dash-col > .tarjeta:last-child { flex: 1 1 auto; }
  .d-grafico .barras { height: 96px; padding-top: 6px; }
}