/* ═══════════════════════════════════════════════════
   Mejoras UI Amelia — Espacio Bienestar
   Oculta empleado + mejora vista de servicios
   ═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1 + 2. OCULTAR SELECTOR DE EMPLEADO Y "TARJETA DIGITAL"
   Amelia usa varias clases según versión; cubrimos las habituales.
   ───────────────────────────────────────────── */
body.aut-hide-employee .amelia-app-booking .em-employee,
body.aut-hide-employee .amelia-app-booking [class*="employee"],
body.aut-hide-employee .amelia-app-booking .am-select-employee,
body.aut-hide-employee .amelia-service-form [class*="employee"],
body.aut-hide-employee #amelia-app-booking [class*="employee"],
body.aut-hide-employee .amelia-app-booking .el-select[data-cy*="employee"],
body.aut-hide-employee .amelia-app-booking .em-employee-selection {
    display: none !important;
}

/* Ocultar el paso "Empleado" en el stepper/cabecera si aparece como pestaña */
body.aut-hide-employee .amelia-app-booking .am-fs__tabs [class*="employee"],
body.aut-hide-employee .amelia-app-booking .am-step[data-step*="employee"] {
    display: none !important;
}

/* La opción "Tarjeta Digital" del desplegable de empleados se oculta con JS
   (ver amelia-tweaks.js), porque CSS no puede filtrar por texto de forma fiable. */


/* ─────────────────────────────────────────────
   3. MEJORAR VISUALIZACIÓN DE CATEGORÍAS Y SERVICIOS
   Pasar de desplegable mezclado a algo más limpio tipo tarjetas.
   ───────────────────────────────────────────── */

/* Que las opciones de servicio se vean como tarjetas separadas */
body.aut-cards-view .amelia-app-booking .el-select-dropdown__item {
    padding: 12px 16px !important;
    border-bottom: 1px solid #eee6da !important;
    height: auto !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

/* Cabeceras de categoría (en gris) más marcadas y separadas */
body.aut-cards-view .amelia-app-booking .el-select-group__title,
body.aut-cards-view .amelia-app-booking [class*="category"] .el-select-group__title {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #b8956a !important;
    padding: 10px 16px 6px !important;
    background: #faf6ef !important;
    border-top: 1px solid #eee6da !important;
}

/* El servicio seleccionado, que se vea bien y no "raro" */
body.aut-cards-view .amelia-app-booking .el-input__inner {
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

/* Evitar que el texto largo del servicio se corte de forma fea */
body.aut-cards-view .amelia-app-booking .el-select__tags,
body.aut-cards-view .amelia-app-booking .el-select__tags-text {
    white-space: normal !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Un poco más de aire entre los selectores del formulario */
body.aut-cards-view .amelia-app-booking .am-select-service,
body.aut-cards-view .amelia-app-booking .am-select-category {
    margin-bottom: 14px !important;
}