/* ==========================================================================
   Simbely AI Saas Core
   Custom Styles
   ========================================================================== */

.fi-page-header-main-ctn:has(.sap-conversacion-data) {
  padding-top: 10px;
  row-gap: calc(var(--spacing) * 4);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Conversaciones - Listado
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.sap-conversacion-lista-agente {
  padding-left: 10px;
}

.sap-conversacion-lista-agente span {
  font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 0.78rem;
}

.sap-conversacion-lista-fecha {
  font-size: 0.8rem;
}

/* Columna Inicio: fecha arriba y hora abajo (la hora ya viene en su <span>). */
.sap-conversacion-lista-fecha span {
  display: block;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Vista de Conversacion - Datos de la conversacion
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.sap-conversacion-data .fi-section.fi-section-has-header {
  background-color: transparent;
}

.sap-conversacion-data header {
  display: none;
}

.sap-conversacion-data header + div {
  border: none;
}

.sap-conversacion-data .fi-section-content-ctn .fi-section-content .fi-sc-component {
  background-color: rgba(0, 0, 0, 0.04);
  padding: 6px 14px;
  border-radius: 6px;
}

html.dark .sap-conversacion-data .fi-section-content-ctn .fi-section-content .fi-sc-component {
  background-color: rgba(255, 255, 255, 0.04);
}

@supports (color:color-mix(in lab, red, red)) {
    .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
        box-shadow: none;
    }
}

.sap-conversacion-data .fi-in-entry {
  row-gap: calc(var(--spacing) * 1.6);
}

.sap-conversacion-data .fi-in-entry-label {
    min-width: 54px;
  font-weight: 700;
  font-size: 0.92rem;
}

.sap-conversacion-data .fi-in-entry-content > div {
  font-size: 0.8rem;
}

.sap-conversacion-data .fi-section-content-ctn > .fi-section-content,
.sap-conversacion-chat .fi-in-repeatable-item {
  padding: 0;
}

.sap-conversacion-data .fi-section-content-ctn > .fi-section-content.fi-grid {
  gap: 14px;
}

.sap-conversacion-data .fi-section,
.sap-conversacion-chat .fi-in-repeatable-item {
  --tw-ring-color: transparent !important;
}

.sap-conversacion-data .fi-in-entry:not(.fi-in-entry-has-inline-label) .fi-in-entry-content-col {
  padding-left: 1px;
}

/*
.sap-conversacion-data .sap-inicio-cierre {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.sap-conversacion-data .sap-inicio-cierre span {
  color: #52e177; 
}
*/

.sap-conversacion-data .sap-inicio-cierre span + span {
  display: none;
  color: #f86128;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Vista de Conversacion - Registro de Chat
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.sap-conversacion-chat header {
  display: none;
}

.sap-conversacion-chat header + div {
    border: none;
}

.sap-conversacion-chat ul {
  gap: 0;
}

.sap-conversacion-chat .fi-section-content ul li {
    border-radius: 0;
}

.sap-conversacion-chat .fi-section-content ul > li + li{
    border-top: 1px solid #ddd;
}

html.dark .sap-conversacion-chat .fi-section-content ul > li + li{
    border-top-color: #333;
}

.sap-conversacion-chat .fi-section-content ul > li li + li{
    border: none;
}

.sap-conversacion-chat .fi-in-repeatable-item {
  background-color: transparent;
}

.sap-conversacion-chat .sap-message-entry > div {
  gap: 6px;
}

.sap-conversacion-chat .sap-message-entry .fi-grid-col:has(.sap-message-role-entry) {
  height: 24px;
  line-height: 24px;
}

.sap-conversacion-chat .sap-message-role-entry {
  margin-left: -2px;
}

.sap-conversacion-chat .sap-message-role-entry > * {
  user-select: none;
  cursor: default;
  font-size: 0.7rem;
  height: 20px;
  line-height: 20px;
  padding-top: 0!important;
  padding-bottom: 0!important;
}

.sap-conversacion-chat .sap-message-content-entry {
  padding-left: 0px;
}

.sap-conversacion-chat .sap-message-time-entry {
  text-align: right;
}

.sap-conversacion-chat .sap-message-time-entry span {
    display: block;
    padding-top: 3px;
    padding-left: 8px;
    font-size: 0.74rem;
}

/* SAP-99 — Valoración 👍/👎: el contenido toma el ancho que sobra y la valoración y la hora su
   ancho natural, así la pill nunca se corta («👎 No útil · No respondió la pregunta»). Pisa el
   grid de 8 columnas del RepeatableEntry; las celdas .fi-hidden no ocupan lugar. */
.sap-conversacion-chat .fi-in-repeatable-item > .fi-grid {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
}

.sap-conversacion-chat .fi-in-repeatable-item > .fi-grid > .fi-grid-col {
  grid-column: auto;
}

.sap-conversacion-chat .sap-message-feedback-entry .fi-badge {
  white-space: nowrap;
}

/* En pantallas angostas la pill baja debajo del mensaje para no aplastar el contenido. */
@media (max-width: 639px) {
  .sap-conversacion-chat .fi-in-repeatable-item > .fi-grid {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .sap-conversacion-chat .fi-in-repeatable-item > .fi-grid > .fi-grid-col:has(.sap-message-feedback-entry) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Vista de Conversacion - Markdown del asistente

   Portado de widget.css (.sap-widget-chat-assistant-msj) a .sap-message-content-entry,
   el wrapper real que Filament pone alrededor del HTML generado por MessageMarkdown
   (ConversationResource::infolist(), ver app/Support/MessageMarkdown.php).

   El widget shiftea cada heading un nivel (h1→h2 ... h5→h6) porque h1 queda reservado
   para el título de la página host — acá no aplica (no hay host), así que h1 se suma
   como el tier de heading más grande en vez de reasignarse.

   Los tokens --sap-* del widget (gaps, fuentes, colores de marca por tenant) no existen
   en este panel, así que quedan resueltos a valores fijos: gaps en px (mismos valores
   que --sap-gap-*), tipografía la que ya trae Filament (solo font-weight, sin forzar
   font-family), y colores con color-mix(currentColor) donde el original dependía del
   accent dinámico del tenant — así el look se adapta solo a light/dark del panel.
   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6)+p {
    padding-top: 6px; /* --sap-gap-XS (2px) + --sap-gap-S (4px) */
    margin-top: 0;
    margin-bottom: 0;
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6):has(+ul),
.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6):has(+ol) {
    padding-bottom: 4px; /* --sap-gap-S */
}

.sap-message-content-entry li :is(h1, h2, h3, h4, h5, h6):has(+ul),
.sap-message-content-entry li :is(h1, h2, h3, h4, h5, h6):has(+ol),
.sap-message-content-entry ol+p,
.sap-message-content-entry ul+p,
.sap-message-content-entry p+p,
.sap-message-content-entry p+li,
.sap-message-content-entry p+ol,
.sap-message-content-entry p+ul,
.sap-message-content-entry li+li {
    margin-top: 8px !important; /* --sap-gap-M */
    margin-bottom: 0;
}

.sap-message-content-entry ol>li+li,
.sap-message-content-entry ul>li+li {
    margin-top: 12px; /* --sap-gap-L */
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6){
    margin-top: 10px;
}

.sap-message-content-entry ul+:is(h1, h2, h3, h4, h5, h6),
.sap-message-content-entry ol+:is(h1, h2, h3, h4, h5, h6),
.sap-message-content-entry p+:is(h1, h2, h3, h4, h5, h6) {
    margin-top: 20px; /* --sap-gap-2XL */
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6),
.sap-message-content-entry p,
.sap-message-content-entry li {
    text-align: left;
    hyphens: auto;
    overflow-wrap: break-word;
}

.sap-message-content-entry a {
    position: relative;
    transition: all 0.1s ease; /* --sap-transition-01 */
    padding: 2px 0 2px 20px; /* --sap-gap-XS + --sap-gap-XL/--sap-gap-XS */
    border-radius: 3px !important; /* --sap-border-radius-2XS */
    margin: 0;

    text-decoration-line: underline;
    text-decoration-color: #3b82f6;
    text-decoration-style: solid;
}

.sap-message-content-entry a,
.sap-message-content-entry a:visited,
.sap-message-content-entry a:active {
    color: #3b82f6;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sap-message-content-entry a:focus-visible,
.sap-message-content-entry a:hover {
    color: #3b82f6;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.sap-message-content-entry a::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 0;
    width: 16px; /* --sap-gap-XL */
    aspect-ratio: 1 / 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' x2='21' y1='14' y2='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 74%;
}

.sap-message-content-entry li {
    line-height: 1.4;
}

.sap-message-content-entry li::before {
    position: absolute;
}

.sap-message-content-entry li::marker {
    margin-right: 4px; /* --sap-gap-S */
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.3em;
    margin-bottom: 0px;
}

.sap-message-content-entry>p {
    font-size: 1em;
    line-height: 1.34em;
    margin-bottom: 0px;
}

.sap-message-content-entry .sap-timeline-disclaimer {
    position: relative;
    font-size: 0.88em;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 18px;
}

.sap-message-content-entry .sap-timeline-disclaimer::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 2px;
    background-color: #666;
}

.sap-message-content-entry p p,
.sap-message-content-entry p a,
.sap-message-content-entry em a,
.sap-message-content-entry b a,
.sap-message-content-entry i a,
.sap-message-content-entry strong a,
.sap-message-content-entry li a {
    font-size: 0.98em;
}

.sap-message-content-entry :is(h1, h2) {
    font-size: 0.96em;
}

.sap-message-content-entry :is(h3, h4, h5, h6) {
    font-size: 0.94em;
}

.sap-message-content-entry li :is(h1, h2) {
    font-size: 1.143em;
}

.sap-message-content-entry> :is(ul, ol)>li :is(h3, h4, h5, h6) {
    font-size: 1.119em;
}

.sap-message-content-entry> :is(ul, ol)>li li :is(h1, h2) {
    font-size: 1.166em;
}

.sap-message-content-entry> :is(ul, ol)>li li :is(h3, h4, h5, h6) {
    font-size: 1.142em;
}

.sap-message-content-entry li code,
.sap-message-content-entry p code {
    font-size: 0.86em;
}

.sap-message-content-entry li li code {
    font-size: 0.878em;
}

.sap-message-content-entry li {
    font-size: 0.94em;
}

.sap-message-content-entry li> :is(ul, ol) li {
    font-size: 0.98em;
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6),
.sap-message-content-entry strong,
.sap-message-content-entry b {
    font-weight: 700;
}

.sap-message-content-entry i,
.sap-message-content-entry em {
    font-style: italic;
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6) * {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
    text-decoration-line: none;
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6) :is(strong, b, i, em) {
    font-style: italic;
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6) a {
    color: #3b82f6;
    font-style: italic;
}

.sap-message-content-entry :is(h1, h2, h3, h4, h5, h6) a::before {
    display: none;
}

.sap-message-content-entry p p,
.sap-message-content-entry p em,
.sap-message-content-entry p i,
.sap-message-content-entry p b,
.sap-message-content-entry p a,
.sap-message-content-entry p strong {
    line-height: 1em;
}

.sap-message-content-entry code {
    background-color: rgba(127, 127, 127, 0.15);
    padding: 2px 4px; /* --sap-gap-XS --sap-gap-S */
    border-radius: 3px; /* --sap-border-radius-2XS */
    color: inherit;
    font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sap-message-content-entry ul,
.sap-message-content-entry ol {
    margin-top: 0 !important;
    /* El indent real lo dan el padding-inline-start de li y el margin-left negativo
       de las listas anidadas — sin esto, el 40px del user agent stylesheet se suma. */
    padding-inline-start: 0;
    list-style: none;
}

.sap-message-content-entry ol ul,
.sap-message-content-entry ol ol,
.sap-message-content-entry ul ol,
.sap-message-content-entry ul ul {
    position: relative;
    list-style: none;
    margin-left: -10px;
    margin-top: 6px!important;
}

.sap-message-content-entry ol ul::before,
.sap-message-content-entry ol ol::before,
.sap-message-content-entry ul ol::before,
.sap-message-content-entry ul ul::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background-image: linear-gradient(180deg, color-mix(in srgb, currentColor 25%, transparent), color-mix(in srgb, currentColor 5%, transparent));
}

.sap-message-content-entry li {
    position: relative;
}

.sap-message-content-entry ol>li,
.sap-message-content-entry ul>li {
    padding-inline-start: 16px;
}

.sap-message-content-entry ol>li>ol>li,
.sap-message-content-entry ol>li>ul>li,
.sap-message-content-entry ul>li>ol>li,
.sap-message-content-entry ul>li>ul>li {
    padding-inline-start: 22px;
}

.sap-message-content-entry ol>li>ol>li li,
.sap-message-content-entry ol>li>ul>li li,
.sap-message-content-entry ul>li>ol>li li,
.sap-message-content-entry ul>li>ul>li li {
    padding-inline-start: 24px;
}

.sap-message-content-entry > ul > li{
    padding: 0 0 2px 18px!important;
}

.sap-message-content-entry ul>li::before,
.sap-message-content-entry ol>li::before {
    content: "⬤";
    top: 1px;
    left: 3px;
    font-size: 0.5em;
    line-height: 18px !important;
}

.sap-message-content-entry ol>li>ol>li::before,
.sap-message-content-entry ul>li>ol>li::before,
.sap-message-content-entry ol>li>ul>li::before,
.sap-message-content-entry ul>li>ul>li::before {
    content: "⚬";
    left: 9px;
    font-size: 1.2em;
    line-height: 16px !important;
}

.sap-message-content-entry ol>li>ol>li>ol li::before,
.sap-message-content-entry ol>li>ol>li>ul li::before,
.sap-message-content-entry ol>li>ul>li>ol li::before,
.sap-message-content-entry ol>li>ul>li>ul li::before,
.sap-message-content-entry ul>li>ol>li>ol li::before,
.sap-message-content-entry ul>li>ol>li>ul li::before,
.sap-message-content-entry ul>li>ul>li>ol li::before,
.sap-message-content-entry ul>li>ul>li>ul li::before {
    content: "◆";
    left: 7px;
    font-size: 0.9em;
    line-height: 18px !important;
}

.sap-message-content-entry p+table,
.sap-message-content-entry ul+table,
.sap-message-content-entry ol+table,
.sap-message-content-entry table+p,
.sap-message-content-entry table+ul,
.sap-message-content-entry table+ol {
    margin-top: 10px; /* --sap-gap-M */
}

.sap-message-content-entry table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.9em;
}

.sap-message-content-entry th,
.sap-message-content-entry td {
    padding: 4px 8px; /* --sap-gap-S --sap-gap-M */
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    text-align: left;
    white-space: nowrap;
}

.sap-message-content-entry th {
    font-weight: 700;
}

/* MQ ------------------------------------
  Before 320
---------------------------------------- */
@media (max-width: 320px) {
  .sap-conversacion-data .sap-inicio-cierre {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* MQ ------------------------------------
  After 320 / Before 450
---------------------------------------- */
@media (min-width: 321px) and (max-width: 450px) {
  .sap-conversacion-data .sap-inicio-cierre {
    flex-direction: row;
    justify-content: flex-start;
  }

  .sap-conversacion-data .sap-inicio-cierre span + span {
    margin-left: 14px;
  }
}

/* MQ ------------------------------------
  Before 450
---------------------------------------- */
@media (max-width: 450px) {
  .sap-conversacion-data .fi-section-content-ctn > .fi-section-content.fi-grid {
    gap: 2px;
  }

  .sap-conversacion-chat .sap-message-content-entry {
    font-size: 0.8rem;
  }

  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
    .sap-cliente-entry, .sap-agente-entry).fi-in-entry-has-inline-label * {
    height: 18px;
    line-height: 18px;
    overflow: hidden;
  }

  .sap-conversacion-chat .fi-in-repeatable-item > .fi-grid > .fi-grid-col:has(.sap-message-time-entry) {
    top: 6px;
  }
}

/* MQ ------------------------------------
  After 450
---------------------------------------- */
@media (min-width: 451px) {
  .sap-conversacion-data .fi-section-content-ctn > .fi-section-content.fi-grid {
    gap: 6px;
  }

  .sap-conversacion-chat .fi-in-repeatable-item > .fi-grid > .fi-grid-col:has(.sap-message-time-entry) {
    top: 14px;
  }
}

/* MQ ------------------------------------
  After 450 / Before 1024
---------------------------------------- */
@media (min-width: 451px) and (max-width: 1023px) {
  .sap-conversacion-data .fi-section-content-ctn > .fi-section-content.fi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
  .sap-cliente-entry, .sap-agente-entry, .sap-date-entry).fi-in-entry-has-inline-label * {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
  }
}

/* MQ ------------------------------------
  After 450 / Before 540
---------------------------------------- */
@media (min-width: 451px) and (max-width: 540px) {
    .sap-conversacion-data .fi-in-entry-label {
        min-width: 44px;
      font-size: 0.78rem;
    }

    .sap-conversacion-data .fi-in-entry-has-inline-label {
      column-gap: 6px!important;
    }
}

/* MQ ------------------------------------
  After 450 / Before 640
---------------------------------------- */
@media (min-width: 451px) and (max-width: 640px) {
  .sap-conversacion-data .sap-inicio-cierre {
    flex-direction: column;
    align-items: flex-start;
  }

  .sap-conversacion-data .fi-grid-col:has(.sap-session-entry, .sap-date-entry) {
    /* Sesion en una linea */
    grid-column: span 2 / span 2;
  }
}

/* MQ ------------------------------------
  After 600 / Before 1024
---------------------------------------- */
@media (min-width: 611px) and (max-width: 1023px) {
  .sap-conversacion-data .sap-inicio-cierre {
    flex-direction: row;
    justify-content: flex-start;
  }

  .sap-conversacion-data .sap-inicio-cierre span + span {
    margin-left: 14px;
  }
}

/* MQ ------------------------------------
  Before 640
---------------------------------------- */
@media (max-width: 640px) {
  .fi-page-header-main-ctn:has(.sap-conversacion-data) {
    row-gap: calc(var(--spacing) * 2);
  }

  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
  .sap-cliente-entry, .sap-agente-entry, .sap-date-entry).fi-in-entry-has-inline-label {
    /* Espacio horizontal entre label y data */
    column-gap: calc(var(--spacing) * 4);
  }

  .sap-conversacion-chat .fi-in-repeatable-item {
    position: relative;
  }

  .sap-conversacion-chat .fi-in-repeatable-item > .fi-grid > .fi-grid-col:has(.sap-message-time-entry) {
    position: absolute;
    right: 14px;
    width: auto;
  }

  .sap-conversacion-chat .sap-message-time-entry {
    padding-top: 0;
  }
}

