/* Formularios genéricos */
.form-row .field-error { color: var(--color-danger); font-size:var(--font-size-xs); margin-top:.25rem; }
.form-row input:invalid, .form-row select:invalid, .form-row textarea:invalid { outline-color: var(--color-danger); }
.form-actions { display:flex; gap:.75rem; justify-content:flex-start; padding-left:110px; }
@media (max-width:600px){ .form-actions { padding-left:0; flex-wrap:wrap; } }

/* Rounded warning chip */
.warning-rounded { display:flex; align-items:center; gap:.5rem; color: var(--clr-dark-a0); background: var(--clr-warning-a20); border-left:4px solid var(--clr-warning-a10); border-radius: 999px; padding:.4rem .75rem; font-size:var(--font-size-sm); }
.warning-rounded .icon { color: var(--clr-warning-a0); }

/* Reglas de inputs y selects avanzadas movidas a `components/input.css` */
/* Mantén las reglas core de formularios aquí; la implementación de inputs/autofill/is-chrome/time-split/select.ui-list se centraliza en input.css */

/* ==================================================
	 Shared rules for channel multi-select + "pills"
	 These are used by both Campaign and Spot forms and
	 replace duplicated definitions in page-specific CSS.
	 Keep generic selectors so they apply within any form.
	 ================================================== */
.form-channels { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.form-channels .form-channels-help { font-size:var(--font-size-sm); color:var(--color-muted); max-width:280px; line-height:1.3; }
.form-channels .selected-channels { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-bottom:.35rem; }
.form-channels .selected-channel-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .5rem; font-size:.82rem; border-radius:999px; background: color-mix(in srgb, var(--ui-card-featured-bg) 85%, var(--color-bg) 15%); border:1px solid var(--border-color); color:var(--color-text); }
.form-channels .selected-channel-pill .remove { cursor:pointer; opacity:.8; padding-left:.25rem; font-size:.85rem; }
.form-channels > select[multiple] { flex: 0 0 240px; width:240px; box-sizing:border-box; order:1; }
.form-channels .form-channels-help { order:2; flex:1 1 auto; align-self:flex-start; margin-top:0.2rem; }
.form-channels .selected-channels { order:3; width:100%; margin-top:.5rem; display:flex; gap:.4rem; flex-wrap:wrap; }
@media (max-width:720px) {
	.form-channels { flex-direction:column; }
	.form-channels > select[multiple] { width:100%; flex:unset; min-width:unset; }
	.form-channels .selected-channels { width:100%; flex:unset; }
}

/* Estilo consistente para opciones seleccionadas (en ambos temas)
   - Texto en color primario (mejor contraste en modo claro)
   - Fondo con mezcla suave para evitar el azul nativo del sistema
*/
.form-channels > select[multiple] option:checked,
.form-channels > select[multiple]:focus option:checked,
.form-channels > select[multiple]:active option:checked,
.form-channels > select[multiple]:focus-visible option:checked {
	color: var(--color-primary) !important;
	background: color-mix(in srgb, var(--color-primary) 14%, var(--ui-combo-bg)) !important;
}

/* Opciones deshabilitadas */
.form-channels > select[multiple] option:checked:disabled {
	color: var(--color-muted) !important;
	background: color-mix(in srgb, var(--color-muted) 12%, var(--ui-combo-bg)) !important;
}

/* Inline field layout: label and control on same row */
.field.inline {
  display:flex;
  align-items:center;
  gap:.75rem;
}
.field.inline label { flex:0 0 160px; text-align:right; margin:0; }
.field.inline .control { flex:1; }
.field.inline .control .ui-input, .field.inline .control input[type='time'] { width:100%; }
.field.inline .control textarea { width:100%; }

/* Non-interactive switch styling inside tables/lists */
.ui-switch[aria-hidden='true'] { cursor:default; opacity:0.95; }