/* ==========================================================================
   INTHEGRA · SaaS Mobile — capa mobile sobre inthegra-saas-theme.css   (v2)
   --------------------------------------------------------------------------
   v2 (2026-10-16, revisión UX/UI v2): M6/M7b/M14 alineados al corte de 767 px
   de las tabs (antes 639/640: el CTA y el composer flotaban entre 640 y 767),
   tab bar con estado activo y badge legibles (M5), y M15-M19 nuevos: Hoy,
   selector de día, Turno, chat y Perfil como página.
   --------------------------------------------------------------------------
   HEALTH-2479 / HEALTH-2483 · spike de la PWA 200020303.
   Definiciones: specs/HEALTH-2479/00-definiciones-mobile.md §6 (M1-M14).

   Carga DESPUÉS de inthegra-saas-theme.css (v3.12+), que ya mapea los tokens
   --inth-* a los tokens de UT (--ut-*) y de APEX (--a-*). Este archivo:
     · redefine tokens, no reglas, siempre que UT 26.1 exponga el token;
     · pisa reglas solo donde no hay token (cada una dice por qué);
     · no usa !important salvo donde UT lo usa y no deja otra salida
       (documentado en la regla).

   Estado v1: vive como static file de la app (#APP_FILES#css/...). Validado en
   dispositivo, pasa al bucket (bucket-INTH-SAAS-GLOBAL/o/css/) y se referencia
   desde BUCKET_CORE_PAR, con ?v= para versionar. Ver 04-spike.md.

   Puntos de corte (los de UT 26.1, verificados en theme_42/Core.css):
     ≤ 767px  Top Navigation Tabs pasa a barra inferior fija (t-NavTabs)
     ≤ 639px  Buttons Container "Stick to Bottom for Mobile" se ancla
     ≤ 640px  M3 (inputs) y M14 (ocultar desktop)
   ========================================================================== */


/* ==========================================================================
   M1. Safe areas
   --------------------------------------------------------------------------
   Los page templates de UT 26.1 emiten viewport-fit=cover, así que env() vale
   algo en iPhone con notch. UT ya cubre el borde inferior de las tabs
   (padding-block-end en .t-NavTabs); NO cubre los laterales (horizontal) ni
   el footer sticky cuando no hay tabs (páginas de tarea larga).
   ========================================================================== */
:root {
  --inth-safe-top:    env(safe-area-inset-top, 0px);
  --inth-safe-right:  env(safe-area-inset-right, 0px);
  --inth-safe-bottom: env(safe-area-inset-bottom, 0px);
  --inth-safe-left:   env(safe-area-inset-left, 0px);
}

@media (max-width: 767px) {
  /* Sin barra del navegador (standalone) el header queda bajo la barra de estado */
  .t-Header {
    padding-block-start: var(--inth-safe-top);
  }

  /* Orientación libre (D5): en horizontal el notch tapa los laterales */
  .t-Header-branding,
  .t-Body-main {
    padding-inline-start: var(--inth-safe-left);
    padding-inline-end:   var(--inth-safe-right);
  }

  .t-NavTabs {
    padding-inline-start: var(--inth-safe-left);
    padding-inline-end:   var(--inth-safe-right);
  }
}


/* ==========================================================================
   M2. Targets táctiles (WCAG 2.5.8 pide 24 px; el estándar INTHEGRA, 44 px)
   ========================================================================== */
@media (max-width: 767px) {
  .t-Button:not(.t-Button--hideShow),
  .a-Button,
  .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label {
    min-block-size: 44px;
  }

  /* .t-Button--hideShow es el cuadradito de las regiones colapsables: es un
     <span> decorativo (el que se toca es el título). Con 44 px quedaba como
     un cuadrado que se solapaba con el título. */
  .t-Button--icon:not(.t-Button--hideShow),
  .t-Button--noLabel:not(.t-Button--hideShow),
  .a-Button--calendar {
    min-inline-size: 44px;
  }

  /* 8 px entre targets */
  .t-ButtonRegion-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .t-ButtonRegion-buttons .t-Button {
    margin: 0;
  }
}


/* ==========================================================================
   M3. Inputs: 16 px o iOS hace zoom al enfocar (sin maximum-scale: WCAG 1.4.4)
   --------------------------------------------------------------------------
   --a-field-input-font-size es token de app_ui/Core. Las etiquetas flotantes
   (--ut-field-fl-*) se calculan sobre otro tamaño: revisar en dispositivo que
   la etiqueta no pise el valor (ver 04-spike.md).
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --a-field-input-font-size: max(16px, 1rem);
  }

  .t-Form-inputContainer :is(input, select, textarea) {
    font-size: max(16px, 1rem);
  }
}


/* ==========================================================================
   M4. Header compacto: en mobile, solo el nombre de la app
   --------------------------------------------------------------------------
   El logo de la plantilla traía una imagen de 50 px y estilos inline; ahora
   son clases (application.apx → logo). Las reglas por defecto valen para
   pantallas grandes; a ≤ 640 px queda solo el nombre.
   ========================================================================== */
.inth-m-logo {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.inth-m-logo__img {
  block-size: 32px;
  inline-size: auto;
  opacity: .85;
}

.inth-m-logo__sep {
  background: var(--inth-nav-border);
  block-size: 28px;
  display: block;
  inline-size: 1px;
}

.inth-m-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-inline-size: 0;
}

.inth-m-logo__brand {
  color: var(--inth-nav-icon);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.inth-m-logo__name {
  color: var(--inth-nav-text-active);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* .t-Header delante: UT define .t-Header-logo img { display: block } y esa
     regla (0,1,1) le gana a una clase sola */
  .t-Header .inth-m-logo__img,
  .t-Header .inth-m-logo__sep,
  .t-Header .inth-m-logo__brand {
    display: none;
  }

  /* Hasta 2 líneas: "Profesional Internación Domiciliaria" no entra en una a 390 px */
  .inth-m-logo__name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font-size: .875rem;
    line-height: 1.15;
    max-inline-size: 48vw;
    white-space: normal;
  }
}


/* ==========================================================================
   M5. Tabs inferiores (Top Navigation Tabs en pantalla chica)
   --------------------------------------------------------------------------
   UT ya las fija abajo a ≤ 767 px, con safe area inferior. Acá solo alto,
   tipografía, estado activo y badge.
   ========================================================================== */