/* MQ ------------------------------------
  Before 720
---------------------------------------- */
@media (max-width: 720px) {
  td:has(.sap-conversacion-lista-agente) {
    max-width: 210px;
  }
}

/* MQ ------------------------------------
  Before 768
---------------------------------------- */
@media (max-width: 767px) {
  .sap-conversacion-data .fi-section-content-ctn .fi-section-content .fi-sc-component {
    padding: 6px 10px;
  }

  .sap-conversacion-chat header {
      padding-right: 14px;
      padding-left: 14px;
  }

  .sap-conversacion-chat .sap-message-time-entry,
  .sap-conversacion-chat .sap-message-time-entry span {
    font-size: 0.74rem;
  }

  .sap-conversacion-chat .fi-section-content {
    padding: 8px 0;
  }

  .sap-conversacion-chat .fi-section-content ul li {
    padding: 8px 16px 18px;
  }
}

/* MQ ------------------------------------
  After 768
---------------------------------------- */
@media (min-width: 768px) {
  .sap-conversacion-chat header {
      padding-right: 22px;
      padding-left: 22px;
  }

  .sap-conversacion-chat .sap-message-time-entry,
  .sap-conversacion-chat .sap-message-time-entry span {
    font-size: 0.76rem;
  }

  .sap-conversacion-chat .sap-message-time-entry {
    padding-top: 0;
  }

  .sap-conversacion-chat .fi-section-content {
    padding: 18px 0;
  }

  .sap-conversacion-chat .fi-section-content ul li {
    padding: 4px 24px 14px;
  }
}

