.form-background {
  background-image: url(/assets/form_bg-d8b9d9c35c6aec22f39690f6f9d831bc74d83700738f4b6ccbe1e121048907fa.png);
  background-size: cover;
  background-position: center;
}

.admin-background {
  background-image: url(/assets/admin_session_bg-4831dca5e3f3a0126c811d33c170b1ef04229fc3d25197376639f08bf9d3308d.png);
  background-size: cover;
  background-position: center;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'Proxima Nova';
  src: url(/assets/proximanova-bold-27d6aed383cace5eb9ae385fd197e40210a7e33677efd673e012ff6fba19739c.woff2) format('woff2'),
       url(/assets/proximanova-bold-ce6853fb39dc9b6587e7adbe2a196ab44883290c00ca5261ed2adf920e15a8e6.woff) format('woff');
  font-weight: bold;
  font-style: bold;
}

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

body {
  @apply dark:text-white dark:bg-black font-assistant text-black bg-neutral-100 text-lg;
}

.input_label{
  @apply text-neutral-900 dark:text-neutral-50 text-sm mb-2 font-assistant;
}

.main_button{
  @apply flex items-center h-fit justify-center uppercase bg-black hover:bg-neutral-700 dark:bg-brand-500  px-8 py-2 text-base font-bold w-fit text-white cursor-pointer dark:hover:bg-brand-400 rounded-sm;
}

.main_button_sm{
  @apply flex items-center h-fit justify-center uppercase bg-black hover:bg-neutral-700 dark:bg-brand-500 px-4 py-2 text-xs font-bold w-fit text-white cursor-pointer dark:hover:bg-brand-400 rounded-sm;
}

.secundary_button{
  @apply flex items-center justify-center uppercase border border-black dark:border-brand-500 px-2 py-2 text-xs font-bold w-fit text-black dark:text-brand-500 cursor-pointer hover:border-brand-500 dark:hover:border-white hover:text-brand-500 dark:hover:text-white rounded-sm;
}

.select-style select{
    @apply min-h-[48px] cursor-pointer rounded-sm dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:focus:border-2 dark:focus:border-neutral-50 focus:ring-0 dark:text-white placeholder:text-neutral-600;
}

.send_button{
  @apply uppercase dark:bg-brand-500 bg-black px-2 py-2 text-xs font-bold w-fit text-white cursor-pointer dark:hover:bg-brand-400 hover:bg-neutral-700 rounded-sm absolute right-2 bottom-2;
}

.subtitle{
  @apply uppercase font-bold text-xl;
}

.form{
  @apply w-full rounded-sm flex flex-col items-center space-y-6 max-w-lg;
}

.form_container{
  @apply flex flex-col flex-grow space-y-12 items-center justify-between p-6 xl:p-10 2xl:px-16  w-full mx-auto md:w-3/4 lg:w-1/2 xl:w-2/5 xl:max-w-lg;
}

.input-style{
  @apply min-h-[48px] w-full rounded-sm dark:bg-black border-neutral-700 border-2 dark:focus:border-neutral-50 focus:ring-0 dark:text-white placeholder:text-neutral-600;
}

.welcome-container{
  @apply flex flex-col text-center flex-grow w-full justify-center items-center space-y-8 font-assistant py-6 xl:p-0;
}

.new_message{
  @apply relative;
}

/* .assistant_message ol li{
  @apply text-xl mt-4;
}

.assistant_message ul{
  @apply px-6 mt-4;
}

.assistant_message ul li{
  @apply text-base font-normal my-1;
} */

.assistant_message {
  @apply py-6 border-t border-brand-500;
}

.user_message {
  @apply p-4 border border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 bg-neutral-200 mb-8 rounded-sm;
}

.report h1 {
  @apply text-2xl font-bold py-3;
}

.report h2 {
  @apply text-xl font-bold py-2;
}

.report h3 {
  @apply text-lg font-bold py-1;
}

.report h4 {
  @apply text-base font-bold py-1
}

.report ul li strong{
  @apply font-proxima text-brand-500;
}

.report ul{
  @apply pb-4 px-6;
}

.report p{
  @apply px-6
}

.admin-chat-container {
  @apply max-w-2xl space-y-6 w-full mx-auto p-4;
}

.questionnaire_label{
  @apply font-bold text-xl;
}

.options-container{
  @apply space-y-2 px-6 pb-6 border-b border-brand-500;
}

.radio-style{
  @apply text-brand-500 h-4 !w-4 focus:outline-none focus:ring-0 focus:border-none;
}
.persona{
  @apply space-y-12 font-assistant mt-12;
}

.persona .quote {
  @apply text-xl italic text-center text-brand-400;
}

.persona p{
  @apply text-xl;
}

.persona ol{
  @apply space-y-6;
}

.persona strong{
  @apply block;
}

.chat_history {
  p {
    @apply py-1;
  }
  strong{
    @apply text-brand-400;
  }
  h1, h2, h3, h4 {
    @apply text-brand-500;
  }
  h1 {
    @apply text-2xl font-bold py-3;
  }
  h2 {
    @apply text-xl font-bold py-2;
  }
  h3 {
    @apply text-xl font-bold py-2;
  }
  h4 {
    @apply text-lg font-bold py-2;
  }
  hr{
    @apply border-neutral-700 py-2;
  }
  li{
    @apply list-disc;

    ::marker {
      @apply text-brand-500;
    }
  }
}

.archetype_pill{
  @apply bg-neutral-300 dark:bg-black inline-block rounded-full dark:text-brand-500 uppercase text-sm font-proxima py-2 px-4 w-fit;
}

textarea[data-controller="autoresize"] {
  min-height: 3em;
  overflow-y: hidden;
  resize: none; /* opcional */
  transition: height 0.2s ease;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.field_with_errors input {
  width: 100%;
}

.loading {
  height: 0;
  width: 0;
  padding: 15px;
  border: 6px solid #ccc;
  border-right-color: #888;
  border-radius: 22px;
  -webkit-animation: rotate 1s infinite linear;
}

.loader-container {
  height: 60vh;
}

@-webkit-keyframes rotate {
  /* 100% keyframe for  clockwise.
     use 0% instead for anticlockwise */
  100% {
    -webkit-transform: rotate(360deg);
  }
}


@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));