@media (max-width: 767px) {
  /* Las tabs viven DENTRO de header.t-Header y UT las fija con position:fixed.
     inthegra-saas-theme.css (sección 3) le pone backdrop-filter al header, y
     backdrop-filter crea un bloque contenedor para los descendientes fixed:
     las tabs quedaban pegadas al header, no al borde inferior de la pantalla.
     Sin filtro, el fondo pasa a ser opaco (sin transparencia no hay nada que
     desenfocar). Verificado en el harness a 390 px. */
  .t-Header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--inth-nav-bg);
  }

  .t-NavTabs {
    --ut-navtabs-item-font-size: .75rem;
    --ut-navtabs-item-active-highlight-color: var(--inth-accent-on-dark);
    --ut-navtabs-item-active-text-color: var(--inth-nav-text-active);
    --ut-navtabs-item-text-color: var(--inth-nav-text);
    background-color: var(--inth-nav-bg);
    border-block-start: 1px solid var(--inth-nav-border);
  }

  .t-NavTabs-item {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .t-NavTabs-link {
    gap: 2px;
    justify-content: center;
    min-block-size: 56px;
  }

  .t-NavTabs-label {
    font-size: .75rem;
    line-height: 1.1;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Estado activo (v2): "pill" detrás del ícono y etiqueta en negrita. Antes
     solo cambiaba el fondo del item y casi no se notaba. */
  .t-NavTabs-link .t-Icon {
    border-radius: 16px;
    padding: 3px 18px;
    transition: background-color .15s ease;
  }

  .t-NavTabs-item.is-active .t-NavTabs-link .t-Icon {
    background-color: color-mix(in srgb, var(--inth-accent-on-dark) 28%, transparent);
  }

  .t-NavTabs-item.is-active .t-NavTabs-label {
    font-weight: 700;
  }

  /* Badge (Chat): burbuja legible, no un superíndice de 8 px. UT lo posiciona
     absoluto sobre el ícono. */
  .t-NavTabs-badge {
    background-color: var(--inth-danger);
    border-radius: 999px;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.125rem;
    min-block-size: 1.125rem;
    min-inline-size: 1.125rem;
    padding: 0 .3125rem;
  }

  /* Sin mensajes sin leer el atributo A02 llega vacío: la burbuja no se dibuja. */
  .t-NavTabs-badge:empty {
    display: none;
  }
}


/* ==========================================================================
   M6. Footer sticky (Buttons Container + "Stick to Bottom for Mobile")
   --------------------------------------------------------------------------
   theme42.js ancla la región (is-anchored) y la sube sobre las tabs
   (bottom = alto de las tabs), así que con tabs no hace falta safe area.
   Sin tabs (firma, informe) el bottom queda en 0 y sí. El foco no puede
   quedar tapado (WCAG 2.4.11): scroll-padding-bottom.

   Corte en 767 px (v2, revisión del 2026-10-16): theme42.js ancla la región
   (is-anchored → position:fixed) por debajo de 768 px, pero el CSS de UT solo
   la posiciona (bottom/left/right) por debajo de 640 px. Entre 640 y 767 px
   (celu grande en horizontal, ventanas angostas de prueba) la región quedaba
   fija SIN left/right: flotaba a media pantalla, encogida al contenido (el
   campo del chat medía 175 px) y el padding que JS le suma al pie quedaba en
   cientos de px. Acá se completa el posicionamiento hasta 767 px.
   ========================================================================== */
@media (max-width: 767px) {
  .t-ButtonRegion--stickToBottom {
    --ut-button-region-background-color: var(--inth-surface);
    --ut-button-region-border-color: var(--inth-border);
    --ut-button-region-border-radius: 0;
    --ut-button-region-box-shadow: none;
    --ut-button-region-margin: 0rem;
    border-width: 0;
    border-block-start-width: var(--ut-button-region-border-width, 1px);
    inset-inline: 0;
    padding-inline-start: var(--inth-safe-left);
    padding-inline-end: var(--inth-safe-right);
  }

  /* bottom lo pone theme42.js (alto de las tabs); top nunca debe estar fijado */
  .t-ButtonRegion--stickToBottom.is-anchored {
    inset-block-start: auto;
  }

  .t-ButtonRegion--stickToBottom .t-ButtonRegion-wrap {
    align-items: stretch;
    display: flex;
    gap: 8px;
  }

  /* Composer del chat: el botón de enviar queda abajo si el campo crece */
  .t-ButtonRegion--stickToBottom:has(textarea) .t-ButtonRegion-wrap {
    align-items: flex-end;
  }

  .t-ButtonRegion--stickToBottom .t-ButtonRegion-col--content {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  /* Se esconden solo las columnas vacías. Antes se escondían las que no tenían
     botón y el campo de mensaje del chat (p8) vive en una de ellas. */
  .t-ButtonRegion--stickToBottom .t-ButtonRegion-col:not(:has(.t-Button, .t-Form-fieldContainer, input, textarea, select)) {
    display: none;
  }

  .t-ButtonRegion--stickToBottom .t-Form-fieldContainer {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .t-ButtonRegion--stickToBottom .t-Form-fieldContainer :is(textarea, input, select) {
    inline-size: 100%;
  }

  /* Los contenedores internos del item (UT/APEX) encogen al contenido: sin
     esto el textarea del chat medía 175 px en vez de ocupar la fila */
  .t-ButtonRegion--stickToBottom :is(.t-Form-inputContainer, .t-Form-itemWrapper, .apex-item-group) {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  /* Composer: campo en píldora de 44 a 120 px (el 64 mínimo venía de UT).
     field-sizing no está en Safari: el auto-alto lo hace APEX (autoHeight). */
  .t-ButtonRegion--stickToBottom textarea {
    border-radius: 22px;
    box-sizing: border-box;
    max-block-size: 120px;
    min-block-size: 44px;
    padding: 10px 16px;
  }

  .t-ButtonRegion--stickToBottom .t-ButtonRegion-buttons {
    flex-wrap: nowrap;
  }

  .t-ButtonRegion--stickToBottom .t-Button {
    flex: 1 1 0;
  }

  /* Enviar: botón redondo de 44 px, no una columna que reparte el ancho */
  .t-ButtonRegion--stickToBottom:has(textarea) .t-Button {
    block-size: 44px;
    border-radius: 50%;
    flex: 0 0 44px;
    inline-size: 44px;
    min-inline-size: 44px;
    padding: 0;
  }

  body:not(:has(.t-NavTabs)) .t-ButtonRegion--stickToBottom,
  .pg-detalle .t-ButtonRegion--stickToBottom {
    padding-block-end: var(--inth-safe-bottom);
  }

  html {
    scroll-padding-block-end: calc(5rem + var(--inth-safe-bottom));
  }
}

/* Drawer en posición bottom: UT lo deja a ancho completo y con radio 0
   (!important en Core.css) y sin safe area en el pie. El radio superior
   solo se puede ganar con !important. */
.ui-dialog.t-Drawer--pullOutBottom {
  border-start-end-radius: var(--inth-radius-lg) !important;
  border-start-start-radius: var(--inth-radius-lg) !important;
}

.t-Drawer-footer {
  padding-block-end: var(--inth-safe-bottom);
}


/* ==========================================================================
   M7. Content Row compacto y fila entera tocable
   ========================================================================== */
@media (max-width: 767px) {
  .t-ContentRow {
    --ut-cr-title-font-size: 1rem;
    --ut-cr-title-font-weight: 600;
    --ut-cr-desc-font-size: .875rem;
    --ut-cr-misc-font-size: .8125rem;
    --ut-cr-overline-font-size: .8125rem; /* 13 px: a 11 no se lee en la calle */
    --ut-cr-wrap-padding-y: .75rem;
    --ut-cr-wrap-padding-x: .75rem;
  }

  .t-ContentRow-item {
    min-block-size: 56px;
  }

  /* Fila tocable: el link cubre toda la fila (Full Row Link) */
  .t-ContentRow-fullLink {
    min-block-size: 56px;
  }

  .t-ContentRow-title,
  .t-ContentRow-description {
    overflow-wrap: anywhere;
  }

  /* Value Attribute Pairs: UT corta la etiqueta con puntos suspensivos y a
     390 px se perdía "Especialidad" y "Nota de coordinación" */
  .t-AVPList {
    --ut-avp-label-width: 9.5rem;
  }

  .t-AVPList-label {
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
    white-space: normal;
  }
}


/* ==========================================================================
   M7b. Content Row en pantalla chica
   --------------------------------------------------------------------------
   UT apila contenido, hora y acciones en una columna a < 640 px: el menú ⋯ y
   el badge quedaban debajo del texto. Acá:
     · badge (sin avatar): arriba de la fila, a lo ancho del texto;
     · hora a la izquierda y acciones (⋯) a la derecha, centradas;
     · con avatar (chat): badge chico al final, sin columna fija.
   Corte en 767 px (v2): es el de las tabs inferiores; entre 640 y 767 UT
   dibuja el badge en una columna fija a la izquierda del avatar.
   ========================================================================== */
@media (max-width: 767px) {
  .t-ContentRow-wrap {
    flex-wrap: wrap;
  }

  .t-ContentRow-wrap:not(:has(.t-ContentRow-avatar)) .t-ContentRow-badge {
    flex: 0 0 100%;
    inline-size: auto;
    margin: 0 0 .25rem;
    order: -1;
  }

  /* Chat: el contador va al final de la fila, no a la izquierda del avatar */
  .t-ContentRow-wrap:has(.t-ContentRow-avatar) .t-ContentRow-badge {
    inline-size: auto;
    margin-inline-start: .5rem;
    order: 3;
  }

  .t-ContentRow-body {
    align-items: center;
    column-gap: .5rem;
    display: grid;
    flex: 1 1 12rem;
    grid-template-areas:
      "content actions"
      "misc    actions";
    grid-template-columns: minmax(0, 1fr) auto;
    min-inline-size: 0;
  }

  .t-ContentRow-content {
    grid-area: content;
  }

  .t-ContentRow-misc {
    grid-area: misc;
    margin-inline-start: 0;
  }

  .t-ContentRow-actions {
    grid-area: actions;
    margin: 0;
  }

}

/* Cabecera de región con buscador (ej. Sucursales): que el campo no se
   salga de la pantalla */
@media (max-width: 640px) {
  .t-Region-header {
    flex-wrap: wrap;
  }

  .t-Region-headerItems--buttons {
    flex: 1 1 100%;
    min-inline-size: 0;
  }

  .t-Region-headerItems--buttons :is(input, select, .t-Form-fieldContainer, .t-Form-inputContainer, .t-Form-itemWrapper) {
    inline-size: 100%;
    max-inline-size: 100%;
  }
}


/* ==========================================================================
   M8. Hover solo con puntero
   --------------------------------------------------------------------------
   En táctil el :hover queda "pegado" tras el toque. Los hover del CSS SaaS y
   de UT no se pueden acotar desde acá sin duplicarlos; v1 neutraliza el de los
   botones (la superficie que más se toca) cuando el dispositivo no tiene
   hover. El resto (tabs, filas) queda para H4: integrar la acotación con
   @media (hover: hover) en el propio CSS SaaS.
   ========================================================================== */
@media (hover: none) {
  .t-Button:hover:not(:active),
  .a-Button:hover:not(:active) {
    --a-button-state-background-color: initial;
    --a-button-state-text-color: initial;
    --a-button-state-border-color: initial;
    --a-button-state-shadow: initial;
  }
}


/* ==========================================================================
   M9. Modo oscuro: DIFERIDO
   --------------------------------------------------------------------------
   Retirado de la v1 (2026-10-15): el modo oscuro es opcional y va al final.
   El inventario de tokens y los valores probados quedan en 04-spike.md §4 y
   en el historial de git (commit 6f60d110) para retomarlo.
   ========================================================================== */


/* ==========================================================================
   M10. Estados: vacío y sin conexión
   --------------------------------------------------------------------------
   Vacío: "When No Data Found" del reporte con HTML mínimo
   <div class="inth-empty"><span class="fa ..."></span><p>Mensaje</p></div>
   Sin conexión: J2 (inthegra-saas-mobile.js, H3) solo agrega body.is-offline;
   el aviso es CSS para no depender del JS para dibujarlo.
   ========================================================================== */
.inth-empty {
  align-items: center;
  color: var(--inth-text-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}

.inth-empty .fa,
.inth-empty .t-Icon {
  color: var(--inth-text-subtle);
  font-size: 2rem;
}

.inth-empty p {
  margin: 0;
}

body.is-offline::before {
  background: var(--inth-warning);
  color: #ffffff;
  content: "Sin conexión. Reintentá cuando vuelva la señal.";
  font-size: .875rem;
  font-weight: 600;
  inset-block-start: 0;
  inset-inline: 0;
  padding: calc(var(--inth-safe-top) + 8px) 16px 8px;
  position: sticky;
  text-align: center;
  z-index: 900;
}


/* ==========================================================================
   M11. Alturas y scroll
   --------------------------------------------------------------------------
   dvh en vez de vh (barras dinámicas de Safari). overscroll contain: sin el
   rebote que arrastra el header en la PWA instalada.
   ========================================================================== */
html {
  overscroll-behavior-y: contain;
}

body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* sin demora ni zoom por doble toque */
}

/* En táctil no hay hover: el feedback es el toque */
@media (hover: none) {
  :where(a, button, .t-Button, label):active {
    opacity: .7;
  }
}

@media (max-width: 767px) {
  .t-Body-main {
    min-block-size: 100dvh;
  }
}


/* ==========================================================================
   M12. Transiciones entre pantallas (mejora progresiva)
   --------------------------------------------------------------------------
   APEX recarga la página completa. View Transitions entre documentos:
   Chrome 126+, Safari 18.2+. Sin soporte no pasa nada.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .15s;
  }
}


/* ==========================================================================
   M13. Modo instalado (standalone)
   --------------------------------------------------------------------------
   Ya instalada, "Instalar app" no tiene sentido. APEX lo oculta solo cuando
   isInstallable() da false; esto cubre el instante antes de que corra.
   ========================================================================== */
@media (display-mode: standalone) {
  [href="#action$a-pwa-install"],
  .a-pwaInstall {
    display: none !important; /* APEX muestra/oculta por JS con display inline */
  }

}

/* Ícono "Instalar app" de la barra superior: cuando APEX oculta su link (ya instalada, o el
   dispositivo no puede instalar) el <li> no debe dejar un hueco entre la campana y el avatar */
.t-NavigationBar-item.inth-instalar:has(> a:is([hidden], [style*="display: none"])) {
  display: none;
}

@media (display-mode: standalone) {
  .t-NavigationBar-item.inth-instalar {
    display: none;
  }
}


/* ==========================================================================
   M5b. Recuperar alto (feedback de revisión UX, 2026-10-16)
   --------------------------------------------------------------------------
   · Páginas de pestaña (clase pg-tab): el título repite el nombre de la tab
     activa. Se oculta a la vista pero queda para el lector de pantalla.
   · Páginas de detalle (clase pg-detalle: Turno, Conversación): sin tabs
     inferiores, como las apps nativas. NO con display:none: theme42.js mide
     las tabs con jQuery .outerHeight(), y jQuery mide un elemento con
     display:none mostrándolo un instante (display:block, sin flex), con lo
     que los 4 ítems se apilan (~238 px). Ese valor iba al `bottom` de la
     región fija (CTA de Turno y composer del chat flotaban a 238 px del
     borde) y al padding del pie (353 px de vacío). Confirmado en el iPhone
     (v3). Con alto 0 y sin padding ni borde, offsetHeight da 0 y el botón
     queda en bottom: 0.
   · Pie de página (versión de la app): fuera del flujo en mobile. El elemento
     se queda porque theme42.js le agrega el padding que evita que el botón
     fijo tape el final del contenido.
   ========================================================================== */
@media (max-width: 767px) {
  .pg-tab .t-Body-title {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
  }

  .pg-detalle .t-NavTabs {
    block-size: 0;
    border-width: 0;
    min-block-size: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .t-Footer-body,
  .t-Footer-top {
    display: none;
  }
}

/* Header y tabs quietos en las transiciones entre páginas (M12) */
@media (prefers-reduced-motion: no-preference) {
  .t-Header {
    view-transition-name: inth-hdr;
  }

  [id$="_navtabs"] {
    view-transition-name: inth-nav;
  }
}


/* ==========================================================================
   M15. Hoy: la hora manda, el estado se ve en el borde (v2, rehecho en v3)
   --------------------------------------------------------------------------
   Para un profesional en la calle lo primero es "a qué hora", después qué
   especialidad, quién y dónde. El estado es el borde lateral de color (clase
   turno--<estado> que pone la región con "Item CSS Classes") y además el chip
   con texto, para no depender solo del color. Todo con el Content Row nativo.

   v3 (iPhone, filas de ~125 px con la hora y el nombre partidos): la fila es
   un grid de 4 columnas y `display: contents` en .t-ContentRow-body y
   -content deja a cada pieza (overline, título, descripción, hora, acción,
   chip) como celda propia:

       hora | especialidad  | chip | mapa
       hora | paciente (2 columnas)  | mapa
       hora | dirección (2 columnas) | mapa

   La hora llega como "08:00" + salto de línea + "09:00" (la consulta lo
   arma): con white-space: pre-line cada una queda en su línea y ::first-line
   le da el tamaño grande a la de inicio.
   ========================================================================== */
@media (max-width: 767px) {
  .pg-hoy .t-ContentRow-wrap {
    --turno-c: var(--inth-border-strong);
    align-items: center;
    border-inline-start: 4px solid var(--turno-c);
    column-gap: .75rem;
    display: grid;
    grid-template-areas:
      "hora esp chip mapa"
      "hora pac pac  mapa"
      "hora dir dir  mapa";
    grid-template-columns: 3.75rem minmax(0, 1fr) auto 44px;
    row-gap: 2px;
  }

  .pg-hoy .t-ContentRow-wrap.turno--en-curso  { --turno-c: var(--inth-info); }
  .pg-hoy .t-ContentRow-wrap.turno--pendiente { --turno-c: var(--inth-warning); }
  .pg-hoy .t-ContentRow-wrap.turno--realizado { --turno-c: var(--inth-success); }

  .pg-hoy .t-ContentRow-body,
  .pg-hoy .t-ContentRow-content {
    display: contents;
  }

  .pg-hoy .t-ContentRow-misc {
    align-self: center;
    color: var(--inth-text-muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    grid-area: hora;
    line-height: 1.35;
    margin: 0;
    text-align: start;
    white-space: pre-line;
  }

  .pg-hoy .t-ContentRow-misc::first-line {
    color: var(--inth-text-head);
    font-size: 1.125rem;
    font-weight: 700;
  }

  .pg-hoy .t-ContentRow-overline {
    color: var(--inth-text-muted);
    font-size: .8125rem;
    grid-area: esp;
    min-inline-size: 0;
  }

  .pg-hoy .t-ContentRow-title {
    font-size: 1rem;
    font-weight: 600;
    grid-area: pac;
    min-inline-size: 0;
  }

  .pg-hoy .t-ContentRow-description {
    color: var(--inth-text-muted);
    font-size: .8125rem;
    grid-area: dir;
    min-inline-size: 0;
  }

  /* Chip de estado: junto a la especialidad (gana a M7b, que lo manda arriba) */
  .pg-hoy .t-ContentRow-wrap:not(:has(.t-ContentRow-avatar)) .t-ContentRow-badge {
    grid-area: chip;
    inline-size: auto;
    justify-self: end;
    margin: 0;
    min-inline-size: 0;
  }

  /* Atajo "Cómo llegar": la única columna fija de la derecha */
  .pg-hoy .t-ContentRow-actions {
    grid-area: mapa;
    justify-self: end;
    margin: 0;
  }

  .pg-hoy .t-ContentRow-actions .t-Button {
    min-block-size: 44px;
    min-inline-size: 44px;
  }
}


/* ==========================================================================
   M16. Selector de día de Hoy: ‹ fecha › (v2, rehecho en v3)
   --------------------------------------------------------------------------
   Reemplaza a las pills Ayer/Hoy/Mañana + date picker, que hacían lo mismo.
   Tres piezas nativas en la región: botón anterior (slot previous), el date
   picker (cuerpo) y botones siguiente y Hoy (slot next).

   v3 (iPhone): en WebKit el item de fecha conservaba su ancho intrínseco
   (min-width: auto del input) y empujaba "›" fuera de la pantalla. Grid con
   minmax(0, 1fr) y min-width: 0 en cada nivel hasta el input; el botón del
   calendario conserva sus 44 px (M2).
   ========================================================================== */
.inth-pager {
  align-items: center;
  display: grid;
  gap: 4px;
  grid-template-columns: 44px minmax(0, 1fr) 44px auto;
  max-inline-size: 100%;
  padding: 8px 12px;
}

.inth-pager > * {
  min-inline-size: 0;
}

.inth-pager .t-Form-fieldContainer {
  inline-size: 100%;
  margin: 0;
  max-inline-size: 100%;
  padding: 0;
}

.inth-pager :is(.t-Form-inputContainer, .t-Form-itemWrapper, .apex-item-group) {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.inth-pager input {
  font-weight: 600;
  inline-size: 100%;
  min-inline-size: 0;
  text-align: center;
}


/* ==========================================================================
   M17. Turno: nota de coordinación, stepper y espacios (v2)
   ========================================================================== */
.nota-coord {
  align-items: flex-start;
  background: #fff7e6;
  background: color-mix(in srgb, var(--inth-warning) 12%, var(--inth-surface));
  border: 1px solid #f0d9a8;
  border: 1px solid color-mix(in srgb, var(--inth-warning) 40%, var(--inth-surface));
  border-radius: var(--inth-radius);
  color: var(--inth-text);
  display: flex;
  gap: 10px;
  margin: 12px 16px;
  padding: 12px 14px;
}

.nota-coord .fa {
  color: var(--inth-warning);
  font-size: 1.25rem;
  line-height: 1.3;
}

.nota-coord__titulo {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.nota-coord__texto {
  display: block;
  font-size: .9375rem;
  line-height: 1.4;
  margin-block-start: 2px;
}

/* "Datos de la visita": sin el aire muerto bajo el título de la región */
.pg-detalle .t-Region-header {
  min-block-size: 0;
  padding-block: .5rem .25rem;
}

.pg-detalle .t-Region-body {
  padding-block-start: 0;
}


/* ==========================================================================
   M18. Chat: mensajes consecutivos del mismo emisor se agrupan (v2)
   --------------------------------------------------------------------------
   La consulta marca con la clase inth-msg--cont al mensaje que sigue a otro
   del mismo emisor (Comment Class). Se queda sin avatar ni "Coordinación ·
   Hoy 10:38": ocupa el lugar del avatar para no correrse.
   ========================================================================== */
.t-Comments-item.inth-msg--cont .t-Comments-icon {
  visibility: hidden;
}

.t-Comments-item.inth-msg--cont .t-Comments-info {
  display: none;
}

/* Al abrir la conversación el último mensaje se trae a la vista (scrollIntoView, 'nearest'):
   el margen evita que quede tapado por el redactor fijo de abajo. */
.pg-detalle .t-Comments-item {
  scroll-margin-block-end: 7rem;
}


/* ==========================================================================
   M19. Perfil como página (v2, ajustado en v3)
   --------------------------------------------------------------------------
   Antes un drawer lateral con tira de página atrás. Ahora página de tab (clase
   pg-perfil): el guardado queda en el pie fijo (stickToBottom, M6) y el espacio
   de abajo lo reserva theme42.js.

   v3 (iPhone): el input de archivo nativo salía crudo ("Seleccionar archivo /
   ningún archivo sel…" cortado); Guardar era chico y quedaba a la izquierda.
   Cerrar sesión no va acá: ya está en el nav bar.
   ========================================================================== */
.pg-perfil input[type="file"] {
  font-size: 0; /* oculta el "ningún archivo seleccionado" */
  max-inline-size: 100%;
}

.pg-perfil input[type="file"]::file-selector-button {
  background: var(--inth-surface);
  border: 1px solid var(--inth-border-strong);
  border-radius: var(--inth-radius);
  color: var(--inth-text);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  min-block-size: 44px;
  padding: 0 16px;
}

.inth-perfil__cuenta {
  display: grid;
  gap: 8px;
}

.inth-perfil__cuenta .t-Button {
  inline-size: 100%;
  justify-content: center;
}

/* Botón único del pie fijo (Guardar, Marcar llegada): a todo el ancho */
.t-ButtonRegion--stickToBottom:not(:has(textarea)) .t-ButtonRegion-col:has(.t-Button) {
  flex: 1 1 auto;
}

.t-ButtonRegion--stickToBottom:not(:has(textarea)) .t-ButtonRegion-buttons {
  inline-size: 100%;
}


/* ==========================================================================
   M20. Pendientes: info arriba, acción abajo (v3)
   --------------------------------------------------------------------------
   iPhone: "Completar informe" ocupaba ~45 % del ancho y partía el nombre y la
   fecha; "Completar informe" y "Firmar" medían distinto. Dos niveles:
   chip → paciente / horario a todo el ancho → fila de acciones con la
   principal llena (mismo ancho siempre, 44 px) y el ⋮ de 44 px.
   La principal es la acción de texto; el ⋮ es la de solo ícono.
   ========================================================================== */
@media (max-width: 767px) {
  .pg-pendientes .t-ContentRow-body {
    grid-template-areas:
      "content"
      "misc"
      "actions";
    grid-template-columns: minmax(0, 1fr);
    row-gap: .5rem;
  }

  .pg-pendientes .t-ContentRow-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
  }

  .pg-pendientes .t-ContentRow-actions .t-Button:not(.t-Button--icon):not(.t-Button--noLabel) {
    --a-button-type-background-color: var(--inth-primary);
    --a-button-type-border-color: var(--inth-primary);
    --a-button-type-text-color: #fff;
    --a-button-hover-background-color: var(--inth-primary-hover);
    --a-button-hover-border-color: var(--inth-primary-hover);
    --a-button-hover-text-color: #fff;
    align-items: center;
    border-radius: var(--inth-radius);
    display: inline-flex;
    flex: 1 1 auto;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: 1rem;
    text-align: center;
  }

  /* El template del botón siempre dibuja los dos <span class="t-Icon"> aunque la
     acción no tenga ícono; el de la izquierda ocupa lugar y corría el texto. */
  .pg-pendientes .t-ContentRow-actions .t-Button .t-Icon:not([class*="fa-"]) {
    display: none;
  }

  .pg-pendientes .t-ContentRow-actions .t-Button .t-Button-label {
    flex: 0 1 auto;
    margin: 0;
    text-align: center;
  }

  .pg-pendientes .t-ContentRow-actions .t-Button--icon,
  .pg-pendientes .t-ContentRow-actions .t-Button--noLabel {
    flex: 0 0 44px;
  }
}


/* Header y área de la barra de estado del mismo color (iPhone: se veía una
   línea clara entre la status bar y el header, dos fondos distintos) */
@media (max-width: 767px) {
  html {
    background-color: var(--inth-nav-bg);
  }

  .t-Header {
    border-block-end-width: 0;
    border-block-start-width: 0;
  }

  .inth-m-logo__name {
    max-inline-size: 58vw;
  }
}


/* ==========================================================================
   M14. Ocultar lo de escritorio a ≤ 640 px
   ========================================================================== */
@media (max-width: 640px) {
  .t-Header-controls,
  .t-Body-nav {
    display: none;
  }
}

/* El breadcrumb no se usa en ninguna pantalla (solo título y botón volver).
   Hasta 767 px, el corte de las tabs: entre 640 y 767 quedaba en el DOM con
   48 px de alto, tapado. */
@media (max-width: 767px) {
  .t-BreadcrumbRegion-breadcrumb {
    display: none;
  }
}


/* ==========================================================================
   M16. Firma e informe (pantallas de tarea larga, sin tabs)
   --------------------------------------------------------------------------
   El pad de firma ocupa la pantalla disponible y desactiva el gesto de scroll
   sobre sí mismo (touch-action: none): sin eso el trazo vertical scrollea la
   página en vez de dibujar. Fondo blanco fijo: la firma se imprime sobre papel.
   ========================================================================== */
.inth-firma__ayuda,
.inth-informe__paciente {
  color: var(--inth-text-muted);
  margin-block: .5rem;
}

.inth-firma__pad {
  background-color: #fff;
  border: 2px dashed var(--inth-border-strong);
  border-radius: var(--inth-radius);
  block-size: 55dvh;
  display: block;
  inline-size: 100%;
  min-block-size: 14rem;
  touch-action: none;
}



/* ==========================================================================
   M21. Piel "Healthsuite" (v4, 2026-10-20)
   --------------------------------------------------------------------------
   Referencia: los mockups healthapp_profesional_completa / Healthsuite_presional
   (azul, fondo claro, tarjetas de 24 px con sombra suave, header claro con el
   borde inferior redondeado, tabs blancas). Todo con tokens y reglas sobre los
   componentes nativos; no hay Tailwind ni JS.

   Decisiones:
     · Poppins se mantiene (identidad INTHEGRA). Solo hay 400/500/600: lo que el
       mockup pide en 700/800 va en 600.
     · Azul de acción #2563eb y no #3b82f6: el blanco sobre #3b82f6 da 3,7:1 y
       los botones llevan texto chico; #2563eb da 5,2:1 (WCAG AA).
     · Sin modo oscuro (M9 sigue diferido).
     · Sin "Dr.": el saludo usa el nombre tal cual lo trae P_NOMBRE_COMPLETO.

   Va al final y gana por orden: los tokens --inth-* se redefinen sobre :root y
   los --ut-* / --a-* de inthegra-saas-theme.css los toman de ahí.
   ========================================================================== */
:root {
  --inth-bg:            #f4f7fb;
  --inth-surface:       #ffffff;
  --inth-surface-muted: #f8fafc;
  --inth-surface-hover: #f1f5f9;
  --inth-border:        #e2e8f0;
  --inth-border-strong: #cbd5e1;
  --inth-border-hover:  #94a3b8;
  --inth-row-border:    #f1f5f9;

  --inth-text:        #0f172a;
  --inth-text-head:   #1e293b;
  --inth-text-muted:  #64748b;
  --inth-text-subtle: #94a3b8;

  --inth-brand:         #2563eb;
  --inth-primary:       #2563eb;
  --inth-primary-hover: #1d4ed8;
  --inth-primary-soft:  #dbeafe;
  --inth-link:          #2563eb;
  --inth-link-hover:    #1d4ed8;

  --inth-info:          #2563eb;
  --inth-info-hover:    #1d4ed8;
  --inth-success:       #059669;
  --inth-success-hover: #047857;

  /* Header y tabs claros (antes grafito/navy) */
  --inth-nav-bg:          #ffffff;
  --inth-nav-border:      #e2e8f0;
  --inth-nav-text:        #64748b;
  --inth-nav-icon:        #64748b;
  --inth-nav-text-active: #0f172a;
  --inth-nav-hover:       #f1f5f9;
  --inth-nav-active:      #eff6ff;

  --inth-radius-xl: 28px;
  --inth-radius-lg: 24px;
  --inth-radius:    16px;
  --inth-radius-sm: 10px;

  --inth-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --inth-shadow:    0 10px 40px -10px rgba(15, 23, 42, .08);
  --inth-shadow-float: 0 10px 25px -5px rgba(37, 99, 235, .4);
  --inth-shadow-hot:       var(--inth-shadow-float);
  --inth-shadow-hot-hover: 0 12px 28px -5px rgba(37, 99, 235, .5);
}

/* --- Header: claro, borde inferior redondeado y saludo ------------------- */
.inth-m-saludo {
  display: none;
}

@media (max-width: 767px) {
  .t-Header {
    background: var(--inth-surface);   /* shorthand: saca el filete de acento */
    border-radius: 0 0 var(--inth-radius-xl) var(--inth-radius-xl);
    box-shadow: var(--inth-shadow);
    color: var(--inth-text);
  }

  .t-Header-branding {
    background: transparent;
  }

  .t-Header-logo,
  .t-Header-logo-link {
    color: var(--inth-text);
  }

  /* Saludo en lugar de logo + nombre de la app */
  .t-Header .inth-m-logo__img,
  .t-Header .inth-m-logo__sep,
  .t-Header .inth-m-logo__text {
    display: none;
  }

  .inth-m-saludo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-inline-size: 0;
  }

  .inth-m-saludo__hola {
    color: var(--inth-text-muted);
    font-size: .75rem;
    font-weight: 500;
  }

  .inth-m-saludo__nombre {
    color: var(--inth-text);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    max-inline-size: 56vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Botones del header sobre fondo claro (el CSS SaaS los pinta para fondo oscuro) */
  .t-Header .t-Button--header {
    color: var(--inth-text-muted);
  }

  .t-Header .t-Button--header:hover,
  .t-Header .t-Button--header:focus-visible {
    background-color: var(--inth-surface-hover);
    color: var(--inth-text);
  }

  /* Campana: círculo suave; con notificaciones sin leer, punto rojo */
  .t-NavigationBar-item:not(.has-username) > .t-Button--header {
    background-color: var(--inth-surface-muted);
    border-radius: 50%;
    min-block-size: 40px;
    min-inline-size: 40px;
    position: relative;
  }

  .t-NavigationBar-item.resalta-rojo > .t-Button--header::after {
    background-color: var(--inth-danger);
    block-size: 10px;
    border: 2px solid var(--inth-surface);
    border-radius: 50%;
    content: "";
    inline-size: 10px;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    position: absolute;
  }

  /* Avatar con aro azul suave (el CSS SaaS lo dibuja con un aro blanco) */
  .t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar > .t-Icon {
    background: var(--inth-primary-soft);
    block-size: 36px;
    box-shadow: 0 0 0 2px var(--inth-primary-soft);
    inline-size: 36px;
  }

  .t-NavigationBar-item.has-username:is(.avatar-foto, .avatar-iniciales) .t-Button--navBar > .t-Icon::before {
    color: var(--inth-primary);
    font-size: 13px;
  }
}

/* --- Tabs inferiores: blancas, con el activo en azul ---------------------- */
@media (max-width: 767px) {
  .t-NavTabs {
    --ut-navtabs-item-active-text-color: var(--inth-primary);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .05);
  }

  .t-NavTabs-item.is-active .t-NavTabs-link .t-Icon {
    background-color: color-mix(in srgb, var(--inth-primary) 12%, transparent);
    color: var(--inth-primary);
  }

  .t-NavTabs-item.is-active .t-NavTabs-label {
    color: var(--inth-primary);
  }
}

/* --- Botones: primario azul con sombra "float", CTA grande ---------------- */
.t-Button--hot {
  font-weight: 600;
}

@media (max-width: 767px) {
  /* Pie fijo de una acción (Marcar llegada, Guardar): botón grande sobre un
     degradado del color de fondo, sin barra blanca con borde (como el mockup).
     El composer del chat conserva su barra. */
  .t-ButtonRegion--stickToBottom:not(:has(textarea)) {
    --ut-button-region-background-color: transparent;
    background: linear-gradient(to top, var(--inth-bg) 62%, transparent);
    border-block-start-width: 0;
    padding-block-start: 1.25rem;
  }

  .t-ButtonRegion--stickToBottom:not(:has(textarea)) .t-Button {
    border-radius: var(--inth-radius);
    min-block-size: 52px;
  }

  .t-ButtonRegion--stickToBottom:not(:has(textarea)) .t-Button--hot {
    box-shadow: var(--inth-shadow-float);
  }
}

/* --- Chips de estado: suaves, redondos --------------------------------- */
.t-ContentRow-badge .t-Badge {
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding-inline: .625rem;
  text-transform: uppercase;
}

.t-ContentRow-badge .t-Badge--success {
  background-color: color-mix(in srgb, var(--inth-success) 14%, #fff);
  color: var(--inth-success-hover);
}

.t-ContentRow-badge .t-Badge--info {
  background-color: var(--inth-primary-soft);
  color: var(--inth-primary-hover);
}

.t-ContentRow-badge .t-Badge--warning {
  background-color: color-mix(in srgb, var(--inth-warning) 16%, #fff);
  color: var(--inth-warning-hover);
}

.t-ContentRow-badge .t-Badge--danger {
  background-color: color-mix(in srgb, var(--inth-danger) 12%, #fff);
  color: var(--inth-danger-hover);
}

/* --- Hoy y Pendientes: cada fila es una tarjeta --------------------------- */
@media (max-width: 767px) {
  :is(.pg-hoy, .pg-pendientes, .pg-chat) .t-Region:has(.t-ContentRow) {
    background: transparent;
    border-width: 0;
    box-shadow: none;
  }

  :is(.pg-hoy, .pg-pendientes, .pg-chat) .t-ContentRow {
    display: grid;
    gap: 12px;
    padding: 4px 0 8px;
  }

  :is(.pg-hoy, .pg-pendientes, .pg-chat) .t-ContentRow-item {
    background: var(--inth-surface);
    border: 1px solid var(--inth-row-border);
    border-radius: var(--inth-radius-lg);
    box-shadow: var(--inth-shadow);
    overflow: hidden;
  }

  /* Hoy: sin el borde lateral de estado (lo dice el chip); la hora se separa
     con un filete vertical, como en el mockup */
  /* Sin position: el link de fila entera (.t-ContentRow-fullLink) es absoluto y
     una fila posicionada lo taparía: la tarjeta dejaría de abrir el turno */
  .pg-hoy .t-ContentRow-wrap {
    border-inline-start-width: 0;
    column-gap: .875rem;
    padding: .875rem 1rem;
  }

  .pg-hoy .t-ContentRow-wrap::before {
    align-self: stretch;
    background: var(--inth-border);
    content: "";
    grid-area: hora;
    inline-size: 1px;
    justify-self: end;
    margin-inline-end: -.4375rem;
  }

  .pg-hoy .t-ContentRow-misc {
    padding-inline-end: .5rem;
  }

  .pg-hoy .t-ContentRow-overline {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .pg-hoy .t-ContentRow-title {
    color: var(--inth-text);
    font-weight: 600;
  }

  /* "Cómo llegar": botón circular suave */
  .pg-hoy .t-ContentRow-actions .t-Button {
    --a-button-type-background-color: var(--inth-primary-soft);
    --a-button-type-border-color: transparent;
    --a-button-type-text-color: var(--inth-primary);
    --a-button-type-shadow: none;
    border-radius: 50%;
  }
}

/* --- Selector de día de Hoy: tarjeta con fecha centrada -------------------- */
.inth-pager {
  background: var(--inth-surface);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  margin-block: 4px 12px;
}

.inth-pager .t-Button--noUI {
  --a-button-type-text-color: var(--inth-text-muted);
  border-radius: 50%;
}

.inth-pager .t-Form-fieldContainer :is(input, .a-Button) {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.inth-pager input {
  color: var(--inth-text);
  font-size: 1.0625rem;
  font-weight: 600;
}

.inth-pager .t-Button:not(.t-Button--noUI):not(.t-Button--icon) {
  --a-button-type-background-color: var(--inth-primary-soft);
  --a-button-type-border-color: transparent;
  --a-button-type-text-color: var(--inth-primary);
  --a-button-type-shadow: none;
  --a-button-hover-background-color: var(--inth-primary-soft);
  --a-button-hover-text-color: var(--inth-primary-hover);
  --a-button-hover-border-color: transparent;
  border-radius: 999px;
  font-weight: 600;
}



/* ==========================================================================
   M22. Fase 2 de la piel Healthsuite (2026-10-20)
   --------------------------------------------------------------------------
   Tira de días y buscador (Hoy), métricas (Pendientes), línea de tiempo
   (Historial) y notificaciones como hoja inferior. UT 26.1 deja 8 px de
   padding lateral a < 640 px: se sube a 16 px para que las tarjetas respiren
   como en el mockup (token propio de UT, no una regla).
   ========================================================================== */
:root {
  --ut-xs-body-content-padding-x: 1rem;
}

/* La nota de coordinación ya no necesita margen lateral propio */
.nota-coord {
  margin-inline: 0;
}

/* --- Hoy: buscador -------------------------------------------------------- */
.inth-buscador .t-Form-fieldContainer {
  margin: 0;
  padding: 0;
}

.inth-buscador :is(.t-Form-inputContainer, .t-Form-itemWrapper, .apex-item-group) {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.inth-buscador input {
  background-color: var(--inth-surface);
  border: 1px solid var(--inth-row-border);
  border-radius: var(--inth-radius);
  box-shadow: var(--inth-shadow);
  inline-size: 100%;
  min-block-size: 48px;
}

/* --- Hoy: tira de días ------------------------------------------------------ */
.inth-dias {
  background: var(--inth-surface);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  display: flex;
  gap: 4px;
  margin-block: 8px;
  padding: 8px;
}

.inth-dia {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--inth-radius);
  color: var(--inth-text-muted);
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  font-family: inherit;
  gap: 2px;
  justify-content: center;
  min-block-size: 64px;
  min-inline-size: 0;
  padding: 6px 0;
  position: relative;
  transition: background-color .15s ease, transform .15s ease;
}

.inth-dia__sem {
  font-size: .75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.inth-dia__num {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Hoy, cuando no es el elegido: el número en azul y un punto */
.inth-dia.is-hoy:not(.is-active) .inth-dia__num {
  color: var(--inth-primary);
}

.inth-dia.is-hoy:not(.is-active)::after {
  background: var(--inth-primary);
  block-size: 4px;
  border-radius: 50%;
  content: "";
  inline-size: 4px;
  inset-block-end: 5px;
  position: absolute;
}

.inth-dia.is-active {
  background: var(--inth-primary);
  box-shadow: var(--inth-shadow-float);
  color: #fff;
  transform: scale(1.05);
}

.inth-dia:focus-visible {
  outline: 2px solid var(--inth-primary);
  outline-offset: 2px;
}

/* Sin las flechas, el pager queda con el selector de fecha y "Hoy" */
.inth-pager {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* --- Pendientes: métricas ---------------------------------------------------- */
.inth-metricas .t-MetricCards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 4px 12px;
}

.inth-metricas .t-MetricCard {
  background-color: var(--inth-surface);
  border: 1px solid var(--inth-row-border);
  border-block-end: 4px solid var(--inth-primary);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  inline-size: 100%;
  padding: .75rem .5rem;
  text-align: center;
}

.inth-metricas .t-MetricCard::after {
  display: none;
}

.inth-metricas .t-MetricCards-item:nth-child(2) .t-MetricCard {
  border-block-end-color: var(--inth-success);
}

.inth-metricas .t-MetricCards-item:nth-child(3) .t-MetricCard {
  border-block-end-color: var(--inth-warning);
}

.inth-metricas .t-MetricCard-content {
  align-items: center;
  flex-direction: column-reverse;
}

.inth-metricas .t-MetricCard-title {
  color: var(--inth-text-muted);
  font-size: .75rem;
  font-weight: 500;
}

.inth-metricas .t-MetricCard-metric {
  color: var(--inth-text);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.75rem;
}

/* --- Historial: línea de tiempo en tarjetas ----------------------------------- */
.inth-hist-paciente {
  align-items: center;
  background: var(--inth-surface);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  display: flex;
  font-weight: 600;
  gap: 12px;
  margin-block: 8px 12px;
  padding: 14px 16px;
}

.inth-hist-paciente .fa {
  color: var(--inth-primary);
}

.pg-historial .t-Timeline {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-historial .t-Timeline-item {
  background: var(--inth-surface);
  border: 1px solid var(--inth-row-border);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  overflow: hidden;
}

.pg-historial .t-Timeline-wrap {
  grid-template-areas:
    "timeline-user"
    "timeline-content";
  grid-template-columns: minmax(0, 1fr);
  padding: 14px 16px;
}

/* El detalle es texto clínico: se muestra entero (UT lo corta en una línea) */
.pg-historial .t-Timeline-title,
.pg-historial .t-Timeline-desc,
.pg-historial .t-Timeline-username,
.pg-historial .t-Timeline-date {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.pg-historial .t-Timeline-username {
  font-weight: 600;
}

.pg-historial .t-Timeline-date {
  color: var(--inth-text-muted);
  font-size: .8125rem;
}

.pg-historial .t-Timeline-title {
  font-size: .9375rem;
  font-weight: 600;
}

.pg-historial .t-Timeline-desc {
  color: var(--inth-text-muted);
  font-size: .875rem;
  line-height: 1.45;
  margin-block: 4px 0;
}

.pg-historial .t-Timeline-typeWrap {
  margin-block-end: 6px;
}

/* --- Notificaciones y Posponer: hoja inferior (30rem la pone el template option Drawer md) --- */
.ui-dialog.t-Drawer--pullOutBottom {
  box-shadow: 0 -10px 40px -10px rgba(15, 23, 42, .25);
}


/* ==========================================================================
   M23. Correcciones de la revisión en el iPhone (2026-10-20)
   ========================================================================== */
@media (max-width: 767px) {
  /* Hoy: el chip de estado va solo en su renglón; con la especialidad al lado
     (UPPERCASE, "INTERNACIÓN DOMICILIARIA") no entraban y se pisaban */
  .pg-hoy .t-ContentRow-wrap {
    grid-template-areas:
      "hora chip mapa"
      "hora esp  mapa"
      "hora pac  mapa"
      "hora dir  mapa";
    grid-template-columns: 3.75rem minmax(0, 1fr) 44px;
  }

  .pg-hoy .t-ContentRow-wrap:not(:has(.t-ContentRow-avatar)) .t-ContentRow-badge {
    justify-self: start;
  }

  .pg-hoy .t-ContentRow-overline {
    letter-spacing: .02em;
  }

  /* "Cómo llegar": el ícono centrado en el círculo */
  .pg-hoy .t-ContentRow-actions .t-Button {
    align-items: center;
    block-size: 44px;
    display: inline-flex;
    inline-size: 44px;
    justify-content: center;
    padding: 0;
  }

  .pg-hoy .t-ContentRow-actions .t-Button .t-Icon {
    margin: 0;
  }
}

/* Pendientes: UT da 12,5 rem de ancho base a cada tarjeta de métrica y se
   montaban entre sí; acá reparten la fila en tres */
.inth-metricas .t-MetricCards-item {
  min-inline-size: 0;
}

.inth-metricas .t-MetricCard {
  flex: 1 1 0;
  justify-content: center;
  margin: 0;
  min-inline-size: 0;
}

.inth-metricas .t-MetricCard-body {
  align-items: center;
}

.inth-metricas .t-MetricCard-title {
  white-space: normal;
}


/* ==========================================================================
   M24. Detalle de visita como Healthsuite_presional.html; Chat en tarjetas (2026-10-20)
   ========================================================================== */
/* Cabecera de la visita (pág. 2): avatar, nombre, chips y los atajos en la misma
   tarjeta, como Healthsuite_presional.html. Llamar, Cómo llegar y Historial son
   solo ícono (el texto queda en title y aria-label); el Asistente lleva texto y
   color porque es lo que se quiere destacar. Los botones son hijos directos de
   la región (slot Next del template Blank with Attributes). */
.inth-visita {
  align-items: center;
  background: var(--inth-surface);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-block: 8px 12px;
  padding: 1.5rem 1rem 1.25rem;
  text-align: center;
}

.inth-visita__id {
  align-items: center;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: .5rem;
  margin-block-end: .5rem;
}

.inth-visita__avatar {
  align-items: center;
  background: var(--inth-surface-hover);
  block-size: 80px;
  border-radius: 50%;
  color: var(--inth-text-muted);
  display: inline-flex;
  font-size: 1.5rem;
  font-weight: 600;
  inline-size: 80px;
  justify-content: center;
}

.inth-visita__nombre {
  color: var(--inth-text-head);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.inth-visita__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.inth-chip {
  border-radius: 999px;
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .25rem .75rem;
  text-transform: uppercase;
}

.inth-chip--esp {
  background-color: var(--inth-primary-soft);
  color: var(--inth-primary-hover);
  letter-spacing: 0;
  text-transform: none;
}

.inth-chip--success {
  background-color: color-mix(in srgb, var(--inth-success) 14%, #fff);
  color: var(--inth-success-hover);
}

.inth-chip--info {
  background-color: var(--inth-primary-soft);
  color: var(--inth-primary-hover);
}

.inth-chip--warning {
  background-color: color-mix(in srgb, var(--inth-warning) 16%, #fff);
  color: var(--inth-warning-hover);
}

.inth-chip--danger {
  background-color: color-mix(in srgb, var(--inth-danger) 12%, #fff);
  color: var(--inth-danger-hover);
}

.inth-acc--llamar    { --acc-bg: #dcfce7; --acc-c: #15803d; }
.inth-acc--mapa      { --acc-bg: var(--inth-primary-soft); --acc-c: var(--inth-primary); }
.inth-acc--historial { --acc-bg: #fef3c7; --acc-c: #b45309; }

.inth-visita .inth-acc {
  --a-button-type-background-color: var(--acc-bg);
  --a-button-type-border-color: transparent;
  --a-button-type-text-color: var(--acc-c);
  --a-button-type-shadow: none;
  --a-button-hover-background-color: var(--acc-bg);
  --a-button-hover-border-color: transparent;
  --a-button-hover-text-color: var(--acc-c);
  --a-button-icon-color: var(--acc-c);
  align-items: center;
  block-size: 48px;
  border-radius: 50%;
  display: inline-flex;
  font-size: 1.125rem;
  inline-size: 48px;
  justify-content: center;
  margin: 0;
  min-inline-size: 48px;
  padding: 0;
}

.inth-visita .inth-acc .t-Icon {
  margin: 0;
}

/* Asistente: botón de color con texto (es IA, no una acción de la visita) */
.inth-visita .inth-acc-ia {
  --a-button-type-background-color: #4f46e5;
  --a-button-type-border-color: #4f46e5;
  --a-button-type-text-color: #fff;
  --a-button-type-shadow: 0 10px 25px -5px rgba(79, 70, 229, .45);
  --a-button-hover-background-color: #4338ca;
  --a-button-hover-border-color: #4338ca;
  --a-button-hover-text-color: #fff;
  --a-button-icon-color: #fff;
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  margin: 0;
  min-block-size: 48px;
  padding-inline: 1.25rem;
}

/* Horario y dirección: otro bloque, debajo de la cabecera */
.inth-datos {
  background: var(--inth-surface);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  display: grid;
  gap: 1rem;
  margin-block-end: 12px;
  padding: 1.25rem 1rem;
}

.inth-dato {
  align-items: center;
  display: flex;
  gap: .875rem;
}

.inth-dato__ic {
  align-items: center;
  background: var(--inth-surface-muted);
  block-size: 40px;
  border-radius: 12px;
  color: var(--inth-text-muted);
  display: inline-flex;
  flex: 0 0 40px;
  font-size: 1.125rem;
  justify-content: center;
}

.inth-dato__lbl {
  color: var(--inth-text-muted);
  display: block;
  font-size: .75rem;
  font-weight: 500;
}

.inth-dato__val {
  color: var(--inth-text);
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.nota-coord {
  margin-block-end: 12px;
}

/* Progreso: línea de tiempo vertical, cada paso con su botón. Los pasos son
   sub-regiones y UT les envuelve cada una en su grilla (container/row/col):
   se anula para que no sume huecos ni sangrías. */
.inth-progreso {
  background: var(--inth-surface);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  margin-block-end: 12px;
  padding: 1.25rem 1rem;
}

.inth-progreso :is(.container, .row, .col) {
  display: block;
  gap: 0;
  inline-size: 100%;
  margin: 0;
  max-inline-size: none;
  padding: 0;
}

.inth-progreso__titulo {
  color: var(--inth-text-head);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
}

.inth-paso-reg {
  border-inline-start: 2px solid var(--inth-border);
  margin-inline-start: .5rem;
  padding: 0 0 1.5rem 1.5rem;
}

.inth-paso-reg--ultimo {
  border-inline-start-color: transparent;
  padding-block-end: 0;
}

/* Un paso hecho pinta de verde el tramo que lo une con el siguiente */
.inth-paso-reg:has(.inth-paso[data-estado="done"]) {
  border-inline-start-color: var(--inth-success);
}

.inth-paso-reg--ultimo:has(.inth-paso[data-estado="done"]) {
  border-inline-start-color: transparent;
}

.inth-paso {
  position: relative;
}

.inth-paso::before {
  align-items: center;
  background: var(--inth-border-strong);
  block-size: 1rem;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--inth-surface);
  color: #fff;
  content: "";
  display: flex;
  font-size: .625rem;
  font-weight: 700;
  inline-size: 1rem;
  inset-block-start: .125rem;
  inset-inline-start: calc(-1.5rem - 9px);
  justify-content: center;
  position: absolute;
}

.inth-paso[data-estado="current"]::before {
  background: var(--inth-primary);
}

.inth-paso[data-estado="done"]::before {
  background: var(--inth-success);
  content: "\2713";
}

.inth-paso__titulo {
  color: var(--inth-text-head);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  margin: 0;
}

.inth-paso[data-estado="todo"] .inth-paso__titulo {
  color: var(--inth-text-subtle);
}

/* Paso que todavía no toca: su botón se ve apagado. El botón real solo se
   dibuja en el paso actual (condición de servidor). */
.inth-paso__ph {
  display: none;
}

.inth-paso[data-estado="todo"] .inth-paso__ph {
  --a-button-type-background-color: var(--inth-surface-hover);
  --a-button-type-border-color: transparent;
  --a-button-type-text-color: var(--inth-text-subtle);
  --a-button-type-shadow: none;
  border-radius: var(--inth-radius);
  cursor: not-allowed;
  display: block;
  font-weight: 600;
  inline-size: 100%;
  margin-block-start: .5rem;
  min-block-size: 52px;
}

.inth-paso-reg > .t-Button {
  border-radius: var(--inth-radius);
  box-shadow: var(--inth-shadow-float);
  inline-size: 100%;
  justify-content: center;
  margin: .5rem 0 0;
  min-block-size: 52px;
}

/* Chat: el avatar en azul suave */
.pg-chat .t-ContentRow-avatar {
  --ut-avatar-background-color: var(--inth-primary-soft);
  --ut-avatar-text-color: var(--inth-primary);
}


/* Historial: informe y nota en renglones separados */
.pg-historial .t-Timeline-desc {
  white-space: pre-line;
}


/* ==========================================================================
   M25. Franja del header y métricas (revisión del 2026-10-20, 2.ª vuelta)
   ========================================================================== */
/* El estilo Iris Inthegra (header "pillar") dibuja una franja de 0,375 rem con
   el color de acento sobre el header: .t-Header:before. Con el header claro y
   redondeado de M21 sobra. Solo en mobile: en escritorio se conserva. */
@media (max-width: 767px) {
  .t-Header::before {
    display: none;
  }
}

/* UT pone justify-items: flex-start al contenedor de las tarjetas de métrica:
   cada una quedaba del ancho de su contenido en vez de llenar su tercio */
.inth-metricas .t-MetricCards {
  justify-items: stretch;
}


/* ==========================================================================
   M26. Perfil como en Healthsuite_presional.html (2026-10-20, 3.ª vuelta)
   --------------------------------------------------------------------------
   Tarjeta con avatar, nombre y rol; debajo, una tarjeta de filas con ícono
   (Empresa/sucursal, que antes estaba en el header, e Instalar app) y por
   último el formulario de "Mis datos". La fila de empresa es un botón que
   abre la selección en un diálogo modal (pág. 9997).
   ========================================================================== */
.inth-perfil {
  align-items: center;
  background: var(--inth-surface);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  display: flex;
  flex-direction: column;
  margin-block: 8px 12px;
  padding: 1.5rem 1rem;
  text-align: center;
}

.inth-perfil__avatar {
  block-size: 96px;
  border: 4px solid var(--inth-primary-soft);
  border-radius: 50%;
  box-shadow: 0 4px 10px -2px rgba(15, 23, 42, .15);
  inline-size: 96px;
  object-fit: cover;
}

.inth-perfil__avatar--ini {
  align-items: center;
  background: var(--inth-primary);
  color: #fff;
  display: inline-flex;
  font-size: 2rem;
  font-weight: 600;
  justify-content: center;
}

.inth-perfil__nombre {
  color: var(--inth-text-head);
  font-size: 1.25rem;
  font-weight: 600;
  margin: .75rem 0 0;
  overflow-wrap: anywhere;
}

.inth-perfil__rol {
  color: var(--inth-text-muted);
  font-size: .875rem;
  margin: .125rem 0 0;
}

.inth-perfil__titulo {
  color: var(--inth-text-head);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: .25rem 0 .75rem;
}

.inth-filas {
  background: var(--inth-surface);
  border-radius: var(--inth-radius-lg);
  box-shadow: var(--inth-shadow);
  margin-block-end: 12px;
  overflow: hidden;
}

.inth-filas .inth-perfil__cuenta {
  border-block-start: 1px solid var(--inth-row-border);
}

.inth-filas .inth-perfil__cuenta:first-child {
  border-block-start-width: 0;
}

.inth-filas .inth-fila {
  --a-button-type-background-color: transparent;
  --a-button-type-border-color: transparent;
  --a-button-type-text-color: var(--inth-text-head);
  --a-button-type-shadow: none;
  --a-button-hover-background-color: var(--inth-surface-muted);
  --a-button-hover-border-color: transparent;
  --a-button-hover-text-color: var(--inth-text-head);
  align-items: center;
  border-radius: 0;
  display: flex;
  font-weight: 600;
  gap: .875rem;
  inline-size: 100%;
  justify-content: flex-start;
  margin: 0;
  min-block-size: 56px;
  padding: .75rem 1rem;
  text-align: start;
}

.inth-filas .inth-fila .t-Button-label {
  flex: 1 1 auto;
  min-inline-size: 0;
  text-align: start;
  white-space: normal;
}

.inth-filas .inth-fila .t-Icon--left {
  align-items: center;
  background: var(--inth-primary-soft);
  block-size: 32px;
  border-radius: 50%;
  color: var(--inth-primary);
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 1rem;
  inline-size: 32px;
  justify-content: center;
  margin: 0;
}

.inth-filas .inth-fila .t-Icon--right {
  display: none;
}

.inth-filas button.inth-fila::after {
  color: var(--inth-text-subtle);
  content: "\203A";
  font-size: 1.5rem;
  line-height: 1;
}