/* ============================================================================================
   Gestor de campos compartido (ConfigCamposEntidad). Estilos de LAYOUT de la grilla estilo
   Airtable, GLOBALES (antes vivian en el <style> inline de Distribucion.razor y por eso no
   viajaban a los demas modulos: en /vehiculos el modal salia apilado). Al ser el componente
   compartido, sus estilos tienen que ser globales para que TODA adopcion (Unidades, Vehiculos,
   Mascotas, PQRSD, Seguros, Contratos, Tareas...) los herede.
   Colores por tokens de propia-tokens.css; los rgba/hex son color de dato o glow, no de diseno.
   Al cambiar este archivo, subir ?v=N en App.razor.
   ============================================================================================ */

/* Grilla: Orden+Visibilidad | Label | Tipo de dato | Configuracion especifica | Acciones */
.cga-grid { display: grid; grid-template-columns: 138px minmax(170px, 1.4fr) minmax(150px, 1fr) minmax(180px, 1.5fr) 140px; gap: 10px; align-items: center; }
.cga-head-row { padding: 6px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: var(--propia-text-faint); text-transform: uppercase; border-bottom: 1px solid var(--propia-border-divider); }
.cga-row { padding: 8px 10px; border-bottom: 1px solid var(--propia-border-divider); }
.cga-row--drag { opacity: .45; background: var(--propia-brand-soft); }

.cga-vacio { padding: 14px 10px; font-size: 12.5px; color: var(--propia-text-faint); }
/* Aviso de guardado fallido: sin esto el panel se queda mudo y parece que el boton no responde. */
.cga-error { display: flex; align-items: center; padding: 10px 12px; margin: 0 0 10px; font-size: 12.5px; color: var(--propia-danger); background: var(--propia-bg-app); border: 1px solid var(--propia-danger); border-radius: 9px; }

