/* ==============================================================================
   CRM-GREU — Form System (FormUI)
   Material-style floating labels, underline inputs, file uploads,
   toggle switches, keypad chips, fieldsets, validation states
   ============================================================================== */

/* --- Form Grid ------------------------------------------------------------- */
.form-grid {
    display: grid;
    gap: 16px;
}
/* Responsive de .form-grid (2 columnas desde 640px): ver apps/shared/css/responsive.css */

/* Campo que ocupa las 2 columnas del .form-grid en vez de una sola celda —
   nombre ya usado en worker-form.php sin regla que lo implementara. */
.form-group-full {
    grid-column: 1 / -1;
}

/* --- Base Form Group ------------------------------------------------------- */
.form-group {
    margin-bottom: 22px;
}

.group-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Floating Label Container ---------------------------------------------- */
.form-group.floating {
    position: relative;
}

/* --- Input Base ------------------------------------------------------------ */
.form-group.floating > input,
.form-group.floating > select,
.form-group.floating > textarea {
    width: 100%;
    height: 48px;
    padding: 18px 14px 6px;
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 5px 5px 0 0;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-appearance: none;
    appearance: none;
}

.form-group.floating > input:hover,
.form-group.floating > select:hover,
.form-group.floating > textarea:hover {
    background: var(--color-accent-soft);
}

.form-group.floating > input:focus,
.form-group.floating > select:focus,
.form-group.floating > textarea:focus {
    outline: none;
    border-bottom-color: var(--color-accent);
    background: var(--color-surface-strong);
}

/* --- Tamaño compacto (FormUI 'size' => 'sm') -------------------------------
   Pensado para filas de tabla (ver .of-lines-table en offers.php): la
   cabecera de columna ya hace de etiqueta, así que la etiqueta flotante
   propia del campo se oculta y se reduce la altura pensada para formularios
   verticales. Mismos campos base (input/select/textarea), nada más cambia —
   sigue siendo el mismo FormUI, solo más pequeño. */
.form-group.floating.form-group-sm {
    margin-bottom: 0;
}

.form-group.floating.form-group-sm > input,
.form-group.floating.form-group-sm > select,
.form-group.floating.form-group-sm > textarea {
    height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.form-group.floating.form-group-sm > label {
    display: none;
}

/* TagSelect (ver tag-select.js) sobre un campo 'sm': el componente esconde
   el <select> real y pinta su propio .tag-select-display, así que la regla
   de arriba (que apunta a "> select") no le llega — sin esto, un tag-select
   dentro de una fila de tabla junto a inputs/selects normales de tamaño
   'sm' quedaba más alto (48px, su tamaño por defecto) que el resto de
   campos de la misma fila (34px), descuadrando la fila. Mismas medidas que
   el resto de campos 'sm' de arriba. */
.form-group.floating.form-group-sm .tag-select-display {
    height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.form-group.floating.form-group-sm .tag-select-placeholder,
.form-group.floating.form-group-sm .tag-select-single-value {
    font-size: 13px;
}

.form-group.floating.form-group-sm .tag-select-toggle {
    width: 20px;
    height: 20px;
    font-size: 15px;
}

/* --- Floating Label -------------------------------------------------------- */
.form-group.floating > label {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-muted);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
}

/* Float up on focus */
.form-group.floating > input:focus ~ label,
.form-group.floating > select:focus ~ label,
.form-group.floating > textarea:focus ~ label {
    top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

/* Float up when has value */
.form-group.floating > input:not(:placeholder-shown) ~ label,
.form-group.floating > textarea:not(:placeholder-shown) ~ label {
    top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
}

/* Select always has value visually */
.form-group.floating > select ~ label {
    top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
}

/* multiSelect (tag-select): el <select> real queda oculto dentro de
   .tag-select (ver tag-select.js), así que la label ya no es hermana
   directa del select para el selector `select ~ label` de arriba —
   se replica el mismo estado "siempre flotada" vía :has(). z-index
   explícito porque TagSelect.init() inserta el wrapper .tag-select
   DESPUÉS del label en el DOM (a diferencia de select()/input(), donde
   el control va antes) — sin z-index, dos hermanos posicionados con
   z-index:auto se pintan en orden de documento, así que el fondo opaco
   de .tag-select-display tapaba físicamente el label. */
.form-group.floating:has(> .tag-select) > label {
    top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
    z-index: 2;
}

/* --- Input with Icon ------------------------------------------------------- */
.form-group.floating > .input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: 18px;
    pointer-events: none;
    transition: color 0.3s;
    z-index: 1;
}

.form-group.floating > input:focus ~ .input-icon,
.form-group.floating > input:not(:placeholder-shown) ~ .input-icon {
    color: var(--color-accent);
}

/* Add right padding when icon exists */
.form-group.floating:has(.input-icon) > input,
.form-group.floating:has(.input-icon) > select {
    padding-right: 40px;
}

/* --- Select with Icon -------------------------------------------------------
   El select ya tiene su flecha nativa a la derecha (ver ".form-group.floating
   > select" más abajo), así que el icono semántico va a la izquierda en vez
   de reutilizar .input-icon (evitaría solaparse con la flecha). */
.form-group.floating > .select-icon {
    position: absolute;
    left: 14px;
    /* No al 50% de la caja: el padding asimétrico (18px arriba para la
       etiqueta flotante, 6px abajo — ver ".form-group.floating > select"
       más abajo) hace que el texto del valor se pinte más abajo del centro
       geométrico de la caja de 48px. 30px es el centro real de esa zona de
       texto (18 + (48-18-6)/2), para que el icono quede a su altura y no a
       la altura de la etiqueta. */
    top: 30px;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.form-group.floating:has(.select-icon) > select {
    padding-left: 38px;
}

/* --- Textarea -------------------------------------------------------------- */
.form-group.floating > textarea {
    min-height: 100px;
    height: auto;
    padding-top: 16px;
    resize: vertical;
    line-height: 1.6;
}

/* --- Select --------------------------------------------------------------- */
.form-group.floating > select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* --- Validation: Error ----------------------------------------------------- */
.form-group.has-error > input,
.form-group.has-error > select,
.form-group.has-error > textarea {
    border-bottom-color: var(--color-danger);
}

.form-group.has-error > input:focus,
.form-group.has-error > select:focus,
.form-group.has-error > textarea:focus {
    border-bottom-color: var(--color-danger);
}

.form-group.has-error > label,
.form-group.has-error > input:focus ~ label,
.form-group.has-error > input:not(:placeholder-shown) ~ label {
    color: var(--color-danger);
}

.form-error {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-danger);
    margin-top: 6px;
    padding-left: 2px;
}

.doc-type-description-hint {
    font-style: italic;
}

.form-help {
    display: block;
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 6px;
    padding-left: 2px;
    line-height: 1.4;
}

/* Buscador genérico de <select> largos (CRM.enhanceSelectSearch, utils.js). */
.select-search-input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 5px 9px;
    font-size: 12.5px;
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-subtle);
    color: var(--color-text);
    outline: none;
}

