/* Variables y reglas propias de la app (extraídas de theme-light.css de la plantilla Serenity). */
:root {
  --primary:#3451b2;
  --primary-hover: #2b4499;
  --primary-focus: #3451b2;
  --secundary: #14b88f;
  --secundary-disabled: #0f9b78;
  --disabled: #cecdcd;
  --color: #6b7280;
  --background: white;
  --background-secundary: #f3f4f7;
  --background-hover: #f7f8fa;
  --background-border-color: #e8eaef;
  --background-highligh: #eef1fb;
  --app-text-color: #6b7280;
  --title-color: #111827;
  --updates-text-color: #1f2937;
  --notifications-text-color: #4b5563;
  --search-highlight: #ffe79a67;
  --notification-background-fixed: #eef1fb;
  --progress-bar: #94A3B8;
  /* Configuración del agente (DifyChatflow) */
  --agent-title-color: #0d357e;
  --agent-subtitle-color: #6c757d;
  --agent-accent: #5B6CF6;
  --agent-border-color: #dee2e6;
  --agent-panel-bg: #ffffff;
  --agent-panel-hover: #ecebeb;
  --agent-panel-content-bg: #f8f9fa;
  --agent-card-bg: #ffffff;
  --agent-card-border: #e0e0e0;
  --agent-input-text: #4b5563;
  --agent-input-border: #d1d5db;
  --agent-hint-bg: #f0f9ff;
  --agent-hint-border: #bae6fd;
  --agent-hint-icon: #0284c7;
  --agent-hint-text: #075985;
}

/* @media screen and (min-width: 992px) {
  .messenger-message-list-container{
    border-left: solid 5px #e5e5e5;
  }
} */

.message.other .bubble-container .bubble {
  background-color: var(--background);
  border: 1px solid var(--background);
  &::after {
    content: '';
    border-top: 15px solid var(--background);
  }
  &::before {
    content: '';
    border-top: 17px solid var(--background);
  }
}

.note-desc{
  border-left: solid 1px var(--color);
}

.note-title {
  color: var(--primary);
}

.reassign-title {
  color: var(--primary);
}

.accordion-bot-response-button > i {
  color: var(--primary) !important;
}

.p-badge.p-badge-info{
  color: var(--color);
}

/* .compose-input:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 2px var(--primary) !important;
} */

.compose-input:active {
  border-color: transparent !important;
}

.compose .compose-input:focus {
  outline: none;
  border-color: transparent !important;
}

.conversation-search .clean:hover {
  color: var(--primary);
}

.footer-scheduled-message button {
  color: var(--primary) !important;
}

.scroll-botton-button {
  background-color: var(--background) !important;
  color: var(--color);
}

.conversation-search .clean:hover {
  color: var(--primary);
}

.popup-option-edit > i,
.icons > i,
.popup-edit > i {
  background-color: var(--background) !important;
}

.sidebar {
  background-color: var(--background) !important;
}

.sidebar.messenger-message-list-container {
  background-color: var(--background-secundary) !important;
}


.p-toolbar {
  border-color: transparent;
  background-color: transparent;
}

.p-badge.p-badge-info svg{
  color: var(--color) !important;
}

.method-test-button {
  background: var(--secundary) !important;
}

.conversation-snippet {
  color: var(--color);
}

.full-time.p-as-center {
  color: var(--color);
}

.compose {
  background-color: var(--background);
}

.result-not-fount {
  color: var(--app-text-color);
  text-align: center;
}

.success_message_items > .p-splitbutton-menubutton {
  background-color: var(--background);
  color: var(--primary);
  border-color: var(--primary);
}

.pi-download{
  color: white;
}

.show-chips > .p-chips-multiple-container .p-chips-token {
  overflow: hidden;
  margin-right: 0.25em;
  margin-left: 0;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  max-width: fit-content;
  text-overflow: ellipsis;
  padding: 3.5px 5.6px 3.5px 5.6px;
  background-color: var(--secundary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
}

.card h1 strong {
  color: var(--primary);
  font-size: 30px;
}


.p-button-rounded {
  background-color: transparent;
}


.btn-actions-default {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-actions-default:focus,
.btn-actions-default:hover,
.btn-actions-default:active{
  border-color: var(--primary) !important;
}

.template-header {
  font-weight: bold;
  font-size: 1em;
  color: #333;
}

.template-body {
  font-size: 1em;
  color: #666;
}

.template-footer {
  font-size: 0.9em;
  color: #999;
}

.btn-actions.btn-fontawesome {
  height: 2em;
}


/* Overrides con !important de los componentes en el tema Serenity de Pip */
@layer primereact {
    .p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label,
.p-float-label textarea:focus ~ label,
.p-float-label textarea.p-filled ~ label,
.p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label {
  top: -.5rem !important
    }
}
@layer primereact {
    .p-input-filled .p-float-label input:focus ~ label,
.p-input-filled .p-float-label input.p-filled ~ label,
.p-input-filled .p-float-label textarea:focus ~ label,
.p-input-filled .p-float-label textarea.p-filled ~ label,
.p-input-filled .p-float-label .p-inputwrapper-focus ~ label,
.p-input-filled .p-float-label .p-inputwrapper-filled ~ label {
  top: .25rem !important
    }
}
@layer primereact {
    .sweet-alert .p-button-danger {
    color: #EF4444 !important
    }
}
@layer primereact {
    .btn-danger {
    background-color: #EF4444 !important
    }
}
@layer primereact {
    .btn-danger:not(:disabled):focus {
    box-shadow: 0 0 0 0.2rem #FECACA !important
    }
}
@layer primereact {
    .btn-danger:not(:disabled):active {
    background: #B91C1C !important;
    border-color: #B91C1C !important
    }
}
@layer primereact {
    .btn-danger:not(:disabled):hover {
    background: #B91C1C !important;
    border-color: #B91C1C !important
    }
}
@layer primereact {
    .p-splitbutton.p-button-pip-disable > .p-button.p-splitbutton-defaultbutton {
  cursor: not-allowed !important
    }
}
@layer primereact {
    .p-button.p-button-danger.p-button-rounded {
    color: #EF4444 !important
    }
}
@layer primereact {
    .p-contextmenu .p-submenu-list {
    min-width: auto !important
    }
}
@layer primereact {
    .compose textarea.compose-input:focus {
    border: transparent !important
    }
}
@layer primereact {
    .compose textarea.compose-input:active {
    border: transparent !important
    }
}
@layer primereact {
    .compose textarea.compose-input:hover {
    border: transparent !important
    }
}
@layer primereact {
    .conversation-search-input:hover {
    border-color: var(--primary) !important
    }
}