.cga-ctrl { display: flex; align-items: center; gap: 3px; }
.cga-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; color: var(--propia-text-faint); cursor: grab; flex-shrink: 0; }
.cga-grip:hover { color: var(--propia-brand); }
.cga-grip:active { cursor: grabbing; }
.cga-mini { width: 20px; height: 20px; border: 1px solid var(--propia-border-card); border-radius: 6px; background: var(--propia-bg-card); color: var(--propia-text-faint); font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cga-mini:hover { color: var(--propia-brand); border-color: var(--propia-brand); }
.cga-eye { width: 26px; height: 22px; border: 1px solid var(--propia-border-card); border-radius: 6px; background: var(--propia-bg-card); color: var(--propia-text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cga-eye.on { color: var(--propia-brand); border-color: var(--propia-brand-soft); background: var(--propia-brand-soft); }
.cga-eye:disabled { opacity: .45; cursor: default; }
.cga-nocol { font-size: 10px; font-weight: 700; color: var(--propia-text-faint); background: var(--propia-bg-app); border-radius: 6px; padding: 2px 7px; }

.cga-inp { width: 100%; box-sizing: border-box; border: 1px dashed var(--propia-border-input); border-radius: 7px; padding: 6px 9px; font-size: 12.5px; color: var(--propia-text-body); background: var(--propia-bg-card); outline: none; font-family: inherit; }
.cga-inp:focus { border-style: solid; border-color: var(--propia-brand); box-shadow: 0 0 0 2px rgba(109,79,227,.12); }
.cga-custom-lbl { font-size: 12.5px; font-weight: 700; color: var(--propia-text-body); }

.cga-tipo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cga-tipo-badge { font-size: 11.5px; font-weight: 700; color: var(--propia-text-secondary); background: var(--propia-bg-app); border: 1px solid var(--propia-border-card); border-radius: 7px; padding: 4px 9px; white-space: nowrap; }
.cga-tipo-badge--edit { color: var(--propia-brand); background: var(--propia-brand-soft); border-color: var(--propia-brand-soft); }
.cga-lock { color: var(--propia-text-faint); flex-shrink: 0; }
.cga-fija { font-size: 9px; font-weight: 800; letter-spacing: .3px; color: var(--propia-warn, #B45309); background: var(--propia-warn-soft, #FEF3C7); border-radius: 5px; padding: 1px 5px; }
/* Selector de tipo de dato (solo en los campos intercambiables). */
.cga-tipo-sel { border-style: solid; padding: 5px 8px; max-width: 150px; }

/* Editor de "configuracion especifica": decimales / miles / moneda / max caracteres. */
.cga-fmt { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cga-fmt-lbl { font-size: 11px; font-weight: 700; color: var(--propia-text-faint); text-transform: uppercase; letter-spacing: .3px; }
.cga-fmt-dec { border-style: solid; width: 58px; padding: 4px 6px; }
.cga-fmt-max { border-style: solid; width: 96px; padding: 4px 7px; }
.cga-fmt-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--propia-text-secondary); cursor: pointer; white-space: nowrap; }
.cga-fmt-tag { font-size: 10px; font-weight: 800; letter-spacing: .3px; color: var(--propia-brand); background: var(--propia-brand-soft); border-radius: 5px; padding: 2px 6px; }
.cga-cfg { min-width: 0; }
.cga-cfg-hint { font-size: 11.5px; color: var(--propia-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; }
.cga-row-act { display: flex; gap: 4px; justify-content: flex-end; }

/* Lista de opciones (campo propio o lista de sistema editable): filas + "Anadir nueva opcion". */
.cga-opts { padding: 10px 12px; margin: 0 0 4px; background: var(--propia-bg-app); border: 1px solid var(--propia-border-divider); border-radius: 9px; }
.cga-opts-list { display: flex; flex-direction: column; gap: 5px; max-width: 460px; }
.cga-opt-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 8px; flex-wrap: wrap; }
.cga-opt-row--base { background: var(--propia-bg-app); }
/* Opcion oculta: sigue existiendo (las filas que la usan la conservan), pero no se ofrece. */
.cga-opt-row--oculta { opacity: .55; background: var(--propia-bg-app); }
.cga-opt-move { display: flex; flex-direction: column; gap: 1px; }
.cga-opt-move .cga-mini { width: 18px; height: 14px; }
.cga-opt-lock { color: var(--propia-text-faint); flex-shrink: 0; }
.cga-opt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--propia-brand); flex-shrink: 0; }
.cga-opt-name { flex: 1; min-width: 0; font-size: 13px; color: var(--propia-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Renombrar la opcion en sitio (mismo hueco que el nombre, borde solo al hover/focus). */
.cga-opt-inp { flex: 1; min-width: 0; border-color: transparent; background: transparent; padding: 4px 6px; font-size: 13px; }
.cga-opt-row:hover .cga-opt-inp { border-color: var(--propia-border-input); }
.cga-opt-inp:focus { border-style: solid; border-color: var(--propia-brand); background: var(--propia-bg-card); box-shadow: 0 0 0 2px rgba(109,79,227,.12); }
.cga-opt-x { width: 24px; height: 24px; border: 1px solid var(--propia-border-card); border-radius: 7px; background: var(--propia-bg-card); color: var(--propia-text-faint); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cga-opt-x:hover { color: var(--propia-danger); border-color: var(--propia-danger); }
.cga-opt-add { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.cga-opt-add .cga-inp { flex: 1; border-style: solid; }

/* Color por opcion (chip): valor de la paleta compartida pintado inline; aqui solo el layout. */
.cga-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.cga-opt-colors { display: inline-flex; gap: 3px; align-items: center; }
.cga-sw { width: 15px; height: 15px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; outline: none; }
.cga-sw.on { border-color: var(--propia-text-body); }
.cga-sw:disabled { opacity: .5; cursor: default; }
.cga-sw-none { background: var(--propia-bg-card); border: 1px solid var(--propia-border-input); color: var(--propia-text-faint); font-size: 10px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

.cga-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.cga-add-btn { border: 1px solid var(--propia-brand-soft); background: var(--propia-brand-soft); color: var(--propia-brand); border-radius: 7px; font-size: 12.5px; font-weight: 700; padding: 6px 14px; cursor: pointer; font-family: inherit; }
.cga-add-btn:hover { filter: brightness(.97); }
.cga-add-btn:disabled { opacity: .5; cursor: default; }

/* En pantallas chicas la grilla necesita scroll horizontal (el modal la envuelve). */
@media (max-width: 1024px) { .cga-grid { min-width: 820px; } }

/* --- Formulario "Nuevo campo propio" y botones del gestor (antes dst-* locales de Distribucion,
   usados tambien por el componente; ahora globales para que la adopcion los herede). --- */
.dst-btn-soft { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--propia-brand-border); background: var(--propia-brand-soft-2); color: var(--propia-brand); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.dst-btn-soft:hover:not(:disabled) { filter: brightness(.97); }
.dst-btn-soft:disabled { opacity: .6; cursor: default; }
.dst-nf-inp { width: 100%; box-sizing: border-box; border: 1px dashed var(--propia-border-input); border-radius: 7px; padding: 5px 8px; font-size: 12.5px; color: var(--propia-text-body); background: var(--propia-bg-card); outline: none; font-family: inherit; }
.dst-nf-inp:focus { border-style: solid; border-color: var(--propia-brand); box-shadow: 0 0 0 2px rgba(109,79,227,.12); }
.dst-nfc-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--propia-text-faint); text-transform: uppercase; }
.dst-cfg-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--propia-border-divider); }
.dst-cfg-form-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--propia-text-secondary); margin-bottom: 10px; }
.dst-cfg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dst-cfg-form-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.dst-cfg-msg { margin-top: 10px; font-size: 12.5px; color: var(--propia-danger); }
.dst-cfg-sep { height: 1px; background: var(--propia-border-divider); margin: 16px 0; }

/* Fase 2: editor de fuentes de una Formula (lista de checkboxes de campos Numero/Moneda). */
.cga-formula-fuentes { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto;
  border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 8px 10px; background: var(--propia-bg-card); }
.cga-formula-fuente { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--propia-text-body); cursor: pointer; }
.cga-formula-fuente input { margin: 0; }