.select-search-input:focus {
    border-color: var(--color-primary);
    border-style: solid;
}

/* --- Secciones de formulario en modo "portlet" (<details> nativos) ---------
   Agrupa un formulario largo en bloques colapsables independientes entre sí
   (no exclusivos como un acordeón clásico: se puede tener varios abiertos a
   la vez) — usado en el formulario único de trabajador (worker-form.php),
   genérico para cualquier formulario largo. Sin JS: el estado open/closed
   lo gestiona el propio <details>. */
.form-portlet {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface);
    margin-bottom: 14px;
}

.form-portlet-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    user-select: none;
}

.form-portlet-header::-webkit-details-marker { display: none; }
.form-portlet-header::marker { content: ''; }

.form-portlet-chevron {
    font-size: 18px;
    color: var(--color-muted);
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.form-portlet[open] > .form-portlet-header .form-portlet-chevron {
    transform: rotate(0deg);
}

.form-portlet-header:hover {
    background: var(--color-bg-subtle);
}

.form-portlet[open] > .form-portlet-header {
    border-bottom: 1px solid var(--color-border-soft);
}

.form-portlet-body {
    padding: 16px;
}

/* Badge de edad calculada en vivo bajo "Fecha de nacimiento" (ver
   initWorkerFormExtras() en workers.js) — genérico, reutilizable en
   cualquier campo de fecha de nacimiento de la plataforma. */
.age-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--color-bg-subtle);
    color: var(--color-muted);
}

.age-badge i {
    font-size: 12px;
}

/* --- Tooltip on hover ('tooltip' => ... en FormUI) --------------------------
   Icono (i) en la esquina superior derecha del campo; al pasar el cursor o
   recibir foco (tabindex=0, accesible por teclado) se despliega el contenido.
   Complementa a .form-help (siempre visible); admite <b>/<i> y saltos \n
   (ver FormUI::formatTooltipText()). Genérico a toda la plataforma. */
.form-group {
    position: relative;
}

.form-tooltip {
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--color-muted);
    cursor: help;
    line-height: 1;
    z-index: 5;
}

.form-tooltip i {
    font-size: 15px;
}

.form-tooltip:hover,
.form-tooltip:focus {
    color: var(--color-primary);
}

.form-tooltip-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: -4px;
    width: max-content;
    max-width: 340px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 400;
    white-space: normal;
    z-index: 60;
}

.form-tooltip:hover .form-tooltip-content,
.form-tooltip:focus .form-tooltip-content,
.form-tooltip:focus-within .form-tooltip-content {
    display: block;
}