/* MQ ------------------------------------
  Before 1024
---------------------------------------- */
@media (max-width: 1023px) {
  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
  .sap-cliente-entry, .sap-agente-entry, .sap-date-entry).fi-in-entry-has-inline-label .fi-in-entry-content-col {
    /* label + data en una linea — sm:col-span-2 de Filament pisa nuestro
       grid-template-columns: auto 1fr si no se fuerza a 1 columna */
    grid-column: span 1 / span 1 !important;
  }

  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
  .sap-cliente-entry, .sap-agente-entry, .sap-date-entry).fi-in-entry-has-inline-label {
    /* label + data alineado izq — !important porque el sm:grid-cols-3 de Filament
       (activo desde 640px) compite por el mismo grid-template-columns */
    grid-template-columns: auto 1fr !important;
  }
}

/* MQ ------------------------------------
  After 1024
---------------------------------------- */
@media (min-width: 1024px) {}

/* MQ ------------------------------------
  After 1024
---------------------------------------- */
@media (min-width: 1024px) and (max-width: 1200px) {
  .sap-conversacion-data .fi-section-content-ctn > .fi-section-content.fi-grid {
    gap: 8px;
  }

  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
  .sap-cliente-entry, .sap-agente-entry, .sap-date-entry).fi-in-entry-has-inline-label {
    /* label arriba, data abajo — pisa el sm:grid-cols-3 de Filament */
    grid-template-columns: 1fr !important;
  }

  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
  .sap-cliente-entry, .sap-agente-entry).fi-in-entry-has-inline-label .fi-in-entry-content-col {
    /* pisa el sm:col-span-2 — con 1 sola columna no hace falta que spanee */
    grid-column: span 1 / span 1 !important;
  }
}