/* ===== Chrome del modal del gestor de campos (.cg-*) - GLOBAL =====
   Antes vivia solo en el <style> inline de DistribucionPanel.razor, asi que cualquier otra pagina
   que abriera el gestor (Residentes, y cada pestaña del hub de Configuracion que monta su Panel sin
   montar DistribucionPanel) se quedaba SIN estas reglas y el modal caia inline (position:static).
   Al vivir aqui (config-campos.css se carga siempre desde App.razor) el modal flota en todas. */
.cg-back { position: fixed; inset: 0; z-index: 1090; background: rgba(15,15,30,.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.cg-modal { width: 640px; max-width: calc(100vw - 32px); max-height: 84vh; display: flex; flex-direction: column; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.28); overflow: hidden; }
.cg-modal--wide { width: 980px; }
.cg-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--propia-border-divider); }
.cg-title { font-weight: 700; color: var(--propia-text-h1); font-size: 15px; }
.cg-sub { font-size: 12.5px; color: var(--propia-text-muted); margin-top: 2px; }
.cg-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--propia-text-muted); cursor: pointer; }
.cg-x:hover { color: var(--propia-text-body); }
.cg-body { padding: 16px 18px; overflow-y: auto; }
@media (max-width: 1024px) { .cg-modal--wide { width: calc(100vw - 32px); } .cg-body { overflow-x: auto; } }

/* ===== Cuerpo del modal de carga por Excel (HubCargaMasiva / DistribucionPanel / Documentos) - GLOBAL.
   Antes vivia en el <style> inline de DistribucionPanel.razor, asi que el modal abierto desde Residentes
   o el hub de Configuracion caia SIN estos estilos (dropzone y botones en bruto, bug "a veces el modal no
   se renderiza bien"). Al vivir aqui se estila igual en todas las paginas. */