/* En selects, el icono no debe pisar la flecha nativa. */
.form-group.floating > select ~ .form-tooltip {
    right: 28px;
}

/* --- Disabled state -------------------------------------------------------- */
.form-group.floating > input:disabled,
.form-group.floating > select:disabled,
.form-group.floating > textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg);
}

/* --- File Input ------------------------------------------------------------- */
.file-preview {
    width: 200px;
    height: 120px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: var(--color-bg);
    transition: border-color 0.3s, background 0.3s;
}

.file-preview:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.file-preview.drag-over {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    box-shadow: 0 0 0 3px var(--color-success-soft);
}

.file-preview.empty {
    color: var(--color-muted);
}

.file-preview.empty i {
    font-size: 32px;
    opacity: 0.4;
}

.file-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/* Archivo no-imagen ya elegido (clic o drag&drop): icono + nombre, en vez
   del icono vacío por defecto (.file-preview.empty). */
.file-preview.file-preview-doc {
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.file-preview.file-preview-doc i {
    font-size: 32px;
    color: var(--color-accent);
}

.file-preview-name {
    max-width: 100%;
    padding: 0 8px;
    font-size: 12px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- MultiEmailInput (ver apps/shared/js/multi-email-input.js) ------------- */
.multi-email-input {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    background: var(--color-bg);
}

.multi-email-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.multi-email-chips:empty {
    margin-bottom: 0;
}

.multi-email-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 12px;
}

.multi-email-chip button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.multi-email-text {
    border: none;
    background: none;
    width: 100%;
    padding: 4px 2px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface-strong);
    cursor: pointer;
    transition: all 0.25s;
    user-select: none;
}

.file-label:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.file-label:active {
    transform: translateY(0);
}

.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* El <input type=file> real está oculto (arriba) — la validación "has-error"
   genérica (.form-group.has-error > input, más arriba en este fichero) no
   llega aquí porque el input no es hijo DIRECTO de .form-group, va anidado
   dentro de .file-label. Se resalta el propio botón visible en su lugar
   (ver markDocFileGroupError() en app.js). */
.file-label.has-error {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* --- Toggle Switch --------------------------------------------------------- */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--color-border);
    border-radius: 24px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch .slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.switch input:checked + .slider {
    background: var(--color-accent);
}

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

.switch input:focus + .slider {
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.switch input:disabled + .slider {
    cursor: default;
    opacity: 0.75;
}

.toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

/* --- Keypad / Chip Selector ------------------------------------------------ */
.keypad-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keypad-chip {
    padding: 8px 18px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted);
    background: var(--color-surface-strong);
    cursor: pointer;
    transition: all 0.25s;
    user-select: none;
}

.keypad-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
    transform: translateY(-1px);
}

.keypad-chip.selected {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-primary);
    font-weight: 600;
}

/* --- Fieldset -------------------------------------------------------------- */
.form-fieldset {
    border: 2px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: 24px;
    margin-bottom: 24px;
}

.form-fieldset legend {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Tag Select (multi-select con chips y select simple con buscador
   integrado, ver isMulti en tag-select.js) ----------------------------------- */
.tag-select {
    position: relative;
}

/* min-height, no height fijo: con 2+ chips seleccionados, flex-wrap los
   manda a una segunda línea — con height fijo esa segunda línea quedaba
   recortada/solapada en vez de empujar el contenedor hacia abajo. */
.tag-select-display {
    /* min-height: 48px; */
    height: 48px;
    padding: 18px 14px 6px;
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 5px 5px 0 0;
    background: var(--color-bg);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    transition: border-color 0.3s, background-color 0.3s;
}

.tag-select-display:hover {
    background: var(--color-accent-soft);
}

.tag-select-display.focused {
    border-bottom-color: var(--color-accent);
    background: var(--color-surface-strong);
}

/* Select simple deshabilitado (ver syncDisabledState en tag-select.js) —
   mismo aspecto que .form-group.floating > select:disabled más abajo. */
.tag-select-display.tag-select-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg);
}

/* Valor único del modo select simple (isMulti === false) — texto plano, sin
   fondo de chip ni botón de quitar (a diferencia de .tag-select-tag). */
.tag-select-single-value {
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Sin esto, un hijo de un contenedor flex (.tag-select-display) nunca se
       encoge por debajo del ancho de su propio contenido (min-width:auto
       por defecto) — el ellipsis nunca llega a activarse con un valor
       largo, el texto empuja el botón de flecha a una segunda línea
       (.tag-select-display tiene flex-wrap:wrap) y la fila dobla su alto.
       Mismo problema y arreglo para .tag-select-placeholder de aquí abajo. */
    min-width: 0;
}