/* MQ ------------------------------------
  After 1024 / Before 1100
---------------------------------------- */
@media (min-width: 1024px) and (max-width: 1100px) {
  td:has(.sap-conversacion-lista-agente) {
    max-width: 220px;
  }
}

/* MQ ------------------------------------
  After 1024 / Before 1420
---------------------------------------- */
@media (min-width: 1024px) and (max-width: 1420px) {
  /*
  .sap-conversacion-data .sap-inicio-cierre {
    flex-direction: column;
    align-items: flex-start;
  }
  */
}


/* MQ ------------------------------------
  Before 1200
---------------------------------------- */
@media (max-width: 1200px) {
  /*
  .sap-conversacion-lista-fecha span {
    display: block;
  }
  */
}


/* MQ ------------------------------------
  After 1200
---------------------------------------- */
@media (min-width: 1201px) {
  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
  .sap-cliente-entry, .sap-agente-entry, .sap-date-entry).fi-in-entry-has-inline-label .fi-in-entry-content-col {
    /* label + data en una linea — sm:col-span-2 de Filament pisa nuestro
       grid-template-columns: auto 1fr si no se fuerza a 1 columna */
    grid-column: span 1 / span 1 !important;
  }

  .sap-conversacion-data :is(.sap-session-entry, .sap-channel-entry, .sap-status-entry,
  .sap-cliente-entry, .sap-agente-entry, .sap-date-entry).fi-in-entry-has-inline-label {
    /* label + data alineado izq — !important porque el sm:grid-cols-3 de Filament
       (activo desde 640px) compite por el mismo grid-template-columns */
    grid-template-columns: auto 1fr !important;
  }
}


/* MQ ------------------------------------
  After 1200 Before 1300
---------------------------------------- */
@media (min-width: 1201px) and (max-width: 1300px) {
    .sap-conversacion-data .fi-in-entry-label {
        min-width: 44px;
      font-size: 0.78rem;
    }

    .sap-conversacion-data .fi-in-entry-has-inline-label {
      column-gap: 6px!important;
    }
}

/* MQ ------------------------------------
  After 1420
---------------------------------------- */
@media (min-width: 1421px) {
  /*
  .sap-conversacion-data .sap-inicio-cierre {
    flex-direction: row;
    justify-content: flex-start;
  }

  .sap-conversacion-data .sap-inicio-cierre span + span {
    margin-left: 14px;
  }
  */
}