/* ═══ BARRA DE ABAJO Y HUECOS DEL DISEÑO NUEVO (24-oct-2026) ═════════════════════════════════════════════
   Javidan, con TRIA en el navegador (o como acceso directo en el móvil y el portátil):
   (a) «un hueco blanco abajo, encima de la barra» y (b) «en las pestañas del backoffice la barra se pone NEGRA».
   Causas (medido con la página real y datos de prueba, a 390/412 de móvil y 1280/1366/1440 de portátil):
   · Hoy: el panel de Hoy se sentaba en la 2.ª fila de la rejilla del chat (la de «lo que mide») y la 3.ª, la que
     se estira, se quedaba vacía debajo → franja en blanco de unos 130 px. Ahora Hoy ocupa hasta abajo.
   · Backoffice: la zona de contenido medía «alto de pantalla − 108 px», que era el sitio de la barra de arriba
     antigua. En el diseño nuevo esa barra no se pinta, así que sobraban ~90 px en blanco abajo (portátil) o una
     franja encima de la barra (móvil). Ahora mide lo que hay.
   · Barra negra: en el backoffice, la barra toma su fondo de admin.css (gris casi negro), no del panel. Ahora usa
     los mismos colores claros que en el panel.
   · Una rendija de 2 px entre las secciones y la barra: la barra medía 56 px + hueco del iPhone y las secciones
     dejaban sitio para 58. Ahora la barra mide exactamente lo que se reserva.
   · Valoraciones en el móvil se abría como tarjeta flotante con márgenes; ahora a pantalla completa, como Agenda,
     CRM y Firmas.
   TODO cuelga de html[data-diseno="nuevo"].tria-armazon: con el diseño de siempre no cambia nada.
   Va antes de tria-base.css (que tiene que ser la última hoja): manda por selector. */

/* ── Hoy: hasta abajo, en el móvil y en el portátil ── */
html[data-diseno="nuevo"].tria-armazon.t-en-hoy main.chat-layout > #tria-hoy.t-hoy {
  grid-row: 2 / -1;
  align-self: stretch;
  min-height: 0;
}

/* ── Backoffice en el portátil: el contenido llega hasta abajo (sin la barra de arriba antigua) ── */
@media (min-width: 769px) {
  html[data-diseno="nuevo"].tria-armazon body.admin-page .admin-shell .admin-stage {
    height: calc(100dvh - 36px);
    max-height: calc(100dvh - 36px);
  }
}

@media (max-width: 768px) {
  /* ── Barra de abajo: mide exactamente lo que se le reserva (sin rendija) ── */
  html[data-diseno="nuevo"].tria-armazon body #barra-movil.t-barra-movil {
    box-sizing: border-box;
    min-height: calc(var(--barra-movil-alto, 58px) + var(--barra-movil-fondo, 0px));
    align-items: stretch;
  }

  /* ── Barra de abajo en el backoffice: clara, como en el panel (antes heredaba el gris casi negro) ── */
  html[data-diseno="nuevo"].tria-armazon body.admin-page #barra-movil.t-barra-movil {
    background: var(--t-fondo, #ffffff);
    border-top: 1px solid var(--t-linea, #e6e9ee);
    box-shadow: 0 -4px 14px rgba(16, 24, 40, 0.08);
    color-scheme: light;
  }

  html[data-diseno="nuevo"].tria-armazon body.admin-page #barra-movil.t-barra-movil .barra-movil-item {
    color: var(--t-texto-2, #5b6474);
  }

  html[data-diseno="nuevo"].tria-armazon body.admin-page #barra-movil.t-barra-movil .barra-movil-item:is(:hover, :active) {
    color: var(--t-texto, #1f2633);
  }

  html[data-diseno="nuevo"].tria-armazon body.admin-page #barra-movil.t-barra-movil .barra-movil-item.is-activa {
    color: var(--t-azul, #1e3f80);
  }

  html[data-diseno="nuevo"].tria-armazon body.admin-page #barra-movil.t-barra-movil .barra-movil-item.is-activa::before {
    background: var(--t-azul, #1e3f80);
  }

  /* ── Backoffice en el móvil: el contenido baja hasta el borde y se desplaza por detrás de la barra ── */
  /* Arriba: con TRIA instalada en el iPhone la zona de la hora queda encima del contenido;
     se deja ese hueco (en el navegador normal vale 0 y queda el margen de siempre, 12px). */
  html[data-diseno="nuevo"].tria-armazon body.admin-page .admin-shell {
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: 0;
  }

  html[data-diseno="nuevo"].tria-armazon body.admin-page .admin-shell .admin-stage {
    height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)));
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)));
    padding-bottom: calc(var(--barra-movil-alto, 58px) + var(--barra-movil-fondo, 0px) + 16px);
    box-sizing: border-box;
  }

  /* ── Valoraciones a pantalla completa, como Agenda, CRM y Firmas ── */
  html[data-diseno="nuevo"].tria-armazon body #misval-dialog.agenda-dialog {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    /* Arriba deja la zona de la hora/cámara del iPhone, como Agenda (antes la dejaba el margen de la tarjeta). */
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
  }
}