/* Nuevo caso: botón de la cabecera (texto oscuro sobre el naranja de marca, para que se lea bien) y panel centrado de selección de protocolo (buscador y lista). */
.button-new-case { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: var(--on-brand); border: 0; border-radius: 10px; padding: 10px 14px; font-size: 1rem; font-weight: 750; white-space: nowrap; }
.button-new-case:hover { background: var(--brand-hover); }
.button-new-case:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.button-new-case [class*=" icon-"], .button-new-case [class^="icon-"] { font-size: 1rem; top: 0; }

.picker-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--scrim); }
.picker { width: 100%; max-width: 900px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; }
.picker-bar { display: flex; align-items: center; gap: 10px; }
.picker-label { flex: none; font-size: 0.78125rem; color: var(--muted); font-weight: 750; text-transform: uppercase; letter-spacing: .85px; }
.picker-search { flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); }
.picker-search:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
/* Filtro de la sesión (parámetros phone y company de la URL): líneas fijas bajo la barra de búsqueda, que no cambian al
   buscar. Cada empresa es un botón con el aspecto de los chips de respuestas; la elegida se resalta y lleva «×». */
.picker-filter { display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; color: var(--ink-2); }
.picker-filter[hidden] { display: none; }
.picker-filter-line { margin: 0; }
.picker-filter-companies { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.picker-companies { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-company { display: inline-flex; align-items: center; gap: 6px; max-width: 24ch; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 0.875rem; color: var(--ink-2); }
.picker-company-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.picker-company:hover { border-color: var(--deep); color: var(--ink); background: var(--surface); }
.picker-company:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.picker-company.seleccionada { border-color: var(--deep); color: var(--ink); background: var(--tint); font-weight: 750; }
.picker-company-remove { font-size: 1rem; line-height: 1; }
.picker-status { margin: 0; min-height: 16px; font-size: 0.84375rem; color: var(--muted); }
.picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.picker-item { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
/* Versión del protocolo: arriba a la derecha, pequeña y discreta; siempre en su sitio (la fila no cambia de tamaño),
   visible solo al pasar el ratón por la fila o al enfocarla. */
.picker-version { position: absolute; top: 4px; right: 10px; font-size: 0.6875rem; font-style: italic; font-weight: 400; color: var(--muted); visibility: hidden; pointer-events: none; }
.picker-item:hover .picker-version, .picker-item:focus-within .picker-version { visibility: visible; }
/* Hueco a la derecha para que el título nunca quede debajo de la versión. */
.picker-option, .picker-text { padding-right: 4.5rem; }
/* Protocolo válido: toda la fila es el botón; al pasar el ratón o enfocarlo se resalta y el texto va en negrita. */
.picker-option { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.picker-option:hover, .picker-option:focus-visible { background: var(--tint); }
.picker-option:hover .picker-title, .picker-option:focus-visible .picker-title { font-weight: 750; }
.picker-option:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.picker-item:has(.picker-option:hover) { border-color: var(--deep); }
.picker-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; text-align: left; }
.picker-title { font-size: 1rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.picker-invalid { background: var(--surface-2); }
.picker-invalid .picker-title { font-style: italic; font-weight: 500; color: var(--muted); }
.picker-reason { font-size: 0.78125rem; color: var(--ink-2); overflow-wrap: anywhere; }

/* Móvil: el panel ocupa todo el ancho. */
@media (max-width: 670px) {
  .picker-overlay { padding: 0; align-items: stretch; }
  .picker { max-width: none; max-height: none; border-radius: 0; }
}