/* public/css/styles.css */

/* Color switch */

.theme-switch {
  display: inline-block;
  height: 24px;
  position: relative;
  width: 50px;
}

.theme-switch input {
  display: none;
}

.theme-switch-icon {
  position: relative;
  top: -15px;
  font-size: .9em;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 400ms;
}

.slider::before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 16px;
  left: 4px;
  position: absolute;
  transition: 400ms;
  width: 16px;
}

input:checked + .slider {
  background-color: #66bb6a;
}

input:checked + .slider::before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round::before {
  border-radius: 50%;
}

/* Main Sidebar */

.brand-link-dark {
  border-bottom: 1px #6c757d solid;
  background-color: #454d55;
}

.brand-link-light {
  border-bottom: 1px #dee2e6 solid;
  background-color: #ffffff;
}

.brand-link.brand-link-light:hover {color:#6c757d}

.sidebar-dark {
  background-color: #454d55;
}

.sidebar-light {
  background-color: #ffffff;
}

.sidebar-divider-light, .sidebar-divider-dark {
  height: 0;
  margin: .5rem 12px;
  overflow: hidden;
}

.sidebar-divider-dark {
  border-top: 1px solid #6c757d;
}

.sidebar-divider-light {
  border-top: 1px solid #dee2e6;
}

img.assistant-menu-image {
  max-width: 33px;
}

.pending-locked-action {
  cursor: not-allowed !important;
  opacity: .62;
}

.pending-locked-action:hover,
.pending-locked-action:focus {
  opacity: .82;
}

.pending-lock-icon {
  float: right;
  margin-left: auto;
  opacity: .8;
}

.pending-preview-badge {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pending-account-email {
  font-weight: 600;
}

/* Navbar */

img.user-navbar-image {
  max-width: 30px;
  margin-top: -5px;
  margin-right: 5px;
}

/* Chat */

.direct-chat-text {
  background-color: #f8f9fa;
  /* Reason: safe-dom elimina estilos inline; la presentacion multilínea debe vivir en CSS confiable. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.direct-chat-msg {
  margin-bottom: 23px;
}

.chat-audio{
  position: absolute;
  right: 15px;
  z-index: 1; 
  margin-top: 5px; 
}

.chat-audio img:hover{
  cursor: pointer;
}

.chat-link--whatsapp {
  align-items: center;
  background: #128c7e;
  border-radius: 6px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 600;
  gap: 6px;
  padding: 6px 10px;
  text-decoration: none;
}

.chat-link--whatsapp:hover {
  background: #075e54;
  color: #fff !important;
  text-decoration: none;
}


/* Typing indicator */
.character-typing {
  width: 100%;
  min-height: 68px;
  align-items: center;
  background: rgba(248, 249, 250, .96);
  color: #343a40;
  justify-content: space-between;
  font-weight: normal;
  gap: 14px;
  margin-top: -68px;
  padding: 12px 16px;
  z-index: 10;
  border-radius: .25rem .25rem 0 0;
  border-top: 1px solid rgba(108, 117, 125, .25);
  box-shadow: 0 -8px 18px rgba(33, 37, 41, .08);
  display: none;
  position: relative;
}

.character-typing-light {
  background: rgba(248, 249, 250, .96);
  color: #343a40;
}

.character-typing-dark {
  background: rgba(47, 52, 57, .96);
  color: #f8f9fa;
}

.chat-waiting-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.chat-waiting-title {
  font-size: .95rem;
  font-weight: 600;
}

.chat-waiting-subtitle {
  color: inherit;
  font-size: .8rem;
  opacity: .78;
}

.chat-waiting-activity {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
}

.chat-waiting-step {
  background-color: currentColor;
  border-radius: 999px;
  display: inline-block;
  height: 7px;
  opacity: .35;
  width: 18px;
  animation: waitingStepPulse 1.4s infinite ease-in-out;
}

.chat-waiting-step:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-waiting-step:nth-child(3) {
  animation-delay: 0.4s;
}

.chat-waiting-step.is-retry-pulse {
  animation: waitingRetryPulse .7s ease-out;
}

@keyframes waitingStepPulse {
  0%, 80%, 100% {
    opacity: .25;
  }
  40% {
    opacity: .75;
  }
}

@keyframes waitingRetryPulse {
  0% {
    opacity: .35;
    transform: scaleX(1);
  }
  45% {
    opacity: .95;
    transform: scaleX(1.2);
  }
  100% {
    opacity: .35;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-waiting-step,
  .chat-waiting-step.is-retry-pulse {
    animation: none;
  }
}

/* Datatables */
.dtr-control::before {
  content: '\f150';         /* caret-square-down */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #00bc8c;
  margin-right: 5px;
  display: none;
}

@media screen and (max-width: 768px) { 
  
  td.dtr-control::before {
      display: inline;
  }

}

/* Profile image button styling */
#change_profile_image_btn {
  position: absolute;
  top: 60px;
  left: 80px;
  background: #f39c12;
  color: #ffffff;
  border-radius: 50%;
  padding: 5px 8px;
}

.profile-links {
  margin: 13px auto;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  justify-content: center;
  margin: .75rem 0;
}

.legal-links a {
  text-decoration: underline;
}

.main-footer .footer-content {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.main-footer .legal-links {
  margin: 0;
}

.close-developer {
  justify-self: end;
  text-align: right;
}

.email-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin-top: .125rem;
}

.legal-page-actions {
  margin-bottom: .75rem;
}

.legal-back-link {
  align-items: center;
  display: inline-flex;
  gap: .35rem;
}

@media screen and (max-width: 991.98px) {
  .main-footer .footer-content {
    gap: .5rem;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .close-developer {
    justify-self: center;
    text-align: center;
  }
}

/* Login, register, etc. */

.login-tagline, .register-tagline {
  text-align: center;
}

.login-logo, .register-logo {
  margin-bottom: 0 !important;
}

.toggle-password {
  cursor: pointer;
}

.register-page-marketing {
  align-items: stretch;
  display: block;
  height: auto;
  min-height: 100vh;
}

.register-marketing-layout {
  align-content: center;
  align-items: start;
  box-sizing: border-box;
  column-gap: clamp(2rem, 5vw, 5rem);
  display: grid;
  grid-template-areas:
    "intro form"
    "details form";
  grid-template-columns: minmax(0, 58fr) minmax(360px, 42fr);
  margin: 0 auto;
  max-width: 1280px;
  min-height: 100vh;
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
  row-gap: 1.25rem;
  width: 100%;
}

.register-marketing-panel,
.register-marketing-details,
.register-marketing-form-panel {
  min-width: 0;
  width: 100%;
}

.register-marketing-panel {
  color: inherit;
  grid-area: intro;
}

.register-marketing-details {
  grid-area: details;
}

.register-marketing-content {
  margin: 0 auto;
  max-width: 640px;
}

.register-marketing-brand {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.register-marketing-logo {
  height: auto;
  max-height: 72px;
  max-width: 220px;
  object-fit: contain;
  width: auto;
}

.register-marketing-brand-name {
  font-size: 1.35rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.register-marketing-copy h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
}

.register-marketing-description {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 0;
  white-space: pre-line;
}

.register-marketing-benefits {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.register-marketing-benefit {
  margin-bottom: .75rem;
  overflow-wrap: anywhere;
  padding-left: 1.75rem;
  position: relative;
}

.register-marketing-benefit::before {
  color: #007bff;
  content: '\2713';
  font-weight: 700;
  left: 0;
  position: absolute;
}

.register-marketing-image {
  margin: 2rem 0 0;
}

.register-marketing-image img {
  border-radius: .5rem;
  display: block;
  height: auto;
  max-height: 360px;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

.register-marketing-proof {
  border-left: .25rem solid #007bff;
  margin: 2rem 0 0;
  padding-left: 1rem;
}

.register-marketing-proof blockquote {
  background: transparent;
  border: 0;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 0;
  white-space: pre-line;
}

.register-marketing-proof figcaption {
  font-size: .9rem;
  margin-top: .5rem;
  overflow-wrap: anywhere;
}

.register-marketing-form-panel {
  align-self: center;
  display: flex;
  grid-area: form;
  justify-content: center;
}

.register-marketing-form-panel .register-box {
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .register-marketing-layout {
    grid-template-areas:
      "intro"
      "form"
      "details";
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding: 2rem 1rem;
    row-gap: 2rem;
  }

  .register-marketing-panel,
  .register-marketing-details {
    text-align: center;
  }

  .register-marketing-brand {
    justify-content: center;
  }

  .register-marketing-benefit {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    text-align: left;
    width: fit-content;
  }

  .register-marketing-image {
    display: none;
  }

  .register-marketing-details-image-only {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .register-marketing-layout {
    gap: 1rem;
    padding: 1rem;
  }

  .register-marketing-form-panel .register-box {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .register-marketing-layout {
    scroll-behavior: auto;
  }
}


#single-page {
  background-color: #e9ecef;
  width: calc(100% - 2rem);
  max-width: 1024px;
  margin: 38px auto;
}

.single-box {
  width: 100%;
}

.single-card-body {
  overflow-wrap: anywhere;
}

@media screen and (max-width: 576px) {
  #single-page {
    margin: 1rem auto;
  }

  .single-card-body {
    padding: 1rem;
  }
}

#single-page h2 {
  font-size: 1.3em;
  margin: 10px auto;
}

/* Others */

iframe {
  max-width: 100%;
}

/* Contenedor General para Medios (YouTube, MP4, Imágenes) */
.chat-media-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

/* Video Contenedores - Relación 16:9 */
.chat-video-container {
  padding-bottom: 56.25%; /* Relación 16:9 */
  height: 0;
}

/* Ajuste de iframe para YouTube */
.chat-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ajuste de video MP4 */
.chat-media-container video {
  width: 100%;
  height: auto;
  display: block;
}

/* Ajuste de Imágenes */
.chat-media-container img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px; /* Máximo alto para imágenes */
  object-fit: contain;
}

.welcome-button button {
  margin: 20px 5px 10px;
  border-radius: 20px;
  cursor: pointer;
}

.btn-outline-light {
  color: #6d6d6d;
  border-color: #9E9E9E;
  box-shadow: 1px 1px 1px #dddddd;
  font-size: 0.9em;
}

/* About */
.about-identity {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.about-logo {
  height: 96px;
  max-width: 180px;
  object-fit: contain;
  width: auto;
}

.about-logo--developer {
  display: block;
  margin-bottom: 1rem;
}

.about-name {
  font-size: 1.35rem;
  margin-bottom: .25rem;
}

.about-detail-group {
  border-top: 1px solid rgba(108, 117, 125, .2);
  margin-top: 1rem;
  padding-top: 1rem;
}

.about-detail-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .75rem;
}

.about-description {
  white-space: normal;
}

.about-developer-website {
  margin-bottom: 1rem;
}

.about-cta {
  display: inline-block;
  font-weight: 600;
}

.about-cta:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .45);
}

.about-version-grid,
.about-technical-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-version-card {
  border: 1px solid rgba(108, 117, 125, .2);
  border-radius: .25rem;
  padding: 1rem;
}

.about-version-card h3 {
  font-size: 1.05rem;
  margin: 0;
}

.about-version-value {
  font-family: monospace;
  font-size: 1.35rem;
  margin-top: .9rem;
  overflow-wrap: anywhere;
}

.about-status,
.about-compatibility {
  border-radius: 999px;
  display: inline-flex;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .35rem .65rem;
}

.about-status--available,
.about-status--compatible {
  background: #d4edda;
  color: #155724;
}

.about-status--mismatch {
  background: #fff3cd;
  color: #856404;
}

.about-status--unavailable {
  background: #f8d7da;
  color: #721c24;
}

.about-compatibility {
  margin-top: 1rem;
}

@media screen and (max-width: 768px) {
  .about-version-grid,
  .about-technical-grid {
    grid-template-columns: 1fr;
  }

  .about-status {
    align-items: flex-end;
    text-align: right;
  }
}