.cg-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px; border: 2px dashed var(--propia-border-input); border-radius: 12px; color: var(--propia-brand, var(--propia-brand)); cursor: pointer; transition: border-color .12s, background .12s; }
.cg-drop:hover { border-color: var(--propia-brand, var(--propia-brand)); background: #FAF8FE; }
.cg-drop-t { font-size: 13.5px; font-weight: 700; color: var(--propia-text-body); }
.cg-drop-h { font-size: 12px; color: var(--propia-text-muted); }
.cg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cg-btn-ghost { height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.cg-btn-brand { height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--propia-brand, var(--propia-brand)); background: var(--propia-brand, var(--propia-brand)); color: var(--propia-text-inverse); font-size: 13px; font-weight: 700; cursor: pointer; }
.cg-btn-brand:disabled { opacity: .55; cursor: default; }
.cg-btn-danger { height: 36px; padding: 0 16px; border-radius: 9px; border: 0; background: #E5484D; color: var(--propia-text-inverse); font-size: 13px; font-weight: 700; cursor: pointer; }
.cg-btn-danger:hover:not(:disabled) { background: #D13438; }
.cg-btn-danger:disabled { opacity: .45; cursor: not-allowed; }
/* Nota informativa del paso 1 + panel de confirmacion del reemplazo */
.cg-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--propia-text-secondary); background: var(--propia-bg-card-soft); border: 1px solid #E7EDF3; border-radius: 8px; padding: 9px 11px; }
.cg-note b { color: var(--propia-text-body); }
.cg-confirm { text-align: center; padding: 4px 2px; }
.cg-confirm-icon { width: 50px; height: 50px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--propia-danger-soft); color: #E5484D; }
.cg-confirm-title { font-size: 16px; font-weight: 800; color: var(--propia-text-h1); margin-bottom: 8px; }
.cg-confirm-sub { font-size: 12.5px; line-height: 1.55; color: var(--propia-text-secondary); margin-bottom: 14px; text-align: left; }
.cg-confirm-sub b { color: var(--propia-text-body); }
.cg-confirm-chk { display: flex; align-items: flex-start; gap: 8px; text-align: left; font-size: 12.5px; color: var(--propia-text-body); background: #FEF6E7; border: 1px solid #F6E2B8; border-radius: 8px; padding: 9px 11px; cursor: pointer; }
.cg-confirm-chk input { margin-top: 2px; }
/* Barra de progreso indeterminada (el backend procesa en un solo POST, sin porcentaje real). */
.cg-progress { position: relative; height: 6px; margin-top: 14px; border-radius: 6px; background: #ECE6FB; overflow: hidden; }
.cg-progress-bar { position: absolute; top: 0; left: 0; height: 100%; width: 40%; border-radius: 6px; background: var(--propia-brand, var(--propia-brand)); animation: cgIndet 1.15s ease-in-out infinite; }
.cg-progress-txt { margin-top: 7px; font-size: 12px; color: var(--propia-brand); font-weight: 600; text-align: center; }
@keyframes cgIndet { 0% { left: -40%; } 100% { left: 100%; } }
[data-bs-theme="dark"] .cg-progress { background: #2D2A45; }
[data-bs-theme="dark"] .cg-note { background: var(--propia-bg-card); border-color: var(--propia-text-body); color: var(--propia-border-card-2); }
[data-bs-theme="dark"] .cg-confirm-title { color: #E4E8F0; }
[data-bs-theme="dark"] .cg-confirm-sub b { color: #E4E8F0; }
.cg-summary { border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.cg-summary.ok { background: var(--propia-ok-soft); border: 1px solid #BFE8D2; color: #0F8A4F; }
.cg-summary.warn { background: var(--propia-warn-soft); border: 1px solid #F5DDA8; color: #A8720C; }
.cg-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; margin-bottom: 12px; }
.cg-tbl th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--propia-text-faint); text-transform: uppercase; padding: 6px 10px; border-bottom: 1px solid var(--propia-border-divider); }
.cg-tbl td { padding: 7px 10px; border-bottom: 1px solid #F3F6F9; color: var(--propia-text-body); }
.cg-tbl td:nth-child(2), .cg-tbl td:nth-child(3) { text-align: center; width: 90px; }
.cg-row-warn td { background: var(--propia-danger-soft); }
.cg-log-title { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--propia-text-faint); text-transform: uppercase; margin: 6px 0; }
.cg-log { border: 1px solid #F0D9D9; border-radius: 10px; background: #FDF6F6; max-height: 220px; overflow-y: auto; }
.cg-log-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #F6E7E7; font-size: 12.5px; }
.cg-log-item:last-child { border-bottom: 0; }
.cg-log-hoja { font-weight: 700; color: #B4232A; min-width: 130px; }
.cg-log-fila { font-size: 11px; color: var(--propia-text-muted); min-width: 46px; }
.cg-log-msg { color: #6B4A4A; }

/* ===== 0.4: dropdown custom del TIPO de campo (categorias + descripcion), mas amigable que el <select> ===== */
.cga-tp { position: relative; min-width: 0; }
.cga-tp-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.cga-tp-cur { display: flex; flex-direction: column; min-width: 0; }
.cga-tp-cur-lbl { font-size: 13px; font-weight: 600; color: var(--propia-text-body); line-height: 1.3; }
.cga-tp-cur-desc { font-size: 11px; color: var(--propia-text-muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cga-tp-chev { flex: 0 0 auto; color: var(--propia-text-muted); transition: transform .15s; }
.cga-tp--open .cga-tp-chev { transform: rotate(180deg); }
.cga-tp-bd { position: fixed; inset: 0; z-index: 40; }
.cga-tp-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 41; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; box-shadow: 0 12px 30px rgba(16,32,52,.16); max-height: 320px; overflow-y: auto; padding: 4px; }
/* Variante FLOTANTE (position:fixed via JS): escapa el overflow del modal. El estilo inline fija
   top/left/width; aqui solo se anula el right:0 del panel base (si no, left+right+width chocan). */
.cga-tp-panel--float { right: auto; }
.cga-tp-cat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--propia-text-faint); padding: 8px 10px 3px; }
/* Buscador estilo Airtable, pegado arriba del panel */
.cga-tp-search { display: flex; align-items: center; gap: 6px; padding: 8px 10px; position: sticky; top: 0; z-index: 1; background: var(--propia-bg-card); border-bottom: 1px solid var(--propia-border-divider); color: var(--propia-text-muted); }
.cga-tp-search-inp { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--propia-text-body); }
/* Opcion = FILA de icono + nombre (sin descripcion) */
.cga-tp-opt { display: flex; flex-direction: row; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-family: inherit; }
.cga-tp-opt:hover { background: var(--propia-bg-hover); }
.cga-tp-opt.on { background: var(--propia-brand-soft); }
.cga-tp-ico { flex: 0 0 16px; width: 16px; height: 16px; color: var(--propia-text-muted); display: inline-flex; align-items: center; justify-content: center; }
.cga-tp-opt.on .cga-tp-ico { color: var(--propia-brand); }
.cga-tp-opt-lbl { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--propia-text-body); }
.cga-tp-opt.on .cga-tp-opt-lbl { color: var(--propia-brand); }
.cga-tp-opt-desc { font-size: 11.5px; color: var(--propia-text-muted); }
.cga-tp-empty { padding: 12px 10px; text-align: center; color: var(--propia-text-faint); font-size: 12.5px; }

/* ===== Editor de FORMULA multi-paso (Fase 2): pasos con operandos campo/constante/resultado-de-paso =====
   Las tarjetas de paso son COMPACTAS (~col-3, 1/3 del ancho) y FLUYEN (varias por fila), en vez de una
   gigante full-width por paso. Los controles internos llenan el ancho de la tarjeta angosta. */
.cga-fx { display: flex; flex-wrap: wrap; gap: 10px; }
.cga-fx-paso { flex: 0 0 calc((100% - 20px) / 3); min-width: 200px; box-sizing: border-box; border: 1px solid var(--propia-border-card); border-radius: 10px; padding: 8px 10px; background: var(--propia-bg-card-soft); }
.cga-fx-paso-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cga-fx-paso-n { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--propia-text-faint); white-space: nowrap; }
.cga-fx-op { flex: 1 1 auto; min-width: 0; }
.cga-fx-op-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; flex-wrap: wrap; }
.cga-fx-op-row .cga-inp { flex: 1 1 90px; min-width: 0; }
.cga-fx-ab { flex: 0 0 auto; width: 14px; text-align: center; font-size: 12px; font-weight: 800; color: var(--propia-brand); }
.cga-fx-otipo { flex: 1 1 90px; min-width: 0; }
.cga-fx-addop { margin-top: 2px; }
.cga-fx-foot { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }

/* ===== Editor de opciones de campo LISTA (OpcionesLista): replica del prototipo de Unidades Privadas.
   LAYOUT y DIMENSIONES exactas al mockup; los COLORES de chrome via tokens del app (fuente de verdad,
   consistencia con el sistema); los swatches usan los 10 pasteles (data-color, inline desde PaletaChips). */
.ol-panel { background: var(--propia-bg-card-soft); border: 1px solid var(--propia-border-card); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.ol-row { display: flex; align-items: center; gap: 8px; }
.ol-row--drag { opacity: .5; }
.ol-grip { flex: 0 0 auto; cursor: grab; color: var(--propia-text-faint); font-size: 13px; user-select: none; }
.ol-sw-wrap { position: relative; flex: 0 0 auto; }
.ol-sw { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(0,0,0,.08); cursor: pointer; padding: 0; }
.ol-pal-bd { position: fixed; inset: 0; z-index: 60; }
.ol-pal { position: absolute; top: 30px; left: 0; z-index: 61; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; box-shadow: 0 12px 24px rgba(31,27,51,.18); padding: 8px; display: grid; grid-template-columns: repeat(5, 20px); gap: 6px; }
.ol-pal-sw { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(0,0,0,.06); cursor: pointer; padding: 0; }
.ol-pal-sw.on { outline: 2px solid var(--propia-brand); outline-offset: 1px; }
.ol-pal-none { display: flex; align-items: center; justify-content: center; background: var(--propia-bg-card); color: var(--propia-text-muted); font-size: 13px; line-height: 1; }
.ol-lbl { flex: 1; min-width: 0; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 6px 9px; font-size: 13px; outline: none; color: var(--propia-text-body); background: var(--propia-bg-card); font-family: inherit; }
.ol-lbl:focus { border-color: var(--propia-brand); }
.ol-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--propia-text-muted); cursor: pointer; font-size: 15px; padding: 2px 6px; line-height: 1; }
.ol-x:hover { color: var(--propia-danger); }
.ol-eye { flex: 0 0 auto; width: 26px; height: 22px; border: 1px solid var(--propia-border-card); border-radius: 6px; background: var(--propia-bg-card); color: var(--propia-text-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ol-eye.on { color: var(--propia-brand); border-color: var(--propia-brand-soft); background: var(--propia-brand-soft); }
.ol-lbl--off { opacity: .55; text-decoration: line-through; }
.ol-add { align-self: flex-start; border: none; background: transparent; color: var(--propia-brand); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 4px 2px; font-family: inherit; }

/* Picker de tipo (CampoTipoPicker): opcion bloqueada (no convertible al editar) y trigger bloqueado. */
.cga-tp-opt--lock { opacity: .55; cursor: not-allowed; }
.cga-tp-opt--lock .cga-tp-opt-lbl { display: inline-flex; align-items: center; gap: 5px; color: var(--propia-text-muted); }
.cga-tp-btn--lock { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: not-allowed; }
.cga-tp-btn--lock .cga-lock { color: var(--propia-text-muted); }