@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * 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.
 *


 */

 body{
    background-color: #FAF9F9;
    font-family: 'Inter', sans-serif;
}

.undeline-none {

}

h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 38.73px;
    color: #606060;
}

h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 20.57px;
    color: #606060;
}

p {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 18.15px;
    color: #828282;
}

.button {
    min-width: 120px;
    padding: 0 24px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    line-height: 1;
}
  
  .button-primary {
    background-color: #434BAC;
    color: white;
    border: 1px solid #434BAC;
  }
  
  .button-secondary {
    background-color: #D4D7EB;
    color: #434BAC;
    border: none;
  }
  
  .button-outline {
    background-color: transparent;
    color: #434BAC;
    border: 2px solid #434BAC;
  }

  .button-muted {
        background-color: white;
        color: #606060;
        border: 1px solid #E5E7EB;
  }
  
  .button-disabled {
    background-color: #E0E0E0;
    color: #828282;
    border: none;
  }
  
  .button-outline-selected {
    color: white;
    background-color: #434BAC;
}

.autocomplete-results {
    position: absolute;
    z-index: 1000;
    background-color: white;
    border: 1px solid #D4D7EB;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.autocomplete-item {
    padding: 10px;
    font-size: 14px;
    color: #434BAC;
    background-color: transparent;
    border-bottom: 1px solid #D4D7EB;
    cursor: pointer;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background-color: #f1f1f1;
}

.autocomplete-item.selected {
    background-color: #D4D7EB;
    color: #434BAC;
}

/* =========================================
   PERSONALIZACIÓN TOM SELECT (Estilo Moderno)
   ========================================= */

/* 1. EL INPUT PRINCIPAL */
.ts-control {
    background-color: rgb(248 250 252 / 0.5) !important; /* bg-slate-50/50 */
    border: 1px solid #e2e8f0 !important; /* border-slate-200 */
    border-radius: 0.5rem !important; /* rounded-lg */
    padding: 10px 12px !important;
    font-size: 0.875rem !important; /* text-sm */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    transition: all 0.2s ease-in-out;
    min-height: 42px; /* Altura cómoda */
    color: #1e293b !important; /* text-slate-800 */
}

/* Estado Focus (Cuando escribes) */
.ts-wrapper.focus .ts-control {
    border-color: #4F46E5 !important; /* Tu color fmaxPrimary */
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) !important; /* Anillo de enfoque */
    background-color: #ffffff !important;
}

/* 2. CHIPS / ETIQUETAS SELECCIONADAS */
.ts-control .item {
    background-color: #eff6ff !important; /* blue-50 */
    color: #4338ca !important; /* blue-700 */
    border: 1px solid #c7d2fe !important; /* blue-200 */
    border-radius: 0.375rem !important; /* rounded-md */
    padding: 2px 8px !important;
    margin: 2px 4px 2px 0 !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
}

/* Chip activo (listo para borrar) */
.ts-control .item.active {
    background-color: #4338ca !important;
    color: white !important;
    border-color: #4338ca !important;
}

/* 3. MENÚ DESPLEGABLE (LISTA) */
.ts-dropdown {
    border: 1px solid #f1f5f9 !important; /* slate-100 */
    border-radius: 0.75rem !important; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    margin-top: 8px !important;
    padding: 6px !important;
    background: white !important;
    z-index: 50 !important;
    overflow: hidden;
}

/* Opciones individuales */
.ts-dropdown .option {
    border-radius: 0.5rem !important;
    padding: 10px 12px !important;
    color: #475569 !important; /* slate-600 */
    cursor: pointer;
    font-size: 0.875rem; /* text-sm */
    transition: all 0.1s;
}

/* Hover y Activo */
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: #f8fafc !important; /* slate-50 */
    color: #4F46E5 !important; /* fmaxPrimary */
    font-weight: 600 !important;
}

/* Opción ya seleccionada */
.ts-dropdown .option.selected {
    background-color: #eff6ff !important; /* blue-50 */
    color: #1e293b !important;
}

/* Texto placeholder */
.ts-control input::-moz-placeholder {
    color: #94a3b8 !important; /* slate-400 */
}
.ts-control input::placeholder {
    color: #94a3b8 !important; /* slate-400 */
}

/* Flecha desplegable (opcional, para limpiarlo visualmente) */
.ts-wrapper.multi .ts-control > div {
    cursor: text;
}