.tag-select-tag {
    /* display: inline-flex; */
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--color-accent-soft);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    animation: tagIn 0.15s ease;
}

@keyframes tagIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.tag-select-tag .tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.15s;
}

.tag-select-tag .tag-remove:hover {
    background: rgba(7, 27, 53, 0.15);
}

/* Chip resumen "+N" (VISIBLE_TAG_LIMIT superado, ver renderTags() en
   tag-select.js) — mismo aspecto que un chip normal pero sin botón de
   quitar (quitar una de las ocultas se sigue haciendo abriendo el
   desplegable). El panel con el resto de nombres es CSS puro (:hover),
   sin JS ni librería de tooltips. */
.tag-select-tag-more {
    position: relative;
    cursor: default;
}

.tag-select-tag-more-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    max-width: 240px;
    padding: 8px 10px;
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-panel);
    z-index: 110;
    white-space: normal;
}

.tag-select-tag-more:hover .tag-select-tag-more-panel {
    display: flex;
}

.tag-select-tag-more-item {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text);
    white-space: nowrap;
}

.tag-select-placeholder {
    color: var(--color-muted);
    font-size: 14px;
    pointer-events: none;
    /* Mismo tratamiento que .tag-select-single-value — sin esto, un
       display estrecho (p.ej. .w360-docs-table .tag-select, max-width:
       150px) parte el placeholder en dos líneas ("Mover" / "a...") en vez
       de recortarlo con puntos suspensivos. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Ídem .tag-select-single-value: hijo de flex, necesita min-width:0
       para que el ellipsis de arriba realmente pueda encogerlo. */
    min-width: 0;
}

.tag-select-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    margin-left: auto;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.tag-select-toggle:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

/* position:fixed (no absolute) + colgado de document.body mientras está
   abierto (ver toggleDropdown() en tag-select.js): .tag-select vive dentro
   de contenedores con overflow:hidden en muchos sitios (.card, .modal-body,
   tablas...) que recortarían un desplegable position:absolute aunque
   tuviera z-index alto — mismo problema ya resuelto para
   .w360-tabs-more-menu (ver tabs.css) y mismo nivel de z-index que los
   demás flotantes colgados de body (.docs-trash-fab/.doc-type-popover) para
   quedar por encima incluso de un modal (z-index 750). top/left/width se
   calculan en JS al abrir (positionDropdown()), no aquí — width iguala el
   ancho del trigger, que puede ser tan estrecho como 150px en una celda de
   tabla (.w360-docs-table .tag-select), dejando el buscador y las opciones
   truncados/ilegibles. min-width pone un suelo de lectura razonable sin
   tocar el JS: convive con el width en línea porque min-width tiene
   prioridad sobre width cuando entran en conflicto (spec CSS), y no cambia
   nada donde el trigger ya es más ancho que esto (la inmensa mayoría de
   usos: filtros, modales...). */
.tag-select-dropdown {
    position: fixed;
    min-width: 220px;
    background: var(--color-surface-strong);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-panel);
    z-index: 2000;
    max-height: 240px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: dropdownIn 0.15s ease;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tag-select-dropdown.open {
    display: flex;
}

/* Modo "siempre abierto" (data-always-open="1", ver tag-select.js): el
   dropdown deja de ser un flotante posicionado por JS (position:fixed +
   top/left/width calculados al abrir, que aquí nunca se calculan porque
   nunca "se abre") y pasa a fluir en el documento, justo debajo de
   .tag-select-display, con el ancho del propio formulario. */
.tag-select-always-open .tag-select-dropdown {
    position: static;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    animation: none;
}

/* Buscador interno del desplegable (TagSelect, ver tag-select.js): fijo en la
   parte superior del dropdown, la lista de opciones (.tag-select-options) es
   la que hace scroll debajo. */
.tag-select-search {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px;
    border: none;
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-surface-strong);
    color: var(--color-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.tag-select-search::placeholder {
    color: var(--color-muted);
}

.tag-select-search:focus {
    background: var(--color-bg);
}

.tag-select-options {
    overflow-y: auto;
}

.tag-select-option {
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}

.tag-select-option:hover {
    background: var(--color-bg);
}

.tag-select-option.selected {
    background: var(--color-accent-soft);
    color: var(--color-primary);
    font-weight: 500;
}

.tag-select-option .check-icon {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.tag-select-option.selected .check-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.tag-select-option.selected .check-icon::after {
    content: '';
    width: 6px;
    height: 3px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.tag-select-empty {
    padding: 16px 14px;
    text-align: center;
    color: var(--color-muted);
    font-size: 13px;
}

/* --- Required field marker ------------------------------------------------- */
.required-mark {
    color: #e74c3c;
    font-weight: 700;
    margin-right: 2px;
    font-size: 1.1em;
    line-height: 1;
}